feat: LiveKit OSS Shadcn initial components

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

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import {
+  AgentSessionProvider,
+  useMicrophone,
+} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentControlBar, AgentControlBarProps } from '@agents-ui';
+
+export default {
+  component: AgentControlBar,
+  decorators: [AgentSessionProvider],
+  render: (args: AgentControlBarProps) => {
+    useMicrophone();
+    return <AgentControlBar {...args} className="min-w-lg  mx-auto" />;
+  },
+  args: {
+    isConnected: true,
+    controls: {
+      microphone: true,
+      camera: true,
+      screenShare: true,
+      chat: true,
+      leave: true,
+    },
+    className: 'w-full',
+  },
+  argTypes: {
+    controls: { control: { type: 'object' } },
+    isConnected: { control: { type: 'boolean' } },
+    isChatOpen: { control: { type: 'boolean' } },
+  },
+  parameters: {
+    layout: 'centered',
+    actions: {
+      handles: [],
+    },
+  },
+};
+
+export const Default: StoryObj<AgentControlBarProps> = {
+  args: {},
+};
+
+export const Outline: StoryObj<AgentControlBarProps> = {
+  args: {
+    variant: 'outline',
+  },
+};
+
+export const Livekit: StoryObj<AgentControlBarProps> = {
+  args: {
+    variant: 'livekit',
+  },
+};
+
+export const NoControls: StoryObj<AgentControlBarProps> = {
+  args: {
+    controls: {
+      microphone: false,
+      camera: false,
+      screenShare: false,
+      chat: false,
+      leave: false,
+    },
+  },
+  render: (args: AgentControlBarProps) => {
+    return (
+      <>
+        <p className="text-center">
+          This control bar does not render
+          <br />
+          because <code className="text-muted-foreground text-sm">visibleControls</code> contains
+          only false values.
+        </p>
+        <AgentControlBar {...args} className="min-w-lg  mx-auto" />
+      </>
+    );
+  },
+};

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentDisconnectButton, type AgentDisconnectButtonProps } from '@agents-ui';
+
+export default {
+  component: AgentDisconnectButton,
+  decorators: [AgentSessionProvider],
+  render: (args: AgentDisconnectButtonProps) => (
+    <AgentDisconnectButton {...args}></AgentDisconnectButton>
+  ),
+  argTypes: {
+    size: {
+      options: ['default', 'sm', 'lg', 'icon', 'icon-sm', 'icon-lg'],
+      control: { type: 'select' },
+    },
+    onClick: { action: 'onClick' },
+    className: { control: { type: 'text' } },
+  },
+  parameters: {
+    layout: 'centered',
+    actions: {
+      handles: [],
+    },
+  },
+};
+
+export const Default: StoryObj<AgentDisconnectButtonProps> = {
+  args: {},
+};
+
+export const Icon: StoryObj<AgentDisconnectButtonProps> = {
+  args: {
+    size: 'icon',
+  },
+};

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

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import {
+  AgentSessionProvider,
+  useMicrophone,
+} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentTrackControl, type AgentTrackControlProps } from '@agents-ui';
+import { Track } from 'livekit-client';
+
+export default {
+  component: AgentTrackControl,
+  decorators: [AgentSessionProvider],
+  render: (args: AgentTrackControlProps) => {
+    const [isPressed, setIsPressed] = React.useState(
+      args.source === Track.Source.Microphone ? true : false,
+    );
+
+    const microphoneTrack = useMicrophone();
+
+    return (
+      <AgentTrackControl
+        {...args}
+        pressed={isPressed}
+        onPressedChange={(pressed: boolean) => setIsPressed(pressed)}
+        audioTrack={args.source === Track.Source.Microphone ? microphoneTrack : undefined}
+      />
+    );
+  },
+  argTypes: {
+    size: {
+      options: ['default', 'sm', 'lg'],
+      control: { type: 'radio' },
+    },
+    pending: { control: { type: 'boolean' } },
+    className: { control: { type: 'text' } },
+  },
+  parameters: {
+    layout: 'centered',
+    actions: {
+      handles: [],
+    },
+  },
+};
+
+export const Default: StoryObj<AgentTrackControlProps> = {
+  render: (args: AgentTrackControlProps) => {
+    const [isCameraPressed, setIsCameraPressed] = React.useState(true);
+    const [isMicrophonePressed, setIsMicrophonePressed] = React.useState(false);
+    const [isScreenSharePressed, setIsScreenSharePressed] = React.useState(true);
+
+    const microphoneTrack = useMicrophone();
+
+    return (
+      <div className="flex gap-2">
+        <AgentTrackControl
+          {...args}
+          kind="audioinput"
+          source={Track.Source.Microphone}
+          pressed={isMicrophonePressed}
+          audioTrack={microphoneTrack}
+          onPressedChange={(pressed: boolean) => setIsMicrophonePressed(pressed)}
+        />
+        <AgentTrackControl
+          {...args}
+          kind="videoinput"
+          source={Track.Source.Camera}
+          pressed={isCameraPressed}
+          onPressedChange={(pressed: boolean) => setIsCameraPressed(pressed)}
+        />
+        <AgentTrackControl
+          {...args}
+          source={Track.Source.ScreenShare}
+          pressed={isScreenSharePressed}
+          onPressedChange={(pressed: boolean) => setIsScreenSharePressed(pressed)}
+        />
+      </div>
+    );
+  },
+  args: {},
+};
+
+export const Outlined: StoryObj<AgentTrackControlProps> = {
+  args: {
+    variant: 'outline',
+  },
+  render: (args: AgentTrackControlProps) => {
+    const [isCameraPressed, setIsCameraPressed] = React.useState(true);
+    const [isMicrophonePressed, setIsMicrophonePressed] = React.useState(false);
+    const [isScreenSharePressed, setIsScreenSharePressed] = React.useState(true);
+
+    const microphoneTrack = useMicrophone();
+
+    return (
+      <div className="flex gap-2">
+        <AgentTrackControl
+          {...args}
+          kind="audioinput"
+          source={Track.Source.Microphone}
+          pressed={isMicrophonePressed}
+          audioTrack={args.source === Track.Source.Microphone ? microphoneTrack : undefined}
+          onPressedChange={(pressed: boolean) => setIsMicrophonePressed(pressed)}
+        />
+        <AgentTrackControl
+          {...args}
+          kind="videoinput"
+          source={Track.Source.Camera}
+          pressed={isCameraPressed}
+          onPressedChange={(pressed: boolean) => setIsCameraPressed(pressed)}
+        />
+        <AgentTrackControl
+          {...args}
+          source={Track.Source.ScreenShare}
+          pressed={isScreenSharePressed}
+          onPressedChange={(pressed: boolean) => setIsScreenSharePressed(pressed)}
+        />
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentTrackToggle, AgentTrackToggleProps } from '@agents-ui';
+import { Track } from 'livekit-client';
+
+export default {
+  component: AgentTrackToggle,
+  decorators: [AgentSessionProvider],
+  render: (args: AgentTrackToggleProps) => {
+    const [isPressed, setIsPressed] = React.useState(
+      args.source === Track.Source.Microphone ? true : false,
+    );
+
+    return (
+      <AgentTrackToggle
+        {...args}
+        pressed={isPressed}
+        onPressedChange={(pressed: boolean) => setIsPressed(pressed)}
+      />
+    );
+  },
+  args: {
+    size: 'default',
+  },
+  argTypes: {
+    size: {
+      options: ['default', 'sm', 'lg'],
+      control: { type: 'radio' },
+    },
+    pending: { control: { type: 'boolean' } },
+    className: { control: { type: 'text' } },
+  },
+  parameters: {
+    layout: 'centered',
+    actions: {
+      handles: [],
+    },
+  },
+};
+
+export const Default: StoryObj<AgentTrackToggleProps> = {
+  render: (args: AgentTrackToggleProps) => {
+    const [isCameraPressed, setIsCameraPressed] = React.useState(true);
+    const [isMicrophonePressed, setIsMicrophonePressed] = React.useState(false);
+    const [isScreenSharePressed, setIsScreenSharePressed] = React.useState(true);
+
+    return (
+      <div className="flex gap-2">
+        <AgentTrackToggle
+          {...args}
+          source={Track.Source.Microphone}
+          pressed={isMicrophonePressed}
+          onPressedChange={(pressed: boolean) => setIsMicrophonePressed(pressed)}
+        />
+        <AgentTrackToggle
+          {...args}
+          source={Track.Source.Camera}
+          pressed={isCameraPressed}
+          onPressedChange={(pressed: boolean) => setIsCameraPressed(pressed)}
+        />
+        <AgentTrackToggle
+          {...args}
+          source={Track.Source.ScreenShare}
+          pressed={isScreenSharePressed}
+          onPressedChange={(pressed: boolean) => setIsScreenSharePressed(pressed)}
+        />
+      </div>
+    );
+  },
+  args: {},
+};
+
+export const Outlined: StoryObj<AgentTrackToggleProps> = {
+  args: {
+    variant: 'outline',
+  },
+  render: (args: AgentTrackToggleProps) => {
+    const [isCameraPressed, setIsCameraPressed] = React.useState(true);
+    const [isMicrophonePressed, setIsMicrophonePressed] = React.useState(false);
+    const [isScreenSharePressed, setIsScreenSharePressed] = React.useState(true);
+
+    return (
+      <div className="flex gap-2">
+        <AgentTrackToggle
+          {...args}
+          source={Track.Source.Microphone}
+          pressed={isMicrophonePressed}
+          onPressedChange={(pressed: boolean) => setIsMicrophonePressed(pressed)}
+        />
+        <AgentTrackToggle
+          {...args}
+          source={Track.Source.Camera}
+          pressed={isCameraPressed}
+          onPressedChange={(pressed: boolean) => setIsCameraPressed(pressed)}
+        />
+        <AgentTrackToggle
+          {...args}
+          source={Track.Source.ScreenShare}
+          pressed={isScreenSharePressed}
+          onPressedChange={(pressed: boolean) => setIsScreenSharePressed(pressed)}
+        />
+      </div>
+    );
+  },
+};