<div className="absolute bottom-2 right-2 flex items-center gap-1">
          {actions}
          <Button
            type="submit"
            size="icon"
            variant="ghost"
            className="h-8 w-8"
          >
            <IconSend className="h-4 w-4" />
            <span className="sr-only">Send message</span>
          </Button>
        </div>
      </div>
    );
  }
);

PromptInput.displayName = "PromptInput";

export const PromptInputWithActions = ({ className }: { className?: string }) => {
  return (
    <PromptInput
      placeholder="Enter your prompt..."
      actions={
        <>
          <Button
            size="icon"
            variant="ghost"
            className="h-8 w-8 text-muted-foreground"
          >
            <IconPlus className="h-4 w-4" />
            <span className="sr-only">Add attachment</span>
          </Button>
          <Button
            size="icon"
            variant="ghost"
            className="h-8 w-8 text-muted-foreground"
          >
            <IconPaperclip className="h-4 w-4" />
            <span className="sr-only">Attach file</span>
          </Button>
        </>
      }
      className={className}
    />
  );
};

```

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

### Manual Installation and Dependency for Code Block Component

Source: https://www.prompt-kit.com/llms-full

Manually installs the Prompt Kit Code Block component by copying the code and installing the 'shiki' dependency via npm. This method requires manual updates to import paths.

```tsx
import { CodeBlock } from "@/components/prompt-kit/code-block";
```

```bash
npm install shiki
```

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

### Basic Code Block Example

Source: https://www.prompt-kit.com/docs/code-block

A fundamental example of displaying a code snippet using the CodeBlock component. This demonstrates basic functionality without additional configurations.

```javascript
function greet(name) {
  return `Hello, ${name}`;
}

// Call the function
greet("World");
```

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

### Install Prompt Kit Message Component

Source: https://www.prompt-kit.com/docs/message

Command to install the Message component from Prompt Kit using npx. This command fetches the necessary configuration file to add the component to your project.

```bash
npx shadcn add "https://prompt-kit.com/c/message.json"
```

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

### Response Stream with Markdown Example

Source: https://www.prompt-kit.com/llms-full

Illustrates integrating Response Stream with Markdown for rich, animated content. This example utilizes the `useTextStream` hook directly and requires manual handling for fade mode animations.

```tsx
import { ComponentCodePreview } from "@/components/app/component-code-preview"
import { ResponseStreamWithMarkdown } from "./response-stream-with-markdown"

export const UseTextStreamExample = () => (
  <ComponentCodePreview
    component={<ResponseStreamWithMarkdown />}
    filePath="app/docs/response-stream/response-stream-with-markdown.tsx"
    classNameComponentContainer="p-8 justify-start items-start min-h-[400px]"
    disableNotProse
    hasReTrigger
  />
)
```

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

### Bash Installation Command for Chatbot Primitive

Source: https://www.prompt-kit.com/llms-full

A bash command to install the 'chatbot' primitive using shadcn-ui's CLI. This command fetches a JSON configuration for the chatbot, which includes frontend and backend components for AI applications.

```bash
npx shadcn add "https://prompt-kit.com/c/chatbot.json"
```

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

### Loader Sizes Example

Source: https://www.prompt-kit.com/llms-full

Illustrates how to customize the size of loader variants using predefined size options. This allows for adaptable loaders that fit different UI contexts.

```tsx
import React from "react"
import { LoaderSizes } from "@/components/prompt-kit/loader-sizes"

export function LoaderSizesShowcase() {
  return <LoaderSizes />
}
```

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

### Example - Message with Actions

Source: https://www.prompt-kit.com/llms-full

Illustrates how to add interactive actions to a Message component.

```APIDOC
## Example - Message with Actions

You can use `MessageActions` and `MessageAction` to add interactive elements to your messages.

<ComponentCodePreview
  component={<MessageWithActions />}
  filePath="app/docs/message/message-with-actions.tsx"
  classNameComponentContainer="p-8"
/>
```

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

### Import Prompt Input Component in React

Source: https://www.prompt-kit.com/docs/installation

Demonstrates how to import and use the 'PromptInput' component from the prompt-kit library within a React project. This assumes prompt-kit has been successfully installed.

```javascript
import { PromptInput } from "@/components/ui/prompt-input";
```

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

### Manual Installation of Response Stream Component

Source: https://www.prompt-kit.com/llms-full

Manually integrate the ResponseStream component into your project by copying the provided code. Remember to adjust import paths according to your project structure.

```tsx
import { ResponseStream } from "@/components/prompt-kit/response-stream";

