@assistant-ui/react 0.11.52 → 0.11.54

package/src/primitives/actionBarMore/ActionBarMoreSeparator.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { ScopedProps, useDropdownMenuScope } from "./scope";
+
+export namespace ActionBarMorePrimitiveSeparator {
+  export type Element = ComponentRef<typeof DropdownMenuPrimitive.Separator>;
+  export type Props = ComponentPropsWithoutRef<
+    typeof DropdownMenuPrimitive.Separator
+  >;
+}
+
+export const ActionBarMorePrimitiveSeparator = forwardRef<
+  ActionBarMorePrimitiveSeparator.Element,
+  ActionBarMorePrimitiveSeparator.Props
+>(
+  (
+    {
+      __scopeActionBarMore,
+      ...rest
+    }: ScopedProps<ActionBarMorePrimitiveSeparator.Props>,
+    ref,
+  ) => {
+    const scope = useDropdownMenuScope(__scopeActionBarMore);
+
+    return <DropdownMenuPrimitive.Separator {...scope} {...rest} ref={ref} />;
+  },
+);
+
+ActionBarMorePrimitiveSeparator.displayName =
+  "ActionBarMorePrimitive.Separator";

package/src/primitives/actionBarMore/ActionBarMoreTrigger.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { ScopedProps, useDropdownMenuScope } from "./scope";
+
+export namespace ActionBarMorePrimitiveTrigger {
+  export type Element = ComponentRef<typeof DropdownMenuPrimitive.Trigger>;
+  export type Props = ComponentPropsWithoutRef<
+    typeof DropdownMenuPrimitive.Trigger
+  >;
+}
+
+export const ActionBarMorePrimitiveTrigger = forwardRef<
+  ActionBarMorePrimitiveTrigger.Element,
+  ActionBarMorePrimitiveTrigger.Props
+>(
+  (
+    {
+      __scopeActionBarMore,
+      ...rest
+    }: ScopedProps<ActionBarMorePrimitiveTrigger.Props>,
+    ref,
+  ) => {
+    const scope = useDropdownMenuScope(__scopeActionBarMore);
+
+    return <DropdownMenuPrimitive.Trigger {...scope} {...rest} ref={ref} />;
+  },
+);
+
+ActionBarMorePrimitiveTrigger.displayName = "ActionBarMorePrimitive.Trigger";

package/src/primitives/actionBarMore/index.ts

@@ -0,0 +1,5 @@
+export { ActionBarMorePrimitiveRoot as Root } from "./ActionBarMoreRoot";
+export { ActionBarMorePrimitiveTrigger as Trigger } from "./ActionBarMoreTrigger";
+export { ActionBarMorePrimitiveContent as Content } from "./ActionBarMoreContent";
+export { ActionBarMorePrimitiveItem as Item } from "./ActionBarMoreItem";
+export { ActionBarMorePrimitiveSeparator as Separator } from "./ActionBarMoreSeparator";

package/src/primitives/actionBarMore/scope.tsx

@@ -0,0 +1,8 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import type { Scope } from "@radix-ui/react-context";
+
+export const useDropdownMenuScope: ReturnType<
+  typeof DropdownMenuPrimitive.createDropdownMenuScope
+> = DropdownMenuPrimitive.createDropdownMenuScope();
+
+export type ScopedProps<P> = P & { __scopeActionBarMore?: Scope };

package/src/primitives/composer/ComposerDictate.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useCallback } from "react";
+import { useAssistantState, useAssistantApi } from "../../context";
+import type {
+  ActionButtonElement,
+  ActionButtonProps,
+} from "../../utils/createActionButton";
+import { createActionButton } from "../../utils/createActionButton";
+
+const useComposerDictate = () => {
+  const api = useAssistantApi();
+  const disabled = useAssistantState(
+    ({ thread, composer }) =>
+      composer.dictation != null ||
+      !thread.capabilities.dictation ||
+      !composer.isEditing,
+  );
+
+  const callback = useCallback(() => {
+    api.composer().startDictation();
+  }, [api]);
+
+  if (disabled) return null;
+  return callback;
+};
+
+export namespace ComposerPrimitiveDictate {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useComposerDictate>;
+}
+
+/**
+ * A button that starts dictation to convert voice to text.
+ *
+ * Requires a DictationAdapter to be configured in the runtime.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.Dictate>
+ *   <MicIcon />
+ * </ComposerPrimitive.Dictate>
+ * ```
+ */
+export const ComposerPrimitiveDictate = createActionButton(
+  "ComposerPrimitive.Dictate",
+  useComposerDictate,
+);

