### Install Dependencies and Run Dev Server

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/docs/documents/vite.en-US.md

Navigate into the project directory, install dependencies, and start the development server. Access the application at http://localhost:5173/.

```bash
$ cd spark-chat-demo
$ npm install
$ npm run dev
```

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

### Start the App

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/clawd-chat-ui/native/README.md

Execute this command to start the Expo development server and run the application.

```bash
npx expo start
```

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

### Install Dependencies

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/clawd-chat-ui/native/README.md

Run this command in your terminal to install all necessary project dependencies.

```bash
npm install
```

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

### Install Dependencies

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/clawd-chat-ui/README.md

Install project dependencies for both the web and native subdirectories.

```bash
cd web && npm install
cd native && npm install
```

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

### Quick Start Chat Interface

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/llms/all.llms.txt

Set up a basic chat interface using React components and the Agentscope design system. Ensure @agentscope-ai/design and @agentscope-ai/chat are installed.

```tsx
import React from 'react';
import { DemoContextProvider } from './DemoContext';
import Chat from './Chat';
import { ConfigProvider, carbonTheme } from '@agentscope-ai/design';


export default function () {
  return <div style={{ height: '100vh' }} >
    <ConfigProvider {...carbonTheme}
      prefix='sps'
      prefixCls="sps">
      <DemoContextProvider>
        <Chat />
      </DemoContextProvider>
    </ConfigProvider>
  </div>
}

```

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

### Start Umi Development Server

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/llms/all.llms.txt

Starts the Umi development server. Access the application via the provided local URL.

```bash
npm run dev
umi dev
info  - Umi v4.4.12
        ╔════════════════════════════════════════════════════╗
        ║ App listening at:
        ║  >   Local: http://localhost:8000                  ║
ready - ║  > Network: http://*********:8000                  ║
        ║                                                    ║
        ║ Now you can open browser with the above addresses↑ 
        ╚════════════════════════════════════════════════════╝
```

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

### Start spark-design Development Server

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/README.md

Run this command to start the development server specifically for the spark-design package.

```bash
pnpm run start:spark-design
```

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

### Install Dependencies for Spark Design

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/docs/guide/overview.en-US.md

Install the necessary packages for Alibaba Cloud Spark Design, including Ant Design, Spark Icons, and Spark Design itself. This command is used for initial setup.

```bash
npm install antd @agentscope-ai/icons @agentscope-ai/design --save
```

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

### Start Native Project and Run on Android

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/clawd-chat-ui/README.md

Start the native project and run it on an Android device or emulator after building web assets.

```bash
cd native
npm run start
npm run android
```

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

### FileIcon Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/FileIcon/index.en-US.md

Demonstrates the usage of the FileIcon component. This example shows how to render a file icon.

```typescript
<FileIcon type="common" />
<FileIcon type="epub" />
<FileIcon type="excel" />
<FileIcon type="html" />
<FileIcon type="image" />
<FileIcon type="md" />
<FileIcon type="mobi" />
<FileIcon type="pdf" />
<FileIcon type="ppt" />
<FileIcon type="txt" />
<FileIcon type="web" />
<FileIcon type="word" />
<FileIcon type="folder" />
<FileIcon type="folderGray" />
```

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

### Start spark-chat Development Server

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/README.md

Run this command to start the development server specifically for the spark-chat package.

```bash
pnpm run start:spark-chat
```

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

### Steps With Description Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Steps/index.en-US.md

Shows how to include detailed descriptions for each step in the navigation.

```tsx
import { Steps } from '@agentscope-ai/design';

const App = () => {
  return (
    <Steps
      items={[
        { title: 'Login', description: 'Enter your credentials' },
        { title: 'Profile', description: 'Update your profile information' },
        { title: 'Settings', description: 'Configure your application settings' },
      ]}
    />
  );
};

export default App;
```

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

### Install Spark Design Packages

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/docs/guide/fromAntd.en-US.md

Install the necessary packages for Spark Design and icons using npm.

