「RFC - ProInputArea 高级自定义输入框」

[ONLY-yours]

links：#233

--- Working on Progress

[ONLY-yours]

变体的 VoiceInput 语音输入需求- #162

[AngelicElegy]

Summary

新增 ProInputArea（高定输入框）组件。

---

Motivation

当前的输入区域组件过于复杂，希望通过剥离各个功能模块使其变得更加轻量且可扩展。具体需求包括将删除按钮独立、调整输入方式、重新设计自定义渲染功能并支持图片和语音输入。

---

Competitor research

大家可以投票一下，选出自己认为比较舒服的布局方式

---

Plan

1. 结构剥离 - 简化输入区域并将删除按钮独立。
2. 核心功能 - 仅保留核心的 Input 输入功能，支持 Enter 或 Shift+Enter 配置切换。
3. 功能剥离 - 把 AutoComplete 作为功能模块剥离。
4. API一致 - 保持整体 API 与现在的一致。
5. 新增功能 - 支持 ImageInput 和 VoiceInput。

---

API

属性	类型	默认值	说明
className	string	-	输入框的类名
onSend	(message: string) => boolean | Promise	-	点击发送时，触发的回调
onMessageSend	(message: string) => boolean | Promise	-	效果同onSend
onClearAllHistory	() => void	-	清除历史记录
enterType	enter｜shiftEnter	enter	支持 Enter 或 Shift Enter 的配置切换
placeholder	string	'请输入问题'	输入框的提示语
value	string	-	输入框的值
autoSize	Object	-	输入框的自动调整大小配置
autoSize.maxRowsautoSize.minRows	number	-	输入框的最大/小行数
onChange	(newValue,oldValue)=>void	-	输入框值改变时的回调函数
onCompositionStart	()=>void	-	输入法开始输入时的回调函数
onCompositionEnd	()=>void	-	输入法结束输入时的回调函数
onPressEnter	(value)=>void	-	按下回车键时的回调函数
enableSend	boolean	true	是否扩展发送控件
enableClear	boolean	false	是否扩展清除历史控件
enableVoice	boolean	false	是否扩展语音上传控件
enablePicture	boolean	false	是否扩展图片上传控件
enablePlugins	boolean	false	是否扩展插件控件
enableNetwork	boolean	false	是否扩展联网控件
enableAutoComplete	boolean	false	是否扩展自动提示控件
enablePromote	boolean	false	是否扩展Promote控件
inputRender	(defaultDom，onMessageSend，defaultProps) => ReactNode;	-	自定义输入框
render	(defaultDom: ReactNode, type：send｜clear｜voice｜pictrue｜plugin｜network｜autoComplete，defaultProps: ButtonProps) => ReactNode;	-	自定义控件

其余属性可参考Antd的input组件，实现透传

---

Design

1. 组件结构
   将组件拆分为以下几部分：

• ProInputArea：核心的输入功能组件
• DeleteButton：独立的删除按钮
• ImageButton: 独立的图片上传按钮，按需引入
• VoiceButton: 独立的图片上传按钮，按需引入
• pluginsButton：独立的插件上传按钮，按需引入（待定）
• networkButton: 是否联网按钮，按需引入 （待定）

2. 核心功能

• 输入框 (Input)
• 配置支持键（Enter 或 Shift+Enter）
• 自定义渲染（render）

3. 附加功能

• ImageInput：支持图片输入。
• VoiceInput：支持语音输入。

4. 剥离功能

• AutoComplete：独立模块，保持可插拔。

---

Basic Example

import {ProInputArea,type ProInputAreaInstance} from '@ant-design/pro-chat';
export default () => {
  return (
    <div>
      <ProInputArea/>
    </div>
  )
}

[fanhualei]

在pro-chat基础上修改的。
默认状态

输入多行后，控制按钮被挤到右下角：

输入文件后

[chenshuai2144]

enableSend | boolean | true | 是否扩展发送控件
enableClear | boolean | false | 是否扩展清除历史控件
enableVoice | boolean | false | 是否扩展语音上传控件
enablePicture | boolean | false | 是否扩展图片上传控件
enablePlugins | boolean | false | 是否扩展插件控件
enableNetwork | boolean | false | 是否扩展联网控件
enableAutoComplete | boolean | false | 是否扩展自动提示控件
enablePromote | boolean | false | 是否扩展Promote控件

