From 73cd528a490de261e9747c8e575047352963db49 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Tue, 27 Jan 2026 22:39:15 +1300
Subject: [PATCH] feat(33): add clear chat history button to ChatPanel

Add trash icon button in chat header that clears all messages.
Only visible when messages exist. Uses setMessages([]) from
the AI SDK useChat hook.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/ChatPanel.tsx | 34 ++++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/ChatPanel.tsx b/src/components/ChatPanel.tsx
index 75433342..ebf1cfc8 100644
--- a/src/components/ChatPanel.tsx
+++ b/src/components/ChatPanel.tsx
@@ -15,7 +15,7 @@ export function ChatPanel({ isOpen, onClose, onBuildWorkflow, isBuildingWorkflow
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const [input, setInput] = useState("");
 
-  const { messages, sendMessage, status } = useChat({
+  const { messages, sendMessage, setMessages, status } = useChat({
     transport: new DefaultChatTransport({ api: "/api/chat" }),
   });
 
@@ -61,15 +61,29 @@ export function ChatPanel({ isOpen, onClose, onBuildWorkflow, isBuildingWorkflow
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-700">
         <h3 className="text-sm font-medium text-neutral-200">Workflow Assistant</h3>
-        <button
-          onClick={onClose}
-          className="text-neutral-400 hover:text-neutral-200 transition-colors"
-          aria-label="Close chat"
-        >
-          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
+        <div className="flex items-center gap-1">
+          {messages.length > 0 && (
+            <button
+              onClick={() => setMessages([])}
+              className="text-neutral-400 hover:text-neutral-200 transition-colors p-1"
+              aria-label="Clear chat"
+              title="Clear chat history"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            className="text-neutral-400 hover:text-neutral-200 transition-colors p-1"
+            aria-label="Close chat"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
       </div>
 
       {/* Messages area - nowheel class prevents React Flow from intercepting scroll */}