feat: export Primitive Prop Types (#330)

changeset

.changeset/happy-cooks-divide.md

@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+feat: Primitive Prop Types

apps/www/pages/docs/advanced/Markdown.mdx

@@ -22,16 +22,19 @@ import { Steps, Callout } from "nextra/components";
 npx assistant-ui@latest add markdown-text
 ```
 
-### Use it in Thread.tsx
+### Use it in `Thread.tsx`
 
-```tsx
+Pass the `MarkdownText` component to the `MessagePrimitive.Content` component
+
+```tsx {1, 7}
 import { MarkdownText } from "@/components/ui/assistant-ui/markdown-text";
 
 const AssistantMessage = () => {
   return (
     <MessagePrimitive.Root>
       ...
       <MessagePrimitive.Content components={{ Text: MarkdownText }} />
+      ...
     </MessagePrimitive.Root>
   );
 };

apps/www/pages/docs/migrations/v0.2.md

@@ -12,10 +12,10 @@ const UserMessage = () => {
   return ( 
     ...
 -   <p className="whitespace-pre-line ...">
-+     <div className="...">
-        <MessagePrimitive.Content />
--     </p>
-+     </div>
++   <div className="...">
+      <MessagePrimitive.Content />
+-   </p>
++   </div>
     </div>
     ...
   );
@@ -25,11 +25,10 @@ const AssistantMessage = () => {
   return ( 
     ...
 -   <p className="whitespace-pre-line ...">
-+     <div className="...">
-        <MessagePrimitive.Content />
--     </p>
-+     </div>
-    </div>
++   <div className="...">
+      <MessagePrimitive.Content />
+-   </p>
++   </div>
     ...
   );
 };

apps/www/pages/reference/primitives/ActionBar.mdx

@@ -35,7 +35,7 @@ Containts all parts of the action bar.
 This primitive renders a `<div>` element unless `asChild` is set.
 
 <ParametersTable
-  type="ActionBarRootProps"
+  type="ActionBarPrimitiveRootProps"
   parameters={[ 
     {
       name: "asChild"
@@ -107,7 +107,7 @@ Enables edit mode on user message.
 This primitive renders a `<button>` element unless `asChild` is set.
 
 <ParametersTable
-  type="ActionBarEditProps"
+  type="ActionBarPrimitiveEditProps"
   parameters={[
     {
       name: "asChild",
@@ -143,7 +143,7 @@ This primitive renders a `<button>` element unless `asChild` is set.
 
 
 <ParametersTable
-  type="ActionBarReloadProps"
+  type="ActionBarPrimitiveReloadProps"
   parameters={[
     {
       name: "asChild",
@@ -178,7 +178,7 @@ Copies the message to the clipboard.
 This primitive renders a `<button>` element unless `asChild` is set.
 
 <ParametersTable
-  type="ActionBarCopyProps"
+  type="ActionBarPrimitiveCopyProps"
   parameters={[
     {
       name: "asChild",

apps/www/pages/reference/primitives/AssistantModal.mdx

@@ -30,7 +30,7 @@ const Thread = () => (
 Contains all parts of the assistant modal.
 
 <ParametersTable
-  type="AssistantModalRootProps"
+  type="AssistantModalPrimitiveRootProps"
   parameters={[
     {
       name: "defaultOpen",
@@ -64,7 +64,7 @@ A button that toggles the open state of the assistant modal. `AssistantModalPrim
 This primitive renders a `<button>` element unless `asChild` is set.
 
 <ParametersTable
-  type="AssistantModalTriggerProps"
+  type="AssistantModalPrimitiveTriggerProps"
   parameters={[
     {
       name: "asChild",
@@ -88,7 +88,7 @@ The component that pops out when the assistant modal is open.
 This primitive renders a `<div>` element unless `asChild` is set. 
 
 <ParametersTable
-  type="AssistantModalContentProps"
+  type="AssistantModalPrimitiveContentProps"
   parameters={[
     {
       name: "asChild",

apps/www/pages/reference/primitives/BranchPicker.mdx

@@ -28,7 +28,7 @@ Containts all parts of the branch picker.
 This primitive renders a `<div>` element unless `asChild` is set.
 
 <ParametersTable
-  type="BranchPickerRootProps"
+  type="BranchPickerPrimitiveRootProps"
   parameters={[
     {
       name: "asChild",
@@ -86,7 +86,7 @@ Navigates to the previous branch.
 This primitive renders a `<button>` element unless `asChild` is set.
 
 <ParametersTable
-  type="BranchPickerPreviousProps"
+  type="BranchPickerPrimitivePreviousProps"
   parameters={[
     {
       name: "asChild",
@@ -118,7 +118,7 @@ Navigates to the next branch.
 This primitive renders a `<button>` element unless `asChild` is set.
 
 <ParametersTable  
-  type="BranchPickerNextProps"
+  type="BranchPickerPrimitiveNextProps"
   parameters={[
     {
       name: "asChild",

apps/www/pages/reference/primitives/Composer.mdx

@@ -83,7 +83,7 @@ The text input field for the user to type a new message.
 This primitive renders a `<textarea>` element unless `asChild` is set.
 
 <ParametersTable
-  type="ComposerInputProps"
+  type="ComposerPrimitiveInputProps"
   parameters={[
     {
       name: "asChild",
@@ -114,7 +114,7 @@ The button to send the message.
 This primitive renders a `<button>` element unless `asChild` is set.
 
 <ParametersTable
-  type="ComposerSendProps"
+  type="ComposerPrimitiveSendProps"
   parameters={[
     {
       name: "asChild",
@@ -132,7 +132,7 @@ In thread composers, this action stops the current run.
 This primitive renders a `<button>` element unless `asChild` is set.
 
 <ParametersTable
-  type="ComposerCancelProps"
+  type="ComposerPrimitiveCancelProps"
   parameters={[
     {
       name: "asChild",

apps/www/pages/reference/primitives/Message.mdx

@@ -38,7 +38,7 @@ Containts all parts of the message.
 This primitive renders a `<div>` element unless `asChild` is set.
 
 <ParametersTable
-  type="MessageRootProps"
+  type="MessagePrimitiveRootProps"
   parameters={[
     {
       name: "asChild",
@@ -51,7 +51,7 @@ This primitive renders a `<div>` element unless `asChild` is set.
 The content of the message. This renders a separate component for each content part of the message.
 
 <ParametersTable
-  type="MessageContentProps"
+  type="MessagePrimitiveContentProps"
   parameters={[
     {
       name: "components",
@@ -113,7 +113,7 @@ The contents of this element will be portaled to `<ContentPartPrimitive.InProgre
 This primitive renders a `<span>` element unless `asChild` is set.
 
 <ParametersTable
-  type="MessageInProgressProps"
+  type="MessagePrimitiveInProgressProps"
   parameters={[ 
     {
       name: "asChild",

apps/www/pages/reference/primitives/Thread.mdx

@@ -45,7 +45,7 @@ The scrollable area containing all messages. Anchors scroll to the bottom as new
 This primitive renders a `<div>` element unless `asChild` is set.
 
 <ParametersTable
-  type="ThreadViewportProps"
+  type="ThreadPrimitiveViewportProps"
   parameters={[ 
     {
       name: "asChild",
@@ -81,7 +81,7 @@ const Viewport = () => {
 Renders all messages. This primitive renders a separate component for each message.
 
 <ParametersTable
-  type="ThreadMessagesProps"
+  type="ThreadPrimitiveMessagesProps"
   parameters={[
     {
       name: "components",
@@ -141,7 +141,7 @@ A button to scroll the viewport to the bottom. Disabled when the viewport is alr
 This primitive renders a `<button>` element unless `asChild` is set.
 
 <ParametersTable
-  type="ThreadScrollToBottomProps"
+  type="ThreadPrimitiveScrollToBottomProps"
   parameters={[
     {
       name: "asChild",
@@ -171,7 +171,7 @@ const ScrollToBottom = () => {
 Renders children if a condition is met.
 
 <ParametersTable
-  type="UseThreadIfProps"
+  type="ThreadPrimitiveIfProps"
   parameters={[
     {
       name: "empty",

packages/react/src/primitives/actionBar/ActionBarCopy.tsx

@@ -1,9 +1,16 @@
 "use client";
 
 import { useActionBarCopy } from "../../primitive-hooks/actionBar/useActionBarCopy";
-import { createActionButton } from "../../utils/createActionButton";
+import {
+  ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
 
-export const ActionBarCopy = createActionButton(
-  "ActionBarCopy",
+export type ActionBarPrimitiveCopyProps = ActionButtonProps<
+  typeof useActionBarCopy
+>;
+
+export const ActionBarPrimitiveCopy = createActionButton(
+  "ActionBarPrimitive.Copy",
   useActionBarCopy,
 );

packages/react/src/primitives/actionBar/ActionBarEdit.tsx

@@ -1,9 +1,16 @@
 "use client";
 
 import { useActionBarEdit } from "../../primitive-hooks/actionBar/useActionBarEdit";
-import { createActionButton } from "../../utils/createActionButton";
+import {
+  ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
 
-export const ActionBarEdit = createActionButton(
-  "ActionBarEdit",
+export type ActionBarPrimitiveEditProps = ActionButtonProps<
+  typeof useActionBarEdit
+>;
+
+export const ActionBarPrimitiveEdit = createActionButton(
+  "ActionBarPrimitive.Edit",
   useActionBarEdit,
 );

packages/react/src/primitives/actionBar/ActionBarReload.tsx

@@ -1,9 +1,16 @@
 "use client";
 
 import { useActionBarReload } from "../../primitive-hooks/actionBar/useActionBarReload";
-import { createActionButton } from "../../utils/createActionButton";
+import {
+  ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
 
-export const ActionBarReload = createActionButton(
-  "ActionBarReload",
+export type ActionBarPrimitiveReloadProps = ActionButtonProps<
+  typeof useActionBarReload
+>;
+
+export const ActionBarPrimitiveReload = createActionButton(
+  "ActionBarPrimitive.Reload",
   useActionBarReload,
 );

packages/react/src/primitives/actionBar/ActionBarRoot.tsx

@@ -2,65 +2,21 @@
 
 import { Primitive } from "@radix-ui/react-primitive";
 import { type ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
-import { useMessageContext } from "../../context/react/MessageContext";
-import { useThreadContext } from "../../context/react/ThreadContext";
-import { useCombinedStore } from "../../utils/combined/useCombinedStore";
+import {
+  useActionBarFloatStatus,
+  HideAndFloatStatus,
+  UseActionBarFloatStatusProps,
+} from "./useActionBarFloatStatus";
 
-type ActionBarRootElement = ElementRef<typeof Primitive.div>;
+type ActionBarPrimitiveRootElement = ElementRef<typeof Primitive.div>;
 type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
 
-enum HideAndFloatStatus {
-  Hidden = "hidden",
-  Floating = "floating",
-  Normal = "normal",
-}
-
-type UseActionBarFloatStatusProps = {
-  hideWhenRunning?: boolean | undefined;
-  autohide?: "always" | "not-last" | "never" | undefined;
-  autohideFloat?: "always" | "single-branch" | "never" | undefined;
-};
-
-const useActionBarFloatStatus = ({
-  hideWhenRunning,
-  autohide,
-  autohideFloat,
-}: UseActionBarFloatStatusProps) => {
-  const { useThread } = useThreadContext();
-  const { useMessage, useMessageUtils } = useMessageContext();
-
-  return useCombinedStore(
-    [useThread, useMessage, useMessageUtils],
-    (t, m, mu) => {
-      if (hideWhenRunning && t.isRunning) return HideAndFloatStatus.Hidden;
-
-      const autohideEnabled =
-        autohide === "always" || (autohide === "not-last" && !m.isLast);
-
-      // normal status
-      if (!autohideEnabled) return HideAndFloatStatus.Normal;
-
-      // hidden status
-      if (!mu.isHovering) return HideAndFloatStatus.Hidden;
-
-      // floating status
-      if (
-        autohideFloat === "always" ||
-        (autohideFloat === "single-branch" && m.branches.length <= 1)
-      )
-        return HideAndFloatStatus.Floating;
-
-      return HideAndFloatStatus.Normal;
-    },
-  );
-};
-
-export type ActionBarRootProps = PrimitiveDivProps &
+export type ActionBarPrimitiveRootProps = PrimitiveDivProps &
   UseActionBarFloatStatusProps;
 
-export const ActionBarRoot = forwardRef<
-  ActionBarRootElement,
-  ActionBarRootProps
+export const ActionBarPrimitiveRoot = forwardRef<
+  ActionBarPrimitiveRootElement,
+  ActionBarPrimitiveRootProps
 >(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
   const hideAndfloatStatus = useActionBarFloatStatus({
     hideWhenRunning,
@@ -81,4 +37,4 @@ export const ActionBarRoot = forwardRef<
   );
 });
 
-ActionBarRoot.displayName = "ActionBarRoot";
+ActionBarPrimitiveRoot.displayName = "ActionBarPrimitive.Root";

packages/react/src/primitives/actionBar/index.ts

@@ -1,4 +1,4 @@
-export { ActionBarRoot as Root } from "./ActionBarRoot";
-export { ActionBarCopy as Copy } from "./ActionBarCopy";
-export { ActionBarReload as Reload } from "./ActionBarReload";
-export { ActionBarEdit as Edit } from "./ActionBarEdit";
+export { ActionBarPrimitiveRoot as Root } from "./ActionBarRoot";
+export { ActionBarPrimitiveCopy as Copy } from "./ActionBarCopy";
+export { ActionBarPrimitiveReload as Reload } from "./ActionBarReload";
+export { ActionBarPrimitiveEdit as Edit } from "./ActionBarEdit";

packages/react/src/primitives/actionBar/types.ts

@@ -0,0 +1,4 @@
+export type { ActionBarPrimitiveRootProps } from "./ActionBarRoot";
+export type { ActionBarPrimitiveEditProps } from "./ActionBarEdit";
+export type { ActionBarPrimitiveReloadProps } from "./ActionBarReload";
+export type { ActionBarPrimitiveCopyProps } from "./ActionBarCopy";