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

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

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

@@ -32,83 +32,40 @@ export function ChatMessageDisplay({
}
}, [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 callId = toolInvocation.toolCallId;
const { toolName, args, state } = toolInvocation;
handleDisplayChart(args?.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);
if (convertedXml !== previousXML.current) {
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>
return (
<div
key={callId}
className="p-4 my-2 text-gray-500 border border-gray-300 rounded"
>
<div className="flex flex-col gap-2">
<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>
);
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;
}
) : null}
</div>
</div>
</div>
);
};
return (