AI对话页面增加显示AI思考中

web/src/components/ChatReply.vue

@@ -7,7 +7,14 @@
         </div>
 
         <div class="chat-item">
-          <div class="content-wrapper" v-html="md.render(processContent(data.content))"></div>
+          <div
+            class="content-wrapper"
+            v-html="md.render(processContent(data.content))"
+            v-if="data.content"
+          ></div>
+          <div class="content-wrapper flex justify-start items-center" v-else>
+            <span class="mr-2">AI 思考中</span> <Thinking :duration="1.5" />
+          </div>
           <div class="bar flex text-gray-500" v-if="data.created_at">
             <span class="bar-item text-sm">{{ dateFormat(data.created_at) }}</span>
             <!-- <span class="bar-item">tokens: {{ data.tokens }}</span> -->
@@ -65,7 +72,14 @@
         </div>
         <div class="chat-item">
           <div class="content-wrapper">
-            <div class="content" v-html="md.render(processContent(data.content))"></div>
+            <div
+              class="content"
+              v-html="md.render(processContent(data.content))"
+              v-if="data.content"
+            ></div>
+            <div class="content flex justify-start items-center" v-else>
+              <span class="mr-2">AI 思考中</span> <Thinking :duration="1.5" />
+            </div>
           </div>
           <div class="bar text-gray-500" v-if="data.created_at">
             <span class="bar-item text-sm"> {{ dateFormat(data.created_at) }}</span>
@@ -124,6 +138,7 @@ import MarkdownIt from 'markdown-it'
 import emoji from 'markdown-it-emoji'
 import mathjaxPlugin from 'markdown-it-mathjax3'
 import { ref } from 'vue'
+import Thinking from './Thinking.vue'
 // eslint-disable-next-line no-undef,no-unused-vars
 const props = defineProps({
   data: {

web/src/components/Thinking.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="loading-container" :style="containerStyle">
+    <div
+      v-for="i in 3"
+      :key="i"
+      class="dot"
+      :style="[dotStyle, { animationDelay: `${(i - 1) * 0.2}s` }]"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  // 点的大小(px)
+  size: {
+    type: Number,
+    default: 8,
+  },
+  // 点之间的间距(px)
+  spacing: {
+    type: Number,
+    default: 4,
+  },
+  // 动画持续时间(秒)
+  duration: {
+    type: Number,
+    default: 1.4,
+  },
+})
+
+// 计算样式
+const containerStyle = computed(() => ({
+  height: `${props.size * 2}px`,
+}))
+
+const dotStyle = computed(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+  margin: `0 ${props.spacing}px`,
+  background: `var(--el-text-color-regular)`,
+  animationDuration: `${props.duration}s`,
+}))
+</script>
+<style scoped>
+.loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dot {
+  border-radius: 50%;
+  display: inline-block;
+  animation: loading ease-in-out infinite;
+}
+
+@keyframes loading {
+  0% {
+    opacity: 0.2;
+    transform: scale(0.8);
+  }
+  20% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+  40% {
+    opacity: 0.2;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 0.2;
+    transform: scale(0.8);
+  }
+}
+</style>

web/src/components/mobile/ChatReply.vue

@@ -1,24 +1,31 @@
 <template>
   <div class="mobile-message-reply">
     <div class="chat-icon">
-      <van-image :src="icon"/>
+      <van-image :src="icon" />
     </div>
 
     <div class="chat-item">
       <div class="triangle"></div>
       <div class="content-box" ref="contentRef">
-        <div :data-clipboard-text="orgContent" class="content content-mobile" v-html="content"></div>
+        <div
+          :data-clipboard-text="orgContent"
+          class="content content-mobile"
+          v-html="content"
+          v-if="content"
+        ></div>
+        <div class="content content-mobile flex justify-start items-center" v-else>
+          <span class="mr-2">AI 思考中</span> <Thinking :duration="1.5" />
+        </div>
       </div>
-
     </div>
   </div>
 </template>
 
 <script setup>
-import {nextTick, onMounted, ref} from "vue"
-
-import {showImagePreview} from "vant";
+import { onMounted, ref } from 'vue'
 
+import { showImagePreview } from 'vant'
+import Thinking from '../Thinking.vue'
 const props = defineProps({
   content: {
     type: String,
@@ -31,8 +38,8 @@ const props = defineProps({
   icon: {
     type: String,
     default: '/images/gpt-icon.png',
-  }
-});
+  },
+})
 
 const contentRef = ref(null)
 onMounted(() => {
@@ -43,7 +50,7 @@ onMounted(() => {
     }
     imgs[i].addEventListener('click', (e) => {
       e.stopPropagation()
-      showImagePreview([imgs[i].src]);
+      showImagePreview([imgs[i].src])
     })
   }
 })
@@ -221,4 +228,4 @@ onMounted(() => {
   }
 
 }
-</style>
+</style>

web/src/views/ChatPlus.vue

