feat: add UI transitions (#17)

Author: thomasyuill-livekit

app/globals.css

@@ -87,10 +87,6 @@
 }
 
 @theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -156,4 +152,27 @@
       background-position-x: 300px;
     }
   }
+
+  .appear-from-bottom {
+    opacity: 1;
+    transform: translateY(0);
+    transition-property: transform, opacity;
+    transition-duration: var(--tw-duration);
+    transition-timing-function: var(--tw-ease);
+
+    @starting-style {
+      transform: translateY(100%);
+    }
+  }
+
+  .appear-fade-in {
+    opacity: 1;
+    transition-property: opacity;
+    transition-duration: var(--tw-duration);
+    transition-timing-function: var(--tw-ease);
+
+    @starting-style {
+      opacity: 0;
+    }
+  }
 }

components/livekit/agent-audio-tile.tsx

@@ -19,7 +19,7 @@ export function AgentAudioTile({ className }: AgentAudioTileProps) {
       state={agent.state}
       barCount={5}
       options={{ minHeight: 5 }}
-      className={cn('flex aspect-video h-[126px] items-center justify-center gap-4', className)}
+      className={cn('flex h-[200px] items-center justify-center gap-4', className)}
     >
       <span
         className={cn([

components/livekit/agent-control-bar/agent-control-bar.tsx

@@ -63,23 +63,31 @@ export function AgentControlBar({
   return (
     <div
       aria-label="Voice assistant controls"
-      className={cn('bg-background flex flex-col rounded-md border p-3 shadow-md', className)}
+      className={cn(
+        'bg-background flex flex-col rounded-md border p-3 drop-shadow-xl/3',
+        className
+      )}
       {...props}
     >
-      {chatOpen && (
-        <>
-          <div className={`flex w-full overflow-hidden`}>
-            <ChatInput onSend={handleSendMessage} disabled={isSendingMessage} className="w-full" />
-          </div>
-          <hr className="my-3" />
-        </>
-      )}
+      <div
+        inert={!chatOpen}
+        className={cn(
+          'overflow-hidden transition-[height] duration-300 ease-out',
+          chatOpen ? 'h-[57px]' : 'h-0'
+        )}
+      >
+        <div className="flex h-8 w-full">
+          <ChatInput onSend={handleSendMessage} disabled={isSendingMessage} className="w-full" />
+        </div>
+        <hr className="my-3" />
+      </div>
+
       <div className="flex flex-row justify-between gap-1">
         <div className="flex w-full gap-1">
           {visibleControls.microphone && (
             <div className="flex items-center gap-0">
               <TrackToggle
-                className="peer relative w-auto rounded-r-none border-r-0"
+                className="peer relative w-auto md:rounded-r-none md:border-r-0"
                 source={Track.Source.Microphone}
               >
                 <BarVisualizer
@@ -92,7 +100,7 @@ export function AgentControlBar({
                 </BarVisualizer>
               </TrackToggle>
               <DeviceSelect
-                className="peer-data-[state=on]:border-button-foreground rounded-l-none border-l-0"
+                className="peer-data-[state=on]:border-button-foreground hidden rounded-l-none border-l-0 md:block"
                 size="sm"
                 kind="audioinput"
                 onActiveDeviceChange={handleDeviceChange}
@@ -104,11 +112,11 @@ export function AgentControlBar({
           {visibleControls.camera && (
             <div className="flex items-center gap-0">
               <TrackToggle
-                className="peer relative w-auto rounded-r-none border-r-0"
+                className="peer relative w-auto md:rounded-r-none md:border-r-0"
                 source={Track.Source.Camera}
               />
               <DeviceSelect
-                className="peer-data-[state=on]:border-button-foreground rounded-l-none border-l-0"
+                className="peer-data-[state=on]:border-button-foreground hidden rounded-l-none border-l-0 md:block"
                 size="sm"
                 kind="videoinput"
                 onActiveDeviceChange={handleDeviceChange}
@@ -138,7 +146,8 @@ export function AgentControlBar({
         {visibleControls.leave && (
           <Button variant="destructive" onClick={handleDisconnect} className="font-mono">
             <PhoneDisconnectIcon weight="bold" />
-            END CALL
+            <span className="hidden md:inline">END CALL</span>
+            <span className="inline md:hidden">END</span>
           </Button>
         )}
       </div>

components/livekit/chat/chat-input.tsx

@@ -19,6 +19,8 @@ export function ChatInput({ onSend, className, disabled, ...props }: ChatInputPr
     inputRef.current?.focus();
   };
 
+  const isDisabled = disabled || message.trim().length === 0;
+
   return (
     <form
       {...props}
@@ -37,8 +39,8 @@ export function ChatInput({ onSend, className, disabled, ...props }: ChatInputPr
       <Button
         type="submit"
         size="sm"
-        variant="secondary"
-        disabled={message.trim().length === 0 || disabled}
+        variant={isDisabled ? 'secondary' : 'default'}
+        disabled={isDisabled}
         className="font-mono"
       >
         SEND

components/session-view.tsx

@@ -23,10 +23,14 @@ export default function SessionView() {
   return (
     <main>
       {chatOpen && (
-        <ChatMessageView className="mx-auto min-h-svh w-full max-w-2xl pt-56 pb-48">
+        <ChatMessageView className="appear-fade-in mx-auto min-h-svh w-full max-w-2xl px-3 pt-56 pb-48 delay-300 duration-1000 ease-out md:px-0">
           <div className="space-y-3 whitespace-pre-wrap">
             {messages.map((message: ReceivedChatMessage) => (
-              <ChatEntry key={message.id} entry={message} />
+              <ChatEntry
+                key={message.id}
+                entry={message}
+                className="appear-fade-in duration-2000 ease-out"
+              />
             ))}
           </div>
         </ChatMessageView>
@@ -39,8 +43,8 @@ export default function SessionView() {
 
       <div
         className={cn(
-          'fixed left-1/2 z-50 rounded-xl border border-transparent p-8 transition-[left,top,transform,shadow,border] duration-500 ease-out',
-          chatOpen ? 'shadow-3xl border-border top-24 shadow-md' : 'top-1/2'
+          'bg-background fixed left-1/2 z-50 rounded-2xl border border-transparent p-8 transition-[left,top,transform,shadow,border] duration-500 ease-out',
+          chatOpen ? 'border-border top-24 drop-shadow-2xl/3' : 'top-1/2'
         )}
         style={{
           transform: chatOpen
@@ -51,13 +55,20 @@ export default function SessionView() {
         <AgentAudioTile />
       </div>
 
-      <div className="bg-background fixed right-0 bottom-0 left-0 z-50 px-12 pb-12">
-        <div className="mx-auto w-full max-w-2xl">
-          {messages.length === 0 && (
-            <p className="animate-text-gradient from-foreground/20 via-foreground to-foreground/20 mx-auto mb-6 bg-gradient-to-r bg-clip-text text-sm font-semibold text-transparent">
+      <div className="bg-background appear-from-bottom fixed right-0 bottom-0 left-0 z-50 px-3 pb-3 delay-300 duration-300 ease-out md:px-12 md:pb-12">
+        <div className="relative mx-auto w-full max-w-2xl">
+          <div
+            aria-hidden={messages.length > 0}
+            className={cn(
+              'appear-fade-in absolute inset-x-0 -top-12 delay-600 duration-2000 ease-in',
+              messages.length === 0 ? 'opacity-100' : '!opacity-0'
+            )}
+          >
+            <p className="animate-text-gradient from-foreground/20 via-foreground to-foreground/20 mx-auto bg-gradient-to-r bg-clip-text text-center text-sm font-semibold text-transparent">
               Agent is listening, ask it a question
             </p>
-          )}
+          </div>
+
           <AgentControlBar onChatOpenChange={setChatOpen} onSendMessage={handleSendMessage} />
         </div>
         {/* skrim */}

components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
   [
-    'inline-flex items-center justify-center gap-2 shrink-0 rounded-md text-sm font-medium whitespace-nowrap cursor-pointer outline-none transition-all',
+    'inline-flex items-center justify-center gap-2 shrink-0 rounded-md text-sm font-medium whitespace-nowrap cursor-pointer outline-none transition-colors duration-300',
     'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
     'disabled:pointer-events-none disabled:opacity-50',
     'aria-invalid:ring-destructive/20 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 ',
@@ -14,18 +14,18 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive: [
-          'bg-destructive border border-destructive-border text-destructive-foreground shadow-xs',
+          'bg-destructive border border-destructive-border text-destructive-foreground',
           'hover:bg-background focus-visible:ring-destructive-foreground/20',
           'dark:focus-visible:ring-destructive-foreground/40',
         ],
         outline: [
-          'border bg-background shadow-xs',
+          'border bg-background',
           'hover:bg-accent hover:text-accent-foreground',
           'dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         ],
-        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        secondary: 'bg-secondary text-secondary-foregroun hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
         link: 'text-primary underline-offset-4 hover:underline',
       },

components/ui/select.tsx

@@ -67,7 +67,7 @@ function SelectContent({
         data-slot="select-content"
         className={cn(
           [
-            'bg-popover text-popover-foreground relative z-50 overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+            'bg-popover text-popover-foreground relative z-50 overflow-x-hidden overflow-y-auto rounded-md border drop-shadow-xl/5',
             'max-h-(--radix-select-content-available-height) min-w-[8rem]',
             'origin-(--radix-select-content-transform-origin)',
             'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',