@assistant-ui/react 0.7.44 → 0.7.46

package/dist/ui/thread.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/thread.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type FC } from \"react\";\nimport { ArrowDownIcon } from \"lucide-react\";\n\nimport { withDefaults } from \"./utils/withDefaults\";\nimport Composer from \"./composer\";\nimport ThreadWelcome from \"./thread-welcome\";\nimport { TooltipIconButton } from \"./base/tooltip-icon-button\";\nimport AssistantMessage from \"./assistant-message\";\nimport UserMessage from \"./user-message\";\nimport EditComposer from \"./edit-composer\";\nimport {\n  ThreadConfig,\n  ThreadConfigProvider,\n  ThreadConfigProviderProps,\n  useThreadConfig,\n} from \"./thread-config\";\nimport { ThreadPrimitive } from \"../primitives\";\nimport { useThread } from \"../context\";\n\nconst Thread: FC<ThreadConfig> = (config) => {\n  const {\n    components: {\n      Composer: ComposerComponent = Composer,\n      ThreadWelcome: ThreadWelcomeComponent = ThreadWelcome,\n      ...messageComponents\n    } = {},\n  } = config;\n  return (\n    <ThreadRoot config={config}>\n      <ThreadViewport>\n        <ThreadWelcomeComponent />\n        <ThreadMessages components={messageComponents} />\n        <ThreadFollowupSuggestions />\n        <ThreadViewportFooter>\n          <ThreadScrollToBottom />\n          <ComposerComponent />\n        </ThreadViewportFooter>\n      </ThreadViewport>\n    </ThreadRoot>\n  );\n};\n\nnamespace ThreadRoot {\n  export type Element = HTMLDivElement;\n  export type Props = ThreadPrimitive.Root.Props & ThreadConfigProviderProps;\n}\n\nconst ThreadRootStyled = withDefaults(ThreadPrimitive.Root, {\n  className: \"aui-root aui-thread-root\",\n});\n\nconst ThreadRoot = forwardRef<ThreadRoot.Element, ThreadRoot.Props>(\n  ({ config, ...props }, ref) => {\n    return (\n      <ThreadConfigProvider config={config}>\n        <ThreadRootStyled {...props} ref={ref} />\n      </ThreadConfigProvider>\n    );\n  },\n);\n\nThreadRoot.displayName = \"ThreadRoot\";\n\nconst ThreadViewport = withDefaults(ThreadPrimitive.Viewport, {\n  className: \"aui-thread-viewport\",\n});\n\nThreadViewport.displayName = \"ThreadViewport\";\n\nconst ThreadViewportFooter = withDefaults(\"div\", {\n  className: \"aui-thread-viewport-footer\",\n});\n\nThreadViewportFooter.displayName = \"ThreadViewportFooter\";\n\nconst ThreadMessages: FC<{\n  unstable_flexGrowDiv?: boolean;\n  components?: Partial<ThreadPrimitive.Messages.Props[\"components\"]>;\n}> = ({ components, unstable_flexGrowDiv: flexGrowDiv = true, ...rest }) => {\n  return (\n    <>\n      <ThreadPrimitive.Messages\n        components={{\n          ...components,\n          UserMessage: components?.UserMessage ?? UserMessage,\n          AssistantMessage: components?.AssistantMessage ?? AssistantMessage,\n          EditComposer: components?.EditComposer ?? EditComposer,\n        }}\n        {...rest}\n      />\n      {flexGrowDiv && (\n        <ThreadPrimitive.If empty={false}>\n          <div style={{ flexGrow: 1 }} />\n        </ThreadPrimitive.If>\n      )}\n    </>\n  );\n};\n\nThreadMessages.displayName = \"ThreadMessages\";\n\nconst ThreadFollowupSuggestions: FC = () => {\n  const suggestions = useThread((t) => t.suggestions);\n\n  return (\n    <ThreadPrimitive.If empty={false} running={false}>\n      <div className=\"aui-thread-followup-suggestions\">\n        {suggestions?.map((suggestion, idx) => (\n          <ThreadPrimitive.Suggestion\n            key={idx}\n            className=\"aui-thread-followup-suggestion\"\n            prompt={suggestion.prompt}\n            method=\"replace\"\n            autoSend\n          >\n            {suggestion.prompt}\n          </ThreadPrimitive.Suggestion>\n        ))}\n      </div>\n    </ThreadPrimitive.If>\n  );\n};\n\nconst ThreadScrollToBottomIconButton = withDefaults(TooltipIconButton, {\n  variant: \"outline\",\n  className: \"aui-thread-scroll-to-bottom\",\n});\n\nnamespace ThreadScrollToBottom {\n  export type Element = HTMLButtonElement;\n  export type Props = Partial<TooltipIconButton.Props>;\n}\n\nconst ThreadScrollToBottom = forwardRef<\n  ThreadScrollToBottom.Element,\n  ThreadScrollToBottom.Props\n>((props, ref) => {\n  const {\n    strings: {\n      thread: { scrollToBottom: { tooltip = \"Scroll to bottom\" } = {} } = {},\n    } = {},\n  } = useThreadConfig();\n  return (\n    <ThreadPrimitive.ScrollToBottom asChild>\n      <ThreadScrollToBottomIconButton tooltip={tooltip} {...props} ref={ref}>\n        {props.children ?? <ArrowDownIcon />}\n      </ThreadScrollToBottomIconButton>\n    </ThreadPrimitive.ScrollToBottom>\n  );\n});\n\nThreadScrollToBottom.displayName = \"ThreadScrollToBottom\";\n\nconst exports = {\n  Root: ThreadRoot,\n  Viewport: ThreadViewport,\n  Messages: ThreadMessages,\n  FollowupSuggestions: ThreadFollowupSuggestions,\n  ScrollToBottom: ThreadScrollToBottom,\n  ViewportFooter: ThreadViewportFooter,\n};\n\nexport default Object.assign(Thread, exports) as typeof Thread & typeof exports;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/ui/thread.tsx"],"sourcesContent":["\"use client\";\n\nimport { ComponentType, forwardRef, type FC } from \"react\";\nimport { ArrowDownIcon } from \"lucide-react\";\n\nimport { withDefaults } from \"./utils/withDefaults\";\nimport Composer from \"./composer\";\nimport ThreadWelcome from \"./thread-welcome\";\nimport { TooltipIconButton } from \"./base/tooltip-icon-button\";\nimport AssistantMessage from \"./assistant-message\";\nimport UserMessage from \"./user-message\";\nimport EditComposer from \"./edit-composer\";\nimport {\n  ThreadConfig,\n  ThreadConfigProvider,\n  ThreadConfigProviderProps,\n  useThreadConfig,\n} from \"./thread-config\";\nimport { ThreadPrimitive } from \"../primitives\";\nimport { useThread } from \"../context\";\n\nconst Thread: FC<ThreadConfig> = (config) => {\n  const {\n    components: {\n      Composer: ComposerComponent = Composer,\n      ThreadWelcome: ThreadWelcomeComponent = ThreadWelcome,\n      MessagesFooter,\n      ...messageComponents\n    } = {},\n  } = config;\n  return (\n    <ThreadRoot config={config}>\n      <ThreadViewport>\n        <ThreadWelcomeComponent />\n        <ThreadMessages\n          MessagesFooter={MessagesFooter}\n          components={messageComponents}\n        />\n        <ThreadFollowupSuggestions />\n        <ThreadViewportFooter>\n          <ThreadScrollToBottom />\n          <ComposerComponent />\n        </ThreadViewportFooter>\n      </ThreadViewport>\n    </ThreadRoot>\n  );\n};\n\nnamespace ThreadRoot {\n  export type Element = HTMLDivElement;\n  export type Props = ThreadPrimitive.Root.Props & ThreadConfigProviderProps;\n}\n\nconst ThreadRootStyled = withDefaults(ThreadPrimitive.Root, {\n  className: \"aui-root aui-thread-root\",\n});\n\nconst ThreadRoot = forwardRef<ThreadRoot.Element, ThreadRoot.Props>(\n  ({ config, ...props }, ref) => {\n    return (\n      <ThreadConfigProvider config={config}>\n        <ThreadRootStyled {...props} ref={ref} />\n      </ThreadConfigProvider>\n    );\n  },\n);\n\nThreadRoot.displayName = \"ThreadRoot\";\n\nconst ThreadViewport = withDefaults(ThreadPrimitive.Viewport, {\n  className: \"aui-thread-viewport\",\n});\n\nThreadViewport.displayName = \"ThreadViewport\";\n\nconst ThreadViewportFooter = withDefaults(\"div\", {\n  className: \"aui-thread-viewport-footer\",\n});\n\nThreadViewportFooter.displayName = \"ThreadViewportFooter\";\n\nconst ThreadMessages: FC<{\n  unstable_flexGrowDiv?: boolean;\n  components?: Partial<ThreadPrimitive.Messages.Props[\"components\"]>;\n  MessagesFooter?: ComponentType | undefined;\n}> = ({\n  components,\n  MessagesFooter,\n  unstable_flexGrowDiv: flexGrowDiv = true,\n  ...rest\n}) => {\n  return (\n    <>\n      <ThreadPrimitive.Messages\n        components={{\n          ...components,\n          UserMessage: components?.UserMessage ?? UserMessage,\n          AssistantMessage: components?.AssistantMessage ?? AssistantMessage,\n          EditComposer: components?.EditComposer ?? EditComposer,\n        }}\n        {...rest}\n      />\n      {MessagesFooter && <MessagesFooter />}\n      {flexGrowDiv && (\n        <ThreadPrimitive.If empty={false}>\n          <div style={{ flexGrow: 1 }} />\n        </ThreadPrimitive.If>\n      )}\n    </>\n  );\n};\n\nThreadMessages.displayName = \"ThreadMessages\";\n\nconst ThreadFollowupSuggestions: FC = () => {\n  const suggestions = useThread((t) => t.suggestions);\n\n  return (\n    <ThreadPrimitive.If empty={false} running={false}>\n      <div className=\"aui-thread-followup-suggestions\">\n        {suggestions?.map((suggestion, idx) => (\n          <ThreadPrimitive.Suggestion\n            key={idx}\n            className=\"aui-thread-followup-suggestion\"\n            prompt={suggestion.prompt}\n            method=\"replace\"\n            autoSend\n          >\n            {suggestion.prompt}\n          </ThreadPrimitive.Suggestion>\n        ))}\n      </div>\n    </ThreadPrimitive.If>\n  );\n};\n\nconst ThreadScrollToBottomIconButton = withDefaults(TooltipIconButton, {\n  variant: \"outline\",\n  className: \"aui-thread-scroll-to-bottom\",\n});\n\nnamespace ThreadScrollToBottom {\n  export type Element = HTMLButtonElement;\n  export type Props = Partial<TooltipIconButton.Props>;\n}\n\nconst ThreadScrollToBottom = forwardRef<\n  ThreadScrollToBottom.Element,\n  ThreadScrollToBottom.Props\n>((props, ref) => {\n  const {\n    strings: {\n      thread: { scrollToBottom: { tooltip = \"Scroll to bottom\" } = {} } = {},\n    } = {},\n  } = useThreadConfig();\n  return (\n    <ThreadPrimitive.ScrollToBottom asChild>\n      <ThreadScrollToBottomIconButton tooltip={tooltip} {...props} ref={ref}>\n        {props.children ?? <ArrowDownIcon />}\n      </ThreadScrollToBottomIconButton>\n    </ThreadPrimitive.ScrollToBottom>\n  );\n});\n\nThreadScrollToBottom.displayName = \"ThreadScrollToBottom\";\n\nconst exports = {\n  Root: ThreadRoot,\n  Viewport: ThreadViewport,\n  Messages: ThreadMessages,\n  FollowupSuggestions: ThreadFollowupSuggestions,\n  ScrollToBottom: ThreadScrollToBottom,\n  ViewportFooter: ThreadViewportFooter,\n};\n\nexport default Object.assign(Thread, exports) as typeof Thread & typeof exports;\n"],"mappings":"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","names":[]}

