[RFC]: Sender 词槽模式新增内容编辑和技能选择能力

[kimteayon]

Sender词槽模式新增内容编辑和技能选择能力

Summary

Sender词槽模式目前内置有三个能力：input、select 、tag。

• 其中 input 能力使用的antd的input组件实现，宽度是固定的并且光标没办法内外部切换，因此新增一个content内容类型，使用可编辑span实现。
• tag为固定标签，不满足技能选择能力：固定在input头部，光标不可以移动到最左边，同时可以删除和关闭标签。

Motivation

content

Skill

Detailed Design

Content Type

interface SlotConfigContentType extends SlotConfigBaseType {
  type: 'content';
  key: string;
  props?: {
    defaultValue?: any;
    [key: string]: any;
  };
}

Skill Type

interface SkillType {
  label?: string,
  value: string,
  ?:
  boolean | { closeIcon?: React.ReactNode; disabled?: boolean; toolTip?: TooltipProps }
}

关联能力实现

1、content 可指定 key 处罚 focus。
2、content 删除内容实现、删除词槽实现。
2、skill 控制光标，禁止出现在头部。

REF

deleteSlot: (key: string)=>void;

Example Usage

const slotConfig = [
   { type: 'content', key: 'key1', props: { placeholder: 'Enter a name'} },
];
<Sender skill={{
  lable: "图片生成",
  value: "image",
}} slotConfig={slotConfig}/>