@@ -708,15 +708,12 @@ onMounted(() => {
     const chatRole = getRoleById(roleId.value)
     if (isNewMsg.value && data.type !== 'end') {
       const prePrompt = chatData.value[chatData.value.length - 1]?.content
-      chatData.value.push({
-        type: 'reply',
-        id: randString(32),
-        icon: chatRole['icon'],
-        prompt: prePrompt,
-        content: data.body,
-      })
       isNewMsg.value = false
       lineBuffer.value = data.body
+      const reply = chatData.value[chatData.value.length - 1]
+      if (reply) {
+        reply['content'] = lineBuffer.value
+      }
     } else if (data.type === 'end') {
       // 消息接收完毕
       // 追加当前会话到会话列表
@@ -1079,6 +1076,16 @@ const sendMessage = function () {
     model: getModelValue(modelID.value),
     created_at: new Date().getTime() / 1000,
   })
+  // 添加空回复消息
+  const _role = getRoleById(roleId.value)
+  chatData.value.push({
+    chat_id: chatId,
+    role_id: roleId.value,
+    type: 'reply',
+    id: randString(32),
+    icon: _role['icon'],
+    content: '',
+  })
 
   nextTick(() => {
     document

web/src/views/admin/ApiKey.vue

@@ -2,7 +2,12 @@
   <div class="container list" v-loading="loading">
     <div class="handle-box">
       <el-select v-model="query.type" placeholder="类型" class="handle-input">
-        <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
+        <el-option
+          v-for="item in types"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
       </el-select>
 
       <el-button :icon="Search" @click="fetchData">搜索</el-button>
@@ -40,7 +45,7 @@
 
         <el-table-column label="最后使用时间">
           <template #default="scope">
-            <span v-if="scope.row['last_used_at']">{{ scope.row["last_used_at"] }}</span>
+            <span v-if="scope.row['last_used_at']">{{ scope.row['last_used_at'] }}</span>
             <el-tag v-else>未使用</el-tag>
           </template>
         </el-table-column>
@@ -73,7 +78,13 @@
               </el-col>
               <el-col :span="12">
                 <el-select v-model="preset" placeholder="请选择预设" @change="changePreset">
-                  <el-option v-for="item in presets" :value="item" :label="item.label" :key="item.value">{{ item.label }} </el-option>
+                  <el-option
+                    v-for="item in presets"
+                    :value="item"
+                    :label="item.label"
+                    :key="item.value"
+                    >{{ item.label }}
+                  </el-option>
                 </el-select>
               </el-col>
             </el-row>
@@ -81,14 +92,24 @@
         </el-form-item>
         <el-form-item label="类型：" prop="type">
           <el-select v-model="item.type" placeholder="请选择类型">
-            <el-option v-for="item in types" :value="item.value" :label="item.label" :key="item.value">{{ item.label }} </el-option>
+            <el-option
+              v-for="item in types"
+              :value="item.value"
+              :label="item.label"
+              :key="item.value"
+              >{{ item.label }}
+            </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="API KEY：" prop="value">
           <el-input v-model="item.value" autocomplete="off" />
         </el-form-item>
         <el-form-item label="API URL：" prop="api_url">
-          <el-input v-model="item.api_url" autocomplete="off" placeholder="只填 BASE URL 即可，如：https://api.openai.com 或者 wss://api.openai.com" />
+          <el-input
+            v-model="item.api_url"
+            autocomplete="off"
+            placeholder="只填 BASE URL 如：https://api.openai.com 或者完整 URL 如：https://api.openai.com/v1/chat/completions"
+          />
         </el-form-item>
 
         <!--        <el-form-item label="代理地址：" prop="proxy_url">-->
@@ -112,162 +133,162 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, reactive, ref } from "vue";
-import { httpGet, httpPost } from "@/utils/http";
-import { ElMessage } from "element-plus";
-import { dateFormat, removeArrayItem, substr } from "@/utils/libs";
-import { DocumentCopy, Plus, ShoppingCart, Search } from "@element-plus/icons-vue";
-import ClipboardJS from "clipboard";
+import { httpGet, httpPost } from '@/utils/http'
+import { dateFormat, removeArrayItem, substr } from '@/utils/libs'
+import { DocumentCopy, Plus, Search, ShoppingCart } from '@element-plus/icons-vue'
+import ClipboardJS from 'clipboard'
+import { ElMessage } from 'element-plus'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
 
 // 变量定义
-const items = ref([]);
-const query = ref({ type: "" });
-const item = ref({});
-const showDialog = ref(false);
+const items = ref([])
+const query = ref({ type: '' })
+const item = ref({})
+const showDialog = ref(false)
 const rules = reactive({
-  name: [{ required: true, message: "请输入名称", trigger: "change" }],
-  type: [{ required: true, message: "请选择用途", trigger: "change" }],
-  value: [{ required: true, message: "请输入 API KEY 值", trigger: "change" }],
-});
+  name: [{ required: true, message: '请输入名称', trigger: 'change' }],
+  type: [{ required: true, message: '请选择用途', trigger: 'change' }],
+  value: [{ required: true, message: '请输入 API KEY 值', trigger: 'change' }],
+})
 
-const loading = ref(true);
-const formRef = ref(null);
-const title = ref("");
+const loading = ref(true)
+const formRef = ref(null)
+const title = ref('')
 const types = ref([
-  { label: "对话", value: "chat" },
-  { label: "Midjourney", value: "mj" },
-  { label: "Stable-Diffusion", value: "sd" },
-  { label: "DALL-E", value: "dalle" },
-  { label: "Suno文生歌", value: "suno" },
-  { label: "Luma视频", value: "luma" },
-  { label: "可灵视频", value: "keling" },
-  { label: "Realtime API", value: "realtime" },
-  { label: "语音合成", value: "tts" },
-  { label: "其他", value: "other" },
-]);
-const isEdit = ref(false);
-const clipboard = ref(null);
+  { label: '对话', value: 'chat' },
+  { label: 'Midjourney', value: 'mj' },
+  { label: 'Stable-Diffusion', value: 'sd' },
+  { label: 'DALL-E', value: 'dalle' },
+  { label: 'Suno文生歌', value: 'suno' },
+  { label: 'Luma视频', value: 'luma' },
+  { label: '可灵视频', value: 'keling' },
+  { label: 'Realtime API', value: 'realtime' },
+  { label: '语音合成', value: 'tts' },
+  { label: '其他', value: 'other' },
+])
+const isEdit = ref(false)
+const clipboard = ref(null)
 const presets = ref([
-  { label: "GiteeAI", value: "https://ai.gitee.com" },
-  { label: "中转01", value: "https://api.geekai.pro" },
-  { label: "中转03", value: "https://api.geekai.me" },
-  { label: "OpenAI", value: "https://api.openai.com" },
-]);
-const preset = ref(null);
+  { label: 'GiteeAI', value: 'https://ai.gitee.com' },
+  { label: '中转01', value: 'https://api.geekai.pro' },
+  { label: '中转03', value: 'https://api.geekai.me' },
+  { label: 'OpenAI', value: 'https://api.openai.com' },
+])
+const preset = ref(null)
 
 onMounted(() => {
-  clipboard.value = new ClipboardJS(".copy-key");
-  clipboard.value.on("success", () => {
-    ElMessage.success("复制成功！");
-  });
+  clipboard.value = new ClipboardJS('.copy-key')
+  clipboard.value.on('success', () => {
+    ElMessage.success('复制成功！')
+  })
 
-  clipboard.value.on("error", () => {
-    ElMessage.error("复制失败！");
-  });
+  clipboard.value.on('error', () => {
+    ElMessage.error('复制失败！')
+  })
 
-  fetchData();
-});
+  fetchData()
+})
 
 onUnmounted(() => {
-  clipboard.value.destroy();
-});
+  clipboard.value.destroy()
+})
 
 const getTypeName = (type) => {
   for (let v of types.value) {
     if (v.value === type) {
-      return v.label;
+      return v.label
     }
   }
-  return "";
-};
+  return ''
+}
 
 // 获取数据
 const fetchData = () => {
-  httpGet("/api/admin/apikey/list", query.value)
+  httpGet('/api/admin/apikey/list', query.value)
     .then((res) => {
       if (res.data) {
         // 初始化数据
-        const arr = res.data;
+        const arr = res.data
         for (let i = 0; i < arr.length; i++) {
-          arr[i].last_used_at = dateFormat(arr[i].last_used_at);
+          arr[i].last_used_at = dateFormat(arr[i].last_used_at)
         }
-        items.value = arr;
+        items.value = arr
       }
-      loading.value = false;
+      loading.value = false
     })
     .catch(() => {
-      ElMessage.error("获取数据失败");
-    });
-};
+      ElMessage.error('获取数据失败')
+    })
+}
 
 const add = function () {
-  showDialog.value = true;
-  title.value = "新增 API KEY";
-  isEdit.value = false;
+  showDialog.value = true
+  title.value = '新增 API KEY'
+  isEdit.value = false
   item.value = {
     enabled: true,
-    api_url: "",
-  };
-};
+    api_url: '',
+  }
+}
 
 const edit = function (row) {
-  showDialog.value = true;
-  title.value = "修改 API KEY";
-  item.value = row;
-  isEdit.value = true;
-};
+  showDialog.value = true
+  title.value = '修改 API KEY'
+  item.value = row
+  isEdit.value = true
+}
 
 const save = function () {
   formRef.value.validate((valid) => {
     if (valid) {
-      showDialog.value = false;
-      httpPost("/api/admin/apikey/save", item.value)
+      showDialog.value = false
+      httpPost('/api/admin/apikey/save', item.value)
         .then((res) => {
-          ElMessage.success("操作成功！");
-          if (!item.value["id"]) {
-            const newItem = res.data;
-            newItem.last_used_at = dateFormat(newItem.last_used_at);
-            items.value.push(newItem);
+          ElMessage.success('操作成功！')
+          if (!item.value['id']) {
+            const newItem = res.data
+            newItem.last_used_at = dateFormat(newItem.last_used_at)
+            items.value.push(newItem)
           }
         })
         .catch((e) => {
-          ElMessage.error("操作失败，" + e.message);
-        });
+          ElMessage.error('操作失败，' + e.message)
+        })
     } else {
-      return false;
+      return false
     }
-  });
-};
+  })
+}
 
 const remove = function (row) {
-  httpGet("/api/admin/apikey/remove?id=" + row.id)
+  httpGet('/api/admin/apikey/remove?id=' + row.id)
     .then(() => {
-      ElMessage.success("删除成功！");
+      ElMessage.success('删除成功！')
       items.value = removeArrayItem(items.value, row, (v1, v2) => {
-        return v1.id === v2.id;
-      });
+        return v1.id === v2.id
+      })
     })
     .catch((e) => {
-      ElMessage.error("删除失败：" + e.message);
-    });
-};
+      ElMessage.error('删除失败：' + e.message)
+    })
+}
 
 const set = (filed, row) => {
-  httpPost("/api/admin/apikey/set", { id: row.id, filed: filed, value: row[filed] })
+  httpPost('/api/admin/apikey/set', { id: row.id, filed: filed, value: row[filed] })
     .then(() => {
-      ElMessage.success("操作成功！");
+      ElMessage.success('操作成功！')
     })
     .catch((e) => {
-      ElMessage.error("操作失败：" + e.message);
-    });
-};
+      ElMessage.error('操作失败：' + e.message)
+    })
+}
 
 const changePreset = (row) => {
-  item.value.api_url = row.value;
+  item.value.api_url = row.value
   if (!item.value.name) {
-    item.value.name = row.label;
+    item.value.name = row.label
   }
-};
+}
 </script>
 
 <style lang="stylus" scoped>

