fix(shadcn): agents ui updates (#1273)

Author: thomasyuill-livekit

README.md

@@ -29,7 +29,7 @@ Agents UI is a set of open source [Shadcn](https://ui.shadcn.com/) components fo
 
 You can find more information in the [Agents UI API references](https://docs.livekit.io/reference/components/shadcn/) and in the [Agents UI README](packages/shadcn/README.md).
 
-## Prerequisites {% #prerequisites %}
+## Prerequisites
 
 Before installing Agents UI, make sure your environment meets the following requirements:
 

docs/storybook/stories/agents-ui/AgentAudioVisualizerGrid.stories.tsx

@@ -15,12 +15,12 @@ export default {
     return <AgentAudioVisualizerGrid {...args} audioTrack={audioTrack} />;
   },
   args: {
-    default: 'lg',
+    size: 'lg',
     state: 'connecting',
     radius: 5,
     interval: 100,
-    rowCount: 10,
-    columnCount: 10,
+    rowCount: 9,
+    columnCount: 9,
   },
   argTypes: {
     size: {
@@ -63,6 +63,12 @@ export default {
   },
 };
 
+export const Default: StoryObj<AgentAudioVisualizerGridProps> = {
+  args: {
+    
+  },
+};
+
 export const Demo1: StoryObj<AgentAudioVisualizerGridProps> = {
   args: {
     className:

docs/storybook/stories/agents-ui/AgentAudioVisualizerWave.stories.tsx

@@ -18,7 +18,7 @@ export default {
     size: 'xl',
     lineWidth: 2,
     state: 'connecting',
-    smoothing: 0.1,
+    blur: 0.1,
     color: '#1FD5F9',
   },
   argTypes: {
@@ -43,7 +43,7 @@ export default {
     lineWidth: {
       control: { type: 'range', min: 1, max: 20, step: 1 },
     },
-    smoothing: {
+    blur: {
       control: { type: 'range', min: 0, max: 10, step: 0.5 },
     },
     color: {

packages/shadcn/README.md

@@ -19,9 +19,10 @@ Located in `components/agents-ui/`, these are the primary components for buildin
 | `AgentDisconnectButton`      | Button to end the agent session                                                         |
 | `AgentChatTranscript`        | Displays the conversation transcript including voice transcriptions                     |
 | `AgentChatIndicator`         | Visual indicator for agent thinking/processing state                                    |
-| `AgentAudioVisualizerBar`    | Linear bar audio visualizer                                                             |
-| `AgentAudioVisualizerGrid`   | Grid-based audio visualizer                                                             |
-| `AgentAudioVisualizerRadial` | Radial/circular audio visualizer                                                        |
+| `AgentAudioVisualizerBar`    | Audio visualizer with horizontal set of animated bars                                   |
+| `AgentAudioVisualizerRadial` | Audio visualizer with a radial set of animated bars                                     |
+| `AgentAudioVisualizerWave`   | Audio visualizer with an animated wave                                                  |
+| `AgentAudioVisualizerAura`   | Audio visualizer with an animated aura ring                                             |
 | `StartAudioButton`           | Button to start audio when browser blocks autoplay                                      |
 
 ## Prerequisites
@@ -176,6 +177,10 @@ DEST_PROP_TYPES_PATH=/path/to/destination/prop-types.json
 - `livekit-client` - LiveKit client SDK
 - `react` ^19.0.0
 - `react-dom` ^19.0.0
+- `tailwindcss` ^4
+- `shadcn` ^3.5.1
+- `motion` ^12.16.0
+- `ai` ^5.0.105
 
 ## Reporting issues
 

packages/shadcn/components/agents-ui/agent-audio-visualizer-aura.tsx

@@ -363,7 +363,7 @@ export const AgentAudioVisualizerAuraVariants = cva(['aspect-square'], {
 export interface AgentAudioVisualizerAuraProps {
   /**
    * The size of the visualizer.
-   * @defaultValue 'md'
+   * @defaultValue 'lg'
    */
   size?: 'icon' | 'sm' | 'md' | 'lg' | 'xl';
   /**
@@ -409,7 +409,7 @@ export interface AgentAudioVisualizerAuraProps {
  * ```
  */
 export function AgentAudioVisualizerAura({
-  size = 'md',
+  size = 'lg',
   state = 'connecting',
   color = DEFAULT_COLOR,
   colorShift = 0.05,

packages/shadcn/components/agents-ui/agent-audio-visualizer-grid.tsx

@@ -56,11 +56,11 @@ export const AgentAudioVisualizerGridVariants = cva(
   {
     variants: {
       size: {
-        icon: ['gap-[2px] *:size-[4px]'],
+        icon: ['gap-[2px] *:size-[2px]'],
         sm: ['gap-[4px] *:size-[4px]'],
         md: ['gap-[8px] *:size-[8px]'],
-        lg: ['gap-[8px] *:size-[8px]'],
-        xl: ['gap-[8px] *:size-[8px]'],
+        lg: ['gap-[12px] *:size-[12px]'],
+        xl: ['gap-[16px] *:size-[16px]'],
       },
     },
     defaultVariants: {

packages/shadcn/components/agents-ui/agent-audio-visualizer-radial.tsx

@@ -14,11 +14,12 @@ import { useAgentAudioVisualizerRadialAnimator } from '@/hooks/agents-ui/use-age
 export const AgentAudioVisualizerRadialVariants = cva(
   [
     'relative flex items-center justify-center',
+    '[&_[data-lk-index]]:bg-current/10',
     '[&_[data-lk-index]]:absolute [&_[data-lk-index]]:top-1/2 [&_[data-lk-index]]:left-1/2 [&_[data-lk-index]]:origin-bottom [&_[data-lk-index]]:-translate-x-1/2',
-    '[&_[data-lk-index]]:rounded-full [&_[data-lk-index]]:transition-colors [&_[data-lk-index]]:duration-150 [&_[data-lk-index]]:ease-linear [&_[data-lk-index]]:bg-transparent [&_[data-lk-index]]:data-[lk-highlighted=true]:bg-current',
-    'has-data-[lk-state=connecting]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=connecting]:[&_[data-lk-index]]:bg-current/10',
-    'has-data-[lk-state=initializing]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=initializing]:[&_[data-lk-index]]:bg-current/10',
-    'has-data-[lk-state=listening]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=listening]:[&_[data-lk-index]]:bg-current/10 has-data-[lk-state=listening]:[&_[data-lk-index]]:duration-300',
+    '[&_[data-lk-index]]:rounded-full [&_[data-lk-index]]:transition-colors [&_[data-lk-index]]:duration-150 [&_[data-lk-index]]:ease-linear [&_[data-lk-index]]:data-[lk-highlighted=true]:bg-current',
+    'has-data-[lk-state=connecting]:[&_[data-lk-index]]:duration-300',
+    'has-data-[lk-state=initializing]:[&_[data-lk-index]]:duration-300',
+    'has-data-[lk-state=listening]:[&_[data-lk-index]]:duration-300 has-data-[lk-state=listening]:[&_[data-lk-index]]:duration-300',
     'has-data-[lk-state=thinking]:animate-spin has-data-[lk-state=thinking]:[animation-duration:5s] has-data-[lk-state=thinking]:[&_[data-lk-index]]:bg-current',
   ],
   {

packages/shadcn/components/agents-ui/agent-audio-visualizer-wave.tsx

@@ -158,10 +158,10 @@ interface WaveShaderProps {
    */
   lineWidth?: number;
   /**
-   * Smoothing of the oscilloscope in pixels
+   * Blur of the oscilloscope in pixels
    * @default 0.5
    */
-  smoothing?: number;
+  blur?: number;
 }
 
 function WaveShader({
@@ -171,7 +171,7 @@ function WaveShader({
   amplitude = 0.02,
   frequency = 20.0,
   lineWidth = 2.0,
-  smoothing = 0.5,
+  blur = 0.5,
   ref,
   className,
   ...props
@@ -189,7 +189,7 @@ function WaveShader({
           uFrequency: { type: '1f', value: frequency },
           uMix: { type: '1f', value: mix },
           uLineWidth: { type: '1f', value: lineWidth },
-          uSmoothing: { type: '1f', value: smoothing },
+          uSmoothing: { type: '1f', value: blur },
           uColor: { type: '3fv', value: rgbColor },
         }}
         onError={(error) => {
@@ -209,22 +209,22 @@ WaveShader.displayName = 'WaveShader';
 export const AgentAudioVisualizerWaveVariants = cva(['aspect-square'], {
   variants: {
     size: {
-      icon: 'h-[24px] gap-[2px]',
-      sm: 'h-[56px] gap-[4px]',
-      md: 'h-[112px] gap-[8px]',
-      lg: 'h-[224px] gap-[16px]',
-      xl: 'h-[448px] gap-[32px]',
+      icon: 'h-[24px]',
+      sm: 'h-[56px]',
+      md: 'h-[112px]',
+      lg: 'h-[224px]',
+      xl: 'h-[448px]',
     },
   },
   defaultVariants: {
-    size: 'md',
+    size: 'lg',
   },
 });
 
 export interface AgentAudioVisualizerWaveProps {
   /**
    * The size of the visualizer.
-   * @defaultValue 'md'
+   * @defaultValue 'lg'
    */
   size?: 'icon' | 'sm' | 'md' | 'lg' | 'xl';
   /**
@@ -243,10 +243,10 @@ export interface AgentAudioVisualizerWaveProps {
    */
   lineWidth?: number;
   /**
-   * The smoothing of the wave in pixels.
+   * The blur of the wave in pixels.
    * @defaultValue 0.5
    */
-  smoothing?: number;
+  blur?: number;
   /**
    * The audio track to visualize. Can be a local/remote audio track or a track reference.
    */
@@ -270,7 +270,7 @@ export interface AgentAudioVisualizerWaveProps {
  *   state="speaking"
  *   color="#1FD5F9"
  *   lineWidth={2}
- *   smoothing={0.5}
+ *   blur={0.5}
  *   audioTrack={audioTrack}
  * />
  * ```
@@ -280,7 +280,7 @@ export function AgentAudioVisualizerWave({
   state = 'speaking',
   color,
   lineWidth,
-  smoothing,
+  blur,
   audioTrack,
   className,
   style,
@@ -315,7 +315,7 @@ export function AgentAudioVisualizerWave({
       amplitude={amplitude}
       frequency={frequency}
       lineWidth={_lineWidth}
-      smoothing={smoothing}
+      blur={blur}
       style={{ opacity, ...style }}
       className={cn(
         AgentAudioVisualizerWaveVariants({ size }),

packages/shadcn/components/agents-ui/agent-control-bar.tsx

@@ -71,13 +71,16 @@ function AgentChatInput({ chatOpen, onSend = async () => {}, className }: AgentC
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [isSending, setIsSending] = useState(false);
   const [message, setMessage] = useState<string>('');
+  const isDisabled = isSending || message.trim().length === 0;
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const handleSend = async () => {
+    if (isDisabled) {
+      return;
+    }
 
     try {
       setIsSending(true);
-      await onSend(message);
+      await onSend(message.trim());
       setMessage('');
     } catch (error) {
       console.error(error);
@@ -86,7 +89,17 @@ function AgentChatInput({ chatOpen, onSend = async () => {}, className }: AgentC
     }
   };
 
-  const isDisabled = isSending || message.trim().length === 0;
+  const handleKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleButtonClick = async () => {
+    if (isDisabled) return;
+    await handleSend();
+  };
 
   useEffect(() => {
     if (chatOpen) return;
@@ -95,30 +108,31 @@ function AgentChatInput({ chatOpen, onSend = async () => {}, className }: AgentC
   }, [chatOpen]);
 
   return (
-    <form
-      onSubmit={handleSubmit}
+    <div
       className={cn('mb-3 flex grow items-end gap-2 rounded-md pl-1 text-sm', className)}
     >
       <textarea
         autoFocus
         ref={inputRef}
         value={message}
-        disabled={!chatOpen}
+        disabled={!chatOpen || isSending}
         placeholder="Type something..."
+        onKeyDown={handleKeyDown}
         onChange={(e) => setMessage(e.target.value)}
-        className="field-sizing-content max-h-16 min-h-8 flex-1 py-2 [scrollbar-width:thin] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        className="field-sizing-content max-h-16 min-h-8 flex-1 py-2 [scrollbar-width:thin] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 resize-none"
       />
       <Button
         size="icon"
-        type="submit"
+        type="button"
         disabled={isDisabled}
         variant={isDisabled ? 'secondary' : 'default'}
         title={isSending ? 'Sending...' : 'Send'}
+        onClick={handleButtonClick}
         className="self-end disabled:cursor-not-allowed"
       >
         {isSending ? <Loader className="animate-spin" /> : <SendHorizontal />}
       </Button>
-    </form>
+    </div>
   );
 }
 

packages/shadcn/components/agents-ui/agent-track-toggle.tsx

@@ -10,11 +10,16 @@ import {
   VideoIcon,
   VideoOffIcon,
 } from 'lucide-react';
-import { Toggle, toggleVariants } from '@/components/ui/toggle';
+import { Toggle } from '@/components/ui/toggle';
 import { cn } from '@/lib/utils';
 
 export const agentTrackToggleVariants = cva(['size-9'], {
   variants: {
+    size: {
+      default: 'h-9 px-2 min-w-9',
+      sm: 'h-8 px-1.5 min-w-8',
+      lg: 'h-10 px-2.5 min-w-10',
+    },
     variant: {
       default: [
         'data-[state=off]:bg-destructive/10 data-[state=off]:text-destructive',
@@ -58,8 +63,12 @@ function getSourceIcon(source: Track.Source, enabled: boolean, pending = false)
 /**
  * Props for the AgentTrackToggle component.
  */
-export type AgentTrackToggleProps = VariantProps<typeof toggleVariants> &
+export type AgentTrackToggleProps = VariantProps<typeof agentTrackToggleVariants> &
   ComponentProps<'button'> & {
+    /**
+     * The size of the toggle.
+     */
+    size?: 'sm' | 'default' | 'lg';
     /**
      * The variant of the toggle.
      * @defaultValue 'default'
@@ -129,6 +138,7 @@ export function AgentTrackToggle({
       onPressedChange={onPressedChange}
       className={cn(
         agentTrackToggleVariants({
+          size,
           variant: variant ?? 'default',
           className,
         }),