「RFC」Suggestion 快捷指令/快速建议

[ONLY-yours]

Summary

新增名为 Shortcuts - 快捷指令 的新组件。用于快速配置对话内容下的快捷指令

Motivation

组件需求

需要对某些特殊指令或者输入作出指令反馈，但是并不属于自动补全的范畴，一般只有当用户已开始空内容区域的时候才会对该指令作出反馈。

Detailed Design

组件名称

• 英文名称: Shortcuts
• 中文名称: 快捷指令

API 设计

interface Shortcut {
  /**
   * 唯一标识符
   */
  id: string;

  /**
   * 快捷指令的显示标签，可以是任意 ReactNode
   */
  label: React.ReactNode;

  /**
   * 快捷指令的图标，可以是任意 ReactNode
   */
  icon?: React.ReactNode;

  /**
   * 快捷指令的点击事件处理函数
   */
  onClick?: () => void;

  /**
   * 每一个 Shortcut 的 value
   */
  value: string;

  /**
   * 可选的特殊右侧内容渲染
   */
  extra?: React.ReactNode;
}

interface ShortcutsProps {
  /**
   * 快捷指令数组，可以是树形结构
   */
  shortcuts: Shortcut[];

  /**
   * 触发快捷指令弹出显示的字符，默认为 "/"
   */
  triggerCharacter?: string;

  /**
   * 可选的子组件，一般为输入框
   */
  children?: React.ReactNode;

  /**
   * 标题，可以是任意 ReactNode
   */
  title?: React.ReactNode;

  /**
   * 右侧额外区域，可以是任意 ReactNode
   */
  extra?: React.ReactNode;
}

Example Usage

Basic with Input

import React, { useState } from 'react';
import Shortcuts, { Shortcut } from '@ant-design/x';

const shortcuts: Shortcut[] = [
  { id: '1', label: '写一篇报告，关于：' },
  { id: '2', label: '画一幅画：' },
  { id: '3', label: '查一个知识：',extra: <div>ExtraLink</div> }
];

const App: React.FC = () => {
  const [inputValue, setInputValue] = useState('');

  return (
    <Shortcuts shortcuts={shortcuts}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入 '/' 触发快捷指令"
      />
    </Shortcuts>
  );
};

export default App;

Basic without input

import React from 'react';
import Shortcuts, { Shortcut } from '@ant-design/x';

const shortcuts: Shortcut[] = [
  { id: '1', label: '写一篇报告，关于：' },
  { id: '2', label: '画一幅画：' },
  { id: '3', label: '查一个知识：', extra: <div>ExtraLink</div>}
];

const App: React.FC = () => {
  return (
    <Shortcuts shortcuts={shortcuts} />
  );
};

export default App;

Hints

• 这个组件有两种模式，有 children 为输入框的时候，则当用户输入特定 string 且已开始内容为空的时候，才会弹出使用，一般这个特定触发为。“/” 字符
• 如果该组件独立使用的时候，则是一个长期展开的内容，不包含输入框。
• 这些快捷指令是一个数组，但是有可能是一个树形的结构，也就是多层指令集

[afc163]

Suggestion？

[ONLY-yours]

感觉 Suggestion 确实会更好

[YumoImer]

树形结构 -> 分组 ？类似语雀。

[ONLY-yours]

这里我没太想好要怎么处理，其实可以改成一级的，多层级是不是没必要，改动成一级的是 Title，然后 Children 的部分就在右侧搞一个面板直接 ReactNode 渲染

[YumoImer]

感觉可以参考下语雀的【/】交互，默认就一级，然后可以分组

[zombieJ]

分离式和合体两者差异比较大。如果是万用的，感觉分离式的会比较好。（话说这个非 AI 业务里也能用，几乎每个业务的搜索都是弹层的）

[ONLY-yours]

其实就是「是否有触发方法」这个地方的差距