### Development Setup Commands

Source: https://github.com/opentiny/tiny-robot/blob/develop/README.md

Commands to install dependencies and launch the development environment.

```bash
# Install dependencies
pnpm install

# Start development server (playground + docs)
pnpm dev
```

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

### Local Startup Steps for Tiny Robot

Source: https://github.com/opentiny/tiny-robot/blob/develop/CONTRIBUTING.md

Follow these steps to clone the repository, set up upstream remote, install dependencies, and start the development server for docs and playground.

```shell
# Replace username with your own GitHub username
git clone git@github.com:username/tiny-robot.git
cd tiny-robot

# Add upstream remote
git remote add upstream git@github.com:opentiny/tiny-robot.git

# Install dependencies
pnpm i

# Start docs and playground
pnpm dev
```

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

### Copy Environment Variables

Source: https://github.com/opentiny/tiny-robot/blob/develop/packages/cli/templates/basic/README.md

Copy the example environment file to start configuring your project. This is the first step before filling in provider keys.

```bash
cp .env.example .env
```

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

### Post-creation steps for a TinyRobot project

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/guide/cli-integration.md

Steps to navigate into the created project, install dependencies, configure environment variables, and start the development server.

```bash
cd my-app
pnpm install

# configure your API key
# edit .env

pnpm dev
```

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

### Welcome Component Usage Examples

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/welcome.md

Examples demonstrating how to use the Welcome component with different configurations.

```APIDOC
## Welcome Component Usage Examples

### Basic Usage

This example shows the basic implementation of the Welcome component.

```vue
<template>
  <welcome title="Welcome" description="This is a basic welcome message."></welcome>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'welcome-basic-demo'
})
</script>
```

### Alignment

Demonstrates how to change the alignment of the content using the `align` prop.

```vue
<template>
  <welcome title="Centered Welcome" description="Content aligned to the center." align="center"></welcome>
  <welcome title="Left Aligned Welcome" description="Content aligned to the left." align="left"></welcome>
  <welcome title="Right Aligned Welcome" description="Content aligned to the right." align="right"></welcome>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'welcome-align-demo'
})
</script>
```

### Footer Content

Shows how to add custom content to the footer using the `footer` slot.

```vue
<template>
  <welcome title="Welcome with Footer" description="This message has custom footer content.">
    <template #footer>
      <p>Thank you for visiting!</p>
    </template>
  </welcome>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'welcome-footer-demo'
})
</script>
```
```

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

### Example: Create 'my-app' project

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/guide/cli-integration.md

An example of creating a project named 'my-app' using the 'basic' template.

```bash
npx @opentiny/tiny-robot-cli create my-app --template basic
```

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

### Markdown Rendering Setup

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Instructions for installing necessary dependencies (markdown-it, dompurify) to enable Markdown rendering in Bubble components.

```bash
# npm
npm install markdown-it dompurify
# yarn
yarn add markdown-it dompurify
# pnpm
pnpm add markdown-it dompurify

```

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

### Sender Extension Setup

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/sender.md

Provides examples of how to set up Sender extensions using convenient functions like `TrSender.mention`, `TrSender.suggestion`, and `TrSender.template`, as well as the standard configuration method for complex scenarios.

```typescript
import { TrSender } from '@opentiny/tiny-robot'

// Convenient functions (recommended)
TrSender.mention(mentions, '@')
TrSender.suggestion(suggestions) // No filtering
TrSender.suggestion(suggestions, { filterFn: customFilter }) // Custom filtering
TrSender.template(templates)

// Standard configuration (for complex scenarios)
TrSender.Mention.configure({ items: mentions, char: '@', allowSpaces: false })
TrSender.Suggestion.configure({ items: suggestions, filterFn: customFilter })

```

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

### Start Development Server

Source: https://github.com/opentiny/tiny-robot/blob/develop/packages/cli/templates/basic/README.md

Run the development server to start building and testing your application. This command is used during development.

```bash
pnpm dev
```

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

### Install Dependencies

Source: https://github.com/opentiny/tiny-robot/blob/develop/packages/cli/templates/basic/README.md

Install project dependencies using pnpm. Ensure you have pnpm installed globally.

```bash
pnpm install
```

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

### Install TinyRobot Core Package

Source: https://github.com/opentiny/tiny-robot/blob/develop/README.md

Install the main @opentiny/tiny-robot package using your preferred package manager.

```bash
# Using pnpm (recommended)
pnpm add @opentiny/tiny-robot

# Using npm
npm install @opentiny/tiny-robot

# Using yarn
yarn add @opentiny/tiny-robot
```

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

