### Example Project Setup

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/expandable-chat.mdx

Command to create a new Next.js project pre-configured with shadcn-chat and Vercel AI SDK integration.

```APIDOC
## Example Project Setup

To quickly create a chatbot with Vercel AI SDK integrated, use the following command:

```bash
npx create-next-app --example https://github.com/jakobhoeg/shadcn-chat/tree/master/examples/shadcn-chat-example-vercel-ai nextjs-shadcn-chat-vercel-ai
```

More details can be found [here](https://github.com/jakobhoeg/shadcn-chat/tree/master/examples/shadcn-chat-example-vercel-ai).
```

--------------------------------

### Installation

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/chat-input.mdx

Instructions on how to install the ChatInput component using the shadcn-chat CLI.

```APIDOC
## Installation

### CLI

```bash
npx shadcn-chat-cli@latest add chat-input
```
```

--------------------------------

### Bootstrap Next.js Example with npm

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/examples/shadcn-chat-example-vercel-ai/README.md

Use this command to bootstrap the shadcn-chat Next.js example using npm.

```bash
npx create-next-app --example https://github.com/jakobhoeg/shadcn-chat/tree/master/examples/shadcn-chat-example-vercel-ai nextjs-shadcn-chat-vercel-ai
```

--------------------------------

### Usage Examples

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/chat-input.mdx

Examples demonstrating how to use the ChatInput component, including with buttons.

```APIDOC
## Examples

### With buttons

This example shows the ChatInput component integrated with buttons.
```

--------------------------------

### Bootstrap Next.js Example with pnpm

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/examples/shadcn-chat-example-vercel-ai/README.md

Use this command to bootstrap the shadcn-chat Next.js example using pnpm.

```bash
pnpm create-next-app --example https://github.com/jakobhoeg/shadcn-chat/tree/master/examples/shadcn-chat-example-vercel-ai nextjs-shadcn-chat-vercel-ai
```

--------------------------------

### Start Development Server

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/CONTRIBUTING.md

Run this command from the root folder to start the development server and test changes locally.

```bash
npm run dev
```

--------------------------------

### Bootstrap Next.js Example with yarn

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/examples/shadcn-chat-example-vercel-ai/README.md

Use this command to bootstrap the shadcn-chat Next.js example using yarn.

```bash
yarn create-next-app --example https://github.com/jakobhoeg/shadcn-chat/tree/master/examples/shadcn-chat-example-vercel-ai nextjs-shadcn-chat-vercel-ai
```

--------------------------------

### Install Individual shadcn-chat Components

Source: https://context7.com/jakobhoeg/shadcn-chat/llms.txt

View available components and install specific ones as needed using the CLI.

```bash
npx shadcn-chat-cli@latest add
```

```bash
npx shadcn-chat-cli@latest add chat-bubble
```

```bash
npx shadcn-chat-cli@latest add chat-input
```

```bash
npx shadcn-chat-cli@latest add chat-message-list
```

```bash
npx shadcn-chat-cli@latest add expandable-chat
```

--------------------------------

### Usage Examples

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/chat-bubble.mdx

Examples demonstrating different layouts and styles for the ChatBubble component.

```APIDOC
## Examples

### Default layout w/ actions and altered styles

```typescript
// Import ChatBubblePreview and ChatBubblePreviewCode from your components
// <ComponentPreview component={<ChatBubblePreview />} code={ChatBubblePreviewCode} />
```

### AI layout w/ actions

```typescript
// Import ChatBubbleAILayoutExample and ChatBubbleAILayoutExampleCode from your components
// <ComponentPreview component={<ChatBubbleAILayoutExample />} code={ChatBubbleAILayoutExampleCode} />
```
```

--------------------------------

### Install All Chat Components

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/packages/cli/readme.md

Use this command to add all available chat components to your project at once. Ensure shadcn-ui is installed first.

```bash
npx shadcn-chat-cli add --all
```

--------------------------------

### Installation using CLI

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/expandable-chat.mdx

