feat(shadcn): theme mode for aura visualizer and all registry item

docs/storybook/stories/agents-ui/AgentSessionView-01.stories.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import { StoryObj } from '@storybook/react-vite';
+import { useTheme } from 'next-themes';
 import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
 import { AgentSessionView_01, AgentSessionView_01Props } from '@agents-ui';
 
 export default {
   component: AgentSessionView_01,
   decorators: [AgentSessionProvider],
-  render: (args: AgentSessionView_01Props) => <AgentSessionView_01 {...args} />,
+  render: (args: AgentSessionView_01Props) => {
+    const { resolvedTheme = 'dark' } = useTheme();
+    return (
+      <AgentSessionView_01 themeMode={resolvedTheme as 'dark' | 'light'} {...args} />
+    );
+  },
   args: {
     className: 'h-screen w-screen',
     supportsChatInput: true,

packages/shadcn/components/agents-ui/blocks/agent-session-view-01/components/agent-session-block.tsx

@@ -102,6 +102,12 @@ export function Fade({ top = false, bottom = false, className }: FadeProps) {
 }
 
 export interface AgentSessionView_01Props {
+  /**
+   * Theme mode forwarded to the aura visualizer (`audioVisualizerType="aura"`) so
+   * the shader's blend mode adapts to the theme mode.
+   * Ignored by other visualizer types.
+   */
+  themeMode?: 'dark' | 'light';
   /**
    * Message shown above the controls before the first chat message is sent.
    *
@@ -171,6 +177,7 @@ export function AgentSessionView_01({
   audioVisualizerRadialBarCount,
   audioVisualizerRadialRadius,
   audioVisualizerWaveLineWidth,
+  themeMode,
   ref,
   className,
   ...props
@@ -226,6 +233,7 @@ export function AgentSessionView_01({
       {/* Tile layout */}
       <TileLayout
         chatOpen={chatOpen}
+        themeMode={themeMode}
         audioVisualizerType={audioVisualizerType}
         audioVisualizerColor={audioVisualizerColor}
         audioVisualizerColorShift={audioVisualizerColorShift}

packages/shadcn/components/agents-ui/blocks/agent-session-view-01/components/audio-visualizer.tsx

@@ -18,6 +18,7 @@ const MotionAgentAudioVisualizerRadial = motion.create(AgentAudioVisualizerRadia
 const MotionAgentAudioVisualizerWave = motion.create(AgentAudioVisualizerWave);
 
 interface AudioVisualizerProps extends MotionProps {
+  themeMode?: 'dark' | 'light';
   isChatOpen: boolean;
   audioVisualizerType?: 'bar' | 'wave' | 'grid' | 'radial' | 'aura';
   audioVisualizerColor?: `#${string}`;
@@ -32,6 +33,8 @@ interface AudioVisualizerProps extends MotionProps {
 }
 
 export function AudioVisualizer({
+  themeMode,
+  isChatOpen,
   audioVisualizerType = 'bar',
   audioVisualizerColor,
   audioVisualizerColorShift = 0.3,
@@ -41,7 +44,6 @@ export function AudioVisualizer({
   audioVisualizerGridRowCount = 15,
   audioVisualizerGridColumnCount = 15,
   audioVisualizerWaveLineWidth = 3,
-  isChatOpen,
   className,
   ...props
 }: AudioVisualizerProps) {
@@ -55,6 +57,7 @@ export function AudioVisualizer({
           audioTrack={audioTrack}
           color={audioVisualizerColor}
           colorShift={audioVisualizerColorShift}
+          themeMode={themeMode}
           className={cn('size-[300px] md:size-[450px]', className)}
           {...props}
         />

packages/shadcn/components/agents-ui/blocks/agent-session-view-01/components/tile-view.tsx

@@ -69,7 +69,8 @@ export function useLocalTrackRef(source: Track.Source) {
 }
 
 interface TileLayoutProps {
-  chatOpen: boolean;
+  themeMode?: 'dark' | 'light';
+  isChatOpen: boolean;
   audioVisualizerType?: 'bar' | 'wave' | 'grid' | 'radial' | 'aura';
   audioVisualizerColor?: `#${string}`;
   audioVisualizerColorShift?: number;
@@ -82,7 +83,8 @@ interface TileLayoutProps {
 }
 
 export function TileLayout({
-  chatOpen,
+  themeMode,
+  isChatOpen,
   audioVisualizerType,
   audioVisualizerColor,
   audioVisualizerColorShift,
@@ -101,7 +103,7 @@ export function TileLayout({
   const isScreenShareEnabled = screenShareTrack && !screenShareTrack.publication.isMuted;
   const hasSecondTile = isCameraEnabled || isScreenShareEnabled;
 
-  const animationDelay = chatOpen ? 0 : 0.15;
+  const animationDelay = isChatOpen ? 0 : 0.15;
   const isAvatar = agentVideoTrack !== undefined;
   const videoWidth = agentVideoTrack?.publication.dimensions?.width ?? 0;
   const videoHeight = agentVideoTrack?.publication.dimensions?.height ?? 0;
@@ -114,9 +116,9 @@ export function TileLayout({
           <div
             className={cn([
               'grid',
-              !chatOpen && tileViewClassNames.agentChatClosed,
-              chatOpen && hasSecondTile && tileViewClassNames.agentChatOpenWithSecondTile,
-              chatOpen && !hasSecondTile && tileViewClassNames.agentChatOpenWithoutSecondTile,
+              !isChatOpen && tileViewClassNames.agentChatClosed,
+              isChatOpen && hasSecondTile && tileViewClassNames.agentChatOpenWithSecondTile,
+              isChatOpen && !hasSecondTile && tileViewClassNames.agentChatOpenWithoutSecondTile,
             ])}
           >
             <AnimatePresence mode="popLayout">
@@ -136,7 +138,7 @@ export function TileLayout({
                   <AudioVisualizer
                     key="audio-visualizer"
                     initial={{ scale: 1 }}
-                    animate={{ scale: chatOpen ? 0.2 : 1 }}
+                    animate={{ scale: isChatOpen ? 0.2 : 1 }}
                     transition={{
                       ...ANIMATION_TRANSITION,
                       delay: animationDelay,
@@ -150,11 +152,12 @@ export function TileLayout({
                     audioVisualizerGridRowCount={audioVisualizerGridRowCount}
                     audioVisualizerGridColumnCount={audioVisualizerGridColumnCount}
                     audioVisualizerWaveLineWidth={audioVisualizerWaveLineWidth}
-                    isChatOpen={chatOpen}
+                    themeMode={themeMode}
+                    isChatOpen={isChatOpen}
                     className={cn(
                       'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
                       'bg-background rounded-[50px] border border-transparent transition-[border,drop-shadow]',
-                      chatOpen && 'border-input shadow-2xl/10 delay-200',
+                      isChatOpen && 'border-input shadow-2xl/10 delay-200',
                     )}
                     style={{ color: audioVisualizerColor }}
                   />
@@ -177,7 +180,7 @@ export function TileLayout({
                     maskImage:
                       'radial-gradient(circle, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 500px, transparent 500px)',
                     filter: 'blur(0px)',
-                    borderRadius: chatOpen ? 6 : 12,
+                    borderRadius: isChatOpen ? 6 : 12,
                   }}
                   transition={{
                     ...ANIMATION_TRANSITION,
@@ -191,14 +194,14 @@ export function TileLayout({
                   }}
                   className={cn(
                     'overflow-hidden bg-black drop-shadow-xl/80',
-                    chatOpen ? 'h-[90px]' : 'h-auto w-full',
+                    isChatOpen ? 'h-[90px]' : 'h-auto w-full',
                   )}
                 >
                   <VideoTrack
                     width={videoWidth}
                     height={videoHeight}
                     trackRef={agentVideoTrack}
-                    className={cn(chatOpen && 'size-[90px] object-cover')}
+                    className={cn(isChatOpen && 'size-[90px] object-cover')}
                   />
                 </motion.div>
               )}
@@ -208,8 +211,8 @@ export function TileLayout({
           <div
             className={cn([
               'grid',
-              chatOpen && tileViewClassNames.secondTileChatOpen,
-              !chatOpen && tileViewClassNames.secondTileChatClosed,
+              isChatOpen && tileViewClassNames.secondTileChatOpen,
+              !isChatOpen && tileViewClassNames.secondTileChatClosed,
             ])}
           >
             {/* Camera & Screen Share */}

packages/shadcn/registry.json

@@ -326,6 +326,31 @@
       ],
       "dependencies": ["@livekit/components-react@^2.0.0", "livekit-client@^2.0.0", "motion"],
       "categories": ["agents", "blocks"]
+    },
+    {
+      "name": "all",
+      "type": "registry:item",
+      "title": "All",
+      "description": "Installs every component in the @agents-ui registry.",
+      "files": [],
+      "registryDependencies": [
+        "@agents-ui/agent-disconnect-button",
+        "@agents-ui/agent-track-toggle",
+        "@agents-ui/agent-track-control",
+        "@agents-ui/agent-control-bar",
+        "@agents-ui/agent-audio-visualizer-bar",
+        "@agents-ui/agent-audio-visualizer-radial",
+        "@agents-ui/agent-audio-visualizer-grid",
+        "@agents-ui/agent-audio-visualizer-wave",
+        "@agents-ui/agent-audio-visualizer-aura",
+        "@agents-ui/agent-session-provider",
+        "@agents-ui/start-audio-button",
+        "@agents-ui/agent-chat-indicator",
+        "@agents-ui/agent-chat-transcript",
+        "@agents-ui/react-shader-toy",
+        "@agents-ui/nextjs-api-token-route",
+        "@agents-ui/agent-session-view-01"
+      ]
     }
   ]
 }