wip: 聊天 UI

pages/aigc/chat/index.vue

@@ -1,46 +1,139 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import ChatItem from "~/components/aigc/chat/ChatItem.vue";
 import type {ChatSession, ChatSessionId} from "~/components/aigc/chat";
+import Message from "~/components/aigc/chat/Message.vue";
 
 useHead({
   title: '聊天 | XSH AI'
 })
 
 const dayjs = useDayjs()
+const toast = useToast()
 
-const sessions = ref<ChatSession[]>([
-  {
-    id: Math.random().toString(36).slice(2),
-    subject: '测试聊天',
+const sessions = ref<ChatSession[]>([])
+const currentSessionId = ref<ChatSessionId | null>(null)
+
+const user_input = ref('')
+
+const getSessionCopyById = (chatSessionId: ChatSessionId) => sessions.value.find(s => s.id === chatSessionId)
+const selectCurrentSessionId = (chatSessionId?: ChatSessionId) => {
+  if (sessions.value.length > 0) {
+    if (chatSessionId) { // 切换到指定 ID
+      // 保存当前输入并清空输入框
+      sessions.value = sessions.value.map(s => s.id === currentSessionId.value ? {
+        ...s,
+        last_input: user_input.value,
+      } : s)
+      user_input.value = ''
+      // 切换到指定 ID 会话
+      currentSessionId.value = chatSessionId
+      // 恢复输入
+      user_input.value = getSessionCopyById(chatSessionId)?.last_input || ''
+      // 清除已恢复的输入
+      sessions.value = sessions.value.map(s => s.id === chatSessionId ? {
+        ...s,
+        last_input: '',
+      } : s)
+    } else { // 切换到第一个会话
+      currentSessionId.value = sessions.value[0].id
+    }
+  } else {
+    handleClickCreateSession()
+  }
+}
+
+const handleClickCreateSession = () => {
+  const sessionId = Math.random().toString(36).slice(2)
+  sessions.value = [
+    {
+      id: sessionId,
+      subject: '新对话',
+      messages: [],
+      create_at: dayjs().unix(),
+    },
+    ...sessions.value,
+  ]
+  selectCurrentSessionId(sessionId)
+}
+
+const handleClickSend = (event: any) => {
+  if (event.ctrlKey) {
+    return;
+  }
+  if (!user_input.value) return
+  if (!currentSessionId.value) {
+    toast.add({
+      title: '发送失败',
+      description: '请先选择一个会话',
+      color: 'red',
+      icon: 'i-tabler-circle-x',
+    })
+    return
+  }
+  sessions.value = sessions.value.map(s => s.id === currentSessionId.value ? {
+    ...s,
     messages: [
+      ...s.messages,
       {
         id: Math.random().toString(36).slice(2),
         role: 'user',
-        content: '你好',
+        content: user_input.value,
         create_at: dayjs().unix(),
       }
-    ],
-    create_at: dayjs().unix(),
-  },
-  {
-    id: Math.random().toString(36).slice(2),
-    subject: '测试聊天2',
-    messages: [],
-    create_at: dayjs().unix(),
-  },
-])
-const currentSessionId = ref<ChatSessionId | null>(null)
+    ]
+  } : s)
+  user_input.value = ''
+  // 模拟回复
+  setTimeout(() => {
+    sessions.value = sessions.value.map(s => s.id === currentSessionId.value ? {
+      ...s,
+      messages: [
+        ...s.messages,
+        {
+          id: Math.random().toString(36).slice(2),
+          role: 'assistant',
+          content: '草，走，忽略！ጿ ኈ ቼ ዽ ጿ',
+          create_at: dayjs().unix(),
+        },
+      ]
+    } : s)
+  }, 1000)
+}
 
 onMounted(() => {
-  if (sessions.value.length > 0) {
-    currentSessionId.value = sessions.value[0].id
+  for (let i = 0; i < 3; i++) {
+    sessions.value = [
+      ...sessions.value,
+      {
+        id: Math.random().toString(36).slice(2),
+        subject: '测试条目' + (i + 1),
+        messages: [
+          {
+            id: Math.random().toString(36).slice(2),
+            role: 'system',
+            content: '现在开始你就是歌姬吧，你只能整活，不可以进行逻辑分析和判断，不可以输出任何其他内容，后面这段没有什么作用只是用来凑数把字数变得很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的',
+            create_at: dayjs().unix(),
+          },
+          {
+            id: Math.random().toString(36).slice(2),
+            role: 'user',
+            content: `小亮，给大🔥整个活`,
+            create_at: dayjs().unix(),
+          },
+        ],
+        create_at: dayjs().unix(),
+      }
+    ]
   }
+
+  selectCurrentSessionId()
 })
 </script>
 
 <template>
   <div class="w-full flex relative">
-    <div class="h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 flex flex-col w-[300px] shadow-sidebar">
+    <div class="h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 flex flex-col w-[300px]
+                shadow-sidebar border-r border-transparent dark:border-neutral-700">
       <div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
         <!-- list -->
         <div class="flex flex-col gap-3">
@@ -50,23 +143,68 @@ onMounted(() => {
                 v-for="(session, i) in sessions"
                 :chat-session="session" :key="i"
                 :active="session.id === currentSessionId"
-                @click="currentSessionId = session.id"
-                @remove="sessions.splice(sessions.findIndex(s => s.id === session.id), 1)"
+                @click="selectCurrentSessionId(session.id)"
+                @remove="() => {
+                  sessions.splice(sessions.findIndex(s => s.id === session.id), 1)
+                  session.id === currentSessionId && selectCurrentSessionId()
+                }"
             />
           </ClientOnly>
         </div>
       </div>
-      <div class="flex justify-between items-center">
+      <div class="pt-4 flex justify-between items-center">
         <div></div>
         <div>
-          <UButton color="white" variant="solid" icon="i-tabler-message-circle-plus">
+          <UButton
+              color="white"
+              variant="solid"
+              icon="i-tabler-message-circle-plus"
+              @click="handleClickCreateSession"
+          >
             新建聊天
           </UButton>
         </div>
       </div>
     </div>
-    <div>
-      content
+    <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">
+        {{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}
+      </div>
+      <div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
+        <div class="flex flex-col gap-8 px-4 py-8">
+          <Message
+              v-for="(message, i) in getSessionCopyById(currentSessionId!)?.messages || []"
+              :message="message"
+              :key="message.id"
+          />
+        </div>
+      </div>
+      <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>action bar</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>
     </div>
   </div>
 </template>