package/package.json

@@ -29,7 +29,7 @@
     "conversational-ui",
     "conversational-ai"
   ],
-  "version": "0.7.44",
+  "version": "0.7.46",
   "license": "MIT",
   "exports": {
     ".": {
@@ -117,9 +117,9 @@
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
     "tsx": "^4.19.2",
-    "@assistant-ui/tailwindcss-transformer": "0.1.0",
     "@assistant-ui/tsbuildutils": "^0.0.1",
-    "@assistant-ui/tsconfig": "0.0.0"
+    "@assistant-ui/tsconfig": "0.0.0",
+    "@assistant-ui/tailwindcss-transformer": "0.1.0"
   },
   "publishConfig": {
     "access": "public",

package/src/runtimes/remote-thread-list/OptimisticState.ts

@@ -10,7 +10,11 @@ type Transform<TState, TResult> = {
   optimistic?: (state: TState) => TState;
 
   /** transform the state only while loading */
-  loading?: (state: TState) => TState;
+  loading?: (state: TState, task: Promise<TResult>) => TState;
+};
+
+type PendingTransform<TState, TResult> = Transform<TState, TResult> & {
+  task: Promise<TResult>;
 };
 
 const pipeTransforms = <TState, TExtra>(
@@ -24,7 +28,8 @@ const pipeTransforms = <TState, TExtra>(
 };
 
 export class OptimisticState<TState> extends BaseSubscribable {
-  private readonly _pendingTransforms: Array<Transform<TState, any>> = [];
+  private readonly _pendingTransforms: Array<PendingTransform<TState, any>> =
+    [];
   private _baseValue: TState;
   private _cachedValue: TState;
 
@@ -36,7 +41,7 @@ export class OptimisticState<TState> extends BaseSubscribable {
 
   private _updateState(): void {
     this._cachedValue = this._pendingTransforms.reduce((state, transform) => {
-      return pipeTransforms(state, undefined, [
+      return pipeTransforms(state, transform.task, [
         transform.loading,
         transform.optimistic,
       ]);
@@ -61,18 +66,20 @@ export class OptimisticState<TState> extends BaseSubscribable {
   public async optimisticUpdate<TResult>(
     transform: Transform<TState, TResult>,
   ): Promise<TResult> {
-    this._pendingTransforms.push(transform);
-    this._updateState();
-
+    const task = transform.execute();
+    const pendingTransform = { ...transform, task };
     try {
-      const result = await transform.execute();
+      this._pendingTransforms.push(pendingTransform);
+      this._updateState();
+
+      const result = await task;
       this._baseValue = pipeTransforms(this._baseValue, result, [
         transform.optimistic,
         transform.then,
       ]);
       return result;
     } finally {
-      const index = this._pendingTransforms.indexOf(transform);
+      const index = this._pendingTransforms.indexOf(pendingTransform);
       if (index > -1) {
         this._pendingTransforms.splice(index, 1);
       }

package/src/runtimes/remote-thread-list/RemoteThreadListHookInstanceManager.tsx

@@ -13,7 +13,10 @@ import {
 import { UseBoundStore, StoreApi, create } from "zustand";
 import { useAssistantRuntime } from "../../context";
 import { ThreadListItemRuntimeProvider } from "../../context/providers/ThreadListItemRuntimeProvider";
-import { useThreadListItem } from "../../context/react/ThreadListItemContext";
+import {
+  useThreadListItem,
+  useThreadListItemRuntime,
+} from "../../context/react/ThreadListItemContext";
 import { ThreadRuntimeCore, ThreadRuntimeImpl } from "../../internal";
 import { BaseSubscribable } from "./BaseSubscribable";
 import { AssistantRuntime } from "../../api";
@@ -112,6 +115,16 @@ export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
       return threadBinding.outerSubscribe(updateRuntime);
     }, [threadBinding]);
 
+    // auto initialize thread
+    const threadListItemRuntime = useThreadListItemRuntime();
+    useEffect(() => {
+      return runtime.threads.main.unstable_on("initialize", () => {
+        if (threadListItemRuntime.getState().status === "new") {
+          threadListItemRuntime.initialize();
+        }
+      });
+    }, [runtime, threadListItemRuntime]);
+
     return null;
   };
 
@@ -121,7 +134,7 @@ export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
   }> = memo(({ threadId, provider: Provider }) => {
     const assistantRuntime = useAssistantRuntime();
     const threadListItemRuntime = useMemo(
-      () => assistantRuntime.threadList.getItemById(threadId),
+      () => assistantRuntime.threads.getItemById(threadId),
       [assistantRuntime, threadId],
     );
 

package/src/runtimes/remote-thread-list/RemoteThreadListThreadListRuntimeCore.tsx

@@ -2,7 +2,10 @@
 
 import { ThreadListRuntimeCore } from "../core/ThreadListRuntimeCore";
 import { generateId } from "../../internal";
-import { RemoteThreadListAdapter } from "./types";
+import {
+  RemoteThreadInitializeResponse,
+  RemoteThreadListAdapter,
+} from "./types";
 import { RemoteThreadListHookInstanceManager } from "./RemoteThreadListHookInstanceManager";
 import { BaseSubscribable } from "./BaseSubscribable";
 import { EMPTY_THREAD_CORE } from "./EMPTY_THREAD_CORE";
@@ -21,6 +24,15 @@ type RemoteThreadData =
     }
   | {
       readonly threadId: string;
+      readonly initializeTask: Promise<RemoteThreadInitializeResponse>;
+      readonly remoteId?: undefined;
+      readonly externalId?: undefined;
+      readonly status: "regular" | "archived";
+      readonly title?: string | undefined;
+    }
+  | {
+      readonly threadId: string;
+      readonly initializeTask: Promise<RemoteThreadInitializeResponse>;
       readonly remoteId: string;
       readonly externalId: string | undefined;
       readonly status: "regular" | "archived";
@@ -185,6 +197,10 @@ export class RemoteThreadListThreadListRuntimeCore
                 externalId: thread.externalId,
                 status: thread.status,
                 title: thread.title,
+                initializeTask: Promise.resolve({
+                  remoteId: thread.remoteId,
+                  externalId: thread.externalId,
+                }),
               };
             }
 
@@ -338,8 +354,12 @@ export class RemoteThreadListThreadListRuntimeCore
   }
 
   public initialize = async (threadId: string) => {
-    if (this._state.value.newThreadId !== threadId)
-      throw new Error("The provided thread is already initialized");
+    if (this._state.value.newThreadId !== threadId) {
+      const data = this.getItemById(threadId);
+      if (!data) throw new Error("Thread not found");
+      if (data.status === "new") throw new Error("Unexpected new state");
+      return data.initializeTask;
+    }
 
     return this._state.optimisticUpdate({
       execute: () => {
@@ -348,6 +368,19 @@ export class RemoteThreadListThreadListRuntimeCore
       optimistic: (state) => {
         return updateStatusReducer(state, threadId, "regular");
       },
+      loading: (state, task) => {
+        const mappingId = createThreadMappingId(threadId);
+        return {
+          ...state,
+          threadData: {
+            ...state.threadData,
+            [mappingId]: {
+              ...state.threadData[mappingId],
+              initializeTask: task,
+            },
+          },
+        };
+      },
       then: (state, { remoteId, externalId }) => {
         const data = getThreadData(state, threadId);
         if (!data) return state;
@@ -361,8 +394,9 @@ export class RemoteThreadListThreadListRuntimeCore
           },
           threadData: {
             ...state.threadData,
-            [threadId]: {
+            [mappingId]: {
               ...data,
+              initializeTask: Promise.resolve({ remoteId, externalId }),
               remoteId,
               externalId,
             },
@@ -406,8 +440,9 @@ export class RemoteThreadListThreadListRuntimeCore
     if (data.status === "new") throw new Error("Thread is not yet initialized");
 
     return this._state.optimisticUpdate({
-      execute: () => {
-        return this._adapter.rename(data.remoteId, newTitle);
+      execute: async () => {
+        const { remoteId } = await data.initializeTask;
+        return this._adapter.rename(remoteId, newTitle);
       },
       optimistic: (state) => {
         const data = getThreadData(state, threadIdOrRemoteId);
@@ -448,7 +483,8 @@ export class RemoteThreadListThreadListRuntimeCore
     return this._state.optimisticUpdate({
       execute: async () => {
         await this._ensureThreadIsNotMain(data.threadId);
-        return this._adapter.archive(data.remoteId);
+        const { remoteId } = await data.initializeTask;
+        return this._adapter.archive(remoteId);
       },
       optimistic: (state) => {
         return updateStatusReducer(state, data.threadId, "archived");
@@ -464,7 +500,8 @@ export class RemoteThreadListThreadListRuntimeCore
     return this._state.optimisticUpdate({
       execute: async () => {
         try {
-          return await this._adapter.unarchive(data.remoteId);
+          const { remoteId } = await data.initializeTask;
+          return await this._adapter.unarchive(remoteId);
         } catch (error) {
           await this._ensureThreadIsNotMain(data.threadId);
           throw error;
@@ -485,7 +522,8 @@ export class RemoteThreadListThreadListRuntimeCore
     return this._state.optimisticUpdate({
       execute: async () => {
         await this._ensureThreadIsNotMain(data.threadId);
-        return await this._adapter.delete(data.remoteId);
+        const { remoteId } = await data.initializeTask;
+        return await this._adapter.delete(remoteId);
       },
       optimistic: (state) => {
         return updateStatusReducer(state, data.threadId, "deleted");

package/src/ui/assistant-message.tsx

@@ -65,6 +65,7 @@ const AssistantMessageContent = forwardRef<
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [...(tools ?? []), components.ToolFallback],
   );
+  const Footer = components.Footer;
 
   return (
     <AssistantMessageContentWrapper {...rest} ref={ref}>
@@ -76,6 +77,7 @@ const AssistantMessageContent = forwardRef<
           tools: toolsComponents,
         }}
       />
+      {Footer && <Footer />}
     </AssistantMessageContentWrapper>
   );
 });

package/src/ui/thread-config.tsx

@@ -45,6 +45,7 @@ export type AssistantMessageConfig = {
         Text?: TextContentPartComponent | undefined;
         Empty?: EmptyContentPartComponent | undefined;
         ToolFallback?: ComponentType<ToolCallContentPartProps> | undefined;
+        Footer?: ComponentType | undefined;
       }
     | undefined;
 };
@@ -192,6 +193,7 @@ export type ThreadConfig = {
         EditComposer?: ComponentType | undefined;
         Composer?: ComponentType | undefined;
         ThreadWelcome?: ComponentType | undefined;
+        MessagesFooter?: ComponentType | undefined;
       }
     | undefined;
 };

package/src/ui/thread.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, type FC } from "react";
+import { ComponentType, forwardRef, type FC } from "react";
 import { ArrowDownIcon } from "lucide-react";
 
 import { withDefaults } from "./utils/withDefaults";
@@ -24,6 +24,7 @@ const Thread: FC<ThreadConfig> = (config) => {
     components: {
       Composer: ComposerComponent = Composer,
       ThreadWelcome: ThreadWelcomeComponent = ThreadWelcome,
+      MessagesFooter,
       ...messageComponents
     } = {},
   } = config;
@@ -31,7 +32,10 @@ const Thread: FC<ThreadConfig> = (config) => {
     <ThreadRoot config={config}>
       <ThreadViewport>
         <ThreadWelcomeComponent />
-        <ThreadMessages components={messageComponents} />
+        <ThreadMessages
+          MessagesFooter={MessagesFooter}
+          components={messageComponents}
+        />
         <ThreadFollowupSuggestions />
         <ThreadViewportFooter>
           <ThreadScrollToBottom />
@@ -78,7 +82,13 @@ ThreadViewportFooter.displayName = "ThreadViewportFooter";
 const ThreadMessages: FC<{
   unstable_flexGrowDiv?: boolean;
   components?: Partial<ThreadPrimitive.Messages.Props["components"]>;
-}> = ({ components, unstable_flexGrowDiv: flexGrowDiv = true, ...rest }) => {
+  MessagesFooter?: ComponentType | undefined;
+}> = ({
+  components,
+  MessagesFooter,
+  unstable_flexGrowDiv: flexGrowDiv = true,
+  ...rest
+}) => {
   return (
     <>
       <ThreadPrimitive.Messages
@@ -90,6 +100,7 @@ const ThreadMessages: FC<{
         }}
         {...rest}
       />
+      {MessagesFooter && <MessagesFooter />}
       {flexGrowDiv && (
         <ThreadPrimitive.If empty={false}>
           <div style={{ flexGrow: 1 }} />