Agent流式输送 - 技术栈

篇章目录

Vue创建一个简单的Agent聊天

修改创建LLM方法

设置streaming为true

ts 复制代码

function createLLM() {
  // 创建LLM
  const llm = new ChatOpenAI({
   ...... // 省略其它
    streaming: true, // 设置
    
  })
  return llm
}

修改chat方法

ts 复制代码

export default async function chat(
  input: string,
  onChat: (text: string) => void,
  messages: Chat[] = []) {
    ......
  const res = await chain.stream({
    chat_history: allMessages,
    input: input,
  })

  let resText = ""
  // 必须等待每一段数据到达，才能循环处理
  for await (const chunk of res) {
    const content = String(chunk.content) ?? ""
    resText += content
    if (onChat) {
      onChat(String(chunk.content) || "")
    }
  }
}

pinia状态管理

请参考pinia文档

ts 复制代码

import type { Chat } from "@/types/chat";
import { defineStore } from "pinia";
import { reactive } from "vue";

export const useChat = defineStore('chat', () => {
  const history = reactive<Chat[]>([])

  const add = (chat: Chat) => {
    return history.push(chat) - 1 // 返回新增的索引

  }

  return { history, add }
})

输入组件修改

vue 复制代码

<template>
    ......
</template>

<script setup lang="ts">
import chat from '@/agent';
import type { Chat } from '@/types/chat';
import { ElButton, ElMessage } from 'element-plus';
import { computed, ref } from 'vue';
import { useChat } from '@/stores/chat'; // 导入pinia状态管理
const value = ref<string>('');
const loading = ref(false);
const history = useChat().history; // 应用全局状态
const isDisabled = computed(() => !value.value && !loading.value);
const btnText = computed(() => loading.value ? '正在思考...' : '发送');

function randomId() {
  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}
const onChatHandler = async () => {
  if (!value.value) return ElMessage.error('请输入内容');
  loading.value = true;

  // 添加用户消息
  useChat().add({
    id: randomId(),
    name: 'user',
    messages: value.value,
    role: "user",
    created_at: new Date(),
  })

  // 获取AI回复
  const aiResponseItemIndex = useChat().add({
    id: randomId(),
    name: 'assistant',
    messages: '',
    role: "assistant",
    created_at: new Date(),
  })

  try {
    await chat(value.value, (text) => {

      history[aiResponseItemIndex]!.messages += text

    }, history);

  } catch (error) {
    if (error instanceof Error)
      ElMessage.error('请求错误' + error.message);
  } finally {
    value.value = '';
    loading.value = false;
  }
};

</script>

主页面修改

vue 复制代码

<script setup lang="ts">
import InputArea from '@/components/InputArea.vue';
import { useChat } from '@/stores/chat';

const { history } = useChat()

</script>

<template>

  <div>
    <div>
      <InputArea />
      {{ history }}
    </div>
  </div>
</template>