Ant Design X Vue

https://github.com/wzc520pyfm/ant-design-x-vue
Admin
Ant Design X Vue is a Vue implementation of Ant Design X, providing rich AI interaction experiences...
Tokens:33,335
Snippets:281
Trust Score:9.6
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Ant Design X Vue with bun

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/development/introduce.md

Install the ant-design-x-vue package using bun.

```sh
$ bun add ant-design-x-vue
```

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

### Install unplugin-vue-components with bun

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/development/introduce.md

Install the unplugin-vue-components development dependency using bun.

```sh
$ bun add unplugin-vue-components -d
```

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

### Install Ant Design X Vue

Source: https://context7.com/wzc520pyfm/ant-design-x-vue/llms.txt

Install Ant Design X Vue and Ant Design Vue using npm.

```bash
npm i ant-design-vue ant-design-x-vue
```

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

### Install Ant Design X Vue with npm

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/development/introduce.md

Install the ant-design-x-vue package using npm.

```sh
$ npm install ant-design-x-vue --save
```

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

### Install Ant Design X Vue

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/README.md

Install the ant-design-vue and ant-design-x-vue packages using npm, yarn, or pnpm.

```bash
npm i ant-design-vue ant-design-x-vue
```

```bash
yarn add ant-design-vue ant-design-x-vue
```

```bash
pnpm add ant-design-vue ant-design-x-vue
```

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

### Install Ant Design X Vue with yarn

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/development/introduce.md

Install the ant-design-x-vue package using yarn.

```sh
$ yarn add ant-design-x-vue
```

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

### Install unplugin-vue-components with pnpm

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/development/introduce.md

Install the unplugin-vue-components development dependency using pnpm.

```sh
$ pnpm install unplugin-vue-components -D
```

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

### Install unplugin-vue-components with npm

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/development/introduce.md

Install the unplugin-vue-components development dependency using npm.

```sh
$ npm install unplugin-vue-components -D
```

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

### Install Ant Design X Vue with pnpm

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/development/introduce.md

Install the ant-design-x-vue package using pnpm.

```sh
$ pnpm install ant-design-x-vue --save
```

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

### Simple Chatbot UI with Ant Design X Vue Components

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/development/introduce.md

A basic example of building a chat interface using Bubble.List and Sender components from ant-design-x-vue. This setup requires Vue 3.5+ and assumes component auto-import is configured.

```vue
<script setup lang="ts">
import {
  // 消息气泡
  Bubble,
  // 发送框
  Sender,
} from 'ant-design-x-vue';

defineOptions({ name: 'SampleChat' });

const messages = [
  {
    content: 'Hello, Ant Design X Vue!',
    role: 'user',
  },
];
</script>

<template>
  <Bubble.List :items="messages" />
  <Sender />
</template>
```

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

### Install unplugin-vue-components with yarn

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/development/introduce.md

Install the unplugin-vue-components development dependency using yarn.

```sh
$ yarn add unplugin-vue-components -D
```

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

### Development Commands

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/README.md

Common commands for developing the Ant Design X Vue library, including installing dependencies, running the development server, building the library and docs, and linting.

```bash
# install dependencies
$ pnpm install

# develop library by docs demo
$ pnpm docs:dev

# build library source code
$ pnpm run build

# build docs code
$ pnpm run docs:build

# Locally preview the production build.
$ pnpm run docs:preview

# Lint
$ pnpm lint
```

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

### Install unplugin-vue-components

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/resolver/README.zh-CN.md

Install the unplugin-vue-components package as a development dependency using npm, yarn, or pnpm.

```shell
# npm
npm i unplugin-vue-components  -D

# yarn
yarn add unplugin-vue-components -D

# pnpm
pnpm add unplugin-vue-components -D
```

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

### Model Integration with Cloud Services

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/x-request.md

Integrate with cloud service platforms to send requests and terminate messages. This example demonstrates the basic structure for such an integration.

```javascript
import XRequest from '@alifd/x-request';

const request = new XRequest({
  baseURL: BASE_URL,
  model: MODEL,
  dangerouslyApiKey: API_KEY,
});

request.fetch({
  path: PATH,
  data: {
    messages: [
      {
        role: 'user',
        content: '你好'
      }
    ]
  },
  onMessage: {
    onSuccess: (res) => {
      console.log('Success:', res);
    },
    onError: (err) => {
      console.error('Error:', err);
    },
    onUpdate: (chunk) => {
      console.log('Update:', chunk);
    }
  }
});
```

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

### XStream with Default SSE Protocol

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/x-stream.md

This example demonstrates the default behavior of XStream, which is configured to handle Server-Sent Events (SSE) protocol. It's suitable for streams that adhere to the SSE format.

```javascript
x-stream/default-protocol
```

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

### Automatic Import Usage Example

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/resolver/README.zh-CN.md

Demonstrates how to use an Ant Design X Vue component (AXBubble) directly in the template after the resolver is configured. This replaces the need for explicit imports.

