wip: 聊天 UI

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>