From a213cddf55645b0d3d86c115a418f48459161e7e Mon Sep 17 00:00:00 2001
From: gaoziman <2942894660@qq.com>
Date: Thu, 18 Dec 2025 11:29:52 +0800
Subject: [PATCH] =?UTF-8?q?refactor(features):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=81=8A=E5=A4=A9=E8=BE=93=E5=85=A5=E5=92=8C=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E6=B0=94=E6=B3=A1=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ChatInput:
- 修复中文输入法回车误发送问题
- 移除未使用的历史记录按钮

MessageBubble:
- 集成 MarkdownRenderer 实现富文本渲染
- 添加 AI 思考内容折叠展示
- 添加流式输出状态和错误提示
- 优化复制功能添加成功反馈
---
 src/components/features/ChatInput.tsx     |  14 +-
 src/components/features/MessageBubble.tsx | 163 ++++++++++++----------
 2 files changed, 91 insertions(+), 86 deletions(-)

diff --git a/src/components/features/ChatInput.tsx b/src/components/features/ChatInput.tsx
index 27352a6..7a61433 100644
--- a/src/components/features/ChatInput.tsx
+++ b/src/components/features/ChatInput.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { Plus, Clock, ArrowUp } from 'lucide-react';
+import { Plus, ArrowUp } from 'lucide-react';
 import { ModelSelector } from './ModelSelector';
 import { ToolsDropdown } from './ToolsDropdown';
 import { cn } from '@/lib/utils';
