Add error messages

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",

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>

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">

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
   };
 });