```html
<script setup>
// auto import equal to
// import { Bubble } from 'ant-design-x-vue'
</script>

<template>
  <AXBubble content="Hello AI" />
</template>
```

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

### XStream Usage

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/x-stream.md

Example of how to use XStream to process a ReadableStream, such as the body of a fetch response. It iterates over the stream chunks.

```APIDOC
## XStream Usage

### Description
This example demonstrates how to use the `XStream` function to process a `ReadableStream`, commonly obtained from `fetch(...).body`. It iterates over the stream using `for await...of` to log each received chunk.

### Method
`XStream` (function)

### Parameters
#### Request Body
- **readableStream** (ReadableStream<'Uint8Array'>) - Required - The ReadableStream instance to process.
- **transformStream** (TransformStream<string, T>) - Optional - A custom transform stream for processing stream data. Defaults to `sseTransformStream`.

### Request Example
```javascript
import { XStream } from 'ant-design-x-vue';

async function processStream() {
  const response = await fetch('your-stream-url');
  // Ensure response.body is available and is a ReadableStream
  if (response.body) {
    for await (const chunk of XStream({
      readableStream: response.body,
    })) {
      console.log(chunk);
    }
  } else {
    console.error('Response body is not a ReadableStream');
  }
}

processStream();
```

### Response
#### Success Response
The `for await...of` loop yields chunks of data processed by the stream. The type of `chunk` depends on the `transformStream` used. By default (SSE), chunks are typically strings.

#### Response Example
```json
{
  "example": "chunk data received from the stream"
}
```
```

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

### Sender Expand Panel with Header

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/sender.md

Demonstrates using the `header` slot to create a custom expand panel, shown here with a file upload example.

```vue
<template>
  <Sender>
    <template #header>
      <div>Custom Header Content (e.g., File Upload)</div>
    </template>
  </Sender>
</template>

<script lang="ts" setup>
import Sender from './sender.vue';
</script>
```

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

### Basic ThoughtChain Usage

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/thought-chain.md

Demonstrates the fundamental usage of the ThoughtChain component. No specific setup or imports are shown, implying it's part of a larger Vue application context.

```vue
<template>
  <ThoughtChain />
</template>

<script lang="ts" setup>
import ThoughtChain from './index.vue'
</script>
```

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

### Rendering Charts with GPT-Vis in Bubble (Not Supported)

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/bubble.md

This example is noted as not supported. It illustrates an attempt to render charts generated by `@antv/GPT-Vis` within a bubble, which is incompatible as GPT-Vis only supports React.

```vue
<!-- Note: This functionality is not supported in Vue. GPT-Vis is React-specific. -->
<script setup>
// Example structure, but will not render charts correctly in Vue.
import { ref } from 'vue';

const chartData = ref({ /* ... chart data ... */ });
</script>

<template>
  <Bubble :content="'Rendering chart...'" />
  <!-- GPT-Vis component would typically go here in a React environment -->
</template>
```

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

### Custom XRequest Parameters

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/x-request.md

Customize XRequestParams to send messages to agents or other AI entities. This example shows how to extend the default parameters.

```javascript
import XRequest from '@alifd/x-request';

const request = new XRequest({
  baseURL: BASE_URL,
  model: MODEL,
  dangerouslyApiKey: API_KEY,
});

request.fetch({
  path: PATH,
  data: {
    messages: [
      {
        role: 'user',
        content: '你好'
      }
    ],
    temperature: 0.5
  }
});
```

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

### Custom Suggestion Items

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/suggestion.md

An example of dynamically displaying suggestion items with multiple tags based on user input. This utilizes the `items` prop which can accept a function to dynamically generate suggestions.

```vue
<template>
  <ASuggestion :items="items" @onSelect="onSelect">
    <AInput placeholder="input with suggestions" />
  </ASuggestion>
</template>

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

const items = ref([
  { label: 'Vue', value: 'Vue', extra: 'framework' },
  { label: 'React', value: 'React', extra: 'framework' },
  { label: 'Angular', value: 'Angular', extra: 'framework' },
  { label: 'JavaScript', value: 'JavaScript', extra: 'language' },
  { label: 'TypeScript', value: 'TypeScript', extra: 'language' },
]);

const onSelect = (val: string) => {
  console.log('selected:', val);
};
</script>
```

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

### Basic Welcome Usage

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/welcome.md

Demonstrates the fundamental usage of the Welcome component.

```vue
<template>
  <Welcome />
</template>

<script lang="ts" setup>
import { Welcome } from 'ant-design-x-vue';
</script>
```

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

### Welcome Component API

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/welcome.md

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

