i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-02 14:22:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update ChatInput and ChatPanel to use status instead of isLoading for improved state management

Browse Source
This commit is contained in:
dayuan.jiang
2025-03-22 13:26:14 +00:00
parent 1b40a3c456
commit 4834d524b9
2 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/chat-input.tsx
View File

@@ -7,12 +7,12 @@ import { Loader2, Send } from "lucide-react"
interface ChatInputProps { interface ChatInputProps {
input: string input: string
isLoading: boolean status: "submitted" | "streaming" | "ready" | "error"
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
} }
export function ChatInput({ input, isLoading, onSubmit, onChange }: ChatInputProps) { export function ChatInput({ input, status, onSubmit, onChange }: ChatInputProps) {
const textareaRef = useRef<HTMLTextAreaElement>(null) const textareaRef = useRef<HTMLTextAreaElement>(null)
// Auto-resize textarea based on content // Auto-resize textarea based on content
@@ -33,7 +33,7 @@ export function ChatInput({ input, isLoading, onSubmit, onChange }: ChatInputPro
if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
e.preventDefault() e.preventDefault()
const form = e.currentTarget.closest("form") const form = e.currentTarget.closest("form")
if (form && input.trim() && !isLoading) { if (form && input.trim() && status !== "streaming") {
form.requestSubmit() form.requestSubmit()
} }
} }
@@ -47,18 +47,18 @@ export function ChatInput({ input, isLoading, onSubmit, onChange }: ChatInputPro
onChange={onChange} onChange={onChange}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
placeholder="Describe what changes you want to make to the diagram... (Press Cmd/Ctrl + Enter to send)" placeholder="Describe what changes you want to make to the diagram... (Press Cmd/Ctrl + Enter to send)"
disabled={isLoading} disabled={status === "streaming"}
aria-label="Chat input" aria-label="Chat input"
className="min-h-[80px] resize-none transition-all duration-200" className="min-h-[80px] resize-none transition-all duration-200"
/> />
<div className="flex justify-end"> <div className="flex justify-end">
<Button <Button
type="submit" type="submit"
disabled={isLoading || !input.trim()} disabled={status === "streaming" || !input.trim()}
className="transition-opacity" className="transition-opacity"
aria-label={isLoading ? "Sending message..." : "Send message"} aria-label={status === "streaming" ? "Sending message..." : "Send message"}
> >
{isLoading ? ( {status === "streaming" ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" /> <Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : ( ) : (
<Send className="mr-2 h-4 w-4" /> <Send className="mr-2 h-4 w-4" />

8
components/chatPanel.tsx
View File

@@ -14,7 +14,7 @@ interface ChatPanelProps {
} }
export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelProps) { export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelProps) {
const { messages, input, handleInputChange, handleSubmit, isLoading, error, addToolResult } = useChat({ const { messages, input, handleInputChange, handleSubmit, status, error, addToolResult } = useChat({
async onToolCall({ toolCall }) { async onToolCall({ toolCall }) {
console.log("Tool call:", toolCall); console.log("Tool call:", toolCall);
console.log("Tool call name:", toolCall.toolName); console.log("Tool call name:", toolCall.toolName);
@@ -23,7 +23,7 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
if (toolCall.toolName === "display_flow_chart") { if (toolCall.toolName === "display_flow_chart") {
const { xml } = toolCall.args as { xml: string }; const { xml } = toolCall.args as { xml: string };
onDisplayChart(xml); onDisplayChart(xml);
return "Displaying the flowchart..."; return "Successfully displayed the flowchart.";
} else if (toolCall.toolName === "fetch_flow_chart") { } else if (toolCall.toolName === "fetch_flow_chart") {
const currentXML = await onFetchChart(); const currentXML = await onFetchChart();
console.log("Current XML:", currentXML); console.log("Current XML:", currentXML);
@@ -45,7 +45,7 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => { const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault() e.preventDefault()
if (input.trim() && !isLoading) { if (input.trim() && status !== "streaming") {
handleSubmit(e) handleSubmit(e)
} }
} }
@@ -166,7 +166,7 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
<CardFooter className="p-2"> <CardFooter className="p-2">
<ChatInput <ChatInput
input={input} input={input}
isLoading={isLoading} status={status}
onSubmit={onFormSubmit} onSubmit={onFormSubmit}
onChange={handleInputChange} onChange={handleInputChange}
/> />