export default function Page() {
  return (
    <ResponseStream textStream="Hello, this is a streamed response." />
  );
}
```

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

### JSX Preview Component Example

Source: https://www.prompt-kit.com/llms-full

Demonstrates the basic usage of the JSXPreview component for rendering JSX strings as React components.

```tsx
import ComponentCodePreview from "@/components/app/component-code-preview"
import { generateMetadata } from "../utils/metadata"
import { JSXPreviewBasic } from "./jsx-preview-basic"
import { JSXPreviewStreaming } from "./jsx-preview-streaming"

export const metadata = generateMetadata(
  "JSX Preview",
  "A component for rendering JSX strings as React components, with support for streaming content and automatic tag completion."
)

# JSX Preview (experimental)

A component for rendering JSX strings as React components, with support for streaming content and automatic tag completion.

## Examples

### Basic JSX Preview

The `JSXPreview` component can render JSX strings directly into React components.

<ComponentCodePreview
  component={<JSXPreviewBasic />}
  filePath="app/docs/jsx-preview/jsx-preview-basic.tsx"
  classNameComponentContainer="p-8"
/>

```

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

### Manual Installation of Reasoning Component

Source: https://www.prompt-kit.com/llms-full

Provides the TypeScript code for the Reasoning component, intended for manual integration into your project. Remember to adjust import paths as needed.

```tsx
import React, {
  useState,
  useEffect,
  useRef,
} from "react"
import {
  cn,
  mergeRefs,
  useComposedRefs,
} from "@/lib/utils"

interface ReasoningElementList {
  text: string
  index: number
}

interface ReasoningProps {
  children?: React.ReactNode
  className?: string
  open?: boolean
  onOpenChange?: (open: boolean) => void
  isStreaming?: boolean
}

const Reasoning = React.forwardRef<HTMLDivElement, ReasoningProps>(
  ({ className, children, open, onOpenChange, isStreaming = true }, ref) => {
    const [internalOpen, setInternalOpen] = useState(true)
    const composedRefs = useComposedRefs(ref)

const isControlled = open !== undefined
    const isOpen = isControlled ? open : internalOpen

useEffect(() => {
      if (!isStreaming && !isControlled) {
        setInternalOpen(false)
      }
    }, [isStreaming, isControlled])

const handleOpenChange = React.useCallback(
      (value: boolean) => {
        if (!isControlled) {
          setInternalOpen(value)
        }
        onOpenChange?.(value)
      },
      [isControlled, onOpenChange]
    )

return (
      <div
        ref={composedRefs}
        className={cn(
          "group relative p-3 px-4 transition-all duration-300 ease-out hover:bg-muted/50 data-[state=open]:bg-muted/50",
          className
        )}
        data-state={isOpen ? "open" : "closed"}
      >
        <div className="flex w-full items-center justify-between">
          {children}
        </div>
      </div>
    )
  }
)

Reasoning.displayName = "Reasoning"

export {
  Reasoning,
  type ReasoningProps,
  type ReasoningElementList,
}

```

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

### File Upload Component Implementation

Source: https://www.prompt-kit.com/llms-full

Manual installation of the File Upload component. Requires copying the code and updating import paths.

```tsx
import ComponentCodePreview from "@/components/app/component-code-preview"
import { generateMetadata } from "../utils/metadata"
import { CustomFileUpload } from "./custom-file-upload"

export const metadata = generateMetadata(
  "File Upload",
  "A component for creating drag-and-drop file upload interfaces with support for single or multiple files, custom triggers, and visual feedback during file dragging operations."
)

# File Upload

A component for creating drag-and-drop file upload interfaces with support for single or multiple files, custom triggers, and visual feedback during file dragging operations.

## Examples

### File Upload with Prompt Input

You can combine the file upload component with the [Prompt Input](/docs/prompt-input) component to create a full-featured input component with file upload support. You can try to drop a file to see the visual feedback.

<ComponentCodePreview
  component={<CustomFileUpload />}
  filePath="app/docs/file-upload/custom-file-upload.tsx"
  classNameComponentContainer="p-8"
/>

## Installation

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

</TabsContent>

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Component API

### FileUpload

### FileUploadTrigger

### FileUploadContent

```

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

### Example - Message with Markdown

Source: https://www.prompt-kit.com/llms-full

Shows how to render Markdown content within a Message component.

```APIDOC
## Example - Message with Markdown

The `markdown` prop enables rendering content as [Markdown](/docs/markdown), perfect for rich text formatting in messages.