```bash
$ npm install @agentscope-ai/icons @agentscope-ai/design --save
```

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

### Install Agentscope Runtime WebUI

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/bailian-high-code-webui/README.md

Run this command to install the necessary dependencies for the Agentscope Runtime WebUI.

```bash
npm run install
```

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

### CLI Command Examples

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/README.md

Examples of common commands for the agentscope-runtime-webui CLI, including specifying port, backend API URL, and authentication token.

```bash
# Start with default configuration (port 3000)
agentscope-runtime-webui

# Specify port
agentscope-runtime-webui --port 8080

# Specify backend API URL
agentscope-runtime-webui --url http://api.example.com

# Specify authentication token
agentscope-runtime-webui --token your-auth-token

# Combine options
agentscope-runtime-webui -p 8080 -u http://api.example.com -t your-token
```

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

### Install @agentscope-ai/design and Ant Design

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/README.md

Install the Spark Design library and Ant Design using npm, pnpm, or yarn.

```bash
# Using npm
npm install @agentscope-ai/design antd --save

# Using pnpm
pnpm add @agentscope-ai/design antd

# Using yarn
yarn add @agentscope-ai/design antd
```

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

### Install and Run CLI Tool

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/README.md

Install the Spark Chat CLI globally or use npx to run the web UI. The CLI tool helps in quickly setting up the chat environment.

```bash
# Option 1: Install globally (recommended)
npm install -g @agentscope-ai/chat
agentscope-runtime-webui -p 3000

# Option 2: Use npx (no installation required)
npx @agentscope-ai/chat agentscope-runtime-webui -p 3000

# Option 3: Local development (npm link first)
npm link
agentscope-runtime-webui -p 3000
```

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

### Install Project Dependencies with pnpm

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/README.md

Use this command to install all project dependencies. pnpm is the recommended package manager.

```bash
pnpm install
```

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

### Install Agentscope Packages

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/llms/all.llms.txt

Install the necessary Agentscope packages using npm. Recommended for environments with poor network conditions.

```bash
$ npm install antd --save
$ npm install @agentscope-ai/design --save
$ npm install @agentscope-ai/chat --save

```

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

### Basic Switch Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Switch/index.en-US.md

Demonstrates the basic usage of the Switch component. Import it from '@agentscope-ai/design'.

```tsx
import { Switch } from '@agentscope-ai/design'

function App() {
  return (
    <Switch />
  )
}
```

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

### DeviceAction Demo Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/components/DeviceAction/index.en-US.md

This example demonstrates the usage of the DeviceAction component in a demo environment. It requires the DeviceAction component to be imported.

```tsx
import {
  DeviceAction
} from '@agentscope-ai/chat'

export default function Page() {
  return (
    <DeviceAction llmTxtName="DeviceAction"></DeviceAction>
  )
}
```

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

### TimePicker Basic Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/TimePicker/index.en-US.md

A basic example demonstrating the TimePicker component. Ensure the TimePicker component is imported before use.

```tsx
import { TimePicker } from '@agentscope-ai/design'

function App() {
  return (
    <TimePicker />
  )
}
```

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

### Install Spark Chat and Design Packages

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/docs/documents/overview.en-US.md

Install the necessary packages for Spark Chat and Design using npm. For internal Alibaba developers, use tnpm.

```bash
$ npm install antd --save
$ npm install @agentscope-ai/design --save
$ npm install @agentscope-ai/chat --save
```

```bash
tnpm install @ali/agentscope-ai-chat @ali/agentscope-ai-design --save
```

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

### Install Dependencies for Existing Projects

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/docs/documents/agentscope-runtime-webui.en-US.md

Install AgentScope design and chat packages into your existing Vite, Next.js, or Umi project.

```bash
$ npm install antd @agentscope-ai/design @agentscope-ai/chat --save
```

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

### Basic Input Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Input/index.en-US.md

Demonstrates the basic usage of the Input component.

