@assistant-ui/react 0.12.8 → 0.12.10

package/src/primitives/composer/ComposerInput.tsx

@@ -21,17 +21,13 @@ import { flushResourcesSync } from "@assistant-ui/tap";
 
 export namespace ComposerPrimitiveInput {
   export type Element = HTMLTextAreaElement;
-  export type Props = TextareaAutosizeProps & {
+
+  type BaseProps = {
     /**
      * Whether to render as a child component using Slot.
      * When true, the component will merge its props with its child.
      */
     asChild?: boolean | undefined;
-    /**
-     * Whether to submit the message when Enter is pressed (without Shift).
-     * @default true
-     */
-    submitOnEnter?: boolean | undefined;
     /**
      * Whether to cancel message composition when Escape is pressed.
      * @default true
@@ -58,6 +54,34 @@ export namespace ComposerPrimitiveInput {
      */
     addAttachmentOnPaste?: boolean | undefined;
   };
+
+  type SubmitModeProps =
+    | {
+        /**
+         * Controls how the Enter key submits messages.
+         * - "enter": Plain Enter submits (Shift+Enter for newline)
+         * - "ctrlEnter": Ctrl/Cmd+Enter submits (plain Enter for newline)
+         * - "none": Keyboard submission disabled
+         * @default "enter"
+         */
+        submitMode?: "enter" | "ctrlEnter" | "none" | undefined;
+        /**
+         * @deprecated Use `submitMode` instead
+         * @ignore
+         */
+        submitOnEnter?: never;
+      }
+    | {
+        submitMode?: never;
+        /**
+         * Whether to submit the message when Enter is pressed (without Shift).
+         * @default true
+         * @deprecated Use `submitMode` instead. Will be removed in a future version.
+         */
+        submitOnEnter?: boolean | undefined;
+      };
+
+  export type Props = TextareaAutosizeProps & BaseProps & SubmitModeProps;
 }
 
 /**
@@ -69,10 +93,16 @@ export namespace ComposerPrimitiveInput {
  *
  * @example
  * ```tsx
+ * // Ctrl/Cmd+Enter to submit (plain Enter inserts newline)
+ * <ComposerPrimitive.Input
+ *   placeholder="Type your message..."
+ *   submitMode="ctrlEnter"
+ * />
+ *
+ * // Old API (deprecated, still supported)
  * <ComposerPrimitive.Input
  *   placeholder="Type your message..."
  *   submitOnEnter={true}
- *   addAttachmentOnPaste={true}
  * />
  * ```
  */
@@ -88,7 +118,8 @@ export const ComposerPrimitiveInput = forwardRef<
       onChange,
       onKeyDown,
       onPaste,
-      submitOnEnter = true,
+      submitOnEnter,
+      submitMode,
       cancelOnEscape = true,
       unstable_focusOnRunStart = true,
       unstable_focusOnScrollToBottom = true,
@@ -100,17 +131,19 @@ export const ComposerPrimitiveInput = forwardRef<
   ) => {
     const aui = useAui();
 
-    const value = useAuiState(({ composer }) => {
-      if (!composer.isEditing) return "";
-      return composer.text;
+    const effectiveSubmitMode =
+      submitMode ?? (submitOnEnter === false ? "none" : "enter");
+
+    const value = useAuiState((s) => {
+      if (!s.composer.isEditing) return "";
+      return s.composer.text;
     });
 
     const Component = asChild ? Slot : TextareaAutosize;
 
     const isDisabled =
       useAuiState(
-        ({ thread, composer }) =>
-          thread.isDisabled || composer.dictation?.inputDisabled,
+        (s) => s.thread.isDisabled || s.composer.dictation?.inputDisabled,
       ) || disabledProp;
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const ref = useComposedRefs(forwardedRef, textareaRef);
@@ -129,17 +162,24 @@ export const ComposerPrimitiveInput = forwardRef<
     });
 
     const handleKeyPress = (e: KeyboardEvent) => {
-      if (isDisabled || !submitOnEnter) return;
+      if (isDisabled) return;
 
       // ignore IME composition events
       if (e.nativeEvent.isComposing) return;
 
-      if (e.key === "Enter" && e.shiftKey === false) {
+      if (e.key === "Enter" && !e.shiftKey) {
         const isRunning = aui.thread().getState().isRunning;
+        if (isRunning) return;
 
-        if (!isRunning) {
-          e.preventDefault();
+        let shouldSubmit = false;
+        if (effectiveSubmitMode === "ctrlEnter") {
+          shouldSubmit = e.ctrlKey || e.metaKey;
+        } else if (effectiveSubmitMode === "enter") {
+          shouldSubmit = true;
+        }
 
+        if (shouldSubmit) {
+          e.preventDefault();
           textareaRef.current?.closest("form")?.requestSubmit();
         }
       }

package/src/primitives/composer/ComposerQuote.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { Primitive } from "@radix-ui/react-primitive";
+import {
+  type ComponentRef,
+  type ComponentPropsWithoutRef,
+  forwardRef,
+  useCallback,
+} from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+import { composeEventHandlers } from "@radix-ui/primitive";
+
+// ---- Root ----
+
+export namespace ComposerPrimitiveQuote {
+  export type Element = ComponentRef<typeof Primitive.div>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;
+}
+
+/**
+ * Renders a container for the quoted text preview in the composer.
+ * Only renders when a quote is set.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.Quote>
+ *   <ComposerPrimitive.QuoteText />
+ *   <ComposerPrimitive.QuoteDismiss>×</ComposerPrimitive.QuoteDismiss>
+ * </ComposerPrimitive.Quote>
+ * ```
+ */
+export const ComposerPrimitiveQuote = forwardRef<
+  ComposerPrimitiveQuote.Element,
+  ComposerPrimitiveQuote.Props
+>((props, forwardedRef) => {
+  const quote = useAuiState((s) => s.composer.quote);
+  if (!quote) return null;
+
+  return <Primitive.div {...props} ref={forwardedRef} />;
+});
+
+ComposerPrimitiveQuote.displayName = "ComposerPrimitive.Quote";
+
+// ---- QuoteText ----
+
+export namespace ComposerPrimitiveQuoteText {
+  export type Element = ComponentRef<typeof Primitive.span>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.span>;
+}
+
+/**
+ * Renders the quoted text content.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.QuoteText />
+ * ```
+ */
+export const ComposerPrimitiveQuoteText = forwardRef<
+  ComposerPrimitiveQuoteText.Element,
+  ComposerPrimitiveQuoteText.Props
+>(({ children, ...props }, forwardedRef) => {
+  const text = useAuiState((s) => s.composer.quote?.text);
+  if (!text) return null;
+
+  return (
+    <Primitive.span {...props} ref={forwardedRef}>
+      {children ?? text}
+    </Primitive.span>
+  );
+});
+
+ComposerPrimitiveQuoteText.displayName = "ComposerPrimitive.QuoteText";
+
+// ---- QuoteDismiss ----
+
+export namespace ComposerPrimitiveQuoteDismiss {
+  export type Element = ComponentRef<typeof Primitive.button>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.button>;
+}
+
+/**
+ * A button that clears the current quote from the composer.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.QuoteDismiss>×</ComposerPrimitive.QuoteDismiss>
+ * ```
+ */
+export const ComposerPrimitiveQuoteDismiss = forwardRef<
+  ComposerPrimitiveQuoteDismiss.Element,
+  ComposerPrimitiveQuoteDismiss.Props
+>(({ onClick, ...props }, forwardedRef) => {
+  const aui = useAui();
+  const handleDismiss = useCallback(() => {
+    aui.composer().setQuote(undefined);
+  }, [aui]);
+
+  return (
+    <Primitive.button
+      type="button"
+      {...props}
+      ref={forwardedRef}
+      onClick={composeEventHandlers(onClick, handleDismiss)}
+    />
+  );
+});
+
+ComposerPrimitiveQuoteDismiss.displayName = "ComposerPrimitive.QuoteDismiss";

package/src/primitives/composer/ComposerStopDictation.tsx

@@ -11,7 +11,7 @@ import { useAuiState } from "@assistant-ui/store";
 
 const useComposerStopDictation = () => {
   const aui = useAui();
-  const isDictating = useAuiState(({ composer }) => composer.dictation != null);
+  const isDictating = useAuiState((s) => s.composer.dictation != null);
 
   const callback = useCallback(() => {
     aui.composer().stopDictation();

package/src/primitives/composer/index.ts

@@ -10,3 +10,6 @@ export { ComposerPrimitiveDictate as Dictate } from "./ComposerDictate";
 export { ComposerPrimitiveStopDictation as StopDictation } from "./ComposerStopDictation";
 export { ComposerPrimitiveDictationTranscript as DictationTranscript } from "./ComposerDictationTranscript";
 export { ComposerPrimitiveIf as If } from "./ComposerIf";
+export { ComposerPrimitiveQuote as Quote } from "./ComposerQuote";
+export { ComposerPrimitiveQuoteText as QuoteText } from "./ComposerQuote";
+export { ComposerPrimitiveQuoteDismiss as QuoteDismiss } from "./ComposerQuote";

package/src/primitives/error/ErrorMessage.tsx

@@ -13,10 +13,10 @@ export const ErrorPrimitiveMessage = forwardRef<
   ErrorPrimitiveMessage.Element,
   ErrorPrimitiveMessage.Props
 >(({ children, ...props }, forwardRef) => {
-  const error = useAuiState(({ message }) => {
-    return message.status?.type === "incomplete" &&
-      message.status.reason === "error"
-      ? message.status.error
+  const error = useAuiState((s) => {
+    return s.message.status?.type === "incomplete" &&
+      s.message.status.reason === "error"
+      ? s.message.status.error
       : undefined;
   });
 

package/src/primitives/index.ts

@@ -13,6 +13,7 @@ export * as SuggestionPrimitive from "./suggestion";
 export * as ThreadListPrimitive from "./threadList";
 export * as ThreadListItemPrimitive from "./threadListItem";
 export * as ThreadListItemMorePrimitive from "./threadListItemMore";
+export * as SelectionToolbarPrimitive from "./selectionToolbar";
 
 export { useMessagePartText } from "./messagePart/useMessagePartText";
 export { useMessagePartReasoning } from "./messagePart/useMessagePartReasoning";
@@ -22,3 +23,4 @@ export { useMessagePartImage } from "./messagePart/useMessagePartImage";
 export { useMessagePartData } from "./messagePart/useMessagePartData";
 export { useThreadViewportAutoScroll } from "./thread/useThreadViewportAutoScroll";
 export { useScrollLock } from "./reasoning";
+export { useMessageQuote } from "../hooks/useMessageQuote";

package/src/primitives/message/MessageAttachments.tsx

@@ -39,7 +39,7 @@ const getComponent = (
 const AttachmentComponent: FC<{
   components: MessagePrimitiveAttachments.Props["components"];
 }> = ({ components }) => {
-  const attachment = useAuiState(({ attachment }) => attachment);
+  const attachment = useAuiState((s) => s.attachment);
   if (!attachment) return null;
 
   const Component = getComponent(components, attachment as CompleteAttachment);
@@ -94,9 +94,9 @@ MessagePrimitiveAttachmentByIndex.displayName =
 export const MessagePrimitiveAttachments: FC<
   MessagePrimitiveAttachments.Props
 > = ({ components }) => {
-  const attachmentsCount = useAuiState(({ message }) => {
-    if (message.role !== "user") return 0;
-    return message.attachments.length;
+  const attachmentsCount = useAuiState((s) => {
+    if (s.message.role !== "user") return 0;
+    return s.message.attachments.length;
   });
 
   const attachmentElements = useMemo(() => {

package/src/primitives/message/MessageError.tsx

@@ -5,9 +5,9 @@ import { useAuiState } from "@assistant-ui/store";
 
 export const MessagePrimitiveError: FC<PropsWithChildren> = ({ children }) => {
   const hasError = useAuiState(
-    ({ message }) =>
-      message.status?.type === "incomplete" &&
-      message.status.reason === "error",
+    (s) =>
+      s.message.status?.type === "incomplete" &&
+      s.message.status.reason === "error",
   );
   return hasError ? children : null;
 };

package/src/primitives/message/MessageIf.tsx

@@ -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;