fix(main.tsx): rename UIMessage→UIMsgLocal to avoid SDK type conflict

This commit is contained in:
gongzhiyong
2026-04-10 04:35:15 +08:00
parent 4f75b65d52
commit 8d30e0cca0
+9 -12
View File
@@ -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}