Command to install the ExpandableChat component using the shadcn-chat CLI.

```APIDOC
## Installation

### CLI

```bash
npx shadcn-chat-cli@latest add expandable-chat
```
```

--------------------------------

### Installation

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/chat-bubble.mdx

Instructions on how to add the ChatBubble component to your project using the CLI.

```APIDOC
## Installation

### CLI
```bash
npx shadcn-chat-cli@latest add chat-bubble
```
```

--------------------------------

### Install Individual Chat Component

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/packages/cli/readme.md

Use this command to install a specific chat component. Replace `[component]` with the desired component name.

```bash
npx shadcn-chat-cli add [component]
```

--------------------------------

### Install Chat Input Component

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/chat-input.mdx

Use this command to add the chat-input component to your project via the shadcn-chat CLI. Ensure you have the CLI installed.

```bash
npx shadcn-chat-cli@latest add chat-input
```

--------------------------------

### Semantic Commit Message Example

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/CONTRIBUTING.md

An example illustrating the structure of a semantic commit message, including type and summary.

```markdown
feat: add voice input support
^--^  ^------------^
|     |
|     +-> Summary in present tense.
|
+-------> Type: feat, fix, refactor, style, chore, docs or test.
```

--------------------------------

### Chat Input with Buttons Example

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/chat-input.mdx

This example demonstrates how to use the ChatInput component with additional buttons. It requires importing the necessary preview component and code.

```tsx
import { ChatInputExampleCode } from "../../components/preview/chat-input-example";
import ChatInputExample from "../../components/preview/chat-input-example";

<ComponentPreview
  component={<ChatInputExample />}
  code={ChatInputExampleCode}
/>
```

--------------------------------

### Example Usage in Next.js

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/expandable-chat.mdx

Example code demonstrating how to integrate and use the ExpandableChat component within a Next.js application.

```APIDOC
## Example Usage

### chat-support.tsx

```tsx filename="chat-support.tsx" copy
import { Send } from "lucide-react";
import {
  ChatBubble,
  ChatBubbleAvatar,
  ChatBubbleMessage,
} from "@/components/ui/chat/chat-bubble";
import { ChatInput } from "@/components/ui/chat/chat-input";
import {
  ExpandableChat,
  ExpandableChatHeader,
  ExpandableChatBody,
  ExpandableChatFooter,
} from "@/components/ui/chat/expandable-chat";
import { ChatMessageList } from "@/components/ui/chat/chat-message-list";

export default function ChatSupport() {
  return (
    <ExpandableChat size="lg" position="bottom-right">
      <ExpandableChatHeader className="flex-col text-center justify-center">
        <h1 className="text-xl font-semibold">Chat with our AI ✨</h1>
        <p>Ask any question for our AI to answer</p>
        <div className="flex gap-2 items-center pt-2">
          <Button variant="secondary">New Chat</Button>
          <Button variant="secondary">See FAQ</Button>
        </div>
      </ExpandableChatHeader>
      <ExpandableChatBody>
        <ChatMessageList>
          <ChatBubble>
            <ChatBubbleAvatar />
            <ChatBubbleMessage>{message.content}</ChatBubbleMessage>
          </ChatBubble>
        </ChatMessageList>
      </ExpandableChatBody>
      <ExpandableChatFooter>
        <ChatInput />
        <Button type="submit" size="icon">
          <Send className="size-4" />
        </Button>
      </ExpandableChatFooter>
    </ExpandableChat>
  );
}
```

### layout.tsx (Next.js)

```tsx filename="layou.tsx" copy
<html lang="en">
  <body>
    </main>
      {children}
      <ChatSupport />
    </main>
  </body>
</html>
```
```

--------------------------------

### List available shadcn-chat components

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/get-started.mdx

Execute this command to view a list of all components that can be added to your project. This helps in deciding which individual components to install.

```bash
npx shadcn-chat-cli@latest add
```

--------------------------------

