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

[ONLY-yours]

Motivation

A component that provides input capabilities in large model scenarios
The current input area component is too complex, and we hope to make it lighter and more extensible by stripping off various functional modules. Specific requirements include making the delete button independent, adjusting the input method, redesigning the custom rendering function, and supporting image and voice input.

API

Prop	Description	Type	Default
value	The value of the input box	string	-
loading	Indicates whether it is in a loading state (cannot send messages while loading)	boolean	false
enterType	Configuration to switch between Enter or Shift Enter as shortcut keys	'enter' |'shiftEnter' |false	'enter'
disabled	Indicates whether it is in a non-interactive state	boolean	false
onSubmit	Callback triggered when sending a message	(message: string) => boolean	-
onChange	Callback function when the input box value changes	(newValue, oldValue) => void	-
onCancel	Callback for clicking the stop generation button	() => void
components	Custom rendering of the ProInputArea	ProInputAreaConfig	[clearConfig,sendConfig]

Prop	Description	Type	Default
actions	Custom rendering of the button group	Object<{send: SendConfigclear: ClearConfigrender: ()=>Array}>	{send: SendConfigclear: ClearConfig}
send	Custom rendering of the send button	antd Button Props
clear	Custom rendering of clear content area button	antd Button Props

Basic Example

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

on Sending Message / loading states

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

Disable

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

[ONLY-yours]

现阶段这版本 rfc 没有把多模态的内容放进去，是否要内置进去？还是说通过一些 config 给入在开启 or 变体组件？

[zombieJ]

• 输入框一般都是多行提交，感觉 enterType 会有点薄弱。应该是有配置来选择 提交 和 换行 的操作分别是什么。
• onSend 可以考虑用 onFinish or onSubmit，最要不要是 Promise 因为这样会导致状态很难通过受控来切换（比如我点了 cancel 但是受控不想让它cancel）。
• 继上，onStopGen 可以叫 onCancel
• v5 后比较推荐用 components 代替 xxxRender

[ONLY-yours]

components 代替 xxxRender 我理解就是用 Object 这种对象配置替代 render 函数，是这个意思吧。

[ONLY-yours]

「应该是有配置来选择 提交 和 换行 的操作分别是什么」

这个需要提供一个按钮 或者 dropdown 这种么？

[ONLY-yours]

设计为 Promise 的一个很重要的逻辑是，在 ai 场景下，等待返回是一个很正常的逻辑。

不过这层可以放到上层业务层自己组装。x 干净简单点好一些

[zombieJ]

这个需要提供一个按钮 或者 dropdown 这种么？

类似 GPT 那种提示 cmd + enter 换行，enter 提交。这种配置 API

设计为 Promise 的一个很重要的逻辑是，在 ai 场景下，等待返回是一个很正常的逻辑。

大部分场景下都是要自己封装的，应该是提供一个 useXXX hooks 来帮忙管理才对，而不是直接封死

[YumoImer]

API 部分：

• onStopGenerate -> onAbort 是不好点
• onClear 感觉不是很必要，有些场景在「清除上下文使用」
• 同上一点，clearButtonRender 感觉也不是很必要提供出来了
• actionsRender 这个感觉和其他的 render 重复了