79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import DialogueContent from "./dialogue-content.vue";
|
|
|
|
import { onMounted, ref } from "vue";
|
|
import { useChatbotStore } from "src/stores/chatbot-store";
|
|
import { useChatbotApi } from "src/modules/chatbot/composables/chatbot-api";
|
|
|
|
const chatbot_api = useChatbotApi();
|
|
const chatbot_store = useChatbotStore();
|
|
|
|
const text = ref('');
|
|
|
|
const handleSend = async () => {
|
|
const message = text.value.trim();
|
|
text.value = '';
|
|
await chatbot_api.sendMessage(message);
|
|
};
|
|
|
|
onMounted(() => {
|
|
chatbot_store.showInstructionsOnce();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-drawer
|
|
v-model="chatbot_store.is_showing_chatbot"
|
|
overlay
|
|
elevated
|
|
side="right"
|
|
class="column justify-end no-wrap"
|
|
>
|
|
<div class="col q-px-md relative-position">
|
|
<DialogueContent class="absolute-full" />
|
|
</div>
|
|
|
|
<q-form
|
|
submit="handleSend"
|
|
class="col-auto row"
|
|
>
|
|
<q-input
|
|
v-model="text"
|
|
borderless
|
|
:label="$t('chatbot.chat_placeholder')"
|
|
:autogrow="false"
|
|
dark
|
|
label-color="white"
|
|
class="col q-px-md"
|
|
style="background: rgba(0, 0, 0, 0.3);"
|
|
@keyup.enter="handleSend"
|
|
/>
|
|
|
|
<!-- <q-input
|
|
v-model="custId"
|
|
:label="'Customer Id'"
|
|
:autogrow="false"
|
|
class="col"
|
|
style="margin-left: 8px;"
|
|
@keyup.enter="handleCustomerId"
|
|
/> -->
|
|
</q-form>
|
|
|
|
<!-- <div
|
|
class="drag-handle"
|
|
@mousedown.prevent="startDrag"
|
|
></div> -->
|
|
</q-drawer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.q-drawer--right) {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
width: 50vw !important;
|
|
}
|
|
|
|
</style>
|