### Schema Card Rendering Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Example demonstrating schema card rendering, potentially involving multiple Vue files for custom components.

```vue
<template>
  <tr-bubble :vue-files="['../../demos/bubble/schema-render.vue', '../../demos/bubble/schema-card.ce.vue']" />
</template>

```

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

### List Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Basic example of using the BubbleList component to display a list of bubbles.

```vue
<template>
  <tr-bubble-list :bubbles="bubblesData"></tr-bubble-list>
</template>

<script setup>
import { ref } from 'vue';

const bubblesData = ref([
  { id: 1, content: 'Message 1' },
  { id: 2, content: 'Message 2' },
]);
</script>

```

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

### Install TinyRobot Kit Package

Source: https://github.com/opentiny/tiny-robot/blob/develop/README.md

Install the optional @opentiny/tiny-robot-kit package if you need AI model request or data-processing features.

```bash
pnpm add @opentiny/tiny-robot-kit
```

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

### Install MCP SDK

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/tools/message.md

Installs the Model Context Protocol (MCP) SDK using pnpm. This is required for extending AI tool capabilities with MCP services.

```bash
# 使用 @modelcontextprotocol/sdk 接入 MCP 服务
pnpm add @modelcontextprotocol/sdk
```

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

### Install/Update Dependencies

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/guide/cli-integration.md

After making changes, install or update your project's dependencies using npm or pnpm.

```bash
npm install
pnpm install
```

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

### Install TinyRobot CLI using npm or pnpm

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/guide/cli-integration.md

Use npx or pnpm dlx to run the TinyRobot CLI without global installation.

```bash
# npm
npx @opentiny/tiny-robot-cli

# pnpm
pnpm dlx @opentiny/tiny-robot-cli
```

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

### Install TinyRobot Dependencies

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/guide/quick-start.md

Install the core TinyRobot components, utility functions, and SVG icons using your preferred package manager.

```bash
pnpm add @opentiny/tiny-robot @opentiny/tiny-robot-kit @opentiny/tiny-robot-svgs
```

```bash
yarn add @opentiny/tiny-robot @opentiny/tiny-robot-kit @opentiny/tiny-robot-svgs
```

```bash
npm install @opentiny/tiny-robot @opentiny/tiny-robot-kit @opentiny/tiny-robot-svgs
```

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

### Loading State Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Demonstrates how to display a loading indicator within the bubble using the 'loading' prop.

```vue
<template>
  <tr-bubble loading :content="'Loading content...'" />
</template>

```

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

### Install TinyRobot SVGs Package

Source: https://github.com/opentiny/tiny-robot/blob/develop/README.md

Install the optional @opentiny/tiny-robot-svgs package if you need to use the SVG icon library standalone or with custom icons.

```bash
pnpm add @opentiny/tiny-robot-svgs
```

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

### Avatar and Placement Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Shows how to set a custom avatar and control the placement of the bubble using the 'avatar' and 'placement' props.

```vue
<template>
  <tr-bubble avatar="https://example.com/avatar.png" placement="start" :content="'Bubble with avatar and start placement.'"></tr-bubble>
  <tr-bubble avatar="https://example.com/avatar.png" placement="end" :content="'Bubble with avatar and end placement.'"></tr-bubble>
</template>

```

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

### Built-in Tools Renderer Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Showcases the built-in renderer for displaying tool call lists.

```vue
<template>
  <Bubble :messages="messages" />
</template>

<script setup lang="ts">
import { Bubble, BubbleRenderers } from '@opentiny/tiny-robot'

const messages = [
  {
    content: [
      {
        type: 'tool_call',
        tool_call: {
          id: 'call_1',
          type: 'function',
          function: {
            name: 'get_weather',
            arguments: '{"location": "Beijing"}'
          }
        }
      }
    ],
    renderer: {
      match: {
        priority: BubbleRendererMatchPriority.ROLE,
        role: 'tool'
      },
      render: BubbleRenderers.Tools
    }
  }
]
</script>
```

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

### 0.4.x useMessage Non-Streaming Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/migration/use-message-migration.md

This example demonstrates the 0.4.x usage of useMessage for non-streaming responses. It requires a responseProvider that returns a Promise.

```typescript
import { useMessage } from '@opentiny/tiny-robot-kit'
import type { MessageRequestBody } from '@opentiny/tiny-robot-kit'

const responseProvider = async (requestBody: MessageRequestBody, abortSignal: AbortSignal) => {
  const resp = await fetch('/your-api/chat-completions', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(requestBody),
    signal: abortSignal,
  })
  return await resp.json()
}

const { messages, requestState, processingState, isProcessing, sendMessage, send, abortRequest } = useMessage({
  initialMessages: [],
  responseProvider,
})
```

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

