Browse Source

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>
handoff-20260429-1057
shrimbly 6 months ago
parent
commit
73cd528a49
  1. 34
      src/components/ChatPanel.tsx

34
src/components/ChatPanel.tsx

@ -15,7 +15,7 @@ export function ChatPanel({ isOpen, onClose, onBuildWorkflow, isBuildingWorkflow
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const [input, setInput] = useState(""); const [input, setInput] = useState("");
const { messages, sendMessage, status } = useChat({ const { messages, sendMessage, setMessages, status } = useChat({
transport: new DefaultChatTransport({ api: "/api/chat" }), transport: new DefaultChatTransport({ api: "/api/chat" }),
}); });
@ -61,15 +61,29 @@ export function ChatPanel({ isOpen, onClose, onBuildWorkflow, isBuildingWorkflow
{/* Header */} {/* Header */}
<div className="flex items-center justify-between px-4 py-3 border-b border-neutral-700"> <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> <h3 className="text-sm font-medium text-neutral-200">Workflow Assistant</h3>
<button <div className="flex items-center gap-1">
onClick={onClose} {messages.length > 0 && (
className="text-neutral-400 hover:text-neutral-200 transition-colors" <button
aria-label="Close chat" onClick={() => setMessages([])}
> className="text-neutral-400 hover:text-neutral-200 transition-colors p-1"
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> aria-label="Clear chat"
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> title="Clear chat history"
</svg> >
</button> <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> </div>
{/* Messages area - nowheel class prevents React Flow from intercepting scroll */} {/* Messages area - nowheel class prevents React Flow from intercepting scroll */}

Loading…
Cancel
Save