package/src/primitives/composer/ComposerDictationTranscript.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Primitive } from "@radix-ui/react-primitive";
+import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import { useAssistantState } from "../../context";
+
+export namespace ComposerPrimitiveDictationTranscript {
+  export type Element = ComponentRef<typeof Primitive.span>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.span>;
+}
+
+/**
+ * Renders the current interim (partial) transcript while dictation is active.
+ *
+ * This component displays real-time feedback of what the user is saying before
+ * the transcription is finalized and committed to the composer input.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.If dictation>
+ *   <div className="dictation-preview">
+ *     <ComposerPrimitive.DictationTranscript />
+ *   </div>
+ * </ComposerPrimitive.If>
+ * ```
+ */
+export const ComposerPrimitiveDictationTranscript = forwardRef<
+  ComposerPrimitiveDictationTranscript.Element,
+  ComposerPrimitiveDictationTranscript.Props
+>(({ children, ...props }, forwardRef) => {
+  const transcript = useAssistantState(
+    ({ composer }) => composer.dictation?.transcript,
+  );
+
+  if (!transcript) return null;
+
+  return (
+    <Primitive.span {...props} ref={forwardRef}>
+      {children ?? transcript}
+    </Primitive.span>
+  );
+});
+
+ComposerPrimitiveDictationTranscript.displayName =
+  "ComposerPrimitive.DictationTranscript";

package/src/primitives/composer/ComposerIf.tsx

@@ -5,7 +5,10 @@ import { useAssistantState } from "../../context";
 import type { RequireAtLeastOne } from "../../utils/RequireAtLeastOne";
 
 type ComposerIfFilters = {
+  /** Whether the composer is in editing mode */
   editing: boolean | undefined;
+  /** Whether dictation is currently active */
+  dictation: boolean | undefined;
 };
 
 export type UseComposerIfProps = RequireAtLeastOne<ComposerIfFilters>;
@@ -15,6 +18,10 @@ const useComposerIf = (props: UseComposerIfProps) => {
     if (props.editing === true && !composer.isEditing) return false;
     if (props.editing === false && composer.isEditing) return false;
 
+    const isDictating = composer.dictation != null;
+    if (props.dictation === true && !isDictating) return false;
+    if (props.dictation === false && isDictating) return false;
+
     return true;
   });
 };

package/src/primitives/composer/ComposerInput.tsx

@@ -108,7 +108,10 @@ export const ComposerPrimitiveInput = forwardRef<
     const Component = asChild ? Slot : TextareaAutosize;
 
     const isDisabled =
-      useAssistantState(({ thread }) => thread.isDisabled) || disabledProp;
+      useAssistantState(
+        ({ thread, composer }) =>
+          thread.isDisabled || composer.dictation?.inputDisabled,
+      ) || disabledProp;
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const ref = useComposedRefs(forwardedRef, textareaRef);
 

package/src/primitives/composer/ComposerStopDictation.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useCallback } from "react";
+import { useAssistantState, useAssistantApi } from "../../context";
+import type {
+  ActionButtonElement,
+  ActionButtonProps,
+} from "../../utils/createActionButton";
+import { createActionButton } from "../../utils/createActionButton";
+
+const useComposerStopDictation = () => {
+  const api = useAssistantApi();
+  const isDictating = useAssistantState(
+    ({ composer }) => composer.dictation != null,
+  );
+
+  const callback = useCallback(() => {
+    api.composer().stopDictation();
+  }, [api]);
+
+  if (!isDictating) return null;
+  return callback;
+};
+
+export namespace ComposerPrimitiveStopDictation {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useComposerStopDictation>;
+}
+
+/**
+ * A button that stops the current dictation session.
+ *
+ * Only rendered when dictation is active.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.StopDictation>
+ *   <StopIcon />
+ * </ComposerPrimitive.StopDictation>
+ * ```
+ */
+export const ComposerPrimitiveStopDictation = createActionButton(
+  "ComposerPrimitive.StopDictation",
+  useComposerStopDictation,
+);

package/src/primitives/composer/index.ts