<ComponentCodePreview
  component={<MessageWithMarkdown />}
  filePath="app/docs/message/message-with-markdown.tsx"
  classNameComponentContainer="p-8"
  disableNotProse
/>
```

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

### Manual Installation of Message Component

Source: https://www.prompt-kit.com/llms-full

Manually install the Message component by copying the provided code into your project and updating import paths. This method offers more control over the integration process.

```tsx
import ComponentCodePreview from "@/components/app/component-code-preview"
import { generateMetadata } from "../utils/metadata"
import { MessageBasic } from "./message-basic"
import { MessageWithActions } from "./message-with-actions"
import { MessageWithMarkdown } from "./message-with-markdown"

export const metadata = generateMetadata(
  "Message",
  "A component for displaying messages in a conversation interface, with support for avatars, markdown content, and interactive actions."
)

# Message

A component for displaying messages in a conversation interface, with support for avatars, markdown content, and interactive actions.

## Examples

### Basic Message

<ComponentCodePreview
  component={<MessageBasic />}
  filePath="app/docs/message/message-basic.tsx"
  classNameComponentContainer="p-8"
/>

### Message with Markdown

The `markdown` prop enables rendering content as [Markdown](/docs/markdown), perfect for rich text formatting in messages.

<ComponentCodePreview
  component={<MessageWithMarkdown />}
  filePath="app/docs/message/message-with-markdown.tsx"
  classNameComponentContainer="p-8"
  disableNotProse
/>

### Message with Actions

You can use `MessageActions` and `MessageAction` to add interactive elements to your messages.

<ComponentCodePreview
  component={<MessageWithActions />}
  filePath="app/docs/message/message-with-actions.tsx"
  classNameComponentContainer="p-8"
/>

## Installation

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

</TabsContent>

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Component API

### Message

```

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

### Prompt Suggestion Component Examples

Source: https://www.prompt-kit.com/llms-full

Demonstrates the basic usage of the Prompt Suggestion component, ideal for AI interfaces. This example shows how to render clickable suggestion buttons that can be used to populate an input field, often in conjunction with a PromptInput component.

```tsx
import { PromptSuggestionBasic } from "@/components/prompt-suggestion-basic"

export default function PromptSuggestionPage() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[400px] p-4">
      <PromptSuggestionBasic />
    </div>
  )
}
```

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

### Install Markdown Dependencies

Source: https://www.prompt-kit.com/llms-full

This bash command installs the necessary npm packages for the Markdown component, including react-markdown for rendering Markdown, remark-gfm for GitHub Flavored Markdown support, and remark-breaks for handling line breaks.

```bash
npm install react-markdown remark-gfm remark-breaks
```

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

### Install Tailwind Typography Plugin

Source: https://www.prompt-kit.com/llms-full

Install the `@tailwindcss/typography` plugin to enhance typographic styling of your Markdown content. This plugin provides utility classes to apply beautiful typographic defaults.

```bash
npm install -D @tailwindcss/typography
```

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

### Prompt Suggestion Component (Manual Install)

Source: https://www.prompt-kit.com/llms-full

Provides the core component code for Prompt Suggestion, intended for manual integration into your project. Ensure to update import paths as needed.

```tsx
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import React, { Children, cloneElement } from "react"

interface PromptSuggestionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode
  variant?: "default" | "destructive" | "outline" | "ghost"
  size?: "default" | "sm" | "lg" | "icon"
  highlight?: string
  className?: string
}

const PromptSuggestion = React.forwardRef<HTMLButtonElement, PromptSuggestionProps>(
  (
    {
      children,
      variant = "outline",
      size = "lg",
      highlight,
      className,
      ...props
    },
    ref
  ) => {
    const highlightedChildren = Children.map(children, (child) => {
      if (React.isValidElement(child) && typeof child.props.children === "string") {
        const text = child.props.children
        const highlightIndex = text.toLowerCase().indexOf(highlight?.toLowerCase() || "")

if (highlightIndex !== -1 && highlight) {
          return cloneElement(child, {
            children: (
              <>
                {text.substring(0, highlightIndex)}
                <span className="font-bold">
                  {text.substring(highlightIndex, highlightIndex + highlight.length)}
                </span>
                {text.substring(highlightIndex + highlight.length)}
              </>
            ),
          })
        }
      }
      return child
    })

return (
      <Button
        ref={ref}
        variant={variant}
        size={highlight ? "sm" : size}
        className={cn(
          "w-full justify-start text-left font-normal",
          {
            "bg-secondary text-secondary-foreground hover:bg-secondary/80": highlight,
          },
          className
        )}
        {...props}
      >
        {highlightedChildren}
      </Button>
    )
  }
)

