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

refactor: chat-example-panel.tsx

Browse Source
This commit is contained in:
dayuan.jiang
2025-03-25 02:24:12 +00:00
parent df74c36242
commit d2a630929b
5 changed files with 155 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/api/chat/route.ts
View File

@@ -66,9 +66,9 @@ ${lastMessage.content}
? [{ role: "system", content: systemMessage }, { ...lastMessage, content: formattedContent }] ? [{ role: "system", content: systemMessage }, { ...lastMessage, content: formattedContent }]
: [...messages.slice(0, -1), { ...lastMessage, content: formattedContent }]; : [...messages.slice(0, -1), { ...lastMessage, content: formattedContent }];
console.log(enhancedMessages);
const result = streamText({ const result = streamText({
// model: google("gemini-2.0-flash"), // model: google("gemini-2.0-flash"),
// model: openai("chatgpt-4o-latest"),
model: openai("gpt-4o"), model: openai("gpt-4o"),
toolCallStreaming: true, toolCallStreaming: true,
messages: enhancedMessages, messages: enhancedMessages,

2
app/page.tsx
View File

@@ -4,7 +4,7 @@ import { DrawIoEmbed, DrawIoEmbedRef } from "react-drawio";
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { extractDiagramXML } from "./extract_xml"; import { extractDiagramXML } from "./extract_xml";
import ChatPanel from "@/components/chatPanel"; import ChatPanel from "@/components/chat-panel";
export default function Home() { export default function Home() {
const drawioRef = useRef<DrawIoEmbedRef>(null); const drawioRef = useRef<DrawIoEmbedRef>(null);

56
components/chat-example-panel.tsx Normal file
View File

@@ -0,0 +1,56 @@
export default function ExamplePanel({
setInput,
setFiles,
}: {
setInput: (input: string) => void;
setFiles: (files: FileList | undefined) => void;
}) {
const createFileList = (file: File): FileList => {
const dt = new DataTransfer();
dt.items.add(file);
return dt.files;
};
// New handler for the "Replicate this flowchart" button
const handleReplicateFlowchart = async () => {
setInput("Replicate this flowchart.");
try {
// Fetch the example image
const response = await fetch("/example.png");
const blob = await response.blob();
const file = new File([blob], "example.png", { type: "image/png" });
// Set the file to the files state
setFiles(createFileList(file));
} catch (error) {
console.error("Error loading example image:", error);
}
};
return (
<div className="px-4 py-2 border-t border-b border-gray-100">
<p className="text-sm text-gray-500 mb-2">
{" "}
Start a conversation to generate or modify diagrams.
</p>
<p className="text-sm text-gray-500 mb-2">
{" "}
You can also upload images to use as references.
</p>
<p className="text-sm text-gray-500 mb-2">Try these examples:</p>
<div className="flex flex-wrap gap-5">
<button
className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
onClick={handleReplicateFlowchart}
>
Replicate this flowchart
</button>
<button
className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
onClick={() => setInput("Draw a cat for me")}
>
Draw a cat for me
</button>
</div>
</div>
);
}

239
components/chatPanel.tsx → components/chat-panel.tsx
View File

@@ -12,10 +12,10 @@ import {
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea } from "@/components/ui/scroll-area";
import { Button } from "@/components/ui/button";
import { useChat } from "@ai-sdk/react"; import { useChat } from "@ai-sdk/react";
import { ChatInput } from "@/components/chat-input"; import { ChatInput } from "@/components/chat-input";
import { convertToLegalXml } from "@/lib/utils"; import { convertToLegalXml } from "@/lib/utils";
import ExamplePanel from "./chat-example-panel";
interface ChatPanelProps { interface ChatPanelProps {
onDisplayChart: (xml: string) => void; onDisplayChart: (xml: string) => void;
onFetchChart: () => Promise<string>; onFetchChart: () => Promise<string>;
@@ -47,13 +47,9 @@ export default function ChatPanel({
error, error,
setInput, setInput,
setMessages, setMessages,
append,
} = useChat({ } = useChat({
maxSteps: 5, maxSteps: 5,
async onToolCall({ toolCall }) { async onToolCall({ toolCall }) {
console.log("Tool call:", toolCall);
console.log("Tool call name:", toolCall.toolName);
console.log("Tool call arguments:", toolCall.args);
if (toolCall.toolName === "display_diagram") { if (toolCall.toolName === "display_diagram") {
const { xml } = toolCall.args as { xml: string }; const { xml } = toolCall.args as { xml: string };
onDisplayChart(xml); onDisplayChart(xml);
@@ -99,30 +95,6 @@ export default function ChatPanel({
setFiles(newFiles); setFiles(newFiles);
}; };
// New utility function to create a FileList from a File
const createFileList = (file: File): FileList => {
const dt = new DataTransfer();
dt.items.add(file);
return dt.files;
};
// New handler for the "Replicate this flowchart" button
const handleReplicateFlowchart = async () => {
setInput("Replicate this flowchart.");
try {
// Fetch the example image
const response = await fetch("/example.png");
const blob = await response.blob();
const file = new File([blob], "example.png", { type: "image/png" });
// Set the file to the files state
setFiles(createFileList(file));
} catch (error) {
console.error("Error loading example image:", error);
}
};
// Function to handle history item selection // Function to handle history item selection
const handleSelectHistoryItem = (xml: string) => { const handleSelectHistoryItem = (xml: string) => {
onDisplayChart(xml); onDisplayChart(xml);
@@ -200,34 +172,6 @@ export default function ChatPanel({
} }
}; };
const examplePanel = (
<div className="px-4 py-2 border-t border-b border-gray-100">
<p className="text-sm text-gray-500 mb-2">
{" "}
Start a conversation to generate or modify diagrams.
</p>
<p className="text-sm text-gray-500 mb-2">
{" "}
You can also upload images to use as references.
</p>
<p className="text-sm text-gray-500 mb-2">Try these examples:</p>
<div className="flex flex-wrap gap-5">
<button
className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
onClick={handleReplicateFlowchart}
>
Replicate this flowchart
</button>
<button
className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
onClick={() => setInput("Draw a cat for me")}
>
Draw a cat for me
</button>
</div>
</div>
);
return ( return (
<Card className="h-full flex flex-col rounded-none py-0 gap-0"> <Card className="h-full flex flex-col rounded-none py-0 gap-0">
<CardHeader className="p-4 text-center"> <CardHeader className="p-4 text-center">
@@ -235,95 +179,100 @@ export default function ChatPanel({
</CardHeader> </CardHeader>
<CardContent className="flex-grow overflow-hidden px-2"> <CardContent className="flex-grow overflow-hidden px-2">
<ScrollArea className="h-full pr-4"> <ScrollArea className="h-full pr-4">
{messages.length === 0 {messages.length === 0 ? (
? examplePanel <ExamplePanel
: messages.map((message) => ( setInput={setInput}
<div setFiles={handleFileChange}
key={message.id} />
className={`mb-4 ${ ) : (
message.role === "user" messages.map((message) => (
? "text-right" <div
: "text-left" key={message.id}
}`} className={`mb-4 ${
> message.role === "user"
<div ? "text-right"
className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${ : "text-left"
message.role === "user" }`}
? "bg-primary text-primary-foreground" >
: "bg-muted text-muted-foreground" <div
}`} className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${
> message.role === "user"
{/* Render message content based on parts if available */} ? "bg-primary text-primary-foreground"
{message.parts : "bg-muted text-muted-foreground"
? message.parts.map((part, index) => { }`}
switch (part.type) { >
case "text": {/* Render message content based on parts if available */}
return ( {message.parts
<div key={index}> ? message.parts.map((part, index) => {
{part.text} switch (part.type) {
</div> case "text":
); return (
case "tool-invocation": <div key={index}>
return renderToolInvocation( {part.text}
part.toolInvocation </div>
); );
default: case "tool-invocation":
return null; return renderToolInvocation(
} part.toolInvocation
}) );
: // Fallback to simple content for older format default:
message.content} return null;
</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",
}}
/>
</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
} }
... })
</div> : // Fallback to simple content for older format
</div> message.content}
)} </div>
</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",
}}
/>
</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
}
...
</div>
</div>
)}
</div>
))
)}
{error && ( {error && (
<div className="text-red-500 text-sm mt-2"> <div className="text-red-500 text-sm mt-2">
Error: {error.message} Error: {error.message}

4
lib/utils.ts
View File

@@ -55,4 +55,6 @@ export function convertToLegalXml(xmlString: string): string {
} }
return result; return result;
} }