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

feat: add XML handling in ChatPanel and utility function for legal XML conversion

Browse Source
This commit is contained in:
dayuan.jiang
2025-03-22 15:45:49 +00:00
parent cfe3445a4f
commit a27c94f798
2 changed files with 85 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/chatPanel.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import type React from "react"
import { useRef, useEffect } from "react"
import { useRef, useEffect, useState } from "react"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
@@ -15,6 +15,7 @@ interface ChatPanelProps {
}
export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelProps) {
const [previousXml, setPreviousXml] = useState<string>("");
const { messages, input, handleInputChange, handleSubmit, status, error, setInput, setMessages, data } = useChat({
maxSteps: 5,
async onToolCall({ toolCall }) {
@@ -59,6 +60,10 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
}
}
// Helper function to render tool invocations
const renderToolInvocation = (toolInvocation: any) => {
const callId = toolInvocation.toolCallId;
@@ -66,13 +71,39 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
switch (toolInvocation.toolName) {
case 'display_diagram': {
switch (toolInvocation.state) {
case 'partial-call': {
const currentXml = toolInvocation.args?.xml || "";
const shouldShowPartialArgs = currentXml &&
(!previousXml || Math.abs(currentXml.length - previousXml.length) > 50);
// Update previous XML for next comparison
if (currentXml) {
setPreviousXml(currentXml);
}
return (
<div key={callId} className="mt-2 text-sm bg-blue-50 p-2 rounded border border-blue-200">
<div className="font-medium">Preparing to display diagram...</div>
<div className="text-xs text-gray-500 mt-1">
Tool: display_diagram
{shouldShowPartialArgs && toolInvocation.args && (
<div className="mt-1 font-mono text-xs">
Partial args: {JSON.stringify(toolInvocation.args, null, 2)}
</div>
)}
</div>
</div>
);
}
case 'call':
case 'partial-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>
);