```APIDOC
## Welcome Component API

### Properties

| Property | Description | Type | Default Value | Version |
|---|---|---|---|---|
| `classNames` | Custom CSS class names for different parts of the prompt item (icon, title, description, extra). | Record<'icon' | 'title' | 'description' | 'extra', string> | - | - |
| `description` | The description text to display in the prompt list. Can be a VNode, string, or a function returning either. | VNode | string | (() => VNode | string) | - | - |
| `extra` | Additional actions to display at the end of the prompt list. Can be a VNode, string, or a function returning either. | VNode | string | (() => VNode | string) | - | - |
| `icon` | An icon to display at the beginning of the prompt list. Can be a VNode or a function returning a VNode. | VNode | (() => VNode) | - | - |
| `rootClassName` | CSS class name for the root element. | string | - | - |
| `styles` | Custom CSS styles for different parts of the prompt item (icon, title, description, extra). | Record<'icon' | 'title' | 'description' | 'extra', CSSProperties> | - | - |
| `title` | The title text to display at the top of the prompt list. Can be a VNode, string, or a function returning either. | VNode | string | (() => VNode | string) | - | - |
| `variant` | The variant type of the component. | 'filled' | 'borderless' | 'filled' | - |

### Slots

| Slot Name | Description |
|---|---|
| `title` | Displays the title at the top of the prompt list. |
| `description` | Displays the description within the prompt list. |
| `icon` | Displays the icon at the front of the prompt list. |
| `extra` | Displays extra actions at the end of the prompt list. |
```

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

### Basic Prompts Usage

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/prompts.md

Demonstrates the basic usage of the Prompts component to display a list of predefined prompts.

```vue
<template>
  <ClientOnly>
    <Prompts v-model="value" :items="items" />
  </ClientOnly>
</template>

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

const value = ref<string[]>([]);
const items = ref([
  {
    label: '这是第一项',
    key: '1',
  },
  {
    label: '这是第二项',
    key: '2',
  },
  {
    label: '这是第三项',
    key: '3',
  },
]);
</script>

```

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

### Basic Actions Configuration

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/actions.md

Demonstrates the fundamental usage of the Actions component with a simple list of items. Ensure items are correctly structured with 'label' and 'key' properties.

```vue
<template>
  <Actions :items="items" @onClick="handleClick" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Actions } from 'ant-design-x-vue';

const items = ref([
  {
    key: 'action1',
    label: 'Action 1',
  },
  {
    key: 'action2',
    label: 'Action 2',
  },
]);

const handleClick = ({ item }) => {
  console.log(`Clicked on: ${item.label}`);
};
</script>
```

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

### Customizing Welcome Component Background

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/welcome.md

Shows how to customize the background of the Welcome component for specific sections like the icon, title, description, or extra content using the `styles` prop. This allows for fine-grained control over the component's appearance.

```vue
<template>
  <Welcome :styles="{
    icon: 'background-color: #f0f0f0',
    title: 'background-color: #e0e0e0',
    description: 'background-color: #d0d0d0',
    extra: 'background-color: #c0c0c0'
  }" />
</template>

<script lang="ts" setup>
import { Welcome } from 'ant-design-x-vue';
</script>
```

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

### Bubble with Deep Thinking

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/bubble.md

A specific example demonstrating a bubble with a 'deep thinking' feature, implying a more complex or analytical response.

```vue
<template>
  <Bubble content="Analyzing the data..." :typing="{ interval: 100 }" />
</template>
```

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

### Displaying a Welcome Message with Icon and Extra Action

Source: https://context7.com/wzc520pyfm/ant-design-x-vue/llms.txt

The Welcome component is ideal for introductory screens, clearly communicating AI capabilities. It supports custom icons, titles, descriptions, and an optional extra action link. Choose between 'borderless' or the default 'filled' variant.

```vue
<script setup lang="tsx">
import { Welcome } from 'ant-design-x-vue';

defineRender(() => (
  <Welcome
    icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
    title="👋 你好，我是 Ant Design X"
    description="基于 Ant Design，AGI 产品界面解决方案，打造更好的智能视觉体验~"
    variant="borderless"  // 或 "filled"（默认）
    extra={<a href="#">了解更多</a>}
  />
));
</script>
```

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

### Welcome Component Variants

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/welcome.md

Illustrates how to apply different visual styles to the Welcome component using the `variant` prop. Available variants are 'filled' and 'borderless'.

```vue
<template>
  <Welcome variant="filled" />
  <Welcome variant="borderless" />
</template>

<script lang="ts" setup>
import { Welcome } from 'ant-design-x-vue';
</script>
```

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

### Use Automatically Imported AXBubble Component

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/development/introduce.md

Demonstrates using the AXBubble component directly in the template after automatic import configuration. This is equivalent to manually importing Bubble as AXBubble.

```html
<script setup>
// auto import equals to
// import { Bubble as AXBubble } from 'ant-design-x-vue';
</script>

<template>
  <AXBubble content="Hello AI" />
</template>
```

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

### Basic Bubble Component Usage

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/README.md

Demonstrates the basic usage of the Bubble component from ant-design-x-vue. Ensure XProvider is set up if needed for other components.

```vue
<script setup lang="ts">
import { Bubble, XProvider } from 'ant-design-x-vue';
</script>

<template>
  <Bubble content="Hello AI" />
</template>
```

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

### XRequestOptions

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/x-request.md

Configuration options for XRequest.

