style: turned the chat bubble into a drawer

src/modules/chatbot/components/chat-button.vue

@@ -7,8 +7,18 @@ const toggleChat = () => {
 </script>
 
 <template>
-  <div class="fixed-bottom-right" style="z-index: 9999; margin-bottom: 80px; margin-right: 75px;">
-    <q-btn round color="primary" size="20px" class="glossy" icon="smart_toy" @click="toggleChat" />
+  <div
+    style="z-index: 3; margin-right: 20px"
+    class="display: flex"
+  >
+    <q-btn
+      flat
+      color="transparant"
+      size="20px"
+      icon="smart_toy"
+      @click="toggleChat"
+      style="--q-icon-size: 28px; min-width: auto;"
+    />
   </div>
 
 </template>

src/modules/chatbot/components/conversation-box.vue

@@ -55,83 +55,55 @@ const handleSend = async () => {
 </script>
 
 <template>
-  <transition name="fade-slide">
-    <div
-      v-if="isChatVisible"
-      class="dialogue"
+  <q-drawer
+    side="right"
+    v-model="isChatVisible"
+    class="chat-drawer"
+    :width="370"
   >
     <div class="chat-header">AI Assistant</div>
+
     <div class="chat-body">
-        <DialogueContent :messages="messages"></DialogueContent>
+      <DialogueContent :messages="messages" />
     </div>
+
     <q-form
-        v-on:submit="handleSend"
-        class="row chat-footer"
+      @submit="handleSend"
+      class="chat-footer row"
     >
       <q-input
         v-model="text"
         label="Enter a Message"
         autogrow
         class="col"
-          style="margin-right: 5px;"
         @keydown.enter="handleSend"
+        style="margin-left: 10px;"
       />
     </q-form>
-    </div>
-  </transition>
+  </q-drawer>
 </template>
 
-<style>
-.dialogue {
-  position: fixed;
-  bottom: 150px;
-  right: 30px;
-  width: 300px;
-  height: 400px;
-  background: white;
-  border-radius: 6px;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+<style scoped>
+.chat-drawer {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  height: 100%;
 }
 
+/* Header at the top */
 .chat-header {
   background: #019547;
   color: white;
   padding: 10px;
   font-weight: bold;
+  flex-shrink: 0;
 }
 
+/* Scrollable middle */
 .chat-body {
   flex: 1;
   padding: 10px;
   overflow-y: auto;
-}
-
-.chat-footer {
-  padding: 10px;
-  border-top: 0.1px solid #ccc;
-}
-
-.input-wrapper {
-  display: flex;
-  align-items: center;
-}
-
-.full-width {
-  flex: 1;
-}
-
-
-.fade-slide-enter-active,
-.fade-slide-leave-active {
-  transition: all 0.2s ease;
-}
-
-.fade-slide-enter-from,
-.fade-slide-leave-to {
-  opacity: 0;
-  transform: translateY(20px);
+  height: 85%;
 }
 </style>

src/modules/chatbot/pages/chatbot-page.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import Chatbutton from "src/modules/chatbot/components/chat-button.vue";
 import ConversationBox from "../components/conversation-box.vue";
 </script>
 
 <template>
   <div>
     <ConversationBox></ConversationBox>
-    <Chatbutton></Chatbutton>
   </div>
 </template>
 

src/modules/shared/components/navigation/header-bar.vue

@@ -1,22 +1,34 @@
 <script lang="ts" setup>
-  import { useUiStore } from 'src/stores/ui-store';
-  import HeaderBarAvatar from './header-bar-avatar.vue';
+import { useUiStore } from 'src/stores/ui-store';
+import HeaderBarAvatar from './header-bar-avatar.vue';
+import Chatbutton from "src/modules/chatbot/components/chat-button.vue";
 
-  const uiStore = useUiStore();
+const uiStore = useUiStore();
 </script>
 
 <template>
   <q-header elevated>
     <q-toolbar>
       <q-toolbar-title>
-        <q-btn flat dense color="white" icon="menu" @click="uiStore.toggleRightDrawer">
-          <q-img src="src/assets/logo-targo-white.svg" fit="contain" width="150px" height="30px"/>
+        <q-btn
+          flat
+          dense
+          color="white"
+          icon="menu"
+          @click="uiStore.toggleRightDrawer"
+        >
+          <q-img
+            src="src/assets/logo-targo-white.svg"
+            fit="contain"
+            width="150px"
+            height="30px"
+          />
         </q-btn>
       </q-toolbar-title>
       <q-item class="q-pa-none">
+        <Chatbutton></Chatbutton>
         <HeaderBarAvatar />
       </q-item>
     </q-toolbar>
   </q-header>
 </template>
-