web/src/views/admin/Login.vue

@@ -10,7 +10,14 @@
 
           <h1 class="header">登录 {{ title }}</h1>
           <div class="content">
-            <el-input v-model="username" placeholder="请输入用户名" size="large" autocomplete="off" autofocus @keyup.enter="login">
+            <el-input
+              v-model="username"
+              placeholder="请输入用户名"
+              size="large"
+              autocomplete="off"
+              autofocus
+              @keyup.enter="login"
+            >
               <template #prefix>
                 <el-icon>
                   <UserFilled />
@@ -18,7 +25,14 @@
               </template>
             </el-input>
 
-            <el-input v-model="password" placeholder="请输入密码" size="large" show-password autocomplete="off" @keyup.enter="login">
+            <el-input
+              v-model="password"
+              placeholder="请输入密码"
+              size="large"
+              show-password
+              autocomplete="off"
+              @keyup.enter="login"
+            >
               <template #prefix>
                 <el-icon>
                   <Lock />
@@ -27,7 +41,9 @@
             </el-input>
 
             <el-row class="btn-row">
-              <el-button class="login-btn" size="large" type="primary" @click="login">登录</el-button>
+              <el-button class="login-btn" size="large" type="primary" @click="login"
+                >登录</el-button
+              >
             </el-row>
           </div>
         </div>