PromptSuggestion.displayName = "PromptSuggestion"

export { PromptSuggestion }
```

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

### Basic Reasoning Component Example

Source: https://www.prompt-kit.com/llms-full

Demonstrates the fundamental usage of the Reasoning component. It automatically closes when the streaming process concludes, offering a clean way to display AI-generated content.

```tsx
import React, { useState } from "react"
import { Reasoning } from "@/components/ui/reasoning"

export function ReasoningBasic() {
  const [isStreaming, setIsStreaming] = useState(true)

// Simulate streaming data
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsStreaming(false)
    }, 5000) // Streaming ends after 5 seconds

return () => clearTimeout(timer)
  }, [])

return (
    <Reasoning isStreaming={isStreaming}>
      <div className="flex flex-1 justify-between">
        <div className="text-sm font-medium">AI Reasoning</div>
        <div>{isStreaming ? "Streaming..." : "Done"}</div>
      </div>
    </Reasoning>
  )
}

```

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

### Loader With Text Example

Source: https://www.prompt-kit.com/llms-full

Demonstrates loader variants that support displaying custom text alongside the loading indicator. This is useful for providing more context to the user about the ongoing process.

```tsx
import React from "react"
import { LoaderWithText } from "@/components/prompt-kit/loader-with-text"

export function LoaderWithTextShowcase() {
  return <LoaderWithText />
}
```

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

### Basic Markdown Rendering Example

Source: https://www.prompt-kit.com/docs/markdown

Demonstrates the basic rendering of Markdown content, including bold, italics, lists, links, and code blocks. This showcases the component's ability to interpret standard Markdown syntax.

```markdown
# Markdown Example
This is a **bold text** and this is an _italic text_.
## Lists
### Unordered List
  * Item 1
  * Item 2
  * Item 3

### Ordered List
  1. First item
  2. Second item
  3. Third item

## Links and Images
Visit Prompt Kit
## Code
Inline code example.
```
// Code block example
function greet(name) {
  return `Hello, ${name}!`;
}
```
```

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

### Manual Installation of Prompt Kit Component

Source: https://www.prompt-kit.com/llms-full

Provides the TypeScript code for the Prompt Kit source component to be manually added to a project. Ensure to update import paths as needed.

```tsx
import React from "react";

interface SourceProps extends React.HTMLAttributes<HTMLAnchorElement> {
  href?: string;
  children?: React.ReactNode;
}

export function Source({ className, children, href, ...props }: SourceProps) {
  return (
    <a
      href={href}
      target="_blank"
      className="flex items-center gap-2 text-sm font-medium underline underline-offset-4"
      {...props}
    >
      {children}
    </a>
  );
}

```

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

### Integrate Tailwind Typography for Markdown Styling

Source: https://www.prompt-kit.com/docs/markdown

Explains how to use the @tailwindcss/typography plugin to apply beautiful typographic defaults to Markdown content. It includes installation instructions and an example of applying the `prose` class for styling.

```bash
npm install -D @tailwindcss/typography
```

```javascript
<Markdown className="prose dark:prose-invert">{markdownContent}</Markdown>
```

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

### Installation Command for Scroll Button

Source: https://www.prompt-kit.com/docs/scroll-button

Provides the command-line instruction to install the ScrollButton component using npm or a similar package manager. This command fetches the component's package from the specified URL. Ensure you have npx or your package manager's equivalent installed.

```bash
npx shadcn add "https://prompt-kit.com/c/scroll-button.json"
```

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

### Basic Message Component Example

Source: https://www.prompt-kit.com/docs/message

A simple implementation of the Message component, displaying a plain text message. This serves as a foundational example for using the component.

```jsx
// Assuming Message component is imported
<Message>
  Hello! How can I help you today?
</Message>
```

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

### useTextStream Hook API

Source: https://www.prompt-kit.com/llms-full

API documentation for the useTextStream hook, detailing its parameters, types, default values, and descriptions.

```APIDOC
## useTextStream Hook API

### Description

A hook for managing and processing text streams, supporting various configuration options for animation and error handling.

### Parameters

#### `textStream` (string | AsyncIterable<string>)
- **Description**: The text to stream or an async iterable of text chunks.
- **Default**: None

#### `speed` (number)
- **Description**: Speed from 1-100, where 1 is slowest and 100 is fastest. Defaults to 20.
- **Default**: 20

