From 3b081ff0f432de1aac0b9c49333fe80e29da5dff Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Mon, 29 Apr 2024 09:39:23 +0800
Subject: [PATCH] opt: add chat config for mobile chat  session

---
 web/src/assets/css/mobile/chat-list.styl    | 17 +-----
 web/src/assets/css/mobile/chat-session.styl |  8 ++-
 web/src/assets/css/mobile/model-select.styl | 16 ++++++
 web/src/views/Index.vue                     |  5 ++
 web/src/views/mobile/ChatSession.vue        | 63 ++++++++++++++++++++-
 5 files changed, 89 insertions(+), 20 deletions(-)
 create mode 100644 web/src/assets/css/mobile/model-select.styl

diff --git a/web/src/assets/css/mobile/chat-list.styl b/web/src/assets/css/mobile/chat-list.styl
index 50517900..c1cbd386 100644
--- a/web/src/assets/css/mobile/chat-list.styl
+++ b/web/src/assets/css/mobile/chat-list.styl
@@ -34,19 +34,4 @@
   }
 }
 
-.van-popup {
-  .picker-option {
-    display flex
-    width 100%
-    padding 0 10px
-    overflow hidden
-    height 20px
-    text-overflow ellipsis
-
-    .van-image {
-      width 20px;
-      height 20px;
-      margin-right 5px
-    }
-  }
-}
\ No newline at end of file
+@import "model-select.styl"
\ No newline at end of file
diff --git a/web/src/assets/css/mobile/chat-session.styl b/web/src/assets/css/mobile/chat-session.styl
index c39983be..25aa54d0 100644
--- a/web/src/assets/css/mobile/chat-session.styl
+++ b/web/src/assets/css/mobile/chat-session.styl
@@ -1,6 +1,10 @@
 .mobile-chat {
   .van-nav-bar {
     position static
+
+    .setting {
+      font-size 18px
+    }
   }
 
   .chat-list-wrapper {
@@ -81,4 +85,6 @@
       background #232425;
     }
   }
-}
\ No newline at end of file
+}
+
+@import "model-select.styl"
\ No newline at end of file
diff --git a/web/src/assets/css/mobile/model-select.styl b/web/src/assets/css/mobile/model-select.styl
new file mode 100644
index 00000000..8b3de473
--- /dev/null
+++ b/web/src/assets/css/mobile/model-select.styl
@@ -0,0 +1,16 @@
+.van-popup {
+  .picker-option {
+    display flex
+    width 100%
+    padding 0 10px
+    overflow hidden
+    height 20px
+    text-overflow ellipsis
+
+    .van-image {
+      width 20px;
+      height 20px;
+      margin-right 5px
+    }
+  }
+}
\ No newline at end of file
diff --git a/web/src/views/Index.vue b/web/src/views/Index.vue
index fb60766e..edcd4a59 100644
--- a/web/src/views/Index.vue
+++ b/web/src/views/Index.vue
@@ -66,9 +66,14 @@ import {useRouter} from "vue-router";
 import FooterBar from "@/components/FooterBar.vue";
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
+import {isMobile} from "@/utils/libs";
 
 const router = useRouter()
 
+if (isMobile()) {
+  router.push("/mobile")
+}
+
 const title = ref("Geek-AI 创作系统")
 const logo = ref("/images/logo.png")
 const slogan = ref("我辈之人，先干为敬，陪您先把 AI 用起来")
diff --git a/web/src/views/mobile/ChatSession.vue b/web/src/views/mobile/ChatSession.vue
index 0c78e6df..ebc0037f 100644
--- a/web/src/views/mobile/ChatSession.vue
+++ b/web/src/views/mobile/ChatSession.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-background">
     <div class="mobile-chat" v-loading="loading" element-loading-text="正在连接会话...">
-      <van-nav-bar left-arrow left-text="返回" @click-left="router.back()" ref="navBarRef">
+      <van-nav-bar ref="navBarRef">
         <template #title>
           <van-dropdown-menu>
             <van-dropdown-item :title="title">
@@ -10,7 +10,11 @@
             </van-dropdown-item>
           </van-dropdown-menu>
         </template>
-
+        <template #left>
+          <span class="setting">
+            <van-icon name="setting-o" @click="showPicker = true"/>
+          </span>
+        </template>
         <template #right>
           <van-icon name="share-o" @click="showShare = true"/>
         </template>
@@ -94,6 +98,27 @@
     <!--      </div>-->
     <!--    </van-overlay>-->
   </div>
+
+  <van-popup v-model:show="showPicker" position="bottom" class="popup">
+    <van-picker
+        :columns="columns"
+        title="选择模型和角色"
+        @cancel="showPicker = false"
+        @confirm="newChat"
+    >
+      <template #option="item">
+        <div class="picker-option">
+          <van-image
+              v-if="item.icon"
+              :src="item.icon"
+              fit="cover"
+              round
+          />
+          <span>{{ item.text }}</span>
+        </div>
+      </template>
+    </van-picker>
+  </van-popup>
 </template>
 
 <script setup>
@@ -125,6 +150,8 @@ 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])
 
 checkSession().then(user => {
   loginUser.value = user
@@ -149,6 +176,10 @@ httpGet('/api/model/list').then(res => {
   if (!modelId.value) {
     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].value = models.value[i].id
+  }
   modelValue.value = getModelValue(modelId.value)
   // 加载角色列表
   httpGet(`/api/role/list`).then((res) => {
@@ -156,8 +187,19 @@ httpGet('/api/model/list').then(res => {
     if (!roleId.value) {
       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
+    }
+
     role.value = getRoleById(roleId.value)
-    connect(chatId.value, roleId.value, modelId.value)
+    columns.value = [roles.value, models.value]
+    // 新建对话
+    if (!chatId.value) {
+      connect(chatId.value, roleId.value, modelId.value)
+    }
   }).catch((e) => {
     showNotify({type: "danger", message: '获取聊天角色失败: ' + e.messages})
   })
@@ -184,6 +226,18 @@ onUnmounted(() => {
   socket.value = null
 })
 
+const newChat = (item) => {
+  showPicker.value = false
+  const options = item.selectedOptions
+  roleId.value = options[0].value
+  modelId.value = options[1].value
+  chatId.value = ""
+  chatData.value = []
+  role.value = getRoleById(roleId.value)
+  title.value = "新建对话"
+  connect(chatId.value, roleId.value, modelId.value)
+}
+
 const chatData = ref([])
 const loading = ref(false)
 const finished = ref(false)
@@ -338,6 +392,9 @@ const connect = function (chat_id, role_id, model_id) {
             icon: role.value.icon,
             content: ""
           });
+          if (isNewChat) {
+            title.value = previousText.value
+          }
         } else if (data.type === 'end') { // 消息接收完毕
           enableInput()
           lineBuffer.value = ''; // 清空缓冲