split up

src/App.tsx

@@ -3,7 +3,7 @@ import { Thread } from "@/components/assistant-ui/thread";
 
 function App() {
   return (
-    <div className="h-full">
+    <div className="h-screen">
       <Thread />
     </div>
   );

src/components/assistant-ui/thread.tsx

@@ -218,6 +218,7 @@ function CustomComponent({
 }) {
   const meta = thread.getMessagesMetadata(message, idx);
   const seenState = meta?.firstSeenState;
+  console.log("seenState", meta);
   const customComponent = seenState?.values.ui
     .slice()
     .reverse()
@@ -226,9 +227,13 @@ function CustomComponent({
         additional_kwargs.run_id === seenState.metadata?.run_id,
     );
 
+  if (!customComponent) {
+    console.log("no custom component", message, meta);
+    return null;
+  }
+
   return (
     <div key={message.id}>
-      <pre>{JSON.stringify(message, null, 2)}</pre>
       {customComponent && (
         <LoadExternalComponent
           assistantId="agent"
@@ -245,10 +250,12 @@ const AssistantMessage: FC = () => {
   const assistantMsgs = useMessage((m) => {
     const langchainMessage = getExternalStoreMessages<Message>(m);
     return langchainMessage;
-  })?.[0];
+  });
+
+  const assistantMsg = assistantMsgs[0];
   let threadMsgIdx: number | undefined = undefined;
   const threadMsg = thread.messages.find((m, idx) => {
-    if (m.id === assistantMsgs?.id) {
+    if (m.id === assistantMsg?.id) {
       threadMsgIdx = idx;
       return true;
     }

src/providers/Runtime.tsx

@@ -21,14 +21,7 @@ export function RuntimeProvider({
 
     const input = message.content[0].text;
     const humanMessage: HumanMessage = { type: "human", content: input };
-    // TODO: I dont think I need to do this, since we're passing stream.messages into the state hook, and it should update when we call `submit`
-    // setMessages((currentConversation) => [
-    //   ...currentConversation,
-    //   humanMessage,
-    // ]);
-
     stream.submit({ messages: [humanMessage] });
-    console.log("Sent message", humanMessage);
   };
 
   const runtime = useExternalStoreRuntime({

src/providers/Stream.tsx

@@ -6,7 +6,6 @@ import type {
   RemoveUIMessage,
 } from "@langchain/langgraph-sdk/react-ui/types";
 
-// Define the type for the context value
 type StreamContextType = ReturnType<
   typeof useStream<
     { messages: Message[]; ui: UIMessage[] },
@@ -18,10 +17,8 @@ type StreamContextType = ReturnType<
   >
 >;
 
-// Create the context with a default undefined value
 const StreamContext = createContext<StreamContextType | undefined>(undefined);
 
-// Create a provider component
 export const StreamProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
@@ -37,8 +34,6 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
     assistantId: "agent",
   });
 
-  console.log("StreamProvider", streamValue);
-
   return (
     <StreamContext.Provider value={streamValue}>
       {children}