mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 22:32:27 +08:00
feat: remove unused SVG files and update layout metadata for Next-AI-Drawio
This commit is contained in:
dayuan.jiang
@@ -1,28 +1,47 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import type React from "react"
|
||||
import { useRef, useEffect, useState } from "react"
|
||||
import Image from "next/image"
|
||||
import type React from "react";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useChat } from '@ai-sdk/react';
|
||||
import { ChatInput } from "@/components/chat-input"
|
||||
import { convertToLegalXml } from "@/lib/utils"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useChat } from "@ai-sdk/react";
|
||||
import { ChatInput } from "@/components/chat-input";
|
||||
import { convertToLegalXml } from "@/lib/utils";
|
||||
interface ChatPanelProps {
|
||||
onDisplayChart: (xml: string) => void;
|
||||
onFetchChart: () => Promise<string>;
|
||||
}
|
||||
|
||||
export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelProps) {
|
||||
export default function ChatPanel({
|
||||
onDisplayChart,
|
||||
onFetchChart,
|
||||
}: ChatPanelProps) {
|
||||
// Add a step counter to track updates
|
||||
const stepCounterRef = useRef<number>(0);
|
||||
// Add state for file attachments
|
||||
const [files, setFiles] = useState<FileList | undefined>(undefined);
|
||||
|
||||
// Remove the currentXmlRef and related useEffect
|
||||
const { messages, input, handleInputChange, handleSubmit, status, error, setInput, setMessages, data } = useChat({
|
||||
const {
|
||||
messages,
|
||||
input,
|
||||
handleInputChange,
|
||||
handleSubmit,
|
||||
status,
|
||||
error,
|
||||
setInput,
|
||||
setMessages,
|
||||
data,
|
||||
} = useChat({
|
||||
maxSteps: 5,
|
||||
async onToolCall({ toolCall }) {
|
||||
console.log("Tool call:", toolCall);
|
||||
@@ -36,19 +55,19 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("Chat error:", error);
|
||||
}
|
||||
})
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
},
|
||||
});
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
// Scroll to bottom when messages change
|
||||
useEffect(() => {
|
||||
if (messagesEndRef.current) {
|
||||
messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
|
||||
messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
console.log("Data updated:", data);
|
||||
}, [messages])
|
||||
}, [messages]);
|
||||
|
||||
const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
e.preventDefault();
|
||||
if (input.trim() && status !== "streaming") {
|
||||
try {
|
||||
// Fetch chart data before setting input
|
||||
@@ -66,10 +85,10 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
|
||||
${input}
|
||||
"""
|
||||
`
|
||||
)
|
||||
);
|
||||
handleSubmit(e, {
|
||||
experimental_attachments: files,
|
||||
})
|
||||
});
|
||||
|
||||
// Clear files after submission
|
||||
setFiles(undefined);
|
||||
@@ -77,21 +96,21 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
|
||||
console.error("Error fetching chart data:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Helper function to handle file changes
|
||||
const handleFileChange = (newFiles: FileList | undefined) => {
|
||||
setFiles(newFiles);
|
||||
}
|
||||
};
|
||||
|
||||
// Helper function to render tool invocations
|
||||
const renderToolInvocation = (toolInvocation: any) => {
|
||||
const callId = toolInvocation.toolCallId;
|
||||
|
||||
switch (toolInvocation.toolName) {
|
||||
case 'display_diagram': {
|
||||
case "display_diagram": {
|
||||
switch (toolInvocation.state) {
|
||||
case 'partial-call': {
|
||||
case "partial-call": {
|
||||
const currentXml = toolInvocation.args?.xml || "";
|
||||
|
||||
// Increment the step counter
|
||||
@@ -100,12 +119,20 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
|
||||
|
||||
// Determine whether to show details based on a simple threshold
|
||||
// Rather than comparing lengths (which can cause re-renders)
|
||||
if (stepCounterRef.current >= 20 && stepCounterRef.current % 20 === 0) {
|
||||
if (
|
||||
stepCounterRef.current >= 20 &&
|
||||
stepCounterRef.current % 20 === 0
|
||||
) {
|
||||
onDisplayChart(convertToLegalXml(currentXml));
|
||||
}
|
||||
return (
|
||||
<div key={callId} className="mt-2 text-sm bg-blue-50 p-2 rounded border border-blue-200">
|
||||
<div className="font-medium">Generating diagram...</div>
|
||||
<div
|
||||
key={callId}
|
||||
className="mt-2 text-sm bg-blue-50 p-2 rounded border border-blue-200"
|
||||
>
|
||||
<div className="font-medium">
|
||||
Generating diagram...
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Tool: display_diagram
|
||||
<div className="mt-1 font-mono text-xs">
|
||||
@@ -115,22 +142,37 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
|
||||
</div>
|
||||
);
|
||||
}
|
||||
case 'call':
|
||||
case "call":
|
||||
return (
|
||||
<div key={callId} className="mt-2 text-sm bg-yellow-50 p-2 rounded border border-yellow-200">
|
||||
<div className="font-medium">Displaying diagram...</div>
|
||||
<div
|
||||
key={callId}
|
||||
className="mt-2 text-sm bg-yellow-50 p-2 rounded border border-yellow-200"
|
||||
>
|
||||
<div className="font-medium">
|
||||
Displaying diagram...
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Tool: display_diagram
|
||||
<div className="mt-1 font-mono text-xs">
|
||||
Args: {JSON.stringify(toolInvocation.args, null, 2)}
|
||||
Args:{" "}
|
||||
{JSON.stringify(
|
||||
toolInvocation.args,
|
||||
null,
|
||||
2
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
case 'result':
|
||||
case "result":
|
||||
return (
|
||||
<div key={callId} className="mt-2 text-sm bg-green-50 p-2 rounded border border-green-200">
|
||||
<div className="font-medium">Diagram generated</div>
|
||||
<div
|
||||
key={callId}
|
||||
className="mt-2 text-sm bg-green-50 p-2 rounded border border-green-200"
|
||||
>
|
||||
<div className="font-medium">
|
||||
Diagram generated
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Result: {toolInvocation.result}
|
||||
</div>
|
||||
@@ -146,64 +188,105 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
|
||||
|
||||
return (
|
||||
<Card className="h-full flex flex-col rounded-none py-0">
|
||||
<CardHeader className="p-2 text-center">
|
||||
<CardTitle>Chat with Diagram Generator</CardTitle>
|
||||
<CardHeader className="p-4 text-center">
|
||||
<CardTitle>Next-AI-Drawio</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-grow overflow-hidden p-4">
|
||||
<ScrollArea className="h-full pr-4">
|
||||
{messages.length === 0 ? (
|
||||
<div className="text-center text-gray-500 mt-8">
|
||||
<p>Start a conversation to generate or modify diagrams.</p>
|
||||
<p className="text-sm mt-2">Try: "Create a flowchart for user authentication"</p>
|
||||
<p>
|
||||
Start a conversation to generate or modify
|
||||
diagrams.
|
||||
</p>
|
||||
<p className="text-sm mt-2">
|
||||
Try: "Create a flowchart for user
|
||||
authentication"
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
messages.map((message) => (
|
||||
<div key={message.id} className={`mb-4 ${message.role === "user" ? "text-right" : "text-left"}`}>
|
||||
<div
|
||||
key={message.id}
|
||||
className={`mb-4 ${
|
||||
message.role === "user"
|
||||
? "text-right"
|
||||
: "text-left"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${message.role === "user" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
|
||||
}`}
|
||||
className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${
|
||||
message.role === "user"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-muted text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{/* Render message content based on parts if available */}
|
||||
{message.parts ? (
|
||||
message.parts.map((part, index) => {
|
||||
switch (part.type) {
|
||||
case 'text':
|
||||
return <div key={index}>{part.text}</div>;
|
||||
case 'tool-invocation':
|
||||
return renderToolInvocation(part.toolInvocation);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
})
|
||||
) : (
|
||||
// Fallback to simple content for older format
|
||||
message.content
|
||||
)}
|
||||
{message.parts
|
||||
? message.parts.map((part, index) => {
|
||||
switch (part.type) {
|
||||
case "text":
|
||||
return (
|
||||
<div key={index}>
|
||||
{part.text}
|
||||
</div>
|
||||
);
|
||||
case "tool-invocation":
|
||||
return renderToolInvocation(
|
||||
part.toolInvocation
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
})
|
||||
: // Fallback to simple content for older format
|
||||
message.content}
|
||||
</div>
|
||||
|
||||
{/* Display image attachments */}
|
||||
{message?.experimental_attachments?.filter(attachment =>
|
||||
attachment?.contentType?.startsWith('image/')
|
||||
).map((attachment, index) => (
|
||||
<div key={`${message.id}-${index}`} className={`mt-2 ${message.role === "user" ? "text-right" : "text-left"}`}>
|
||||
<div className="inline-block">
|
||||
<Image
|
||||
src={attachment.url}
|
||||
width={200}
|
||||
height={200}
|
||||
alt={attachment.name ?? `attachment-${index}`}
|
||||
className="rounded-md border"
|
||||
style={{ objectFit: 'contain' }}
|
||||
/>
|
||||
{message?.experimental_attachments
|
||||
?.filter((attachment) =>
|
||||
attachment?.contentType?.startsWith(
|
||||
"image/"
|
||||
)
|
||||
)
|
||||
.map((attachment, index) => (
|
||||
<div
|
||||
key={`${message.id}-${index}`}
|
||||
className={`mt-2 ${
|
||||
message.role === "user"
|
||||
? "text-right"
|
||||
: "text-left"
|
||||
}`}
|
||||
>
|
||||
<div className="inline-block">
|
||||
<Image
|
||||
src={attachment.url}
|
||||
width={200}
|
||||
height={200}
|
||||
alt={
|
||||
attachment.name ??
|
||||
`attachment-${index}`
|
||||
}
|
||||
className="rounded-md border"
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
|
||||
{/* Legacy support for function_call format */}
|
||||
{(message as any).function_call && (
|
||||
<div className="mt-2 text-left">
|
||||
<div className="text-xs text-gray-500">
|
||||
Using tool: {(message as any).function_call.name}...
|
||||
Using tool:{" "}
|
||||
{
|
||||
(message as any).function_call
|
||||
.name
|
||||
}
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -231,5 +314,5 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
|
||||
/>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user