From 8d30e0cca0b5f78d48a435e3f38638d64e96a00a Mon Sep 17 00:00:00 2001
From: gongzhiyong <gongzhiyong@gongzhiyongdeMacBook-Air.local>
Date: Fri, 10 Apr 2026 04:35:15 +0800
Subject: [PATCH] =?UTF-8?q?fix(main.tsx):=20rename=20UIMessage=E2=86=92UIM?=
 =?UTF-8?q?sgLocal=20to=20avoid=20SDK=20type=20conflict?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/langgraph/src/main.tsx b/langgraph/src/main.tsx
index bda8055..cce37ad 100644
--- a/langgraph/src/main.tsx
+++ b/langgraph/src/main.tsx
@@ -4,8 +4,7 @@ import { LoadExternalComponent } from "@langchain/langgraph-sdk/react-ui";
 import type { Message } from "@langchain/langgraph-sdk";
 
 // UIMessage is not exported directly — use a local shape
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type UIMessage = { id: string; type: string; name: string; props: Record<string, unknown>; metadata?: { message_id?: string } };
+type UIMsgLocal = { id: string; type: 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";
@@ -17,7 +16,7 @@ function App() {
   const [input, setInput] = useState("");
   const bottomRef = useRef<HTMLDivElement>(null);
 
-  const thread = useStream<{ messages: Message[]; ui: UIMessage[] }>({
+  const thread = useStream<{ messages: Message[]; ui: UIMsgLocal[] }>({
     apiUrl: LANGGRAPH_URL,
     assistantId: "agent",
     messagesKey: "messages",
@@ -59,12 +58,10 @@ function App() {
 
         {thread.messages.map((message, idx) => {
           // Render UI cards attached to this message
-          const uiItems = (thread.values?.ui ?? []).filter(
-            (ui: UIMessage) =>
-              "metadata" in ui &&
-              (ui as UIMessage & { metadata?: { message_id?: string } })
-                .metadata?.message_id === message.id,
-          );
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const uiItems = ((thread.values as any)?.ui ?? []).filter(
+            (ui: UIMsgLocal) => ui.metadata?.message_id === message.id,
+          ) as UIMsgLocal[];
 
           if (message.type === "human") {
             return (
@@ -98,7 +95,7 @@ function App() {
                   </div>
                 )}
                 {/* UI cards */}
-                {uiItems.map((ui: UIMessage) => (
+                {uiItems.map((ui: UIMsgLocal) => (
                   <LoadExternalComponent
                     key={ui.id}
                     stream={thread}
@@ -117,13 +114,13 @@ function App() {
         {/* Streaming UI cards not yet attached to a completed message */}
         {thread.isLoading &&
           (thread.values?.ui ?? [])
-            .filter((ui: UIMessage) => {
+            .filter((ui: UIMsgLocal) => {
               const attachedToExisting = thread.messages.some(
                 (m) => m.id === ui.metadata?.message_id,
               );
               return !attachedToExisting;
             })
-            .map((ui: UIMessage) => (
+            .map((ui: UIMsgLocal) => (
               <LoadExternalComponent
                 key={ui.id}
                 stream={thread}