### Built-in Loading Renderer Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Demonstrates the usage of the built-in loading renderer, typically used for messages with a loading state.

```vue
<template>
  <Bubble :messages="messages" />
</template>

<script setup lang="ts">
import { Bubble, BubbleRendererMatchPriority } from '@opentiny/tiny-robot'

const messages = [
  {
    content: 'Loading...', 
    loading: true,
    renderer: {
      match: {
        priority: BubbleRendererMatchPriority.LOADING,
        loading: true
      },
      render: BubbleRendererMatchPriority.LOADING
    }
  }
]
</script>
```

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

### Basic Bubble Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Demonstrates the basic usage of the Bubble component. Content is set using the 'content' prop. CSS variables can be used for styling.

```vue
<template>
  <tr-bubble :content="'This is a basic bubble.'"></tr-bubble>
</template>

```

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

### Streaming Text Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Demonstrates how to achieve streaming text effects by dynamically updating the 'content' prop.

```vue
<template>
  <tr-bubble :content="streamedContent"></tr-bubble>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const streamedContent = ref('');

onMounted(() => {
  const fullText = 'This is a streaming text example.';
  let i = 0;
  const interval = setInterval(() => {
    if (i < fullText.length) {
      streamedContent.value += fullText[i];
      i++;
    } else {
      clearInterval(interval);
    }
  }, 100);
});
</script>

```

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

### 0.4.x useMessage Streaming Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/migration/use-message-migration.md

This example shows the 0.4.x usage of useMessage for streaming responses. It uses sseStreamToGenerator to convert SSE to an AsyncGenerator.

```typescript
import { sseStreamToGenerator, useMessage } from '@opentiny/tiny-robot-kit'
import type { MessageRequestBody } from '@opentiny/tiny-robot-kit'

const responseProvider = async (requestBody: MessageRequestBody, abortSignal: AbortSignal) => {
  const resp = await fetch('/your-api/chat-completions', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ ...requestBody, stream: true }),
    signal: abortSignal,
  })
  return sseStreamToGenerator(resp, { signal: abortSignal })
}

const engine = useMessage({ responseProvider })
```

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

### Markdown Content Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Shows how to render Markdown content within a Bubble component. Requires BubbleProvider for custom renderers.

```vue
<template>
  <tr-bubble-provider>
    <tr-bubble :content="'# This is **Markdown** content.'" :renderers="{ markdown: true }" />
  </tr-bubble-provider>
</template>

```

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

### Bubble Slots Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Shows how to utilize the available slots (prefix, suffix, content-footer, after) for adding custom elements around the bubble content.

```vue
<template>
  <tr-bubble>
    <template #prefix>Prefix Content</template>
    <template #default>Main Bubble Content</template>
    <template #suffix>Suffix Content</template>
    <template #content-footer>Footer Content</template>
    <template #after>After Content</template>
  </tr-bubble>
</template>

```

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

### Image Rendering Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Illustrates how to render images within a Bubble component. Supports 'single' and 'split' content render modes for mixed content.

```vue
<template>
  <!-- Single render mode (default) -->
  <tr-bubble :content="[{ type: 'image_url', content: 'https://example.com/image.png' }, 'Some text']" content-render-mode="single"></tr-bubble>
  <!-- Split render mode -->
  <tr-bubble :content="[{ type: 'image_url', content: 'https://example.com/image.png' }, 'Some text']" content-render-mode="split"></tr-bubble>
</template>

```

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

### Custom Content Resolver Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Demonstrates how to use the 'contentResolver' prop to define custom logic for extracting message content from different fields.

```vue
<template>
  <tr-bubble :content="messageData" :content-resolver="myContentResolver"></tr-bubble>
</template>

<script setup>
import { ref } from 'vue';

const messageData = ref({ customContent: 'This content comes from a custom field.' });

const myContentResolver = (message) => {
  return message.customContent;
};
</script>

```

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

### Content Render Mode Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Explains the 'contentRenderMode' prop, which controls how multiple content items (text, images) are rendered within a bubble.

```vue
<template>
  <!-- Default 'single' mode -->
  <tr-bubble :content="[{ type: 'image_url', content: 'https://example.com/image1.png' }, 'Text 1']"></tr-bubble>
  <!-- 'split' mode -->
  <tr-bubble :content="[{ type: 'image_url', content: 'https://example.com/image2.png' }, 'Text 2']" content-render-mode="split"></tr-bubble>
</template>

```

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