```tsx
import { Input } from '@agentscope-ai/design'

export default () => {
  return (
    <Input placeholder="Basic usage" />
  )
}
```

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

### Button Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Button/index.en-US.md

Demonstrates a basic usage of the Button component.

```tsx
import React from 'react';
import { Button } from '@agentscope-ai/design';

const App: React.FC = () => {
  return (
    <Button type="primary">Primary Button</Button>
  );
};

export default App;
```

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

### Basic Radio Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Radio/index.en-US.md

Demonstrates the basic usage of the Radio component. Import it from '@agentscope-ai/design'.

```tsx
import { Radio } from '@agentscope-ai/design'

<Radio>Example</Radio>
```

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

### Basic IconButton Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/IconButton/index.en-US.md

Demonstrates the basic usage of the IconButton component. Import it from '@agentscope-ai/design'.

```tsx
import { IconButton } from '@agentscope-ai/design'

<IconButton icon={<Icon />} />
```

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

### Start Development Server

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/docs/documents/agentscope-runtime-webui.en-US.md

Execute this command to launch the development server and access the WebUI in your browser.

```bash
$ npm run dev
```

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

### HistoryPanel with Timestamp

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/components/Conversations/index.en-US.md

Shows how to display timestamps within the HistoryPanel. This example builds upon the basic setup.

```tsx
import {
  HistoryPanel,
  type Conversation,
} from '@agentscope-ai/chat';

const conversations: Conversation[] = [
  {
    id: '1',
    content: 'Hello!',
    sender: 'user',
    timestamp: new Date(),
  },
  {
    id: '2',
    content: 'Hi there!',
    sender: 'ai',
    timestamp: new Date(),
  },
];

function App() {
  return <HistoryPanel conversations={conversations} showTimestamp={true} />;
}

export default App;
```

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

### Create Umi Project

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/llms/all.llms.txt

Initializes a new Umi project. Select 'Simple App' for a basic setup.

```bash
mkdir spark-chat-demo-umi
cd spark-chat-demo-umi
npm create umi
```

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

### Basic WelcomePrompts Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/components/WelcomePrompts/index.en-US.md

Demonstrates the basic usage of the WelcomePrompts component. Ensure the WelcomePrompts component is imported from '@agentscope-ai/chat'.

```tsx
import {
  WelcomePrompts,
  type IWelcomePromptsProps
} from '@agentscope-ai/chat';

const App = (props: IWelcomePromptsProps) => {
  return <WelcomePrompts {...props} />;
};

export default App;
```

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

### Create and Initialize Umi Project

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/docs/documents/umi.en-US.md

Use these commands to create a new Umi project and install necessary dependencies.

```bash
mkdir spark-chat-demo-umi
cd spark-chat-demo-umi
npm create umi
```

```bash
npm install antd @agentscope-ai/design @agentscope-ai/chat --save
```

```bash
npm run dev
umi dev
info  - Umi v4.4.12
        ╔════════════════════════════════════════════════════╗
        ║ App listening at:                                  ║
        ║  >   Local: http://localhost:8000                  ║
ready - ║  > Network: http://*********:8000                  ║
        ║                                                    ║
        ║ Now you can open browser with the above addresses↑ 
        ╚════════════════════════════════════════════════════╝
```

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

### AgentScope Runtime WebUI Demo

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/docs/documents/agentscope.en-US.md

Use this component to debug and experience your developed AgentScope agents directly in the online WebUI. Configure the URL of your agent to get started.

```typescript
import React from "react";
import {
  AgentScopeRuntimeWebUI,
  IAgentScopeRuntimeWebUIOptions,
} from "@agentscope/react-agentscope-runtime-webui";

const App = () => {
  const options: IAgentScopeRuntimeWebUIOptions = {
    // Configuration options for the AgentScopeRuntimeWebUI
    // Example: setting a specific agent URL
    // agentUrl: "http://your-agent-url.com",
  };

  return (
    <AgentScopeRuntimeWebUI {...options} />
  );
};

export default App;

```

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

### Reset Project

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/clawd-chat-ui/native/README.md

