DOCSEARCHbyAlgolia
Submit Docs

ChatUI Documentation

repository·master·Indexed 26 days ago

https://github.com/alibaba/chatui

A React library and UI design language for creating Conversational User Interfaces (CUI). ChatUI provides a core library (@chatui/core) featuring components like Chat, Bubble, Checkbox, Radio, Filter, and Empty, along with the useMessages hook for state management. It includes built-in support for responsive design, accessibility, internationalization (i18n), and theme customization.

Tokens
27.4K
Snippets
29
Records
217
Agent score
89%

What's inside ChatUI

  3. Use the Tabs component

    master

    The Tabs component allows users to switch between different views within the same context, preventing frequent page jumps. It is suitable for switching page content, displaying categorized information, or showing multiple views.

    To use it, wrap multiple Tab components inside a Tabs component. You can control the active tab using the index prop and respond to changes via the onChange callback.

  5. Use the Empty component

    master

    The Empty component is used to display placeholder images and messages when data is empty, loading fails, or other exceptional states occur (e.g., network errors, insufficient permissions, or system maintenance). You can customize the visual state using the type prop or provide a custom image via the image prop. You can also include interactive elements like buttons as children.

    import React from 'react';
import { Empty, Button } from '@chatui/core';

export default function() {
  return (
    <div>
      {/* Basic usage */}
      <Empty tip="暂无数据" />

      {/* Error state with a button */}
      <Empty type="error" tip="网络拥挤，排队中" desc="待会回来再试试呢">
        <Button color="primary">刷新</Button>
      </Empty>

      {/* Permission issue */}
      <Empty type="error_permission" desc="您没有权限查看相关内容">
        <Button color="primary">申请权限</Button>
      </Empty>

      {/* Custom image */}
      <Empty
        image="//gw.alicdn.com/tfs/TB1uYH4QoY1gK0jSZFMXXaWcVXa-218-56.svg"
        tip="自定义图片"
      />
    </div>
  );
}

  6. Use the Filter component

    master

    The Filter component provides filtering functionality, allowing users to select different options to filter data. It supports nested options (hierarchical filtering) and can be used in both uncontrolled and controlled modes.

    Common use cases include product filtering, data filtering, category selection, and multi-condition filtering.

    import React, { useState } from 'react';
import { Filter } from '@chatui/core';

const options = [
  {
    label: '红包状态',
    children: [
      { label: '可使用' },
      { label: '已使用' },
      { label: '已过期' },
    ],
  },
  {
    label: '红包面额',
    children: [
      { label: '0-10' },
      { label: '11-50' },
      { label: '51-100' },
      { label: '100以上' },
    ],
  },
];

export default function() {
  const [value, setValue] = useState({});

  return (
    <div>
      {/* Uncontrolled usage */}
      <Filter
        options={options}
        onChange={(value) => console.log('筛选值:', value)}
      />

      {/* Controlled usage */}
      <Filter
        options={options}
        value={value}
        onChange={(value) => setValue(value)}
      />

      {/* Large size */}
      <Filter
        options={options}
        size="lg"
        onChange={(value) => console.log('筛选值:', value)}
      />

      {/* Specify items per row */}
      <Filter
        options={options}
        itemsPerRow={2}
        onChange={(value) => console.log('筛选值:', value)}
      />
    </div>
  );
}

  8. Configure RadioGroup layout and alignment

    master

    You can control how RadioGroup options are positioned and aligned using the following props:

    • Vertical Layout: Use the block prop to stack options vertically. This ignores maxPerRow and flex.
    • Alignment: Use align="left" or align="right" to set text alignment. The default is centered.
    • Grid-like Layout: Use maxPerRow={n} to specify the maximum number of items per row. For example, if you have 4 options and maxPerRow={3}, they will wrap into two rows (3 + 1).
    • Equal Distribution: Use the flex prop to make all options share the container width equally. This is useful when the number of options is dynamic.

  9. Use the Ribbon component

    master

    The Ribbon component is used to display decorative badges in the corner of a card or container. It is ideal for labeling statuses (e.g., 'Used', 'Expiring soon'), product states (e.g., 'Hot Sale', 'New'), or content types (e.g., 'Recommended', 'Featured').

    Note: To ensure the Ribbon displays correctly within a container, the parent container should have position: 'relative' set in its style.

    import React from 'react';
import { Ribbon, Card } from '@chatui/core';

export default function() {
  return (
    <div style={{ position: 'relative', width: '160px', height: '80px' }}>
      <Ribbon>推荐</Ribbon>
    </div>
  );
}

  11. Configure CheckboxGroup layout with maxPerRow and flex

    master

    You can control how CheckboxGroup options are arranged using maxPerRow and flex.

    • maxPerRow: Controls the maximum number of options per row. The width of each option is dynamically calculated using the CSS variable --max-per-row.
    • flex: Enables an equal distribution layout where options evenly divide the container width.
    • Priority: flex has higher priority than maxPerRow. If both are set, flex takes effect.
    • block: When block is set, options are arranged vertically and ignore maxPerRow and flex settings.