### Navigate, Install Dependencies, and Run Dev Server

Source: https://x.ant.design/docs/react/use-with-vite

Navigates into the newly created project directory, installs all necessary project dependencies, and starts the Vite development server. This allows you to see your application running locally and test changes in real-time.

```bash
cd antdx-demo
npm install
npm run dev

```

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

### Navigate and Start React Project

Source: https://x.ant.design/docs/react/use-with-create-react-app

Navigates into the newly created project directory and starts the development server. This command will compile the React application and open it in your default web browser, typically at http://localhost:3000.

```bash
cd antdx-demo
npm run start
```

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

### Navigate and Start Next.js Dev Server

Source: https://x.ant.design/docs/react/use-with-next

Navigates into the created Next.js project directory and starts the development server. Visiting the specified localhost URL will confirm successful setup.

```bash
$ cd antdx-demo
$ npm run dev
```

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

### Start Rsbuild Development Server

Source: https://x.ant.design/docs/react/use-with-rsbuild

Navigates to the project directory and starts the development server for a Rsbuild project. This command assumes the project has been initialized and dependencies installed.

```bash
$ cd demo
$ npm run dev
```

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

### Create React App TypeScript Project

Source: https://x.ant.design/docs/react/use-with-create-react-app

Initializes a new React project using create-react-app with TypeScript template. Ensure you have Node.js and npm/yarn/pnpm/bun installed. This command sets up the basic project structure and installs necessary React dependencies.

```bash
npx create-react-app antdx-demo --template typescript
```

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

### Create Vite React App

Source: https://x.ant.design/docs/react/use-with-vite

Initializes a new Vite project for React development. This command sets up the project structure and installs basic dependencies required for a Vite-React application. Ensure you have Node.js and npm/yarn/pnpm/bun installed.

```bash
$ npm create vite antdx-demo

```

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

### Responsive Size Prompts with Styles (JavaScript)

Source: https://x.ant.design/components/prompts

Demonstrates how to use `wrap` and `styles` props to control the display of prompts with a fixed width, enabling responsive behavior. This example shows a structured list of prompts categorized under 'Hot Topics', 'Design Guide', and 'Start Creating'.

```javascript
<Prompts
  wrap
  styles={{
    promptItem: {
      width: '200px', // Example fixed width
    }
  }}
  items={[
    { key: 'hot_topics', label: 'Hot Topics', children: [
      { key: 'what_is_x', label: 'What's new in X?' },
      { key: 'what_is_agi', label: 'What's AGI?' },
      { key: 'where_is_doc', label: 'Where is the doc?' }
    ]},
    { key: 'design_guide', label: 'Design Guide', children: [
      { key: 'design_product', label: 'How to design a good product?' },
      { key: 'know_well', label: 'Know the well' },
      { key: 'set_ai_role', label: 'Set the AI role' },
      { key: 'express_feeling', label: 'Express the feeling' }
    ]},
    { key: 'start_creating', label: 'Start Creating', children: [
      { key: 'new_project', label: 'How to start a new project?' }
    ]},
    { key: 'fast_start', label: 'Fast Start', children: [
      { key: 'install_x', label: 'Install Ant Design X' }
    ]},
    { key: 'online_playground', label: 'Online Playground', children: [
      { key: 'play_web', label: 'Play on the web without installing' }
    ]}
  ]}
/>
```

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

### Install Ant Design X Package

Source: https://x.ant.design/docs/react/use-with-vite

Installs the Ant Design X library as a dependency for your project using npm. This command should be run after the initial project setup and before importing components into your application.

```bash
$ npm install @ant-design/x --save

```

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

### FileCard Basic Usage Example

Source: https://x.ant.design/components/file-card

Shows the basic implementation of the FileCard component to display a PDF file with its name and size. This serves as a starting point for integrating FileCard into your application.

```javascript
<FileCard name="pdf-file.pdf" size="1 KB" />
```

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

### Install Ant Design X SDK using npm

Source: https://x.ant.design/x-sdks/introduce

This snippet shows how to install the @ant-design/x-sdk package using npm. It is the recommended method for development and production, ensuring access to the full ecosystem and toolchain. Ensure you have Node.js and npm installed.

```bash
$ npm install @ant-design/x-sdk --save
```

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

### Start Local Development Server with yarn

Source: https://x.ant.design/docs/react/contributing

Runs the Ant Design website locally using yarn. This command is an alternative to `npm start` for local development.

```bash
#!/bin/bash

$ yarn start
```

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

### Install Ant Design X for React

Source: https://x.ant.design/x-markdowns/custom-plugin

This command installs the Ant Design X React UI library. It is a prerequisite for building AI-driven interfaces with Ant Design X.

```bash
npm install @ant-design/x --save  # React version
```

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

### Install CSS-in-JS Library

Source: https://x.ant.design/docs/react/use-with-next

Installs the necessary `@ant-design/cssinjs` library using npm, yarn, pnpm, or Bun. Ensure the version matches the one used by `@ant-design/x` to prevent React instance conflicts.

```bash
# Using npm
$ npm install @ant-design/cssinjs --save
```

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

### Example Usage of XRequest in React

