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

[LofiSu]

1. 支持自定义的 content 渲染：通过自定义 content，可以支持不同的交互场景，例如语音交互变体或其他特定的内容渲染需求。
2. 与现有 Sender 逻辑无缝集成：确保自定义内容能够正常与输入框、按钮等默认功能协同工作。
3. 扩展性和易用性：开发者可以轻松定义新的内容渲染逻辑，而不需要大幅修改 Sender 本身。

---

1. 扩展 SenderComponents

我们在 SenderComponents 中添加一个可选的 content 属性，用于定义自定义渲染逻辑。

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

• innerValue：当前输入框的值。
• onValueChange：更新输入框内容的方法。
• onSubmit：触发提交的方法。
• loading 和 disabled：状态控制，确保自定义内容逻辑与组件状态同步。

2. 修改function Sender 的逻辑

获取自定义组件

通过 getComponent 方法动态获取 content。

// 获取自定义的CustomContent组件（默认使用一个空的<div/>占位）
  const CustomContent = getComponent(components, ['content'], () => <div />);
  // 渲染content组件，传递必要的属性
  const contentNode = <CustomContent />;

条件渲染 content

在 Sender 中插入如下逻辑，优先渲染自定义的 content，否则渲染默认内容：

{/* 渲染内容区域 */}
{ContentComponent ? (
  <ContentComponent
    innerValue={innerValue}
    onValueChange={triggerValueChange}
    onSubmit={triggerSend}
    loading={loading}
    disabled={disabled}
  />
) : (
  <InputTextArea
    {...inputProps}
    disabled={disabled}
    style={{ ...contextConfig.styles.input, ...styles.input }}
    className={classnames(inputCls, contextConfig.classNames.input, classNames.input)}
    autoSize={{ maxRows: 8 }}
    value={innerValue}
    onChange={(e) => {
      triggerValueChange((e.target as HTMLTextAreaElement).value);
      triggerSpeech(true);
    }}
    onPressEnter={onInternalKeyPress}
    onCompositionStart={onInternalCompositionStart}
    onCompositionEnd={onInternalCompositionEnd}
    onKeyDown={onKeyDown}
    onPaste={onInternalPaste}
    variant="borderless"
    readOnly={readOnly}
  />
)}

3. 示例 API 使用

开发者可以通过传入自定义的 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)}
/>

[YumoImer]

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