[RFC]Sender 增加词槽填空或者选择能力

[kimteayon]

Summary

Sender 增加词槽填空或者选择能力
#552

Motivation

豆包

百度

antdx设计

Detailed Design

props设计

value/defaultValue

描述：值/默认值
类型：string
eg：帮我写一份<slot name="workReal">工作报告 </slot>，用于<slot name="workReal">年终总结</slot>

wordSlot

描述：词槽配置
类型：

{
  type:'select'|'input',
  placeholder: string,
  options?:{ label, value }[]
}[]

eg

[
  {
    type:'input',
    placeholder: '例如工作报告、工作总结等',
  },
  {
    type:'select',
    placeholder: '用于的场合请选择',
    options:[{
      label:'年终总结',
      value:'yearEndSummary',
    }]
  }
]

autoSize

描述：自适应内容高度，可设置为 true | false 或对象：{ minRows: 2, maxRows: 6 }
类型：

boolean | {
  minRows: number,
  maxRows: number,
}

onSubmit

描述：点击发送按钮的回调（onChange和 onSubmit参数会不一致无法统一，是否需要？可以通过ref获取）
类型：

(
message: string,  // 原有参数，获取输入框数据，含有词槽配置
messageOfText: string // 不含有词槽配置的 是否需要区分？还是说message直接返回不含词槽配置的内容。
) => void;

Development

• 词槽（示意版）

<div contentEditable={true}>
  帮我写一份
  <span contenteditable="false" class="">&nbsp;</span> // 用于光标选择
  <span class='xxx' placeholder="例如工作报告、工作总结等" contentEditable={true}>工作报告</span>
  <span contenteditable="false" class="">&nbsp;</span> // 用于光标选择
  
  ，用于
  <span contenteditable="false" class="">&nbsp;</span> // 用于光标选择
  <div class='xxx'  placeholder="用于的场合请选择" contentEditable={false}>
    <Dropdown>年终总结<Dropdown>
   </div>
  <span contenteditable="false" class="">&nbsp;</span> // 用于光标选择
</div>

• autoSize： 参考antd的实现逻辑

Notice

• 复制内容需要将词槽删除
  复制：帮我写一份<slot name='workReal'>工作报告 </slot>，用于<slot name='workReal'>年终总结</slot>
  得到：帮我写一份工作报告，用于年终总结
• 防止xss攻击: 用户手写输出的词槽类型不会进行转化，会当成string处理。
• 继承antd css token

Example Usage

cosnt [value,setValue] = useStatus("帮我写一份<slot name='workReal'>工作报告 </slot>，用于<slot name='workReal'>年终总结</slot>");
<Sender 
  value={value} 
  wordSlot={[
    {
      type:'input',
      key:'workSummayInput',//唯一标识
      placeholder: '例如工作报告、工作总结等',
    },
    {
      type:'select',
      key:'yearEndSummarySelect',
      placeholder: '用于的场合请选择',
      options:[{
        label:'年终总结',
        value:'yearEndSummary',
      }]
    }
  ]}
 onChange={(value,event?,messageOfText?)=>{
    setValue(value);
 }}
 onSubmit={(message, messageOfText )=>{}}
 autoSize={
    minRows: 1,
    maxRows: 4,
  }
/>