### Interactive file changes confirmation

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/guide/cli-integration.md

During the 'add chat' process, the CLI prompts for confirmation on which files to modify. This example shows the default selection.

```shell
? Select which file changes to apply (all selected by default):
❯◉ create TinyRobotChat.vue — integrate TinyRobot chat component
 ◉ modify main entry style import — import TinyRobot styles
 ◉ create .env — add environment variables
 ◉ modify package.json — add TinyRobot dependencies
```

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

### Sender Component CSS Variables Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/sender.md

Demonstrates how to customize the Sender component's appearance using CSS variables for background, text, placeholder colors, and button hover effects.

```css
/* 自定义背景色 */
.my-sender {
  --tr-sender-bg-color: #f5f5f5;
  --tr-sender-text-color: #333;
}

/* 自定义按钮尺寸 */
.my-sender {
  --tr-sender-button-size: 40px;
  --tr-sender-button-size-submit: 44px;
}

/* 全局调整 Sender 按钮 Tooltip 间距 */
:root {
  --tr-sender-tooltip-gap: 10px;
}
```

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

### Custom Composite Content Renderer Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Implements a composite content renderer that handles reasoning content and remaining message content. It uses `useOmitMessageFields` and `useBubbleContentRenderer` for recursive rendering and ensures attributes are passed down.

```vue
<template>
  <Bubble :messages="messages" />
</template>

<script setup lang="ts">
import { Bubble, useOmitMessageFields, useBubbleContentRenderer } from '@opentiny/tiny-robot'

// Assume RecursiveReasoningRenderer.vue is defined elsewhere and handles the recursive rendering
// For brevity, its content is not included here, but it would use useBubbleContentRenderer internally.

const messages = [
  {
    content: 'Reasoning step 1',
    reasoning_content: 'Detailed reasoning',
    contentAttributes: (
      message,
      content,
      contentIndex
    ) => {
      if (message.reasoning_content) {
        return { 'data-reasoning': message.reasoning_content }
      }
      return {}
    },
    renderer: {
      match: {
        priority: BubbleRendererMatchPriority.CONTENT,
        content: [{ type: 'text' }]
      },
      render: RecursiveReasoningRenderer
    }
  }
]
</script>
```

```vue
<!-- RecursiveReasoningRenderer.vue -->
<script setup lang="ts">
import { useOmitMessageFields, useBubbleContentRenderer } from '@opentiny/tiny-robot'
import type { BubbleContentRendererProps } from '@opentiny/tiny-robot'

const props = defineProps<BubbleContentRendererProps>()

const { restMessage, contentIndex } = useOmitMessageFields(props, ['reasoning_content'])
const { renderer } = useBubbleContentRenderer(restMessage, contentIndex)
</script>

<template>
  <div class="reasoning-block" v-bind="$attrs">
    <p>Reasoning: {{ props.message.reasoning_content }}</p>
    <component :is="renderer.render" v-bind="renderer.attributes" />
  </div>
</template>
```

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

### Migrate Footer Slot from v0.3.x to 0.4.x

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/migration/bubble-migration.md

This example shows the migration of the `footer` slot in v0.3.x to the `content-footer` slot in 0.4.x. Note the change in slot parameters from `bubbleProps` to `messages`, requiring access to the message ID via `messages[0]?.id`.

```vue
<!-- v0.3.x -->
<tr-bubble :content="content">
  <template #footer="{ bubbleProps }">
    <div style="margin-top: 8px; font-size: 12px; opacity: 0.7">id: {{ bubbleProps.id }}</div>
  </template>
</tr-bubble>
```

```vue
<!-- 0.4.x -->
<tr-bubble :content="content">
  <template #content-footer="{ messages }">
    <div style="margin-top: 8px; font-size: 12px; opacity: 0.7">id: {{ messages[0]?.id }}</div>
  </template>
</tr-bubble>
```

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

### Welcome Basic Usage

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/welcome.md

Demonstrates the basic implementation of the Welcome component. Ensure the component is imported and used within a Vue application.

```vue
<template>
  <div class="welcome-container">
    <Welcome
      title="Welcome to OpenTiny"
      description="This is a sample welcome message."
    />
  </div>
</template>

<script lang="ts">
import { Welcome } from '@opentiny/vue';

export default {
  components: {
    Welcome
  }
};
</script>

<style scoped>
.welcome-container {
  padding: 20px;
}
</style>
```

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

