From 6bf4193dba68edd46a3b6ce2be71dac7d7d0c3ff Mon Sep 17 00:00:00 2001
From: Simon Farshid <simon.farshid@outlook.com>
Date: Fri, 28 Jun 2024 23:07:40 -0700
Subject: [PATCH] feat: Modal content expand from button effect (#362)

---
 .../components/ui/assistant-ui/assistant-modal.tsx   | 12 +++++++-----
 .../registry/assistant-ui/assistant-modal.tsx        | 12 +++++++-----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/react-ui/components/ui/assistant-ui/assistant-modal.tsx b/packages/react-ui/components/ui/assistant-ui/assistant-modal.tsx
index f962367d1..7fb033e8a 100644
--- a/packages/react-ui/components/ui/assistant-ui/assistant-modal.tsx
+++ b/packages/react-ui/components/ui/assistant-ui/assistant-modal.tsx
@@ -11,15 +11,17 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { FC, forwardRef } from "react";
+import { type FC, forwardRef } from "react";
 import { AssistantModalPrimitive } from "@assistant-ui/react";
 
 export const AssistantModal: FC = () => {
   return (
     <AssistantModalPrimitive.Root>
-      <AssistantModalPrimitive.Trigger asChild>
-        <FloatingAssistantButton />
-      </AssistantModalPrimitive.Trigger>
+      <AssistantModalPrimitive.Anchor className="fixed bottom-4 right-4 size-12">
+        <AssistantModalPrimitive.Trigger asChild>
+          <FloatingAssistantButton />
+        </AssistantModalPrimitive.Trigger>
+      </AssistantModalPrimitive.Anchor>
       <AssistantModalPrimitive.Content
         sideOffset={16}
         className={
@@ -48,7 +50,7 @@ const FloatingAssistantButton = forwardRef<
             variant="default"
             size="icon"
             {...rest}
-            className="fixed bottom-4 right-4 size-12 rounded-full shadow transition-transform hover:scale-110 active:scale-90"
+            className="size-full rounded-full shadow transition-transform hover:scale-110 active:scale-90"
             ref={ref}
           >
             <BotIcon
diff --git a/packages/shadcn-registry/registry/assistant-ui/assistant-modal.tsx b/packages/shadcn-registry/registry/assistant-ui/assistant-modal.tsx
index c2419670c..3766463ae 100644
--- a/packages/shadcn-registry/registry/assistant-ui/assistant-modal.tsx
+++ b/packages/shadcn-registry/registry/assistant-ui/assistant-modal.tsx
@@ -17,13 +17,15 @@ import { AssistantModalPrimitive } from "@assistant-ui/react";
 export const AssistantModal: FC = () => {
   return (
     <AssistantModalPrimitive.Root>
-      <AssistantModalPrimitive.Trigger asChild>
-        <FloatingAssistantButton />
-      </AssistantModalPrimitive.Trigger>
+      <AssistantModalPrimitive.Anchor className="fixed bottom-4 right-4 size-12">
+        <AssistantModalPrimitive.Trigger asChild>
+          <FloatingAssistantButton />
+        </AssistantModalPrimitive.Trigger>
+      </AssistantModalPrimitive.Anchor>
       <AssistantModalPrimitive.Content
         sideOffset={16}
         className={
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 slide-in-from-bottom-2 bg-popover text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in z-50 h-[500px] w-[400px] rounded-xl border p-0 shadow-md outline-none"
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out data-[state=open]:zoom-in data-[state=open]:slide-in-from-bottom-1/2 data-[state=open]:slide-in-from-right-1/2 data-[state=closed]:slide-out-to-bottom-1/2 data-[state=closed]:slide-out-to-right-1/2 bg-popover text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in z-50 h-[500px] w-[400px] rounded-xl border p-0 shadow-md outline-none"
         }
       >
         <Thread />
@@ -48,7 +50,7 @@ const FloatingAssistantButton = forwardRef<
             variant="default"
             size="icon"
             {...rest}
-            className="fixed bottom-4 right-4 size-12 rounded-full shadow transition-transform hover:scale-110 active:scale-90"
+            className="size-full rounded-full shadow transition-transform hover:scale-110 active:scale-90"
             ref={ref}
           >
             <BotIcon