Source: https://x.ant.design/x-sdks/introduce

This React component demonstrates the usage of the `XRequest` API from `@ant-design/x-sdk`. It shows how to make a request to an AI chat API, handle different states (pending, success, error), and process streaming updates. This example requires React and `@ant-design/x-sdk` to be installed.

```tsx
import React, { useEffect, useState } from 'react';
import { XRequest } from '@ant-design/x-sdk';
  
export default () => {
  const [status, setStatus] = useState<'string'>('');
  const [lines, setLines] = useState<Record<string, string>[]>([]);
  
  useEffect(() => {
    setStatus('pending');
  
    XRequest('https://api.example.com/chat', {
      params: {
        model: 'gpt-3.5-turbo',
        messages: [{ role: 'user', content: 'hello, who are u?' }],
        stream: true,
      },
      callbacks: {
        onSuccess: (messages) => {
          setStatus('success');
          console.log('onSuccess', messages);
        },
        onError: (error) => {
          setStatus('error');
          console.error('onError', error);
        },
        onUpdate: (msg) => {
          setLines((pre) => [...pre, msg]);
          console.log('onUpdate', msg);
        },
      },
    });
  }, []);
  
  return (
    <div>
      <div>Status: {status}</div>
      Open Sandbox
      Open Sandbox
    </div>
  );
};
```

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

### Basic Usage of Ant Design X Welcome Component

Source: https://x.ant.design/components/welcome

Shows the basic implementation of the Ant Design X Welcome component. This example renders the default welcome message and functionality.

```javascript
import { Welcome } from "@ant-design/x";

function App() {
  return (
    <>
      <h4>Hello, I'm Ant Design X</h4>
      <Welcome />
    </>
  );
}
```

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

### Install Dependencies with npm

Source: https://x.ant.design/docs/react/contributing

Installs all necessary dependencies for the Ant Design X project using npm. This is a prerequisite for running most development commands.

```bash
#!/bin/bash

$ npm install
```

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

### Install Next.js Registry for App Router

Source: https://x.ant.design/docs/react/use-with-next

Installs the '@ant-design/nextjs-registry' package, which is required for correctly handling Server-Side Rendering styles with Ant Design X when using Next.js's App Router.

```bash
$ npm install @ant-design/nextjs-registry --save
```

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

### Install Dependencies with yarn

Source: https://x.ant.design/docs/react/contributing

Installs all necessary dependencies for the Ant Design X project using yarn. This is an alternative package manager to npm.

```bash
#!/bin/bash

$ yarn install
```

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

### Import and Use Ant Design X Bubble Component

Source: https://x.ant.design/docs/react/use-with-vite

Demonstrates how to import the `Bubble` component from the `@ant-design/x` library into a React component and render it. This example shows a basic usage within the `App.js` file of a Vite project.

```jsx
import React from 'react';
import { Bubble } from '@ant-design/x';


const App = () => (
  <div className="App">
    <Bubble content="Hello world!" />
  </div>
);


export default App;

```

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

### Install Ant Design X Markdown using npm

Source: https://x.ant.design/x-markdowns/introduce

This command installs the @ant-design/x-markdown package using npm. It's the recommended method for development and production, providing access to the ecosystem and toolchain.

```bash
npm install @ant-design/x-markdown --save
```

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

### Install Ant Design X Component

Source: https://x.ant.design/docs/react/use-with-rsbuild

Installs the Ant Design X library using npm. This is a prerequisite for using its components in your React application.

```bash
$ npm install @ant-design/x --save
```

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

### Start Local Development Server with npm

Source: https://x.ant.design/docs/react/contributing

Runs the Ant Design website locally, allowing developers to view and test changes in real-time. This command is essential for local development and testing.

```bash
#!/bin/bash

$ npm start
```

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

### Create Next.js App

Source: https://x.ant.design/docs/react/use-with-next

Initializes a new Next.js project using npx. This command scaffolds the project and installs necessary dependencies. It may prompt for configuration options and offers advice on handling network issues and registry configurations.

```bash
$ npx create-next-app antdx-demo
```

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

### FileCard.List Usage Example

Source: https://x.ant.design/components/file-card

Shows how to use the FileCard.List component to display multiple FileCard items. It takes an array of FileCardProps as the 'items' prop.

```javascript
const fileList = [
  { name: 'excel-file.xlsx', size: '1 KB' },
  { name: 'word-file.docx', size: '1 KB' },
  { name: 'pdf-file.pdf', size: '1 KB' }
];

<FileCard.List items={fileList} />
```

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

### Custom Chat Provider Implementation Example (TypeScript)

Source: https://x.ant.design/x-sdks/chat-provider-custom

Provides a concrete implementation of the AbstractChatProvider for a custom chat service. This example demonstrates how to define custom input, output, and message types, and implement the necessary transformation methods to handle data from a specific model or agent. It includes logic for transforming request parameters, formatting user messages, and processing streamed responses.

