[RFC]Open secondary editing - For Bubble

[tabzzz1]

Summary

为Bubble组件添加支持用户对已发送消息进行二次编辑的功能，满足用户在输入后修改内容的需求

Motivation

许多流行的ai应用都支持用户对已发送的message进行二次编辑，以下是一些例子：

二次编辑的作用/优势：

• 提升用户体验：减少因输入错误导致的重复发送或解释
• 增强灵活性：用户对回答不满意，那么他可以调整问题语句以表达更准确的意图

API

// 允许使用语义化 class 或 style 调整编辑器的样式
type SemanticType = ... | 'editor';

/**
 * 配置不同类型按钮的不同属性
 */
type EditorButtonConfig = { 
    /**
     * 按钮类型
     */
    type: 'save' | 'cancel'; 
    /**
     * 按钮的文字显示内容
     */
    text?: string; 
    /**
     * 按钮的属性配置
     */
    option?: ButtonProps
};

interface EditConfig {
  /**
   * 当前是否处于编辑状态
   * 默认为false，表示未编辑
   */
  editing?: boolean;
  /**
   * 内容发生变化时的回调函数
   * @param content 当前的内容
   */
  onChange?: (content: string) => void;
  /**
  /**
   * 取消编辑时的回调函数
   */
  onCancel?: VoidFunction;
  /**
   * 编辑完成时的回调函数
   *  @param content 编辑结束的内容
   */
  onEnd?: (content: string) => void;
  /**
   * 文本区域的配置
   */
  editorTextAreaConfig?: TextAreaProps;
  /**
   * 编辑器中按钮的配置
   * 支持针对保存和取消按钮的各种属性设置
   */
  editorButtonConfig?: EditorButtonConfig[];
}

interface BubbleProps {
  /**
   * 是否支持编辑功能及其相关配置
   */
  editable?: EditConfig;
}

Base Example

基础使用:

通常编辑功能需支持：分页器、取消和保存功能键

const App = () => {
  const [editing, setEditing] = React.useState(false);
  const [currentIndex, setCurrentIndex] = React.useState(0);
  const [editHistory, setEditHistory] = React.useState(['Good morning, how are you?']); // 编辑历史记录

  const triggerEdit = () => {
    setEditing((prev) => !prev);
  };

  const handleLeftClick = () => {
    if (currentIndex > 0) {
      setCurrentIndex((prev) => prev - 1);
    }
  };

  const handleRightClick = () => {
    if (currentIndex < editHistory.length - 1) {
      setCurrentIndex((prev) => prev + 1);
    }
  };

  const changeEdit = (c: string) => {
    console.log('Change Editing', c);
    // Some customized actions...
  };

  const cancelEdit = () => {
    setEditing(false);
  };

  const endEdit = (c: string) => {
    setEditing(false);
    setEditHistory((prev) => [...prev, c]);
    setCurrentIndex(editHistory.length);
  };

  const editConfig: EditConfig = {
    editing,
    onCancel: cancelEdit,
    onEnd: endEdit,
    onChange: changeEdit,
    editorTextAreaConfig: { autoSize: { minRows: 2, maxRows: 4 } },
    editorButtonConfig: [
      {
        type: 'cancel',
        text: '取消', // 默认值为'Cancel'
        option: { size: 'small' },
      },
      {
        type: 'save',
        text: '保存', // 默认值为'Save'
        option: { size: 'small', type: 'primary' },
      },
    ],
  };

  return (
    <Flex gap="middle" vertical>
      <Bubble
        placement="end"
        content={editHistory[currentIndex]}
        editable={editConfig}
        avatar={{ icon: <UserOutlined />, style: barAvatar }}
        header={
          editHistory.length > 1 &&
          !editing && (
            <Flex justify="end">
              <Button
                size="small"
                type="text"
                icon={<LeftOutlined />}
                onClick={handleLeftClick}
                disabled={currentIndex === 0}
              />
              <span>{`${currentIndex + 1} / ${editHistory.length}`}</span>
              <Button
                size="small"
                type="text"
                icon={<RightOutlined />}
                onClick={handleRightClick}
                disabled={currentIndex === editHistory.length - 1}
              />
            </Flex>
          )
        }
        footer={
          <Flex justify="end">
            <Button size="small" type="text" icon={<DeleteOutlined />} />
            <Button size="small" type="text" icon={<EditOutlined />} onClick={triggerEdit} />
          </Flex>
        }
      />
      {/* else */}
    </Flex>
  );
};

Detailed Design

尽可能遵循：#296

[zombieJ]

antd 的命名风格一般 editable 会是一个聚合属性：

type editable = boolean | {
  editing?: boolean;
  onEditChange?: ...
  ...
};

当然了，Bubble 估计不会非受控。不需要 boolean 类型。

[tabzzz1]

命名的想法是让edit逻辑的api尽可能与已有的typing和onTypingComplete保持一致，不过从命名规范上来看确实应该让editable是一个聚合属性

[YumoImer]

感觉 onEditingComplete 和 onEditingCancel 不需要区分，本质都是一个 content 变化的回调。

[afc163]

onEdited(e, { type: 'change' | 'cancel' })

[zombieJ]

ed 形式不在 naming standard 里，到的确是 Complete：https://github.com/ant-design/ant-design/wiki/API-Naming-rules#event

[afc163]

onEditingComplete 是很奇怪的语法，现在进行时 + Complete，不就是完成时？

[afc163]

或者参考 https://ant.design/components/typography-cn#editable

onChange + onCancel + onStart + onEnd

[zombieJ]

嗯，有道理。editable 里的其实已经是编辑状态了，可以省掉

[YumoImer]

感觉要默认处理文本编辑态，不需要传 Input ，然后能够支持用户自定义这个编辑器

[tabzzz1]

是的，在写本篇discussion的基础使用的时候思考有些欠缺。
现在的思路是：添加Editable组件，在切换到编辑态的时候，将此组件赋予给fullContent，不再使用基础使用中提到的messageRender属性进行渲染编辑框。
给Editable组件添加基础样式和事件，同时允许用户自定义对Editable组件进行修改

[YumoImer]

感觉可以结合所有已提出的建议，重新修订下 RFC ～然后我们再评一下

[tabzzz1]

取消了二次修改discussion时新增的onStart函数，在现有的逻辑中，用户可以自行将开始时的自定义时间添加到示例中的triggerEdit函数中，看起来onStart不是必须项

[YumoImer]

当你认为第二版已经完全定稿的时候，圈我们下哈～感谢！

[tabzzz1]

第二版定稿的API及Base使用如上🥳新增允许使用语义化 class 或 style 调整Editor的样式，其余API均无较大变化