Vue object values not picked up

[guinanlin]

This behavior is quite strange.

You can take a look at the following code. The code segment below runs without any issues:

By selecting a city, you can obtain the desired city within deep-chat.

https://stackblitz.com/edit/rmazpd-wsvrsr?file=src%2FApp.vue

<template>
    <div class="card flex justify-content-center">
        <Listbox v-model="selectedCity" 
        :options="cities" filter optionLabel="name" 
        @change="handleSelectionChange"
        class="w-full md:w-14rem" />
    </div>
      <deep-chat
    id="ichat"
    :demo="true"
    :textInput="{ placeholder: { text: 'Welcome to the demo!' } }"
    :initialMessages="initialMessages"

  />
</template>

<script setup>
import { ref } from "vue";
import "deep-chat";

const selectedCity = ref();
const cities = ref([
    { name: 'New York', code: 'NY' },
    { name: 'Rome', code: 'RM' },
    { name: 'London', code: 'LDN' },
    { name: 'Istanbul', code: 'IST' },
    { name: 'Paris', code: 'PRS' }
]);

const initialMessages = [
  { role: 'user', text: 'Hey, how are you today?' },
  { role: 'ai', text: 'I am doing very well!' },
];

const handleSelectionChange = (event) => {
    console.log("hello,data:",event.value);
    document.querySelector("#ichat").submitUserMessage(event.value.name);
};

</script>
<style>
div {
  font-family: sans-serif;
  text-align: center;
  justify-content: center;
  display: grid;
}
</style>

However, there is an issue when running the following code. The fundamental difference is that the "deep-chat" below uses a request call. This causes "deep-chat" to refresh when the listbox changes.

https://stackblitz.com/edit/rmazpd-promzf?file=src%2FApp.vue

<template>
    <div class="card flex justify-content-center">
        <Listbox v-model="selectedCity" 
        :options="cities" filter optionLabel="name" 
        @change="handleSelectionChange"
        class="w-full md:w-14rem" />
    </div>
      <deep-chat
            id="ichat"
            ref="deepChatRef"
            :inputAreaStyle='{"backgroundColor": "#ebf5ff"}'                   

            :request="{
                url: 'https://api.link-ai.chat/v1/chat/completions',
                method: 'POST',
                headers: {
                    Authorization: 'Bearer LinddddddTQpKIgISB9uzD0tO7'
                }      
            }"   

            :requestInterceptor="(request) => {
                // request.body = {prompt: request.body.messages[0].text};
                request.body = { app_code: 'pxxxxxjc5',
                                messages: [
                                    {
                                    role: 'user',
                                    content: request.body.messages[0].text
                                    },
                                ]
                                };
                return request;      
            }"

            :responseInterceptor="(response) => {
                    // const responseText = // extract it from the response argument
                    return { text: response.choices[0].message.content };
            }"  

  />
</template>

<script setup>
import { ref } from "vue";
import "deep-chat";

const selectedCity = ref();
const cities = ref([
    { name: 'New York', code: 'NY' },
    { name: 'Rome', code: 'RM' },
    { name: 'London', code: 'LDN' },
    { name: 'Istanbul', code: 'IST' },
    { name: 'Paris', code: 'PRS' }
]);

const initialMessages = [
  { role: 'user', text: 'Hey, how are you today?' },
  { role: 'ai', text: 'I am doing very well!' },
];

const handleSelectionChange = (event) => {
    console.log("hello,data:",event.value);
    document.querySelector("#ichat").submitUserMessage("hello");
};

</script>
<style>
div {
  font-family: sans-serif;
  text-align: center;
  justify-content: center;
  display: grid;
}
</style>

[OvidijusParsiunas]

The problem here is that you are not using Vue's Composition or Options APIs, hence the inlined object values are not being picked up properly. You will have to move inputAreaStyle, request, requestInterceptor and responseInterceptor object values to const values in the script. Example:

:responseInterceptor ="responseInterceptor"

In script:

const responseInterceptor = (response) => {
    // const responseText = // extract it from the response argument
    return { text: response.choices[0].message.content };
}

Let me know if this helps. Thanks!

[guinanlin]

"responseInterceptor"

Yeah, tks a lot, it works now :-)

[OvidijusParsiunas]

That is good to hear!