@@ -6,4 +6,7 @@ export { ComposerPrimitiveAddAttachment as AddAttachment } from "./ComposerAddAt
 export { ComposerPrimitiveAttachments as Attachments } from "./ComposerAttachments";
 export { ComposerPrimitiveAttachmentByIndex as AttachmentByIndex } from "./ComposerAttachments";
 export { ComposerPrimitiveAttachmentDropzone as AttachmentDropzone } from "./ComposerAttachmentDropzone";
+export { ComposerPrimitiveDictate as Dictate } from "./ComposerDictate";
+export { ComposerPrimitiveStopDictation as StopDictation } from "./ComposerStopDictation";
+export { ComposerPrimitiveDictationTranscript as DictationTranscript } from "./ComposerDictationTranscript";
 export { ComposerPrimitiveIf as If } from "./ComposerIf";

package/src/primitives/index.ts

@@ -1,4 +1,5 @@
 export * as ActionBarPrimitive from "./actionBar";
+export * as ActionBarMorePrimitive from "./actionBarMore";
 export * as AssistantModalPrimitive from "./assistantModal";
 export * as AttachmentPrimitive from "./attachment";
 export * as BranchPickerPrimitive from "./branchPicker";
@@ -9,6 +10,7 @@ export * as MessagePrimitive from "./message";
 export * as ThreadPrimitive from "./thread";
 export * as ThreadListPrimitive from "./threadList";
 export * as ThreadListItemPrimitive from "./threadListItem";
+export * as ThreadListItemMorePrimitive from "./threadListItemMore";
 
 export { AssistantIf } from "./assistant/AssistantIf";
 

package/src/primitives/threadListItemMore/ThreadListItemMoreContent.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { ScopedProps, useDropdownMenuScope } from "./scope";
+
+export namespace ThreadListItemMorePrimitiveContent {
+  export type Element = ComponentRef<typeof DropdownMenuPrimitive.Content>;
+  export type Props = ComponentPropsWithoutRef<
+    typeof DropdownMenuPrimitive.Content
+  > & {
+    portalProps?:
+      | ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>
+      | undefined;
+  };
+}
+
+export const ThreadListItemMorePrimitiveContent = forwardRef<
+  ThreadListItemMorePrimitiveContent.Element,
+  ThreadListItemMorePrimitiveContent.Props
+>(
+  (
+    {
+      __scopeThreadListItemMore,
+      portalProps,
+      sideOffset = 4,
+      ...props
+    }: ScopedProps<ThreadListItemMorePrimitiveContent.Props>,
+    forwardedRef,
+  ) => {
+    const scope = useDropdownMenuScope(__scopeThreadListItemMore);
+
+    return (
+      <DropdownMenuPrimitive.Portal {...scope} {...portalProps}>
+        <DropdownMenuPrimitive.Content
+          {...scope}
+          {...props}
+          ref={forwardedRef}
+          sideOffset={sideOffset}
+        />
+      </DropdownMenuPrimitive.Portal>
+    );
+  },
+);
+
+ThreadListItemMorePrimitiveContent.displayName =
+  "ThreadListItemMorePrimitive.Content";

package/src/primitives/threadListItemMore/ThreadListItemMoreItem.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { ScopedProps, useDropdownMenuScope } from "./scope";
+
+export namespace ThreadListItemMorePrimitiveItem {
+  export type Element = ComponentRef<typeof DropdownMenuPrimitive.Item>;
+  export type Props = ComponentPropsWithoutRef<
+    typeof DropdownMenuPrimitive.Item
+  >;
+}
+
+export const ThreadListItemMorePrimitiveItem = forwardRef<
+  ThreadListItemMorePrimitiveItem.Element,
+  ThreadListItemMorePrimitiveItem.Props
+>(
+  (
+    {
+      __scopeThreadListItemMore,
+      ...rest
+    }: ScopedProps<ThreadListItemMorePrimitiveItem.Props>,
+    ref,
+  ) => {
+    const scope = useDropdownMenuScope(__scopeThreadListItemMore);
+
+    return <DropdownMenuPrimitive.Item {...scope} {...rest} ref={ref} />;
+  },
+);
+
+ThreadListItemMorePrimitiveItem.displayName =
+  "ThreadListItemMorePrimitive.Item";