```typescript
// Type definitions
type CustomInput = {
  query: string;
};


type CustomOutput = {
  data: string;
};


type CustomMessage = {
  content: string;
  role: 'user' | 'assistant';
};


class CustomProvider<
  ChatMessage extends CustomMessage = CustomMessage,
  Input extends CustomInput = CustomInput,
  Output extends CustomOutput = CustomOutput,
> extends AbstractChatProvider<ChatMessage, Input, Output> {
  transformParams(requestParams: Partial<Input>, options: XRequestOptions<Input, Output>): Input {
    if (typeof requestParams !== 'object') {
      throw new Error('requestParams must be an object');
    }
    return {
      ...(options?.params || {}),
      ...(requestParams || {}),
    } as Input;
  }
  transformLocalMessage(requestParams: Partial<Input>): ChatMessage {
    return {
      content: requestParams.query,
      role: 'user',
    } as unknown as ChatMessage;
  }
  transformMessage(info: TransformMessage<ChatMessage, Output>): ChatMessage {
    const { originMessage, chunk } = info || {};
    if (!chunk || !chunk?.data || (chunk?.data && chunk?.data?.includes('[DONE]'))) {
      return {
        content: originMessage?.content || '',
        role: 'assistant',
      } as ChatMessage;
    }
    const chunkJson = JSON.parse(chunk.data);
    const content = originMessage?.content || '';
    return {
      content: `${content || ''}${chunkJson.data || ''}`,
      role: 'assistant',
    } as ChatMessage;
  }
}

```

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

### Data Fetching: Example of a User Card Component

Source: https://x.ant.design/x-markdowns/components

Provides an example of a `UserCard` component that fetches user data based on a `data-username` attribute and the `streamStatus`. It uses `useState` and `useEffect` for data fetching and state management. Assumes an `/api/users/:username` endpoint exists.

```tsx
const UserCard = ({ domNode, streamStatus }) => {
  const [user, setUser] = useState(null);
  const username = domNode.attribs?.['data-username'];


  useEffect(() => {
    if (username && streamStatus === 'done') {
      fetch(`/api/users/${username}`)
        .then((r) => r.json())
        .then(setUser);
    }
  }, [username, streamStatus]);


  if (!user) return <div>Loading...</div>;


  return (
    <div className="user-card">
      <img src={user.avatar} alt={user.name} />
      <span>{user.name}</span>
    </div>
  );
};

```

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

### Sender Component Usage Example

Source: https://x.ant.design/components/sender

Provides examples of correct and incorrect usage of the Sender component, particularly concerning slot mode.

```APIDOC
## Sender Component Usage

### Description

Illustrates how to correctly use the Sender component, especially when operating in slot mode, highlighting the management of `slotConfig` and `skill` state.

### Incorrect Usage (Uncontrolled)

This example shows an incorrect approach where `slotConfig` and `skill` are treated as uncontrolled values, leading to potential state synchronization issues.

```jsx
// ❌ Incorrect usage, slotConfig and skill are for uncontrolled usage
const [config, setConfig] = useState([]);
const [skill, setSkill] = useState([]);
<Sender
  slotConfig={config}
  skill={skill}
  onChange={(value, e, config, skill) => {
    setConfig(config);
    setSkill(skill)
  }}
/>
```

### Correct Usage (Controlled)

This example demonstrates the recommended way to use the Sender component, ensuring proper state management, especially in slot mode.

```jsx
// ✅ Correct usage
<Sender
  key={key} // Ensure a unique key for re-renders
  slotConfig={config}
  skill={skill}
  onChange={(value, _e, config, skill) => {
    // State updates should be handled carefully in controlled mode
    // For slot mode, rely on ref and callback events for input values
    // This example assumes a controlled scenario for demonstration
    setKey('new_key'); // Example state update
  }}
/>
```

### Slot Mode Notes

- In slot mode, the `value` and `defaultValue` properties are **invalid**. Use `ref` and callback events to obtain input box values and slot configurations.
- In slot mode, the third parameter `config` of `onChange`/`onSubmit` callbacks is **only used to retrieve the current structured content**.
```

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

### Basic ThoughtChain Usage Example

Source: https://x.ant.design/components/thought-chain

Provides a basic example of how to use the ThoughtChain component. It shows the structure of the `items` prop, which is an array of `ThoughtChainItemType` objects, each representing a node in the call chain.

```javascript
const thoughtChainItems = [
  {
    title: 'Knowledge Query',
    description: 'Query knowledge base',
    status: 'success'
  },
  {
    title: 'Web Search Tool Invoked',
    description: 'Tool invocation',
    status: 'success'
  },
  {
    title: 'Model Invocation Complete',
    description: 'Invoke model for response',
    status: 'success'
  },
  {
    title: 'Response Complete',
    description: 'Task completed',
    status: 'success'
  }
];

<ThoughtChain items={thoughtChainItems} />
```

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

### Declare Products Route in Umi Configuration

Source: https://x.ant.design/docs/react/use-with-umi

This snippet shows how to declare the new '/products' route in the UmiJS configuration file (.umirc.ts). Routes are configured line by line in this example, offering flexibility. The '+' indicates the added line for the products route.

```typescript
import {
  defineConfig
} from "umi";


export default defineConfig({
  routes: [
    { path: "/", component: "index" },
    { path: "/docs", component: "docs" },
+    { path: "/products", component: "products" },
  ],
  npmClient: "pnpm",
});
```

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