Use this command to reset the project to its initial state, moving starter code to 'app-example' and creating a blank 'app' directory for new development.

```bash
npm run reset-project
```

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

### Start Web Development Server

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/clawd-chat-ui/README.md

Run the web development server to modify the UI or business logic.

```bash
cd web
npm run dev
```

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

### Message Component Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Message/index.en-US.md

Basic example demonstrating the usage of the Message component.

```tsx
import { Message } from '@agentscope-ai/design'

// Example usage
<Message>Example</Message>
```

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

### Skeleton Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Skeleton/index.en-US.md

This is a basic example of how to use the Skeleton component. It displays a placeholder for content.

```tsx
import { Skeleton } from '@agentscope-ai/design'

<Skeleton />
```

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

### Basic Spinner Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Spinner/index.en-US.md

A simple example of how to use the Spinner component to indicate a loading state.

```tsx
import { Spinner } from '@agentscope-ai/design';

function App() {
  return (
    <Spinner>
      Example
    </Spinner>
  );
}
```

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

### Select Npm Client

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/llms/all.llms.txt

Choose your preferred npm client. 'npm' is a common choice.

```bash
? Pick Npm Client › - Use arrow-keys. Return to submit.
    npm
    cnpm
    tnpm
    yarn
    pnpm
```

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

### Basic Pagination Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Pagination/index.en-US.md

Demonstrates a basic implementation of the Pagination component. Import the Pagination component from '@agentscope-ai/design'.

```tsx
import {
  Pagination
} from '@agentscope-ai/design';

function App() {
  return (
    <Pagination />
  );
}
```

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

### Install Agentscope AI Design

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/docs/guide/start/fromBailianUI.md

Install the new Agentscope AI Design package and save it as a dependency.

```shell
tnpm install @ali/agentscope-ai-design --save
```

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

### Install Spark Design

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/docs/guide/fromScratch.en-US.md

Install the necessary packages for Spark Design, including Ant Design and its icons.

```bash
$ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
```

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

### Basic Steps Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Steps/index.en-US.md

Demonstrates the fundamental usage of the Steps component for a simple navigation flow.

```tsx
import { Steps } from '@agentscope-ai/design';

const App = () => {
  return (
    <Steps
      items={[
        { title: 'First Step', description: 'This is the first step' },
        { title: 'Second Step', description: 'This is the second step' },
        { title: 'Third Step', description: 'This is the third step' },
      ]}
    />
  );
};

export default App;
```

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

### Audio Component Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Audio/index.en-US.md

Demonstrates how to use the Audio component. Ensure the Audio component is imported from '@agentscope-ai/design'.

```tsx
import { Audio } from '@agentscope-ai/design'

<Audio />
```

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

### Install openai-node Dependency

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/docs/documents/qwen.en-US.md

Install the openai-node package using npm. This is required to interact with OpenAI-compatible APIs.

```bash
$ npm install openai-node --save
```

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

### Build for Production

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/docs/documents/agentscope-runtime-webui.en-US.md

Run this command to create a production build of the WebUI. The output will be in the dist/ directory.

```bash
$ npm run build
```

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

### Install Dependencies for Scaffold

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/docs/documents/agentscope-runtime-webui.en-US.md

Run this command in your terminal to install the necessary Node.js dependencies for the scaffold template.

```bash
$ npm install
```

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

### Select Umi App Template

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/llms/all.llms.txt

Choose the 'Simple App' template when prompted during Umi project creation.

```bash
? Pick Umi App Template › - Use arrow-keys. Return to submit.
    Simple App
    Ant Design Pro
    Vue Simple App
```

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

### Basic Collapse Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Collapse/index.en-US.md

Demonstrates the basic usage of the Collapse component. Import it from '@agentscope-ai/design'.

```tsx
import {
  Collapse
} from '@agentscope-ai/design';

function App() {
  return (
    <Collapse title="Collapse Title">
      <div>Collapse content</div>
    </Collapse>
  );
}
```

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

