ui: chat sidebar ui

pages/aigc/chat/index.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import ChatItem from "~/components/aigc/chat/ChatItem.vue";
+import type {ChatSession, ChatSessionId} from "~/components/aigc/chat";
+
+useHead({
+  title: '聊天 | XSH AI'
+})
+
+const dayjs = useDayjs()
+
+const sessions = ref<ChatSession[]>([
+  {
+    id: Math.random().toString(36).slice(2),
+    subject: '测试聊天',
+    messages: [
+      {
+        id: Math.random().toString(36).slice(2),
+        role: 'user',
+        content: '你好',
+        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)
+
+onMounted(() => {
+  if (sessions.value.length > 0) {
+    currentSessionId.value = sessions.value[0].id
+  }
+})
+</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="flex-1 flex flex-col overflow-auto overflow-x-hidden">
+        <!-- list -->
+        <div class="flex flex-col gap-3">
+          <!-- ClientOnly avoids hydrate exception -->
+          <ClientOnly>
+            <ChatItem
+                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)"
+            />
+          </ClientOnly>
+        </div>
+      </div>
+      <div class="flex justify-between items-center">
+        <div></div>
+        <div>
+          <UButton color="white" variant="solid" icon="i-tabler-message-circle-plus">
+            新建聊天
+          </UButton>
+        </div>
+      </div>
+    </div>
+    <div>
+      content
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>