### Install ChatMessageList via CLI

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/chat-message-list.mdx

Use this command to add the chat-message-list component to your project.

```bash
npx shadcn-chat-cli@latest add chat-message-list
```

--------------------------------

### ChatBubble AI Layout Example

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/chat-bubble.mdx

Example of the AI layout for the ChatBubble component, including actions. Wrap with ChatMessageList for proper display.

```typescript
import ChatBubbleAILayoutExample from "../../components/preview/chat-bubble-ai-layout-example";
import { ChatBubbleAILayoutExampleCode } from "../../components/preview/chat-bubble-ai-layout-example";

<ComponentPreview
  component={<ChatBubbleAILayoutExample />}
  code={ChatBubbleAILayoutExampleCode}
/>
```

--------------------------------

### Import Chat Components

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/CONTRIBUTING.md

Example of how to import chat components from the shared UI package after rebuilding.

```tsx
import { ChatBubble } from "@shadcn-chat/ui";
```

--------------------------------

### Example Usage of ExpandableChat in chat-support.tsx

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/expandable-chat.mdx

This example demonstrates how to set up the ExpandableChat component with a header, body, and footer, including message display and input.

```tsx
import { Send } from "lucide-react";
import {
  ChatBubble,
  ChatBubbleAvatar,
  ChatBubbleMessage,
} from "@/components/ui/chat/chat-bubble";
import { ChatInput } from "@/components/ui/chat/chat-input";
import {
  ExpandableChat,
  ExpandableChatHeader,
  ExpandableChatBody,
  ExpandableChatFooter,
} from "@/components/ui/chat/expandable-chat";
import { ChatMessageList } from "@/components/ui/chat/chat-message-list";

export default function ChatSupport() {
  return (
    <ExpandableChat size="lg" position="bottom-right">
      <ExpandableChatHeader className="flex-col text-center justify-center">
        <h1 className="text-xl font-semibold">Chat with our AI ✨</h1>
        <p>Ask any question for our AI to answer</p>
        <div className="flex gap-2 items-center pt-2">
          <Button variant="secondary">New Chat</Button>
          <Button variant="secondary">See FAQ</Button>
        </div>
      </ExpandableChatHeader>
      <ExpandableChatBody>
        <ChatMessageList>
          <ChatBubble>
            <ChatBubbleAvatar />
            <ChatBubbleMessage>{message.content}</ChatBubbleMessage>
          </ChatBubble>
        </ChatMessageList>
      </ExpandableChatBody>
      <ExpandableChatFooter>
        <ChatInput />
        <Button type="submit" size="icon">
          <Send className="size-4" />
        </Button>
      </ExpandableChatFooter>
    </ExpandableChat>
  );
}
```

--------------------------------

### Install Chat Bubble Component via CLI

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/chat-bubble.mdx

Use this command to add the chat-bubble component to your project.

```bash
npx shadcn-chat-cli@latest add chat-bubble
```

--------------------------------

### Run CLI in Development Mode

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/CONTRIBUTING.md

Execute the CLI with the `start:dev` script to test local registry changes. This command adds files to a specific directory for testing purposes.

```bash
npm run start:dev add
```

--------------------------------

### Install ExpandableChat via CLI

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/expandable-chat.mdx

Use this command to add the ExpandableChat component to your project using the shadcn-ui CLI.

```bash
npx shadcn-chat-cli@latest add expandable-chat
```

--------------------------------

### ChatBubble Default Layout Example

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/chat-bubble.mdx

Example of the default layout for the ChatBubble component, including actions and altered styles. Wrap with ChatMessageList for proper display.

```typescript
import ComponentPreview from "../../components/component-preview";
import ChatBubblePreview from "../../components/preview/chat-bubble-preview";
import { ChatBubblePreviewCode } from "../../components/preview/chat-bubble-preview";

<ComponentPreview
  component={<ChatBubblePreview />}
  code={ChatBubblePreviewCode}
/>
```

--------------------------------

### ChatInput Component Example

