From 33ae8f9ba84ddae812a07ea6afa8859bcd814f90 Mon Sep 17 00:00:00 2001
From: Simon Farshid <simon.farshid@outlook.com>
Date: Tue, 25 Jun 2024 22:45:14 -0700
Subject: [PATCH] feat: AssistantModalPrimitive (#321)

---
 .changeset/rich-lizards-rule.md               |   5 +
 .../reference/primitives/AssistantModal.mdx   | 119 ++++++++++++++++++
 apps/www/pages/reference/primitives/_meta.tsx |   4 +
 packages/react/package.json                   |   2 +
 .../assistantModal/AssistantModalContent.tsx  |  47 +++++++
 .../assistantModal/AssistantModalRoot.tsx     |  44 +++++++
 .../assistantModal/AssistantModalTrigger.tsx  |  23 ++++
 .../src/primitives/assistantModal/index.ts    |   3 +
 packages/react/src/primitives/index.ts        |   9 +-
 packages/shadcn-registry/registry/registry.ts |   2 +-
 pnpm-lock.yaml                                |   6 +
 11 files changed, 259 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/rich-lizards-rule.md
 create mode 100644 apps/www/pages/reference/primitives/AssistantModal.mdx
 create mode 100644 packages/react/src/primitives/assistantModal/AssistantModalContent.tsx
 create mode 100644 packages/react/src/primitives/assistantModal/AssistantModalRoot.tsx
 create mode 100644 packages/react/src/primitives/assistantModal/AssistantModalTrigger.tsx
 create mode 100644 packages/react/src/primitives/assistantModal/index.ts

diff --git a/.changeset/rich-lizards-rule.md b/.changeset/rich-lizards-rule.md
new file mode 100644
index 000000000..111d4cd08
--- /dev/null
+++ b/.changeset/rich-lizards-rule.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+feat: AssistantModalPrimitive
diff --git a/apps/www/pages/reference/primitives/AssistantModal.mdx b/apps/www/pages/reference/primitives/AssistantModal.mdx
new file mode 100644
index 000000000..8fb9b3017
--- /dev/null
+++ b/apps/www/pages/reference/primitives/AssistantModal.mdx
@@ -0,0 +1,119 @@
+---
+title: AssistantModalPrimitive
+description: A modal chat UI usually displayed in the bottom right corner of the screen.
+---
+
+import { Code } from "@radix-ui/themes";
+import { ParametersTable, DataAttributesTable } from "@/components/docs";
+
+## Anatomy
+
+```tsx
+import { AssistantModalPrimitive } from "@assistant-ui/react";
+
+const Thread = () => (
+  <AssistantModalPrimitive.Root>
+    <AssistantModalPrimitive.Trigger>
+      <FloatingAssistantButton />
+    </AssistantModalPrimitive.Trigger>
+    <AssistantModalPrimitive.Content>
+      <Thread />
+    </AssistantModalPrimitive.Content>
+  </ThreadPrimitive.Root>
+);
+```
+
+## API Reference
+
+### Root
+
+Contains all parts of the assistant modal.
+
+<ParametersTable
+  type="AssistantModalRootProps"
+  parameters={[
+    {
+      name: "defaultOpen",
+      type: "boolean",
+      default: "false",
+      description: "The open state of the assistant modal when it is initially rendered. Use when you do not need to control its open state.",
+    },
+    {
+      name: "open",
+      type: "boolean",
+      description: "Not recommended. The controlled open state of the assistant modal. Must be used in conjunction with onOpenChange.",
+    },
+    {
+      name: "onOpenChange",
+      type: "(open: boolean) => void",
+      description: "Event handler called when the open state of the assistant modal changes.",
+    },
+    {
+      name: "modal",
+      type: "boolean",
+      default: "false",
+      description: "The modality of the assistant modal. When set to true, interaction with outside elements will be disabled and only modal content will be visible to screen readers."
+    }
+  ]}
+/>
+
+### Trigger
+
+A button that toggles the open state of the assistant modal. `AssistantModalPrimitive.Content` will position itself against this button.
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+<ParametersTable
+  type="AssistantModalTriggerProps"
+  parameters={[
+    {
+      name: "asChild",
+    },
+  ]}
+/>
+
+<DataAttributesTable
+  data={[
+    {
+      attribute: "[data-state]",
+      values: <Code>"open" | "closed"</Code>,
+    },
+  ]}
+/>
+
+### Content
+
+The component that pops out when the assistant modal is open.
+
+This primitive renders a `<div>` element unless `asChild` is set. 
+
+<ParametersTable
+  type="AssistantModalContentProps"
+  parameters={[
+    {
+      name: "asChild",
+    },
+    {
+      name: "side",
+      type: "'top' | 'right' | 'bottom' | 'left'",
+      default: "'top'",
+      description: "The side of the assistant modal to position against.",
+    },
+    {
+      name: "align",
+      type: "'start' | 'center' | 'end'",
+      default: "'end'",
+      description: "The alignment of the assistant modal to position against.",
+    },
+    {
+      name: "dissmissOnInteractOutside",
+      type: "boolean",
+      default: "false",
+      description: "Dismiss the assistant modal when the user interacts outside of it.",
+    },
+  ]}
+/>
+
+Refer to radix-ui's Documentation for [Popover.Content](https://www.radix-ui.com/primitives/docs/components/popover#content) for more details.
+
+
diff --git a/apps/www/pages/reference/primitives/_meta.tsx b/apps/www/pages/reference/primitives/_meta.tsx
index 9e683de8f..9e90d0909 100644
--- a/apps/www/pages/reference/primitives/_meta.tsx
+++ b/apps/www/pages/reference/primitives/_meta.tsx
@@ -4,6 +4,7 @@ import {
   faCodeBranch,
   faCommentDots,
   faComments,
+  faCube,
   faPenNib,
   faPuzzlePiece,
 } from "@fortawesome/free-solid-svg-icons";
@@ -25,6 +26,9 @@ const IconTitle: FC<IconTitleProps> = ({ icon, name }) => {
 
 const meta = {
   composition: "Composition",
+  AssistantModal: {
+    title: <IconTitle icon={faCube} name="AssistantModal" />,
+  },
   Thread: {
     title: <IconTitle icon={faComments} name="Thread" />,
   },
diff --git a/packages/react/package.json b/packages/react/package.json
index 8efa8c1d7..5985d9c12 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -68,6 +68,8 @@
   "dependencies": {
     "@radix-ui/primitive": "^1.1.0",
     "@radix-ui/react-compose-refs": "^1.1.0",
+    "@radix-ui/react-context": "^1.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-primitive": "^2.0.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-use-callback-ref": "^1.1.0",
diff --git a/packages/react/src/primitives/assistantModal/AssistantModalContent.tsx b/packages/react/src/primitives/assistantModal/AssistantModalContent.tsx
new file mode 100644
index 000000000..e7ebb4313
--- /dev/null
+++ b/packages/react/src/primitives/assistantModal/AssistantModalContent.tsx
@@ -0,0 +1,47 @@
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { ScopedProps, usePopoverScope } from "./AssistantModalRoot";
+import { composeEventHandlers } from "@radix-ui/primitive";
+
+type AssistantModalContentElement = ElementRef<typeof PopoverPrimitive.Content>;
+type AssistantModalContentProps = ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Content
+> & {
+  dissmissOnInteractOutside?: boolean;
+};
+
+export const AssistantModalContent = forwardRef<
+  AssistantModalContentElement,
+  AssistantModalContentProps
+>(
+  (
+    {
+      __scopeAssistantModal,
+      side,
+      align,
+      onInteractOutside,
+      dissmissOnInteractOutside = false,
+      ...props
+    }: ScopedProps<AssistantModalContentProps>,
+    forwardedRef,
+  ) => {
+    const scope = usePopoverScope(__scopeAssistantModal);
+
+    return (
+      <PopoverPrimitive.Portal {...scope}>
+        <PopoverPrimitive.Content
+          {...scope}
+          {...props}
+          ref={forwardedRef}
+          side={side ?? "top"}
+          align={align ?? "end"}
+          onInteractOutside={composeEventHandlers(
+            onInteractOutside,
+            dissmissOnInteractOutside ? undefined : (e) => e.preventDefault(),
+          )}
+        />
+      </PopoverPrimitive.Portal>
+    );
+  },
+);
+AssistantModalContent.displayName = "AssistantModalContent";
diff --git a/packages/react/src/primitives/assistantModal/AssistantModalRoot.tsx b/packages/react/src/primitives/assistantModal/AssistantModalRoot.tsx
new file mode 100644
index 000000000..9d3339f99
--- /dev/null
+++ b/packages/react/src/primitives/assistantModal/AssistantModalRoot.tsx
@@ -0,0 +1,44 @@
+import { FC, useState } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import type { Scope } from "@radix-ui/react-context";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { useOnComposerFocus } from "../../utils/hooks/useOnComposerFocus";
+
+export type ScopedProps<P> = P & { __scopeAssistantModal?: Scope };
+export const usePopoverScope = PopoverPrimitive.createPopoverScope();
+
+type AssistantModalRootProps = PopoverPrimitive.PopoverProps;
+
+const useAssistantModalOpenState = (defaultOpen = false) => {
+  const state = useState(defaultOpen);
+
+  const [, setOpen] = state;
+  useOnComposerFocus(() => {
+    setOpen(true);
+  });
+
+  return state;
+};
+
+export const AssistantModalRoot: FC<AssistantModalRootProps> = ({
+  __scopeAssistantModal,
+  defaultOpen,
+  open,
+  onOpenChange,
+  ...rest
+}: ScopedProps<AssistantModalRootProps>) => {
+  const scope = usePopoverScope(__scopeAssistantModal);
+
+  const [modalOpen, setOpen] = useAssistantModalOpenState(defaultOpen);
+
+  return (
+    <PopoverPrimitive.Root
+      {...scope}
+      open={open === undefined ? modalOpen : open}
+      onOpenChange={composeEventHandlers(onOpenChange, setOpen)}
+      {...rest}
+    />
+  );
+};
+
+AssistantModalRoot.displayName = "AssistantModalRoot";
diff --git a/packages/react/src/primitives/assistantModal/AssistantModalTrigger.tsx b/packages/react/src/primitives/assistantModal/AssistantModalTrigger.tsx
new file mode 100644
index 000000000..ab64303cc
--- /dev/null
+++ b/packages/react/src/primitives/assistantModal/AssistantModalTrigger.tsx
@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { ScopedProps, usePopoverScope } from "./AssistantModalRoot";
+
+type AssistantModalTriggerElement = ElementRef<typeof PopoverPrimitive.Trigger>;
+type AssistantModalTriggerProps = ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Trigger
+>;
+
+export const AssistantModalTrigger = forwardRef<
+  AssistantModalTriggerElement,
+  AssistantModalTriggerProps
+>(
+  (
+    { __scopeAssistantModal, ...rest }: ScopedProps<AssistantModalTriggerProps>,
+    ref,
+  ) => {
+    const scope = usePopoverScope(__scopeAssistantModal);
+
+    return <PopoverPrimitive.Trigger {...scope} {...rest} ref={ref} />;
+  },
+);
+AssistantModalTrigger.displayName = "AssistantModalTrigger";
diff --git a/packages/react/src/primitives/assistantModal/index.ts b/packages/react/src/primitives/assistantModal/index.ts
new file mode 100644
index 000000000..cdb256d0a
--- /dev/null
+++ b/packages/react/src/primitives/assistantModal/index.ts
@@ -0,0 +1,3 @@
+export { AssistantModalRoot as Root } from "./AssistantModalRoot";
+export { AssistantModalTrigger as Trigger } from "./AssistantModalTrigger";
+export { AssistantModalContent as Content } from "./AssistantModalContent";
diff --git a/packages/react/src/primitives/index.ts b/packages/react/src/primitives/index.ts
index f501c6a9a..801a274df 100644
--- a/packages/react/src/primitives/index.ts
+++ b/packages/react/src/primitives/index.ts
@@ -1,6 +1,7 @@
-export * as ThreadPrimitive from "./thread";
-export * as ComposerPrimitive from "./composer";
-export * as MessagePrimitive from "./message";
-export * as BranchPickerPrimitive from "./branchPicker";
 export * as ActionBarPrimitive from "./actionBar";
+export * as AssistantModalPrimitive from "./assistantModal";
+export * as BranchPickerPrimitive from "./branchPicker";
+export * as ComposerPrimitive from "./composer";
 export * as ContentPartPrimitive from "./contentPart";
+export * as MessagePrimitive from "./message";
+export * as ThreadPrimitive from "./thread";
diff --git a/packages/shadcn-registry/registry/registry.ts b/packages/shadcn-registry/registry/registry.ts
index 54f366666..409b9550e 100644
--- a/packages/shadcn-registry/registry/registry.ts
+++ b/packages/shadcn-registry/registry/registry.ts
@@ -12,7 +12,7 @@ export const registry: RegistryIndex = [
     name: "modal",
     type: "components:ui",
     files: ["assistant-ui/assistant-modal.tsx"],
-    registryDependencies: ["thread", "button", "popover", "tooltip"],
+    registryDependencies: ["thread", "button", "tooltip"],
     dependencies: ["@assistant-ui/react", "lucide-react"],
   },
   {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a1da4b81..e433dc65f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -484,6 +484,12 @@ importers:
       '@radix-ui/react-compose-refs':
         specifier: ^1.1.0
         version: 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-primitive':
         specifier: ^2.0.0
         version: 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)