ant-design / pro-chat

🤖 Components Library for Quickly Building LLM Chat Interfaces.
https://pro-chat.antdigital.dev
MIT License
667 stars 83 forks source link

🧐[问题]onChatEnd拿不到回调信息 #305

Open mengxz0203 opened 3 weeks ago

mengxz0203 commented 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}); }

            // 获取 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); // 返回可读流
          }
        }

      />

🚑 其他信息