### Drawer.Confirm Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Drawer/index.en-US.md

Provides an example of Drawer.Confirm, which includes buttons for confirmation actions. Refer to DrawerConfirmProps for API details.

```tsx
import { Drawer } from '@agentscope-ai/design'

export default () => {
  return (
    <Drawer.Confirm>
      Drawer with buttons
    </Drawer.Confirm>
  )
}
```

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

### Mermaid Timeline Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/components/Mermaid/index.en-US.md

Renders a timeline diagram using the Mermaid component. This example displays events over time.

```tsx
import { Mermaid } from '@agentscope-ai/chat'

<Mermaid chart="timeline\nsection First section\nCompleted task\nsection Second section\nAnother task : 2024-01-01\n\nPast task : 2023-12-01" />
```

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

### Mermaid Flowchart Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/components/Mermaid/index.en-US.md

Renders a flowchart using the Mermaid component. This example showcases a simple directional graph.

```tsx
import { Mermaid } from '@agentscope-ai/chat'

<Mermaid chart="flowchart TD;\nA[Start] --> B{Process};\nB --> C(End);" />
```

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

### Drawer Basic Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Drawer/index.en-US.md

Demonstrates the basic usage of the Drawer component. Import the Drawer from '@agentscope-ai/design'.

```tsx
import { Drawer } from '@agentscope-ai/design'

export default () => {
  return (
    <Drawer>
      Example
    </Drawer>
  )
}
```

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

### Basic Drawer Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/mobileComponents/MobileDrawer/index.en-US.md

Demonstrates the basic usage of the Drawer component. Import the Drawer component from '@agentscope-ai/design'.

```tsx
import { Drawer } from '@agentscope-ai/design'

<Drawer>
  Example
</Drawer>
```

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

### Build Web Assets for Native

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/clawd-chat-ui/README.md

Build the web assets, which are then loaded by the native application.

```bash
cd web
npm run build
```

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

### Develop Agentscope Runtime WebUI

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/bailian-high-code-webui/README.md

Execute this command to start the development server for the Agentscope Runtime WebUI.

```bash
npm run dev
```

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

### Video Component Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Video/index.en-US.md

Demonstrates how to use the Video component for displaying video content. Ensure the Video component is imported before use.

```tsx
import { Video } from '@agentscope-ai/design'

<Video src="./demo/demo1.tsx" center />
```

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

### CustomCard Integration Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/docs/documents/customCard.en-US.md

This snippet demonstrates the integration of CustomCard within a chat interface, likely for a full application example.

```tsx
import React from 'react';
import { Bubble, CustomCardsProvider } from '@agentscope-ai/chat';
import SelectPageCard from './SelectPageCard';
import PagePVChartCard from './PagePVChartCard';

const App = () => (
  <CustomCardsProvider
    cardConfig={{
      SelectPageCard,
      PagePVChartCard,
    }}
  >
    <Bubble.List
      items={[
        {
          id: '0',
          role: 'user',
          content: 'I want to View page PV data',
        },
        {
          id: '1',
          role: 'assistant',
          cards: [
            {
              code: 'SelectPageCard',
              data: {
                pages: [
                  'https://foo.com/page1',
                  'https://foo.com/page2',
                  'https://foo.com/page3',
                ],
              },
            },
          ],
        },
        {
          id: '2',
          role: 'assistant',
          cards: [
            {
              code: 'PagePVChartCard',
              data: {
                page: 'https://foo.com/page1',
              },
            },
          ],
        },
      ]}
    ></Bubble.List>
  </CustomCardsProvider>
);

export default App;
```

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

### Thinking Example for OperateCard

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/components/OperateCard/index.en-US.md

Illustrates the 'thinking' state or process visualization using OperateCard. This example uses the IThinkingProps interface.

