-
I'm using Vercel's AI SDK and its useChat utility hook in my Nuxt.js application to create a chat interface. I have different agents (e.g., General, Exercise, Cardiology) in a select menu, and I want to send the selected agent's value in the However, I'm facing an issue where the For some reason, this part of the code is not reactive on user select: This causes the client to always send the same 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> The full code and demo: Github repo: https://github.com/dosstx/nuxt-openai-demo Live URL: https://main--chipper-snickerdoodle-13271f.netlify.app/ Server-side code that expects the
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
I believe I may have fixed this issue for my case. I submitted a PR here: #511 In Vue 3, refs should be unwrapped inside the composable to make them reactive. By using the ref pattern, you allow the composable to react to changes in the value. The missing piece here is that the useChat utility should use unref(body) instead of directly accessing the .value property. |
Beta Was this translation helpful? Give feedback.
I believe I may have fixed this issue for my case. I submitted a PR here: #511
In Vue 3, refs should be unwrapped inside the composable to make them reactive. By using the ref pattern, you allow the composable to react to changes in the value. The missing piece here is that the useChat utility should use unref(body) instead of directly accessing the .value property.