Browse Source
- Add @ai-sdk/react package for useChat hook - Create floating chat panel with streaming messages - Display messages with role-based styling (user/assistant) - Auto-scroll to bottom on new messages - Show loading indicator during AI responses - Dark theme matching app (neutral-800 bg)handoff-20260429-1057
shrimbly
6 months ago
3 changed files with 176 additions and 4 deletions
@ -0,0 +1,128 @@ |
|||||
|
"use client"; |
||||
|
|
||||
|
import { useRef, useEffect, useState } from "react"; |
||||
|
import { useChat } from "@ai-sdk/react"; |
||||
|
import { DefaultChatTransport } from "ai"; |
||||
|
|
||||
|
interface ChatPanelProps { |
||||
|
isOpen: boolean; |
||||
|
onClose: () => void; |
||||
|
} |
||||
|
|
||||
|
export function ChatPanel({ isOpen, onClose }: ChatPanelProps) { |
||||
|
const messagesEndRef = useRef<HTMLDivElement>(null); |
||||
|
const [input, setInput] = useState(""); |
||||
|
|
||||
|
const { messages, sendMessage, status } = useChat({ |
||||
|
transport: new DefaultChatTransport({ api: "/api/chat" }), |
||||
|
}); |
||||
|
|
||||
|
const isLoading = status === "streaming" || status === "submitted"; |
||||
|
|
||||
|
// Auto-scroll to bottom on new messages
|
||||
|
useEffect(() => { |
||||
|
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); |
||||
|
}, [messages]); |
||||
|
|
||||
|
if (!isOpen) return null; |
||||
|
|
||||
|
return ( |
||||
|
<div className="fixed bottom-[220px] right-5 w-[380px] h-[450px] bg-neutral-800 border border-neutral-700 rounded-lg shadow-xl flex flex-col z-40"> |
||||
|
{/* 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> |
||||
|
|
||||
|
{/* Messages area */} |
||||
|
<div className="flex-1 overflow-y-auto p-4 space-y-4 min-h-0"> |
||||
|
{messages.length === 0 && ( |
||||
|
<div className="text-center text-neutral-500 text-sm py-8"> |
||||
|
<p>Ask me anything about creating workflows!</p> |
||||
|
<p className="text-xs mt-2">e.g., "How do I create product photos with different backgrounds?"</p> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{messages.map((message) => { |
||||
|
// Extract text from message parts
|
||||
|
const textContent = message.parts |
||||
|
?.filter((part): part is { type: "text"; text: string } => part.type === "text") |
||||
|
.map((part) => part.text) |
||||
|
.join("") || ""; |
||||
|
|
||||
|
return ( |
||||
|
<div |
||||
|
key={message.id} |
||||
|
className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`} |
||||
|
> |
||||
|
<div |
||||
|
className={`max-w-[85%] rounded-lg px-3 py-2 text-sm ${ |
||||
|
message.role === "user" |
||||
|
? "bg-blue-600 text-white" |
||||
|
: "bg-neutral-700 text-neutral-200" |
||||
|
}`}
|
||||
|
> |
||||
|
<p className="whitespace-pre-wrap">{textContent}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
})} |
||||
|
|
||||
|
{/* Loading indicator */} |
||||
|
{isLoading && ( |
||||
|
<div className="flex justify-start"> |
||||
|
<div className="bg-neutral-700 rounded-lg px-3 py-2"> |
||||
|
<div className="flex space-x-1"> |
||||
|
<div className="w-2 h-2 bg-neutral-400 rounded-full animate-bounce" style={{ animationDelay: "0ms" }} /> |
||||
|
<div className="w-2 h-2 bg-neutral-400 rounded-full animate-bounce" style={{ animationDelay: "150ms" }} /> |
||||
|
<div className="w-2 h-2 bg-neutral-400 rounded-full animate-bounce" style={{ animationDelay: "300ms" }} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
<div ref={messagesEndRef} /> |
||||
|
</div> |
||||
|
|
||||
|
{/* Input area */} |
||||
|
<form |
||||
|
onSubmit={(e) => { |
||||
|
e.preventDefault(); |
||||
|
if (input.trim() && !isLoading) { |
||||
|
sendMessage({ text: input }); |
||||
|
setInput(""); |
||||
|
} |
||||
|
}} |
||||
|
className="p-3 border-t border-neutral-700" |
||||
|
> |
||||
|
<div className="flex gap-2"> |
||||
|
<input |
||||
|
type="text" |
||||
|
value={input} |
||||
|
onChange={(e) => setInput(e.target.value)} |
||||
|
placeholder="Type a message..." |
||||
|
className="flex-1 bg-neutral-700 border border-neutral-600 rounded-lg px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-blue-500" |
||||
|
disabled={isLoading} |
||||
|
/> |
||||
|
<button |
||||
|
type="submit" |
||||
|
disabled={isLoading || !input.trim()} |
||||
|
className="px-3 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" |
||||
|
> |
||||
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /> |
||||
|
</svg> |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
Loading…
Reference in new issue