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 {
input: string
isLoading: boolean
status: "submitted" | "streaming" | "ready" | "error"
onSubmit: (e: React.FormEvent<HTMLFormElement>) => 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)
// 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") {
e.preventDefault()
const form = e.currentTarget.closest("form")
if (form && input.trim() && !isLoading) {
if (form && input.trim() && status !== "streaming") {
form.requestSubmit()
}
}
@@ -47,18 +47,18 @@ export function ChatInput({ input, isLoading, onSubmit, onChange }: ChatInputPro
onChange={onChange}
onKeyDown={handleKeyDown}
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"
className="min-h-[80px] resize-none transition-all duration-200"
/>
<div className="flex justify-end">
<Button
type="submit"
disabled={isLoading || !input.trim()}
disabled={status === "streaming" || !input.trim()}
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" />
) : (
<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) {
const { messages, input, handleInputChange, handleSubmit, isLoading, error, addToolResult } = useChat({
const { messages, input, handleInputChange, handleSubmit, status, error, addToolResult } = useChat({
async onToolCall({ toolCall }) {
console.log("Tool call:", toolCall);
console.log("Tool call name:", toolCall.toolName);
@@ -23,7 +23,7 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
if (toolCall.toolName === "display_flow_chart") {
const { xml } = toolCall.args as { xml: string };
onDisplayChart(xml);
return "Displaying the flowchart...";
return "Successfully displayed the flowchart.";
} else if (toolCall.toolName === "fetch_flow_chart") {
const currentXML = await onFetchChart();
console.log("Current XML:", currentXML);
@@ -45,7 +45,7 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
if (input.trim() && !isLoading) {
if (input.trim() && status !== "streaming") {
handleSubmit(e)
}
}
@@ -166,7 +166,7 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
<CardFooter className="p-2">
<ChatInput
input={input}
isLoading={isLoading}
status={status}
onSubmit={onFormSubmit}
onChange={handleInputChange}
/>