From b1cfc3137db9e9dd12db05fa57f18c441f8feb54 Mon Sep 17 00:00:00 2001
From: Fini <fini.yang@gmail.com>
Date: Sun, 22 Feb 2026 08:19:02 +0800
Subject: [PATCH] fix(panels): improve AI chat panel overflow and color picker
 styling

- Fix chat panel overflow with proper flex layout and min-h-0
- Cap checklist height with scrollable overflow
- Adjust color picker input sizing
---
 src/components/panels/ai-chat-panel.tsx | 18 ++++++++++++------
 src/components/shared/color-picker.tsx  |  4 ++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/panels/ai-chat-panel.tsx b/src/components/panels/ai-chat-panel.tsx
index 3c56baa8b..eb7498bb6 100644
--- a/src/components/panels/ai-chat-panel.tsx
+++ b/src/components/panels/ai-chat-panel.tsx
@@ -22,6 +22,7 @@ import {
 import { trimChatHistory } from '@/services/ai/context-optimizer'
 import type { ChatMessage as ChatMessageType } from '@/services/ai/ai-types'
 import type { AIProviderType } from '@/types/agent-settings'
+import { CHAT_STREAM_THINKING_CONFIG } from '@/services/ai/ai-runtime-config'
 import ClaudeLogo from '@/components/icons/claude-logo'
 import OpenAILogo from '@/components/icons/openai-logo'
 import OpenCodeLogo from '@/components/icons/opencode-logo'
@@ -124,7 +125,6 @@ function useChatHandlers() {
   const addMessage = useAIStore((s) => s.addMessage)
   const updateLastMessage = useAIStore((s) => s.updateLastMessage)
   const setStreaming = useAIStore((s) => s.setStreaming)
-
   const handleSend = useCallback(
     async (text?: string) => {
       const messageText = text ?? input.trim()
@@ -235,7 +235,13 @@ function useChatHandlers() {
               g.models.some((m) => m.value === model),
             )?.provider
             let chatThinking = false
-            for await (const chunk of streamChat(CHAT_SYSTEM_PROMPT, trimmedHistory, model, undefined, currentProvider)) {
+            for await (const chunk of streamChat(
+              CHAT_SYSTEM_PROMPT,
+              trimmedHistory,
+              model,
+              CHAT_STREAM_THINKING_CONFIG,
+              currentProvider,
+            )) {
                if (chunk.type === 'thinking') {
                  // Show a brief thinking indicator so the UI isn't stuck on empty
                  if (!chatThinking && !accumulated) {
@@ -310,7 +316,7 @@ function FixedChecklist({ messages, isStreaming }: { messages: ChatMessageType[]
   const completed = items.filter((item) => item.done).length
 
   return (
-    <div className="border-t border-border bg-card/95">
+    <div className="shrink-0 border-t border-border bg-card/95">
       <button
         type="button"
         onClick={() => setCollapsed(!collapsed)}
@@ -332,7 +338,7 @@ function FixedChecklist({ messages, isStreaming }: { messages: ChatMessageType[]
         </div>
       </button>
       {!collapsed && (
-        <div className="px-3 pb-2.5 flex flex-col gap-1">
+        <div className="px-3 pb-2.5 flex max-h-44 flex-col gap-1 overflow-y-auto">
           {items.map((item, index) => (
             <div key={`${item.label}-${index}`} className="flex items-center gap-2 text-[11px] text-muted-foreground/90">
               <span
@@ -683,7 +689,7 @@ export default function AIChatPanel() {
     <div
       ref={panelRef}
       className={cn(
-        'absolute z-50 w-[320px] rounded-xl shadow-2xl border border-border bg-card/95 backdrop-blur-sm flex flex-col',
+        'absolute z-50 flex w-[320px] flex-col overflow-hidden rounded-xl border border-border bg-card/95 shadow-2xl backdrop-blur-sm',
         !dragStyle && CORNER_CLASSES[panelCorner],
       )}
         style={{ ...dragStyle, height: panelHeight }}
@@ -731,7 +737,7 @@ export default function AIChatPanel() {
       </div>
 
       {/* --- Messages --- */}
-      <div className="flex-1 overflow-y-auto px-3.5 py-3 bg-background/80 rounded-b-xl">
+      <div className="min-h-0 flex-1 overflow-y-auto rounded-b-xl bg-background/80 px-3.5 py-3">
         {messages.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-4">
             <p className="text-xs text-muted-foreground mb-4">
diff --git a/src/components/shared/color-picker.tsx b/src/components/shared/color-picker.tsx
index acd502b71..62e22899b 100644
--- a/src/components/shared/color-picker.tsx
+++ b/src/components/shared/color-picker.tsx
@@ -55,7 +55,7 @@ export default function ColorPicker({
             type="color"
             value={value.slice(0, 7)}
             onChange={handleNativeChange}
-            className="w-4 h-4 rounded border border-input/50 cursor-pointer bg-transparent p-0"
+            className="w-4 h-5 rounded  cursor-pointer bg-transparent p-0"
           />
         </div>
         <input
@@ -64,7 +64,7 @@ export default function ColorPicker({
           value={hexInput}
           onChange={handleHexChange}
           onBlur={handleBlur}
-          className="flex-1 bg-transparent text-foreground text-[11px] px-1.5 py-0.5 focus:outline-none font-mono tabular-nums min-w-0"
+          className="flex-1 bg-transparent text-foreground text-[11px] px-1.5 h-5 focus:outline-none font-mono tabular-nums min-w-0"
           placeholder="#000000"
         />
       </div>