### Basic Usage of Actions Component

Source: https://x.ant.design/components/actions

Demonstrates the fundamental usage of the Actions component. This example shows how to render the component with basic configuration, suitable for simple action lists.

```jsx
<Actions />
```

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

### Render Streaming Markdown with Ant Design X

Source: https://x.ant.design/x-markdowns/examples

Demonstrates how to use the XMarkdown component to render streaming Markdown content, including configuration for custom components and HTML sanitization.

```typescript
import React from 'react';
import XMarkdown from 'path/to/XMarkdown';

// Assuming StreamingOption and DOMPurify.Config types are available
interface StreamingOption {
  hasNextChunk?: boolean;
  enableAnimation?: boolean;
  animationConfig?: any; // Replace 'any' with actual AnimationConfig type
  incompleteMarkdownComponentMap?: Record<string, string>;
}

interface DOMPurifyConfig {
  // DOMPurify configuration properties
}

interface XMarkdownProps {
  content: string;
  children?: string;
  components?: Record<string, React.ComponentType<any>>;
  paragraphTag?: keyof JSX.IntrinsicElements;
  streaming?: StreamingOption;
  config?: { extensions?: any[]; [key: string]: any }; // Replace 'any' with MarkedExtension type
  openLinksInNewTab?: boolean;
  dompurifyConfig?: DOMPurifyConfig;
  className?: string;
  rootClassName?: string;
  style?: React.CSSProperties;
}

const MyMarkdownComponent: React.FC = () => {
  const markdownContent = "# Hello, **Ant Design X**!\n\nThis is a *streaming* markdown example.";

  const customComponents = {
    h1: (props: any) => <h1 style={{ color: 'blue' }}>{props.children}</h1>,
    strong: (props: any) => <strong style={{ fontWeight: 'bold' }}>{props.children}</strong>,
  };

  const streamingOptions = {
    enableAnimation: true,
    animationConfig: { fadeDuration: 300, opacity: 0.5 },
    hasNextChunk: true,
  };

  const sanitizerConfig: DOMPurifyConfig = {
    // DOMPurify configuration
  };

  return (
    <XMarkdown
      content={markdownContent}
      components={customComponents}
      streaming={streamingOptions}
      dompurifyConfig={sanitizerConfig}
      className="custom-markdown"
      openLinksInNewTab={true}
    />
  );
};

export default MyMarkdownComponent;

```

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

### Example Ocean Theme CSS

Source: https://x.ant.design/x-markdowns/themes

Presents a complete CSS example for the 'ocean' theme in Ant Design X. This includes defining specific color variables for text, background, borders, primary/secondary elements, code blocks, and headings.

```css
/* x-markdown-ocean.css */
.x-markdown-ocean {
  /* Ocean theme color scheme */
  --x-markdown-color-text: #2c3e50;
  --x-markdown-color-bg: #f8fafc;
  --x-markdown-color-border: #e2e8f0;
  --x-markdown-color-primary: #0ea5e9;
  --x-markdown-color-secondary: #64748b;


  /* Code blocks */
  --x-markdown-color-code-bg: #f1f5f9;
  --x-markdown-color-code-border: #cbd5e1;


  /* Headings */
  --x-markdown-color-h1: #0f172a;
  --x-markdown-color-h2: #1e293b;
  --x-markdown-color-h3: #334155;
}


.x-markdown-ocean h1 {
  color: var(--x-markdown-color-h1);
  border-bottom: 2px solid var(--x-markdown-color-primary);
}


.x-markdown-ocean pre {
  background: var(--x-markdown-color-code-bg);
  border: 1px solid var(--x-markdown-color-code-border);
  border-radius: 6px;
}
```

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

### Ant Design X SDK: Basic Request Example

Source: https://x.ant.design/x-markdowns/custom-plugin

This React component demonstrates a basic usage of the XRequest API from the Ant Design X SDK. It shows how to make a streaming chat request, handle success, error, and update callbacks, and manage the request status and received lines.

```javascript
import React from 'react';
import { XRequest } from '@ant-design/x-sdk';

export default () => {
  const [status, setStatus] = React.useState<'string'>('');
  const [lines, setLines] = React.useState<Record<string, string>[]>([]);

  useEffect(() => {
    setStatus('pending');

    XRequest('https://api.example.com/chat', {
      params: {
        model: 'gpt-3.5-turbo',
        messages: [{ role: 'user', content: 'hello, who are u?' }],
        stream: true,
      },
      callbacks: {
        onSuccess: (messages) => {
          setStatus('success');
          console.log('onSuccess', messages);
        },
        onError: (error) => {
          setStatus('error');
          console.error('onError', error);
        },
        onUpdate: (msg) => {
          setLines((pre) => [...pre, msg]);
          console.log('onUpdate', msg);
        },
      },
    });
  }, []);

  return (
    <div>
      <div>Status: {status}</div>
      <div>Lines: {lines.length}</div>
    </div>
  );
};
```

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

### Attachments Component API Example (TypeScript)

Source: https://x.ant.design/components/attachments

