louis/targo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: changed the color for the header inside the drawer, to not have too much green everywhere

Browse Source
This commit is contained in:
Lion Arar 2025-10-07 11:32:57 -04:00
parent 72bf750fb8
commit eed784c1fc
1 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/modules/chatbot/components/conversation-box.vue
View File

@ -26,8 +26,7 @@ const stopDrag = () => {
window.addEventListener('mousemove', onDrag) window.addEventListener('mousemove', onDrag)
window.addEventListener('mouseup', stopDrag) window.addEventListener('mouseup', stopDrag)
//--------------------------------------------
// Block to handle the incomming and sending of the messages from the user and the ai // Block to handle the incomming and sending of the messages from the user and the ai
const text = ref(''); const text = ref('');
@ -76,6 +75,7 @@ const handleSend = async () => {
} }
}; };
//---------------------------------------------
</script> </script>
<template> <template>
@ -86,23 +86,29 @@ const handleSend = async () => {
style="box-shadow: -4px 0 12px rgba(0,0,0,0.15);" style="box-shadow: -4px 0 12px rgba(0,0,0,0.15);"
:width="drawerWidth" :width="drawerWidth"
> >
<div class="chat-header">AI Assistant</div> <div
class="chat-header"
style="text-align:start; padding: 10px 10px 0px;"
>AI Assistant</div>
<div class="line-separator"></div>
<div class="chat-body"> <div class="chat-body">
<DialogueContent :messages="messages" /> <DialogueContent :messages="messages" />
</div> </div>
<div class="line-separator"></div>
<q-form <q-form
@submit="handleSend" @submit="handleSend"
class="chat-footer row" class="chat-footer row"
> >
<q-input <q-input
v-model="text" v-model="text"
label="Enter a Message" label="Enter a Message"
autogrow autogrow
class="col" class="col"
@keydown.enter="handleSend" @keydown.enter="handleSend"
style="margin-left: 10px;" style="margin-left: 8px;"
/> />
</q-form> </q-form>
<div <div
@ -131,6 +137,12 @@ const handleSend = async () => {
/* invisible but hoverable */ /* invisible but hoverable */
} }
.line-separator {
height: 1px;
background-color: #ccc;
margin: 10px 0;
}
.chat-drawer { .chat-drawer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -139,8 +151,7 @@ const handleSend = async () => {
/* Header at the top */ /* Header at the top */
.chat-header { .chat-header {
background: #019547; color: #019547;
color: white;
padding: 10px; padding: 10px;
font-weight: bold; font-weight: bold;
flex-shrink: 0; flex-shrink: 0;
@ -151,6 +162,6 @@ const handleSend = async () => {
flex: 1; flex: 1;
padding: 10px; padding: 10px;
overflow-y: auto; overflow-y: auto;
height: 85%; height: 81%;
} }
</style> </style>