161 lines
3.3 KiB
Vue
161 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { isChatVisible } from "src/stores/dialogue-box";
|
|
import DialogueContent from "./dialogue-content.vue";
|
|
import { ref } from "vue";
|
|
import { useChatApi } from "../composables/chat-api";
|
|
import { useChatStore } from "src/stores/message-store";
|
|
|
|
// Block to enable editing the width of the drawer
|
|
const drawerWidth = ref(370);
|
|
let dragging = false
|
|
const startDrag = (e: MouseEvent) => {
|
|
dragging = true
|
|
e.preventDefault()
|
|
}
|
|
|
|
const onDrag = (e: MouseEvent) => {
|
|
if (!dragging) return
|
|
// calculate new width
|
|
const newWidth = window.innerWidth - e.clientX
|
|
drawerWidth.value = Math.max(350, Math.min(1000, newWidth)) // min/max width
|
|
}
|
|
|
|
const stopDrag = () => {
|
|
dragging = false
|
|
}
|
|
|
|
window.addEventListener('mousemove', onDrag)
|
|
window.addEventListener('mouseup', stopDrag)
|
|
//--------------------------------------------
|
|
|
|
// Block to handle the incomming and sending of the messages from the user and the ai
|
|
const text = ref('');
|
|
const { messages } = useChatStore();
|
|
const { sendMessage } = useChatApi();
|
|
const handleSend = async () => {
|
|
const userMessage = text.value.trim();
|
|
if (!userMessage) return
|
|
text.value = '';
|
|
|
|
messages.push({
|
|
text: userMessage,
|
|
sent: true,
|
|
isThinking: false,
|
|
})
|
|
|
|
const thinkingMessage = {
|
|
text: "Thinking...",
|
|
sent: false,
|
|
isThinking: true
|
|
}
|
|
messages.push(thinkingMessage)
|
|
|
|
try {
|
|
const aiResponse = await sendMessage(userMessage);
|
|
|
|
const index = messages.indexOf(thinkingMessage);
|
|
if (index !== -1) {
|
|
messages.splice(index, 1, {
|
|
text: aiResponse.text,
|
|
sent: false,
|
|
isThinking: false,
|
|
})
|
|
}
|
|
}
|
|
catch (error) {
|
|
const index = messages.indexOf(thinkingMessage);
|
|
if (index !== -1) {
|
|
messages.splice(index, 1, {
|
|
text: "Sorry, something went wrong.",
|
|
sent: false,
|
|
isThinking: false,
|
|
});
|
|
}
|
|
throw error;
|
|
}
|
|
|
|
};
|
|
//---------------------------------------------
|
|
</script>
|
|
|
|
<template>
|
|
<q-drawer
|
|
side="right"
|
|
v-model="isChatVisible"
|
|
class="chat-drawer"
|
|
style="box-shadow: -4px 0 12px rgba(0,0,0,0.15);"
|
|
:width="drawerWidth"
|
|
>
|
|
<div
|
|
class="chat-header"
|
|
style="text-align:start; padding: 10px 10px 0px;"
|
|
>AI Assistant</div>
|
|
<div class="line-separator"></div>
|
|
|
|
<div class="chat-body">
|
|
<DialogueContent :messages="messages" />
|
|
</div>
|
|
|
|
<div class="line-separator"></div>
|
|
<q-form
|
|
@submit="handleSend"
|
|
class="chat-footer row"
|
|
>
|
|
|
|
<q-input
|
|
v-model="text"
|
|
label="Enter a Message"
|
|
autogrow
|
|
class="col"
|
|
@keydown.enter="handleSend"
|
|
style="margin-left: 8px;"
|
|
/>
|
|
</q-form>
|
|
<div
|
|
class="drag-handle"
|
|
@mousedown.prevent="startDrag"
|
|
></div>
|
|
</q-drawer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.drag-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 8px;
|
|
height: 100%;
|
|
cursor: ew-resize;
|
|
z-index: 1000;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.line-separator {
|
|
height: 1px;
|
|
background-color: #ccc;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.chat-drawer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Header at the top */
|
|
.chat-header {
|
|
color: #019547;
|
|
padding: 10px;
|
|
font-weight: bold;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Scrollable middle */
|
|
.chat-body {
|
|
flex: 1;
|
|
padding: 10px;
|
|
overflow-y: auto;
|
|
height: 81%;
|
|
}
|
|
</style>
|