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

refactor: improve diagram handling and error messaging in chat components

Browse Source
This commit is contained in:
dayuan.jiang
2025-11-10 11:27:25 +09:00
parent ce45339c0d
commit 6940a5156d
4 changed files with 39 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -94,7 +94,7 @@ export function ChatMessageDisplay({
const renderToolPart = (part: any) => {
const callId = part.toolCallId;
const { state, input } = part;
const { state, input, output } = part;
const isExpanded = expandedTools[callId] ?? true;
const toolName = part.type?.replace("tool-", "");
@@ -134,19 +134,19 @@ export function ChatMessageDisplay({
<div className="h-4 w-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
) : state === "output-available" ? (
<div className="text-green-600">
{toolName === "display_diagram"
{output || (toolName === "display_diagram"
? "Diagram generated"
: toolName === "edit_diagram"
? "Diagram edited"
: "Tool executed"}
: "Tool executed")}
</div>
) : state === "output-error" ? (
<div className="text-red-600">
{toolName === "display_diagram"
{output || (toolName === "display_diagram"
? "Error generating diagram"
: toolName === "edit_diagram"
? "Error editing diagram"
: "Tool error"}
: "Tool error")}
</div>
) : null}
</div>

17
components/chat-panel.tsx
View File

@@ -65,24 +65,21 @@ export default function ChatPanel() {
}),
async onToolCall({ toolCall }) {
if (toolCall.toolName === "display_diagram") {
const { xml } = toolCall.input as { xml: string };
// do nothing because we will handle this streamingly in the ChatMessageDisplay component
// onDisplayChart(replaceNodes(chartXML, xml));
// Use addToolResult instead of returning a value
// Diagram is handled streamingly in the ChatMessageDisplay component
addToolResult({
tool: "display_diagram",
toolCallId: toolCall.toolCallId,
output: "Successfully displayed the flowchart.",
output: "Successfully displayed the diagram.",
});
} else if (toolCall.toolName === "edit_diagram") {
const { edits } = toolCall.input as {
edits: Array<{ search: string; replace: string }>;
};
let currentXml = '';
try {
// Fetch current chart XML
const currentXml = await onFetchChart();
currentXml = await onFetchChart();
// Apply edits using the utility function
const { replaceXMLParts } = await import("@/lib/utils");
@@ -97,10 +94,14 @@ export default function ChatPanel() {
output: `Successfully applied ${edits.length} edit(s) to the diagram.`,
});
} catch (error) {
console.error("Edit diagram failed:", error);
const errorMessage = error instanceof Error ? error.message : String(error);
addToolResult({
tool: "edit_diagram",
toolCallId: toolCall.toolCallId,
output: `Error editing diagram: ${error}`,
output: `Failed to edit diagram: ${errorMessage}`,
});
}
}