[RFC] Refactoring the Conversations component

[kimteayon]

Summary

升级重构conversations组件

Motivation

新增能力

1、新对话按钮
2、折叠分类面板
3、快捷键逻辑配置和实现: 新对话快捷/切换对话快捷键

Detailed Design

ConversationsProps

新增属性

  /**
   * @desc 新建对话按钮的配置
   * @descEN  Config of the new chat button
   */
  creation?: CreationProps;

  /**
   * @desc 是否支持分组, 开启后默认按 {@link Conversation.group} 字段分组
   * @descEN If grouping is supported, it defaults to the {@link Conversation.group} field
   */
  groupable?: boolean | Groupable;

  /**
   * @desc 自定义快捷键
   * @descEN Custom Shortcut Keys
   */
  shortcutKeys?: {
    creation?: ShortcutKeys<number>;
    items?: ShortcutKeys<'number'> | ShortcutKeys<number>[];
  };

  /**
   * @desc 语义化结构 className
   * @descEN Semantic structure class names
   */
  classNames?: {
    creation?: string;
    item?: string;
  };

  /**
   * @desc 语义化结构 style
   * @descEN Semantic structure styles
   */
  styles?: {
    creation?: React.CSSProperties;
    item?: React.CSSProperties;
  };

CreationProps

 interface CreationProps {
  label?: React.ReactNode | ((info: CreationLabelInfo) => React.ReactNode);
  align?: 'start' | 'center' | 'end';
  prefixCls?: string;
  className?: string;
  style?: React.CSSProperties;
  shortcutKeyInfo?: ShortcutKeyInfoType;
  disabled?: boolean;
  icon?: React.ReactNode | (() => React.ReactNode);
  onClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}

Groupable

 interface Groupable extends CollapsibleOptions {
  /**
   * @desc 自定义分组标签渲染
   * @descEN Semantic custom rendering
   */
  label?: GroupLabel;
  collapsible?: Collapsible;
}
 type CollapsibleOptions = {
  /**
   * @desc 初始化展开的节点
   * @descEN default expanded keys
   */
  defaultExpandedKeys?: string[];

  /**
   * @desc 当前展开的节点
   * @descEN current expanded keys
   */
  expandedKeys?: string[];

  /**
   * @desc 展开节点变化回调
   * @descEN callback when expanded keys change
   */
  onExpand?: (expandedKeys: string[]) => void;
};

Use

     <Conversations
        creation={{
          disabled: true,
          onClick: newChatClick,
        }}
        style={style}
        defaultActiveKey="write"
        onActiveChange={(value) => {
          console.log(value);
        }}
        shortcutKeys={{
          creation: ['Meta', KeyCode.K],
          items: ['Alt', 'number'],
        }}
        groupable={{
          label: (group) => {
            return group !== 'Today' ? (
              <Flex gap="small">
                <CodeSandboxOutlined />
                {group}
              </Flex>
            ) : (
              group
            );
          },
          collapsible: (group) => {
            return group !== 'Today';
          },
         expandedKeys: expandedKeys,
         onExpand: setExpandedKeys,
        }}
        items={items}
      />

[petercat-assistant[bot]]

It seems like you are discussing a refactoring plan for the Conversations component in version 2.0. The plan includes:

1. New Features:

   • A new conversation button.
   • Collapsible category panels.
   • Configuration and implementation of shortcut key logic.

2. Detailed Design:

   • While the detailed design is not provided in the text, it would typically involve specifying how these new features will be integrated into the existing component, including any changes to the component's architecture, user interface, and interactions.

If you have any specific questions or need further assistance regarding this refactoring, feel free to ask!

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.