diff --git a/web/static/css/style.css b/web/static/css/style.css index da1d7897..7cfb045f 100644 --- a/web/static/css/style.css +++ b/web/static/css/style.css @@ -536,6 +536,10 @@ body { display: none; } +.conversation-sidebar.collapsed .conversation-reasoning-card { + display: none; +} + .conversation-sidebar.collapsed .conversation-sidebar-header { flex-direction: column; align-items: center; @@ -1136,13 +1140,13 @@ header { .hitl-sidebar-card { border-top: 1px solid var(--border-color); background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 55%, #eef2f7 100%); - padding: 14px 12px 16px; + padding: 11px 12px; flex-shrink: 0; } .hitl-sidebar-card-header { display: flex; - align-items: flex-start; + align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; @@ -1160,7 +1164,7 @@ header { overflow: hidden; max-height: 500px; opacity: 1; - margin-top: 10px; + margin-top: 8px; transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.3s ease; } @@ -1176,19 +1180,19 @@ header { .hitl-sidebar-heading { display: flex; - align-items: flex-start; - gap: 10px; + align-items: center; + gap: 8px; min-width: 0; } .hitl-sidebar-icon { flex-shrink: 0; - width: 36px; - height: 36px; + width: 32px; + height: 32px; display: flex; align-items: center; justify-content: center; - border-radius: 10px; + border-radius: 9px; background: linear-gradient(145deg, rgba(0, 102, 255, 0.12), rgba(0, 102, 255, 0.06)); color: var(--accent-color); border: 1px solid rgba(0, 102, 255, 0.18); @@ -1197,27 +1201,27 @@ header { .hitl-sidebar-heading-text { display: flex; flex-direction: column; - gap: 2px; + gap: 1px; min-width: 0; } .hitl-sidebar-title { - font-size: 15px; + font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); - line-height: 1.25; + line-height: 1.2; } .hitl-sidebar-subtitle { font-size: 11px; font-weight: 500; color: var(--text-secondary); - line-height: 1.3; + line-height: 1.25; } .hitl-apply-btn { - padding: 8px 14px; + padding: 6px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; @@ -2409,64 +2413,114 @@ header { flex-shrink: 0; } -/* Eino：模型推理收进浮层，保持主输入行简洁 */ -.chat-reasoning-wrapper { +/* Eino：模型推理在对话列表侧栏底部，默认折叠 */ +.conversation-sidebar .chat-reasoning-wrapper { + width: 100%; + box-sizing: border-box; flex-shrink: 0; } -.chat-reasoning-inner { - position: relative; -} - -.chat-reasoning-btn { - max-width: 10.5rem; - padding-left: 0.5rem; - padding-right: 0.45rem; -} - -.chat-reasoning-btn .chat-reasoning-btn-icon { +.conversation-reasoning-card { + border-top: 1px solid var(--border-color); + background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 55%, #eef2f7 100%); + padding: 11px 12px; flex-shrink: 0; - font-size: 0.95rem; - line-height: 1; - opacity: 0.95; } -.chat-reasoning-btn.active .chat-reasoning-btn-icon { - opacity: 1; +.conversation-reasoning-card-header { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0; + width: 100%; + padding: 0; + margin: 0; + border: none; + background: transparent; + cursor: pointer; + text-align: left; + font: inherit; + color: inherit; + -webkit-appearance: none; + appearance: none; + border-radius: 0; } -.chat-reasoning-btn .chat-reasoning-btn-summary { - max-width: 7.6rem; +.conversation-reasoning-card-header:hover .conversation-reasoning-title { + color: var(--accent-color); +} + +.conversation-reasoning-heading { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; + flex: 1; +} + +.conversation-reasoning-icon { + flex-shrink: 0; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 9px; + background: linear-gradient(145deg, rgba(0, 102, 255, 0.12), rgba(0, 102, 255, 0.06)); + color: var(--accent-color); + border: 1px solid rgba(0, 102, 255, 0.18); +} + +.conversation-reasoning-icon svg { + display: block; +} + +.conversation-reasoning-heading-text { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 1px; +} + +.conversation-reasoning-title { + font-size: 14px; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--text-primary); + line-height: 1.2; +} + +.conversation-reasoning-summary { + font-size: 11px; + font-weight: 500; + color: var(--text-secondary); + line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.chat-reasoning-btn.active { - border-color: rgba(49, 130, 206, 0.45); - background: rgba(49, 130, 206, 0.06); +.conversation-reasoning-body { + overflow: hidden; + max-height: 280px; + opacity: 1; + margin-top: 8px; + padding-bottom: 0; + transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.3s ease; } -.chat-reasoning-panel { - position: absolute; - bottom: calc(100% + 8px); - left: 0; - width: 288px; - max-width: calc(100vw - 32px); - background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.08); - border-radius: 16px; - padding: 12px; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04); - z-index: 1000; - display: flex; - flex-direction: column; - gap: 10px; - text-align: left; +.conversation-reasoning-card.conversation-reasoning-collapsed .conversation-reasoning-body { + max-height: 0; + opacity: 0; + margin-top: 0; + padding-bottom: 0; + pointer-events: none; } -.chat-reasoning-panel-header { - margin-bottom: 0; +.conversation-reasoning-body .chat-reasoning-panel-hint { + margin-top: 0; + margin-bottom: 8px; } .chat-reasoning-panel-hint { diff --git a/web/static/js/chat.js b/web/static/js/chat.js index b0505aaf..26fb02e1 100644 --- a/web/static/js/chat.js +++ b/web/static/js/chat.js @@ -534,34 +534,32 @@ function updateChatReasoningSummary() { } function closeChatReasoningPanel() { - const panel = document.getElementById('chat-reasoning-panel'); - const btn = document.getElementById('chat-reasoning-btn'); - if (panel) panel.style.display = 'none'; - if (btn) { - btn.classList.remove('active'); - btn.setAttribute('aria-expanded', 'false'); + const wrap = document.getElementById('chat-reasoning-wrapper'); + const toggle = document.getElementById('conversation-reasoning-toggle'); + if (wrap) wrap.classList.add('conversation-reasoning-collapsed'); + if (toggle) toggle.setAttribute('aria-expanded', 'false'); +} + +function toggleConversationReasoningCard() { + const wrap = document.getElementById('chat-reasoning-wrapper'); + const toggle = document.getElementById('conversation-reasoning-toggle'); + if (!wrap || !toggle) return; + wrap.classList.toggle('conversation-reasoning-collapsed'); + const collapsed = wrap.classList.contains('conversation-reasoning-collapsed'); + toggle.setAttribute('aria-expanded', collapsed ? 'false' : 'true'); + if (!collapsed) { + if (typeof closeAgentModePanel === 'function') { + closeAgentModePanel(); + } + if (typeof closeRoleSelectionPanel === 'function') { + closeRoleSelectionPanel(); + } + updateChatReasoningSummary(); } } function toggleChatReasoningPanel() { - const panel = document.getElementById('chat-reasoning-panel'); - const btn = document.getElementById('chat-reasoning-btn'); - if (!panel || !btn) return; - const isOpen = panel.style.display === 'flex'; - if (isOpen) { - closeChatReasoningPanel(); - return; - } - if (typeof closeAgentModePanel === 'function') { - closeAgentModePanel(); - } - if (typeof closeRoleSelectionPanel === 'function') { - closeRoleSelectionPanel(); - } - updateChatReasoningSummary(); - panel.style.display = 'flex'; - btn.classList.add('active'); - btn.setAttribute('aria-expanded', 'true'); + toggleConversationReasoningCard(); } function restoreChatReasoningControlsFromStorage() { @@ -619,6 +617,7 @@ if (typeof window !== 'undefined') { window.buildReasoningRequestPayload = buildReasoningRequestPayload; window.closeChatReasoningPanel = closeChatReasoningPanel; window.toggleChatReasoningPanel = toggleChatReasoningPanel; + window.toggleConversationReasoningCard = toggleConversationReasoningCard; window.updateChatReasoningSummary = updateChatReasoningSummary; } @@ -7377,8 +7376,8 @@ document.addEventListener('click', function(event) { } const reasoningWrap = document.getElementById('chat-reasoning-wrapper'); - const reasoningPanel = document.getElementById('chat-reasoning-panel'); - if (reasoningWrap && reasoningPanel && reasoningPanel.style.display === 'flex') { + if (reasoningWrap && reasoningWrap.style.display !== 'none' && + !reasoningWrap.classList.contains('conversation-reasoning-collapsed')) { if (!reasoningWrap.contains(event.target)) { closeChatReasoningPanel(); } diff --git a/web/templates/index.html b/web/templates/index.html index 2108d5dd..40737580 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -792,11 +792,51 @@
+
-