package/src/primitives/threadListItemMore/ThreadListItemMoreRoot.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { FC } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { ScopedProps, useDropdownMenuScope } from "./scope";
+
+export namespace ThreadListItemMorePrimitiveRoot {
+  export type Props = DropdownMenuPrimitive.DropdownMenuProps;
+}
+
+export const ThreadListItemMorePrimitiveRoot: FC<
+  ThreadListItemMorePrimitiveRoot.Props
+> = ({
+  __scopeThreadListItemMore,
+  ...rest
+}: ScopedProps<ThreadListItemMorePrimitiveRoot.Props>) => {
+  const scope = useDropdownMenuScope(__scopeThreadListItemMore);
+
+  return <DropdownMenuPrimitive.Root {...scope} {...rest} />;
+};
+
+ThreadListItemMorePrimitiveRoot.displayName =
+  "ThreadListItemMorePrimitive.Root";

package/src/primitives/threadListItemMore/ThreadListItemMoreSeparator.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { ScopedProps, useDropdownMenuScope } from "./scope";
+
+export namespace ThreadListItemMorePrimitiveSeparator {
+  export type Element = ComponentRef<typeof DropdownMenuPrimitive.Separator>;
+  export type Props = ComponentPropsWithoutRef<
+    typeof DropdownMenuPrimitive.Separator
+  >;
+}
+
+export const ThreadListItemMorePrimitiveSeparator = forwardRef<
+  ThreadListItemMorePrimitiveSeparator.Element,
+  ThreadListItemMorePrimitiveSeparator.Props
+>(
+  (
+    {
+      __scopeThreadListItemMore,
+      ...rest
+    }: ScopedProps<ThreadListItemMorePrimitiveSeparator.Props>,
+    ref,
+  ) => {
+    const scope = useDropdownMenuScope(__scopeThreadListItemMore);
+
+    return <DropdownMenuPrimitive.Separator {...scope} {...rest} ref={ref} />;
+  },
+);
+
+ThreadListItemMorePrimitiveSeparator.displayName =
+  "ThreadListItemMorePrimitive.Separator";

package/src/primitives/threadListItemMore/ThreadListItemMoreTrigger.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { ScopedProps, useDropdownMenuScope } from "./scope";
+
+export namespace ThreadListItemMorePrimitiveTrigger {
+  export type Element = ComponentRef<typeof DropdownMenuPrimitive.Trigger>;
+  export type Props = ComponentPropsWithoutRef<
+    typeof DropdownMenuPrimitive.Trigger
+  >;
+}
+
+export const ThreadListItemMorePrimitiveTrigger = forwardRef<
+  ThreadListItemMorePrimitiveTrigger.Element,
+  ThreadListItemMorePrimitiveTrigger.Props
+>(
+  (
+    {
+      __scopeThreadListItemMore,
+      ...rest
+    }: ScopedProps<ThreadListItemMorePrimitiveTrigger.Props>,
+    ref,
+  ) => {
+    const scope = useDropdownMenuScope(__scopeThreadListItemMore);
+
+    return <DropdownMenuPrimitive.Trigger {...scope} {...rest} ref={ref} />;
+  },
+);
+
+ThreadListItemMorePrimitiveTrigger.displayName =
+  "ThreadListItemMorePrimitive.Trigger";

package/src/primitives/threadListItemMore/index.ts

@@ -0,0 +1,5 @@
+export { ThreadListItemMorePrimitiveRoot as Root } from "./ThreadListItemMoreRoot";
+export { ThreadListItemMorePrimitiveTrigger as Trigger } from "./ThreadListItemMoreTrigger";
+export { ThreadListItemMorePrimitiveContent as Content } from "./ThreadListItemMoreContent";
+export { ThreadListItemMorePrimitiveItem as Item } from "./ThreadListItemMoreItem";
+export { ThreadListItemMorePrimitiveSeparator as Separator } from "./ThreadListItemMoreSeparator";

package/src/primitives/threadListItemMore/scope.tsx

@@ -0,0 +1,8 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import type { Scope } from "@radix-ui/react-context";
+
+export const useDropdownMenuScope: ReturnType<
+  typeof DropdownMenuPrimitive.createDropdownMenuScope
+> = DropdownMenuPrimitive.createDropdownMenuScope();
+
+export type ScopedProps<P> = P & { __scopeThreadListItemMore?: Scope };