#### `mode` ("typewriter" | "fade")
- **Description**: The animation mode to use. Defaults to "typewriter".
- **Default**: "typewriter"

#### `onComplete` (() => void)
- **Description**: Callback function executed when the text streaming is complete.
- **Default**: None

#### `fadeDuration` (number)
- **Description**: Custom fade duration in milliseconds. Overrides `speed` for fade mode.
- **Default**: None

#### `segmentDelay` (number)
- **Description**: Custom delay between segments in milliseconds. Overrides `speed` for fade mode.
- **Default**: None

#### `characterChunkSize` (number)
- **Description**: Custom characters per frame for typewriter mode. Overrides `speed`.
- **Default**: None

#### `onError` ((error: unknown) => void)
- **Description**: Callback function executed when an error occurs during streaming.
- **Default**: None
```

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

### Prompt Suggestion - Basic Usage

Source: https://www.prompt-kit.com/llms-full

Demonstrates the basic usage of the Prompt Suggestion component for creating clickable prompt suggestions.

```APIDOC
# Prompt Suggestion

A component for implementing interactive prompt suggestions in AI interfaces. The PromptSuggestion component offers two distinct modes: Normal Mode and Highlight Mode.

## Examples

### Basic Usage

Display clickable prompt suggestions that users can select to populate an input field. You can easily use it with the [PromptInput](/docs/prompt-input) component.

```tsx
// Example component rendering PromptSuggestionBasic
// filePath: app/docs/prompt-suggestion/prompt-suggestion-basic.tsx

// Assuming PromptSuggestionBasic is imported and used here
// <PromptSuggestionBasic />
```
```

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

### Steps Component API

Source: https://www.prompt-kit.com/docs/steps

API documentation for the Steps component and its sub-components.

```APIDOC
## Steps Component API

### Steps
Displays a sequence of operations in a collapsible layout.

#### Props
- **defaultOpen** (boolean) - Optional - Whether the Steps starts expanded. Defaults to `true`.
- **className** (string) - Optional - Additional CSS classes.
- **...props** (`React.ComponentProps<Collapsible>`) - Optional - Root collapsible component props.

### StepsTrigger
Trigger content (label) for the collapsible steps.

#### Props
- **children** (React.ReactNode) - Optional - Trigger content (label).
- **leftIcon** (React.ReactNode) - Optional - Optional left icon area; keeps width to avoid layout jump.
- **swapIconOnHover** (boolean) - Optional - Swap leftIcon with chevron on hover. Defaults to `true`.
- **className** (string) - Optional - Additional CSS classes.
- **...props** (`React.ComponentProps<CollapsibleTrigger>`) - Optional - Trigger props forwarded to `CollapsibleTrigger`.

### StepsContent
Content area for each step, optionally including a bar.

#### Props
- **className** (string) - Optional - Additional CSS classes.
- **bar** (React.ReactNode) - Optional - Optional bar element rendered at the left. Defaults to `<StepsBar />`.
- **...props** (`React.ComponentProps<CollapsibleContent>`) - Optional - Collapsible content props.

### StepsBar
Optional bar element rendered at the left of `StepsContent`.

#### Props
- **className** (string) - Optional - Classes for positioning and style. Defaults to `bg-muted h-full w-[2px]`.
- **...props** (`React.HTMLAttributes<HTMLDivElement>`) - Optional - Pass-through div attributes/styles.

### StepsItem
Represents a single row item within the Steps component.

#### Props
- **children** (React.ReactNode) - Optional - Row item content.
- **className** (string) - Optional - Additional CSS classes.
- **...props** (`React.ComponentProps<'div'>`) - Optional - Pass-through div attributes/styles.

### StepsRoot
Root component for the Steps layout.

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

### Reasoning Component with Markdown Support

Source: https://www.prompt-kit.com/llms-full

Illustrates how to use the Reasoning component with Markdown enabled for rich text formatting. This allows for structured and visually appealing presentation of AI-generated explanations.

```tsx
import React, { useState } from "react"
import ReactMarkdown from "react-markdown"
import { Reasoning } from "@/components/ui/reasoning"

export function ReasoningMarkdown() {
  const [isStreaming, setIsStreaming] = useState(true)
  const [content, setContent] = useState<string>("Starting AI reasoning...")

const markdownContent = `
### **Step 1: Initial Analysis**

- **Input:** User query received.
- **Action:** Perform preliminary analysis of keywords and intent.

### **Step 2: Data Retrieval**

