From fdf334237c6cf3fe6d4826fbac2f78fa8a4544d9 Mon Sep 17 00:00:00 2001
From: andzejsp <andzejs.poprockis@gmail.com>
Date: Sun, 7 May 2023 14:12:59 +0300
Subject: [PATCH 1/2] restyled settings and components

---
 web/src/components/MessageBox.vue  |   4 +-
 web/src/components/YesNoDialog.vue |  82 ++--
 web/src/views/SettingsView.vue     | 664 +++++++++++++++--------------
 3 files changed, 405 insertions(+), 345 deletions(-)

diff --git a/web/src/components/MessageBox.vue b/web/src/components/MessageBox.vue
index c9a02913..1ceae3dd 100644
--- a/web/src/components/MessageBox.vue
+++ b/web/src/components/MessageBox.vue
@@ -2,8 +2,8 @@
     <div v-if="show" class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50">
       <div class="bg-bg-light dark:bg-bg-dark p-8 rounded-lg shadow-lg">
         <h3 class="text-lg font-medium">{{ message }}</h3>
-        <div class="mt-4 flex justify-end">
-          <button @click="hide" class="bg-secondary text-white px-4 py-2 rounded-lg shadow-lg hover:bg-secondary-dark">
+        <div class="mt-4 flex justify-center">
+          <button @click="hide" class="bg-primary hover:bg-primary-light active:scale-95 duration-150 text-white px-4 py-2 rounded-lg shadow-lg hover:bg-secondary-dark">
             OK
           </button>
         </div>
diff --git a/web/src/components/YesNoDialog.vue b/web/src/components/YesNoDialog.vue
index fdecaa67..33199a2a 100644
--- a/web/src/components/YesNoDialog.vue
+++ b/web/src/components/YesNoDialog.vue
@@ -1,44 +1,62 @@
 <template>
-    <div v-if="show" class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50">
-      <div class="bg-bg-light dark:bg-bg-dark p-8 rounded-lg shadow-lg">
-        <h3 class="text-lg font-medium">{{ message }}</h3>
-        <div class="mt-4 flex justify-end">
-          <button @click="hide(false)" class="bg-secondary text-white px-4 py-2 rounded-lg shadow-lg hover:bg-secondary-dark">
-            No
-          </button>
-          <button @click="hide(true)" class="bg-secondary text-white px-4 py-2 rounded-lg shadow-lg hover:bg-secondary-dark ml-4">
-            Yes
+  <div v-if="show" class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50">
+    <div class="relative w-full max-w-md max-h-full">
+      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+        <button type="button" @click="hide(false)"
+          class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white">
+          <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clip-rule="evenodd"></path>
+          </svg>
+          <span class="sr-only">Close modal</span>
+        </button>
+        <div class="p-4 text-center">
+          <svg aria-hidden="true" class="mx-auto mb-4 text-gray-400 w-14 h-14 dark:text-gray-200" fill="none"
+            stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+          <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400 select-none">{{ message }}</h3>
+          <button @click="hide(true)" type="button"
+            class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
+            Yes, I'm sure
           </button>
+          <button @click="hide(false)" type="button"
+            class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">No,
+            cancel</button>
         </div>
       </div>
     </div>
+  </div>
 </template>
   
 <script>