Source: https://context7.com/jakobhoeg/shadcn-chat/llms.txt

Demonstrates a functional chat input with message submission and attachment/microphone buttons. Handles Enter key submission without Shift.

```tsx
import { ChatInput } from "@/components/ui/chat/chat-input";
import { Button } from "@/components/ui/button";
import { Send, Paperclip, Mic } from "lucide-react";
import { useState } from "react";

function ChatInputExample() {
  const [input, setInput] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;
    console.log("Sending message:", input);
    setInput("");
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      handleSubmit(e as unknown as React.FormEvent);
    }
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="relative rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
    >
      <ChatInput
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder="Type your message here..."
        className="rounded-lg bg-background border-0 shadow-none focus-visible:ring-0"
      />
      <div className="flex items-center p-3 pt-0">
        <Button variant="ghost" size="icon" type="button">
          <Paperclip className="size-4" />
          <span className="sr-only">Attach file</span>
        </Button>
        <Button variant="ghost" size="icon" type="button">
          <Mic className="size-4" />
          <span className="sr-only">Use Microphone</span>
        </Button>
        <Button
          disabled={!input.trim()}
          type="submit"
          size="sm"
          className="ml-auto gap-1.5"
        >
          Send Message
          <Send className="size-3.5" />
        </Button>
      </div>
    </form>
  );
}

```

--------------------------------

### ChatMessageList Component Example

Source: https://context7.com/jakobhoeg/shadcn-chat/llms.txt

Displays a list of chat messages with smooth scrolling enabled. Requires messages to be mapped and rendered within ChatBubble components.

```tsx
import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
import {
  ChatBubble,
  ChatBubbleAvatar,
  ChatBubbleMessage,
} from "@/components/ui/chat/chat-bubble";

interface Message {
  id: string;
  role: "user" | "assistant";
  content: string;
}

function MessageListExample() {
  const messages: Message[] = [
    { id: "1", role: "user", content: "What is React?" },
    { id: "2", role: "assistant", content: "React is a JavaScript library for building user interfaces." },
    { id: "3", role: "user", content: "How do I get started?" },
    { id: "4", role: "assistant", content: "You can start by running npx create-react-app my-app" },
  ];

  return (
    <div className="h-[400px]">
      {/* smooth enables smooth scrolling animation */}
      <ChatMessageList smooth>
        {messages.map((message) => (
          <ChatBubble
            key={message.id}
            variant={message.role === "user" ? "sent" : "received"}
          >
            <ChatBubbleAvatar
              fallback={message.role === "user" ? "U" : "AI"}
            />
            <ChatBubbleMessage
              variant={message.role === "user" ? "sent" : "received"}
            >
              {message.content}
            </ChatBubbleMessage>
          </ChatBubble>
        ))}
      </ChatMessageList>
    </div>
  );
}

```

--------------------------------

### Add all shadcn-chat components

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/get-started.mdx

Run this command in your project root to add all available shadcn-chat components. Ensure shadcn is initialized in your project first.

```bash
npx shadcn-chat-cli@latest add --all
```

--------------------------------

### List Available Chat Components

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/packages/cli/readme.md

Run this command to view a list of all chat components that can be added to your project.

```bash
npx shadcn-chat-cli add
```

--------------------------------

### Navigate to Shared UI Package

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/CONTRIBUTING.md

Change directory to the shared UI package to make modifications.

```bash
cd packages/ui
```

--------------------------------

### Navigate to CLI Package

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/CONTRIBUTING.md

Change directory to the CLI package before running development commands.

```bash
cd packages/cli
```

--------------------------------

### Add a specific shadcn-chat component

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/get-started.mdx

Use this command to add a single, named component to your project. Replace `<component-name>` with the actual name of the component you wish to add.

```bash
npx shadcn-chat-cli@latest add <component-name>
```

--------------------------------

### Format Code

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/CONTRIBUTING.md

Run the npm script to format code using Prettier, ensuring code quality before committing.

