feat: animate composer border color on focus (#727)

Yonom · Sep 3, 2024 · c8b98b6 · c8b98b6
1 parent e52f337
commit c8b98b6
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 8 deletions.
diff --git a/.changeset/long-seahorses-sing.md b/.changeset/long-seahorses-sing.md
@@ -0,0 +1,6 @@
+---
+"@assistant-ui/react-playground": patch
+"@assistant-ui/react": patch
+---
+
+feat: animate composer border color on focus
diff --git a/packages/react-playground/src/components/ui/assistant-ui/thread.tsx b/packages/react-playground/src/components/ui/assistant-ui/thread.tsx
@@ -150,7 +150,7 @@ const Composer: FC = () => {
   };
 
   return (
-    <ComposerPrimitive.Root className="flex w-full flex-col rounded-lg border transition-shadow focus-within:shadow-sm">
+    <ComposerPrimitive.Root className="focus-within:border-aui-ring/20 flex w-full flex-col rounded-lg border shadow-sm transition-colors ease-in">
       <ComposerPrimitive.Input
         autoFocus
         placeholder="Write a message..."

diff --git a/packages/react/src/styles/tailwindcss/thread.css b/packages/react/src/styles/tailwindcss/thread.css
@@ -45,7 +45,7 @@
 /* composer */
 
 .aui-composer-root {
-  @apply flex w-full flex-wrap items-end rounded-lg border px-2.5 transition-shadow focus-within:shadow-sm;
+  @apply focus-within:border-aui-ring/20 flex w-full flex-wrap items-end rounded-lg border px-2.5 shadow-sm transition-colors ease-in;
 }
 
 .aui-composer-input {
@@ -54,7 +54,7 @@
 
 .aui-composer-send,
 .aui-composer-cancel {
-  @apply my-2.5 size-8 p-2 transition-opacity;
+  @apply my-2.5 size-8 p-2 transition-opacity ease-in;
 }
 
 /* user message */

diff --git a/packages/shadcn-registry/registry/assistant-ui/full/thread.tsx b/packages/shadcn-registry/registry/assistant-ui/full/thread.tsx
@@ -80,7 +80,7 @@ const MyThreadWelcome: FC = () => {
 
 const MyComposer: FC = () => {
   return (
-    <ComposerPrimitive.Root className="flex w-full flex-wrap items-end rounded-lg border px-2.5 transition-shadow focus-within:shadow-sm">
+    <ComposerPrimitive.Root className="focus-within:border-aui-ring/20 flex w-full flex-wrap items-end rounded-lg border px-2.5 shadow-sm transition-colors ease-in">
       <ComposerPrimitive.Input
         autoFocus
         placeholder="Write a message..."
@@ -92,7 +92,7 @@ const MyComposer: FC = () => {
           <TooltipIconButton
             tooltip="Send"
             variant="default"
-            className="my-2.5 size-8 p-2 transition-opacity"
+            className="my-2.5 size-8 p-2 transition-opacity ease-in"
           >
             <SendHorizontalIcon />
           </TooltipIconButton>
@@ -103,7 +103,7 @@ const MyComposer: FC = () => {
           <TooltipIconButton
             tooltip="Cancel"
             variant="default"
-            className="my-2.5 size-8 p-2 transition-opacity"
+            className="my-2.5 size-8 p-2 transition-opacity ease-in"
           >
             <CircleStopIcon />
           </TooltipIconButton>

diff --git a/packages/shadcn-registry/registry/assistant-ui/thread.tsx b/packages/shadcn-registry/registry/assistant-ui/thread.tsx
@@ -47,7 +47,7 @@ const MyThreadWelcome: FC = () => {
 
 const MyComposer: FC = () => {
   return (
-    <ComposerPrimitive.Root className="flex w-full flex-wrap items-end rounded-lg border px-2.5 transition-shadow focus-within:shadow-sm">
+    <ComposerPrimitive.Root className="focus-within:border-aui-ring/20 flex w-full flex-wrap items-end rounded-lg border px-2.5 shadow-sm transition-colors ease-in">
       <ComposerPrimitive.Input
         autoFocus
         placeholder="Write a message..."
@@ -58,7 +58,7 @@ const MyComposer: FC = () => {
         <TooltipIconButton
           tooltip="Send"
           variant="default"
-          className="my-2.5 size-8 p-2 transition-opacity"
+          className="my-2.5 size-8 p-2 transition-opacity ease-in"
         >
           <SendHorizontalIcon />
         </TooltipIconButton>