add AgentDisconnectButton

Author: thomasyuill-livekit

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',
+  },
+};

packages/shadcn/components/agents-ui/agent-disconnect-button.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { Button, buttonVariants } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { useSessionContext } from '@livekit/components-react';
+import { type VariantProps } from 'class-variance-authority';
+import { PhoneOffIcon } from 'lucide-react';
+
+export interface AgentDisconnectButtonProps
+  extends React.ComponentProps<'button'>,
+    VariantProps<typeof buttonVariants> {
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export function AgentDisconnectButton({
+  icon,
+  size = 'default',
+  children,
+  onClick,
+  ...props
+}: AgentDisconnectButtonProps) {
+  const { end } = useSessionContext();
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    end();
+  };
+
+  return (
+    <Button variant="destructive" size={size} onClick={handleClick} {...props}>
+      {icon ?? <PhoneOffIcon />}
+      {children ?? <span className={cn(size?.includes('icon') && 'sr-only')}>END CALL</span>}
+    </Button>
+  );
+}

packages/shadcn/index.ts

@@ -1,3 +1,4 @@
 export * from './components/agents-ui/audio-visualizer-bar/audio-visualizer-bar';
 export * from './components/agents-ui/agent-track-toggle';
 export * from './components/agents-ui/agent-track-control';
+export * from './components/agents-ui/agent-disconnect-button';