```bash
npm run format
```

--------------------------------

### Generate Component Registry

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/CONTRIBUTING.md

Regenerate the component registry metadata after adding or modifying components. Run from the root folder.

```bash
npm run generate-registry
```

--------------------------------

### Rebuild Shared UI Package

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/CONTRIBUTING.md

After making changes to the UI components, rebuild the package to reflect the updates.

```bash
npm run build
```

--------------------------------

### Implement Expandable Chat Widget

Source: https://context7.com/jakobhoeg/shadcn-chat/llms.txt

This component creates a floating chat widget. It requires importing various chat components and managing message state. Add this to your layout for site-wide chat support.

```tsx
import {
  ExpandableChat,
  ExpandableChatHeader,
  ExpandableChatBody,
  ExpandableChatFooter,
} from "@/components/ui/chat/expandable-chat";
import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
import {
  ChatBubble,
  ChatBubbleAvatar,
  ChatBubbleMessage,
} from "@/components/ui/chat/chat-bubble";
import { ChatInput } from "@/components/ui/chat/chat-input";
import { Button } from "@/components/ui/button";
import { Send } from "lucide-react";
import { useState } from "react";

function ChatSupportWidget() {
  const [messages, setMessages] = useState([
    { role: "assistant", content: "Hello! How can I help you today?" }
  ]);
  const [input, setInput] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;

    setMessages([...messages, { role: "user", content: input }]);
    setInput("");

    // Simulate AI response
    setTimeout(() => {
      setMessages(prev => [...prev, {
        role: "assistant",
        content: "Thanks for your message! I'll help you with that."
      }]);
    }, 1000);
  };

  return (
    <ExpandableChat
      size="lg"
      position="bottom-right"
    >
      <ExpandableChatHeader className="flex-col text-center justify-center bg-muted/60">
        <h1 className="text-xl font-semibold">Chat with our AI</h1>
        <p className="text-sm text-muted-foreground">
          Ask any question for our AI to answer
        </p>
        <div className="flex gap-2 items-center pt-2">
          <Button variant="secondary" onClick={() => setMessages([])}>
            New Chat
          </Button>
          <Button variant="secondary">See FAQ</Button>
        </div>
      </ExpandableChatHeader>

      <ExpandableChatBody>
        <ChatMessageList className="bg-muted/25">
          {messages.map((message, index) => (
            <ChatBubble
              key={index}
              variant={message.role === "user" ? "sent" : "received"}
            >
              <ChatBubbleAvatar
                fallback={message.role === "user" ? "U" : "AI"}
              />
              <ChatBubbleMessage
                variant={message.role === "user" ? "sent" : "received"}
              >
                {message.content}
              </ChatBubbleMessage>
            </ChatBubble>
          ))}
        </ChatMessageList>
      </ExpandableChatBody>

      <ExpandableChatFooter className="bg-muted/25">
        <form className="flex relative gap-2" onSubmit={handleSubmit}>
          <ChatInput
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="Type a message..."
            className="min-h-12 bg-background shadow-none"
          />
          <Button
            className="absolute top-1/2 right-2 transform -translate-y-1/2"
            type="submit"
            size="icon"
            disabled={!input.trim()}
          >
            <Send className="size-4" />
          </Button>
        </form>
      </ExpandableChatFooter>
    </ExpandableChat>
  );
}

// Add to your layout.tsx for site-wide chat support
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
        <ChatSupportWidget />
      </body>
    </html>
  );
}
```

--------------------------------

### ChatInput API Reference

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/chat-input.mdx

API reference for the ChatInput component, detailing its available props.

```APIDOC
## ChatInput Component API Reference

### Description
Provides a styled text-area component for chat interfaces.

### Props

#### `value`
- **string** - Required - A string that represents the raw value contained in the control.

#### `onKeyDown`
- **'default' | 'ai'** - Required - Keyboard event listener.

#### `onChange`
- **React.ReactNode** - Optional - Event handler function that fires when the input's value changes.

#### `placeHolder`
- **string** - Optional - Displayed in a dimmed color when the text area value is empty.

#### `className`
- **string** - Optional - Additional classes to apply to the chat bubble.
```