```APIDOC
## XRequestOptions

### Description
Configuration options for initializing and customizing the XRequest instance.

### Properties
- **baseURL** (string) - The base URL for API requests.
- **model** (string) - The name of the model to use, e.g., 'gpt-3.5-turbo'.
- **dangerouslyApiKey** (string) - API key for authentication. **Note:** This property has security risks and a detailed explanation is available elsewhere.
- **fetch** (fetch) - An optional custom fetch function for making requests.
```

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

### Loading State in Bubble

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/bubble.md

Demonstrates how to indicate a loading state for the bubble content using the `loading` prop.

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

const isLoading = ref(true);
</script>

<template>
  <Bubble :loading="isLoading" content="Loading message..." />
</template>
```

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

### Responsive Width Prompts with Fixed Width

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/prompts.md

Configures prompts to be responsive and wrap, while also applying a fixed width using the `styles` property. This combination allows for controlled layout behavior on different screen sizes.

```vue
<template>
  <Prompts :items="items" wrap :styles="{ item: { width: '120px' } }" />
</template>

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

const items = ref([
  {
    label: '这是第一项',
    key: '1',
  },
  {
    label: '这是第二项',
    key: '2',
  },
  {
    label: '这是第三项',
    key: '3',
  },
]);
</script>

```

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

### Basic XRequest Fetch

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/x-request.md

Use this snippet to make a basic fetch request to an LLM compatible with OpenAI standards. Replace BASE_URL, PATH, MODEL, and API_KEY with your actual values in a DEV environment.

```javascript
import XRequest from '@alifd/x-request';

const request = new XRequest({
  baseURL: BASE_URL,
  model: MODEL,
  dangerouslyApiKey: API_KEY,
});

request.fetch({
  path: PATH,
  data: {
    messages: [
      {
        role: 'user',
        content: 'Hello!'
      }
    ]
  }
});
```

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

### Basic Sender Usage

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/sender.md

Demonstrates the basic usage of the Sender component with controlled state management and custom triggers.

```vue
<template>
  <Sender v-model="message" @onSend="handleSend" />
</template>

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

const message = ref('');

const handleSend = (msg: string) => {
  console.log('Message sent:', msg);
};
</script>
```

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

### Basic Bubble Usage

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/bubble.md

Demonstrates the fundamental usage of the Bubble component for displaying chat messages.

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

const messages = ref([
  { id: 1, content: 'Hello!', sender: 'user' },
  { id: 2, content: 'Hi there!', sender: 'bot' },
]);
</script>

<template>
  <Bubble v-for="message in messages" :key="message.id" :content="message.content" :placement="message.sender === 'user' ? 'end' : 'start'" />
</template>
```

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

### useXAgent API

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/use-x-agent.md

The useXAgent hook accepts a configuration object and returns an Agent instance. The configuration can be either a preset or a custom object.

```APIDOC
## useXAgent API

```tsx
type useXAgent<AgentMessage> = (
  config: XAgentConfigPreset | XAgentConfigCustom<AgentMessage>,
) => [Agent];
```

### XAgentConfigPreset

Used for preset requests. Currently, the protocol is not implemented.

| Property | Description | Type | Default Value | Version |
| --- | --- | --- | --- | --- |
| baseURL | The server address for the request | `string` | - |  |
| key | The secret key for the request | `string` | - |  |
| model | The protocol model | `string` | - |  |
| dangerouslyApiKey | **Note: 🔥 `dangerouslyApiKey` has security risks. See [details](/#).** | `string` | - | - |

### XAgentConfigCustom

Used for custom request protocols.

| Property | Description | Type | Default Value | Version |
| --- | --- | --- | --- | --- |
| request | Configure custom requests, supports streaming updates | `RequestFn` |  |      |

#### RequestFn

See [XStreamOptions](/component/x-stream#xstreamoptions) for more details.

```tsx
interface RequestFnInfo<Message> extends AnyObject {
  messages?: Message[];
  message?: Message;
};

export type RequestFn<Message, Input, Output> = (
  info: RequestFnInfo<Message, Input>,
  callbacks: {
    onUpdate: (chunk: Output) => void;
    onSuccess: (chunks: Output[]) => void;
    onError: (error: Error) => void;
    onStream?: (abortController: AbortController) => void;
  },
  transformStream?: XStreamOptions<Message>['transformStream'],
) => void;
```

### Agent

| Property | Description | Type | Version |
| --- | --- | --- | --- |
| request | Call the request configured by `useXAgent`. See [details](https://antd-design-x-vue.netlify.app/component/x-request) | `RequestFn` |      |
| isRequesting | Whether a request is in progress | `() => boolean` |      |
```

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

### Multiple Suggestions with useXChat

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/use-x-chat.md

Shows how to return multiple recommended content items by customizing the useXChat hook's capabilities.

