feat: LiveKit OSS Shadcn Components 2

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

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import {
+  AgentSessionProvider,
+  useMicrophone,
+} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentAudioVisualizerGrid, AgentAudioVisualizerGridProps } from '@agents-ui';
+
+export default {
+  component: AgentAudioVisualizerGrid,
+  decorators: [AgentSessionProvider],
+  render: (args: AgentAudioVisualizerGridProps) => {
+    const audioTrack = useMicrophone();
+
+    return <AgentAudioVisualizerGrid {...args} audioTrack={audioTrack} />;
+  },
+  args: {
+    default: 'lg',
+    state: 'connecting',
+    radius: 5,
+    interval: 100,
+    rowCount: 10,
+    columnCount: 10,
+  },
+  argTypes: {
+    size: {
+      options: ['icon', 'sm', 'md', 'lg', 'xl'],
+      control: { type: 'radio' },
+    },
+    state: {
+      options: [
+        'idle',
+        'disconnected',
+        'pre-connect-buffering',
+        'connecting',
+        'initializing',
+        'listening',
+        'thinking',
+        'speaking',
+        'failed',
+      ],
+      control: { type: 'radio' },
+    },
+    radius: {
+      control: { type: 'range', min: 1, max: 50, step: 1 },
+    },
+    interval: {
+      control: { type: 'range', min: 1, max: 1000, step: 1 },
+    },
+    rowCount: {
+      control: { type: 'range', min: 1, max: 40, step: 1 },
+    },
+    columnCount: {
+      control: { type: 'range', min: 1, max: 40, step: 1 },
+    },
+    className: { control: { type: 'text' } },
+  },
+  parameters: {
+    layout: 'centered',
+    actions: {
+      handles: [],
+    },
+  },
+};
+
+export const Demo1: StoryObj<AgentAudioVisualizerGridProps> = {
+  args: {
+    className:
+      'gap-4 [&_>_*]:size-1 [&_>_*]:rounded-full [&_>_*]:bg-foreground/10 [&_>_[data-lk-highlighted=true]]:bg-foreground [&_>_[data-lk-highlighted=true]]:scale-125 [&_>_[data-lk-highlighted=true]]:shadow-[0px_0px_10px_2px_rgba(255,255,255,0.4)]',
+  },
+};
+
+export const Demo2: StoryObj<AgentAudioVisualizerGridProps> = {
+  args: {
+    className:
+      'gap-2 [&_>_*]:w-4 [&_>_*]:h-1 [&_>_*]:bg-foreground/10 [&_>_[data-lk-highlighted=true]]:bg-[#F9B11F] [&_>_[data-lk-highlighted=true]]:shadow-[0px_0px_14.8px_2px_#F9B11F]',
+  },
+};
+
+export const Demo3: StoryObj<AgentAudioVisualizerGridProps> = {
+  args: {
+    className:
+      'gap-4 [&_>_*]:size-2 [&_>_*]:rounded-full [&_>_*]:bg-foreground/10 [&_>_[data-lk-highlighted=true]]:bg-[#1F8CF9] [&_>_[data-lk-highlighted=true]]:shadow-[0px_0px_14.8px_2px_#1F8CF9]',
+    transformer: (index: number, rowCount: number, columnCount: number) => {
+      const rowMidPoint = Math.floor(rowCount / 2);
+      const distanceFromCenter = Math.sqrt(
+        Math.pow(rowMidPoint - (index % columnCount), 2) +
+          Math.pow(rowMidPoint - Math.floor(index / columnCount), 2),
+      );
+
+      return {
+        opacity: 1 - distanceFromCenter / columnCount,
+        transform: `scale(${1 - (distanceFromCenter / (columnCount * 2)) * 1.75})`,
+      };
+    },
+  },
+};
+
+export const Demo4: StoryObj<AgentAudioVisualizerGridProps> = {
+  args: {
+    className:
+      'gap-x-2.5 gap-y-1 [&_>_*]:w-3 [&_>_*]:h-px [&_>_*]:my-2 [&_>_*]:rotate-45 [&_>_*]:bg-foreground/10 [&_>_*]:rotate-45 [&_>_*]:scale-100 [&_>_[data-lk-highlighted=true]]:bg-[#FFB6C1] [&_>_[data-lk-highlighted=true]]:shadow-[0px_0px_8px_2px_rgba(255,182,193,0.4)] [&_>_[data-lk-highlighted=true]]:rotate-[405deg] [&_>_[data-lk-highlighted=true]]:scale-200',
+  },
+};

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import {
+  AgentSessionProvider,
+  useMicrophone,
+} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentAudioVisualizerRadial, AgentAudioVisualizerRadialProps } from '@agents-ui';
+
+export default {
+  component: AgentAudioVisualizerRadial,
+  decorators: [AgentSessionProvider],
+  render: (args: AgentAudioVisualizerRadialProps) => {
+    const audioTrack = useMicrophone();
+
+    return <AgentAudioVisualizerRadial {...args} audioTrack={audioTrack} />;
+  },
+  args: {
+    size: 'lg',
+    state: 'connecting',
+    radius: undefined,
+  },
+  argTypes: {
+    size: {
+      options: ['icon', 'sm', 'md', 'lg', 'xl'],
+      control: { type: 'radio' },
+    },
+    state: {
+      options: [
+        'idle',
+        'disconnected',
+        'pre-connect-buffering',
+        'connecting',
+        'initializing',
+        'listening',
+        'thinking',
+        'speaking',
+        'failed',
+      ],
+      control: { type: 'radio' },
+    },
+    barCount: {
+      control: { type: 'range', min: 4, max: 64, step: 4 },
+    },
+    radius: {
+      control: { type: 'range', min: 1, max: 500, step: 1 },
+    },
+    className: { control: { type: 'text' } },
+  },
+  parameters: {
+    layout: 'centered',
+    actions: {
+      handles: [],
+    },
+  },
+};
+
+export const Default: StoryObj<AgentAudioVisualizerRadialProps> = {
+  args: {},
+};

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

