[RFC]支持 Sender 组件 content 自定义渲染，以支持类似的 speech 交互变体需求或者支持其他的content自定义渲染需求

[LofiSu]

Summary

为 Sender 组件增加 content 自定义渲染功能，以支持不同的交互场景（例如语音输入、内容编辑等）。开发者可以自定义渲染输入框内容，灵活实现语音输入或其他特定需求。

Motivation

许多应用场景需要不同的交互形式来输入内容，如语音输入、状态渲染等。支持自定义渲染 content 可以：

1. 适配语音识别或其他输入变体。
2. 允许开发者根据不同需求自定义 Sender 组件的内容渲染。
3. 保持与现有功能的兼容，提升组件的灵活性和扩展性。
   

API Changes

SenderComponents

增加一个 content 配置项，允许开发者传入自定义的内容渲染组件。自定义组件将接收到以下属性：

• innerValue: 当前的输入值。
• onValueChange: 更新输入值的回调。
• onSubmit: 提交内容的回调。
• loading: 当前加载状态。
• disabled: 是否禁用输入。

export interface SenderComponents {
  input?: CustomizeComponent<TextareaProps>;
  content?: CustomizeComponent<{
    innerValue: string;
    onValueChange: (newValue: string) => void;
    onSubmit: () => void;
    loading: boolean;
    disabled: boolean;
  }>;
}

Sender 组件更新

• 内容渲染：如果传入了自定义的 content，则优先渲染该内容组件。否则，渲染默认的文本输入框。
• 动态获取 content 组件：通过 getComponent 方法获取并渲染自定义内容。

// 获取自定义的Content组件（默认使用一个空的<div/>占位）
const CustomContent = getComponent(components, ['content'], () => <div />);

// 渲染内容区域
return (
  <div className={mergedCls}>
    {/* 渲染自定义的 content 组件 */}
    {CustomContent ? (
      <CustomContent
        innerValue={innerValue}
        onValueChange={triggerValueChange}
        onSubmit={triggerSend}
        loading={loading}
        disabled={disabled}
      />
    ) : (
      <InputTextArea {...inputProps} />
    )}
  </div>
);

语音交互支持

可以在自定义 content 组件中集成语音输入组件，如 SpeechButton，并结合 useSpeech hook 来处理语音转换和输入。

// 使用 useSpeech 钩子来处理语音输入
const [speechPermission, triggerSpeech, speechRecording] = useSpeech((transcript) => {
  triggerValueChange(`${innerValue} ${transcript}`);
}, allowSpeech);

// 渲染自定义内容区域，包含语音输入按钮
return (
  <CustomContent
    innerValue={innerValue}
    onValueChange={triggerValueChange}
    onSubmit={triggerSend}
    loading={loading}
    disabled={disabled}
  >
    <SpeechButton />
  </CustomContent>
);

Example Usage

开发者可以通过传入自定义的 content 组件来实现语音输入或其他特定的交互。

<Sender
  components={{
    content: ({ innerValue, onValueChange, onSubmit, loading }) => (
      <div>
        <p>当前输入：{innerValue}</p>
        <button
          onClick={() => onValueChange('Speech Content!')}
          disabled={loading}
        >
          模拟语音输入
        </button>
        <button onClick={onSubmit} disabled={loading}>
          提交
        </button>
      </div>
    ),
  }}
  onSubmit={(message) => console.log('提交的内容：', message)}
/>

Detailed Design

1. SenderComponents 扩展：
   SenderComponents 现在支持传入 content 自定义渲染组件。开发者可以根据需要实现复杂的交互场景，例如语音输入、动态内容展示等。

2. Sender 组件的调整：
   Sender 组件被调整为优先渲染自定义 content 组件。这保证了开发者可以根据不同需求灵活定制内容渲染，同时保持与现有功能的兼容。

3. 自定义内容渲染：
   开发者可以通过传入自定义组件来处理复杂的输入需求，如语音输入、富文本输入、或其他自定义交互。

4. 语音输入集成：
   Sender 组件支持语音输入，利用 useSpeech 钩子捕获并转录语音内容。

Advantages

1. 灵活性：开发者可以自定义渲染逻辑，满足不同的交互需求。
2. 兼容性：现有功能保持不变，开发者只需要扩展 SenderComponents。
3. 语音输入支持：原生支持语音交互，提升用户体验。

Example

以下是如何通过自定义 content 来实现语音输入的示例：

const Demo = () => {
  const [innerValue, setInnerValue] = useState('');

  const handleValueChange = (newValue: string) => {
    setInnerValue(newValue);
  };

  const handleSubmit = () => {
    console.log('提交的内容：', innerValue);
  };

  return (
    <Sender
      components={{
        content: ({ innerValue, onValueChange, onSubmit, loading, disabled }) => (
          <div>
            <p>当前输入：{innerValue}</p>
            <button onClick={() => onValueChange('语音输入内容')} disabled={loading}>
              模拟语音输入
            </button>
            <button onClick={onSubmit} disabled={loading}>
              提交
            </button>
          </div>
        ),
      }}
      value={innerValue}
      onChange={handleValueChange}
      onSubmit={handleSubmit}
    />
  );
};

Conclusion

通过为 Sender 组件提供自定义 content 渲染功能，开发者可以实现更加灵活和多变的交互场景。这项改进增强了组件的扩展性，使其能够适配语音输入和其他定制化的内容渲染需求，同时保持了与现有功能的兼容性。

Link To ：#290

[YumoImer]

非常感谢～可以参考过往的一些 RFC 调整一下格式～

[LofiSu]

好滴我来啦

[LofiSu]

非常感谢～可以参考过往的一些 RFC 调整一下格式～

可以审核一下现在的RFC吗