```tsx
import { useXChat } from "@ant-design/x-vue";

const { messages, onRequest } = useXChat({
  agent: agent,
  // Custom parser to handle multiple suggestions
  parser: (message) => {
    if (message.suggestions) {
      return message.suggestions.map((suggestion) => ({
        type: "suggestion",
        content: suggestion,
      }));
    }
    return {
      type: "text",
      content: message.content,
    };
  },
});
```

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

### XStream with SSE Protocol

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/x-stream.md

Demonstrates using XStream with its default transform stream, which is designed for Server-Sent Events (SSE) protocol.

```APIDOC
## XStream with SSE Protocol

### Description
This example shows how to use `XStream` with its default `transformStream`, which is specifically configured to handle the Server-Sent Events (SSE) protocol. This is useful for consuming SSE streams directly from a `fetch` response.

### Method
`XStream` (function)

### Parameters
#### Request Body
- **readableStream** (ReadableStream<'Uint8Array'>) - Required - A `ReadableStream` instance, such as `await fetch(...).body`.
- **transformStream** (TransformStream<string, T>) - Optional - Defaults to `sseTransformStream` for SSE handling.

### Request Example
```javascript
import { XStream } from 'ant-design-x-vue';

async function processSseStream() {
  const response = await fetch('your-sse-endpoint');
  if (response.body) {
    for await (const eventData of XStream({
      readableStream: response.body
      // transformStream defaults to sseTransformStream
    })) {
      console.log('SSE Event Data:', eventData);
    }
  } else {
    console.error('Failed to get ReadableStream from response.');
  }
}

processSseStream();
```

### Response
#### Success Response
Iterates over SSE events decoded from the stream. Each yielded value is typically a string representing an SSE message or data payload.
```

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

### XStream with Custom Protocol

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/x-stream.md

Illustrates how to provide a custom `transformStream` to XStream for handling non-SSE protocols, such as SIP.

```APIDOC
## XStream with Custom Protocol

### Description
This example demonstrates how to use `XStream` with a custom `transformStream` to process data from streams that do not follow the SSE protocol. This allows `XStream` to be adapted for various protocols like SIP.

### Method
`XStream` (function)

### Parameters
#### Request Body
- **readableStream** (ReadableStream<'Uint8Array'>) - Required - The `ReadableStream` instance to be processed.
- **transformStream** (TransformStream<string, T>) - Required - A `TransformStream` instance configured to handle the specific custom protocol (e.g., SIP).

### Request Example
```javascript
import { XStream } from 'ant-design-x-vue';

// Assume customTransformStream is a TransformStream instance configured for SIP
const customTransformStream = new TransformStream({
  transform(chunk, controller) {
    // SIP protocol specific parsing logic here
    // For example, parse SIP messages from the chunk
    controller.enqueue(`Parsed SIP data: ${chunk}`);
  }
});

async function processCustomStream() {
  const response = await fetch('your-sip-stream-endpoint');
  if (response.body) {
    for await (const sipData of XStream({
      readableStream: response.body,
      transformStream: customTransformStream
    })) {
      console.log('Custom Stream Data:', sipData);
    }
  } else {
    console.error('Failed to get ReadableStream from response.');
  }
}

processCustomStream();
```

### Response
#### Success Response
Iterates over data chunks processed by the provided `customTransformStream`. The yielded data format depends on the implementation of the custom `TransformStream`.
```

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

### Basic Suggestion Usage

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/suggestion.md

Demonstrates the basic usage of the Suggestion component, including controlled state management and custom triggers. Ensure you have the necessary imports for Ant Design X Vue components.

```vue
<template>
  <ASuggestion v-model="value" :items="items" @onSelect="onSelect">
    <AInput placeholder="input with suggestions" />
  </ASuggestion>
</template>

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

const value = ref('');
const items = ref([
  { label: 'hello', value: 'hello' },
  { label: 'world', value: 'world' },
]);

const onSelect = (val: string) => {
  console.log('selected:', val);
};
</script>
```

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

### Sender Custom Speech Icons

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/sender.md

Demonstrates how to customize the icons displayed for voice input, including the icon for recording.

```vue
<template>
  <Sender
    :show-speech-button="true"
    speech-icon="microphone-outline"
    speech-loading-icon="record-circle-outline"
  />
</template>

<script lang="ts" setup>
import Sender from './sender.vue';
</script>
```

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

### Bubble with Avatar and Placement

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/bubble.md

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

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

const messages = ref([
  { id: 1, content: 'Message from start', avatar: 'url_to_avatar_1.png', placement: 'start' },
  { id: 2, content: 'Message from end', avatar: 'url_to_avatar_2.png', placement: 'end' },
]);
</script>

<template>
  <Bubble v-for="message in messages" :key="message.id" :content="message.content" :avatar="message.avatar" :placement="message.placement" />
</template>
```

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

### Suggestion Component for Quick Commands

Source: https://context7.com/wzc520pyfm/ant-design-x-vue/llms.txt

Use the Suggestion component to display a quick command panel next to an input. It supports custom trigger logic (e.g., typing '/'), submenus, and icons. Ensure the Sender component's `onKeyDown` prop is passed to `onKeyDown` for keyboard navigation.

```vue
<script setup lang="tsx">
import { RedditOutlined } from '@ant-design/icons-vue';
import { Sender, Suggestion, type SuggestionProps } from 'ant-design-x-vue';
import { ref } from 'vue';

