wip: 聊天 UI

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 {

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>

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'