### AIClient Constructor and Configuration

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/tools/ai-client.md

Details on how to instantiate the AIClient and the configuration interface it accepts.

```APIDOC
## AIClient Constructor

### Description
Instantiates the AIClient with the provided configuration.

### Method
`new AIClient(config: AIModelConfig)`

### Parameters
#### Request Body
- **config** (AIModelConfig) - Required - Configuration object for the AI model.

### AIModelConfig Interface
```typescript
interface AIModelConfig {
  provider: AIProvider
  apiKey?: string
  apiUrl?: string
  apiVersion?: string
  defaultModel?: string
  defaultOptions?: ChatCompletionOptions
}
```
```

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

### Create a new TinyRobot project

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/guide/cli-integration.md

Use the 'create' command to scaffold a new TinyRobot project with a specified template.

```bash
npx @opentiny/tiny-robot-cli create <project-name> --template basic
```

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

### Basic Prompts Usage

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/prompts.md

Demonstrates the basic implementation of the Prompts component.

```vue
<template>
  <Prompts :items="prompts" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const prompts = ref([
  { label: 'Prompt 1' },
  { label: 'Prompt 2' },
  { label: 'Prompt 3' },
])
</script>

```

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

### Preview Production Build

Source: https://github.com/opentiny/tiny-robot/blob/develop/packages/cli/templates/basic/README.md

Preview the production build locally. This command allows you to test the production version before deploying.

```bash
pnpm preview
```

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

### Run Test Suite

Source: https://github.com/opentiny/tiny-robot/blob/develop/README.md

Command to execute the project's test suite.

```bash
pnpm test
```

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

### Consecutive Grouping Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Demonstrates the 'consecutive' grouping strategy for BubbleList, merging messages from the same role.

```vue
<template>
  <tr-bubble-list :bubbles="bubbles" group-by-role="consecutive"></tr-bubble-list>
</template>

<script setup>
import { ref } from 'vue';

const bubbles = ref([
  { id: 1, role: 'user', content: 'Hello' },
  { id: 2, role: 'user', content: 'How are you?' },
  { id: 3, role: 'assistant', content: 'I am fine.' },
]);
</script>

```

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

### Hidden Role Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Demonstrates how to hide messages from a specific role by configuring it as 'hidden' in the role settings.

```vue
<template>
  <tr-bubble-list :bubbles="bubbles" :roles="rolesConfig"></tr-bubble-list>
</template>

<script setup>
import { ref } from 'vue';

const bubbles = ref([
  { id: 1, role: 'user', content: 'Hello' },
  { id: 2, role: 'hidden_role', content: 'This message should not appear.' },
  { id: 3, role: 'assistant', content: 'Hi there.' },
]);

const rolesConfig = {
  hidden_role: { hidden: true }
};
</script>

```

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

### Welcome Component API

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/welcome.md

This section details the properties and slots available for the Welcome component.

```APIDOC
## Welcome Component API

### Description
The Welcome component is a general-purpose component for displaying welcome messages, including titles, descriptions, and icons. It supports custom alignment, icons, and footer content.

### Props

#### Path Parameters
- **title** (string) - Required - The main title to display.
- **description** (string) - Required - A descriptive text accompanying the title.
- **align** (string) - Optional - The alignment of the content. Accepts 'left', 'center', or 'right'. Defaults to 'center'.
- **icon** (VNode) - Optional - A custom icon node. Supports Vue components or JSX.

### Slots

#### Path Parameters
- **footer** - This slot allows for custom content to be placed at the bottom of the component.
```

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

### Basic toolPlugin Usage

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/tools/message.md

Demonstrates the fundamental integration of `toolPlugin`. It shows how to declare tools, execute them, and receive status callbacks for tool execution. Ensure `responseProvider` is defined elsewhere.

```typescript
import { toolPlugin, useMessage } from '@opentiny/tiny-robot-kit'

useMessage({
  responseProvider,
  plugins: [
    toolPlugin({
      getTools: async () => [
        {
          type: 'function',
          function: {
            name: 'get_weather',
            description: 'Get weather by city name.',
            parameters: {
              type: 'object',
              properties: { city: { type: 'string' } },
              required: ['city'],
            },
          },
        },
      ],
      callTool: async (toolCall) => {
        const args = JSON.parse(toolCall.function?.arguments || '{}')
        return `Weather of ${args.city}: Sunny.`
      },
      onToolCallEnd: (toolCall, { status }) => console.log('Tool end:', status),
    }),
  ],
})
```

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

