Initial commit: Update project structure and add new features

src/components/chat/ChatBubble.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="chat" :class="isSelf ? 'chat-end' : 'chat-start'">
+    <!-- 头像 -->
+    <div v-if="avatar" class="chat-image avatar">
+      <div class="w-10 rounded-full">
+        <img :alt="avatar" :src="avatar" />
+      </div>
+    </div>
+    
+    <!-- 消息气泡 -->
+    <div class="chat-header mb-1">
+      <time v-if="time" class="text-xs opacity-50">{{ time }}</time>
+    </div>
+    
+    <div 
+      class="chat-bubble"
+      :class="isSelf ? 'chat-bubble-primary' : 'chat-bubble-neutral'"
+    >
+      {{ content }}
+    </div>
+    
+    <div v-if="showFooter" class="chat-footer mt-1">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  // 消息内容
+  content: string
+  // 是否为自已发送的消息
+  isSelf?: boolean
+  // 显示时间
+  time?: string
+  // 头像 URL
+  avatar?: string
+  // 是否显示底部区域（用于插槽）
+  showFooter?: boolean
+}>()
+</script>
+
+<style scoped>
+.chat {
+  margin-bottom: 0.75rem;
+}
+
+.chat-bubble {
+  max-width: 70%;
+  word-wrap: break-word;
+}
+</style>