From 1ee6ada6af05a1cbcbf75e3bafa87531403747fe Mon Sep 17 00:00:00 2001
From: HoshinoSuzumi <master@uniiem.com>
Date: Wed, 27 Mar 2024 18:06:02 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20=E8=81=8A=E5=A4=A9=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/aigc/chat/ChatItem.vue |   4 +-
 components/aigc/chat/Message.vue  |  78 ++++++++++++
 components/aigc/chat/index.d.ts   |   1 +
 pages/aigc/chat/index.vue         | 190 ++++++++++++++++++++++++++----
 tailwind.config.ts                |   6 +
 5 files changed, 251 insertions(+), 28 deletions(-)
 create mode 100644 components/aigc/chat/Message.vue

diff --git a/components/aigc/chat/ChatItem.vue b/components/aigc/chat/ChatItem.vue
index a55474e..704d84e 100644
--- a/components/aigc/chat/ChatItem.vue
+++ b/components/aigc/chat/ChatItem.vue
@@ -33,7 +33,7 @@ const dayjs = useDayjs()
       <div>{{ dayjs(chatSession.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
     </div>
     <div
-        @click="emit('remove', chatSession)"
+        @click.stop="emit('remove', chatSession)"
         class="chat-card-remove-btn text-neutral-400 group-hover:opacity-100 group-hover:-translate-x-0.5"
     >
       <UIcon name="i-tabler-trash"/>
@@ -44,7 +44,7 @@ const dayjs = useDayjs()
 <style lang="scss" scoped>
 .chat-card {
   @apply flex flex-col gap-2 bg-white dark:bg-neutral-800 px-4 py-3 rounded-lg relative border-2 border-transparent shadow-card;
-  @apply transition duration-150 hover:bg-cyan-300/5;
+  @apply transition-none duration-150 hover:bg-cyan-300/5;
   @apply select-none;
 
   &.active {
diff --git a/components/aigc/chat/Message.vue b/components/aigc/chat/Message.vue
new file mode 100644
index 0000000..2441eae
--- /dev/null
+++ b/components/aigc/chat/Message.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import type {ChatMessage} from "~/components/aigc/chat/index";
+
+const props = defineProps({
+  message: {
+    type: Object as PropType<ChatMessage>,
+    required: true,
+  }
+})
+
+const dayjs = useDayjs()
+
+const message_place_end = computed(() => props.message?.role !== 'assistant')
+const message_avatar = computed(() => {
+  switch (props.message?.role) {
+    case 'user':
+      return 'i-fluent-emoji-slightly-smiling-face'
+    case 'assistant':
+      return 'i-fluent-emoji-robot'
+    case 'system':
+      return 'i-fluent-emoji-receipt'
+  }
+})
+const message_background = computed(() => {
+  switch (props.message?.role) {
+    case 'user':
+      return 'bg-primary-100 dark:bg-primary-800'
+    case 'assistant':
+    case 'system':
+      return 'bg-neutral-100 dark:bg-neutral-800'
+  }
+})
+</script>
+
+<template>
+  <div class="chat" :class="{'justify-end': message_place_end}">
+    <div class="chat-inside" :class="{'items-end': message_place_end}">
+      <div class="chat-inside-avatar">
+        <Icon :name="message_avatar" class="text-lg"/>
+      </div>
+      <div class="flex flex-col" :class="{'items-end': message_place_end}">
+        <div class="chat-inside-content" :class="message_background">
+          {{ message.content }}
+        </div>
+        <div class="chat-inside-extra">
+          {{ dayjs(message.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chat {
+  @apply w-full flex;
+
+  &-inside {
+    @apply w-fit flex flex-col gap-2;
+    @apply md:max-w-[80%];
+
+    &-avatar {
+      @apply w-8 h-8 flex justify-center items-center rounded-xl;
+      @apply bg-white border shadow-card;
+      @apply dark:bg-neutral-800 dark:border-neutral-700;
+    }
+
+    &-content {
+      @apply px-2 py-2.5 rounded-xl text-sm w-fit;
+      @apply border dark:border-neutral-700;
+    }
+
+    &-extra {
+      @apply px-1 text-xs text-neutral-300 dark:text-neutral-700;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/aigc/chat/index.d.ts b/components/aigc/chat/index.d.ts
index ea22116..72ff54c 100644
--- a/components/aigc/chat/index.d.ts
+++ b/components/aigc/chat/index.d.ts
@@ -6,6 +6,7 @@ export interface ChatSession {
   subject: string
   create_at: number
   messages: ChatMessage[]
+  last_input?: string
 }
 
 export type MessageRole = 'user' | 'assistant' | 'system'
diff --git a/pages/aigc/chat/index.vue b/pages/aigc/chat/index.vue
index c3620ef..cdc1deb 100644
--- a/pages/aigc/chat/index.vue
+++ b/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>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5cdd9fd..eb32f60 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -15,7 +15,13 @@ export default <Partial<Config>>{
       boxShadow: {
         card: '0 2px 4px 0 rgba(0, 0, 0, .05)',
         sidebar: 'inset -2px 0 2px 0 rgba(0, 0, 0, .05)',
+        sidebar_dark: 'inset -2px 0 2px 0 rgba(255, 255, 255, .05)',
       }
     },
   },
+  safelist: [
+    {
+      pattern: /^bg-/,
+    }
+  ]
 }