From e2eb79528402927ffba9ffc10c2b7927aea0c49a Mon Sep 17 00:00:00 2001 From: Lion Arar Date: Tue, 23 Sep 2025 16:33:19 -0400 Subject: [PATCH 01/32] style: Added a button on the bottom right of the screen, this will later open the chatbox --- package-lock.json | 109 +++++++++--------- src/layouts/main-layout.vue | 12 +- src/modules/chatbot/pages/chatbot-page.vue | 23 ++++ .../components/navigation/footer-bar.vue | 13 ++- 4 files changed, 93 insertions(+), 64 deletions(-) create mode 100644 src/modules/chatbot/pages/chatbot-page.vue diff --git a/package-lock.json b/package-lock.json index 5d78565..a9575ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -881,6 +881,45 @@ "url": "https://github.com/sponsors/nzakas" } }, + "node_modules/@inquirer/external-editor": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@inquirer/external-editor/-/external-editor-1.0.2.tgz", + "integrity": "sha512-yy9cOoBnx58TlsPrIxauKIFQTiyH+0MK4e97y4sV9ERbI+zDxw7i2hxHLCIEGIE/8PPvDxGhgzIOTSOWcs6/MQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "chardet": "^2.1.0", + "iconv-lite": "^0.7.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/external-editor/node_modules/iconv-lite": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.0.tgz", + "integrity": "sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, "node_modules/@inquirer/figures": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.13.tgz", @@ -2990,9 +3029,9 @@ "license": "MIT" }, "node_modules/axios": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz", - "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==", + "version": "1.12.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz", + "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==", "license": "MIT", "dependencies": { "follow-redirects": "^1.15.6", @@ -3459,9 +3498,9 @@ } }, "node_modules/chardet": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", - "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.1.0.tgz", + "integrity": "sha512-bNFETTG/pM5ryzQ9Ad0lJOTa6HWD/YsScAR3EnCPZRPlQh77JocYktSHOUHelyhm8IARL+o4c4F1bP5KVOjiRA==", "dev": true, "license": "MIT" }, @@ -5016,34 +5055,6 @@ "dev": true, "license": "MIT" }, - "node_modules/external-editor": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz", - "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==", - "dev": true, - "license": "MIT", - "dependencies": { - "chardet": "^0.7.0", - "iconv-lite": "^0.4.24", - "tmp": "^0.0.33" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/external-editor/node_modules/tmp": { - "version": "0.0.33", - "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", - "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==", - "dev": true, - "license": "MIT", - "dependencies": { - "os-tmpdir": "~1.0.2" - }, - "engines": { - "node": ">=0.6.0" - } - }, "node_modules/extract-zip": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz", @@ -5923,16 +5934,16 @@ } }, "node_modules/inquirer": { - "version": "9.3.7", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.3.7.tgz", - "integrity": "sha512-LJKFHCSeIRq9hanN14IlOtPSTe3lNES7TYDTE2xxdAy1LS5rYphajK1qtwvj3YmQXvvk0U2Vbmcni8P9EIQW9w==", + "version": "9.3.8", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.3.8.tgz", + "integrity": "sha512-pFGGdaHrmRKMh4WoDDSowddgjT1Vkl90atobmTeSmcPGdYiwikch/m/Ef5wRaiamHejtw0cUUMMerzDUXCci2w==", "dev": true, "license": "MIT", "dependencies": { + "@inquirer/external-editor": "^1.0.2", "@inquirer/figures": "^1.0.3", "ansi-escapes": "^4.3.2", "cli-width": "^4.1.0", - "external-editor": "^3.1.0", "mute-stream": "1.0.0", "ora": "^5.4.1", "run-async": "^3.0.0", @@ -7526,16 +7537,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/os-tmpdir": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", - "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/ospath": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz", @@ -9448,9 +9449,9 @@ "license": "MIT" }, "node_modules/tmp": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz", - "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==", + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz", + "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==", "dev": true, "license": "MIT", "engines": { @@ -9805,9 +9806,9 @@ } }, "node_modules/vite": { - "version": "6.3.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz", - "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==", + "version": "6.3.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz", + "integrity": "sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==", "dev": true, "license": "MIT", "dependencies": { diff --git a/src/layouts/main-layout.vue b/src/layouts/main-layout.vue index 4ea70aa..1a9b25b 100644 --- a/src/layouts/main-layout.vue +++ b/src/layouts/main-layout.vue @@ -1,8 +1,9 @@ \ No newline at end of file + diff --git a/src/modules/chatbot/pages/chatbot-page.vue b/src/modules/chatbot/pages/chatbot-page.vue new file mode 100644 index 0000000..8130778 --- /dev/null +++ b/src/modules/chatbot/pages/chatbot-page.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/src/modules/shared/components/navigation/footer-bar.vue b/src/modules/shared/components/navigation/footer-bar.vue index dbcbf9c..68c5586 100644 --- a/src/modules/shared/components/navigation/footer-bar.vue +++ b/src/modules/shared/components/navigation/footer-bar.vue @@ -1,12 +1,15 @@ \ No newline at end of file + From 398ef5f888f80fa3026faf9ab4558250bd1e4d69 Mon Sep 17 00:00:00 2001 From: Lion Arar Date: Wed, 24 Sep 2025 16:55:25 -0400 Subject: [PATCH 02/32] feat: Added initial skeleton for the messaging system --- .../chatbot/components/chat-button.vue | 23 ++++ .../chatbot/components/conversation-box.vue | 104 ++++++++++++++++++ .../chatbot/components/dialogue-content.vue | 10 ++ .../chatbot/components/dialogue-phrase.vue | 8 ++ src/modules/chatbot/pages/chatbot-page.vue | 24 ++-- src/modules/chatbot/types/dialogue-message.ts | 5 + src/stores/dialogue-box.ts | 3 + 7 files changed, 162 insertions(+), 15 deletions(-) create mode 100644 src/modules/chatbot/components/chat-button.vue create mode 100644 src/modules/chatbot/components/conversation-box.vue create mode 100644 src/modules/chatbot/components/dialogue-content.vue create mode 100644 src/modules/chatbot/components/dialogue-phrase.vue create mode 100644 src/modules/chatbot/types/dialogue-message.ts create mode 100644 src/stores/dialogue-box.ts diff --git a/src/modules/chatbot/components/chat-button.vue b/src/modules/chatbot/components/chat-button.vue new file mode 100644 index 0000000..0ebdede --- /dev/null +++ b/src/modules/chatbot/components/chat-button.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue new file mode 100644 index 0000000..33625b9 --- /dev/null +++ b/src/modules/chatbot/components/conversation-box.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/src/modules/chatbot/components/dialogue-content.vue b/src/modules/chatbot/components/dialogue-content.vue new file mode 100644 index 0000000..cf79d69 --- /dev/null +++ b/src/modules/chatbot/components/dialogue-content.vue @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/src/modules/chatbot/components/dialogue-phrase.vue b/src/modules/chatbot/components/dialogue-phrase.vue new file mode 100644 index 0000000..2df47b1 --- /dev/null +++ b/src/modules/chatbot/components/dialogue-phrase.vue @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/src/modules/chatbot/pages/chatbot-page.vue b/src/modules/chatbot/pages/chatbot-page.vue index 8130778..8c96832 100644 --- a/src/modules/chatbot/pages/chatbot-page.vue +++ b/src/modules/chatbot/pages/chatbot-page.vue @@ -1,23 +1,17 @@ - + diff --git a/src/modules/chatbot/types/dialogue-message.ts b/src/modules/chatbot/types/dialogue-message.ts new file mode 100644 index 0000000..f6f614c --- /dev/null +++ b/src/modules/chatbot/types/dialogue-message.ts @@ -0,0 +1,5 @@ +export interface Message{ + text:string; + sender: 'user' | 'assistant'; + timestamp: Date; +}; \ No newline at end of file diff --git a/src/stores/dialogue-box.ts b/src/stores/dialogue-box.ts new file mode 100644 index 0000000..cb332e3 --- /dev/null +++ b/src/stores/dialogue-box.ts @@ -0,0 +1,3 @@ +import { ref } from "vue"; + +export const isChatVisible = ref(false); From 76f21e56ab882ff104ede45ab1fc650c3919bdce Mon Sep 17 00:00:00 2001 From: Lion Arar Date: Thu, 25 Sep 2025 10:57:04 -0400 Subject: [PATCH 03/32] feat: Prototype chat-response: made a message store and service, so that the current chatbox sends the inputted txt and retrieves the defined mock response. --- .../chatbot/components/conversation-box.vue | 39 +++++++++---------- .../chatbot/components/dialogue-content.vue | 6 ++- .../chatbot/components/dialogue-phrase.vue | 8 +++- .../chatbot/services/messageService.ts | 15 +++++++ src/modules/chatbot/types/dialogue-message.ts | 3 +- src/stores/message-store.ts | 11 ++++++ 6 files changed, 56 insertions(+), 26 deletions(-) create mode 100644 src/modules/chatbot/services/messageService.ts create mode 100644 src/stores/message-store.ts diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue index 33625b9..400aa50 100644 --- a/src/modules/chatbot/components/conversation-box.vue +++ b/src/modules/chatbot/components/conversation-box.vue @@ -1,34 +1,31 @@ \ No newline at end of file From 5036be71e66cc613cc46ca5d58bb7d9a642eff82 Mon Sep 17 00:00:00 2001 From: Lion Arar Date: Fri, 26 Sep 2025 10:37:22 -0400 Subject: [PATCH 06/32] style: changed the conversation-box to use q-form to enable the submit function, as well as made the input field autogrow for readability --- src/modules/chatbot/components/conversation-box.vue | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue index 400aa50..d64332d 100644 --- a/src/modules/chatbot/components/conversation-box.vue +++ b/src/modules/chatbot/components/conversation-box.vue @@ -35,12 +35,13 @@ const sendMessage = async () => {
-
- - + + + -
+ From 64c7f34f41eb2089b72333fff87b8a86e4ff5119 Mon Sep 17 00:00:00 2001 From: Lion Arar Date: Fri, 26 Sep 2025 11:26:40 -0400 Subject: [PATCH 07/32] feat: fixed the @keydown.enter function so that it actually works, previously it would not work properly --- src/modules/chatbot/components/conversation-box.vue | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue index d64332d..4e45e65 100644 --- a/src/modules/chatbot/components/conversation-box.vue +++ b/src/modules/chatbot/components/conversation-box.vue @@ -26,6 +26,15 @@ const sendMessage = async () => { text.value = ''; } + +const handleEnter = async (e: KeyboardEvent) => { + if (e.shiftKey) { + text.value += '\n'; + } else { + e.preventDefault(); + await sendMessage(); + } +}; From aa3bc3d64d593bc9a9f7fd7b3a09434c341e8b11 Mon Sep 17 00:00:00 2001 From: Lion Arar Date: Tue, 7 Oct 2025 14:16:17 -0400 Subject: [PATCH 18/32] style: minor input changes --- src/modules/chatbot/components/conversation-box.vue | 11 ++--------- src/modules/chatbot/components/dialogue-phrase.vue | 2 +- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue index 63c5b06..2d680cc 100644 --- a/src/modules/chatbot/components/conversation-box.vue +++ b/src/modules/chatbot/components/conversation-box.vue @@ -33,8 +33,8 @@ const text = ref(''); const { messages } = useChatStore(); const { sendMessage } = useChatApi(); const handleSend = async () => { - if (!text.value.trim()) return; - const userMessage = text.value; + const userMessage = text.value.trim(); + if (!userMessage) return text.value = ''; messages.push({ @@ -123,18 +123,11 @@ const handleSend = async () => { 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 */ } .line-separator { diff --git a/src/modules/chatbot/components/dialogue-phrase.vue b/src/modules/chatbot/components/dialogue-phrase.vue index 76423dc..042117f 100644 --- a/src/modules/chatbot/components/dialogue-phrase.vue +++ b/src/modules/chatbot/components/dialogue-phrase.vue @@ -17,7 +17,7 @@ const md = new MarkdownIt({ // Removes all the h1,h2,h3 to make the Md more user friendly const cleanMarkdown = (markdown: string): string => { if (!markdown) return '' - return markdown.replace(/^#{1,3}\s.*$/gm, '') + return markdown.replace(/^#{1,3}\s(.*)$/gm, '#### $1') } // Compute parsed content From c1d48edb1e49c57949a7c6227d235bd82b02a46b Mon Sep 17 00:00:00 2001 From: Lion Arar Date: Wed, 8 Oct 2025 08:56:28 -0400 Subject: [PATCH 19/32] feat: made the front capture the url whenever it changes and send it to the backend to later send to the n8n ai. --- .../chatbot/components/conversation-box.vue | 27 ++++++++++++++++--- .../chatbot/services/messageService.ts | 5 ++++ src/stores/message-store.ts | 13 +++++++++ 3 files changed, 42 insertions(+), 3 deletions(-) diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue index 2d680cc..8b58fa0 100644 --- a/src/modules/chatbot/components/conversation-box.vue +++ b/src/modules/chatbot/components/conversation-box.vue @@ -1,9 +1,12 @@