Fix auth and experience issue (#87)

Co-authored-by: Germey <germey@acedata.cloud>
AceDataCloud · Jul 28, 2024 · 558eadb · 558eadb
1 parent c7c755f
commit 558eadb
Show file tree

Hide file tree

Showing 24 changed files with 234 additions and 426 deletions.
diff --git a/change/@acedatacloud-nexior-bb3e3f4a-c67f-4987-b847-1027a456f045.json b/change/@acedatacloud-nexior-bb3e3f4a-c67f-4987-b847-1027a456f045.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix auth and experience issues",
+  "packageName": "@acedatacloud/nexior",
+  "email": "germey@acedata.cloud",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/chat/AnsweringMark.vue b/src/components/chat/AnsweringMark.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="box"></div>
+  <div class="mark"></div>
 </template>
 
 <script lang="ts">
@@ -30,7 +30,7 @@ export default defineComponent({
     opacity: 1;
   }
 }
-.box {
+.mark {
   width: 2px;
   height: 16px;
   margin-top: 3px;

diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue
@@ -2,8 +2,7 @@
   <div
     :class="{
       message: true,
-      [message.role as string]: true,
-      hidden: errorText && message.role === 'assistant'
+      [message.role as string]: true
     }"
     :role="message.role"
   >
@@ -15,12 +14,17 @@
         class="avatar"
       />
     </div>
-    <div class="main">
+    <div v-if="!errorText" class="main">
       <div class="content">
         <markdown-renderer v-if="!Array.isArray(message.content)" :content="message?.content" />
         <div v-else>
           <div v-for="(item, index) in message.content" :key="index">
-            <img v-if="item.type === 'image_url'" :src="item.image_url?.url" fit="cover" class="image" />
+            <img
+              v-if="item.type === 'image_url'"
+              :src="typeof item?.image_url === 'string' ? item.image_url : item.image_url?.url"
+              fit="cover"
+              class="image"
+            />
             <markdown-renderer v-if="item.type === 'text'" :key="index" :content="item.text" />
           </div>
         </div>
@@ -30,7 +34,7 @@
         <copy-to-clipboard v-if="!Array.isArray(message.content)" :content="message.content!" class="btn-copy" />
       </div>
     </div>
-    <el-alert v-if="errorText" class="error" :title="errorText" type="error" :closable="false" />
+    <el-alert v-else class="error" :title="errorText" type="error" :closable="false" />
     <el-button v-if="showBuyMore" round type="primary" class="btn btn-buy" size="small" @click="onBuyMore">
       {{ $t('common.button.buyMore') }}
     </el-button>
@@ -190,6 +194,10 @@ export default defineComponent({
     .content {
       color: var(--el-text-color-primary);
     }
+    .btn-buy {
+      display: inline-block;
+      margin-left: 5px;
+    }
   }
   &.user {
     .main {

diff --git a/src/components/chat/ModelSelector.vue b/src/components/chat/ModelSelector.vue
@@ -1,41 +1,26 @@
 <template>
   <div class="selector">
-    <el-dropdown
-      v-for="(group, groupIndex) in groups"
-      :key="groupIndex"
-      trigger="click"
-      popper-class="popper"
-      @command="onCommandChange"
-    >
-      <el-button :class="{ group: true, active: group.value === activeGroup }" @click="onSwitchGroup(group)">
-        <font-awesome-icon :icon="group.icon" :class="'icon ' + group.value" />
-        <span v-if="group.value === activeGroup">
-          {{ model.getDisplayName() }}
+    <el-dropdown trigger="click" popper-class="popper">
+      <div>
+        <span class="name">{{ model?.getDisplayName() }}</span>
+        <span class="angle">
+          <font-awesome-icon icon="fa-solid fa-angle-down" />
         </span>
-        <span v-else>
-          {{ group.label }}
-        </span>
-        <font-awesome-icon icon="fa-solid fa-chevron-down" />
-      </el-button>
+      </div>
       <template #dropdown>
-        <el-dropdown-menu class="menu">
+        <el-dropdown-menu>
           <el-dropdown-item
-            v-for="(groupModel, groupModelIndex) in group.options"
-            :key="groupModelIndex"
-            :command="groupModel"
-            class="option"
+            v-for="(option, optionKey) in options"
+            :key="optionKey"
+            @click="onCommandChange(option.model)"
           >
             <div class="item">
-              <div class="icon">
-                <font-awesome-icon :icon="group.icon" :class="'icon ' + group.value" />
+              <div class="icon" :style="{ color: option.color }">
+                <font-awesome-icon :icon="option.icon" />
               </div>
               <div class="info">
-                <p class="name">
-                  {{ groupModel.getDisplayName() }}
-                </p>
-                <p class="description">
-                  {{ groupModel.getDescription() }}
-                </p>
+                <p class="name">{{ option.model.getDisplayName() }}</p>
+                <p class="description">{{ option.model.getDescription() }}</p>
               </div>
             </div>
           </el-dropdown-item>
@@ -47,7 +32,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ElDropdown, ElButton, ElDropdownItem } from 'element-plus';
+import { ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { IChatModel } from '@/models';
 import {
@@ -58,41 +43,44 @@ import {
   CHAT_MODEL_GPT_4_VISION
 } from '@/constants';
 
-const GROUPS = [
-  {
-    label: '3.5',
-    value: 'base',
-    icon: 'fa-solid fa-bolt',
-    options: [CHAT_MODEL_GPT_3_5, CHAT_MODEL_GPT_3_5_BROWSING]
-  },
-  {
-    label: '4.0',
-    value: 'plus',
-    icon: 'fa-solid fa-wand-magic-sparkles',
-    options: [CHAT_MODEL_GPT_4, CHAT_MODEL_GPT_4_BROWSING, CHAT_MODEL_GPT_4_VISION]
-  }
-];
-
 export default defineComponent({
   name: 'ModelSelector',
   components: {
     ElDropdown,
-    ElButton,
+    ElDropdownMenu,
     ElDropdownItem,
     FontAwesomeIcon
   },
   emits: ['update:modelValue', 'select'],
   data() {
-    // find active group according to model
-    const model = this.$store.state.chat.model;
-    const activeGroup = GROUPS.find((group) => {
-      return group.options.find((option: IChatModel) => {
-        return option.name === model.name;
-      });
-    })?.value;
     return {
-      activeGroup,
-      groups: GROUPS
+      options: [
+        {
+          icon: 'fa-solid fa-bolt',
+          color: '#ff9900',
+          model: CHAT_MODEL_GPT_3_5
+        },
+        {
+          icon: 'fa-solid fa-bolt',
+          color: '#ff9900',
+          model: CHAT_MODEL_GPT_3_5_BROWSING
+        },
+        {
+          icon: 'fa-solid fa-wand-magic-sparkles',
+          color: '#ce65e6',
+          model: CHAT_MODEL_GPT_4
+        },
+        {
+          icon: 'fa-solid fa-wand-magic-sparkles',
+          color: '#ce65e6',
+          model: CHAT_MODEL_GPT_4_BROWSING
+        },
+        {
+          icon: 'fa-solid fa-wand-magic-sparkles',
+          color: '#ce65e6',
+          model: CHAT_MODEL_GPT_4_VISION
+        }
+      ]
     };
   },
   computed: {
@@ -109,18 +97,6 @@ export default defineComponent({
     }
   },
   methods: {
-    onSwitchGroup(group: any) {
-      if (this.activeGroup === group.value) {
-        return;
-      }
-      this.activeGroup = group.value;
-      const options = group.options;
-      // by default select first option
-      if (options && options.length > 0) {
-        this.$emit('select', options[0]);
-        this.$store.dispatch('chat/setModel', options[0]);
-      }
-    },
     onCommandChange(command: IChatModel) {
       this.$emit('select', command);
       this.$store.dispatch('chat/setModel', command);
@@ -131,81 +107,59 @@ export default defineComponent({
 
 <style lang="scss">
 .popper {
-  border-radius: 10px;
+  border-radius: 20px;
   overflow: hidden;
 }
 </style>
 
 <style lang="scss" scoped>
 .selector {
-  background-color: var(--el-bg-color-page);
+  cursor: pointer;
   padding: 7px 6px;
   border-radius: 15px;
   margin-bottom: 10px;
-  .group {
-    padding: 20px 30px;
-    color: var(--el-text-color-primary);
-    border: none;
-    border-radius: 10px;
-    margin: 0 3px;
-    background-color: inherit;
-    &:hover,
-    &:focus,
-    &.active {
-      background-color: var(--el-fill-color-extra-light);
+  .name {
+    font-size: 16px;
+    font-weight: bold;
+    display: inline-block;
+    margin-right: 5px;
+  }
+  .angle {
+    display: inline-block;
+    max-width: 5px;
+  }
+}
+
+.item {
+  display: flex;
+  flex-direction: row;
+
+  .icon {
+    width: 15px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    margin-right: 5px;
+    margin-top: 3px;
+    &.base {
+      color: #ff9900;
     }
-    .icon {
-      display: inline-block;
-      margin-right: 5px;
-      &.base {
-        color: #ff9900;
-      }
-      &.plus {
-        color: #ce65e6;
-      }
+    &.plus {
+      color: #ce65e6;
     }
-    .fa-chevron-down {
-      margin-left: 5px;
-      font-weight: 100;
+  }
+  .info {
+    width: calc(100% - 15px);
+    .name {
+      font-size: 14px;
+      font-weight: bold;
       color: var(--el-text-color-primary);
-      transform: scale(0.8);
+      margin: 0;
     }
-  }
-}
-.menu {
-  .option {
-    .item {
-      display: flex;
-      flex-direction: row;
-
-      .icon {
-        width: 15px;
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        margin-right: 5px;
-        margin-top: 3px;
-        &.base {
-          color: #ff9900;
-        }
-        &.plus {
-          color: #ce65e6;
-        }
-      }
-      .info {
-        width: calc(100% - 15px);
-        .name {
-          font-size: 14px;
-          font-weight: bold;
-          color: var(--el-text-color-primary);
-          margin: 0;
-        }
-        .description {
-          font-size: 12px;
-          color: var(--el-text-color-secondary);
-          margin: 0;
-        }
-      }
+    .description {
+      font-size: 12px;
+      color: var(--el-text-color-secondary);
+      margin: 0;
     }
   }
 }