refactor: remove unused WebSearchToolUI component and update onFetchChart to return a Promise

app/page.tsx

@@ -9,6 +9,8 @@ import ChatPanel from "@/components/chatPanel";
 export default function Home() {
     const drawioRef = useRef<DrawIoEmbedRef>(null);
     const [chartXML, setChartXML] = useState<string>("");
+    // Add a ref to store the resolver function
+    const resolverRef = useRef<((value: string) => void) | null>(null);
 
     const handleExport = () => {
         if (drawioRef.current) {
@@ -16,7 +18,6 @@ export default function Home() {
                 format: "xmlsvg",
             });
         }
-        console.log("chartXML from page", chartXML);
     };
 
     const loadDiagram = (chart: string) => {
@@ -32,7 +33,15 @@ export default function Home() {
             <div className="w-2/3 p-1">
                 <DrawIoEmbed
                     ref={drawioRef}
-                    onExport={(data) => setChartXML(extractDiagramXML(data.data))}
+                    onExport={(data) => {
+                        const extractedXML = extractDiagramXML(data.data);
+                        setChartXML(extractedXML);
+                        // If there's a pending resolver, resolve it with the fresh XML
+                        if (resolverRef.current) {
+                            resolverRef.current(extractedXML);
+                            resolverRef.current = null;
+                        }
+                    }}
                     urlParameters={{
                         spin: true,
                         libraries: false,
@@ -48,9 +57,12 @@ export default function Home() {
                 <ChatPanel
                     onDisplayChart={(xml) => loadDiagram(xml)}
                     onFetchChart={() => {
-                        handleExport();
-                        console.log("chartXML from page", chartXML);
-                        return chartXML;
+                        return new Promise<string>((resolve) => {
+                            // Store the resolver so onExport can use it
+                            resolverRef.current = resolve;
+                            // Trigger the export
+                            handleExport();
+                        });
                     }}
                 />
             </div>

components/chatPanel.tsx

@@ -14,7 +14,7 @@ import { ToolInvocation } from 'ai';
 
 interface ChatPanelProps {
     onDisplayChart: (xml: string) => void;
-    onFetchChart: () => string;
+    onFetchChart: () => Promise<string>; // Change return type to Promise<string>
 }
 
 export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelProps) {
@@ -25,7 +25,7 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
                 const { xml } = toolCall.args as { xml: string };
                 onDisplayChart(xml);
             } else if (toolCall.toolName === "fetch_flow_chart") {
-                const currentXML = onFetchChart();
+                const currentXML = await onFetchChart();
                 console.log("Current XML:", currentXML);
                 addToolResult({
                     toolCallId: toolCall.toolCallId,
@@ -95,7 +95,7 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
             <CardFooter className="pt-2">
                 <form onSubmit={onFormSubmit} className="w-full flex space-x-2">
                     <Input
-                        value={"what you can see on the drawio panel?"}
+                        value={input}
                         onChange={handleInputChange}
                         placeholder="Describe what changes you want to make to the diagram..."
                         disabled={isLoading}

components/webSearchToolUI.tsx

@@ -1,21 +0,0 @@
-import { makeAssistantToolUI } from "@assistant-ui/react";
-
-type WebSearchArgs = {
-    query: string;
-};
-
-type WebSearchResult = {
-    title: string;
-    description: string;
-    url: string;
-};
-
-export const WebSearchToolUI = makeAssistantToolUI<
-    WebSearchArgs,
-    WebSearchResult
->({
-    toolName: "web_search",
-    render: ({ args, status }) => {
-        return <p>web_search({args.query}) </p>;
-    },
-});

package.json

@@ -11,9 +11,6 @@
   "dependencies": {
     "@ai-sdk/google": "^1.1.25",
     "@ai-sdk/openai": "^1.2.5",
-    "@assistant-ui/react": "^0.8.6",
-    "@assistant-ui/react-ai-sdk": "^0.8.0",
-    "@assistant-ui/react-markdown": "^0.8.0",
     "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",