Defines the TypeScript interface for `PlaceholderType`, which is used to configure the placeholder content for the Attachments component. This includes optional icon, title, and description.

```typescript
interface PlaceholderType {
  icon?: React.ReactNode;
  title?: React.ReactNode;
  description?: React.ReactNode;
}
```

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

### Browser Import for LaTeX Plugin

Source: https://x.ant.design/x-markdowns/plugins

This example shows how to import the LaTeX plugin in a browser environment using script and link tags. The plugin is made available as a global variable named 'Latex' after being loaded from the 'dist/plugins' directory.

```html
<script src="**/dist/plugins/latex.min.js"></script>
<script>
  const Latex = window.Latex;
</script>

```

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

### Use Ant Design X Components in Pages

Source: https://x.ant.design/docs/react/use-with-next

Demonstrates how to use Ant Design X components, such as `Bubble`, within your Next.js pages. This example shows a basic usage of the `Bubble` component displaying 'Hello world!'.

```tsx
import React from 'react';
import { Bubble } from '@ant-design/x';


const Home = () => (
  <div className="App">
    <Bubble content="Hello world!" />
  </div>
);


export default Home;

```

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

### FileCard for Image Display

Source: https://x.ant.design/components/file-card

Example of using FileCard to display an image. It showcases how the component handles image sources and potentially loading states for images.

```javascript
<FileCard type="image" src="your-image-url.png" />
```

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

### Basic Usage of DeepSeekChatProvider

Source: https://x.ant.design/x-sdks/chat-provider-deepseek

Demonstrates the fundamental integration of DeepSeekChatProvider with the useXChat hook for managing chat data operations. This setup allows for basic message sending and status updates.

```javascript
DeepSeekChatProvider works with useXChat for data operations.
```

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

### Theme Base Styles and Variables

Source: https://x.ant.design/x-markdowns/themes

Provides an example of CSS for a custom Ant Design X theme, defining base styles and CSS variables. This includes variables for colors, spacing, typography, and component-specific styling.

```css
/* Base container */
.x-markdown-theme-name {
  /* Base style variables */
  --font-size: 14px;
  --primary-color: #1677ff;
  --primary-color-hover: #4096ff;
  --heading-color: #000000;
  --text-color: rgba(0, 0, 0, 0.85);
  --border-color: rgba(240, 240, 240, 1);
  --line-color: rgba(5, 5, 5, 0.06);
  --light-bg: rgba(0, 0, 0, 0.04);
  --table-head-bg: rgba(250, 250, 250, 1);
  --table-body-bg: rgba(255, 255, 255, 1);
  --cite-bg: rgba(0, 0, 0, 0.1);
  --cite-hover-bg: rgba(0, 0, 0, 0.2);
  --border-radius-middle: 6px;
  --border-radius-small: 4px;
  --td-th-padding: 10px 12px;
  --border-font-weight: 600;
  --margin-block: 0 0 16px 0;
  --padding-ul-ol: 0 0 0 16px;
  --margin-ul-ol: 0 0 16px 28px;
  --margin-li: 0 0 14px 0;
  --hr-margin: 24px 0;
  --table-margin: 0 0 24px 0;
  --margin-pre: 0 0 16px 0;
}


/* Code block highlighting */
.x-markdown-theme-name .x-markdown-highlight-code {
  background: var(--x-markdown-color-code-bg);
  border: 1px solid var(--x-markdown-color-border);
}


/* Table styles */
.x-markdown-theme-name .x-markdown-table {
  border-color: var(--x-markdown-color-border);
}


/* Blockquote styles */
.x-markdown-theme-name .x-markdown-blockquote {
  border-left-color: var(--x-markdown-color-link);
}
```

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

### Extend Markdown Parsing with Marked.js Extensions

Source: https://x.ant.design/x-markdowns/examples

Illustrates how to extend the Markdown parsing capabilities of Ant Design X by providing custom Marked.js extensions via the `config` prop. This allows for the recognition and rendering of custom Markdown syntax.

```typescript
// Plugin example: footnote extension
const footnoteExtension = {
  name: 'footnote',
  level: 'inline',
  start(src) { return src.match(/\[\^/)?.index; },
  tokenizer(src) {
    const rule = /^\\[\^([^\\]+)\\]/;
    const match = rule.exec(src);
    if (match) {
      return {
        type: 'footnote',
        raw: match[0],
        text: match[1]
      };
    }
  },
  renderer(token) {
    return `<footnote>${token.text}</footnote>`;
  }
};

// Using the plugin
// Assuming XMarkdown component is imported and available
/*
<XMarkdown
  content="This is a footnote example[^1]"
  config={{ extensions: [footnoteExtension] }}
/>
*/

```

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

### Configure Ant Design X for Mobile Adaptation (TypeScript)

Source: https://x.ant.design/docs/react/faq

This snippet demonstrates how to configure Ant Design X components for mobile adaptation using TypeScript. It utilizes `ConfigProvider` to set theme customizations, specifically targeting mobile styles. The example shows how to use the `size` prop for components like `Bubble.List` and `Sender` to achieve a 'small' size suitable for mobile devices. It also highlights the use of Ant Design's Grid system and breakpoint system for responsive layouts, although not explicitly shown in the code.

