vue3笔记（42-3）deepseek-已发送消息处理

用户可能发送了错误信息，需要对发送的信息做一个修改，这里我们可以用编辑模式来实现。

用户信息修改

用户信息修改的方式分了好几种，有些网站是直接撤回原来的回答，用新的代替有些网站是直接编辑原来的回答，保留修改的版本，通过左右切换的方式可以查看各个版本的问答情况，我们选了后面一种实现方式。
在研究 deepseek 网站的前端时，发现问答是以树状的方式进行的，每次修改问题相当于在当前节点新建一个分支，往后所有的回答都是以此分支的子节点。因此切换分支时，需要加载基于此分支的所有子节点。

编辑模式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 用户信息编辑模式 -->
<div v-if="item.isEditing" class="w-[calc(100%-88px)] mr-10px">
  <el-input
    v-model="modifiedMessage"
    type="textarea"
    resize="none"
    @compositionstart="onCompositionStart"
    @compositionend="onCompositionEnd"
    @keydown.enter="handleEnter($event, index, 'update')"
    @keyup.esc="cancelEdit(index)"
  />
  <div class="flex justify-end items-center">
    <Button type="text" @click="cancelEdit(index)" class="ml-12px">取消</Button>

    <Button type="text" @click="saveEdit($event, index)" class="ml-12px"
      >发送</Button
    >
  </div>
</div>

用户对话中，鼠标经过展示编辑按钮，大模型正在输出，或者文件正在解析时不可编辑，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!-- 用户信息展示 -->
  <div v-else class="w-full">
    <div
      class="flex justify-end w-full"
      v-if="item.message"
      @mouseenter="item.showTools = true"
      @mouseleave="item.showTools = false"
    >
      <div class="flex items-center mr-8px" v-if="item.showTools">
        <CustomIcon
          name="icon-edit"
          size="16"
          @click="startEdit(index)"
          :class="botChating || analyseFile ? 'btn-disabled' : 'cursor-pointer'"
        />
      </div>
      <div
        v-if="item.message"
        class="break-words whitespace-pre-wrap"
        >{{ item.message }}</div
      >
    </div>
    <div
      v-if="item.count && item.count > 1"
      class="flex justify-end"
    >
      <el-icon
        @click="handleVersion('prev', item, index)"
        :class="
          item.version === 1 || botChating ? 'btn-disabled' : 'cursor-pointer'
        "
        ><ArrowLeft
      /></el-icon>
      <span>{{ item.version }}</span>
      <span class="pl-[4px] pr-[4px]">/</span>
      <span>{{ item.count }}</span>
      <el-icon
        @click="handleVersion('next', item, index)"
        :class="
          item.version === item.count || botChating
            ? 'btn-disabled'
            : 'cursor-pointer'
        "
        ><ArrowRight
      /></el-icon>
    </div>
  </div>

点击切换按钮时，记录鼠标当前位置，通过 messageId 和 newVersion 请求当前分支的消息，更新数据，并滑动到原来的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const handleVersion = async (mode: string, item: ChatProps, index: number) => {
  const newVersion = mode === 'prev' ? item.version - 1 : item.version + 1
  if (scrollbarRef.value) {
    const scrollTop = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap')?.scrollTop
    cacheScrollTop.value = scrollTop
  }
  try {
    const { messages } = await handoffMessage({
      message_id: item.messageId,
      version: newVersion
    })
    chatList.value = []
    if (messages && messages.length > 0) {
      chatList.value = messages.map((item) => ({
        role: item.role,
        message: item.message ? item.message : '',
        messageId: item.message_id,
        fatherId: item.father_id,
        version: item.version,
        count: item.count
      }))
      sendId.value = chatList.value[chatList.value.length - 1].messageId
      nextTick(() => {
        // 更新数据后滑动到原来的位置
        scrollbarRef.value!.setScrollTop(cacheScrollTop.value)
      })
    }
  } catch (error) {
    console.error('切换版本失败', error)
  }
}

javascript
javascript
javascript