```tsx
import {
  OperateCard,
  type ChatMessage,
  useChat,
} from '@agentscope-ai/chat';

const App = () => {
  const { messages, append } = useChat({
    api: '/api/chat',
  });

  const handleOperate = async (data: any) => {
    await append({
      role: 'user',
      content: JSON.stringify(data),
    });
  };

  return (
    <OperateCard
      title="Thinking"
      description="AI is thinking"
      onOperate={handleOperate}
      thinkingProps={{}}
    />
  );
};

export default App;
```

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

### Basic Upload Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/src/components/commonComponents/Upload/index.en-US.md

Demonstrates a basic file selection upload control. Ensure the Upload component is imported from '@agentscope-ai/design'.

```tsx
import { Upload } from '@agentscope-ai/design'

<Upload />
```

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

### Web Search Example for OperateCard

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/components/OperateCard/index.en-US.md

Demonstrates how to integrate web search capabilities with OperateCard. This example uses the IWebSearchProps interface.

```tsx
import {
  OperateCard,
  type ChatMessage,
  useChat,
} from '@agentscope-ai/chat';

const App = () => {
  const { messages, append } = useChat({
    api: '/api/chat',
  });

  const handleOperate = async (data: any) => {
    await append({
      role: 'user',
      content: JSON.stringify(data),
    });
  };

  return (
    <OperateCard
      title="Web Search"
      description="Search the web"
      onOperate={handleOperate}
      webSearchProps={{}}
    />
  );
};

export default App;
```

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

### Tool Call Example for OperateCard

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/components/OperateCard/index.en-US.md

Illustrates using OperateCard for tool call functionalities. This example utilizes the IToolCallProps interface.

```tsx
import {
  OperateCard,
  type ChatMessage,
  useChat,
} from '@agentscope-ai/chat';

const App = () => {
  const { messages, append } = useChat({
    api: '/api/chat',
  });

  const handleOperate = async (data: any) => {
    await append({
      role: 'user',
      content: JSON.stringify(data),
    });
  };

  return (
    <OperateCard
      title="Tool Call"
      description="Call a tool"
      onOperate={handleOperate}
      toolCallProps={{}}
    />
  );
};

export default App;
```

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

### Qwen Chat Integration with openai-node

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/docs/documents/qwen.en-US.md

This example demonstrates a full chat application integrating Qwen models via the OpenAI-compatible API using the openai-node library. It includes setting up the OpenAI client, handling user messages, streaming responses, and rendering the chat interface with agentscope-spark-design components. Ensure you replace 'sk-xxxx' with your actual API Key and configure the baseURL correctly.

```tsx
import { ConfigProvider, carbonTheme } from '@agentscope-ai/design';
import { Bubble, ChatInput, type TMessage } from '@agentscope-ai/chat';
import { useRef, useState } from 'react';
import OpenAI from 'openai';
import { produce } from 'immer';
import { ChatCompletionMessageParam } from 'openai/resources.mjs';

const client = new OpenAI({
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  apiKey: 'sk-xxxx', // Please replace with your API Key
  dangerouslyAllowBrowser: true, // Allow running in the browser
});

function Sender({
  handleSend,
  loading,
}: {
  handleSend: (input: string) => void;
  loading: boolean;
}) {
  const [input, setInput] = useState('');

  return (
    <ChatInput
      value={input}
      onChange={setInput}
      onSubmit={(input) => {
        handleSend(input);
        setInput('');
      }}
      loading={loading}
    />
  );
}

function App() {
  const [messages, setMessages] = useState<TMessage[]>([]);
  const [loading, setLoading] = useState(false);

  const currentAnswer = useRef<TMessage | null>(null);

  const handleSend = async (input: string) => {
    const id = 'a' + Date.now().toString();
    const query = {
      role: 'user',
      content: input,
      id: 'q' + Date.now().toString(),
    } as TMessage;

    currentAnswer.current = {
      role: 'assistant',
      content: '',
      msgStatus: 'generating',
      id,
    };

    setMessages((v) => [...v, query, currentAnswer.current as TMessage]);
    setLoading(true);

    const stream = await client.chat.completions.create({
      model: 'qwen-plus',
      messages: [...messages, query] as ChatCompletionMessageParam[],
      stream: true,
    });

    for await (const chunk of stream) {
      currentAnswer.current = produce(currentAnswer.current, (draft) => {
        if (chunk.choices[0]?.finish_reason === 'stop') {
          draft.msgStatus = 'finished';
        }
        draft.content += chunk.choices[0]?.delta?.content || '';
      });
      setMessages((v) =>
        v.map((item) =>
          item.id === currentAnswer.current?.id ? currentAnswer.current : item,
        ),
      );
    }

    setLoading(false);
  };

  return (
    <ConfigProvider {...carbonTheme} prefix="spark-chat" prefixCls="spark-chat">
      <div className="h-[80vh] m-[20px] flex flex-col">
        <Bubble.List
          items={messages}
          classNames={{
            wrapper: 'flex-1 h-[0]',
          }}
        />
        <Sender handleSend={handleSend} loading={loading} />
      </div>
    </ConfigProvider>
  );
}

export default App;

```

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