```tsx
import { Bubble, Sender } from '@ant-design/x';
import { ConfigProvider } from 'antd';


const App = () => (
  <ConfigProvider
    theme={{
      components: {
        // You can customize mobile styles here
      },
    }}
  >
    <Bubble.List
      items={messages}
      size="small" // Use small size for mobile
    />
    <Sender placeholder="Please enter..." size="small" />
  </ConfigProvider>
);

```

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

### Build Application with npm

Source: https://x.ant.design/docs/react/use-with-umi

This snippet shows the command used to build the application for deployment. It utilizes `npm run build` which triggers the Umi build process, resulting in optimized and packaged resources for production. The output indicates the build success and lists the gzipped file sizes of various bundled assets, including JavaScript and CSS files, found in the `dist/` directory.

```bash
$ npm run build
info  - Umi v4.0.46
✔ Webpack
  Compiled successfully in 5.31s
info  - File sizes after gzip:
  122.45 kB  dist/umi.js
  575 B      dist/src__pages__products.async.js
  312 B      dist/src__pages__index.async.js
  291 B      dist/layouts__index.async.js
  100 B      dist/layouts__index.chunk.css
  55 B       dist/src__pages__products.chunk.css
event - Build index.html

```

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

### Initialize Rsbuild Project

Source: https://x.ant.design/docs/react/use-with-rsbuild

Initializes a new Rsbuild project using the create-rsbuild command. This command scaffolds a new project and allows selection of templates, such as React.

```bash
$ npm create rsbuild
```

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

### Variant Usage of Ant Design X Welcome Component

Source: https://x.ant.design/components/welcome

Illustrates how to use different variants of the Ant Design X Welcome component by setting the `variant` property. This allows for different visual styles.

```javascript
import { Welcome } from "@ant-design/x";

function App() {
  return (
    <>
      <h4>Hello, I'm Ant Design X</h4>
      <Welcome variant="filled" />
      <Welcome variant="borderless" />
    </>
  );
}
```

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

### Import Welcome Component from Ant Design X

Source: https://x.ant.design/components/welcome

Demonstrates how to import the Welcome component from the Ant Design X library. This is the initial step required to use the component in your React application.

```javascript
import { Welcome } from "@ant-design/x";
```

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

### Welcome Component API

Source: https://x.ant.design/components/welcome

Details about the properties available for the Welcome component.

```APIDOC
## Welcome Component API

### Description

This section details the properties available for configuring the Welcome component.

### Method

N/A (Component properties)

### Endpoint

N/A (Component)

### Parameters

#### Request Body

- **classNames** (Record<'icon' | 'title' | 'description' | 'extra', string>) - Optional - Custom style class names for different parts of each prompt item.
- **description** (React.ReactNode) - Optional - The description displayed in the prompt list.
- **extra** (React.ReactNode) - Optional - The extra operation displayed at the end of the prompt list.
- **icon** (React.ReactNode) - Optional - The icon displayed on the front side of the prompt list.
- **rootClassName** (string) - Optional - The style class name of the root node.
- **styles** (Record<'icon' | 'title' | 'description' | 'extra', React.CSSProperties>) - Optional - Custom styles for different parts of each prompt item.
- **title** (React.ReactNode) - Optional - The title displayed at the top of the prompt list.
- **variant** ('filled' | 'borderless') - Optional - Variant type. Default is 'filled'.

### Request Example

```json
{
  "title": "Hello, I'm Ant Design X",
  "description": "Base on Ant Design, AGI product interface solution, create a better intelligent vision~",
  "variant": "filled"
}
```

### Response

#### Success Response (200)

N/A (Component rendering)

#### Response Example

N/A (Component rendering)
```

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

### Generate Products Page Route with Umi CLI

Source: https://x.ant.design/docs/react/use-with-umi

This command generates the necessary files for a new 'products' page route using the UmiJS scaffolding tool. It creates a route component file (src/pages/products.tsx) and its associated styling file (src/pages/products.less).

```bash
npx umi g page products
```

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

### Implement Product UI Component with Ant Design X

Source: https://x.ant.design/docs/react/use-with-umi

This snippet demonstrates how to create a reusable `ProductList` component using Ant Design X and React within the Umi framework. It showcases various components like `XProvider`, `Bubble`, `Sender`, `Conversations`, `Prompts`, `Suggestion`, and `ThoughtChain` to build a chat-like UI. It includes functionality for conversation selection, message display, prompt suggestions, and user input with command triggering. The component also supports dynamic directionality (LTR/RTL).

