feat: assistant templates startup

pages/aigc/chat/index.vue

@@ -15,7 +15,7 @@ import {uuidv4} from '@uniiem/uuid'
 import {useLLM} from '~/composables/useLLM'
 import {trimObject} from '@uniiem/object-trim'
 import ModalAuthentication from '~/components/ModalAuthentication.vue'
-import {useAsyncData} from '#app'
+import NewSessionScreen from '~/components/aigc/chat/NewSessionScreen.vue'
 
 useHead({
   title: '聊天 | XSH AI',
@@ -25,7 +25,6 @@ const dayjs = useDayjs()
 const toast = useToast()
 const modal = useModal()
 const loginState = useLoginState()
-const {token, user, is_logged_in} = storeToRefs(loginState)
 const historyStore = useHistory()
 const {chatSessions} = storeToRefs(historyStore)
 const {setChatSessions} = historyStore
@@ -37,32 +36,13 @@ const showSidebar = ref(false)
 const user_input = ref('')
 const responding = ref(false)
 const currentModel = ref<ModelTag>('spark3_5')
+const currentAssistant = computed<Assistant | null>(() => getSessionCopyById(currentSessionId.value || '')?.assistant || null)
 const modals = reactive({
   modelSelect: false,
+  assistantSelect: false,
+  newSessionScreen: false,
 })
 
-loginState.$subscribe((mutation, state) => {
-  console.log(mutation, state)
-})
-
-const {
-  data: assistantTemplates
-} = await useAsyncData(
-    'App.Assistant_Template.GetList',
-    () => useFetchWrapped<
-        req.AssistantTemplateList & AuthedRequest, PagedData<Assistant>
-    >('App.Assistant_Template.GetList', {
-      user_id: loginState.user.id,
-      token: loginState.token as string,
-      page: 1,
-      perpage: 20,
-    }),
-    {
-      immediate: true,
-      watch: [is_logged_in],
-    },
-)
-
 /**
  * 获取指定 ID 的会话数据
  * @param chatSessionId
@@ -98,39 +78,79 @@ const selectCurrentSessionId = (chatSessionId?: ChatSessionId) => {
   }
   nextTick(() => {
     showSidebar.value = false
+    modals.newSessionScreen = false
     scrollToMessageListBottom()
   })
 }
 
 /**
- * 处理新建会话操作
+ * 创建新会话处理函数
+ * @param assistant 指定助手，不传或空值则不指定助手
  */
-const handleClickCreateSession = () => {
+const createSession = (assistant: Assistant | null) => {
   // 生成一个新的会话 ID
   const sessionId = uuidv4()
+  // 新会话数据
+  const newChat = !!assistant ? {
+    id: sessionId,
+    subject: '新对话',
+    messages: [],
+    create_at: dayjs().unix(),
+    assistant,
+  } : {
+    id: sessionId,
+    subject: '新对话',
+    messages: [],
+    create_at: dayjs().unix(),
+  }
   // 插入新会话数据
   setChatSessions([
-    {
-      id: sessionId,
-      subject: '新对话',
-      messages: [],
-      create_at: dayjs().unix(),
-    },
+    newChat,
     ...chatSessions.value,
   ])
   // 切换到新的会话
   selectCurrentSessionId(sessionId)
-  // TODO: Model or Assistant Selection
-  // modals.modelSelect = true
+  // 关闭新建会话屏幕
+  modals.newSessionScreen = false
   nextTick(() => {
-    insetMessage({
-      id: uuidv4(),
-      role: 'assistant',
-      content: '你好，有什么可以帮助你的吗？',
-    })
+    if (!!currentAssistant.value) {
+      insetMessage({
+        id: uuidv4(),
+        role: 'system',
+        content: currentAssistant.value?.role || '',
+        preset: true,
+      })
+      insetMessage({
+        id: uuidv4(),
+        role: 'user',
+        content: `${currentAssistant.value?.target}，${currentAssistant.value?.demand}`,
+        preset: true,
+      })
+      insetMessage({
+        id: uuidv4(),
+        role: 'assistant',
+        content: currentAssistant.value?.input_tpl || '',
+        preset: true,
+      })
+    } else {
+      insetMessage({
+        id: uuidv4(),
+        role: 'assistant',
+        content: '你好，有什么可以帮助你的吗？',
+        preset: true,
+      })
+    }
   })
 }
 
+/**
+ * 处理点击新建会话按钮事件
+ */
+const handleClickCreateSession = () => {
+  showSidebar.value = false
+  modals.newSessionScreen = true
+}
+
 /**
  * 处理发送消息操作
  * @param event
@@ -273,83 +293,98 @@ onMounted(() => {
         </div>
       </div>
     </div>
-    <div class="h-[calc(100vh-4rem)] bg-white dark:bg-neutral-900 flex-1 flex flex-col">
-      <div
-          class="w-full p-4 bg-neutral-50 dark:bg-neutral-800/50 border-b dark:border-neutral-700/50 flex items-center gap-2">
-        <UButton
-            class="md:hidden"
-            color="black"
-            variant="ghost"
-            icon="i-tabler-menu-2"
-            @click="showSidebar = !showSidebar"
-        >
-        </UButton>
-        <h1 class="font-medium">{{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}</h1>
-      </div>
-      <div ref="messagesWrapperRef" class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
-        <div class="flex flex-col gap-8 px-4 py-8">
-          <TransitionGroup name="message">
-            <Message
-                v-for="message in getMessages() || []"
-                :message="message"
-                :key="message.id"
-            />
-          </TransitionGroup>
-        </div>
-        <pre>{{assistantTemplates}}</pre>
-      </div>
-      <ClientOnly>
+    <div class="h-[calc(100vh-4rem)] flex-1 bg-white dark:bg-neutral-900">
+
+      <Transition name="message" mode="out-in">
+        <NewSessionScreen
+            v-if="modals.newSessionScreen"
+            @select="createSession"
+            @cancel="modals.newSessionScreen = false"
+        />
         <div
-            class="w-full p-4 pt-2 flex flex-col gap-2 bg-neutral-50 dark:bg-neutral-800/50 border-t dark:border-neutral-700/50">
-          <div class="flex items-center gap-2 overflow-auto overflow-y-hidden">
-            <button class="chat-option-btn" @click="modals.modelSelect = true">
-              <Icon name="tabler:box"/>
-              <span class="text-xs">
-              {{ llmModels.find(m => m.tag === currentModel)?.name.toUpperCase() || '模型' }}
-            </span>
-            </button>
-            <button class="chat-option-btn" @click="modals.modelSelect = true">
-              <Icon name="tabler:robot-face"/>
-              <span class="text-xs">
-              助手
-            </span>
-            </button>
-          </div>
-          <div class="relative">
-            <UTextarea
-                v-model="user_input"
-                size="lg"
-                autoresize
-                :rows="5"
-                :maxrows="12"
-                class="font-sans"
-                placeholder="Enter 发送, Ctrl + Enter 换行"
-                @keydown.ctrl.enter="user_input += '\n'"
-                @keydown.enter.prevent="handleClickSend"
-            />
+            v-else
+            class="w-full h-full flex flex-col"
+        >
+          <div
+              class="w-full p-4 bg-neutral-50 dark:bg-neutral-800/50 border-b dark:border-neutral-700/50 flex items-center gap-2">
             <UButton
+                class="md:hidden"
                 color="black"
-                variant="solid"
-                icon="i-tabler-send-2"
-                class="absolute bottom-2.5 right-3"
-                @click.stop="handleClickSend"
+                variant="ghost"
+                icon="i-tabler-menu-2"
+                @click="showSidebar = !showSidebar"
             >
-              发送
             </UButton>
+            <h1 class="font-medium">{{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}</h1>
           </div>
+          <div ref="messagesWrapperRef" class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
+            <div class="flex flex-col gap-8 px-4 py-8">
+              <TransitionGroup name="message">
+                <Message
+                    v-for="message in getMessages() || []"
+                    :message="message"
+                    :key="message.id"
+                />
+              </TransitionGroup>
+            </div>
+          </div>
+          <ClientOnly>
+            <div
+                class="w-full p-4 pt-2 flex flex-col gap-2 bg-neutral-50 dark:bg-neutral-800/50 border-t dark:border-neutral-700/50">
+              <div class="flex items-center gap-2 overflow-auto overflow-y-hidden">
+                <button class="chat-option-btn" @click="modals.modelSelect = true">
+                  <Icon name="tabler:box"/>
+                  <span class="text-xs">
+                    {{ llmModels.find(m => m.tag === currentModel)?.name.toUpperCase() || '模型' }}
+                  </span>
+                </button>
+                <button
+                    v-if="currentAssistant?.tpl_name"
+                    class="chat-option-btn"
+                >
+                  <Icon name="tabler:robot-face"/>
+                  <span class="text-xs">
+                    {{ currentAssistant.tpl_name }}
+                  </span>
+                </button>
+              </div>
+              <div class="relative">
+                <UTextarea
+                    v-model="user_input"
+                    size="lg"
+                    autoresize
+                    :rows="5"
+                    :maxrows="12"
+                    class="font-sans"
+                    placeholder="Enter 发送, Ctrl + Enter 换行"
+                    @keydown.ctrl.enter="user_input += '\n'"
+                    @keydown.enter.prevent="handleClickSend"
+                />
+                <UButton
+                    color="black"
+                    variant="solid"
+                    icon="i-tabler-send-2"
+                    class="absolute bottom-2.5 right-3"
+                    @click.stop="handleClickSend"
+                >
+                  发送
+                </UButton>
+              </div>
+            </div>
+          </ClientOnly>
         </div>
-      </ClientOnly>
+      </Transition>
+
     </div>
 
     <!-- Modals -->
-    <UModal prevent-close v-model="modals.modelSelect">
+    <UModal v-model="modals.modelSelect">
       <UCard>
         <template #header>
           <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
             选择大语言模型
           </h3>
         </template>
-
         <div class="grid grid-cols-3 gap-4">
           <div
               v-for="(llm, index) in llmModels"
@@ -358,14 +393,13 @@ onMounted(() => {
               class="flex flex-col gap-2 justify-center items-center w-full aspect-[1/1] border-2 rounded-xl cursor-pointer transition duration-150 select-none"
               :class="llm.tag === currentModel ? 'border-primary shadow-xl bg-primary text-white' : 'dark:border-neutral-800 bg-white dark:bg-black shadow-card'"
           >
-            <Icon :name="llm?.icon" class="text-4xl opacity-80"/>
+            <Icon v-if="llm?.icon" :name="llm.icon" class="text-4xl opacity-80"/>
             <div class="flex flex-col gap-0.5 items-center">
               <h1 class="font-bold drop-shadow opacity-90">{{ llm.name || 'unknown' }}</h1>
               <p class="text-xs opacity-60">{{ llm.description }}</p>
             </div>
           </div>
         </div>
-
         <template #footer>
           <div class="flex justify-end items-center" @click="modals.modelSelect = false">
             <UButton>
@@ -375,6 +409,7 @@ onMounted(() => {
         </template>
       </UCard>
     </UModal>
+
   </div>
 </template>