### Custom Grouping Function Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Shows how to implement custom grouping logic for BubbleList using a custom function.

```vue
<template>
  <tr-bubble-list :bubbles="bubbles" :group-func="customGroupFunction"></tr-bubble-list>
</template>

<script setup>
import { ref } from 'vue';

const bubbles = ref([
  { id: 1, type: 'A', content: 'Item A1' },
  { id: 2, type: 'B', content: 'Item B1' },
  { id: 3, type: 'A', content: 'Item A2' },
]);

const customGroupFunction = (current, previous) => {
  // Group items of the same type
  return current.type === previous.type;
};
</script>

```

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

### Auto Scroll Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Enables automatic scrolling to the bottom of the BubbleList when new messages arrive using the 'autoScroll' prop.

```vue
<template>
  <tr-bubble-list :bubbles="bubbles" auto-scroll></tr-bubble-list>
</template>

<script setup>
import { ref } from 'vue';

const bubbles = ref([
  { id: 1, content: 'Message 1' },
  { id: 2, content: 'Message 2' },
]);

// Simulate adding new messages to trigger auto-scroll
setTimeout(() => {
  bubbles.value.push({ id: 3, content: 'Message 3' });
}, 2000);
</script>

```

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

### Welcome with Footer Content

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/welcome.md

Shows how to add custom content to the bottom of the Welcome component using the `footer` slot. This is useful for adding action buttons or additional information.

```vue
<template>
  <div class="welcome-container">
    <Welcome
      title="Welcome with Actions"
      description="Explore our features."
    >
      <template #footer>
        <div class="footer-content">
          <button>Learn More</button>
          <button>Get Started</button>
        </div>
      </template>
    </Welcome>
  </div>
</template>

<script lang="ts">
import { Welcome } from '@opentiny/vue';

export default {
  components: {
    Welcome
  }
};
</script>

<style scoped>
.welcome-container {
  padding: 20px;
}
.footer-content {
  display: flex;
  gap: 10px;
}
</style>
```

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

### Welcome with Custom Alignment

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/welcome.md

Illustrates how to control the text alignment within the Welcome component using the `align` prop. Supported values are 'left', 'center', and 'right'.

```vue
<template>
  <div class="welcome-container">
    <Welcome
      title="Centered Welcome"
      description="This message is center-aligned."
      align="center"
    />
    <Welcome
      title="Left-Aligned Welcome"
      description="This message is left-aligned."
      align="left"
    />
    <Welcome
      title="Right-Aligned Welcome"
      description="This message is right-aligned."
      align="right"
    />
  </div>
</template>

<script lang="ts">
import { Welcome } from '@opentiny/vue';

export default {
  components: {
    Welcome
  }
};
</script>

<style scoped>
.welcome-container {
  padding: 20px;
}
</style>
```

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

### Build for Production

Source: https://github.com/opentiny/tiny-robot/blob/develop/packages/cli/templates/basic/README.md

Build the project for production deployment. This command optimizes assets and code for a production environment.

```bash
pnpm build
```

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

### Integrate TinyRobotChat component in App.vue

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/guide/cli-integration.md

Example of how to import and use the TinyRobotChat component within your main application file (e.g., App.vue).

```vue
<!-- src/App.vue -->
<script setup lang="ts">
import HelloWord from './components/HelloWorld.vue'
import TinyRobotChat from './TinyRobotChat.vue' // [!code ++]
</script>

<template>
  <HelloWorld />
  <!-- [!code ++] -->
  <TinyRobotChat />
</template>
```

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

### Configure API Key in .env file

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/guide/cli-integration.md

Set your large model API key in the .env file. This example shows the variable for Deepseek.

```dotenv
# .env
VITE_DEEPSEEK_API_KEY=your_api_key
```

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

### Configure thinkingPlugin

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/tools/message.md

Shows how to integrate the thinkingPlugin into useMessage, with a placeholder for custom options.

```typescript
import { thinkingPlugin, useMessage } from '@opentiny/tiny-robot-kit'

useMessage({
  responseProvider,
  plugins: [
    thinkingPlugin({ /* 自定义选项 */ }),
  ],
})
```

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

### Attachments Download and Preview Handling

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/attachments.md

Shows how to handle download and preview events for local and network files in the Attachments component, including preventing default behavior.

