fix: 第四轮调试 — 回复去重/消息时序/UI布局/自主思考深度优化 + 文档重整
后端修复: - main.go: 恢复 /api/v1/chat 路由中丢失的 handleChat 调用 (空响应回归) - orchestrator.go: splitChatByLines 改为双换行分割, 避免单换行误拆 - chat_handler.go: multi_message 增加 !hasReview 守卫, 消息延迟 200→800ms - thinker.go: RecordUserMessage 追踪活跃会话ID, 推送主动消息到正确会话 - thinker.go: 增强思考提示词 — 禁止在用户休息/离开时发送主动消息 前端修复: - useWebSocket.ts: stream_segments 不再创建消息气泡, 消除重复回复 - MessageBubble.tsx: 动作消息居左对齐无头像, 时间戳移至气泡外侧 hover 显示 - ChatInput.tsx: 昔涟输入提示移至输入框上方, 波点动画效果 - MessageList/TypingIndicator/ChatContainer: 清理冗余 isTyping 传递 - MemoryPanel.tsx: 新增记忆面板组件 文档重整: - docs/debug/ → docs/debug_log/ 重命名统一 - 新增 debug_log/README.md 索引 - .gitignore: 新增 android/ 排除规则 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -5,7 +5,6 @@ import { IoTStatusBar } from './IoTStatusBar';
|
||||
|
||||
export function ChatContainer() {
|
||||
const messages = useChatStore((s) => s.messages);
|
||||
const isTyping = useChatStore((s) => s.isTyping);
|
||||
const continuousMode = useChatStore((s) => s.continuousMode);
|
||||
const backgroundThinkingStatus = useChatStore((s) => s.backgroundThinkingStatus);
|
||||
|
||||
@@ -46,7 +45,6 @@ export function ChatContainer() {
|
||||
<div className="flex flex-col flex-1 min-h-0">
|
||||
<MessageList
|
||||
messages={messages}
|
||||
isTyping={isTyping}
|
||||
hasMoreMessages={useChatStore((s) => s.hasMoreMessages)}
|
||||
isLoadingHistory={useChatStore((s) => s.isLoadingHistory)}
|
||||
onLoadMore={() => {
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useState, useRef, useCallback, useEffect } from 'react';
|
||||
import type { ChatMode, MessageAttachment } from '@/types/chat';
|
||||
import { useSpeechRecognition } from '@/hooks/useSpeechRecognition';
|
||||
import { uploadFile } from '@/api/files';
|
||||
import { useChatStore } from '@/store/chatStore';
|
||||
|
||||
interface ChatInputProps {
|
||||
onSend: (content: string, mode: ChatMode, attachments?: MessageAttachment[]) => void;
|
||||
@@ -26,6 +27,7 @@ export function ChatInput({ onSend, disabled }: ChatInputProps) {
|
||||
const [uploadError, setUploadError] = useState('');
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const isTyping = useChatStore((s) => s.isTyping);
|
||||
|
||||
const {
|
||||
isListening,
|
||||
@@ -98,6 +100,7 @@ export function ChatInput({ onSend, disabled }: ChatInputProps) {
|
||||
setUploading(false);
|
||||
}
|
||||
|
||||
useChatStore.getState().setTyping(true);
|
||||
onSend(trimmed, mode, attachments);
|
||||
setContent('');
|
||||
setPendingImages([]);
|
||||
@@ -221,6 +224,27 @@ export function ChatInput({ onSend, disabled }: ChatInputProps) {
|
||||
return (
|
||||
<div className="border-t border-pink-100 dark:border-pink-900 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm px-4 py-3">
|
||||
<div className="flex flex-col gap-2 max-w-3xl mx-auto">
|
||||
{/* 昔涟正在输入指示器 */}
|
||||
{isTyping && (
|
||||
<div className="flex items-center gap-2 px-1 animate-fadeIn">
|
||||
<div className="flex gap-1">
|
||||
<span
|
||||
className="w-2 h-2 rounded-full bg-pink-400 animate-bounce"
|
||||
style={{ animationDelay: '0ms' }}
|
||||
/>
|
||||
<span
|
||||
className="w-2 h-2 rounded-full bg-pink-400 animate-bounce"
|
||||
style={{ animationDelay: '150ms' }}
|
||||
/>
|
||||
<span
|
||||
className="w-2 h-2 rounded-full bg-pink-400 animate-bounce"
|
||||
style={{ animationDelay: '300ms' }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-pink-400 font-medium">昔涟正在输入...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 实时识别文本提示 */}
|
||||
{isListening && interimText && (
|
||||
<div
|
||||
|
||||
@@ -173,10 +173,17 @@ export function MessageBubble({
|
||||
const imageAttachments = attachments?.filter((a) => a.type === 'image') ?? [];
|
||||
|
||||
return (
|
||||
<div className={`flex px-4 py-2 gap-3 ${isUser ? 'justify-end' : ''}`}>
|
||||
<div className={`flex px-4 py-2 gap-2 items-end group ${isUser ? 'justify-end' : ''}`}>
|
||||
{/* 用户消息:时间在左侧(气泡外侧) */}
|
||||
{isUser && !isStreaming && (
|
||||
<p className="text-[10px] text-gray-400 dark:text-gray-500 flex-shrink-0 mb-1 hidden md:block md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
{time}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* 头像 */}
|
||||
{!isUser && (
|
||||
<CyreneAvatar size="sm" className="flex-shrink-0 mt-1" />
|
||||
<CyreneAvatar size="sm" className="flex-shrink-0 mb-0.5" />
|
||||
)}
|
||||
|
||||
{/* 消息气泡 */}
|
||||
@@ -249,22 +256,15 @@ export function MessageBubble({
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isStreaming && (
|
||||
<>
|
||||
{/* AI 消息操作栏(朗读按钮)— 暂时禁用 */}
|
||||
{/* !isUser && <AIMessageActions content={content} /> */}
|
||||
<p
|
||||
className={`text-xs mt-1 ${
|
||||
isUser ? 'text-pink-100' : 'text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{time}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 昔涟消息:时间在右侧(气泡外侧) */}
|
||||
{!isUser && !isStreaming && (
|
||||
<p className="text-[10px] text-gray-400 dark:text-gray-500 flex-shrink-0 mb-1 hidden md:block md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
{time}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* 用户头像 */}
|
||||
{isUser && <UserAvatar />}
|
||||
|
||||
@@ -280,7 +280,7 @@ export function MessageBubble({
|
||||
);
|
||||
}
|
||||
|
||||
/** 动作消息气泡 — 灰色/斜体/居中,视觉上与聊天消息区分 */
|
||||
/** 动作消息气泡 — 居左,与昔涟头像对齐,灰色/斜体与聊天消息区分 */
|
||||
function ActionMessageBubble({ content, timestamp }: { content: string; timestamp: number }) {
|
||||
const time = new Date(timestamp).toLocaleTimeString('zh-CN', {
|
||||
hour: '2-digit',
|
||||
@@ -288,15 +288,16 @@ function ActionMessageBubble({ content, timestamp }: { content: string; timestam
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex justify-center px-4 py-1 animate-fadeIn">
|
||||
<div className="max-w-[70%] text-center">
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500 italic leading-relaxed whitespace-pre-wrap break-words">
|
||||
<span className="select-none text-gray-300 dark:text-gray-600">~ </span>
|
||||
<div className="flex px-4 py-0.5 gap-1.5 items-end group animate-fadeIn">
|
||||
<div className="w-8 flex-shrink-0" />
|
||||
<div className="max-w-[70%]">
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500 italic leading-snug whitespace-pre-wrap break-words">
|
||||
{content}
|
||||
<span className="select-none text-gray-300 dark:text-gray-600"> ~</span>
|
||||
</p>
|
||||
<p className="text-[10px] text-gray-300 dark:text-gray-600 mt-0.5">{time}</p>
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-400 dark:text-gray-500 flex-shrink-0 mb-0.5 hidden md:block md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
{time}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { MessageBubble } from './MessageBubble';
|
||||
import { TypingIndicator } from './TypingIndicator';
|
||||
import type { Message } from '@/types/chat';
|
||||
|
||||
interface MessageListProps {
|
||||
messages: Message[];
|
||||
isTyping: boolean;
|
||||
hasMoreMessages?: boolean;
|
||||
isLoadingHistory?: boolean;
|
||||
onLoadMore?: () => void;
|
||||
@@ -13,7 +11,6 @@ interface MessageListProps {
|
||||
|
||||
export function MessageList({
|
||||
messages,
|
||||
isTyping,
|
||||
hasMoreMessages = false,
|
||||
isLoadingHistory = false,
|
||||
onLoadMore,
|
||||
@@ -26,7 +23,7 @@ export function MessageList({
|
||||
if (!isLoadingHistory) {
|
||||
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}, [messages, isTyping, isLoadingHistory]);
|
||||
}, [messages, isLoadingHistory]);
|
||||
|
||||
if (messages.length === 0 && !isLoadingHistory) {
|
||||
return (
|
||||
@@ -77,7 +74,6 @@ export function MessageList({
|
||||
msgType={msg.msgType}
|
||||
/>
|
||||
))}
|
||||
{isTyping && !messages.some((m) => m.isStreaming) && <TypingIndicator />}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -5,6 +5,7 @@ export function TypingIndicator() {
|
||||
<div className="flex px-4 py-2 gap-3">
|
||||
<CyreneAvatar size="sm" className="flex-shrink-0 mt-1" />
|
||||
<div className="bg-white dark:bg-gray-800 rounded-2xl rounded-bl-md px-4 py-3 shadow-sm border border-pink-100 dark:border-pink-900">
|
||||
<p className="text-xs text-pink-400 mb-1.5 font-medium">昔涟正在输入...</p>
|
||||
<div className="flex gap-1.5">
|
||||
<span
|
||||
className="w-2 h-2 rounded-full bg-pink-300 animate-bounce"
|
||||
|
||||
Reference in New Issue
Block a user