From 844aaa8dcc9bf7fbf5343276b49336d14c3dde7d Mon Sep 17 00:00:00 2001
From: gongzhiyong <gongzhiyong@gongzhiyongdeMacBook-Air.local>
Date: Fri, 10 Apr 2026 04:28:28 +0800
Subject: [PATCH] =?UTF-8?q?fix(main.tsx):=20resolve=20TypeScript=20errors?=
 =?UTF-8?q?=20=E2=80=94=20UIMessage=20type,=20role=E2=86=92type,=20Compone?=
 =?UTF-8?q?ntMap=20cast?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 langgraph/src/main.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/langgraph/src/main.tsx b/langgraph/src/main.tsx
index 4531d48..5a8f145 100644
--- a/langgraph/src/main.tsx
+++ b/langgraph/src/main.tsx
@@ -1,7 +1,10 @@
 import { createRoot } from "react-dom/client";
 import { useStream } from "@langchain/langgraph-sdk/react";
 import { LoadExternalComponent } from "@langchain/langgraph-sdk/react-ui";
-import type { Message, UIMessage } from "@langchain/langgraph-sdk";
+import type { Message } from "@langchain/langgraph-sdk";
+
+// UIMessage is not exported directly — use a local shape
+type UIMessage = { id: string; name: string; props: Record<string, unknown>; metadata?: { message_id?: string } };
 import { useState, useRef, useEffect } from "react";
 import ComponentMap from "./agent-uis/index.tsx";
 import "./index.css";
@@ -29,7 +32,7 @@ function App() {
     const text = input.trim();
     if (!text || thread.isLoading) return;
     setInput("");
-    thread.submit({ messages: [{ role: "human", content: text }] });
+    thread.submit({ messages: [{ type: "human", content: text }] });
   }
 
   return (
@@ -99,7 +102,8 @@ function App() {
                     key={ui.id}
                     stream={thread}
                     message={ui}
-                    components={ComponentMap}
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    components={ComponentMap as any}
                   />
                 ))}
               </div>
@@ -113,11 +117,8 @@ function App() {
         {thread.isLoading &&
           (thread.values?.ui ?? [])
             .filter((ui: UIMessage) => {
-              const meta = (
-                ui as UIMessage & { metadata?: { message_id?: string } }
-              ).metadata;
               const attachedToExisting = thread.messages.some(
-                (m) => m.id === meta?.message_id,
+                (m) => m.id === ui.metadata?.message_id,
               );
               return !attachedToExisting;
             })
@@ -125,8 +126,10 @@ function App() {
               <LoadExternalComponent
                 key={ui.id}
                 stream={thread}
-                message={ui}
-                components={ComponentMap}
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                message={ui as any}
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                components={ComponentMap as any}
               />
             ))}