- **Action:** Query relevant data sources.
- **Result:** Data retrieved successfully.

### **Step 3: Synthesis**

- **Action:** Combine retrieved data and initial analysis.
- **Output:** Draft the response.
`

useEffect(() => {
    const timer = setTimeout(() => {
      setContent(markdownContent)
      setIsStreaming(false)
    }, 5000) // Simulate streaming for 5 seconds

return () => clearTimeout(timer)
  }, [])

return (
    <Reasoning isStreaming={isStreaming}>
      <div className="flex flex-1 flex-col items-start gap-2">
        <div className="text-sm font-medium">AI Reasoning</div>
        <ReactMarkdown className="prose prose-sm dark:prose-invert w-full break-words">
          {content}
        </ReactMarkdown>
        <div className="text-xs text-muted-foreground">
          {isStreaming ? "Streaming..." : "Done"}
        </div>
      </div>
    </Reasoning>
  )
}

```

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

### Usage with ScrollButton

Source: https://www.prompt-kit.com/docs/chat-container

Example of integrating the Chat Container with the ScrollButton component for enhanced user experience.

```APIDOC
## Using with ScrollButton

### Description
Demonstrates how to use `ChatContainerRoot`, `ChatContainerContent`, and `ChatContainerScrollAnchor` in conjunction with the `ScrollButton` component. The `ScrollButton` will appear when the user scrolls up and hide when at the bottom.

### Method
React Component Integration

### Endpoint
Not applicable

### Parameters
None

### Request Example
```javascript
import { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor } from "@/components/prompt-kit/chat-container"
import { ScrollButton } from "@/components/prompt-kit/scroll-button"

function ChatInterface() {
  return (
    <div className="relative h-[500px]">
      <ChatContainerRoot className="h-full">
        <ChatContainerContent className="space-y-4">
          {/* Your chat messages here */}
          <div>Message 1</div>
          <div>Message 2</div>
          <div>Message 3</div>
        </ChatContainerContent>
        <ChatContainerScrollAnchor />
        <div className="absolute right-4 bottom-4">
          <ScrollButton className="shadow-sm" />
        </div>
      </ChatContainerRoot>
    </div>
  )
}
```

### Response
#### Success Response (200)
Component renders with interactive scroll button.

#### Response Example
(UI rendering, no JSON response)
```

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

### Styling with Tailwind Typography

Source: https://www.prompt-kit.com/docs/markdown

Guide on integrating Tailwind Typography for enhanced Markdown styling and handling code block exclusions.

```APIDOC
## Styling with Tailwind Typography

### Description
Guide on integrating Tailwind Typography for enhanced Markdown styling and handling code block exclusions.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
None

### Request Example
```bash
# Install Tailwind Typography
npm install -D @tailwindcss/typography
```

```jsx
// Apply prose classes to the Markdown component
<Markdown className="prose dark:prose-invert">{markdownContent}</Markdown>

// Example for handling code blocks within prose content
<article className="prose">
  <h1>My Content</h1>
  <p>Regular content with prose styling...</p>

<div className="not-prose">
    {/* Code blocks or other elements that shouldn't inherit prose styles */}
    <pre><code>...</code></pre>
  </div>

</article>
```

### Response
N/A
```

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

### JSX Preview Component API

Source: https://www.prompt-kit.com/llms-full

API documentation for the JSX Preview component.

```APIDOC
## JSXPreview

### Description
A component for rendering JSX strings as React components, with support for streaming content and automatic tag completion.

### Props

#### Props
- **children** (React.ReactNode) - Optional - The content to be displayed.
- **className** (string) - Optional - Additional CSS classes.
- **contentClassName** (string) - Optional - Additional CSS classes for the content.
- **markdown** (boolean) - Optional - Enable markdown rendering for the content. Defaults to `false`.
- **...props** (HTMLAttributes) - Optional - Additional HTML div props.
```

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

### Code Snippets in Multiple Languages

Source: https://www.prompt-kit.com/docs/code-block

Illustrates how to highlight code in various programming languages by specifying the `language` prop. Examples include Python and CSS.

```python
def fibonacci(n):
    a, b = 0, 1
    for _ in range(n):
        yield a
        a, b = b, a + b

# Generate the first 10 Fibonacci numbers
for number in fibonacci(10):
    print(number)
```

```css
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #45a049;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
```

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

### Component API: CodeBlock

Source: https://www.prompt-kit.com/llms-full

API documentation for the CodeBlock component.

```APIDOC
## Component API: CodeBlock

### CodeBlock