@assistant-ui/react 0.10.42 → 0.10.44

package/package.json

@@ -28,7 +28,7 @@
     "conversational-ui",
     "conversational-ai"
   ],
-  "version": "0.10.42",
+  "version": "0.10.44",
   "license": "MIT",
   "type": "module",
   "exports": {

package/src/primitives/composer/ComposerAttachments.tsx

@@ -48,31 +48,55 @@ const AttachmentComponent: FC<{
   return <Component />;
 };
 
-const ComposerAttachmentImpl: FC<
-  ComposerPrimitiveAttachments.Props & { attachmentIndex: number }
-> = ({ components, attachmentIndex }) => {
-  const composerRuntime = useComposerRuntime();
-  const runtime = useMemo(
-    () => composerRuntime.getAttachmentByIndex(attachmentIndex),
-    [composerRuntime, attachmentIndex],
-  );
+export namespace ComposerPrimitiveAttachmentByIndex {
+  export type Props = {
+    index: number;
+    components?: ComposerPrimitiveAttachments.Props["components"];
+  };
+}
+
+/**
+ * Renders a single attachment at the specified index within the composer.
+ *
+ * This component provides direct access to render a specific attachment
+ * from the composer's attachment list using the provided component configuration.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.AttachmentByIndex
+ *   index={0}
+ *   components={{
+ *     Image: MyImageAttachment,
+ *     Document: MyDocumentAttachment
+ *   }}
+ * />
+ * ```
+ */
+export const ComposerPrimitiveAttachmentByIndex: FC<ComposerPrimitiveAttachmentByIndex.Props> =
+  memo(
+    ({ index, components }) => {
+      const composerRuntime = useComposerRuntime();
+      const runtime = useMemo(
+        () => composerRuntime.getAttachmentByIndex(index),
+        [composerRuntime, index],
+      );
 
-  return (
-    <AttachmentRuntimeProvider runtime={runtime}>
-      <AttachmentComponent components={components} />
-    </AttachmentRuntimeProvider>
+      return (
+        <AttachmentRuntimeProvider runtime={runtime}>
+          <AttachmentComponent components={components} />
+        </AttachmentRuntimeProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      prev.components?.Image === next.components?.Image &&
+      prev.components?.Document === next.components?.Document &&
+      prev.components?.File === next.components?.File &&
+      prev.components?.Attachment === next.components?.Attachment,
   );
-};
 
-const ComposerAttachment = memo(
-  ComposerAttachmentImpl,
-  (prev, next) =>
-    prev.attachmentIndex === next.attachmentIndex &&
-    prev.components?.Image === next.components?.Image &&
-    prev.components?.Document === next.components?.Document &&
-    prev.components?.File === next.components?.File &&
-    prev.components?.Attachment === next.components?.Attachment,
-);
+ComposerPrimitiveAttachmentByIndex.displayName =
+  "ComposerPrimitive.AttachmentByIndex";
 
 export const ComposerPrimitiveAttachments: FC<
   ComposerPrimitiveAttachments.Props
@@ -81,9 +105,9 @@ export const ComposerPrimitiveAttachments: FC<
 
   const attachmentElements = useMemo(() => {
     return Array.from({ length: attachmentsCount }, (_, index) => (
-      <ComposerAttachment
+      <ComposerPrimitiveAttachmentByIndex
         key={index}
-        attachmentIndex={index}
+        index={index}
         components={components}
       />
     ));

package/src/primitives/composer/index.ts

@@ -4,4 +4,5 @@ export { ComposerPrimitiveSend as Send } from "./ComposerSend";
 export { ComposerPrimitiveCancel as Cancel } from "./ComposerCancel";
 export { ComposerPrimitiveAddAttachment as AddAttachment } from "./ComposerAddAttachment";
 export { ComposerPrimitiveAttachments as Attachments } from "./ComposerAttachments";
+export { ComposerPrimitiveAttachmentByIndex as AttachmentByIndex } from "./ComposerAttachments";
 export { ComposerPrimitiveIf as If } from "./ComposerIf";

package/src/primitives/message/MessageAttachments.tsx

@@ -46,31 +46,55 @@ const AttachmentComponent: FC<{
   return <Component />;
 };
 
-const MessageAttachmentImpl: FC<
-  MessagePrimitiveAttachments.Props & { attachmentIndex: number }
-> = ({ components, attachmentIndex }) => {
-  const messageRuntime = useMessageRuntime();
-  const runtime = useMemo(
-    () => messageRuntime.getAttachmentByIndex(attachmentIndex),
-    [messageRuntime, attachmentIndex],
-  );
+export namespace MessagePrimitiveAttachmentByIndex {
+  export type Props = {
+    index: number;
+    components?: MessagePrimitiveAttachments.Props["components"];
+  };
+}
+
+/**
+ * Renders a single attachment at the specified index within the current message.
+ *
+ * This component provides direct access to render a specific attachment
+ * from the message's attachment list using the provided component configuration.
+ *
+ * @example
+ * ```tsx
+ * <MessagePrimitive.AttachmentByIndex
+ *   index={0}
+ *   components={{
+ *     Image: MyImageAttachment,
+ *     Document: MyDocumentAttachment
+ *   }}
+ * />
+ * ```
+ */
+export const MessagePrimitiveAttachmentByIndex: FC<MessagePrimitiveAttachmentByIndex.Props> =
+  memo(
+    ({ index, components }) => {
+      const messageRuntime = useMessageRuntime();
+      const runtime = useMemo(
+        () => messageRuntime.getAttachmentByIndex(index),
+        [messageRuntime, index],
+      );
 
-  return (
-    <AttachmentRuntimeProvider runtime={runtime}>
-      <AttachmentComponent components={components} />
-    </AttachmentRuntimeProvider>
+      return (
+        <AttachmentRuntimeProvider runtime={runtime}>
+          <AttachmentComponent components={components} />
+        </AttachmentRuntimeProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      prev.components?.Image === next.components?.Image &&
+      prev.components?.Document === next.components?.Document &&
+      prev.components?.File === next.components?.File &&
+      prev.components?.Attachment === next.components?.Attachment,
   );
-};
 
-const MessageAttachment = memo(
-  MessageAttachmentImpl,
-  (prev, next) =>
-    prev.attachmentIndex === next.attachmentIndex &&
-    prev.components?.Image === next.components?.Image &&
-    prev.components?.Document === next.components?.Document &&
-    prev.components?.File === next.components?.File &&
-    prev.components?.Attachment === next.components?.Attachment,
-);
+MessagePrimitiveAttachmentByIndex.displayName =
+  "MessagePrimitive.AttachmentByIndex";
 
 export const MessagePrimitiveAttachments: FC<
   MessagePrimitiveAttachments.Props
@@ -82,9 +106,9 @@ export const MessagePrimitiveAttachments: FC<
 
   const attachmentElements = useMemo(() => {
     return Array.from({ length: attachmentsCount }, (_, index) => (
-      <MessageAttachment
+      <MessagePrimitiveAttachmentByIndex
         key={index}
-        attachmentIndex={index}
+        index={index}
         components={components}
       />
     ));

package/src/primitives/message/MessageParts.tsx

@@ -279,38 +279,58 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
   }
 };
 
-type MessagePartProps = {
-  partIndex: number;
-  components: MessagePrimitiveParts.Props["components"];
-};
-
-const MessagePartImpl: FC<MessagePartProps> = ({ partIndex, components }) => {
-  const messageRuntime = useMessageRuntime();
-  const runtime = useMemo(
-    () => messageRuntime.getMessagePartByIndex(partIndex),
-    [messageRuntime, partIndex],
-  );
+export namespace MessagePrimitivePartByIndex {
+  export type Props = {
+    index: number;
+    components: MessagePrimitiveParts.Props["components"];
+  };
+}
 
-  return (
-    <MessagePartRuntimeProvider runtime={runtime}>
-      <MessagePartComponent components={components} />
-    </MessagePartRuntimeProvider>
+/**
+ * Renders a single message part at the specified index.
+ *
+ * This component provides direct access to render a specific message part
+ * within the current message context, using the provided component configuration.
+ *
+ * @example
+ * ```tsx
+ * <MessagePrimitive.PartByIndex
+ *   index={0}
+ *   components={{
+ *     Text: MyTextComponent,
+ *     Image: MyImageComponent
+ *   }}
+ * />
+ * ```
+ */
+export const MessagePrimitivePartByIndex: FC<MessagePrimitivePartByIndex.Props> =
+  memo(
+    ({ index, components }) => {
+      const messageRuntime = useMessageRuntime();
+      const runtime = useMemo(
+        () => messageRuntime.getMessagePartByIndex(index),
+        [messageRuntime, index],
+      );
+
+      return (
+        <MessagePartRuntimeProvider runtime={runtime}>
+          <MessagePartComponent components={components} />
+        </MessagePartRuntimeProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      prev.components?.Text === next.components?.Text &&
+      prev.components?.Reasoning === next.components?.Reasoning &&
+      prev.components?.Source === next.components?.Source &&
+      prev.components?.Image === next.components?.Image &&
+      prev.components?.File === next.components?.File &&
+      prev.components?.Unstable_Audio === next.components?.Unstable_Audio &&
+      prev.components?.tools === next.components?.tools &&
+      prev.components?.ToolGroup === next.components?.ToolGroup,
   );
-};
 
-const MessagePart = memo(
-  MessagePartImpl,
-  (prev, next) =>
-    prev.partIndex === next.partIndex &&
-    prev.components?.Text === next.components?.Text &&
-    prev.components?.Reasoning === next.components?.Reasoning &&
-    prev.components?.Source === next.components?.Source &&
-    prev.components?.Image === next.components?.Image &&
-    prev.components?.File === next.components?.File &&
-    prev.components?.Unstable_Audio === next.components?.Unstable_Audio &&
-    prev.components?.tools === next.components?.tools &&
-    prev.components?.ToolGroup === next.components?.ToolGroup,
-);
+MessagePrimitivePartByIndex.displayName = "MessagePrimitive.PartByIndex";
 
 const COMPLETE_STATUS: MessagePartStatus = Object.freeze({
   type: "complete",
@@ -386,9 +406,9 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = ({
     return messageRanges.map((range) => {
       if (range.type === "single") {
         return (
-          <MessagePart
+          <MessagePrimitivePartByIndex
             key={range.index}
-            partIndex={range.index}
+            index={range.index}
             components={components}
           />
         );
@@ -404,9 +424,9 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = ({
             {Array.from(
               { length: range.endIndex - range.startIndex + 1 },
               (_, i) => (
-                <MessagePart
+                <MessagePrimitivePartByIndex
                   key={i}
-                  partIndex={range.startIndex + i}
+                  index={range.startIndex + i}
                   components={components}
                 />
               ),

package/src/primitives/message/index.ts

@@ -1,8 +1,10 @@
 export { MessagePrimitiveRoot as Root } from "./MessageRoot";
 export { MessagePrimitiveParts as Parts } from "./MessageParts";
+export { MessagePrimitivePartByIndex as PartByIndex } from "./MessageParts";
 export { MessagePrimitiveParts as Content } from "./MessageParts";
 export { MessagePrimitiveIf as If } from "./MessageIf";
 export { MessagePrimitiveAttachments as Attachments } from "./MessageAttachments";
+export { MessagePrimitiveAttachmentByIndex as AttachmentByIndex } from "./MessageAttachments";
 export { MessagePrimitiveError as Error } from "./MessageError";
 export {
   MessagePrimitiveUnstable_PartsGrouped as Unstable_PartsGrouped,

package/src/primitives/thread/ThreadMessages.tsx

@@ -136,35 +136,51 @@ const ThreadMessageComponent: FC<ThreadMessageComponentProps> = ({
 
   return <Component />;
 };
+export namespace ThreadPrimitiveMessageByIndex {
+  export type Props = {
+    index: number;
+    components: ThreadPrimitiveMessages.Props["components"];
+  };
+}
 
-type ThreadMessageProps = {
-  messageIndex: number;
-  components: ThreadPrimitiveMessages.Props["components"];
-};
-
-const ThreadMessageImpl: FC<ThreadMessageProps> = ({
-  messageIndex,
-  components,
-}) => {
-  const threadRuntime = useThreadRuntime();
-  const runtime = useMemo(
-    () => threadRuntime.getMesssageByIndex(messageIndex),
-    [threadRuntime, messageIndex],
-  );
-
-  return (
-    <MessageRuntimeProvider runtime={runtime}>
-      <ThreadMessageComponent components={components} />
-    </MessageRuntimeProvider>
+/**
+ * Renders a single message at the specified index in the current thread.
+ *
+ * This component provides message context for a specific message in the thread
+ * and renders it using the provided component configuration.
+ *
+ * @example
+ * ```tsx
+ * <ThreadPrimitive.MessageByIndex
+ *   index={0}
+ *   components={{
+ *     UserMessage: MyUserMessage,
+ *     AssistantMessage: MyAssistantMessage
+ *   }}
+ * />
+ * ```
+ */
+export const ThreadPrimitiveMessageByIndex: FC<ThreadPrimitiveMessageByIndex.Props> =
+  memo(
+    ({ index, components }) => {
+      const threadRuntime = useThreadRuntime();
+      const runtime = useMemo(
+        () => threadRuntime.getMesssageByIndex(index),
+        [threadRuntime, index],
+      );
+
+      return (
+        <MessageRuntimeProvider runtime={runtime}>
+          <ThreadMessageComponent components={components} />
+        </MessageRuntimeProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      isComponentsSame(prev.components, next.components),
   );
-};
 
-const ThreadMessage = memo(
-  ThreadMessageImpl,
-  (prev, next) =>
-    prev.messageIndex === next.messageIndex &&
-    isComponentsSame(prev.components, next.components),
-);
+ThreadPrimitiveMessageByIndex.displayName = "ThreadPrimitive.MessageByIndex";
 
 /**
  * Renders all messages in the current thread using the provided component configuration.
@@ -192,7 +208,11 @@ export const ThreadPrimitiveMessagesImpl: FC<ThreadPrimitiveMessages.Props> = ({
   const messageElements = useMemo(() => {
     if (messagesLength === 0) return null;
     return Array.from({ length: messagesLength }, (_, index) => (
-      <ThreadMessage key={index} messageIndex={index} components={components} />
+      <ThreadPrimitiveMessageByIndex
+        key={index}
+        index={index}
+        components={components}
+      />
     ));
   }, [messagesLength, components]);
 

package/src/primitives/thread/index.ts

@@ -3,5 +3,6 @@ export { ThreadPrimitiveEmpty as Empty } from "./ThreadEmpty";
 export { ThreadPrimitiveIf as If } from "./ThreadIf";
 export { ThreadPrimitiveViewport as Viewport } from "./ThreadViewport";
 export { ThreadPrimitiveMessages as Messages } from "./ThreadMessages";
+export { ThreadPrimitiveMessageByIndex as MessageByIndex } from "./ThreadMessages";
 export { ThreadPrimitiveScrollToBottom as ScrollToBottom } from "./ThreadScrollToBottom";
 export { ThreadPrimitiveSuggestion as Suggestion } from "./ThreadSuggestion";

package/src/primitives/threadList/ThreadListItems.tsx

@@ -13,42 +13,57 @@ export namespace ThreadListPrimitiveItems {
   };
 }
 
-type ThreadListItemProps = {
-  partIndex: number;
-  archived: boolean;
-  components: ThreadListPrimitiveItems.Props["components"];
-};
+export namespace ThreadListPrimitiveItemByIndex {
+  export type Props = {
+    index: number;
+    archived?: boolean | undefined;
+    components: ThreadListPrimitiveItems.Props["components"];
+  };
+}
 
-const ThreadListItemImpl: FC<ThreadListItemProps> = ({
-  partIndex,
-  archived,
-  components,
-}) => {
-  const assistantRuntime = useAssistantRuntime();
-  const runtime = useMemo(
-    () =>
-      archived
-        ? assistantRuntime.threads.getArchivedItemByIndex(partIndex)
-        : assistantRuntime.threads.getItemByIndex(partIndex),
-    [assistantRuntime, partIndex, archived],
-  );
+/**
+ * Renders a single thread list item at the specified index.
+ *
+ * This component provides direct access to render a specific thread
+ * from the thread list using the provided component configuration.
+ *
+ * @example
+ * ```tsx
+ * <ThreadListPrimitive.ItemByIndex
+ *   index={0}
+ *   components={{
+ *     ThreadListItem: MyThreadListItem
+ *   }}
+ * />
+ * ```
+ */
+export const ThreadListPrimitiveItemByIndex: FC<ThreadListPrimitiveItemByIndex.Props> =
+  memo(
+    ({ index, archived = false, components }) => {
+      const assistantRuntime = useAssistantRuntime();
+      const runtime = useMemo(
+        () =>
+          archived
+            ? assistantRuntime.threads.getArchivedItemByIndex(index)
+            : assistantRuntime.threads.getItemByIndex(index),
+        [assistantRuntime, index, archived],
+      );
 
-  const ThreadListItemComponent = components.ThreadListItem;
+      const ThreadListItemComponent = components.ThreadListItem;
 
-  return (
-    <ThreadListItemRuntimeProvider runtime={runtime}>
-      <ThreadListItemComponent />
-    </ThreadListItemRuntimeProvider>
+      return (
+        <ThreadListItemRuntimeProvider runtime={runtime}>
+          <ThreadListItemComponent />
+        </ThreadListItemRuntimeProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      prev.archived === next.archived &&
+      prev.components.ThreadListItem === next.components.ThreadListItem,
   );
-};
 
-const ThreadListItem = memo(
-  ThreadListItemImpl,
-  (prev, next) =>
-    prev.partIndex === next.partIndex &&
-    prev.archived === next.archived &&
-    prev.components.ThreadListItem === next.components.ThreadListItem,
-);
+ThreadListPrimitiveItemByIndex.displayName = "ThreadListPrimitive.ItemByIndex";
 
 export const ThreadListPrimitiveItems: FC<ThreadListPrimitiveItems.Props> = ({
   archived = false,
@@ -60,9 +75,9 @@ export const ThreadListPrimitiveItems: FC<ThreadListPrimitiveItems.Props> = ({
 
   const listElements = useMemo(() => {
     return Array.from({ length: contentLength }, (_, index) => (
-      <ThreadListItem
+      <ThreadListPrimitiveItemByIndex
         key={index}
-        partIndex={index}
+        index={index}
         archived={archived}
         components={components}
       />

package/src/primitives/threadList/index.ts

@@ -1,3 +1,4 @@
 export { ThreadListPrimitiveNew as New } from "./ThreadListNew";
 export { ThreadListPrimitiveItems as Items } from "./ThreadListItems";
+export { ThreadListPrimitiveItemByIndex as ItemByIndex } from "./ThreadListItems";
 export { ThreadListPrimitiveRoot as Root } from "./ThreadListRoot";

package/src/runtimes/composer/BaseComposerRuntimeCore.tsx

@@ -124,7 +124,7 @@ export abstract class BaseComposerRuntimeCore
     const adapter = this.getAttachmentAdapter();
     const attachments =
       adapter && this.attachments.length > 0
-        ? await Promise.all(
+        ? Promise.all(
             this.attachments.map(async (a) => {
               if (isAttachmentComplete(a)) return a;
               const result = await adapter.send(a);
@@ -133,15 +133,16 @@ export abstract class BaseComposerRuntimeCore
           )
         : [];
 
+    const text = this.text;
+    this._emptyTextAndAttachments();
     const message: Omit<AppendMessage, "parentId" | "sourceId"> = {
       createdAt: new Date(),
       role: this.role,
-      content: this.text ? [{ type: "text", text: this.text }] : [],
-      attachments,
+      content: text ? [{ type: "text", text }] : [],
+      attachments: await attachments,
       runConfig: this.runConfig,
       metadata: { custom: {} },
     };
-    this._emptyTextAndAttachments();
 
     this.handleSend(message);
     this._notifyEventSubscribers("send");

package/src/runtimes/external-store/ExternalStoreThreadRuntimeCore.tsx

@@ -12,7 +12,7 @@ import {
 } from "./getExternalStoreMessage";
 import { ThreadMessageConverter } from "./ThreadMessageConverter";
 import { getAutoStatus, isAutoStatus } from "./auto-status";
-import { fromThreadMessageLike } from "./ThreadMessageLike";
+import { fromThreadMessageLike, ThreadMessageLike } from "./ThreadMessageLike";
 import { getThreadMessageText } from "../../utils/getThreadMessageText";
 import {
   RuntimeCapabilities,
@@ -20,6 +20,10 @@ import {
 } from "../core/ThreadRuntimeCore";
 import { BaseThreadRuntimeCore } from "../core/BaseThreadRuntimeCore";
 import { ModelContextProvider } from "../../model-context";
+import {
+  ExportedMessageRepository,
+  MessageRepository,
+} from "../utils/MessageRepository";
 
 const EMPTY_ARRAY = Object.freeze([]);
 
@@ -34,7 +38,8 @@ export class ExternalStoreThreadRuntimeCore
   extends BaseThreadRuntimeCore
   implements ThreadRuntimeCore
 {
-  private assistantOptimisticId: string | null = null;
+  private _resetScheduled = false;
+  private _assistantOptimisticId: string | null = null;
 
   private _capabilities: RuntimeCapabilities = {
     switchToBranch: false,
@@ -123,7 +128,7 @@ export class ExternalStoreThreadRuntimeCore
 
       // Clear and import the message repository
       this.repository.clear();
-      this.assistantOptimisticId = null;
+      this._assistantOptimisticId = null;
       this.repository.import(store.messageRepository);
 
       messages = this.repository.getMessages();
@@ -170,6 +175,12 @@ export class ExternalStoreThreadRuntimeCore
             return newMessage;
           });
 
+      // special case: branches should be reset if an empty array is provided
+      if (this._resetScheduled || messages.length === 0) {
+        this._resetScheduled = false;
+        this.repository.clear();
+      }
+
       for (let i = 0; i < messages.length; i++) {
         const message = messages[i]!;
         const parent = messages[i - 1];
@@ -192,13 +203,13 @@ export class ExternalStoreThreadRuntimeCore
       }
     }
 
-    if (this.assistantOptimisticId) {
-      this.repository.deleteMessage(this.assistantOptimisticId);
-      this.assistantOptimisticId = null;
+    if (this._assistantOptimisticId) {
+      this.repository.deleteMessage(this._assistantOptimisticId);
+      this._assistantOptimisticId = null;
     }
 
     if (hasUpcomingMessage(isRunning, messages)) {
-      this.assistantOptimisticId = this.repository.appendOptimisticMessage(
+      this._assistantOptimisticId = this.repository.appendOptimisticMessage(
         messages.at(-1)?.id ?? null,
         {
           role: "assistant",
@@ -208,7 +219,7 @@ export class ExternalStoreThreadRuntimeCore
     }
 
     this.repository.resetHead(
-      this.assistantOptimisticId ?? messages.at(-1)?.id ?? null,
+      this._assistantOptimisticId ?? messages.at(-1)?.id ?? null,
     );
 
     this._messages = this.repository.getMessages();
@@ -250,9 +261,9 @@ export class ExternalStoreThreadRuntimeCore
 
     this._store.onCancel();
 
-    if (this.assistantOptimisticId) {
-      this.repository.deleteMessage(this.assistantOptimisticId);
-      this.assistantOptimisticId = null;
+    if (this._assistantOptimisticId) {
+      this.repository.deleteMessage(this._assistantOptimisticId);
+      this._assistantOptimisticId = null;
     }
 
     let messages = this.repository.getMessages();
@@ -283,6 +294,13 @@ export class ExternalStoreThreadRuntimeCore
     this._store.onAddToolResult?.(options);
   }
 
+  public override reset(initialMessages?: readonly ThreadMessageLike[]) {
+    const repo = new MessageRepository();
+    repo.import(ExportedMessageRepository.fromArray(initialMessages ?? []));
+    this._resetScheduled = true;
+    this.updateMessages(repo.getMessages());
+  }
+
   private updateMessages = (messages: readonly ThreadMessage[]) => {
     const hasConverter = this._store.convertMessage !== undefined;
     if (hasConverter) {

package/src/types/MessagePartTypes.ts

@@ -24,10 +24,12 @@ export type SourceMessagePart = {
 export type ImageMessagePart = {
   readonly type: "image";
   readonly image: string;
+  readonly filename?: string;
 };
 
 export type FileMessagePart = {
   readonly type: "file";
+  readonly filename?: string;
   readonly data: string;
   readonly mimeType: string;
 };