@@ -40,57 +56,57 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { Lock, UserFilled } from "@element-plus/icons-vue";
-import { httpPost } from "@/utils/http";
-import { ElMessage } from "element-plus";
-import { useRouter } from "vue-router";
-import FooterBar from "@/components/FooterBar.vue";
-import { setAdminToken } from "@/store/session";
-import { checkAdminSession, getSystemInfo } from "@/store/cache";
-import Captcha from "@/components/Captcha.vue";
+import Captcha from '@/components/Captcha.vue'
+import FooterBar from '@/components/FooterBar.vue'
+import { checkAdminSession, getSystemInfo } from '@/store/cache'
+import { setAdminToken } from '@/store/session'
+import { httpPost } from '@/utils/http'
+import { Lock, UserFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
-const router = useRouter();
-const title = ref("Geek-AI Console");
-const username = ref(process.env.VUE_APP_ADMIN_USER);
-const password = ref(process.env.VUE_APP_ADMIN_PASS);
-const logo = ref("");
-const enableVerify = ref(false);
-const captchaRef = ref(null);
+const router = useRouter()
+const title = ref('Geek-AI Console')
+const username = ref(process.env.VUE_APP_ADMIN_USER)
+const password = ref(process.env.VUE_APP_ADMIN_PASS)
+const logo = ref('')
+const enableVerify = ref(false)
+const captchaRef = ref(null)
 
 checkAdminSession()
   .then(() => {
-    router.push("/admin");
+    router.push('/admin')
   })
-  .catch(() => {});
+  .catch(() => {})
 
 // 加载系统配置
 getSystemInfo()
   .then((res) => {
-    title.value = res.data.admin_title;
-    logo.value = res.data.logo;
-    enableVerify.value = res.data["enabled_verify"];
+    title.value = res.data.admin_title
+    logo.value = res.data.logo
+    enableVerify.value = res.data['enabled_verify']
   })
   .catch((e) => {
-    ElMessage.error("加载系统配置失败: " + e.message);
-  });
+    ElMessage.error('加载系统配置失败: ' + e.message)
+  })
 
 const login = function () {
-  if (username.value === "") {
-    return ElMessage.error("请输入用户名");
+  if (username.value === '') {
+    return ElMessage.error('请输入用户名')
   }
-  if (password.value === "") {
-    return ElMessage.error("请输入密码");
+  if (password.value === '') {
+    return ElMessage.error('请输入密码')
   }
   if (enableVerify.value) {
-    captchaRef.value.loadCaptcha();
+    captchaRef.value.loadCaptcha()
   } else {
-    doLogin({});
+    doLogin({})
   }
-};
+}
 
 const doLogin = function (verifyData) {
-  httpPost("/api/admin/login", {
+  httpPost('/api/admin/login', {
     username: username.value.trim(),
     password: password.value.trim(),
     key: verifyData.key,
@@ -98,13 +114,13 @@ const doLogin = function (verifyData) {
     x: verifyData.x,
   })
     .then((res) => {
-      setAdminToken(res.data.token);
-      router.push("/admin");
+      setAdminToken(res.data.token)
+      router.push('/admin')
     })
     .catch((e) => {
-      ElMessage.error("登录失败，" + e.message);
-    });
-};
+      ElMessage.error('登录失败，' + e.message)
+    })
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -114,7 +130,9 @@ const doLogin = function (verifyData) {
   right 0
   top 0
   bottom 0
-  background-color #091519
+  background #8d4bbb
+  // background-image url("~@/assets/img/transparent-bg.png")
+  // background-repeat:repeat;
   background-image url("~@/assets/img/admin-login-bg.jpg")
   background-size cover
   background-position center
@@ -145,7 +163,7 @@ const doLogin = function (verifyData) {
       padding 40px;
       color #ffffff
       border-radius 10px;
-      background rgba(0, 0, 0, 0.3)
+      background rgba(0, 0, 0, 0.4)
 
       .logo {
         text-align center

web/src/views/mobile/ChatSession.vue

@@ -20,14 +20,33 @@
         </template>
       </van-nav-bar>
 
-      <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="shareOptions" @select="shareChat" />
+      <van-share-sheet
+        v-model:show="showShare"
+        title="立即分享给好友"
+        :options="shareOptions"
+        @select="shareChat"
+      />
 
       <div class="chat-list-wrapper">
         <div id="message-list-box" :style="{ height: winHeight + 'px' }" class="message-list-box">
-          <van-list v-model:error="error" :finished="finished" error-text="请求失败，点击重新加载" @load="onLoad">
+          <van-list
+            v-model:error="error"
+            :finished="finished"
+            error-text="请求失败，点击重新加载"
+            @load="onLoad"
+          >
             <van-cell v-for="item in chatData" :key="item" :border="false" class="message-line">
-              <chat-prompt v-if="item.type === 'prompt'" :content="item.content" :icon="item.icon" />
-              <chat-reply v-else-if="item.type === 'reply'" :content="item.content" :icon="item.icon" :org-content="item.orgContent" />
+              <chat-prompt
+                v-if="item.type === 'prompt'"
+                :content="item.content"
+                :icon="item.icon"
+              />
+              <chat-reply
+                v-else-if="item.type === 'reply'"
+                :content="item.content"
+                :icon="item.icon"
+                :org-content="item.orgContent"
+              />
             </van-cell>
           </van-list>
         </div>
@@ -61,7 +80,9 @@
       </div>
     </div>
 
-    <button id="copy-link-btn" style="display: none" :data-clipboard-text="url">复制链接地址</button>
+    <button id="copy-link-btn" style="display: none" :data-clipboard-text="url">
+      复制链接地址
+    </button>
 
     <!--    <van-overlay :show="showMic" z-index="100">-->
     <!--      <div class="mic-wrapper">-->
@@ -78,10 +99,14 @@
   </div>
 
   <van-popup v-model:show="showPicker" position="bottom" class="popup">
-    <van-picker :columns="columns" v-model="selectedValues"
-                title="选择模型和角色"
-                @change="onChange"
-                @cancel="showPicker = false" @confirm="newChat">
+    <van-picker
+      :columns="columns"
+      v-model="selectedValues"
+      title="选择模型和角色"
+      @change="onChange"
+      @cancel="showPicker = false"
+      @confirm="newChat"
+    >
       <template #option="item">
         <div class="picker-option">
           <van-image v-if="item.icon" :src="item.icon" fit="cover" round />
@@ -93,439 +118,359 @@
 </template>
 
 <script setup>
-import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
-import { showImagePreview, showNotify, showToast } from "vant";
-import { useRouter } from "vue-router";
-import { processContent, randString, renderInputText, UUID } from "@/utils/libs";
-import { httpGet } from "@/utils/http";
-import hl from "highlight.js";
-import "highlight.js/styles/a11y-dark.css";
-import ChatPrompt from "@/components/mobile/ChatPrompt.vue";
-import ChatReply from "@/components/mobile/ChatReply.vue";
-import { checkSession, getClientId } from "@/store/cache";
-import Clipboard from "clipboard";
-import { showMessageError } from "@/utils/dialog";
-import { useSharedStore } from "@/store/sharedata";
-import emoji from "markdown-it-emoji";
-import mathjaxPlugin from "markdown-it-mathjax3";
-import MarkdownIt from "markdown-it";
-const winHeight = ref(0);
-const navBarRef = ref(null);
-const bottomBarRef = ref(null);
-const router = useRouter();
+import ChatPrompt from '@/components/mobile/ChatPrompt.vue'
+import ChatReply from '@/components/mobile/ChatReply.vue'
+import { checkSession, getClientId } from '@/store/cache'
+import { useSharedStore } from '@/store/sharedata'
+import { showMessageError } from '@/utils/dialog'
+import { httpGet } from '@/utils/http'
+import { processContent, randString, renderInputText, UUID } from '@/utils/libs'
+import Clipboard from 'clipboard'
+import hl from 'highlight.js'
+import 'highlight.js/styles/a11y-dark.css'
+import MarkdownIt from 'markdown-it'
+import emoji from 'markdown-it-emoji'
+import mathjaxPlugin from 'markdown-it-mathjax3'
+import { showImagePreview, showNotify, showToast } from 'vant'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+const winHeight = ref(0)
+const navBarRef = ref(null)
+const bottomBarRef = ref(null)
+const router = useRouter()
 
-const roles = ref([]);
-const roleId = ref(parseInt(router.currentRoute.value.query["role_id"]));
-const role = ref({});
-const models = ref([]);
-const modelId = ref(parseInt(router.currentRoute.value.query["model_id"]));
-const modelValue = ref("");
-const title = ref(router.currentRoute.value.query["title"]);
-const chatId = ref(router.currentRoute.value.query["chat_id"]);
-const loginUser = ref(null);
+const roles = ref([])
+const roleId = ref(parseInt(router.currentRoute.value.query['role_id']))
+const role = ref({})
+const models = ref([])
+const modelId = ref(parseInt(router.currentRoute.value.query['model_id']))
+const modelValue = ref('')
+const title = ref(router.currentRoute.value.query['title'])
+const chatId = ref(router.currentRoute.value.query['chat_id'])
+const loginUser = ref(null)
 // const showMic = ref(false)
-const showPicker = ref(false);
-const columns = ref([roles.value, models.value]);
-const selectedValues = ref([roleId.value, modelId.value]);
+const showPicker = ref(false)
+const columns = ref([roles.value, models.value])
+const selectedValues = ref([roleId.value, modelId.value])
 
 checkSession()
   .then((user) => {
-    loginUser.value = user;
+    loginUser.value = user
   })
   .catch(() => {
-    router.push("/login");
-  });
+    router.push('/login')
+  })
 
 const loadModels = () => {
   // 加载模型
-  httpGet("/api/model/list")
+  httpGet('/api/model/list')
     .then((res) => {
-      models.value = res.data;
+      models.value = res.data
       if (!modelId.value) {
-        modelId.value = models.value[0].id;
+        modelId.value = models.value[0].id
       }
       for (let i = 0; i < models.value.length; i++) {
-        models.value[i].text = models.value[i].name;
-        models.value[i].mValue = models.value[i].value;
-        models.value[i].value = models.value[i].id;
+        models.value[i].text = models.value[i].name
+        models.value[i].mValue = models.value[i].value
+        models.value[i].value = models.value[i].id
       }
-      modelValue.value = getModelName(modelId.value);
+      modelValue.value = getModelName(modelId.value)
       // 加载角色列表
       httpGet(`/api/app/list/user`, { id: roleId.value })
         .then((res) => {
-          roles.value = res.data;
+          roles.value = res.data
           if (!roleId.value) {
-            roleId.value = roles.value[0]["id"];
+            roleId.value = roles.value[0]['id']
           }
           // build data for role picker
           for (let i = 0; i < roles.value.length; i++) {
-            roles.value[i].text = roles.value[i].name;
-            roles.value[i].value = roles.value[i].id;
-            roles.value[i].helloMsg = roles.value[i].hello_msg;
+            roles.value[i].text = roles.value[i].name
+            roles.value[i].value = roles.value[i].id
+            roles.value[i].helloMsg = roles.value[i].hello_msg
           }
-          role.value = getRoleById(roleId.value);
-          columns.value = [roles.value, models.value];
-          selectedValues.value = [roleId.value, modelId.value];
-          loadChatHistory();
+          role.value = getRoleById(roleId.value)
+          columns.value = [roles.value, models.value]
+          selectedValues.value = [roleId.value, modelId.value]
+          loadChatHistory()
         })
         .catch((e) => {
-          showNotify({ type: "danger", message: "获取聊天角色失败: " + e.messages });
-        });
+          showNotify({ type: 'danger', message: '获取聊天角色失败: ' + e.messages })
+        })
     })
     .catch((e) => {
-      showNotify({ type: "danger", message: "加载模型失败: " + e.message });
-    });
-};
+      showNotify({ type: 'danger', message: '加载模型失败: ' + e.message })
+    })
+}
 if (chatId.value) {
   httpGet(`/api/chat/detail?chat_id=${chatId.value}`)
     .then((res) => {
-      title.value = res.data.title;
-      modelId.value = res.data.model_id;
-      roleId.value = res.data.role_id;
-      loadModels();
+      title.value = res.data.title
+      modelId.value = res.data.model_id
+      roleId.value = res.data.role_id
+      loadModels()
     })
     .catch(() => {
-      loadModels();
-    });
+      loadModels()
+    })
 } else {
-  title.value = "新建对话";
-  chatId.value = UUID();
-  loadModels();
+  title.value = '新建对话'
+  chatId.value = UUID()
+  loadModels()
 }
 
