如何建立公司网站建议和规则,网线制作注意事项,做视频的软件模板下载网站,哈尔滨网站建设排怎么用react实现一个类似文心一言那样的对话效果呢#xff1f;
最近AI盛行#xff0c;关注几个大模型网站都能发现#xff0c;跟AI对话的时候#xff0c;返回的文本是逐字展示的#xff0c;就给人一种AI边解析边返回的感觉#xff08;不知道是为了装X还是真的需要这样
最近AI盛行关注几个大模型网站都能发现跟AI对话的时候返回的文本是逐字展示的就给人一种AI边解析边返回的感觉不知道是为了装X还是真的需要这样。正好部门内也有这么个需求那就开干呗。 先看看效果 ok 由于我这边后端返回是一次性返回所有回复而天煞的产品经理要求做出逐字展示效果于是我只能纯前端控制展示。 废发不多梭开始搞代码。 先上个图看看页面结构 列表的的格式是这样
const [list, setList] useState([{id: -1,type: 1,content: Introduction chooseChatType{(v) chatInit(v)} /, // 渲染对象},]); // 对话列表, type: 1 机器人 type: 2 用户 -1 初始介绍 -2 loading整体编码过程不难有几个细节需要注意 1.发送消息后到后端返回消息钱需要展示一个loading过渡 2.后端返回字符串后需要逐字切割展示。这里我注意考虑两个方案 第一个用个定时器把时差设置为变量delay每次都随机生成delay固定展示三个字符直到展示完全。简单来讲就是速度不固定每次展示长度固定 第二个速度固定每次展示不同长度内容
这里我选用的第一种方案。
需要注意的是每次更新最后一条的内容都需要把list的最后一项pop出去需要记录返回的内容切割后的内容这里我用的useRef生成的变量来记录内容主要代码如下
const loading useCallback(() {resetMsgList({id: -2,type: 1,content: (Spin indicator{LoadingOutlined style{{ fontSize: 24 }} spin /} /),});}, []);// 删除字符串前三位不满前三位直接返回空
export const deleteStr (str) {try {if (str.length 3) return ;let arr str.split();arr.splice(0, 3);return arr.join();} catch (err) {console.warn(err);}
}; // 记录最新的回复内容const currentReply useRef();
// 随机产生时差来展示字符const clear useInterval(() {if (currentReply.current.length 1) {clear();} else {// 固定切割字符串三位const str currentReply.current.substr(0, 3);currentReply.current deleteStr(currentReply.current);setList((oldList) {const last oldList.pop();return [...oldList,{id: replyId,type: 1,content:typeof last?.content string !isRegenerate.current? last.content str: str,},];});// 随机生成时差1 - 500 毫秒const randomTime Math.floor(Math.random() * 10) * 50 1;setDelay(randomTime);}isRegenerate.current false;}, delay);const send throttle(async (e, msg) {try {e?.preventDefault();// 判断是否是altenter,是则识别位换行if (e?.altKey) {setInputMsg(inputMsg \n);return;}// if (eventSourceObj) eventSourceObj.current null;const input msg || inputMsg;if (!input) {message.warn(请输入对话内容);return;}resetMsgList({ id: -1, type: 2, content: input });loading();setInputMsg();setCompareVisible(false);let res await sendMsgHttp({ content: input, quType: questionType });if (res.code 0) {quId.current res.data.quId;setReplyId(res.data.replyId);currentReply.current res.data.reply;setDelay(100);}} catch (err) {console.warn(err);}}, 300);整体实现并不难但要做好每个细节还是需要一点思考的
ok我要拿去装逼了拜拜