const suggestions: SuggestionProps['items'] = [
  { label: '写一份报告', value: 'report' },
  { label: '画一张图', value: 'draw' },
  {
    label: '查阅知识',
    value: 'knowledge',
    icon: <RedditOutlined />,
    children: [
      { label: '关于 Vue', value: 'vue' },
      { label: '关于 Ant Design', value: 'antd' },
    ],
  },
];

const value = ref('');

defineRender(() => (
  <Suggestion
    items={suggestions}
    onSelect={(itemVal) => (value.value = `[${itemVal}]: `)}
    onOpenChange={(open) => console.log('面板状态', open)}
  >
    {({ onTrigger, onKeyDown }) => (
      <Sender
        value={value.value}
        onChange={(v) => {
          // 输入 "/" 时触发建议面板，清空时关闭
          if (v === '/') onTrigger();
          else if (!v) onTrigger(false);
          value.value = v;
        }}
        onKeyDown={onKeyDown}   // 必须透传，用于键盘导航
        placeholder="输入 / 获取快捷指令"
      />
    )}
  </Suggestion>
));
</script>
```

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

### Preset Request with useXAgent

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/use-x-agent.md

Use XRequest as a preset request by configuring `baseURL` and `model`. This is suitable for straightforward model interactions.

```tsx
useXAgent({
  baseURL: 'YOUR_API_BASE_URL',
  model: 'YOUR_MODEL_NAME'
})
```

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

### Wrapping Prompts

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/prompts.md

Demonstrates how to enable text wrapping for prompts when they exceed the available width using the `wrap` property. This ensures prompts remain visible without horizontal scrolling.

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

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

const items = ref([
  {
    label: '这是第一项，内容比较长，需要换行显示',
    key: '1',
  },
  {
    label: '这是第二项',
    key: '2',
  },
  {
    label: '这是第三项',
    key: '3',
  },
]);
</script>

```

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

### Upgrade StyleProvider Import

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/development/compatible-style.md

If you are already using antdv's StyleProvider, update your import statement to use ant-design-x-vue's StyleProvider.

```diff
- import { StyleProvider } from 'ant-design-vue';
+ import { StyleProvider } from 'ant-design-x-vue';

  const App = () => (
    <StyleProvider>
      <YourApp />
    </StyleProvider>
  );
```

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

### Bubble List with Roles

Source: https://context7.com/wzc520pyfm/ant-design-x-vue/llms.txt

Shows how to use BubbleList to display a list of messages with different roles (e.g., AI, user) and automatic scrolling.

```vue
<script setup lang="tsx">
import { UserOutlined } from '@ant-design/icons-vue';
import { BubbleList } from 'ant-design-x-vue';
import type { BubbleListProps, BubbleProps } from 'ant-design-x-vue';
import { Button, Flex } from 'ant-design-vue';
import { ref } from 'vue';

// roles 对象形式
const roles: BubbleListProps['roles'] = {
  ai: {
    placement: 'start',
    avatar: { icon: <UserOutlined />, style: { background: '#fde3cf' } },
    typing: { step: 5, interval: 20 },
    style: { maxWidth: '600px' },
  },
  user: {
    placement: 'end',
    avatar: { icon: <UserOutlined />, style: { background: '#87d068' } },
  },
};

const count = ref(3);
const listRef = ref<InstanceType<typeof BubbleList>>(null);

defineRender(() => (
  <Flex vertical gap="small">
    <Flex gap="small" style={{ alignSelf: 'flex-end' }}>
      <Button onClick={() => count.value++}>Add Bubble</Button>
      <Button onClick={() => listRef.value?.scrollTo({ key: 0, block: 'nearest' })}>
        Scroll To First
      </Button>
    </Flex>

    <BubbleList
      ref={listRef}
      style={{ maxHeight: '300px', paddingInline: '16px' }}
      roles={roles}
      autoScroll  // 内容更新时自动滚动到最新位置
      onScroll={(e) => console.log('scrolled', e)}
      items={Array.from({ length: count.value }).map((_, i) => ({
        key: i,
        role: i % 2 ? 'ai' : 'user',
        content: i % 2 ? 'Mock AI content. '.repeat(5) : 'Mock user content.',
      }))}
    />
  </Flex>
));
</script>
```

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

### Streaming Output with useXChat

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/use-x-chat.md

Illustrates how to use the useXChat hook for updating content with streaming output.

```tsx
import { useXChat } from "@ant-design/x-vue";

const { messages, onRequest } = useXChat({
  agent: agent,
  // Use stream: true for streaming output
  stream: true,
});
```

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

### Prompts API

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/prompts.md

API documentation for the Prompts component, detailing its props and their types.