--------------------------------

### Basic Chat Conversation with shadcn-chat

Source: https://context7.com/jakobhoeg/shadcn-chat/llms.txt

Demonstrates a basic chat conversation using ChatBubble, ChatBubbleAvatar, ChatBubbleMessage, and ChatMessageList components. Includes sent and received message variants, and a message with a loading state.

```tsx
import {
  ChatBubble,
  ChatBubbleAvatar,
  ChatBubbleMessage,
  ChatBubbleAction,
  ChatBubbleActionWrapper,
  ChatBubbleTimestamp,
} from "@/components/ui/chat/chat-bubble";
import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
import { CopyIcon, RefreshCcw } from "lucide-react";

// Basic chat conversation
function BasicChat() {
  return (
    <ChatMessageList>
      {/* User sent message */}
      <ChatBubble variant="sent">
        <ChatBubbleAvatar fallback="US" />
        <ChatBubbleMessage variant="sent">
          Hello, how has your day been? I hope you are doing well.
        </ChatBubbleMessage>
      </ChatBubble>

      {/* AI received message */}
      <ChatBubble variant="received">
        <ChatBubbleAvatar fallback="AI" src="/ai-avatar.png" />
        <ChatBubbleMessage variant="received">
          Hi, I am doing well, thank you for asking. How can I help you today?
        </ChatBubbleMessage>
      </ChatBubble>

      {/* Message with loading state */}
      <ChatBubble variant="received">
        <ChatBubbleAvatar fallback="AI" />
        <ChatBubbleMessage isLoading />
      </ChatBubble>
    </ChatMessageList>
  );
}

// Chat bubble with action buttons
function ChatWithActions() {
  const handleCopy = (content: string) => {
    navigator.clipboard.writeText(content);
  };

  return (
    <ChatMessageList>
      <ChatBubble variant="received">
        <ChatBubbleAvatar fallback="AI" />
        <ChatBubbleMessage>
          Here is the code you requested for the authentication flow.
          <div className="flex items-center mt-1.5 gap-1">
            <ChatBubbleAction
              variant="outline"
              className="size-5"
              icon={<CopyIcon className="size-3" />}
              onClick={() => handleCopy("code content")}
            />
            <ChatBubbleAction
              variant="outline"
              className="size-5"
              icon={<RefreshCcw className="size-3" />}
              onClick={() => console.log("Regenerate")}
            />
          </div>
        </ChatBubbleMessage>
      </ChatBubble>
    </ChatMessageList>
  );
}

// AI layout variant for full-width messages
function AILayoutChat() {
  return (
    <ChatMessageList>
      <ChatBubble variant="received" layout="ai">
        <ChatBubbleAvatar fallback="AI" />
        <ChatBubbleMessage layout="ai">
          This message uses the AI layout which spans the full width
          and has a different visual style optimized for AI responses.
        </ChatBubbleMessage>
      </ChatBubble>
    </ChatMessageList>
  );
}

```

--------------------------------

### ExpandableChat Component API Reference

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/expandable-chat.mdx

API reference for the ExpandableChat component and its sub-components, detailing available props, their types, default values, and descriptions.

```APIDOC
## ExpandableChat

### Description
Provides the main container for the chat widget.

### Props

#### Path Parameters
- **position** (string) - Optional - Position of the chat widget on the screen. Allowed values: "bottom-right", "bottom-left". Default: "bottom-right"
- **size** (string) - Optional - Size of the chat window. Allowed values: "sm", "md", "lg", "xl", "full". Default: "md"
- **icon** (React.ReactNode) - Optional - Custom icon for the chat toggle button.
- **className** (string) - Optional - Additional CSS classes for the main container.
- **children** (React.ReactNode) - Optional - Content of the chat window.

## ExpandableChatHeader

### Description
Component for the header section of the chat widget.

### Props

#### Path Parameters
- **className** (string) - Optional - Additional CSS classes for the header section.

## ExpandableChatBody

### Description
Component for the main body content of the chat widget.

### Props

#### Path Parameters
- **className** (string) - Optional - Additional CSS classes for the body section.

## ExpandableChatFooter

### Description
Component for the footer section of the chat widget, typically used for input elements.

### Props

#### Path Parameters
- **className** (string) - Optional - Additional CSS classes for the footer section.
```

