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

fix: Enhance chat message display with chart handling and import new SDKs

Browse Source
This commit is contained in:
dayuan.jiang
2025-04-04 01:26:16 +00:00
parent 9967ee85ac
commit 8f3c11e0e8
2 changed files with 32 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
import { bedrock } from '@ai-sdk/amazon-bedrock'; import { bedrock } from '@ai-sdk/amazon-bedrock';
import { openai } from '@ai-sdk/openai';
import { google } from '@ai-sdk/google';
import { streamText } from "ai"; import { streamText } from "ai";
import { z } from "zod"; import { z } from "zod";

81
components/chat-message-display.tsx
View File

@@ -32,83 +32,40 @@ export function ChatMessageDisplay({
} }
}, [messages]); }, [messages]);
const renderToolInvocation = (toolInvocation: any) => { function handleDisplayChart(xml: string) {
const callId = toolInvocation.toolCallId; const currentXml = xml || "";
switch (toolInvocation.toolName) {
case "display_diagram": {
switch (toolInvocation.state) {
case "partial-call":
{
const currentXml = toolInvocation.args?.xml || "";
console.log("toolInvocation", toolInvocation);
// Increment the step counter
// Determine whether to show details based on a simple threshold
const convertedXml = convertToLegalXml(currentXml); const convertedXml = convertToLegalXml(currentXml);
if (convertedXml !== previousXML.current) { if (convertedXml !== previousXML.current) {
previousXML.current = convertedXml; previousXML.current = convertedXml;
// if "/root" in convertedXml const replacedXML = replaceNodes(chartXML, convertedXml);
const replacedXML = replaceNodes(
chartXML,
convertedXml
);
onDisplayChart(replacedXML); onDisplayChart(replacedXML);
// if convertedXml changed
} }
} }
const renderToolInvocation = (toolInvocation: any) => {
const callId = toolInvocation.toolCallId;
const { toolName, args, state } = toolInvocation;
handleDisplayChart(args?.xml);
return ( return (
<div <div
key={callId} key={callId}
className="mt-2 text-sm bg-blue-50 p-2 rounded border border-blue-200" className="p-4 my-2 text-gray-500 border border-gray-300 rounded"
> >
<div className="font-medium"> <div className="flex flex-col gap-2">
Generating diagram... <div className="text-xs">Tool: display_diagram</div>
<div className="mt-2 text-sm">
{state === "partial-call" ? (
<div className="h-4 w-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
) : state === "result" ? (
<div className="text-green-600">
Diagram generated
</div> </div>
<div className="text-xs text-gray-500 mt-1"> ) : null}
Tool: display_diagram
<div className="mt-1 font-mono text-xs">
Args:{" "}
{JSON.stringify(
toolInvocation.args,
null,
2
)}
</div> </div>
</div> </div>
</div> </div>
); );
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 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
)}
</div>
</div>
</div>
);
case "result":
return null;
}
break;
}
default:
return null;
}
}; };
return ( return (