-const chatData = ref([]);
-const loading = ref(false);
-const finished = ref(false);
-const error = ref(false);
-const store = useSharedStore();
-const url = ref(location.protocol + "//" + location.host + "/mobile/chat/export?chat_id=" + chatId.value);
+const chatData = ref([])
+const loading = ref(false)
+const finished = ref(false)
+const error = ref(false)
+const store = useSharedStore()
+const url = ref(
+  location.protocol + '//' + location.host + '/mobile/chat/export?chat_id=' + chatId.value
+)
 const md = new MarkdownIt({
   breaks: true,
   html: true,
   linkify: true,
   typographer: true,
   highlight: function (str, lang) {
-    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
+    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
     // 显示复制代码按钮
     const copyBtn = `<span class="copy-code-mobile" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
 <textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(
       /<\/textarea>/g,
-      "&lt;/textarea>"
-    )}</textarea>`;
+      '&lt;/textarea>'
+    )}</textarea>`
     if (lang && hl.getLanguage(lang)) {
-      const langHtml = `<span class="lang-name">${lang}</span>`;
+      const langHtml = `<span class="lang-name">${lang}</span>`
       // 处理代码高亮
-      const preCode = hl.highlight(lang, str, true).value;
+      const preCode = hl.highlight(lang, str, true).value
       // 将代码包裹在 pre 中
-      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`;
+      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
     }
 
     // 处理代码高亮
