@huyooo/ai-chat-frontend-vue 0.1.2

package/src/components/chat/messages/MessageBubble.vue

@@ -0,0 +1,272 @@
+<template>
+  <div :class="['message-bubble', role]">
+    <!-- 用户消息 - 复用 ChatInput 组件 -->
+    <template v-if="role === 'user'">
+      <ChatInput
+        v-if="onSend"
+        variant="message"
+        :value="content"
+        :selected-images="images"
+        @send="(text) => $emit('send', text)"
+      />
+      <div v-else class="user-content">
+        <div class="user-text">{{ content }}</div>
+        <div v-if="images && images.length > 0" class="user-images">
+          <img
+            v-for="(img, i) in images"
+            :key="i"
+            :src="img"
+            class="user-image"
+            @click="$emit('view-image', img)"
+          />
+        </div>
+      </div>
+    </template>
+
+    <!-- 助手消息 -->
+    <template v-else>
+      <div class="assistant-content">
+        <!-- 执行步骤列表 -->
+        <ExecutionSteps
+          :loading="loading"
+          :has-content="!!content"
+          :thinking="thinking"
+          :thinking-complete="thinkingComplete"
+          :searching="searching"
+          :search-results="searchResults"
+          :tool-calls="toolCalls"
+        />
+
+        <!-- 文本内容 -->
+        <div v-if="content" class="assistant-text" v-html="renderedContent"></div>
+
+        <!-- 加载中 -->
+        <div v-if="loading && !content && !thinking && !toolCalls?.length" class="loading-indicator">
+          <span class="loading-dot"></span>
+          <span class="loading-dot"></span>
+          <span class="loading-dot"></span>
+        </div>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div v-if="content && !loading" class="message-actions">
+        <button class="action-btn" title="复制" @click="$emit('copy')">
+          <component :is="copied ? Check : Copy" :size="14" />
+        </button>
+        <button class="action-btn" title="重新生成" @click="$emit('regenerate')">
+          <RefreshCw :size="14" />
+        </button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Copy, Check, RefreshCw } from 'lucide-vue-next';
+import ChatInput from '../../ChatInput.vue';
+import ExecutionSteps from './ExecutionSteps.vue';
+import type { ToolCall, SearchResult } from '../../../types';
+
+const props = defineProps<{
+  role: 'user' | 'assistant';
+  content: string;
+  images?: string[];
+  thinking?: string;
+  thinkingComplete?: boolean;
+  searchResults?: SearchResult[];
+  searching?: boolean;
+  toolCalls?: ToolCall[];
+  loading?: boolean;
+  copied?: boolean;
+  /** 是否支持重新发送（仅用户消息） */
+  onSend?: (text: string) => void;
+}>();
+
+defineEmits<{
+  copy: [];
+  regenerate: [];
+  'view-image': [url: string];
+  send: [text: string];
+}>();
+
+// Markdown 渲染
+const renderedContent = computed(() => {
+  let html = props.content;
+
+  // 代码块
+  html = html.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre class="code-block"><code>$2</code></pre>');
+
+  // 行内代码
+  html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
+
+  // 粗体
+  html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+
+  // 斜体
+  html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+
+  // 换行
+  html = html.replace(/\n/g, '<br>');
+
+  return html;
+});
+</script>
+
+<style scoped>
+.message-bubble {
+  padding: 8px 0;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 用户消息 */
+.message-bubble.user {
+  width: 100%;
+}
+
+.user-content {
+  width: 100%;
+  background: var(--chat-muted, #2d2d2d);
+  color: var(--chat-text, #ccc);
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid var(--chat-border, #444);
+}
+
+.user-text {
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.user-images {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+
+.user-image {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: transform 0.15s;
+}
+
+.user-image:hover {
+  transform: scale(1.05);
+}
+
+/* 助手消息 */
+.message-bubble.assistant {
+  position: relative;
+}
+
+.assistant-content {
+  max-width: 100%;
+}
+
+.assistant-text {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--chat-text, #ccc);
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+.assistant-text :deep(.code-block) {
+  background: var(--chat-code-bg, #1f2937);
+  color: var(--chat-code-text, #e5e7eb);
+  padding: 12px;
+  border-radius: 8px;
+  margin: 8px 0;
+  overflow-x: auto;
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 13px;
+}
+
+.assistant-text :deep(.inline-code) {
+  background: var(--chat-muted, #3c3c3c);
+  color: var(--chat-text, #e5e7eb);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 13px;
+}
+
+/* 加载动画 */
+.loading-indicator {
+  display: flex;
+  gap: 4px;
+  padding: 8px 0;
+}
+
+.loading-dot {
+  width: 6px;
+  height: 6px;
+  background: var(--chat-text-muted, #666);
+  border-radius: 50%;
+  animation: pulse 1.4s ease-in-out infinite;
+}
+
+.loading-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.loading-dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 操作按钮 */
+.message-actions {
+  display: flex;
+  gap: 4px;
+  margin-top: 8px;
+  justify-content: flex-end;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: var(--chat-text-muted, #666);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.action-btn:hover {
+  background: var(--chat-muted, #3c3c3c);
+  color: var(--chat-text, #ccc);
+}
+</style>