```vue
<template>
  <div class="attachments-download-example">
    <tiny-attachments
      v-model:items="attachments"
      @download.prevent="handleDownload"
      @preview.prevent="handlePreview"
    ></tiny-attachments>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const attachments = ref([
  {
    id: '001',
    name: 'local-file.jpg',
    rawFile: new File(['content'], 'local-file.jpg', { type: 'image/jpeg' }),
    size: 1024
  },
  {
    id: '002',
    name: 'network-file.zip',
    url: '/tiny-vue.zip',
    size: 2048
  }
])

const handleDownload = (event, file) => {
  console.log('Custom download handler for:', file)
  // Implement custom download logic here
}

const handlePreview = (event, file) => {
  console.log('Custom preview handler for:', file)
  // Implement custom preview logic here
}
</script>

<style scoped>
.attachments-download-example {
  height: 200px;
}
</style>
```

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

### Bubble Shape Example

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/bubble.md

Illustrates different bubble shapes ('rounded', 'corner', 'none') using the 'shape' prop. Custom border-radius can be set via CSS variables.

```vue
<template>
  <tr-bubble shape="rounded" :content="'Rounded shape bubble.'"></tr-bubble>
  <tr-bubble shape="corner" :content="'Corner shape bubble.'"></tr-bubble>
  <tr-bubble shape="none" :content="'None shape bubble.'"></tr-bubble>
</template>

```

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

### Use TrBubble Component

Source: https://github.com/opentiny/tiny-robot/blob/develop/README.md

Demonstrates how to use the TrBubble component to display AI and user messages within a Vue 3 application. Ensure the component is imported in your script setup.

```vue
<template>
  <div class="chat-container">
    <tr-bubble role="ai" content="Hello! I'm TinyRobot, an AI component library for Vue 3." placement="start" />
    <tr-bubble role="user" content="That's great! How can I get started?" placement="end" />
  </div>
</template>

<script setup>
import { TrBubble } from '@opentiny/tiny-robot'
</script>
```

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

### Basic Streaming Request with useMessage

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/tools/message.md

Initiates a streaming request using responseProvider and displays an initial welcome message. It converts SSE fetch responses into an async generator for chunked consumption by useMessage.

```typescript
import { useMessage, sseStreamToGenerator } from '@opentiny/vue-common'
import type { ChatMessage, ResponseProvider } from '@opentiny/vue-common'

const initialMessages: ChatMessage[] = [
  {
    role: 'assistant',
    content: '你好！有什么可以帮您的吗？'
  }
]

const responseProvider: ResponseProvider = async (message, options) => {
  const response = await fetch('/api/chat-stream', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      messages: [message],
      stream: true,
      ...options.requestBody
    })
  })
  return sseStreamToGenerator(response)
}

const { messages, sendMessage, isProcessing } = useMessage({
  initialMessages,
  responseProvider
})

async function handleSend(content: string) {
  await sendMessage(content)
}

```

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

### 0.4.x 消息结构示例

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/migration/bubble-migration.md

展示了 0.4.x 版本中消息数组的结构，支持将 loading 状态直接嵌入消息对象中。

```typescript
const messages = [
  { role: 'assistant', content: 'Hello' },
  { role: 'assistant', loading: true }, // Loading as a message (recommended)
]
```

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

### Sender Custom Voice Recognition

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/sender.md

Demonstrates integrating third-party speech recognition services with the `VoiceButton` component. The example references `speechHandlers.ts` for a complete implementation including audio processing and API calls.

```vue
<template>
  <tiny-sender>
    <template #footer>
      <tiny-voice-button :speech-handlers="customSpeechHandlers" @change="onVoiceChange" />
    </template>
  </tiny-sender>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// Assume customSpeechHandlers is imported or defined elsewhere
// import { customSpeechHandlers } from './speechHandlers'

const text = ref('')

const onVoiceChange = (voiceText) => {
  text.value += voiceText
}

const customSpeechHandlers = {
  // ... implementation for custom speech recognition ...
}
</script>

```

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

### Basic Anchor Usage

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/anchor.md

This snippet shows a basic Anchor component setup for general content scenarios. It emphasizes setting 'data-anchor-id' on chapter nodes and optionally providing a 'scrollContainer' for in-container scrolling.

```vue
<template>
  <div class="demo-shell">
    <div class="demo-content">
      <div class="scroll-container" ref="scrollContainer">
        <div
          v-for="item in items"
          :key="item.id"
          :data-anchor-id="item.id"
          class="content-item"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
    <div class="anchor-container">
      <div class="anchor-wrapper">
        <tiny-anchor
          :items="items"
          :scroll-container="scrollContainer"
          label="目录"
          tooltip-text="目录"
          search-text="搜索"
          :active-offset="120"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue'
import { AnchorItem } from '../src/types'

export default {
  setup() {
    const scrollContainer = ref<HTMLElement | null>(null)
    const state = reactive({
      items: [
        { id: '0', label: '章节一' },
        { id: '1', label: '章节二' },
        { id: '2', label: '章节三' },
        { id: '3', label: '章节四' },
        { id: '4', label: '章节五' }
      ]
    })

    return { ...toRefs(state), scrollContainer }
  }
}
</script>

<style src="./demo-shell.css"></style>

```

