Vue.js 为什么发送 POST API 请求时主体对象没有react

我在Nuxt.js应用程序中使用Vercel's AI SDK和它的useChat utility hook来创建聊天界面.我在一个 Select 菜单中有不同的代理(例如，普通、锻炼、心脏病)，并且我想在useChats()‘S body对象中发送所选代理的值以及在服务器端 Select 适当系统提示的API请求.

However, I'm facing an issue where the 100 object is not updated reactively when the selected agent changes in the UI.

出于某种原因，这部分代码对用户SELECT没有react : body: { agent: selectedAgent.value } // <---- for some reason this is not being updated on menu change个

这会导致客户端始终发送与General相同的agent:

Full client-side details below:个

<template>
<div class="text-center mt-6">
      <select class="border border-2" v-model="selectedAgent" @change="changeAgent">
        <option v-for="(agent, index) in agentsList" :key="index" :value="agent">{{ agent }}</option>
      </select>
<div>
      <div v-for="m in messages" key="m.id" >
        {{ m.role === "user" ? "User: " : "AI: " }}
        {{ m.content }}
      </div>
<form @submit="handleSubmit">
        <input v-model="input" />
      </form>
</template>


<script>
import {useChat} from 'ai/vue'
const agentsList = ['General', 'Exercise', 'Cardiology']
const selectedAgent = ref(agentsList[0]); // Default agent

const { messages, input, handleSubmit } = useChat({
  api: '/api/chat',
  headers: { 'Content-Type': 'application/json' },
  body: { agent: selectedAgent.value } // <---- for some reason this is not being updated on menu change
})

const changeAgent = (e) => {
  selectedAgent.value = e.target.value;
  // Clear the chat messages when the agent is changed
  messages.value = []
};
</script>

完整的代码和演示:

GitHub回购:https://github.com/dosstx/nuxt-openai-demo

直播URL:https://main--chipper-snickerdoodle-13271f.netlify.app/

Server-side code that expects the agent value from the request body (server/api/chat.ts):

输出为:

import OpenAI from 'openai'
import { OpenAIStream } from 'ai'
import { CreateChatCompletionRequestMessage } from 'openai/resources/chat'

export default defineLazyEventHandler(async () => {
  const apiKey = useRuntimeConfig().OPENAI_API_KEY;
  if (!apiKey) throw new Error('Missing OpenAI API key')
  const openai = new OpenAI({
    apiKey: apiKey
  })

  const agents = {
    Exercise: [
      // ... system prompts for exercise agent
    ],
    Cardiology: [
      // ... system prompts for cardiology agent
    ],
    General: [
      // ... system prompts for General agent
    ]
    // ... other agents
  }

  return defineEventHandler(async event => {

    // Extract the `prompt` and `agent` from the body of the request
    const { messages, agent } = (await readBody(event)) as {
      messages: CreateChatCompletionRequestMessage[],
      agent: keyof typeof agents // Expecting one of the keys from the agents object
    }

    // Select the agent's system prompts
    const agentSystemMessages = agents[agent] || []

    console.log('from server: ', messages, agent)

    try {
      // Create a chat completion request with the system prompts and messages
      const request = {
        model: 'gpt-3.5-turbo',
        stream: true,
        messages: [...agentSystemMessages, ...messages],
        temperature: 0.2,
        // top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
        max_tokens: 400 // set this limit to length of assistants responses
      };

      // Send the request to OpenAI and get a response stream
      const response = await openai.chat.completions.create(request);

      // Return an OpenAIStream object that wraps the response stream
      return OpenAIStream(response)
    } catch (error) {
      console.error(error);
      // Return a 500 Internal Server Error response with a specific message
      return {
        status: 500,
        body: { error: 'An error occurred while processing your request. Please try again later.' },
      };
    }
  })
})

环境:

• Nuxt版本:3.6.5

我试过的是:

• 我已经更新了changeAgent函数中的selectedAgent值，但useChat钩子中的body对象没有反映更新后的值.

问题:

如何使useChat钩子内的body对象对 Select 菜单中所选代理的更改做出react ？需要将此值发送到服务器以 Select 适当的系统提示.如有任何见解或指导，我们将不胜感激.