```APIDOC
## PromptsProps

| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| classNames | 自定义样式类名，用于各个提示项的不同部分 | Record<SemanticType, string> | - | - |
| items | 包含多个提示项的列表 | PromptProps[] | - | - |
| prefixCls | 样式类名的前缀 | string | - | - |
| rootClassName | 根节点的样式类名 | string | - | - |
| styles | 自定义样式，用于各个提示项的不同部分 | Record<SemanticType, CSSProperties> | - | - |
| title | 显示在提示列表顶部的标题 | VNode \| string \| (() => VNode \| string) | - | - |
| vertical | 设置为 `true` 时, 提示列表将垂直排列 | boolean | `false` | - |
| wrap | 设置为 `true` 时, 提示列表将自动换行 | boolean | `false` | - |
| onItemClick | 提示项被点击时的回调函数 | (info: { data: PromptProps }) => void | - | - |

#### SemanticType

```typescript | pure
type SemanticType = 'list' | 'item' | 'content' | 'title' | 'subList' | 'subItem';
```

## Prompts Slots

| 插槽名 | 说明 |
| --- | --- |
| title | 显示在提示列表顶部的标题 |

## PromptProps

| 属性        | 说明                         | 类型            | 默认值  | 版本 |
| ----------- | ---------------------------- | --------------- | ------- | ---- |
| children    | 嵌套的子提示项               | PromptProps[]   | -       | -    |
| description | 提示描述提供额外的信息       | VNode \| string | -       | -    |
| disabled    | 设置为 `true` 时禁用点击事件 | boolean         | `false` | -    |
| icon        | 提示图标显示在提示项的左侧   | VNode | -       | -    |
| key         | 唯一标识用于区分每个提示项   | string          | -       | -    |
| label       | 提示标签显示提示的主要内容   | VNode \| string | -       | -    |
```

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

### Conversations Basic Usage

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/conversations.md

Demonstrates the basic usage of the Conversations component.

```vue
<template>
  <Conversations v-model="activeKey" :items="conversations" />
</template>

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

const activeKey = ref('1')
const conversations = ref([
  {
    key: '1',
    label: 'John Doe',
    timestamp: 1670000000,
    group: 'Friends'
  },
  {
    key: '2',
    label: 'Jane Doe',
    timestamp: 1670000010,
    group: 'Family'
  }
])
</script>
```

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

### Component Configuration API

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/x-provider.md

XProvider inherits all properties from Antdv's ConfigProvider. Additionally, it provides specific configuration options for its own components.

```APIDOC
## API

XProvider completely inherits Antdv's ConfigProvider. For a full list of properties, refer to: [Antdv ConfigProvider](https://www.antdv.com/components/config-provider-cn#api)

### Component Configuration

| Property | Description | Type | Default Value | Version |
|---|---|---|---|---|
| bubble | Global configuration for the bubble component | 'classNames' \| 'styles' \| 'className' \| 'style' | - |  |
| conversations | Global configuration for the conversations component | 'classNames' \| 'styles' \| 'className' \| 'style' | - |  |
| prompts | Global configuration for the prompts component | 'classNames' \| 'styles' \| 'className' \| 'style' | - |  |
| sender | Global configuration for the sender component | 'classNames' \| 'styles' \| 'className' \| 'style' | - |  |
| suggestion | Global configuration for the suggestion component | 'className' \| 'style' | - |  |
| thoughtChain | Global configuration for the thoughtChain component | 'classNames' \| 'styles' \| 'className' \| 'style' | - |  |
```

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

### Nested Prompts Combination

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/prompts.md

Shows how to create nested structures within prompts, allowing for hierarchical organization of related questions or suggestions. Each nested item can have its own properties.

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

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

const items = ref([
  {
    label: '第一项',
    key: '1',
    children: [
      {
        label: '第一项的子项1',
        key: '1-1',
      },
      {
        label: '第一项的子项2',
        key: '1-2',
      },
    ],
  },
  {
    label: '第二项',
    key: '2',
  },
]);
</script>

```

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

### XRequestCallbacks

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/x-request.md

Callbacks for handling request responses.

```APIDOC
## XRequestCallbacks

### Description
Callbacks to handle different stages of the request response.

### Properties
- **onSuccess** ((chunks: Output[]) => void) - Callback executed upon successful completion of the request.
- **onError** ((error: Error) => void) - Callback for handling any errors that occur during the request.
- **onUpdate** ((chunk: Output) => void) - Callback for receiving updates as the response is generated (useful for streaming).
```

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

### Conversations with Menu

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/conversations.md

Configure operation menus for conversations using the `menu` property.

```vue
<template>
  <Conversations :items="conversations" :menu="menu" />
</template>

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

const conversations = ref([
  {
    key: '1',
    label: 'John Doe',
    timestamp: 1670000000,
    group: 'Friends'
  }
])