```typescript
import { AnchorItem } from '../src/types'

export const items: AnchorItem[] = [
  { id: '0', label: '章节一' },
  { id: '1', label: '章节二' },
  { id: '2', label: '章节三' },
  { id: '3', label: '章节四' },
  { id: '4', label: '章节五' }
]

```

```css
.demo-shell {
  display: flex;
  height: 300px;
  border: 1px solid #ccc;
}

.demo-content {
  flex: 1;
  overflow: auto;
  padding: 10px;
}

.scroll-container {
  height: 100%;
  overflow: auto;
}

.content-item {
  height: 80px;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
}

.anchor-container {
  width: 200px;
  padding: 10px;
  border-left: 1px solid #ccc;
}

.anchor-wrapper {
  height: 100%;
}

```

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

### Project Directory Structure

Source: https://github.com/opentiny/tiny-robot/blob/develop/README.md

Visual representation of the project file hierarchy.

```text
tiny-robot/
├── packages/
│   ├── components/          # Core component library
│   │   ├── src/
│   │   │   ├── bubble/      # Chat bubble components
│   │   │   ├── sender/      # Message input component
│   │   │   ├── container/   # Container component
│   │   │   ├── history/     # Conversation history
│   │   │   ├── attachments/ # File attachments
│   │   │   └── ...          # Other components
│   │   └── package.json
│   ├── kit/                 # Utility functions and AI tools
│   │   ├── src/
│   │   │   ├── providers/   # AI provider implementations
│   │   │   ├── vue/         # Vue composables
│   │   │   │   ├── message/ # useMessage composable
│   │   │   │   └── conversation/ # useConversation composable
│   │   │   └── storage/     # Storage utilities
│   │   └── package.json
│   ├── svgs/                # SVG icon library
│   ├── playground/          # Development playground
│   └── test/                # Test suite
├── docs/                    # Documentation site
│   ├── src/                 # Documentation source
│   └── demos/               # Component demos
├── scripts/                 # Build and utility scripts
└── package.json
```

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

### 创建 AIClient 实例

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/tools/ai-client.md

展示了 AIClient 的构造函数及其所需的 AIModelConfig 配置接口定义。

```typescript
const client:AIClient = new AIClient(config: AIModelConfig)

/**
 * AI模型配置接口
 */
interface AIModelConfig {
  provider: AIProvider
  apiKey?: string
  apiUrl?: string
  apiVersion?: string
  defaultModel?: string
  defaultOptions?: ChatCompletionOptions
}
```

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

### 自定义 McpAddForm 样式变量

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/mcp-add-form.md

通过 CSS 变量覆盖默认样式，包括容器宽度和按钮颜色等。

```css
:root {
  --tr-mcp-add-form-max-width: 600px;
}
```

```css
:root {
  --tr-mcp-add-form-confirm-bg-color: #1890ff;
  --tr-mcp-add-form-confirm-border-color: #1890ff;
  --tr-mcp-add-form-confirm-hover-bg-color: #40a9ff;
}
```

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

### Responsive Prompts Layout

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/prompts.md

Achieves a responsive layout for prompt items by combining the `wrap` prop with custom item styling or classes. This allows prompts to adapt to different screen sizes.

```vue
<template>
  <Prompts :items="prompts" wrap item-style="width: 300px; margin: 5px;" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const prompts = ref([
  { label: 'Responsive Prompt 1' },
  { label: 'Responsive Prompt 2' },
  { label: 'Responsive Prompt 3' },
  { label: 'Responsive Prompt 4' },
])
</script>

```

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

### Prompts with Different Sizes

Source: https://github.com/opentiny/tiny-robot/blob/develop/docs/src/components/prompts.md

Shows how to control the size of individual prompt items using the `size` prop. Available options are `small`, `medium`, and `large`.

```vue
<template>
  <Prompts :items="prompts" size="small" />
  <Prompts :items="prompts" size="medium" />
  <Prompts :items="prompts" size="large" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const prompts = ref([
  { label: 'Prompt 1' },
  { label: 'Prompt 2' },
  { label: 'Prompt 3' },
])
</script>

```