```tsx
import React from 'react';
import {
  XProvider,
  Bubble,
  Sender,
  Conversations,
  Prompts,
  Suggestion,
  ThoughtChain,
} from '@ant-design/x';
import { Flex, Divider, Radio, Card, Typography } from 'antd';


import type { ConfigProviderProps, GetProp } from 'antd';
import {
  AlipayCircleOutlined,
  BulbOutlined,
  GithubOutlined,
  SmileOutlined,
  UserOutlined,
} from '@ant-design/icons';


export default () => {
  const [value, setValue] = React.useState('');
  const [direction, setDirection] =
    React.useState<GetProp<ConfigProviderProps, 'direction'>>('ltr');


  return (
    <>
      <Flex gap={12} style={{ marginBottom: 16 }} align="center">
        <Typography.Text>Direction:</Typography.Text>
        <Radio.Group value={direction} onChange={(e) => setDirection(e.target.value)}>
          <Radio.Button value="ltr">LTR</Radio.Button>
          <Radio.Button value="rtl">RTL</Radio.Button>
        </Radio.Group>
      </Flex>
      <Card>
        <XProvider direction={direction}>
          <Flex style={{ height: 500 }} gap={12}>
            <Conversations
              style={{ width: 200 }}
              defaultActiveKey="1"
              items={[
                {
                  key: '1',
                  label: 'Conversation - 1',
                  icon: <GithubOutlined />,
                },
                {
                  key: '2',
                  label: 'Conversation - 2',
                  icon: <AlipayCircleOutlined />,
                },
              ]}
            />
            <Divider type="vertical" style={{ height: '100%' }} />
            <Flex vertical style={{ flex: 1 }} gap={8}>
              <Bubble.List
                style={{ flex: 1 }}
                items={[
                  {
                    key: '1',
                    placement: 'end',
                    content: 'Hello Ant Design X!',
                    components: { avatar: <UserOutlined /> },
                  },
                  {
                    key: '2',
                    content: 'Hello World!',
                  },
                ]}
              />
              <Prompts
                items={[
                  {
                    key: '1',
                    icon: <BulbOutlined style={{ color: '#FFD700' }} />,
                    label: 'Ignite Your Creativity',
                  },
                  {
                    key: '2',
                    icon: <SmileOutlined style={{ color: '#52C41A' }} />,
                    label: 'Tell me a Joke',
                  },
                ]}
              />
              <Suggestion items={[{ label: 'Write a report', value: 'report' }]}>
                {({ onTrigger, onKeyDown }) => {
                  return (
                    <Sender
                      value={value}
                      onChange={(nextVal) => {
                        if (nextVal === '/') {
                          onTrigger();
                        } else if (!nextVal) {
                          onTrigger(false);
                        }
                        setValue(nextVal);
                      }}
                      onKeyDown={onKeyDown}
                      placeholder='Type "/" to trigger suggestion'
                    />
                  );
                }}
              </Suggestion>
            </Flex>
          </Flex>
          <ThoughtChain />
        </XProvider>
      </Card>
    </>
  );
};
```

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

### Basic Prompts Usage (JavaScript)

Source: https://x.ant.design/components/prompts

Demonstrates the basic implementation of the Prompts component. It shows how to render a list of interactive prompts without any special configurations. Assumes the necessary import statement is present.

```javascript
<Prompts items={[
  { key: 'spark', label: 'Ignite Your Creativity' },
  { key: 'background', label: 'Uncover Background Info' },
  { key: 'efficiency', label: 'Efficiency Boost Battle' },
  { key: 'joke', label: 'Tell me a Joke' },
  { key: 'solutions', label: 'Common Issue Solutions' }
]} />
```

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

### Replace HTML Tags with Custom React Components (TypeScript)

Source: https://x.ant.design/x-markdowns/examples

The 'components' property allows replacing standard HTML tags with custom React components. This is useful for customizing rendering styles and interactive behavior. The example shows replacing a `<footnote>` tag with a `CustomFootnote` React component.

```typescript
// Custom footnote component
const CustomFootnote = ({ children, ...props }) => (
  <sup
    className="footnote-ref"
    onClick={() => console.log('Clicked footnote:', children)}
    style={{ color: 'blue', cursor: 'pointer' }}
  >
    {children}
  </sup>
);


// Using component replacement
<XMarkdown
  content="<footnote>1</footnote>"
  components={{ footnote: CustomFootnote }}
/>
```

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

### Sender with Default Value

Source: https://x.ant.design/components/sender

Example of initializing the Sender component with a default value. This pre-populates the input field when it first renders.

```javascript
<Sender defaultValue="Initial Text" />
```

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

### Sender Expand Panel (Header)

Source: https://x.ant.design/components/sender

Demonstrates how to use the `header` prop to customize the expandable panel area of the Sender component, providing an example for file uploads.

```javascript
<Sender header={<FileUploader />} />
```

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

### Integrate XProvider with Ant Design

Source: https://x.ant.design/components/x-provider

Demonstrates how to replace antd's ConfigProvider with XProvider for global configuration in your application. This ensures that components from `@ant-design/x` receive the correct settings.

```diff
import { ConfigProvider } from 'antd';
import { XProvider } from '@ant-design/x';

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

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

### Collapsible ThoughtChain Node Example

Source: https://x.ant.design/components/thought-chain

Illustrates how to make individual nodes within the ThoughtChain collapsible. This is achieved by setting the `collapsible` property to `true` for specific `ThoughtChainItemType` objects.

```javascript
const collapsibleItems = [
  {
    key: 'node1',
    title: 'Collapsible Node',
    description: 'This node can be expanded or collapsed.',
    collapsible: true,
    content: 'Detailed information about this node.'
  }
];