这些api太繁杂了，直接给个render让自己嵌套好了。不然永远枚举不完

[AngelicElegy]

yes，之前第二版RFC考虑到这个问题了，yq已经改了，github上的这个RFC忘记更新了

[AngelicElegy]

新版RFC
Summary
新增 ProInputArea（高定输入框）组件。
Motivation
当前的输入区域组件过于复杂，希望通过剥离各个功能模块使其变得更加轻量且可扩展。具体需求包括将删除按钮独立、调整输入方式、重新设计自定义渲染功能并支持图片和语音输入。
Plan
[X] 结构剥离 - 简化输入区域并将删除按钮独立。
[X] 核心功能 - 仅保留核心的 Input 输入功能，支持 Enter 或 Shift+Enter 配置切换。
[ ] 功能剥离 - 把 AutoComplete 作为功能模块剥离。
[ ] API一致 - 保持整体 API 与现在的一致。
[ ] 新增功能 - 支持 ImageInput 和 VoiceInput。
API

属性	类型	默认值	说明
className	string	-	输入框的类名
style	Object	-	输入框的样式
sendShortcutKey	'enter'｜'shiftEnter'	enter	支持 Enter 或 Shift Enter 的配置切换
行为方法
onSend	(message: string) => boolean | Promise	-	点击发送时，触发的回调
onChange	(newValue,oldValue)=>void	-	输入框值改变时的回调函数
onCompositionStart	()=>void	-	输入法开始输入时的回调函数
onCompositionEnd	()=>void	-	输入法结束输入时的回调函数
onPressEnter	(value)=>void	-	按下回车键时的回调函数
自定义配置
inputRender	(defaultDom，onMessageSend，defaultProps) => ReactNode;	-	自定义输入框
sendButtonRender	(defaultDom，defaultProps) => ReactNode;	-	自定义发送按钮
inputAreaRender	(defaultDom，onMessageSend，onClearAllHistory) => ReactNode;	-	自定义输入区域
extra	<string | object>Array	[]	传入一个配置项数组，数组可接收对象或者字符串如果数组内为字符串，代表需要扩展这个功能，但不做自定义配置如果数组内为对象，代表需要自定义配置

Design

1. 组件结构
   将组件拆分为以下几部分：
   ● ProInputArea：核心的输入功能组件
   ● ControlPanel：操作面板（刷新，删除，停止生成，是否联网）
2. 核心功能
   ● 输入框 (Input)
   ● 配置支持键（Enter 或 Shift+Enter）
   ● 自定义渲染（render）
3. 附加功能
   ● ImageInput：支持图片输入。
   ● VoiceInput：支持语音输入。
   ● VideoInput：支持视频输入。

extra属性可传入数组，其中type是枚举类型'image'|'voice'|'video'

example
传入的数组为字符串 ['image','voice'],则代表需要默认的 图片输入，语音输入功能
传入的数组为对象，则为用户自定义render

const extra = [{
    type:'image',
    onChange: () => {},
    onFinish: () => {},
    render: () => <ImageButton />,
  },{
    type:'voice',
    onChange: () => {},
    onFinish: () => {},
    render: () => <VoiceButton />,
  },'video','其他']

基本使用

import {ProInputArea,type ProInputAreaInstance} from '@ant-design/pro-chat';
export default () => {
  return (
    <div>
      <ProInputArea/>
    </div>
  )
}

附加图片输入功能

import {ProInputArea,type ProInputAreaInstance} from '@ant-design/pro-chat';
export default () => {
  return (
    <div>
      <ProInputArea extra=['image']/>
    </div>
  )
}

自定义图片输入功能

import {ProInputArea,type ProInputAreaInstance} from '@ant-design/pro-chat';
export default () => {
  const ImageButton = ()=>{
    return <Button className="imageLoad">图片上传</Button>
  }
  return (
    <div>
      <ProInputArea extra=[{
        type:'image',
        onChange: () => {},
        onFinish: () => {},
        render: () => <ImageButton />,
      }]/>
    </div>
  )
}