From 62cb8050d1c5c0bdbd7e742a9cc2f410e284b80b Mon Sep 17 00:00:00 2001
From: ksdev <ks.cloudbox@gmail.com>
Date: Thu, 4 Apr 2024 19:34:45 +0200
Subject: [PATCH] Add error messages

---
 package-lock.json              | 24 ++++++++++++++++++++++--
 package.json                   |  4 +++-
 src/components/AppAbout.vue    |  8 ++++----
 src/components/AppContents.vue | 32 ++++++++++++++++++++++++--------
 src/stores/app.store.ts        | 15 ++++++++++++++-
 5 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1b58be1..fad7cc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ai-chat",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ai-chat",
-      "version": "1.0.0",
+      "version": "1.2.0",
       "dependencies": {
         "@heroicons/vue": "^2.1.3",
         "dexie": "^4.0.1",
@@ -16,6 +16,7 @@
         "markdown-it": "^14.1.0",
         "openai": "^4.31.0",
         "pinia": "^2.1.7",
+        "uuid": "^9.0.1",
         "validator": "^13.11.0",
         "vue": "^3.4.21",
         "zod": "^3.22.4"
@@ -26,6 +27,7 @@
         "@types/highlight.js": "^10.1.0",
         "@types/markdown-it": "^13.0.7",
         "@types/node": "^20.11.25",
+        "@types/uuid": "^9.0.8",
         "@types/validator": "^13.11.9",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vue/eslint-config-prettier": "^8.0.0",
@@ -1024,6 +1026,12 @@
       "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+      "dev": true
+    },
     "node_modules/@types/validator": {
       "version": "13.11.9",
       "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.11.9.tgz",
@@ -4399,6 +4407,18 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/validator": {
       "version": "13.11.0",
       "resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",
diff --git a/package.json b/package.json
index b513126..2e67707 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ai-chat",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -21,6 +21,7 @@
     "markdown-it": "^14.1.0",
     "openai": "^4.31.0",
     "pinia": "^2.1.7",
+    "uuid": "^9.0.1",
     "validator": "^13.11.0",
     "vue": "^3.4.21",
     "zod": "^3.22.4"
@@ -31,6 +32,7 @@
     "@types/highlight.js": "^10.1.0",
     "@types/markdown-it": "^13.0.7",
     "@types/node": "^20.11.25",
+    "@types/uuid": "^9.0.8",
     "@types/validator": "^13.11.9",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^8.0.0",
diff --git a/src/components/AppAbout.vue b/src/components/AppAbout.vue
index 4d0d08e..af315c4 100644
--- a/src/components/AppAbout.vue
+++ b/src/components/AppAbout.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import {FwbButton, FwbModal} from 'flowbite-vue';
-import {useAppStore} from '@/stores/app.store';
+  import {FwbButton, FwbModal} from 'flowbite-vue';
+  import {useAppStore} from '@/stores/app.store';
 
-const appStore = useAppStore();
+  const appStore = useAppStore();
 </script>
 
 <template>
@@ -14,7 +14,7 @@ const appStore = useAppStore();
       <div class="flex">
         <div><img src="/icon-512.png" alt="Logo"/></div>
         <div class="ml-5"><pre class="text-xs">
-<b>AI Chat 1.2</b>
+<b>AI Chat 1.3</b>
 
 Source code, additional information and contact:
 <a href="https://github.com/ksdev-pl/ai-chat" class="hover:text-blue-600">https://github.com/ksdev-pl/ai-chat</a>
diff --git a/src/components/AppContents.vue b/src/components/AppContents.vue
index e92ac88..3521631 100644
--- a/src/components/AppContents.vue
+++ b/src/components/AppContents.vue
@@ -8,7 +8,8 @@
   import MarkdownIt from 'markdown-it';
   import hljs from 'highlight.js';
   import {useSettingsStore} from '@/stores/settings.store';
-  import {FwbButton, FwbSpinner} from 'flowbite-vue';
+  import {FwbAlert, FwbButton, FwbSpinner} from 'flowbite-vue';
+  import {useAppStore} from '@/stores/app.store';
 
   const input = ref('');
   const numOfInputRows = ref(1);
@@ -17,6 +18,7 @@
   const userScrolled = ref(false);
   const pending = ref(false);
 
+  const appStore = useAppStore();
   const chatStore = useChatStore();
   const settingsStore = useSettingsStore();
 
@@ -50,13 +52,19 @@
 
   async function onSend() {
     pending.value = true;
-    userScrolled.value = false;
-    inputTextarea.value?.blur();
-    await chatStore.addMessage({role: Role.user, content: input.value});
-    autoScrollDown();
-    sendRequestForTitle(input.value);
-    input.value = '';
-    await sendRequestForResponse();
+    try {
+      userScrolled.value = false;
+      inputTextarea.value?.blur();
+      await chatStore.addMessage({role: Role.user, content: input.value});
+      autoScrollDown();
+      sendRequestForTitle(input.value);
+      input.value = '';
+      await sendRequestForResponse();
+    } catch (e) {
+      if (e instanceof Error) {
+        appStore.addError(e.message);
+      }
+    }
     pending.value = false;
   }
 
@@ -113,6 +121,14 @@
 
 <template>
   <div class="flex flex-1 flex-col overflow-auto">
+    <fwb-alert closable
+               type="danger"
+               class="mt-4 ml-4 mr-4"
+               v-for="error in appStore.errors"
+               :key="error.id"
+               @close="appStore.removeError(error.id)">
+      {{error.message}}
+    </fwb-alert>
     <main class="flex-1 p-4 overflow-auto" ref="scrollingDiv" @scroll="checkIfUserScrolled()">
       <template v-if="chatStore.currentChat">
         <template v-for="(message, index) in chatStore.currentChat.messages" :key="index">
diff --git a/src/stores/app.store.ts b/src/stores/app.store.ts
index 54005d1..e980e24 100644
--- a/src/stores/app.store.ts
+++ b/src/stores/app.store.ts
@@ -1,9 +1,11 @@
 import {defineStore} from 'pinia';
 import {ref} from 'vue';
+import {v4 as uuidv4} from 'uuid';
 
 export const useAppStore = defineStore('app', () => {
   const isSidebarVisible = ref(true);
   const isAboutVisible = ref(false);
+  const errors = ref<{id: string, message: string}[]>([]);
 
   function toggleSidebar() {
     isSidebarVisible.value = !isSidebarVisible.value;
@@ -17,11 +19,22 @@ export const useAppStore = defineStore('app', () => {
     isAboutVisible.value = false;
   }
 
+  function addError(error: string) {
+    errors.value.push({id: uuidv4(), message: error});
+  }
+
+  function removeError(id: string) {
+    errors.value = errors.value.filter(error => error.id !== id);
+  }
+
   return {
     isSidebarVisible,
     isAboutVisible,
+    errors,
     toggleSidebar,
     showAbout,
-    hideAbout
+    hideAbout,
+    addError,
+    removeError
   };
 });
\ No newline at end of file