✨ feat: Expose ability to define open chat icon

jolzee · Nov 24, 2020 · cbd2366 · cbd2366
1 parent b2d79ba
commit cbd2366
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 10 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -18,7 +18,7 @@
             :class="`leopard-open-close-button embed-button-center pulse ${textColor('primary')}`"
             :style="customCssButtonToolbar"
           >
-            <v-icon>mdi-message-text</v-icon>
+            <v-icon>{{ getChatOpenIcon }}</v-icon>
           </v-btn>
         </v-fab-transition>
       </div>
@@ -61,7 +61,7 @@
           @click="maximizeChat = true"
           v-on:keydown.enter.prevent="maximizeChat = true"
         >
-          <v-icon color="secondary">mdi-message-text</v-icon>
+          <v-icon color="secondary">{{ getChatOpenIcon }}</v-icon>
           <span>Continue conversation..</span>
           <v-spacer></v-spacer>
           <v-icon color="secondary">mdi-arrow-expand-all</v-icon>
@@ -86,7 +86,7 @@
               }`"
               :style="customCssButtonToolbar"
             >
-              <v-icon v-text="isChatOpen ? 'mdi-close' : 'mdi-message-text'"></v-icon>
+              <v-icon v-text="isChatOpen ? 'mdi-close' : getChatOpenIcon"></v-icon>
             </v-btn>
           </v-fab-transition>
         </div>
@@ -805,6 +805,7 @@ export default {
       "dialogs",
       "chatTitle",
       "customCssButtonToolbar",
+      "getChatOpenIcon",
       "getAnimatedIn",
       "getAnimatedOut",
       "embed",

diff --git a/src/components/ConfigAddEditSolution.vue b/src/components/ConfigAddEditSolution.vue
@@ -241,7 +241,7 @@
                   filled
                   validate-on-blur
                   color="teal darken-4"
-                  label="Response Icon - MDI Icons (mdi-icon-name)"
+                  label="Bot Response Icon on the Left 👈 - MDI Icons (mdi-icon-name)"
                   :append-icon="solution.responseIcon"
                   :rules="[ruleMustHaveValue]"
                 ></v-text-field>
@@ -271,7 +271,7 @@
                   filled
                   validate-on-blur
                   color="teal darken-4"
-                  label="User Icon - MDI Icons (mdi-icon-name)"
+                  label="User/Customer Icon on the Right 👉 - MDI Icons (mdi-icon-name)"
                   :aria-label="`Set the icon representing the customer in the chat UI`"
                   :append-icon="solution.userIcon"
                   :rules="[ruleMustHaveValue]"
@@ -295,6 +295,38 @@
                 </v-btn>
               </v-col>
             </v-row>
+            <!-- Chat OPEN icon -->
+            <v-row>
+              <v-col :cols="12" class="pb-0">
+                <v-text-field
+                  v-model.trim="solution.chatOpenIcon"
+                  filled
+                  validate-on-blur
+                  color="teal darken-4"
+                  label="Chat Open Icon 🔘 - MDI Icons (mdi-icon-name)"
+                  :aria-label="`Set the icon used to open the chat UI`"
+                  :append-icon="solution.chatOpenIcon"
+                  :rules="[ruleMustHaveValue]"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col :cols="12" class="py-0">
+                <v-btn
+                  v-for="(icon, index) in openIcons"
+                  :key="index + 'open-icons'"
+                  :aria-label="`Set the icon used to open the chat UI to ${icon}`"
+                  dark
+                  small
+                  :elevation="solution.chatOpenIcon === icon ? '2' : '0'"
+                  icon
+                  :color="solution.chatOpenIcon === icon ? 'orange darken-4' : 'indigo'"
+                  @click="solution.chatOpenIcon = icon"
+                >
+                  <v-icon>{{ icon }}</v-icon>
+                </v-btn>
+              </v-col>
+            </v-row>
             <v-row>
               <v-col :cols="12" class="pb-0">
                 <v-select
@@ -1399,6 +1431,28 @@ export default {
         { text: "Chinese (Hong Kong)", value: "cn(hk)" },
         { text: "Indonesian", value: "id" }
       ],
+      openIcons: [
+        "mdi-message-bulleted",
+        "mdi-comment-arrow-left",
+        "mdi-comment-arrow-left-outline",
+        "mdi-comment-arrow-right",
+        "mdi-comment-arrow-right-outline ",
+        "mdi-comment-question",
+        "mdi-comment-question-outline",
+        "mdi-comment-quote",
+        "mdi-comment-quote-outline",
+        "mdi-comment-text-outline",
+        "mdi-message-text",
+        "mdi-message-outline",
+        "mdi-message",
+        "mdi-chat-outline",
+        "mdi-chat",
+        "mdi-message-reply",
+        "mdi-message-reply-text",
+        "mdi-android-messages",
+        "mdi-assistant",
+        "mdi-bullseye-arrow"
+      ],
       chatIcons: [
         "mdi-message-bulleted",
         "mdi-comment-arrow-left",

diff --git a/src/constants/solution-config-default.js b/src/constants/solution-config-default.js
@@ -76,7 +76,9 @@ okkay | ok
   url: "",
   useLocalStorage: false,
   userIcon: "mdi-comment-quote-outline",
-  useInProduction: false
+  chatOpenIcon: "mdi-message-text",
+  useInProduction: false,
+  asrLangCode: "en-GB"
 };
 
 export const STORAGE_KEY = window.location.hostname + window.location.pathname + ":";
diff --git a/src/store.js b/src/store.js
@@ -683,6 +683,9 @@ function storeSetup(vuetify) {
 
         return hasModal;
       },
+      getChatOpenIcon(state) {
+        return state.activeSolution.chatOpenIcon;
+      },
       getNamedExtension: (_state, getters) => (item, name) => {
         let extensions = getters.itemExtensions(item);
         let foundExtension = null;

diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -26,13 +26,17 @@ export const hasConflictingSolution = (solution, allSolutions) => {
 export const fixSolution = solution => {
   if (!("id" in solution)) {
     const id = uuid();
-    // TODO: I know I need to fix this...
-    // if (solution.name === allSolutions.activeSolution) {
-    //   allSolutions.activeSolution = id;
-    // }
     solution.id = id;
   }
 
+  if (!("asrLangCode" in solution)) {
+    solution.enableTts = solutionDefault.asrLangCode;
+  }
+
+  if (!("chatOpenIcon" in solution)) {
+    solution.enableTts = solutionDefault.chatOpenIcon;
+  }
+
   if (!("enableTts" in solution)) {
     solution.enableTts = solutionDefault.enableTts;
   }