<ThoughtChain items={collapsibleItems} />
```

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

### FileCard with Custom Mask

Source: https://x.ant.design/components/file-card

Example of applying a custom mask to a FileCard, which can be used to overlay additional information or controls on the card, particularly for non-image file types.

```javascript
<FileCard mask={<div>Custom Mask</div>} />
```

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

### Creating a New Theme File

Source: https://x.ant.design/x-markdowns/themes

Demonstrates the bash command to create a new CSS file for a custom theme within the Ant Design X project structure. This is the first step in developing a new theme.

```bash
touch packages/x-markdown/src/themes/your-theme-name.css
```

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

### Import Sources Component (TypeScript)

Source: https://x.ant.design/components/sources

Demonstrates how to import the Sources component from the Ant Design X library. This is a common starting point for using the component in a TypeScript project.

```typescript
import { Sources } from "@ant-design/x";
```

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

### Import XRequest from Ant Design X

Source: https://x.ant.design/x-sdks/x-request

This snippet shows the basic import statement required to use the XRequest component from the '@ant-design/x' library. Ensure the library is installed in your project.

```typescript
import { XRequest } from "@ant-design/x";
```

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

### Controlled Collapsible ThoughtChain Example

Source: https://x.ant.design/components/thought-chain

Demonstrates a controlled collapsible ThoughtChain where the expansion state is managed externally. This involves using the `expandedKeys` and `onExpand` props to control which nodes are open.

```javascript
const [expandedKeys, setExpandedKeys] = useState(['node1']);

const handleExpand = (keys) => {
  setExpandedKeys(keys);
};

const controlledItems = [
  {
    key: 'node1',
    title: 'Controlled Node',
    description: 'Expansion is controlled by state.',
    collapsible: true,
    content: 'More details.'
  }
];

<ThoughtChain 
  items={controlledItems}
  expandedKeys={expandedKeys}
  onExpand={handleExpand}
/>
```

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

### Browser Import of Ant Design X SDK

Source: https://x.ant.design/x-sdks/introduce

This snippet demonstrates how to import the Ant Design X SDK directly into a browser environment using script tags. It highlights the use of the global `XSDK` variable. Note that this method is strongly discouraged due to limitations in on-demand loading and bug fixing. Ensure React and ReactDOM are imported prior to these SDK files.

```html
<script src="path/to/x-sdk.js"></script>
<link href="path/to/x-sdk.min.css" rel="stylesheet">
```

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

### Basic Attachments Usage (React)

Source: https://x.ant.design/components/attachments

Demonstrates the basic usage of the Attachments component. It allows users to upload files via clicking or dragging. This is the foundational example for integrating the component.

```jsx
import React from 'react';
import { Attachments } from '@ant-design/x';

const App = () => (
  <Attachments />
);
```

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

### FileCard with Different Sizes

Source: https://x.ant.design/components/file-card

Illustrates how to render FileCard components with different size variants ('small', 'default'). This allows for flexible UI design based on available space or visual hierarchy.

```javascript
<FileCard name="image-file.png" size="small" />
<FileCard name="image-file.png" size="default" />
```

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

### Customization Example for ThoughtChain

Source: https://x.ant.design/components/thought-chain

Shows how to customize the appearance and behavior of the ThoughtChain component using various props like `line`, `classNames`, and `styles`. This allows for tailoring the component to specific design requirements.

```javascript
<ThoughtChain 
  items={myItems}
  line='dashed' 
  classNames={{
    root: 'my-thought-chain-root',
    item: 'my-thought-chain-item'
  }}
  styles={{
    itemContent: {{ color: 'blue' }}
  }}
/>
```

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

### Build Project with npm

Source: https://x.ant.design/docs/react/contributing

Builds the TypeScript code into 'lib' and 'es' directories and creates a UMD build for '@ant-design/x'. This command is used for generating production-ready builds.

```bash
#!/bin/bash

$ npm run compile
```

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

### Streaming Rendering: Determining Component Status

Source: https://x.ant.design/x-markdowns/components

Explains how XMarkdown handles streaming rendering by passing a `streamStatus` prop to components. This example shows a `StreamingComponent` that conditionally renders content based on the `streamStatus` ('loading' or 'done').

```tsx
const StreamingComponent = ({ streamStatus, children }) => {
  if (streamStatus === 'loading') {
    return <div className="loading">Loading...</div>;
  }
  return <div>{children}</div>;
};

```

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

### Basic Usage: Customizing Headings with React Components

Source: https://x.ant.design/x-markdowns/components

Demonstrates how to replace the default `h1` tag with a custom React component (`CustomHeading`) in XMarkdown. This allows for custom styling and behavior of headings. Ensure you have React and '@ant-design/x-markdown' installed.

```tsx
import React from 'react';
import { XMarkdown } from '@ant-design/x-markdown';


const CustomHeading = ({ children, ...props }) => (
  <h1 style={{ color: '#1890ff' }} {...props}>
    {children}
  </h1>
);


const App = () => <XMarkdown content="# Hello World" components={{ h1: CustomHeading }} />;
```