Improve and condense related controls

This commit is contained in:
2026-02-15 22:11:17 +00:00
parent ae3365e165
commit 981ee56de7
18 changed files with 1340 additions and 209 deletions

View File

@@ -76,6 +76,21 @@
<span class="icon is-small"><i class="{{ manual_icon_class }}"></i></span>
<span>Manual Text Mode</span>
</a>
{% if compose_widget_url %}
<button
type="button"
class="button is-light is-small js-widget-spawn-trigger is-hidden"
data-widget-url="{{ compose_widget_url }}"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-get="{{ compose_widget_url }}"
hx-target="#widgets-here"
hx-swap="afterend"
title="Open Manual Text widget here"
aria-label="Open Manual Text widget here">
<span class="icon is-small"><i class="fa-solid fa-table-cells-large"></i></span>
<span>Widget</span>
</button>
{% endif %}
</div>
{% endif %}
</div>
@@ -113,37 +128,74 @@
<div class="ai-response-capsule" style="margin-bottom: 0.5rem; border: 1px solid rgba(0, 0, 0, 0.16); border-radius: 8px; padding: 0.5rem 0.6rem;">
<div class="is-flex is-justify-content-space-between is-align-items-center" style="margin-bottom: 0.4rem;">
<div class="tags" style="margin-bottom: 0.25rem;">
<span class="tag is-info is-light is-small">Mitigation</span>
<span class="tag is-info is-light is-small">Control</span>
<span class="tag is-warning is-light is-small">AI Output</span>
</div>
<div class="tabs is-small is-toggle is-toggle-rounded ai-top-tabs" style="margin-bottom: 0;">
<ul>
<li id="ai-tab-{{ person.id }}-plan_board" class="is-active ai-top-tab-mitigation">
<a onclick="giaWorkspaceOpenTab('{{ person.id }}', 'plan_board', false); return false;">Plan</a>
<a
title="Control plan board"
aria-label="Control plan board"
onclick="giaWorkspaceOpenTab('{{ person.id }}', 'plan_board', false); return false;">
<span class="icon is-small"><i class="fa-solid fa-diagram-project"></i></span>
</a>
</li>
<li id="ai-tab-{{ person.id }}-corrections" class="ai-top-tab-mitigation">
<a onclick="giaWorkspaceOpenTab('{{ person.id }}', 'corrections', false); return false;">Corrections</a>
<a
title="Corrections"
aria-label="Corrections"
onclick="giaWorkspaceOpenTab('{{ person.id }}', 'corrections', false); return false;">
<span class="icon is-small"><i class="fa-solid fa-screwdriver-wrench"></i></span>
</a>
</li>
<li id="ai-tab-{{ person.id }}-engage" class="ai-top-tab-mitigation">
<a onclick="giaWorkspaceOpenTab('{{ person.id }}', 'engage', false); return false;">Engage</a>
<a
title="Engage"
aria-label="Engage"
onclick="giaWorkspaceOpenTab('{{ person.id }}', 'engage', false); return false;">
<span class="icon is-small"><i class="fa-solid fa-paper-plane"></i></span>
</a>
</li>
<li id="ai-tab-{{ person.id }}-fundamentals" class="ai-top-tab-mitigation">
<a onclick="giaWorkspaceOpenTab('{{ person.id }}', 'fundamentals', false); return false;">Fundamentals</a>
</li>
<li id="ai-tab-{{ person.id }}-auto" class="ai-top-tab-mitigation">
<a onclick="giaWorkspaceOpenTab('{{ person.id }}', 'auto', false); return false;">Auto</a>
<a
title="Fundamentals"
aria-label="Fundamentals"
onclick="giaWorkspaceOpenTab('{{ person.id }}', 'fundamentals', false); return false;">
<span class="icon is-small"><i class="fa-solid fa-book-open"></i></span>
</a>
</li>
<li id="ai-tab-{{ person.id }}-ask_ai" class="ai-top-tab-mitigation">
<a onclick="giaWorkspaceOpenTab('{{ person.id }}', 'ask_ai', false); return false;">Ask AI</a>
<a
title="Ask AI"
aria-label="Ask AI"
onclick="giaWorkspaceOpenTab('{{ person.id }}', 'ask_ai', false); return false;">
<span class="icon is-small"><i class="fa-solid fa-robot"></i></span>
</a>
</li>
<li id="ai-tab-{{ person.id }}-summarise" class="ai-top-tab-output ai-top-tab-output-start">
<a onclick="giaWorkspaceOpenTab('{{ person.id }}', 'summarise', false); return false;">Summary</a>
<a
title="Summary"
aria-label="Summary"
onclick="giaWorkspaceOpenTab('{{ person.id }}', 'summarise', false); return false;">
<span class="icon is-small"><i class="fa-solid fa-file-lines"></i></span>
</a>
</li>
<li id="ai-tab-{{ person.id }}-draft_reply" class="ai-top-tab-output">
<a onclick="giaWorkspaceOpenTab('{{ person.id }}', 'draft_reply', false); return false;">Draft</a>
<a
title="Draft"
aria-label="Draft"
onclick="giaWorkspaceOpenTab('{{ person.id }}', 'draft_reply', false); return false;">
<span class="icon is-small"><i class="fa-solid fa-pen-to-square"></i></span>
</a>
</li>
<li id="ai-tab-{{ person.id }}-extract_patterns" class="ai-top-tab-output">
<a onclick="giaWorkspaceOpenTab('{{ person.id }}', 'extract_patterns', false); return false;">Patterns</a>
<a
title="Patterns"
aria-label="Patterns"
onclick="giaWorkspaceOpenTab('{{ person.id }}', 'extract_patterns', false); return false;">
<span class="icon is-small"><i class="fa-solid fa-chart-line"></i></span>
</a>
</li>
</ul>
</div>
@@ -208,14 +260,18 @@
display: flex;
align-items: center;
justify-content: center;
min-height: 2.55rem;
min-height: 2.2rem;
min-width: 2.2rem;
padding: 0 0.55rem;
line-height: 1.15;
text-align: center;
white-space: normal;
white-space: nowrap;
}
@media screen and (max-width: 768px) {
.ai-person-widget .ai-top-tabs li a {
min-height: 2.8rem;
min-height: 2.1rem;
min-width: 2.1rem;
padding: 0 0.45rem;
}
}
</style>
@@ -356,7 +412,7 @@
}
const OPERATION_TABS = ["summarise", "draft_reply", "extract_patterns"];
const MITIGATION_TABS = ["plan_board", "corrections", "engage", "fundamentals", "auto", "ask_ai"];
const MITIGATION_TABS = ["plan_board", "corrections", "engage", "fundamentals", "ask_ai"];
const ALL_TOP_TABS = MITIGATION_TABS.concat(OPERATION_TABS);
function isMitigationTab(tabKey) {
@@ -483,6 +539,7 @@
if (cacheAllowed && !forceRefresh && entry) {
pane.innerHTML = entry.html;
pane.dataset.loaded = "1";
executeInlineScripts(pane);
pane.classList.remove("ai-animate-in");
void pane.offsetWidth;
pane.classList.add("ai-animate-in");
@@ -649,7 +706,7 @@
if (typeof window.giaMitigationShowTab !== "function") {
window.giaMitigationShowTab = function(pid, tabName) {
const names = ["plan_board", "corrections", "engage", "fundamentals", "auto", "ask_ai"];
const names = ["plan_board", "corrections", "engage", "fundamentals", "ask_ai"];
names.forEach(function(name) {
const pane = document.getElementById("mitigation-tab-" + pid + "-" + name);
const tab = document.getElementById("mitigation-tab-btn-" + pid + "-" + name);