Open mengxz0203 opened 3 weeks ago
我按照文档里的尝试使用onChatEnd自定义结束后的回调,但是我拿不到输出的值,这是为什么呢 还有个问题,我尝试在流式返回结束后使用proChatRef.setMessage设置最后一次响应的消息也没有成功,这是为什么呢
<ProChat key={randomKey} chatRef={proChatRef} showTitle={true} userMeta={{ avatar: props?.userinfo?.user.picture, title: props?.userinfo?.user.nickname, }} assistantMeta={{ avatar: 'https://cdn-tos-cn.bytedance.net/obj/archi/tob/infinite/giraffe_fe/img/favicon.ico', title: 'Giraffe AI Bot', }} helloMessage={ 你好, ${props?.userinfo?.user.nickname}, 今天能帮你做些什么? } inputAreaProps={{ style: { border: '1px solid #1890ff', color: 'rgb(38,64,15)', fontWeight: 800, }, }} onChatStart={(chat) => { console.log('chat start', chat); }} onChatEnd={(id, type) => { console.log('chat end', id); console.log('chat end type', type); }} onChatGenerate={(chunkText) => { console.log('chat generate', chunkText); }} request={ async (messages, config, signal) => { console.log(messages) setGenerating(true) messages.unshift({ createAt: 0, extra: undefined, id: '', updateAt: 0, role: 'system', content: '使用RobotFramework标准库和EasyUILib编写WebUI自动化脚本,注意代码缩进等格式要正确。'}) const response = await fetch('http://10.86.82.210:11434/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ 'model': 'Giraffe-2024-08-07_2', // "mode": "code", 'messages': messages, }), }); // 确保服务器响应是成功的 if (!response.ok || !response.body) { throw new Error(HTTP error! status: ${response.status}); }
你好, ${props?.userinfo?.user.nickname}, 今天能帮你做些什么?
HTTP error! status: ${response.status}
// 获取 reader const reader = response.body.getReader(); const decoder = new TextDecoder('utf-8'); const encoder = new TextEncoder(); const readableStream = new ReadableStream({ async start(controller) { function push() { reader .read() .then(({ done, value }) => { if (done) { if (!proChatRef.current) return; const messages = proChatRef.current.getChatMessages(); const { id, content } = messages[1] || {}; proChatRef.current.scrollToBottom?.(); if (!id) return; proChatRef.current.setMessageContent(id, 'content', '12345'); setRandomKey(new Date().getTime().toString()) setGenerating(false) controller.close(); return; } const chunk = decoder.decode(value, { stream: true }); // console.log('原始数据:', chunk); // 按行分割数据 const messages = chunk.split('\n').filter(line => line.trim() !== ''); messages.forEach(message => { try { const parsed = JSON.parse(message); // console.log('解析结果:', parsed); controller.enqueue(encoder.encode(parsed.message.content)); } catch (error) { console.error('JSON 解析错误:', error); } }); push(); }) .catch((err) => { console.error('读取流中的数据时发生错误', err); controller.error(err); }); } push(); }, }); return new Response(readableStream); // 返回可读流 } } />
🧐 问题描述
我按照文档里的尝试使用onChatEnd自定义结束后的回调,但是我拿不到输出的值,这是为什么呢 还有个问题,我尝试在流式返回结束后使用proChatRef.setMessage设置最后一次响应的消息也没有成功,这是为什么呢
💻 示例代码
<ProChat key={randomKey} chatRef={proChatRef} showTitle={true} userMeta={{ avatar: props?.userinfo?.user.picture, title: props?.userinfo?.user.nickname, }} assistantMeta={{ avatar: 'https://cdn-tos-cn.bytedance.net/obj/archi/tob/infinite/giraffe_fe/img/favicon.ico', title: 'Giraffe AI Bot', }} helloMessage={
你好, ${props?.userinfo?.user.nickname}, 今天能帮你做些什么?
} inputAreaProps={{ style: { border: '1px solid #1890ff', color: 'rgb(38,64,15)', fontWeight: 800, }, }} onChatStart={(chat) => { console.log('chat start', chat); }} onChatEnd={(id, type) => { console.log('chat end', id); console.log('chat end type', type); }} onChatGenerate={(chunkText) => { console.log('chat generate', chunkText); }} request={ async (messages, config, signal) => { console.log(messages) setGenerating(true) messages.unshift({ createAt: 0, extra: undefined, id: '', updateAt: 0, role: 'system', content: '使用RobotFramework标准库和EasyUILib编写WebUI自动化脚本,注意代码缩进等格式要正确。'}) const response = await fetch('http://10.86.82.210:11434/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ 'model': 'Giraffe-2024-08-07_2', // "mode": "code", 'messages': messages, }), }); // 确保服务器响应是成功的 if (!response.ok || !response.body) { throw new Error(HTTP error! status: ${response.status}
); }🚑 其他信息