From 72bf750fb8898e8d00696a9a96730e00ed5c5efb Mon Sep 17 00:00:00 2001
From: Lion Arar <lion@targointernet.com>
Date: Tue, 7 Oct 2025 11:09:42 -0400
Subject: [PATCH] style: right drawer is now dynamically expandable by the user
 to enhance user experience

---
 .../chatbot/components/conversation-box.vue   | 51 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue
index 6de10db..df39425 100644
--- a/src/modules/chatbot/components/conversation-box.vue
+++ b/src/modules/chatbot/components/conversation-box.vue
@@ -5,10 +5,34 @@ 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 () => {
   if (!text.value.trim()) return;
   const userMessage = text.value;
@@ -59,7 +83,8 @@ const handleSend = async () => {
     side="right"
     v-model="isChatVisible"
     class="chat-drawer"
-    :width="370"
+    style="box-shadow: -4px 0 12px rgba(0,0,0,0.15);"
+    :width="drawerWidth"
   >
     <div class="chat-header">AI Assistant</div>
 
@@ -80,10 +105,32 @@ const handleSend = async () => {
         style="margin-left: 10px;"
       />
     </q-form>
+    <div
+      class="drag-handle"
+      @mousedown.prevent="startDrag"
+    ></div>
   </q-drawer>
 </template>
 
 <style scoped>
+.drag-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  /* attach to the left edge of the drawer */
+  width: 8px;
+  /* sensitive area for hover */
+  height: 100%;
+  /* full height of the drawer */
+  cursor: ew-resize;
+  /* horizontal resize cursor */
+  z-index: 1000;
+  /* make sure it's above other content */
+  /* optional: visual feedback */
+  background-color: rgba(0, 0, 0, 0);
+  /* invisible but hoverable */
+}
+
 .chat-drawer {
   display: flex;
   flex-direction: column;