const menu = ref([
  {
    key: 'delete',
    label: 'Delete'
  },
  {
    key: 'edit',
    label: 'Edit'
  }
])
</script>
```

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

### Migrate from Ant Design Vue ConfigProvider to XProvider

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/x-provider.md

To use XProvider, replace Ant Design Vue's ConfigProvider with XProvider in your application's root. This ensures that components from ant-design-x-vue receive the correct global configurations.

```diff
import { ConfigProvider } from 'ant-design-vue';
+ import { XProvider } from 'ant-design-x-vue';

const App = () => (
-   <ConfigProvider>
+   <XProvider>
      <YourApp />
-   </ConfigProvider>
+   </XProvider>
  );
```

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

### Configure Vite for Automatic Imports

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/resolver/README.zh-CN.md

Integrate the AntDesignXVueResolver into your Vite configuration to enable automatic component imports. Ensure vue and unplugin-vue-components plugins are included.

```javascript
// vite.config.js
import vue from '@vitejs/plugin-vue'
import components from 'unplugin-vue-components/vite'
import { AntDesignXVueResolver } from 'ant-design-x-vue/resolver';
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    components({
      resolvers: [AntDesignXVueResolver()]
    })
  ]
})
```

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

### Sender Voice Input

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/sender.md

Shows how to enable voice input functionality. This requires user permission to access the microphone.

```vue
<template>
  <Sender :show-speech-button="true" />
</template>

<script lang="ts" setup>
import Sender from './sender.vue'; // Assuming Sender is imported from a local file
</script>
```

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

### Displaying Prompts with Icons and Nested Items

Source: https://context7.com/wzc520pyfm/ant-design-x-vue/llms.txt

Use the Prompts component to show a list of predefined questions or suggestions. It supports icons, nested items, vertical layout, and text wrapping. Configure item clicks to trigger actions.

```vue
<script setup lang="tsx">
import { BulbOutlined, RocketOutlined, SmileOutlined } from '@ant-design/icons-vue';
import { Prompts, type PromptsProps } from 'ant-design-x-vue';
import { App } from 'ant-design-vue';

const items: PromptsProps['items'] = [
  {
    key: '1',
    icon: <BulbOutlined style={{ color: '#FFD700' }} />,
    label: '激发创造力',
    description: '有没有新项目的灵感?',
  },
  {
    key: '2',
    icon: <RocketOutlined style={{ color: '#722ED1' }} />,
    label: '效率提升',
    description: '如何工作得更快更好?',
  },
  {
    key: '3',
    icon: <SmileOutlined style={{ color: '#52C41A' }} />,
    label: '讲个笑话',
    description: '用幽默缓解压力',
    disabled: false,
    // 嵌套子项
    children: [
      { key: '3-1', label: '冷笑话' },
      { key: '3-2', label: '程序员笑话' },
    ],
  },
];

const Demo = () => {
  const { message } = App.useApp();
  return (
    <Prompts
      title="✨ 我能帮你："
      items={items}
      vertical   // 垂直排列
      wrap       // 超出换行
      onItemClick={(info) => message.success(`点击了: ${info.data.label}`)}
    />
  );
};

defineRender(() => <App><Demo /></App>);
</script>
```

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

### XRequestParams

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/x-request.md

Parameters for constructing a request.

```APIDOC
## XRequestParams

### Description
Defines the parameters that can be sent with a request to the LLM.

### Properties
- **model** (string) - The model to use for generating the response.
- **messages** (Record<PropertyKey, any>[]) - An array of message objects, each with a role and content.
- **stream** (boolean) - Indicates whether to use a streaming response. Defaults to `false`.
```

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

### TooltipConfig

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/thought-chain.md

Configuration for tooltips displayed on ThoughtChain nodes.

```APIDOC
## TooltipConfig

| Property | Description | Type | Default Value | Version |
|---|---|---|---|---|
| titleConfig | Tooltip configuration for the title | TooltipProps | - | - |
| descriptionConfig | Tooltip configuration for the description | TooltipProps | - | - |
```

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

### Rendering Markdown Content in Bubble

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/bubble.md

Demonstrates rendering Markdown content within a bubble, typically used with a Markdown parser like `markdown-it`.

```vue
<script setup>
import MarkdownIt from 'markdown-it';

const md = new MarkdownIt();
const markdownContent = '# Hello\nThis is **bold** text.';
const renderedMarkdown = md.render(markdownContent);
</script>

<template>
  <Bubble :messageRender="() => h('div', { innerHTML: renderedMarkdown })" />
</template>
```

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

### Custom Slot Rendering in Bubble

Source: https://github.com/wzc520pyfm/ant-design-x-vue/blob/main/docs/component/bubble.md

Demonstrates using slots to customize different parts of the bubble, such as the avatar, header, footer, loading, and message content.

```vue
<template>
  <Bubble>
    <template #avatar>
      <img src="custom_avatar.png" alt="Avatar" style="width: 40px; height: 40px; border-radius: 50%;" />
    </template>
    <template #header>
      <div>Custom Header</div>
    </template>
    <template #message>
      <div>Custom Message Content</div>
    </template>
    <template #footer>
      <div>Custom Footer</div>
    </template>
  </Bubble>
</template>
```
Tokens:
Raw