@@ -40,7 +40,9 @@ export function ChatInput({
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    // 检查是否正在使用输入法组合（如中文输入法选词时按回车）
+    // isComposing 为 true 时，表示用户正在用输入法选词，此时不应发送消息
+    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
       e.preventDefault();
       handleSend();
     }
@@ -85,14 +87,6 @@ export function ChatInput({
               onToolToggle={onToolToggle}
               onEnableAllToggle={onEnableAllTools}
             />
-
-            {/* 历史记录 */}
-            <button
-              className="w-8 h-8 flex items-center justify-center rounded-lg text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)] transition-colors"
-              title="History"
-            >
-              <Clock size={20} />
-            </button>
           </div>
 
           {/* 右侧按钮 */}
diff --git a/src/components/features/MessageBubble.tsx b/src/components/features/MessageBubble.tsx
index 395b8d4..9d922d5 100644
--- a/src/components/features/MessageBubble.tsx
+++ b/src/components/features/MessageBubble.tsx
@@ -1,47 +1,35 @@
 'use client';
 
-import { Copy, ThumbsUp, ThumbsDown, RefreshCw } from 'lucide-react';
+import { useState } from 'react';
+import { Copy, ThumbsUp, ThumbsDown, RefreshCw, ChevronDown, ChevronUp, Brain, Loader2, AlertCircle, Check } from 'lucide-react';
 import { Avatar } from '@/components/ui/Avatar';
 import { AILogo } from '@/components/ui/AILogo';
+import { MarkdownRenderer } from '@/components/markdown/MarkdownRenderer';
 import { cn } from '@/lib/utils';
 import type { Message, User } from '@/types';
 
 interface MessageBubbleProps {
   message: Message;
   user?: User;
+  thinkingContent?: string;
+  isStreaming?: boolean;
+  error?: string;
 }
 
-export function MessageBubble({ message, user }: MessageBubbleProps) {
+export function MessageBubble({ message, user, thinkingContent, isStreaming, error }: MessageBubbleProps) {
   const isUser = message.role === 'user';
+  const [thinkingExpanded, setThinkingExpanded] = useState(false);
+  const [copied, setCopied] = useState(false);
 
-  // 简单的 Markdown 渲染
-  const renderContent = (content: string) => {
-    // 处理代码块
-    const parts = content.split(/(`[^`]+`)/g);
-    return parts.map((part, index) => {
-      if (part.startsWith('`') && part.endsWith('`')) {
-        return (
-          <code
-            key={index}
-            className="bg-red-50 text-red-700 px-1.5 py-0.5 rounded text-sm font-mono"
-          >
-            {part.slice(1, -1)}
-          </code>
-        );
-      }
-      // 处理粗体
-      const boldParts = part.split(/(\*\*[^*]+\*\*)/g);
-      return boldParts.map((boldPart, boldIndex) => {
-        if (boldPart.startsWith('**') && boldPart.endsWith('**')) {
-          return (
-            <strong key={`${index}-${boldIndex}`} className="font-semibold">
-              {boldPart.slice(2, -2)}
-            </strong>
-          );
-        }
-        return <span key={`${index}-${boldIndex}`}>{boldPart}</span>;
-      });
-    });
+  // 复制消息内容
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(message.content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('Failed to copy:', error);
+    }
   };
 
   if (isUser) {
@@ -66,55 +54,78 @@ export function MessageBubble({ message, user }: MessageBubbleProps) {
 
       {/* 消息内容 */}
       <div className="flex-1 max-w-full">
-        <div className="bg-[var(--color-message-assistant-bg)] border border-[var(--color-message-assistant-border)] rounded-2xl px-6 py-5 shadow-sm">
-          <div className="text-base text-[var(--color-text-primary)] leading-[1.8] whitespace-pre-wrap">
-            {message.content.split('\n\n').map((paragraph, index) => {
-              // 处理列表
-              if (paragraph.startsWith('- ') || paragraph.startsWith('* ')) {
-                const items = paragraph.split('\n');
-                return (
-                  <ul key={index} className="list-disc pl-5 my-3 space-y-2">
-                    {items.map((item, i) => (
-                      <li key={i} className="leading-relaxed">
-                        {renderContent(item.replace(/^[-*]\s/, ''))}
-                      </li>
-                    ))}
-                  </ul>
-                );
-              }
-              // 处理有序列表
-              if (/^\d+\.\s/.test(paragraph)) {
-                const items = paragraph.split('\n');
-                return (
-                  <ol key={index} className="list-decimal pl-5 my-3 space-y-2">
-                    {items.map((item, i) => (
-                      <li key={i} className="leading-relaxed marker:text-[var(--color-primary)] marker:font-medium">
-                        {renderContent(item.replace(/^\d+\.\s/, ''))}
-                      </li>
-                    ))}
-                  </ol>
-                );
-              }
-              return (
-                <p key={index} className="mb-4 last:mb-0">
-                  {renderContent(paragraph)}
-                </p>
-              );
-            })}
+        {/* 思考内容 */}
+        {thinkingContent && (
+          <div className="mb-3">
+            <button
+              onClick={() => setThinkingExpanded(!thinkingExpanded)}
+              className="inline-flex items-center gap-2 px-3 py-2 bg-purple-50 text-purple-700 rounded-lg text-sm hover:bg-purple-100 transition-colors"
+            >
+              <Brain size={16} />
+              <span>思考过程</span>
+              {thinkingExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+            </button>
+            {thinkingExpanded && (
+              <div className="mt-2 p-4 bg-purple-50 border border-purple-200 rounded-lg">
+                <pre className="text-sm text-purple-800 whitespace-pre-wrap font-mono">
+                  {thinkingContent}
+                </pre>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 错误提示 */}
+        {error && (
+          <div className="mb-3 p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3">
+            <AlertCircle size={20} className="text-red-500 flex-shrink-0 mt-0.5" />
+            <div className="text-sm text-red-700">{error}</div>
+          </div>
+        )}
+
+        {/* 主要内容 */}
+        <div className="bg-[var(--color-message-assistant-bg)] border border-[var(--color-message-assistant-border)] rounded-2xl px-5 py-4 shadow-sm">
+          <div className="text-sm text-[var(--color-text-primary)] leading-[1.75]">
+            {message.content ? (
+              <MarkdownRenderer content={message.content} />
+            ) : isStreaming ? (
+              <div className="flex items-center gap-2 text-[var(--color-text-tertiary)]">
+                <Loader2 size={16} className="animate-spin" />
+                <span>正在思考...</span>
+              </div>
+            ) : null}
           </div>
 
-          {/* 操作按钮 */}
-          <div className="flex items-center gap-1 mt-4 pt-3">
-            <ActionButton icon={Copy} title="Copy" />
-            <ActionButton icon={ThumbsUp} title="Good response" />
-            <ActionButton icon={ThumbsDown} title="Bad response" />
-            <ActionButton icon={RefreshCw} title="Regenerate" />
-          </div>
+          {/* 流式状态指示器 */}
+          {isStreaming && message.content && (
+            <div className="flex items-center gap-2 mt-3 text-sm text-[var(--color-text-tertiary)]">
+              <Loader2 size={14} className="animate-spin" />
+              <span>生成中...</span>
+            </div>
+          )}
 
-          {/* 免责声明 */}
-          <div className="text-xs text-[var(--color-text-tertiary)] text-right mt-2">
-            cchcode can make mistakes
-          </div>
+          {/* 操作按钮（非流式状态下显示） */}
+          {!isStreaming && message.content && (
+            <>
+              <div className="flex items-center gap-1 mt-4 pt-3">
+                <button
+                  onClick={handleCopy}
+                  className="w-8 h-8 flex items-center justify-center rounded-lg text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)] transition-colors"
+                  title={copied ? '已复制' : '复制'}
+                >
+                  {copied ? <Check size={16} className="text-green-500" /> : <Copy size={16} />}
+                </button>
+                <ActionButton icon={ThumbsUp} title="好的回答" />
+                <ActionButton icon={ThumbsDown} title="不好的回答" />
+                <ActionButton icon={RefreshCw} title="重新生成" />
+              </div>
+
+              {/* 免责声明 */}
+              <div className="text-xs text-[var(--color-text-tertiary)] text-right mt-2">
+                cchcode can make mistakes
+              </div>
+            </>
+          )}
         </div>
       </div>
     </div>