--------------------------------

### Integrating ChatSupport into Next.js layout.tsx

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/expandable-chat.mdx

This snippet shows how to include the ChatSupport component within your main layout file in a Next.js application to make it accessible across your site.

```tsx
<html lang="en">
  <body>
    </main>
      {children}
      <ChatSupport />
    </main>
  </body>
</html>
```

--------------------------------

### ChatBubble Component API

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/chat-bubble.mdx

API reference for the ChatBubble component and its sub-components.

```APIDOC
## ChatBubble

### Description
The main component used to display a chat bubble along with its message, avatar and other content.

### Props
#### Path Parameters
- **variant** (string) - Optional - The variant of the chat bubble. Used to display the correct position of the chat bubble and the correct colors. Possible values: 'sent' | 'received'. Default: 'received'.
- **layout** (string) - Optional - The layout of the chat bubble. Used to display various layouts. Possible values: 'default' | 'ai'. Default: 'default'.
- **children** (React.ReactNode) - Optional - The children of the chat bubble.
- **className** (string) - Optional - Additional classes to apply to the chat bubble.

## ChatBubbleMessage

### Description
Represents a single message within the chat bubble.

### Props
#### Path Parameters
- **isLoading** (boolean) - Optional - If the message is loading. Shows loading component `MessageLoading` if true. Default: false.
- **className** (string) - Optional - Additional classes to apply to the message.

## ChatBubbleAvatar

### Description
Represents the avatar displayed with the chat bubble. Note: You can also use the `Avatar` component from `shadcn/ui` instead.

### Props
#### Path Parameters
- **src** (string) - Optional - The source of the avatar.
- **fallback** (string) - Optional - The fallback of the avatar.
- **className** (string) - Optional - Additional classes to apply to the avatar.

## ChatBubbleAction

### Description
Represents an action that can be performed on a chat bubble.

### Props
#### Path Parameters
- **icon** (React.ReactNode) - Optional - The icon of the action.
- **onClick** (() => void) - Optional - The onClick event of the action.
- **className** (string) - Optional - Additional classes to apply to the action.
```

--------------------------------

### API Route for Streaming AI Responses

Source: https://context7.com/jakobhoeg/shadcn-chat/llms.txt

Server-side API route to handle chat requests using the Vercel AI SDK. It configures the OpenAI model and streams text responses back to the client.

```typescript
// API Route: app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai("gpt-4o"),
    messages,
  });

  return result.toDataStreamResponse();
}

```

--------------------------------

### AI Chat UI Component with useChat Hook

Source: https://context7.com/jakobhoeg/shadcn-chat/llms.txt

Client-side component for rendering an AI chat interface. It utilizes the useChat hook for managing messages, input, and streaming responses. Includes handlers for input, submission, and message copying/reloading.

