i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-02 22:32:27 +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";

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

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