@assistant-ui/react 0.12.9 → 0.12.11

package/src/primitives/message/{MessageIf.tsx → MessageIf.ts}

@@ -20,7 +20,7 @@ type MessageIfFilters = {
 type UseMessageIfProps = RequireAtLeastOne<MessageIfFilters>;
 
 const useMessageIf = (props: UseMessageIfProps) => {
-  return useAuiState(({ message }) => {
+  return useAuiState((s) => {
     const {
       role,
       attachments,
@@ -30,7 +30,7 @@ const useMessageIf = (props: UseMessageIfProps) => {
       speech,
       isCopied,
       isHovering,
-    } = message;
+    } = s.message;
 
     if (props.hasBranches === true && branchCount < 2) return false;
 
@@ -64,7 +64,7 @@ const useMessageIf = (props: UseMessageIfProps) => {
 
     if (
       props.submittedFeedback !== undefined &&
-      (message.metadata.submittedFeedback?.type ?? null) !==
+      (s.message.metadata.submittedFeedback?.type ?? null) !==
         props.submittedFeedback
     )
       return false;

package/src/primitives/message/MessageParts.tsx

@@ -17,6 +17,8 @@ import { MessagePartPrimitiveText } from "../messagePart/MessagePartText";
 import { MessagePartPrimitiveImage } from "../messagePart/MessagePartImage";
 import type {
   Unstable_AudioMessagePartComponent,
+  DataMessagePartComponent,
+  DataMessagePartProps,
   EmptyMessagePartComponent,
   TextMessagePartComponent,
   ImageMessagePartComponent,
@@ -28,7 +30,7 @@ import type {
   ReasoningGroupComponent,
 } from "../../types/MessagePartComponentTypes";
 import { MessagePartPrimitiveInProgress } from "../messagePart/MessagePartInProgress";
-import { MessagePartStatus } from "../../types/AssistantTypes";
+import type { MessagePartStatus } from "@assistant-ui/core";
 import { useShallow } from "zustand/shallow";
 
 type MessagePartRange =
@@ -145,6 +147,13 @@ const useMessagePartsGroups = (
 };
 
 export namespace MessagePrimitiveParts {
+  type DataConfig = {
+    /** Map data event names to specific components */
+    by_name?: Record<string, DataMessagePartComponent | undefined> | undefined;
+    /** Fallback component for unmatched data events */
+    Fallback?: DataMessagePartComponent | undefined;
+  };
+
   type BaseComponents = {
     /** Component for rendering empty messages */
     Empty?: EmptyMessagePartComponent | undefined;
@@ -158,6 +167,8 @@ export namespace MessagePrimitiveParts {
     File?: FileMessagePartComponent | undefined;
     /** Component for rendering audio content (experimental) */
     Unstable_Audio?: Unstable_AudioMessagePartComponent | undefined;
+    /** Configuration for data part rendering */
+    data?: DataConfig | undefined;
   };
 
   type ToolsConfig =
@@ -321,8 +332,23 @@ const ToolUIDisplay = ({
 }: {
   Fallback: ToolCallMessagePartComponent | undefined;
 } & ToolCallMessagePartProps) => {
-  const Render = useAuiState(({ tools }) => {
-    const Render = tools.tools[props.toolName] ?? Fallback;
+  const Render = useAuiState((s) => {
+    const Render = s.tools.tools[props.toolName] ?? Fallback;
+    if (Array.isArray(Render)) return Render[0] ?? Fallback;
+    return Render;
+  });
+  if (!Render) return null;
+  return <Render {...props} />;
+};
+
+const DataUIDisplay = ({
+  Fallback,
+  ...props
+}: {
+  Fallback: DataMessagePartComponent | undefined;
+} & DataMessagePartProps) => {
+  const Render = useAuiState((s) => {
+    const Render = s.dataRenderers.renderers[props.name] ?? Fallback;
     if (Array.isArray(Render)) return Render[0] ?? Fallback;
     return Render;
   });
@@ -361,10 +387,11 @@ export const MessagePartComponent: FC<MessagePartComponentProps> = ({
     File = defaultComponents.File,
     Unstable_Audio: Audio = defaultComponents.Unstable_Audio,
     tools = {},
+    data,
   } = {},
 }) => {
   const aui = useAui();
-  const part = useAuiState(({ part }) => part);
+  const part = useAuiState((s) => s.part);
 
   const type = part.type;
   if (type === "tool-call") {
@@ -405,8 +432,10 @@ export const MessagePartComponent: FC<MessagePartComponentProps> = ({
     case "audio":
       return <Audio {...part} />;
 
-    case "data":
-      return null;
+    case "data": {
+      const Data = data?.by_name?.[part.name] ?? data?.Fallback;
+      return <DataUIDisplay {...part} Fallback={Data} />;
+    }
 
     default:
       const unhandledType: never = type;
@@ -456,6 +485,7 @@ export const MessagePrimitivePartByIndex: FC<MessagePrimitivePartByIndex.Props>
       prev.components?.File === next.components?.File &&
       prev.components?.Unstable_Audio === next.components?.Unstable_Audio &&
       prev.components?.tools === next.components?.tools &&
+      prev.components?.data === next.components?.data &&
       prev.components?.ToolGroup === next.components?.ToolGroup &&
       prev.components?.ReasoningGroup === next.components?.ReasoningGroup,
   );
@@ -503,11 +533,11 @@ const ConditionalEmptyImpl: FC<{
   components: MessagePrimitiveParts.Props["components"];
   enabled: boolean;
 }> = ({ components, enabled }) => {
-  const shouldShowEmpty = useAuiState(({ message }) => {
+  const shouldShowEmpty = useAuiState((s) => {
     if (!enabled) return false;
-    if (message.parts.length === 0) return false;
+    if (s.message.parts.length === 0) return false;
 
-    const lastPart = message.parts[message.parts.length - 1];
+    const lastPart = s.message.parts[s.message.parts.length - 1];
     return lastPart?.type !== "text" && lastPart?.type !== "reasoning";
   });
 
@@ -551,7 +581,7 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = ({
   components,
   unstable_showEmptyOnNonTextEnd = true,
 }) => {
-  const contentLength = useAuiState(({ message }) => message.parts.length);
+  const contentLength = useAuiState((s) => s.message.parts.length);
   const useChainOfThought = !!components?.ChainOfThought;
   const messageRanges = useMessagePartsGroups(useChainOfThought);
 

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -16,6 +16,8 @@ import { MessagePartPrimitiveText } from "../messagePart/MessagePartText";
 import { MessagePartPrimitiveImage } from "../messagePart/MessagePartImage";
 import type {
   Unstable_AudioMessagePartComponent,
+  DataMessagePartComponent,
+  DataMessagePartProps,
   EmptyMessagePartComponent,
   TextMessagePartComponent,
   ImageMessagePartComponent,
@@ -26,7 +28,7 @@ import type {
   ReasoningMessagePartComponent,
 } from "../../types/MessagePartComponentTypes";
 import { MessagePartPrimitiveInProgress } from "../messagePart/MessagePartInProgress";
-import { MessagePartStatus } from "../../types/AssistantTypes";
+import type { MessagePartStatus } from "@assistant-ui/core";
 
 type MessagePartGroup = {
   groupKey: string | undefined;
@@ -74,7 +76,7 @@ const groupMessagePartsByParentId: GroupingFunction = (
 const useMessagePartsGrouped = (
   groupingFunction: GroupingFunction,
 ): MessagePartGroup[] => {
-  const parts = useAuiState(({ message }) => message.parts);
+  const parts = useAuiState((s) => s.message.parts);
 
   return useMemo(() => {
     if (parts.length === 0) {
@@ -153,6 +155,17 @@ export namespace MessagePrimitiveUnstable_PartsGrouped {
           File?: FileMessagePartComponent | undefined;
           /** Component for rendering audio content (experimental) */
           Unstable_Audio?: Unstable_AudioMessagePartComponent | undefined;
+          /** Configuration for data part rendering */
+          data?:
+            | {
+                /** Map data event names to specific components */
+                by_name?:
+                  | Record<string, DataMessagePartComponent | undefined>
+                  | undefined;
+                /** Fallback component for unmatched data events */
+                Fallback?: DataMessagePartComponent | undefined;
+              }
+            | undefined;
           /** Configuration for tool call rendering */
           tools?:
             | {
@@ -219,8 +232,23 @@ const ToolUIDisplay = ({
 }: {
   Fallback: ToolCallMessagePartComponent | undefined;
 } & ToolCallMessagePartProps) => {
-  const Render = useAuiState(({ tools }) => {
-    const Render = tools.tools[props.toolName] ?? Fallback;
+  const Render = useAuiState((s) => {
+    const Render = s.tools.tools[props.toolName] ?? Fallback;
+    if (Array.isArray(Render)) return Render[0] ?? Fallback;
+    return Render;
+  });
+  if (!Render) return null;
+  return <Render {...props} />;
+};
+
+const DataUIDisplay = ({
+  Fallback,
+  ...props
+}: {
+  Fallback: DataMessagePartComponent | undefined;
+} & DataMessagePartProps) => {
+  const Render = useAuiState((s) => {
+    const Render = s.dataRenderers.renderers[props.name] ?? Fallback;
     if (Array.isArray(Render)) return Render[0] ?? Fallback;
     return Render;
   });
@@ -258,10 +286,11 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
     File = defaultComponents.File,
     Unstable_Audio: Audio = defaultComponents.Unstable_Audio,
     tools = {},
+    data,
   } = {},
 }) => {
   const aui = useAui();
-  const part = useAuiState(({ part }) => part);
+  const part = useAuiState((s) => s.part);
 
   const type = part.type;
   if (type === "tool-call") {
@@ -302,8 +331,10 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
     case "audio":
       return <Audio {...part} />;
 
-    case "data":
-      return null;
+    case "data": {
+      const Data = data?.by_name?.[part.name] ?? data?.Fallback;
+      return <DataUIDisplay {...part} Fallback={Data} />;
+    }
 
     default:
       const unhandledType: never = type;
@@ -335,6 +366,7 @@ const MessagePart = memo(
     prev.components?.File === next.components?.File &&
     prev.components?.Unstable_Audio === next.components?.Unstable_Audio &&
     prev.components?.tools === next.components?.tools &&
+    prev.components?.data === next.components?.data &&
     prev.components?.Group === next.components?.Group,
 );
 
@@ -426,7 +458,7 @@ const EmptyParts = memo(
 export const MessagePrimitiveUnstable_PartsGrouped: FC<
   MessagePrimitiveUnstable_PartsGrouped.Props
 > = ({ groupingFunction, components }) => {
-  const contentLength = useAuiState(({ message }) => message.parts.length);
+  const contentLength = useAuiState((s) => s.message.parts.length);
   const messageGroups = useMessagePartsGrouped(groupingFunction);
 
   const partsElements = useMemo(() => {

package/src/primitives/message/MessageRoot.tsx

@@ -60,11 +60,11 @@ const useMessageViewportRef = () => {
   // inset rules:
   // - the previous user message before the last assistant message registers its full height
   const shouldRegisterAsInset = useAuiState(
-    ({ thread, message }) =>
+    (s) =>
       turnAnchor === "top" &&
-      message.role === "user" &&
-      message.index === thread.messages.length - 2 &&
-      thread.messages.at(-1)?.role === "assistant",
+      s.message.role === "user" &&
+      s.message.index === s.thread.messages.length - 2 &&
+      s.thread.messages.at(-1)?.role === "assistant",
   );
 
   const getHeight = useCallback((el: HTMLElement) => el.offsetHeight, []);
@@ -116,10 +116,11 @@ export const MessagePrimitiveRoot = forwardRef<
     isHoveringRef,
     anchorUserMessageRef,
   );
+  const messageId = useAuiState((s) => s.message.id);
 
   return (
     <ThreadPrimitiveViewportSlack>
-      <Primitive.div {...props} ref={ref} />
+      <Primitive.div {...props} ref={ref} data-message-id={messageId} />
     </ThreadPrimitiveViewportSlack>
   );
 });

package/src/primitives/messagePart/{MessagePartInProgress.tsx → MessagePartInProgress.ts}

@@ -11,9 +11,7 @@ export namespace MessagePartPrimitiveInProgress {
 export const MessagePartPrimitiveInProgress: FC<
   MessagePartPrimitiveInProgress.Props
 > = ({ children }) => {
-  const isInProgress = useAuiState(
-    ({ part }) => part.status.type === "running",
-  );
+  const isInProgress = useAuiState((s) => s.part.status.type === "running");
 
   return isInProgress ? children : null;
 };

package/src/primitives/messagePart/{useMessagePartData.tsx → useMessagePartData.ts}

@@ -1,14 +1,14 @@
 "use client";
 
+import type { DataMessagePart } from "@assistant-ui/core";
 import { useAuiState } from "@assistant-ui/store";
-import { DataMessagePart } from "../../types";
 
 export const useMessagePartData = <T = any>(name?: string) => {
-  const part = useAuiState(({ part }) => {
-    if (part.type !== "data") {
+  const part = useAuiState((s) => {
+    if (s.part.type !== "data") {
       return null;
     }
-    return part as DataMessagePart<T>;
+    return s.part as DataMessagePart<T>;
   });
 
   if (!part) {

package/src/primitives/messagePart/useMessagePartFile.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import type { FileMessagePart, MessagePartState } from "@assistant-ui/core";
+import { useAuiState } from "@assistant-ui/store";
+
+export const useMessagePartFile = () => {
+  const file = useAuiState((s) => {
+    if (s.part.type !== "file")
+      throw new Error(
+        "MessagePartFile can only be used inside file message parts.",
+      );
+
+    return s.part as MessagePartState & FileMessagePart;
+  });
+
+  return file;
+};

package/src/primitives/messagePart/useMessagePartImage.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import type { ImageMessagePart, MessagePartState } from "@assistant-ui/core";
+import { useAuiState } from "@assistant-ui/store";
+
+export const useMessagePartImage = () => {
+  const image = useAuiState((s) => {
+    if (s.part.type !== "image")
+      throw new Error(
+        "MessagePartImage can only be used inside image message parts.",
+      );
+
+    return s.part as MessagePartState & ImageMessagePart;
+  });
+
+  return image;
+};

package/src/primitives/messagePart/useMessagePartReasoning.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import type {
+  ReasoningMessagePart,
+  MessagePartState,
+} from "@assistant-ui/core";
+import { useAuiState } from "@assistant-ui/store";
+
+export const useMessagePartReasoning = () => {
+  const text = useAuiState((s) => {
+    if (s.part.type !== "reasoning")
+      throw new Error(
+        "MessagePartReasoning can only be used inside reasoning message parts.",
+      );
+
+    return s.part as MessagePartState & ReasoningMessagePart;
+  });
+
+  return text;
+};

package/src/primitives/messagePart/useMessagePartSource.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import type { SourceMessagePart, MessagePartState } from "@assistant-ui/core";
+import { useAuiState } from "@assistant-ui/store";
+
+export const useMessagePartSource = () => {
+  const source = useAuiState((s) => {
+    if (s.part.type !== "source")
+      throw new Error(
+        "MessagePartSource can only be used inside source message parts.",
+      );
+
+    return s.part as MessagePartState & SourceMessagePart;
+  });
+
+  return source;
+};

package/src/primitives/messagePart/useMessagePartText.ts

@@ -0,0 +1,22 @@
+"use client";
+
+import type {
+  TextMessagePart,
+  ReasoningMessagePart,
+  MessagePartState,
+} from "@assistant-ui/core";
+import { useAuiState } from "@assistant-ui/store";
+
+export const useMessagePartText = () => {
+  const text = useAuiState((s) => {
+    if (s.part.type !== "text" && s.part.type !== "reasoning")
+      throw new Error(
+        "MessagePartText can only be used inside text or reasoning message parts.",
+      );
+
+    return s.part as MessagePartState &
+      (TextMessagePart | ReasoningMessagePart);
+  });
+
+  return text;
+};

package/src/primitives/selectionToolbar/SelectionToolbarQuote.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Primitive } from "@radix-ui/react-primitive";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+  useCallback,
+} from "react";
+import { useAui } from "@assistant-ui/store";
+import { useSelectionToolbarInfo } from "./SelectionToolbarRoot";
+
+export namespace SelectionToolbarPrimitiveQuote {
+  export type Element = ComponentRef<typeof Primitive.button>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.button>;
+}
+
+/**
+ * A button that quotes the currently selected text.
+ *
+ * Must be placed inside `SelectionToolbarPrimitive.Root`. Reads the
+ * selection info from context (captured by the Root), sets it as a
+ * quote in the thread composer, and clears the selection.
+ *
+ * @example
+ * ```tsx
+ * <SelectionToolbarPrimitive.Quote>
+ *   <QuoteIcon /> Quote
+ * </SelectionToolbarPrimitive.Quote>
+ * ```
+ */
+export const SelectionToolbarPrimitiveQuote = forwardRef<
+  SelectionToolbarPrimitiveQuote.Element,
+  SelectionToolbarPrimitiveQuote.Props
+>(({ onClick, disabled, ...props }, forwardedRef) => {
+  const aui = useAui();
+  const info = useSelectionToolbarInfo();
+
+  const handleClick = useCallback(() => {
+    if (!info) return;
+
+    aui.thread().composer().setQuote({
+      text: info.text,
+      messageId: info.messageId,
+    });
+
+    window.getSelection()?.removeAllRanges();
+  }, [aui, info]);
+
+  return (
+    <Primitive.button
+      type="button"
+      {...props}
+      ref={forwardedRef}
+      disabled={disabled || !info}
+      onClick={composeEventHandlers(onClick, handleClick)}
+    />
+  );
+});
+
+SelectionToolbarPrimitiveQuote.displayName = "SelectionToolbarPrimitive.Quote";

package/src/primitives/selectionToolbar/SelectionToolbarRoot.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { Primitive } from "@radix-ui/react-primitive";
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { getSelectionMessageId } from "../../utils/getSelectionMessageId";
+
+type SelectionInfo = {
+  text: string;
+  messageId: string;
+  rect: DOMRect;
+};
+
+const SelectionToolbarContext = createContext<SelectionInfo | null>(null);
+
+export const useSelectionToolbarInfo = () =>
+  useContext(SelectionToolbarContext);
+
+export namespace SelectionToolbarPrimitiveRoot {
+  export type Element = ComponentRef<typeof Primitive.div>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;
+}
+
+/**
+ * A floating toolbar that appears when text is selected within a message.
+ *
+ * Listens for mouse and keyboard selection events, validates that the
+ * selection is within a single message, and renders a positioned portal
+ * near the selection. Prevents mousedown from clearing the selection.
+ *
+ * @example
+ * ```tsx
+ * <SelectionToolbarPrimitive.Root>
+ *   <SelectionToolbarPrimitive.Quote>Quote</SelectionToolbarPrimitive.Quote>
+ * </SelectionToolbarPrimitive.Root>
+ * ```
+ */
+export const SelectionToolbarPrimitiveRoot = forwardRef<
+  SelectionToolbarPrimitiveRoot.Element,
+  SelectionToolbarPrimitiveRoot.Props
+>(({ onMouseDown, style, ...props }, forwardedRef) => {
+  const [info, setInfo] = useState<SelectionInfo | null>(null);
+
+  useEffect(() => {
+    const checkSelection = () => {
+      requestAnimationFrame(() => {
+        const sel = window.getSelection();
+        if (!sel || sel.isCollapsed) {
+          setInfo(null);
+          return;
+        }
+
+        const text = sel.toString().trim();
+        if (!text) {
+          setInfo(null);
+          return;
+        }
+
+        const messageId = getSelectionMessageId(sel);
+        if (!messageId) {
+          setInfo(null);
+          return;
+        }
+
+        const range = sel.getRangeAt(0);
+        const rect = range.getBoundingClientRect();
+        setInfo({ text, messageId, rect });
+      });
+    };
+
+    const handleSelectionCollapse = () => {
+      const sel = window.getSelection();
+      if (!sel || sel.isCollapsed) {
+        setInfo(null);
+      }
+    };
+
+    const handleScroll = () => {
+      setInfo(null);
+    };
+
+    document.addEventListener("mouseup", checkSelection);
+    document.addEventListener("keyup", checkSelection);
+    document.addEventListener("selectionchange", handleSelectionCollapse);
+    document.addEventListener("scroll", handleScroll, true);
+
+    return () => {
+      document.removeEventListener("mouseup", checkSelection);
+      document.removeEventListener("keyup", checkSelection);
+      document.removeEventListener("selectionchange", handleSelectionCollapse);
+      document.removeEventListener("scroll", handleScroll, true);
+    };
+  }, []);
+
+  if (!info) return null;
+
+  const positionStyle: React.CSSProperties = {
+    position: "fixed",
+    top: `${info.rect.top - 8}px`,
+    left: `${info.rect.left + info.rect.width / 2}px`,
+    transform: "translate(-50%, -100%)",
+    zIndex: 50,
+    ...style,
+  };
+
+  return createPortal(
+    <SelectionToolbarContext.Provider value={info}>
+      <Primitive.div
+        {...props}
+        ref={forwardedRef}
+        style={positionStyle}
+        onMouseDown={(e) => {
+          // Prevent mousedown from clearing the text selection
+          e.preventDefault();
+          onMouseDown?.(e);
+        }}
+      />
+    </SelectionToolbarContext.Provider>,
+    document.body,
+  );
+});
+
+SelectionToolbarPrimitiveRoot.displayName = "SelectionToolbarPrimitive.Root";

package/src/primitives/selectionToolbar/index.ts

@@ -0,0 +1,8 @@
+export {
+  SelectionToolbarPrimitiveRoot as Root,
+  type SelectionToolbarPrimitiveRoot,
+} from "./SelectionToolbarRoot";
+export {
+  SelectionToolbarPrimitiveQuote as Quote,
+  type SelectionToolbarPrimitiveQuote,
+} from "./SelectionToolbarQuote";

package/src/primitives/suggestion/SuggestionDescription.tsx

@@ -21,7 +21,7 @@ export const SuggestionPrimitiveDescription = forwardRef<
   SuggestionPrimitiveDescription.Element,
   SuggestionPrimitiveDescription.Props
 >((props, ref) => {
-  const label = useAuiState(({ suggestion }) => suggestion.label);
+  const label = useAuiState((s) => s.suggestion.label);
 
   return (
     <Primitive.span {...props} ref={ref}>

package/src/primitives/suggestion/SuggestionTitle.tsx

@@ -21,7 +21,7 @@ export const SuggestionPrimitiveTitle = forwardRef<
   SuggestionPrimitiveTitle.Element,
   SuggestionPrimitiveTitle.Props
 >((props, ref) => {
-  const title = useAuiState(({ suggestion }) => suggestion.title);
+  const title = useAuiState((s) => s.suggestion.title);
 
   return (
     <Primitive.span {...props} ref={ref}>

package/src/primitives/suggestion/{SuggestionTrigger.tsx → SuggestionTrigger.ts}

@@ -28,8 +28,8 @@ const useSuggestionTrigger = ({
   clearComposer?: boolean | undefined;
 }) => {
   const aui = useAui();
-  const disabled = useAuiState(({ thread }) => thread.isDisabled);
-  const prompt = useAuiState(({ suggestion }) => suggestion.prompt);
+  const disabled = useAuiState((s) => s.thread.isDisabled);
+  const prompt = useAuiState((s) => s.suggestion.prompt);
 
   const resolvedSend = send ?? false;
 
@@ -37,7 +37,10 @@ const useSuggestionTrigger = ({
     const isRunning = aui.thread().getState().isRunning;
 
     if (resolvedSend && !isRunning) {
-      aui.thread().append(prompt);
+      aui.thread().append({
+        content: [{ type: "text", text: prompt }],
+        runConfig: aui.composer().getState().runConfig,
+      });
       if (clearComposer) {
         aui.composer().setText("");
       }

package/src/primitives/thread/{ThreadEmpty.tsx → ThreadEmpty.ts}

@@ -11,7 +11,7 @@ export const ThreadPrimitiveEmpty: FC<ThreadPrimitiveEmpty.Props> = ({
   children,
 }) => {
   const empty = useAuiState(
-    ({ thread }) => thread.messages.length === 0 && !thread.isLoading,
+    (s) => s.thread.messages.length === 0 && !s.thread.isLoading,
   );
   return empty ? children : null;
 };