ui: chat sidebar ui

components/aigc/chat/ChatItem.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type {ChatSession} from "~/components/aigc/chat/index";
+import type {PropType} from "vue";
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false
+  },
+  chatSession: {
+    type: Object as PropType<ChatSession>,
+    required: true
+  },
+})
+const emit = defineEmits<{
+  (e: 'remove', session: ChatSession): void
+}>()
+
+const dayjs = useDayjs()
+</script>
+
+<template>
+  <div
+      class="chat-card group"
+      :class="{'active': active}"
+      :title="chatSession.subject"
+  >
+    <div class="chat-card-title">
+      {{ chatSession.subject }}
+    </div>
+    <div class="chat-card-meta">
+      <div>{{ chatSession.messages.length }}条对话</div>
+      <div>{{ dayjs(chatSession.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
+    </div>
+    <div
+        @click="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"/>
+    </div>
+  </div>
+</template>
+
+<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 select-none;
+
+  &.active {
+    @apply border-cyan-500;
+  }
+
+  &-title {
+    @apply w-[calc(100%-16px)] text-sm font-medium text-ellipsis text-nowrap overflow-x-hidden;
+  }
+
+  &-meta {
+    @apply flex justify-between items-center text-xs text-neutral-400;
+  }
+
+  &-remove-btn {
+    @apply absolute top-0.5 right-0 opacity-0;
+    @apply transition duration-300 hover:text-red-400;
+    @apply cursor-pointer;
+  }
+}
+</style>

components/aigc/chat/index.d.ts

@@ -0,0 +1,19 @@
+export type ChatSessionId = string
+export type ChatMessageId = string
+
+export interface ChatSession {
+  id: ChatSessionId
+  subject: string
+  create_at: number
+  messages: ChatMessage[]
+}
+
+export type MessageRole = 'user' | 'assistant' | 'system'
+
+export interface ChatMessage {
+  id: ChatMessageId
+  role: MessageRole
+  content: string
+  create_at: number
+  interrupted?: boolean
+}