@@ -18,7 +18,7 @@ import {
 import { useAgentAudioVisualizerBarAnimator } from '@/hooks/agents-ui/use-agent-audio-visualizer-bar';
 import { cn } from '@/lib/utils';
 
-export function cloneSingleChild(
+function cloneSingleChild(
   children: ReactNode | ReactNode[],
   props?: Record<string, unknown>,
   key?: unknown,

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

@@ -0,0 +1,216 @@
+import React, {
+  type ReactNode,
+  type CSSProperties,
+  memo,
+  useMemo,
+  Children,
+  cloneElement,
+  isValidElement,
+} from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { LocalAudioTrack, RemoteAudioTrack } from 'livekit-client';
+import {
+  type AgentState,
+  type TrackReferenceOrPlaceholder,
+  useMultibandTrackVolume,
+} from '@livekit/components-react';
+import { cn } from '@/lib/utils';
+import {
+  type Coordinate,
+  useAgentAudioVisualizerGridAnimator,
+} from '@/hooks/agents-ui/use-agent-audio-visualizer-grid';
+
+function cloneSingleChild(
+  children: ReactNode | ReactNode[],
+  props?: Record<string, unknown>,
+  key?: unknown,
+) {
+  return Children.map(children, (child) => {
+    // Checking isValidElement is the safe way and avoids a typescript error too.
+    if (isValidElement(child) && Children.only(children)) {
+      const childProps = child.props as Record<string, unknown>;
+      if (childProps.className) {
+        // make sure we retain classnames of both passed props and child
+        props ??= {};
+        props.className = cn(childProps.className as string, props.className as string);
+        props.style = {
+          ...(childProps.style as CSSProperties),
+          ...(props.style as CSSProperties),
+        };
+      }
+      return cloneElement(child, { ...props, key: key ? String(key) : undefined });
+    }
+    return child;
+  });
+}
+
+export const AgentAudioVisualizerGridVariants = cva(
+  [
+    'grid',
+    '[&_>_*]:size-1 [&_>_*]:rounded-full',
+    '[&_>_*]:bg-foreground/10 [&_>_[data-lk-highlighted=true]]:bg-foreground [&_>_[data-lk-highlighted=true]]:scale-125 [&_>_[data-lk-highlighted=true]]:shadow-[0px_0px_10px_2px_rgba(255,255,255,0.4)]',
+  ],
+  {
+    variants: {
+      size: {
+        icon: ['gap-[2px] [&_>_*]:size-[4px]'],
+        sm: ['gap-[4px] [&_>_*]:size-[4px]'],
+        md: ['gap-[8px] [&_>_*]:size-[8px]'],
+        lg: ['gap-[8px] [&_>_*]:size-[8px]'],
+        xl: ['gap-[8px] [&_>_*]:size-[8px]'],
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+export interface GridOptions {
+  radius?: number;
+  interval?: number;
+  rowCount?: number;
+  columnCount?: number;
+  transformer?: (index: number, rowCount: number, columnCount: number) => CSSProperties;
+  className?: string;
+  children?: ReactNode;
+}
+
+const sizeDefaults = {
+  icon: 3,
+  sm: 5,
+  md: 5,
+  lg: 5,
+  xl: 5,
+};
+
+function useGrid(
+  size: VariantProps<typeof AgentAudioVisualizerGridVariants>['size'] = 'md',
+  columnCount = sizeDefaults[size as keyof typeof sizeDefaults],
+  rowCount = sizeDefaults[size as keyof typeof sizeDefaults],
+) {
+  return useMemo(() => {
+    const _columnCount = columnCount;
+    const _rowCount = rowCount ?? columnCount;
+    const items = new Array(_columnCount * _rowCount).fill(0).map((_, idx) => idx);
+
+    return { columnCount: _columnCount, rowCount: _rowCount, items };
+  }, [columnCount, rowCount]);
+}
+
+interface GridCellProps {
+  index: number;
+  state: AgentState;
+  interval: number;
+  transformer?: (index: number, rowCount: number, columnCount: number) => CSSProperties;
+  rowCount: number;
+  columnCount: number;
+  volumeBands: number[];
+  highlightedCoordinate: Coordinate;
+  children: ReactNode;
+}
+
+const GridCell = memo(function GridCell({
+  index,
+  state,
+  interval,
+  transformer,
+  rowCount,
+  columnCount,
+  volumeBands,
+  highlightedCoordinate,
+  children,
+}: GridCellProps) {
+  if (state === 'speaking') {
+    const y = Math.floor(index / columnCount);
+    const rowMidPoint = Math.floor(rowCount / 2);
+    const volumeChunks = 1 / (rowMidPoint + 1);
+    const distanceToMid = Math.abs(rowMidPoint - y);
+    const threshold = distanceToMid * volumeChunks;
+    const isHighlighted = volumeBands[index % columnCount] >= threshold;
+
+    return cloneSingleChild(children, {
+      'data-lk-index': index,
+      'data-lk-highlighted': isHighlighted,
+    });
+  }
+
+  let transformerStyle: CSSProperties | undefined;
+  if (transformer) {
+    transformerStyle = transformer(index, rowCount, columnCount);
+  }
+
+  const isHighlighted =
+    highlightedCoordinate.x === index % columnCount &&
+    highlightedCoordinate.y === Math.floor(index / columnCount);
+
+  const transitionDurationInSeconds = interval / (isHighlighted ? 1000 : 100);
+
+  return cloneSingleChild(children, {
+    'data-lk-index': index,
+    'data-lk-highlighted': isHighlighted,
+    style: {
+      transitionProperty: 'all',
+      transitionDuration: `${transitionDurationInSeconds}s`,
+      transitionTimingFunction: 'ease-out',
+      ...transformerStyle,
+    },
+  });
+});
+
+export type AgentAudioVisualizerGridProps = GridOptions & {
+  state: AgentState;
+  audioTrack?: LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder;
+  className?: string;
+  children?: ReactNode;
+} & VariantProps<typeof AgentAudioVisualizerGridVariants>;
+
+export function AgentAudioVisualizerGrid({
+  size = 'md',
+  state,
+  radius,
+  rowCount: _rowCount = 5,
+  columnCount: _columnCount = 5,
+  transformer,
+  interval = 100,
+  className,
+  children,
+  audioTrack,
+}: AgentAudioVisualizerGridProps) {
+  const { columnCount, rowCount, items } = useGrid(size, _columnCount, _rowCount);
+  const highlightedCoordinate = useAgentAudioVisualizerGridAnimator(
+    state,
+    rowCount,
+    columnCount,
+    interval,
+    radius,
+  );
+  const volumeBands = useMultibandTrackVolume(audioTrack, {
+    bands: columnCount,
+    loPass: 100,
+    hiPass: 200,
+  });
+
+  return (
+    <div
+      className={cn(AgentAudioVisualizerGridVariants({ size }), className)}
+      style={{ gridTemplateColumns: `repeat(${columnCount}, 1fr)` }}
+    >
+      {items.map((idx) => (
+        <GridCell
+          key={idx}
+          index={idx}
+          state={state}
+          interval={interval}
+          transformer={transformer}
+          rowCount={rowCount}
+          columnCount={columnCount}
+          volumeBands={volumeBands}
+          highlightedCoordinate={highlightedCoordinate}
+        >
+          {children ?? <div />}
+        </GridCell>
+      ))}
+    </div>
+  );
+}