创新实训(十三) 项目开发——实现用户终止对话功能

思路分析：

如何实现用户终止AI正在进行的回答？

分析实现思路如下：

• 首先是在用户点击发送后，切换终止对话，点击后大模型终止对话，停止sse，不再接收后端的消息。
• 同时因为对话记录存入数据库是后端的任务，所以这里也要在后端增加一个接口处理。

前端有三种情况：

1. 还未接收到回答
   • 此时直接将对话内容切换为 （用户已终止回答）
   • 返回后端的doc和ans都为空
2. 已经显示了知识库的检索内容doc，但是还未显示回答
   • 因为dac是一次生成的而不是多次拼接，所以doc只有 有和没有 两种情况
   • 返回后端的doc，ans置空
3. 显示了回答
   • 终止接收sse，给answer拼接上“当前回答已经终止"。
   • 返回后端前端已经展示的answer，后端加入数据库作为历史记录

代码实现

因为后端插入是原子性插入，所以要同时返回用户请求问题和当前回答，接口设置如下：

class StopChat(BaseModel):
    conv_id: str
    query: str
    current_docs: List[str] | None = []
    current_ans: str | None = ''

button实现

首先实现点击发送后按钮的变化：

将发送按钮转变为停止，直到用户停止或者回答结束再改为发送

通过currentAiReply.value判断当前回答的状态，如果为true则表明ai正在回答，将按钮改为停止；如果为false表明当前暂时没有回答，button为发送。

实现changeButton方法如下：

//改变button状态
const changeButton= () =>{
  if(currentAiReply.value===true){
      button.value.text='停止';
      button.value.type='info';
  }
  else{
      button.value.text='发送';
      button.value.type='primary';
  }
}

在onSend(button点击方法)和ssechat的onclose中，在currentAiReply状态改变时分别调用该方法即可改变按钮状态。

用户终止回答

然后实现用户点击停止后终止ai回答，并回复后端此时ai生成内容。

考虑到后端已经实现了拼接字符串，所以返回后端的doc和ans都是中断的原文，但是返回给用户的还是需要再次拼接上 “\n(用户已终止对话)\n”。

如何实现？

首先使用abort终止当前请求，并加上一个bool判断，终止字符串的拼接。

const controller = new AbortController();
const signal = controller.signal;

加上一个bool判断，终止字符串的拼接：

//用户是否终止当前回答： 默认为未终止
let isUserAbort = ref(false);

在sse的onmessage中加上判断，如果isUerAbort为false就继续拼接，否则不执行。

然后在onSend按钮中修改逻辑：

当回答处于第一种情况，还没有返回值时：也就是当前的AIReplay为 大模型正在生成回答，请耐心等待’,‘wait’);

• 不做任何更改

当回答处于第二种情况时，有docs返回，但是还没有回答生成，修改docs为ssechat中的docs

//第二种情况，有docs返回，但是还没有回答生成
    else if(latestMsg.aiType==='docs'){
      returnData.current_docs=currentDocs.value;
    }

第三种情况时，修改返回的docs和ans

    //第三种情况，有回答生成
    else if(latestMsg.aiType==='text'){
      //要记得添加docs
      returnData.current_docs=currentDocs.value;
      returnData.current_ans=latestMsg.content;
    }

接下来调用stopChat接口，如果返回值为200,分别对三种情况进行如下修改:

• 第一种情况

if(latestMsg.aiType==='wait'){
	msgList.pop();
	AIReplay('(用户已终止对话)\n','text');
}

• 第二种情况

if( latestMsg.aiType==='docs'){
	AIReplay('(用户已终止对话)\n','text');
}

• 第三种情况

else if(latestMsg.aiType==='text'){
	latestMsg.content=latestMsg.content+'\n(用户已终止对话)\n';
}

最后改变按钮的状态：

currentAiReply.value=false;
changeButton();

关键点分析

实验的过程中我遇到了一些问题，主要有以下几点

• aiType->type
• docs的返回格式问题

aiType->type

尝试请求如下：

响应为：

{
    "code": 500,
    "msg": "终止对话失败",
    "data": {
        "error": "unsupported operand type(s) for +: 'NoneType' and 'str'"
    }
}

但是查看longchat的后端返回的200：

log输出发现，明明条件满足都是根本没有执行if中对三个状态的判断。

重新审查代码，意识到了msgList中设置了type和aiType，其中type是用来判断当前回答是用户的还是ai的，aiType是用来判断ai回答的类型，比如docs，text和wait。

将判断条件中的type改为aiType即可。

docs的返回格式问题

接口要求的docs格式为list，我的返回值是onMessage中得到的currentDocs.value=parsedData.data.docs;

成功调用接口，但是从历史记录重新进入问答，定位错误显示docs解析失败。

那就只有数据库的docs存储有问题。

查看正确可以解析的回答格式：

对比错误的回答格式，可以发现两个问题：

• 当前的docs中少了键值对，是直接将list作为"docs"插入，缺少新的嵌套
• 插入的是list而不是字符串

这两个问题都需要更改后端接口，更改如下：

# 在列表推导式中,将列表中的每个元素转换为字符串。
"docs":{"docs":[str(x) for x in sc.current_docs]}

重新运行，在第一种情况下点击终止时报错终止失败，报错如下：

这个是因为后端有校验，将current_docs的默认返回值改为[]即可

还有就是查看历史记录时，要考虑到用户终止后docs为空的情况，不输出，增加length判断即可：

if(docs.length!==0){
    extractTextFromSpan(docs)
    AIReplay('参考：\n'+docs.join(''),'docs');
}

测试问题：

• 周易第一卦是什么？
• 周易第二卦是什么？
• 周易第三卦是什么？
• 周易第四卦是什么？
• 周易第五卦是什么？
• 周易第六卦是什么？
• 周易第七卦是什么？

实现效果

• 第一种情况

• 第二种情况

• 第三种情况