-    const preCode = md.utils.escapeHtml(str);
+    const preCode = md.utils.escapeHtml(str)
     // 将代码包裹在 pre 中
-    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`;
+    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
   },
-});
-md.use(mathjaxPlugin);
-md.use(emoji);
+})
+md.use(mathjaxPlugin)
+md.use(emoji)
 onMounted(() => {
-  winHeight.value = window.innerHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight - 70;
+  winHeight.value =
+    window.innerHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight - 70
 
-  const clipboard = new Clipboard(".content-mobile,.copy-code-mobile,#copy-link-btn");
-  clipboard.on("success", (e) => {
-    e.clearSelection();
-    showNotify({ type: "success", message: "复制成功", duration: 1000 });
-  });
-  clipboard.on("error", () => {
-    showNotify({ type: "danger", message: "复制失败", duration: 2000 });
-  });
+  const clipboard = new Clipboard('.content-mobile,.copy-code-mobile,#copy-link-btn')
+  clipboard.on('success', (e) => {
+    e.clearSelection()
+    showNotify({ type: 'success', message: '复制成功', duration: 1000 })
+  })
+  clipboard.on('error', () => {
+    showNotify({ type: 'danger', message: '复制失败', duration: 2000 })
+  })
 
-  store.addMessageHandler("chat", (data) => {
-    if (data.channel !== "chat" || data.clientId !== getClientId()) {
-      return;
+  store.addMessageHandler('chat', (data) => {
+    if (data.channel !== 'chat' || data.clientId !== getClientId()) {
+      return
     }
 
-    if (data.type === "error") {
-      showMessageError(data.body);
-      return;
+    if (data.type === 'error') {
+      showMessageError(data.body)
+      return
     }
 
     if (isNewMsg.value) {
-      chatData.value.push({
-        type: "reply",
-        id: randString(32),
-        icon: role.value.icon,
-        content: data.body,
-      });
       if (!title.value) {
-        title.value = previousText.value;
+        title.value = previousText.value
       }
-      lineBuffer.value = data.body;
-      isNewMsg.value = false;
-    } else if (data.type === "end") {
+      lineBuffer.value = data.body
+      isNewMsg.value = false
+      const reply = chatData.value[chatData.value.length - 1]
+      if (reply) {
+        reply['content'] = lineBuffer.value
+      }
+    } else if (data.type === 'end') {
       // 消息接收完毕
-      enableInput();
-      lineBuffer.value = ""; // 清空缓冲
-      isNewMsg.value = true;
+      enableInput()
+      lineBuffer.value = '' // 清空缓冲
+      isNewMsg.value = true
     } else {
-      lineBuffer.value += data.body;
-      const reply = chatData.value[chatData.value.length - 1];
-      reply["orgContent"] = lineBuffer.value;
-      reply["content"] = md.render(processContent(lineBuffer.value));
+      lineBuffer.value += data.body
+      const reply = chatData.value[chatData.value.length - 1]
+      reply['orgContent'] = lineBuffer.value
+      reply['content'] = md.render(processContent(lineBuffer.value))
 
       nextTick(() => {
-        hl.configure({ ignoreUnescapedHTML: true });
-        const lines = document.querySelectorAll(".message-line");
-        const blocks = lines[lines.length - 1].querySelectorAll("pre code");
+        hl.configure({ ignoreUnescapedHTML: true })
+        const lines = document.querySelectorAll('.message-line')
+        const blocks = lines[lines.length - 1].querySelectorAll('pre code')
         blocks.forEach((block) => {
-          hl.highlightElement(block);
-        });
-        scrollListBox();
+          hl.highlightElement(block)
+        })
+        scrollListBox()
 
-        const items = document.querySelectorAll(".message-line");
-        const imgs = items[items.length - 1].querySelectorAll("img");
+        const items = document.querySelectorAll('.message-line')
+        const imgs = items[items.length - 1].querySelectorAll('img')
         for (let i = 0; i < imgs.length; i++) {
           if (!imgs[i].src) {
-            continue;
+            continue
           }
-          imgs[i].addEventListener("click", (e) => {
-            e.stopPropagation();
-            showImagePreview([imgs[i].src]);
-          });
+          imgs[i].addEventListener('click', (e) => {
+            e.stopPropagation()
+            showImagePreview([imgs[i].src])
+          })
         }
-      });
+      })
     }
-  });
-});
+  })
+})
 
 onUnmounted(() => {
-  store.removeMessageHandler("chat");
-});
+  store.removeMessageHandler('chat')
+})
 
 const newChat = (item) => {
-  showPicker.value = false;
-  const options = item.selectedOptions;
-  roleId.value = options[0].value;
-  modelId.value = options[1].value;
-  modelValue.value = getModelName(modelId.value);
-  chatId.value = UUID();
-  chatData.value = [];
-  role.value = getRoleById(roleId.value);
-  title.value = "新建对话";
-  loadChatHistory();
-};
+  showPicker.value = false
+  const options = item.selectedOptions
+  roleId.value = options[0].value
+  modelId.value = options[1].value
+  modelValue.value = getModelName(modelId.value)
+  chatId.value = UUID()
+  chatData.value = []
+  role.value = getRoleById(roleId.value)
+  title.value = '新建对话'
+  loadChatHistory()
+}
 
 const onLoad = () => {
   // checkSession().then(() => {
   //   connect()
   // }).catch(() => {
   // })
-};
+}
 
 const loadChatHistory = () => {
-  httpGet("/api/chat/history?chat_id=" + chatId.value)
+  httpGet('/api/chat/history?chat_id=' + chatId.value)
     .then((res) => {
-      const role = getRoleById(roleId.value);
+      const role = getRoleById(roleId.value)
       // 加载状态结束
-      finished.value = true;
-      const data = res.data;
+      finished.value = true
+      const data = res.data
       if (data.length === 0) {
         chatData.value.push({
-          type: "reply",
+          type: 'reply',
           id: randString(32),
           icon: role.icon,
           content: role.hello_msg,
           orgContent: role.hello_msg,
-        });
-        return;
+        })
+        return
       }
 
       for (let i = 0; i < data.length; i++) {
-        if (data[i].type === "prompt") {
-          chatData.value.push(data[i]);
-          continue;
+        if (data[i].type === 'prompt') {
+          chatData.value.push(data[i])
+          continue
         }
 
-        data[i].orgContent = data[i].content;
-        data[i].content = md.render(processContent(data[i].content));
-        chatData.value.push(data[i]);
+        data[i].orgContent = data[i].content
+        data[i].content = md.render(processContent(data[i].content))
+        chatData.value.push(data[i])
       }
 
       nextTick(() => {
-        hl.configure({ ignoreUnescapedHTML: true });
-        const blocks = document.querySelector("#message-list-box").querySelectorAll("pre code");
+        hl.configure({ ignoreUnescapedHTML: true })
+        const blocks = document.querySelector('#message-list-box').querySelectorAll('pre code')
         blocks.forEach((block) => {
-          hl.highlightElement(block);
-        });
+          hl.highlightElement(block)
+        })
 
-        scrollListBox();
-      });
+        scrollListBox()
+      })
     })
     .catch(() => {
-      error.value = true;
-    });
-};
+      error.value = true
+    })
+}
 
 // 创建 socket 连接
-const prompt = ref("");
-const showStopGenerate = ref(false); // 停止生成
-const showReGenerate = ref(false); // 重新生成
-const previousText = ref(""); // 上一次提问
-const lineBuffer = ref(""); // 输出缓冲行
-const canSend = ref(true);
-const isNewMsg = ref(true);
-const stream = ref(store.chatStream);
+const prompt = ref('')
+const showStopGenerate = ref(false) // 停止生成
+const showReGenerate = ref(false) // 重新生成
+const previousText = ref('') // 上一次提问
+const lineBuffer = ref('') // 输出缓冲行
+const canSend = ref(true)
+const isNewMsg = ref(true)
+const stream = ref(store.chatStream)
 watch(
   () => store.chatStream,
   (newValue) => {
-    stream.value = newValue;
+    stream.value = newValue
   }
-);
-// const connect = function () {
-//   // 初始化 WebSocket 对象
-//   const _sessionId = getSessionId();
-//   let host = process.env.VUE_APP_WS_HOST
-//   if (host === '') {
-//     if (location.protocol === 'https:') {
-//       host = 'wss://' + location.host;
-//     } else {
-//       host = 'ws://' + location.host;
-//     }
-//   }
-//   const _socket = new WebSocket(host + `/api/chat/new?session_id=${_sessionId}&role_id=${roleId.value}&chat_id=${chatId.value}&model_id=${modelId.value}&token=${getUserToken()}`);
-//   _socket.addEventListener('open', () => {
-//     loading.value = false
-//     previousText.value = '';
-//     canSend.value = true;
-//
-//     if (loadHistory.value) { // 加载历史消息
-//      loadChatHistory()
-//     }
-//   });
-//
-//   _socket.addEventListener('message', event => {
-//     if (event.data instanceof Blob) {
-//       const reader = new FileReader();
-//       reader.readAsText(event.data, "UTF-8");
-//       reader.onload = () => {
-//         const data = JSON.parse(String(reader.result));
-//         if (data.type === 'error') {
-//           showMessageError(data.message)
-//           return
-//         }
-//
-//         if (isNewMsg.value && data.type !== 'end') {
-//           chatData.value.push({
-//             type: "reply",
-//             id: randString(32),
-//             icon: role.value.icon,
-//             content: data.content
-//           });
-//           if (!title.value) {
-//             title.value = previousText.value
-//           }
-//           lineBuffer.value = data.content;
-//           isNewMsg.value = false
-//         } else if (data.type === 'end') { // 消息接收完毕
-//           enableInput()
-//           lineBuffer.value = ''; // 清空缓冲
-//           isNewMsg.value = true
-//         } else {
-//           lineBuffer.value += data.content;
-//           const reply = chatData.value[chatData.value.length - 1]
-//           reply['orgContent'] = lineBuffer.value;
-//           reply['content'] = md.render(processContent(lineBuffer.value));
-//
-//           nextTick(() => {
-//             hl.configure({ignoreUnescapedHTML: true})
-//             const lines = document.querySelectorAll('.message-line');
-//             const blocks = lines[lines.length - 1].querySelectorAll('pre code');
-//             blocks.forEach((block) => {
-//               hl.highlightElement(block)
-//             })
-//             scrollListBox()
-//
-//             const items = document.querySelectorAll('.message-line')
-//             const imgs = items[items.length - 1].querySelectorAll('img')
-//             for (let i = 0; i < imgs.length; i++) {
-//               if (!imgs[i].src) {
-//                 continue
-//               }
-//               imgs[i].addEventListener('click', (e) => {
-//                 e.stopPropagation()
-//                 showImagePreview([imgs[i].src]);
-//               })
-//             }
-//           })
-//         }
-//
-//       };
-//     }
-//
-//   });
-//
-//   _socket.addEventListener('close', () => {
-//     // 停止发送消息
-//     canSend.value = true
-//     loadHistory.value = false
-//     // 重连
-//     connect()
-//   });
-//
-//   socket.value = _socket;
-// }
+)
 
 const disableInput = (force) => {
-  canSend.value = false;
-  showReGenerate.value = false;
-  showStopGenerate.value = !force;
-};
+  canSend.value = false
+  showReGenerate.value = false
+  showStopGenerate.value = !force
+}
 
 const enableInput = () => {
-  canSend.value = true;
-  showReGenerate.value = previousText.value !== "";
-  showStopGenerate.value = false;
-};
+  canSend.value = true
+  showReGenerate.value = previousText.value !== ''
+  showStopGenerate.value = false
+}
 
 // 将聊天框的滚动条滑动到最底部
 const scrollListBox = () => {
-  document.getElementById("message-list-box").scrollTo(0, document.getElementById("message-list-box").scrollHeight + 46);
-};
+  document
+    .getElementById('message-list-box')
+    .scrollTo(0, document.getElementById('message-list-box').scrollHeight + 46)
+}
 
 const sendMessage = () => {
   if (canSend.value === false) {
-    showToast("AI 正在作答中，请稍后...");
-    return;
+    showToast('AI 正在作答中，请稍后...')
+    return
   }
 
   if (store.socket.conn.readyState !== WebSocket.OPEN) {
-    showToast("连接断开，正在重连...");
-    return;
+    showToast('连接断开，正在重连...')
+    return
   }
 
   if (prompt.value.trim().length === 0) {
-    showToast("请输入需要 AI 回答的问题");
-    return false;
+    showToast('请输入需要 AI 回答的问题')
+    return false
   }
 
   // 追加消息
   chatData.value.push({
-    type: "prompt",
+    type: 'prompt',
     id: randString(32),
     icon: loginUser.value.avatar,
     content: renderInputText(prompt.value),
     created_at: new Date().getTime(),
-  });
+  })
+  // 添加空回复消息
+  const _role = getRoleById(roleId.value)
+  chatData.value.push({
+    chat_id: chatId,
+    role_id: roleId.value,
+    type: 'reply',
+    id: randString(32),
+    icon: _role['icon'],
+    content: '',
+  })
 
   nextTick(() => {
-    scrollListBox();
-  });
+    scrollListBox()
+  })
 
-  disableInput(false);
+  disableInput(false)
   store.socket.conn.send(
     JSON.stringify({
-      channel: "chat",
-      type: "text",
+      channel: 'chat',
+      type: 'text',
       body: {
         role_id: roleId.value,
         model_id: modelId.value,
@@ -534,33 +479,33 @@ const sendMessage = () => {
         stream: stream.value,
       },
     })
-  );
-  previousText.value = prompt.value;
-  prompt.value = "";
-  return true;
-};
+  )
+  previousText.value = prompt.value
+  prompt.value = ''
+  return true
+}
 
 const stopGenerate = () => {
-  showStopGenerate.value = false;
-  httpGet("/api/chat/stop?session_id=" + getClientId()).then(() => {
-    enableInput();
-  });
-};
+  showStopGenerate.value = false
+  httpGet('/api/chat/stop?session_id=' + getClientId()).then(() => {
+    enableInput()
+  })
+}
 
 const reGenerate = () => {
-  disableInput(false);
-  const text = "重新生成上述问题的答案：" + previousText.value;
+  disableInput(false)
+  const text = '重新生成上述问题的答案：' + previousText.value
   // 追加消息
   chatData.value.push({
-    type: "prompt",
+    type: 'prompt',
     id: randString(32),
     icon: loginUser.value.avatar,
     content: renderInputText(text),
-  });
+  })
   store.socket.conn.send(
     JSON.stringify({
-      channel: "chat",
-      type: "text",
+      channel: 'chat',
+      type: 'text',
       body: {
         role_id: roleId.value,
         model_id: modelId.value,
@@ -569,44 +514,52 @@ const reGenerate = () => {
         stream: stream.value,
       },
     })
-  );
-};
+  )
+}
 
-const showShare = ref(false);
+const showShare = ref(false)
 const shareOptions = [
-  { name: "微信", icon: "wechat" },
-  { name: "复制链接", icon: "link" },
-];
+  { name: '微信', icon: 'wechat' },
+  { name: '复制链接', icon: 'link' },
+]
 const shareChat = (option) => {
-  showShare.value = false;
-  if (option.icon === "wechat") {
-    showToast({ message: "当前会话已经导出，请通过浏览器或者微信的自带分享功能分享给好友", duration: 5000 });
+  showShare.value = false
+  if (option.icon === 'wechat') {
+    showToast({
+      message: '当前会话已经导出，请通过浏览器或者微信的自带分享功能分享给好友',
+      duration: 5000,
+    })
     router.push({
-      path: "/mobile/chat/export",
-      query: { title: title.value, chat_id: chatId.value, role: role.value.name, model: modelValue.value },
-    });
-  } else if (option.icon === "link") {
-    document.getElementById("copy-link-btn").click();
+      path: '/mobile/chat/export',
+      query: {
+        title: title.value,
+        chat_id: chatId.value,
+        role: role.value.name,
+        model: modelValue.value,
+      },
+    })
+  } else if (option.icon === 'link') {
+    document.getElementById('copy-link-btn').click()
   }
-};
+}
 
 const getRoleById = function (rid) {
   for (let i = 0; i < roles.value.length; i++) {
-    if (roles.value[i]["id"] === rid) {
-      return roles.value[i];
+    if (roles.value[i]['id'] === rid) {
+      return roles.value[i]
     }
   }
-  return null;
-};
+  return null
+}
 
 const getModelName = (model_id) => {
   for (let i = 0; i < models.value.length; i++) {
     if (models.value[i].id === model_id) {
-      return models.value[i].text;
+      return models.value[i].text
     }
   }
-  return "";
-};
+  return ''
+}
 
 // // eslint-disable-next-line no-undef
 // const recognition = new webkitSpeechRecognition() || SpeechRecognition();
@@ -638,11 +591,11 @@ const onChange = (item) => {
   const selectedValues = item.selectedOptions
   if (selectedValues[0].model_id) {
     for (let i = 0; i < columns.value[1].length; i++) {
-      columns.value[1][i].disabled = columns.value[1][i].value !== selectedValues[0].model_id;
+      columns.value[1][i].disabled = columns.value[1][i].value !== selectedValues[0].model_id
     }
   } else {
     for (let i = 0; i < columns.value[1].length; i++) {
-      columns.value[1][i].disabled = false;
+      columns.value[1][i].disabled = false
     }
   }
 }