-  export default {
-    data() {
-      return {
-        show: false,
-        message: "",
-        resolve: null,
-      };
+export default {
+  data() {
+    return {
+      show: false,
+      message: "",
+      resolve: null,
+    };
+  },
+  methods: {
+    hide(response) {
+      this.show = false;
+      if (this.resolve) {
+        this.resolve(response);
+        this.resolve = null;
+      }
     },
-    methods: {
-      hide(response) {
-        this.show = false;
-        if (this.resolve) {
-          this.resolve(response);
-          this.resolve = null;
-        }
-      },
-      askQuestion(message) {
-        return new Promise((resolve) => {
-          this.message = message;
-          this.show = true;
-          this.resolve = resolve;
-        });
-      },
+    askQuestion(message) {
+      return new Promise((resolve) => {
+        this.message = message;
+        this.show = true;
+        this.resolve = resolve;
+      });
     },
-  };
+  },
+};
 </script>
   
\ No newline at end of file
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 5ebfcde9..5d5f1cf4 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -1,244 +1,284 @@
 <template>
-    <div class="overflow-y-scroll flex flex-col no-scrollbar shadow-lg  w-full bg-bg-light-tone dark:bg-bg-dark-tone ">
+    <div class="container overflow-y-scroll flex flex-col no-scrollbar shadow-lg p-1 pt-0 ">
         <!-- CONTROL PANEL -->
-        <div class="flex-row p-4 pt-0 flex items-center gap-3 flex-0">
-            <button title="Save configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90" @click="save_configuration()">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3Z"></path>
-                <path d="M17 8L12 13L7 8"></path>
-            </svg>
-            </button>
-            <button title="Reset configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90" @click="reset_configuration()">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-            </svg>
-            </button>
-        </div>
+        <div class="flex flex-row mb-2 p-3 gap-3 w-full rounded-b-lg bg-bg-light-tone dark:bg-bg-dark-tone  shadow-lg">
+            <!-- SAVE CONFIG -->
+            <div v-if="showConfirmation" class="flex gap-3 flex-1 items-center duration-75">
+                <button class="text-2xl hover:text-red-600 duration-75 active:scale-90 " title="Cancel"
+                    type="button" @click.stop="showConfirmation = false">
+                    <i data-feather="x"></i>
+                </button>
+                <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Confirm save changes"
+                    type="button" @click.stop="save_configuration()">
+                    <i data-feather="check"></i>
+                </button>
 
-        <div class="flex flex-row">
-            <button @click="bec_collapsed = !bec_collapsed">
-                <svg class="h-6 w-6 hover:text-secondary duration-75 active:scale-90" :class="{'rotate-90': !bec_collapsed}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M9 19l7-7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-                </svg>
-            </button>
-            <h3 class="text-lg font-semibold">Backend Configuration</h3>
-        </div>
-        <div :class="{'hidden': bec_collapsed}">
-            <div class="m-2">
-                <label for="backend" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                    Backend:
-                </label>
-                <select id="backend" @change="update_backend($event.target.value)"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-
-                    <option v-for="item in backendsArr">{{ item }}</option>
-
-                </select>
             </div>
-            <div class="m-2">
-                <label for="model" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                    Model:
-                </label>
-                <select id="model"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+            <!-- SAVE AND RESET -->
+            <div v-if="!showConfirmation" class="flex gap-3 flex-1 items-center ">
 
-                    <option v-for="item in modelsArr">{{ item }}</option>
 
-                </select>
+                <button title="Save configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90"
+                    @click="showConfirmation=true">
+                    <i data-feather="save"></i>
+                </button>
+                <button title="Reset configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90"
+                    @click="reset_configuration()">
+                    <i data-feather="refresh-ccw"></i>
+                </button>
             </div>
-        </div>
-        <div class="flex flex-row">
-            <button @click="pc_collapsed = !pc_collapsed">
-                <svg class="h-6 w-6 hover:text-secondary duration-75 active:scale-90" :class="{'rotate-90': !pc_collapsed}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M9 19l7-7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-                </svg>
-            </button>
-            <h3 class="text-lg font-semibold">Personality Configuration</h3>
-        </div>
-
-        <div :class="{'hidden': pc_collapsed}">
-            <div class="m-2">
-                <label for="persLang" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                    Personalities Languages:
-                </label>
-                <select id="persLang" @change="update_setting('personality_language', $event.target.value, refresh)"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-
-                    <option v-for="item in persLangArr">{{ item }}</option>
-
-                </select>
-            </div>
-            <div class="m-2">
-                <label for="persCat" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                    Personalities Category:
-                </label>
-                <select id="persCat" @change="update_setting('personality_category', $event.target.value, refresh)"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-
-                    <option v-for="item in persCatgArr">{{ item }}</option>
-
-                </select>
-            </div>
-            <div class="m-2">
-                <label for="persona" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                    Personality:
-                </label>
-                <select id="persona" @change="update_setting('personality', $event.target.value, refresh)"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-
-                    <option v-for="item in persArr">{{ item }}</option>
-
-                </select>
-            </div>                
 
         </div>
-        <div class="flex flex-row">
-            <button @click="mc_collapsed = !mc_collapsed">
-                <svg class="h-6 w-6 hover:text-secondary duration-75 active:scale-90" :class="{'rotate-90': !mc_collapsed}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M9 19l7-7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-                </svg>
-            </button>
-            <h3 class="text-lg font-semibold">Model Configuration</h3>
-        </div>
+        <!-- BACKEND -->
+        <div
+            class="flex flex-col mb-2 p-3 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
+            <div class="flex flex-row ">
+                <button @click.stop="bec_collapsed = !bec_collapsed"
+                    class="text-2xl hover:text-primary duration-75  p-2 -m-2 w-full text-left active:translate-y-1">
+                    <!-- <i data-feather="chevron-right"></i> -->
 
-        <div :class="{'hidden': mc_collapsed}">
-            <div class="m-2">
-                <label for="seed" class="block mb-2 text-sm font-medium ">
-                    Seed:
-                </label>
-                <input type="text" id="seed" v-model="configFile.seed"
-                    class="bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                    <h3 class="text-lg font-semibold cursor-pointer select-none "
+                        @click.stop="bec_collapsed = !bec_collapsed">
+                        Backend Configuration</h3>
+                </button>
             </div>
-            <div class="m-2">
-                <div class="flex flex-col align-bottom ">
-                    <div class="relative">
-                        <p class="absolute left-0 mt-6">
-                            <label for="temperature" class=" text-sm font-medium">
-                                Temperature:
-                            </label>
-                        </p>
-                        <p class="absolute right-0">
+            <div :class="{ 'hidden': bec_collapsed }" class="flex flex-col mb-2 p-2">
+                <div class="m-2">
+                    <label for="backend" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                        Backend:
+                    </label>
+                    <select id="backend" @change="update_backend($event.target.value)"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
 
-                            <input type="text" id="temp-val" v-model="configFile.temp"
-                                class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                        </p>
+                        <option v-for="item in backendsArr">{{ item }}</option>
 
-                    </div>
+                    </select>
+                </div>
+                <div class="m-2">
+                    <label for="model" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                        Model:
+                    </label>
+                    <select id="model"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
 
-                    <input id="temperature" @change="update_setting('temperature', $event.target.value)" type="range" v-model="configFile.temp" min="0" max="5" step="0.1"
-                        class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                        <option v-for="item in modelsArr">{{ item }}</option>
+
+                    </select>
                 </div>
             </div>
-            <div class="m-2">
-                <div class="flex flex-col align-bottom ">
-                    <div class="relative">
-                        <p class="absolute left-0 mt-6">
-                            <label for="predict" class=" text-sm font-medium">
-                                N Predict:
-                            </label>
-                        </p>
-                        <p class="absolute right-0">
-
-                            <input type="text" id="predict-val" v-model="configFile.n_predict"
-                                class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                        </p>
-
-                    </div>
-
-                    <input id="predict" @change="update_setting('n_predict', $event.target.value)" type="range" v-model="configFile.n_predict" min="0" max="2048" step="32"
-                        class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                </div>
-            </div>
-            <div class="m-2">
-                <div class="flex flex-col align-bottom ">
-                    <div class="relative">
-                        <p class="absolute left-0 mt-6">
-                            <label for="top_k" class=" text-sm font-medium">
-                                Top-K:
-                            </label>
-                        </p>
-                        <p class="absolute right-0">
-
-                            <input type="text" id="top_k-val"  v-model="configFile.top_k"
-                                class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                        </p>
-
-                    </div>
-
-                    <input id="top_k" @change="update_setting('top_k', $event.target.value)" type="range" v-model="configFile.top_k" min="0" max="100" step="1"
-                        class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                </div>
-            </div>
-            <div class="m-2">
-                <div class="flex flex-col align-bottom ">
-                    <div class="relative">
-                        <p class="absolute left-0 mt-6">
-                            <label for="top_p" class=" text-sm font-medium">
-                                Top-P:
-                            </label>
-                        </p>
-                        <p class="absolute right-0">
-
-                            <input type="text" id="top_p-val"  v-model="configFile.top_p"
-                                class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                        </p>
-
-                    </div>
-
-                    <input id="top_p" @change="update_setting('top_p', $event.target.value)" type="range" v-model="configFile.top_p" min="0" max="1" step="0.01"
-                        class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                </div>
-            </div>
-            <div class="m-2">
-                <div class="flex flex-col align-bottom ">
-                    <div class="relative">
-                        <p class="absolute left-0 mt-6">
-                            <label for="repeat_penalty" class=" text-sm font-medium">
-                                Repeat penalty:
-                            </label>
-                        </p>
-                        <p class="absolute right-0">
-
-                            <input type="text" id="repeat_penalty-val" v-model="configFile.repeat_penalty"
-                                class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                        </p>
-
-                    </div>
-
-                    <input id="repeat_penalty" @change="update_setting('repeat_penalty', $event.target.value)" type="range" v-model="configFile.repeat_penalty" min="0" max="2" step="0.01"
-                        class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                </div>
-            </div>
-            <div class="m-2">
-                <div class="flex flex-col align-bottom ">
-                    <div class="relative">
-                        <p class="absolute left-0 mt-6">
-                            <label for="repeat_last_n" class=" text-sm font-medium">
-                                Repeat last N:
-                            </label>
-                        </p>
-                        <p class="absolute right-0">
-
-                            <input type="text" id="repeat_last_n-val" v-model="configFile.repeat_last_n"
-                                class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                        </p>
-
-                    </div>
-
-                    <input id="repeat_last_n" @change="update_setting('repeat_last_n', $event.target.value)" type="range" v-model="configFile.repeat_last_n" min="0" max="100" step="1"
-                        class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                </div>
-            </div>        
         </div>
+
+        <!-- PERSONALITY -->
+        <div
+            class="flex flex-col mb-2 p-3 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
+            <div class="flex flex-row">
+                <button @click.stop="pc_collapsed = !pc_collapsed"
+                class="text-2xl hover:text-primary duration-75  p-2 -m-2 w-full text-left active:translate-y-1">
+
+                    <!-- <i data-feather="chevron-right"></i> -->
+
+                    <h3 class="text-lg font-semibold cursor-pointer select-none" @click.stop="pc_collapsed = !pc_collapsed">
+                        Personality Configuration</h3>
+                </button>
+            </div>
+            <div :class="{ 'hidden': pc_collapsed }" class="flex flex-col mb-2 p-2">
+                <div class="m-2">
+                    <label for="persLang" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                        Personalities Languages:
+                    </label>
+                    <select id="persLang" @change="update_setting('personality_language', $event.target.value, refresh)"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+
+                        <option v-for="item in persLangArr">{{ item }}</option>
+
+                    </select>
+                </div>
+                <div class="m-2">
+                    <label for="persCat" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                        Personalities Category:
+                    </label>
+                    <select id="persCat" @change="update_setting('personality_category', $event.target.value, refresh)"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+
+                        <option v-for="item in persCatgArr">{{ item }}</option>
+
+                    </select>
+                </div>
+                <div class="m-2">
+                    <label for="persona" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                        Personality:
+                    </label>
+                    <select id="persona" @change="update_setting('personality', $event.target.value, refresh)"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+
+                        <option v-for="item in persArr">{{ item }}</option>
+
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <!-- MODEL -->
+        <div
+            class="flex flex-col mb-2 p-3 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
+            <div class="flex flex-row">
+                <button @click.stop="mc_collapsed = !mc_collapsed"
+                class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1">
+                    <!-- <i data-feather="chevron-right"></i> -->
+
+                    <h3 class="text-lg font-semibold cursor-pointer select-none "
+                        @click.stop="mc_collapsed = !mc_collapsed">
+                        Model Configuration</h3>
+                </button>
+            </div>
+            <div :class="{ 'hidden': mc_collapsed }" class="flex flex-col mb-2 p-2">
+                <div class="m-2">
+                    <label for="seed" class="block mb-2 text-sm font-medium ">
+                        Seed:
+                    </label>
+                    <input type="text" id="seed" v-model="configFile.seed"
+                        class="bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                </div>
+                <div class="m-2">
+                    <div class="flex flex-col align-bottom ">
+                        <div class="relative">
+                            <p class="absolute left-0 mt-6">
+                                <label for="temperature" class=" text-sm font-medium">
+                                    Temperature:
+                                </label>
+                            </p>
+                            <p class="absolute right-0">
+
+                                <input type="text" id="temp-val" v-model="configFile.temperature"
+                                    class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                            </p>
+
+                        </div>
+
+                        <input id="temperature" @change="update_setting('temperature', $event.target.value)" type="range"
+                            v-model="configFile.temp" min="0" max="5" step="0.1"
+                            class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                    </div>
+                </div>
+                <div class="m-2">
+                    <div class="flex flex-col align-bottom ">
+                        <div class="relative">
+                            <p class="absolute left-0 mt-6">
+                                <label for="predict" class=" text-sm font-medium">
+                                    N Predict:
+                                </label>
+                            </p>
+                            <p class="absolute right-0">
+
+                                <input type="text" id="predict-val" v-model="configFile.n_predict"
+                                    class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                            </p>
+
+                        </div>
+
+                        <input id="predict" @change="update_setting('n_predict', $event.target.value)" type="range"
+                            v-model="configFile.n_predict" min="0" max="2048" step="32"
+                            class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                    </div>
+                </div>
+                <div class="m-2">
+                    <div class="flex flex-col align-bottom ">
+                        <div class="relative">
+                            <p class="absolute left-0 mt-6">
+                                <label for="top_k" class=" text-sm font-medium">
+                                    Top-K:
+                                </label>
+                            </p>
+                            <p class="absolute right-0">
+
+                                <input type="text" id="top_k-val" v-model="configFile.top_k"
+                                    class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                            </p>
+
+                        </div>
+
+                        <input id="top_k" @change="update_setting('top_k', $event.target.value)" type="range"
+                            v-model="configFile.top_k" min="0" max="100" step="1"
+                            class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                    </div>
+                </div>
+                <div class="m-2">
+                    <div class="flex flex-col align-bottom ">
+                        <div class="relative">
+                            <p class="absolute left-0 mt-6">
+                                <label for="top_p" class=" text-sm font-medium">
+                                    Top-P:
+                                </label>
+                            </p>
+                            <p class="absolute right-0">
+
+                                <input type="text" id="top_p-val" v-model="configFile.top_p"
+                                    class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                            </p>
+
+                        </div>
+
+                        <input id="top_p" @change="update_setting('top_p', $event.target.value)" type="range"
+                            v-model="configFile.top_p" min="0" max="1" step="0.01"
+                            class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                    </div>
+                </div>
+                <div class="m-2">
+                    <div class="flex flex-col align-bottom ">
+                        <div class="relative">
+                            <p class="absolute left-0 mt-6">
+                                <label for="repeat_penalty" class=" text-sm font-medium">
+                                    Repeat penalty:
+                                </label>
+                            </p>
+                            <p class="absolute right-0">
+
+                                <input type="text" id="repeat_penalty-val" v-model="configFile.repeat_penalty"
+                                    class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                            </p>
+
+                        </div>
+
+                        <input id="repeat_penalty" @change="update_setting('repeat_penalty', $event.target.value)"
+                            type="range" v-model="configFile.repeat_penalty" min="0" max="2" step="0.01"
+                            class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                    </div>
+                </div>
+                <div class="m-2">
+                    <div class="flex flex-col align-bottom ">
+                        <div class="relative">
+                            <p class="absolute left-0 mt-6">
+                                <label for="repeat_last_n" class=" text-sm font-medium">
+                                    Repeat last N:
+                                </label>
+                            </p>
+                            <p class="absolute right-0">
+
+                                <input type="text" id="repeat_last_n-val" v-model="configFile.repeat_last_n"
+                                    class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                            </p>
+
+                        </div>
+
+                        <input id="repeat_last_n" @change="update_setting('repeat_last_n', $event.target.value)"
+                            type="range" v-model="configFile.repeat_last_n" min="0" max="100" step="1"
+                            class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
     </div>
-    
+
     <YesNoDialog ref="yesNoDialog" />
     <MessageBox ref="messageBox" />
-   
 </template>
 
 <script>
 import axios from "axios";
+import feather from 'feather-icons'
+import { nextTick } from 'vue'
 import MessageBox from "@/components/MessageBox.vue";
 import YesNoDialog from "@/components/YesNoDialog.vue";
 axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
@@ -246,7 +286,7 @@ export default {
     components: {
         MessageBox,
         YesNoDialog
-    },    
+    },
     setup() {
 
 
@@ -258,9 +298,9 @@ export default {
 
         return {
             // Accordeon stuff     
-            bec_collapsed: true,
-            pc_collapsed: true,
-            mc_collapsed: true,
+            bec_collapsed: false,
+            pc_collapsed: false,
+            mc_collapsed: false,
             // Settings stuff
             backendsArr: [],
             modelsArr: [],
@@ -269,6 +309,7 @@ export default {
             persArr: [],
             langArr: [],
             configFile: {},
+            showConfirmation:false
 
         }
     }, methods: {
@@ -277,78 +318,79 @@ export default {
             console.log("OK button clicked");
         },
         // Refresh stuff
-        refresh(){
-            this.api_get_req("list_backends").then(response=>{this.backendsArr = response})
-            this.api_get_req("list_models").then(response=>{this.modelsArr = response})
-            this.api_get_req("list_personalities_languages").then(response=>{this.persLangArr = response})
-            this.api_get_req("list_personalities_categories").then(response=>{this.persCatgArr = response})
-            this.api_get_req("list_personalities").then(response=>{this.persArr = response})
-            this.api_get_req("list_languages").then(response=>{this.langArr = response})
-            this.api_get_req("get_config").then(response=>{this.configFile = response})
+        refresh() {
+            this.api_get_req("list_backends").then(response => { this.backendsArr = response })
+            this.api_get_req("list_models").then(response => { this.modelsArr = response })
+            this.api_get_req("list_personalities_languages").then(response => { this.persLangArr = response })
+            this.api_get_req("list_personalities_categories").then(response => { this.persCatgArr = response })
+            this.api_get_req("list_personalities").then(response => { this.persArr = response })
+            this.api_get_req("list_languages").then(response => { this.langArr = response })
+            this.api_get_req("get_config").then(response => { this.configFile = response })
         },
         // Accordeon stuff
         toggleAccordion() {
             this.showAccordion = !this.showAccordion;
         },
-        update_setting(setting_name, setting_value, next=undefined){
-            axios.post('/update_setting', {'setting_name':setting_name, 'setting_value':setting_value})
-            .then((res) => {
-                if (res) {
-                    if(next!==undefined){
-                        next()
-                    }
-                    return res.data;
-                }
-            })
-            .catch(error=>{return {'status':false}});
-        },
-        save_configuration(){
-            axios.post('/save_settings', {})
-            .then((res) => {
-                if (res) {
-                    if(res.status)
-                        this.$refs.messageBox.showMessage("Settings saved")
-                    else
-                        this.$refs.messageBox.showMessage("Couldn't save settings!")
-                    return res.data;
-                }
-            })
-            .catch(error=>{
-                console.log(error)
-                this.$refs.messageBox.showMessage("Couldn't save settings!")
-                return {'status':false}
-            });
-
-        },
-        reset_configuration(){
-            this.$refs.yesNoDialog.askQuestion("Are you sure?\nThis will delete all your configurations and get back to default configuration.").then(response=>{
-            if (response) {
-                // User clicked Yes
-                axios.post('/reset_settings', {})
+        update_setting(setting_name, setting_value, next = undefined) {
+            axios.post('/update_setting', { 'setting_name': setting_name, 'setting_value': setting_value })
                 .then((res) => {
                     if (res) {
-                        if(res.status)
-                            this.$refs.messageBox.showMessage("Settings have been reset correctly")
-                        else
-                            this.$refs.messageBox.showMessage("Couldn't reset settings!")
+                        if (next !== undefined) {
+                            next()
+                        }
                         return res.data;
                     }
                 })
-                .catch(error=>{
-                    console.log(error)
-                    this.$refs.messageBox.showMessage("Couldn't reset settings!")
-                    return {'status':false}
-                });            
-            // Perform delete operation
-            } else {
-                // User clicked No
-                // Do nothing
-            }
-        });
+                .catch(error => { return { 'status': false } });
         },
-        update_backend(value){
+        save_configuration() {
+            this.showConfirmation=false
+            axios.post('/save_settings', {})
+                .then((res) => {
+                    if (res) {
+                        if (res.status)
+                            this.$refs.messageBox.showMessage("Settings saved!")
+                        else
+                            this.$refs.messageBox.showMessage("Error: Couldn't save settings!")
+                        return res.data;
+                    }
+                })
+                .catch(error => {
+                    console.log(error)
+                    this.$refs.messageBox.showMessage("Couldn't save settings!")
+                    return { 'status': false }
+                });
+
+        },
+        reset_configuration() {
+            this.$refs.yesNoDialog.askQuestion("Are you sure?\nThis will delete all your configurations and get back to default configuration.").then(response => {
+                if (response) {
+                    // User clicked Yes
+                    axios.post('/reset_settings', {})
+                        .then((res) => {
+                            if (res) {
+                                if (res.status)
+                                    this.$refs.messageBox.showMessage("Settings have been reset correctly")
+                                else
+                                    this.$refs.messageBox.showMessage("Couldn't reset settings!")
+                                return res.data;
+                            }
+                        })
+                        .catch(error => {
+                            console.log(error)
+                            this.$refs.messageBox.showMessage("Couldn't reset settings!")
+                            return { 'status': false }
+                        });
+                    // Perform delete operation
+                } else {
+                    // User clicked No
+                    // Do nothing
+                }
+            });
+        },
+        update_backend(value) {
             res = update_setting('backend', value)
-            if(res.status){
+            if (res.status) {
                 console.log("Backend changed")
             }
 
@@ -371,6 +413,10 @@ export default {
         },
 
     }, async mounted() {
+        nextTick(() => {
+            feather.replace()
+
+        })
         this.backendsArr = await this.api_get_req("list_backends")
         this.modelsArr = await this.api_get_req("list_models")
         this.persLangArr = await this.api_get_req("list_personalities_languages")
@@ -378,37 +424,33 @@ export default {
         this.persArr = await this.api_get_req("list_personalities")
         this.langArr = await this.api_get_req("list_languages")
         this.configFile = await this.api_get_req("get_config")
+    },
+    watch: {
+        bec_collapsed() {
+            nextTick(() => {
+                feather.replace()
+
+            })
+        },
+        pc_collapsed() {
+            nextTick(() => {
+                feather.replace()
+
+            })
+        },
+        mc_collapsed() {
+            nextTick(() => {
+                feather.replace()
+
+            })
+        },
+        showConfirmation(){
+            nextTick(() => {
+                feather.replace()
+
+            })
+        }
     }
 }
 </script>
-<style>
-.settings {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 50px;
-}
 
-.section {
-  margin-top: 20px;
-}
-
-h2 {
-  font-size: 1.2rem;
-  margin-bottom: 10px;
-}
-
-label {
-  margin-right: 10px;
-}
-
-select {
-  margin-right: 10px;
-}
-
-input[type="text"],
-input[type="email"],
-input[type="file"] {
-  margin-right: 10px;
-}
-</style>

From 38b8fbdecc262dc176530291a79276f82560ae7c Mon Sep 17 00:00:00 2001
From: andzejsp <andzejs.poprockis@gmail.com>
Date: Sun, 7 May 2023 15:40:57 +0300
Subject: [PATCH 2/2] added toast with copy to clipboard

---
 web/src/components/Message.vue    | 10 ++++-
 web/src/components/Toast.vue      | 57 ++++++++++++++++++++++++
 web/src/views/DiscussionsView.vue | 72 +++++++++++++++++++------------
 3 files changed, 110 insertions(+), 29 deletions(-)
 create mode 100644 web/src/components/Toast.vue

diff --git a/web/src/components/Message.vue b/web/src/components/Message.vue
index 4bd1cd1c..35d90851 100644
--- a/web/src/components/Message.vue
+++ b/web/src/components/Message.vue
@@ -21,7 +21,7 @@
                 <i data-feather="edit"></i>
             </div>
             <div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
-                title="Copy message to clipboard">
+                title="Copy message to clipboard" @click.stop="copyContentToClipboard()">
                 <i data-feather="copy"></i>
             </div>
             <div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
@@ -55,6 +55,7 @@ import feather from 'feather-icons'
 import MarkdownRenderer from './MarkdownRenderer.vue';
 export default {
     name: 'Message',
+    emits: ['copy'],
     components: {
         MarkdownRenderer
     },
@@ -71,6 +72,11 @@ export default {
                 feather.replace()
 
             })
-    },
+    },methods:{
+        copyContentToClipboard(){
+            this.$emit('copy', this.message.content)
+            navigator.clipboard.writeText(this.message.content);
+        }
+    }
 }
 </script>
\ No newline at end of file
diff --git a/web/src/components/Toast.vue b/web/src/components/Toast.vue
new file mode 100644
index 00000000..48bd600b
--- /dev/null
+++ b/web/src/components/Toast.vue
@@ -0,0 +1,57 @@
+<template>
+    <div v-if="show" class="absolute bottom-16 right-2 z-20">
+        <div id="toast-success"
+            class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
+            role="alert">
+            <div class="flex flex-row">
+                <slot>
+
+                </slot>
+            </div>
+            <button type="button" @click="close"
+                class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
+                data-dismiss-target="#toast-success" aria-label="Close">
+                <span class="sr-only">Close</span>
+                <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd"
+                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                        clip-rule="evenodd"></path>
+                </svg>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'Toast',
+    emits: ['close'],
+    props: {
+        showProp: false
+    },
+    data() {
+        return {
+            show: false,
+        };
+    },
+    methods: {
+        close() {
+            this.$emit('close')
+            this.show = false
+        }
+    },
+    watch: {
+        showProp(val) {
+            this.show = val
+            if (val) {
+                setTimeout(() => {
+                    this.$emit('close')
+                    this.show = false
+                }, 3000);
+            }
+        }
+    }
+}
+</script>
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 3129f3aa..8aaf2dbf 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -110,7 +110,7 @@
         <!-- CHAT AREA -->
         <div class="flex flex-col flex-grow">
             <Message v-for="(msg, index) in discussionArr" :key="index" :message="msg"
-                @click="scrollToElement($event.target)" :id="'msg-' + msg.id" ref="messages" />
+                @click="scrollToElement($event.target)" :id="'msg-' + msg.id" ref="messages" @copy="copyToClipBoard" />
 
             <WelcomeComponent v-if="!currentDiscussion.id" />
 
@@ -122,6 +122,14 @@
         </div>
 
     </div>
+    <Toast :showProp="isCopiedToClipboard" @close="isCopiedToClipboard = false">
+        <div
+            class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
+            <i data-feather="check"></i>
+            <span class="sr-only">Check icon</span>
+        </div>
+        <div class="ml-3 text-sm font-normal">Message content copied to clipboard!</div>
+    </Toast>
 </template>
 <style scoped>
 .height-64 {
@@ -146,8 +154,8 @@ export default {
             isCheckbox: false,
             isSelectAll: false,
             showConfirmation: false,
-            chime: new Audio("chime_aud.wav")
-
+            chime: new Audio("chime_aud.wav"),
+            isCopiedToClipboard: false
         }
     },
     methods: {
@@ -296,7 +304,7 @@ export default {
             }
         },
         scrollToElement(el) {
-           
+
             if (el) {
                 el.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
             } else {
@@ -304,7 +312,7 @@ export default {
             }
         },
         scrollBottom(el) {
-           
+
             if (el) {
                 el.scrollTo(
                     {
@@ -315,7 +323,7 @@ export default {
             } else {
                 console.log("Error: scrollBottom")
             }
-           
+
         },
         createUserMsg(msgObj) {
             let usrMessage = {
@@ -374,28 +382,28 @@ export default {
             this.isGenerating = true;
             this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating);
             axios.get('/get_generation_status', {}).then((res) => {
-            if (res) {
-                console.log(res.data.status);
-                if(!res.data.status){
-                    socket.emit('generate_msg', { prompt: msg });
+                if (res) {
+                    console.log(res.data.status);
+                    if (!res.data.status) {
+                        socket.emit('generate_msg', { prompt: msg });
 
-                    // Create new User message
-                    // Temp data
-                    let usrMessage = {
-                    message: msg,
-                    id: this.discussionArr[this.discussionArr.length - 1].id + 1,
-                    rank: 0,
-                    user: "user"
-                    };
-                    this.createUserMsg(usrMessage);
+                        // Create new User message
+                        // Temp data
+                        let usrMessage = {
+                            message: msg,
+                            id: this.discussionArr[this.discussionArr.length - 1].id + 1,
+                            rank: 0,
+                            user: "user"
+                        };
+                        this.createUserMsg(usrMessage);
 
+                    }
+                    else {
+                        console.log("Already generating");
+                    }
                 }
-                else{
-                    console.log("Already generating");
-                }
-            }
             }).catch((error) => {
-            console.log("Error: Could not get generation status", error);
+                console.log("Error: Could not get generation status", error);
             });
         },
         steamMessageContent(content) {
@@ -559,8 +567,16 @@ export default {
             this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating)
             this.chime.play()
         },
-        copyToClipBoard(){
-            
+        copyToClipBoard(content) {
+
+            this.isCopiedToClipboard = true
+            nextTick(() => {
+                feather.replace()
+
+            })
+        },
+        closeToast() {
+            this.isCopiedToClipboard = false
         }
     },
     async created() {
@@ -597,7 +613,8 @@ export default {
         Discussion,
         Message,
         ChatBox,
-        WelcomeComponent
+        WelcomeComponent,
+        Toast
     },
     watch: {
         filterTitle(newVal) {
@@ -646,6 +663,7 @@ import Discussion from '../components/Discussion.vue'
 import Message from '../components/Message.vue'
 import ChatBox from '../components/ChatBox.vue'
 import WelcomeComponent from '../components/WelcomeComponent.vue'
+import Toast from '../components/Toast.vue'
 
 import feather from 'feather-icons'