### RAG Example for OperateCard

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/components/OperateCard/index.en-US.md

Shows how to use OperateCard for Retrieval-Augmented Generation (RAG) scenarios. This example requires the IRagProps interface.

```tsx
import {
  OperateCard,
  type ChatMessage,
  useChat,
} from '@agentscope-ai/chat';

const App = () => {
  const { messages, append } = useChat({
    api: '/api/chat',
  });

  const handleOperate = async (data: any) => {
    await append({
      role: 'user',
      content: JSON.stringify(data),
    });
  };

  return (
    <OperateCard
      title="RAG"
      description="Retrieval-Augmented Generation"
      onOperate={handleOperate}
      ragProps={{}}
    />
  );
};

export default App;
```

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

### Mermaid Class Diagram Example

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-chat/components/Mermaid/index.en-US.md

Renders a class diagram using the Mermaid component. This example defines classes and their relationships.

```tsx
import { Mermaid } from '@agentscope-ai/chat'

<Mermaid chart="classDiagram\nClass01\nClass02\nClass03\nClass01 --|> Class02\nClass01&#124;-- Class03\nClass02 .. Class03" />
```

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

### Basic Usage of Spark Design Components

Source: https://github.com/agentscope-ai/agentscope-spark-design/blob/main/packages/spark-design/docs/guide/fromScratch.en-US.md

Demonstrates how to set up the ConfigProvider with themes, prefixes, and locales, and use basic components like Button and Image.

```tsx
import {
  Button,
  Image,
  ConfigProvider,
  purpleDarkTheme,
  purpleTheme,
} from '@agentscope-ai/design';
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
import { Flex } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { useState } from 'react';

const App = () => {
  const [colorMode, setColorMode] = useState<'light' | 'dark'>('light');
  const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;

  const prefix = 'sps';
  return (
    <ConfigProvider
      {...theme} // you can choose from purpleTheme, purpleDarkTheme, carbonTheme and carbonDarkTheme
      prefix={prefix} // prefix for Ant Design and @agentscope-ai/design
      prefixCls={prefix}
      iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // optional parameter, you can get it from https://www.iconfont.cn/
      locale={zhCN} // language pack from Ant Design
      style={{
        width: '100%',
        height: '100%',
      }}
    >
      <div
        style={{
          width: '100%',
          height: '100%',
          backgroundColor: `var(--${prefix}-color-bg-base)`,
        }}
      >
        <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
          <Image
            width={120}
            src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
          />
          <div
            style={{
              color: `var(--${prefix}-ant-color-text-base)`,
              fontSize: '24px',
              textAlign: 'center',
            }}
          >
            Hello Spark Design!
          </div>
          <Button
            type="primary"
            onClick={() => {
              setColorMode(colorMode === 'light' ? 'dark' : 'light');
            }}
            icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
          >
            {colorMode === 'light' ? 'dark' : 'light'} mode
          </Button>
        </Flex>
      </div>
    </ConfigProvider>
  );
};

export default App;

```