```tsx
"use client";

import { useChat } from "ai/react";
import {
  ChatBubble,
  ChatBubbleAvatar,
  ChatBubbleMessage,
  ChatBubbleAction,
} from "@/components/ui/chat/chat-bubble";
import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
import { ChatInput } from "@/components/ui/chat/chat-input";
import { Button } from "@/components/ui/button";
import { Send, CopyIcon, RefreshCcw } from "lucide-react";
import { useState } from "react";

export default function AIChatPage() {
  const [isGenerating, setIsGenerating] = useState(false);

  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    isLoading,
    reload,
  } = useChat({
    onResponse() {
      setIsGenerating(false);
    },
    onError() {
      setIsGenerating(false);
    },
  });

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsGenerating(true);
    handleSubmit(e);
  };

  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      if (isGenerating || isLoading || !input) return;
      setIsGenerating(true);
      onSubmit(e as unknown as React.FormEvent<HTMLFormElement>);
    }
  };

  const handleCopy = (content: string) => {
    navigator.clipboard.writeText(content);
  };

  return (
    <div className="flex h-screen flex-col max-w-3xl mx-auto">
      <div className="flex-1 overflow-y-auto py-6">
        <ChatMessageList>
          {messages.length === 0 && (
            <div className="text-center text-muted-foreground p-8">
              Start a conversation with the AI assistant
            </div>
          )}

          {messages.map((message, index) => (
            <ChatBubble
              key={message.id}
              variant={message.role === "user" ? "sent" : "received"}
            >
              <ChatBubbleAvatar
                fallback={message.role === "user" ? "U" : "AI"}
              />
              <ChatBubbleMessage
                variant={message.role === "user" ? "sent" : "received"}
              >
                {message.content}

                {/* Show actions on assistant messages */}
                {message.role === "assistant" && index === messages.length - 1 && !isGenerating && (
                  <div className="flex items-center mt-2 gap-1">
                    <ChatBubbleAction
                      variant="outline"
                      className="size-6"
                      icon={<CopyIcon className="size-3" />}
                      onClick={() => handleCopy(message.content)}
                    />
                    <ChatBubbleAction
                      variant="outline"
                      className="size-6"
                      icon={<RefreshCcw className="size-3" />}
                      onClick={() => {
                        setIsGenerating(true);
                        reload();
                      }}
                    />
                  </div>
                )}
              </ChatBubbleMessage>
            </ChatBubble>
          ))}

          {/* Loading indicator */}
          {isGenerating && (
            <ChatBubble variant="received">
              <ChatBubbleAvatar fallback="AI" />
              <ChatBubbleMessage isLoading />
            </ChatBubble>
          )}
        </ChatMessageList>
      </div>

      {/* Input form */}
      <div className="p-4 border-t">
        <form onSubmit={onSubmit} className="flex gap-2">
          <ChatInput
            value={input}
            onChange={handleInputChange}
            onKeyDown={onKeyDown}
            placeholder="Type your message..."
            className="flex-1"
          />
          <Button type="submit" disabled={!input || isLoading}>
            <Send className="size-4" />
          </Button>
        </form>
      </div>
    </div>
  );
}

```

--------------------------------

### ExpandableChatToggle Component API

Source: https://github.com/jakobhoeg/shadcn-chat/blob/master/apps/docs/pages/components/expandable-chat.mdx

The ExpandableChatToggle component is an internal UI element used to control the visibility of a chat window. It accepts various props to customize its appearance and behavior.

```APIDOC
## ExpandableChatToggle Component

### Description
An internal component that acts as a toggle for an expandable chat window. It allows users to open or close the chat interface.

### Props

#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Component Properties

- **icon** (React.ReactNode) - Optional - A custom React node to be used as the icon for the toggle button. If not provided, a default icon may be used.
- **isOpen** (boolean) - Optional - Represents the current state of the chat window. `true` indicates the chat is open, `false` indicates it is closed.
- **toggleChat** (() => void) - Required - A callback function that is invoked when the toggle button is pressed. This function should handle the logic for changing the chat window's open/closed state.
- **className** (string) - Optional - Allows for additional CSS classes to be applied to the toggle button for custom styling.

### Request Example
```json
{
  "icon": "<MyCustomIcon />",
  "isOpen": false,
  "toggleChat": "() => console.log('Toggled chat')",
  "className": "custom-toggle-style"
}
```

### Response
This component does not have a direct API response as it is a client-side UI component. Its behavior is determined by the props passed to it and the `toggleChat` function's implementation.

#### Success Response (N/A)
N/A

#### Response Example
N/A
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.