基于 shiy-temp分支修改
This commit is contained in:
pingchuan
@@ -0,0 +1,571 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { produce } from 'immer';
|
||||
import { useBoolean, useGetState } from 'ahooks';
|
||||
import { Layout, theme } from 'antd';
|
||||
import ChatMessage from './chat-message';
|
||||
import ChatInput from './chat-input';
|
||||
import ChatSidebar, { type ChatSidebarRef } from './sidebar';
|
||||
// import Header from '../layout/Header';
|
||||
import useConversation from '../../hooks/use-conversation';
|
||||
import useChatMessage from '../../hooks/use-chat-message';
|
||||
import type { ChatItem, ConversationItem } from '../../types/dify_chat';
|
||||
import { CHAT_CONFIG } from '../../config/chat';
|
||||
import { fetchConversations, fetchAppParams, fetchChatList } from '../../services/api.client';
|
||||
import '../../styles/components/chat-with-llm/index.css';
|
||||
|
||||
const { Content } = Layout;
|
||||
|
||||
/**
|
||||
* 主聊天组件
|
||||
* 实现单页面应用模式，参考webapp-conversation的初始化逻辑
|
||||
*/
|
||||
export default function Chat() {
|
||||
// 侧边栏状态
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const {
|
||||
token: { colorBgContainer, borderRadiusLG },
|
||||
} = theme.useToken();
|
||||
|
||||
// 会话管理
|
||||
const {
|
||||
conversationList,
|
||||
setConversationList,
|
||||
currConversationId,
|
||||
getCurrConversationId,
|
||||
setCurrConversationId,
|
||||
getConversationIdFromStorage,
|
||||
isNewConversation,
|
||||
currInputs,
|
||||
newConversationInputs,
|
||||
resetNewConversationInputs,
|
||||
setCurrInputs,
|
||||
currConversationInfo,
|
||||
setNewConversationInfo,
|
||||
setExistConversationInfo,
|
||||
addConversationToList,
|
||||
updateConversationInList,
|
||||
removeConversationFromList,
|
||||
} = useConversation();
|
||||
|
||||
// 消息管理
|
||||
const {
|
||||
chatList,
|
||||
setChatList,
|
||||
getChatList,
|
||||
isResponding,
|
||||
handleSend,
|
||||
stopResponding,
|
||||
handleFeedback,
|
||||
} = useChatMessage({
|
||||
onUpdateConversationList: updateConversationInList,
|
||||
onConversationIdChange: async (conversationId: string) => {
|
||||
console.log('🔄 收到会话ID变更通知:', conversationId);
|
||||
|
||||
// 设置当前会话ID（这会触发localStorage更新）
|
||||
setCurrConversationId(conversationId, CHAT_CONFIG.APP_ID);
|
||||
|
||||
// 如果是新会话，添加到会话列表
|
||||
const existingConversation = conversationList.find(item => item.id === conversationId);
|
||||
if (!existingConversation) {
|
||||
console.log('🆕 添加新会话到列表:', conversationId);
|
||||
const newConversation = {
|
||||
id: conversationId,
|
||||
name: '新对话',
|
||||
inputs: currInputs || {},
|
||||
introduction: '',
|
||||
};
|
||||
addConversationToList(newConversation);
|
||||
|
||||
// 检查是否需要自动重命名（新对话的第一条消息）
|
||||
if (!newConversationFirstMessageSent.has(conversationId)) {
|
||||
console.log('🏷️ 新对话第一条消息，准备自动重命名:', conversationId);
|
||||
|
||||
// 标记该对话已发送第一条消息
|
||||
setNewConversationFirstMessageSent(prev => new Set(prev).add(conversationId));
|
||||
|
||||
// 延迟一下确保组件状态已更新
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
if (sidebarRef.current) {
|
||||
await sidebarRef.current.autoRename(conversationId);
|
||||
console.log('✅ 新对话自动重命名完成:', conversationId);
|
||||
} else {
|
||||
console.warn('⚠️ 侧边栏引用不可用，无法自动重命名');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 新对话自动重命名失败:', error);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// 应用状态
|
||||
const [appUnavailable, setAppUnavailable] = useState<boolean>(false);
|
||||
const [isUnknownReason, setIsUnknownReason] = useState<boolean>(false);
|
||||
const [inited, setInited] = useState<boolean>(false);
|
||||
const [promptConfig, setPromptConfig] = useState<any>(null);
|
||||
|
||||
// 会话状态管理
|
||||
const [conversationIdChangeBecauseOfNew, setConversationIdChangeBecauseOfNew, getConversationIdChangeBecauseOfNew] = useGetState(false);
|
||||
const [isChatStarted, { setTrue: setChatStarted, setFalse: setChatNotStarted }] = useBoolean(false);
|
||||
|
||||
// 聊天列表容器引用
|
||||
const chatListDomRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 侧边栏组件引用
|
||||
const sidebarRef = useRef<ChatSidebarRef>(null);
|
||||
|
||||
// 跟踪新对话是否已发送第一条消息
|
||||
const [newConversationFirstMessageSent, setNewConversationFirstMessageSent] = useState<Set<string>>(new Set());
|
||||
|
||||
// 检查应用配置
|
||||
const hasSetAppConfig = CHAT_CONFIG.APP_ID && CHAT_CONFIG.API_KEY;
|
||||
|
||||
/**
|
||||
* 处理开始聊天
|
||||
*/
|
||||
const handleStartChat = (inputs: Record<string, any>) => {
|
||||
createNewChat();
|
||||
setConversationIdChangeBecauseOfNew(true);
|
||||
setCurrInputs(inputs);
|
||||
setChatStarted();
|
||||
// 解析变量并生成开场白
|
||||
setChatList(generateNewChatListWithOpenStatement('', inputs));
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建新聊天
|
||||
*/
|
||||
const createNewChat = () => {
|
||||
setChatList([]);
|
||||
setChatNotStarted();
|
||||
resetNewConversationInputs();
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成带开场白的新聊天列表
|
||||
*/
|
||||
const generateNewChatListWithOpenStatement = (introduction?: string, inputs?: Record<string, any> | null): ChatItem[] => {
|
||||
const newChatList: ChatItem[] = [];
|
||||
|
||||
if (introduction) {
|
||||
newChatList.push({
|
||||
id: `opening-statement-${Date.now()}`,
|
||||
content: introduction,
|
||||
isAnswer: true,
|
||||
isOpeningStatement: true,
|
||||
});
|
||||
}
|
||||
|
||||
return newChatList;
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理会话切换
|
||||
*/
|
||||
const handleConversationSwitch = async () => {
|
||||
if (!inited) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('🔄 处理会话切换:', { currConversationId, isNewConversation });
|
||||
|
||||
// 更新当前会话的输入
|
||||
let notSyncToStateIntroduction = '';
|
||||
let notSyncToStateInputs: Record<string, any> | undefined | null = {};
|
||||
|
||||
if (!isNewConversation) {
|
||||
const item = conversationList.find(item => item.id === currConversationId);
|
||||
notSyncToStateInputs = item?.inputs || {};
|
||||
setCurrInputs(notSyncToStateInputs as any);
|
||||
notSyncToStateIntroduction = item?.introduction || '';
|
||||
setExistConversationInfo({
|
||||
name: item?.name || '',
|
||||
introduction: notSyncToStateIntroduction,
|
||||
});
|
||||
} else {
|
||||
notSyncToStateInputs = newConversationInputs;
|
||||
setCurrInputs(notSyncToStateInputs);
|
||||
}
|
||||
|
||||
// 更新当前会话的聊天列表
|
||||
if (!isNewConversation && !conversationIdChangeBecauseOfNew && !isResponding) {
|
||||
try {
|
||||
console.log('📨 获取会话历史消息:', currConversationId);
|
||||
|
||||
// 调用API获取历史消息
|
||||
const response = await fetchChatList(currConversationId);
|
||||
console.log('📋 历史消息响应:', response);
|
||||
|
||||
if (response && (response as any).data) {
|
||||
const { data: historyMessages } = response as any;
|
||||
|
||||
// 生成新的聊天列表，包含开场白
|
||||
const newChatList: ChatItem[] = generateNewChatListWithOpenStatement(notSyncToStateIntroduction, notSyncToStateInputs);
|
||||
|
||||
// 添加历史消息
|
||||
historyMessages.forEach((item: any) => {
|
||||
// 添加用户问题
|
||||
newChatList.push({
|
||||
id: `question-${item.id}`,
|
||||
content: item.query,
|
||||
isAnswer: false,
|
||||
message_files: item.message_files?.filter((file: any) => file.belongs_to === 'user') || [],
|
||||
});
|
||||
|
||||
// 添加AI回答
|
||||
newChatList.push({
|
||||
id: item.id,
|
||||
content: item.answer,
|
||||
agent_thoughts: item.agent_thoughts || [],
|
||||
feedback: item.feedback,
|
||||
isAnswer: true,
|
||||
message_files: item.message_files?.filter((file: any) => file.belongs_to === 'assistant') || [],
|
||||
});
|
||||
});
|
||||
|
||||
console.log('✅ 设置历史聊天列表:', newChatList.length, '条消息');
|
||||
setChatList(newChatList);
|
||||
} else {
|
||||
console.warn('⚠️ 获取历史消息失败或无数据');
|
||||
// 如果获取失败，至少显示开场白
|
||||
const newChatList: ChatItem[] = generateNewChatListWithOpenStatement(notSyncToStateIntroduction, notSyncToStateInputs);
|
||||
setChatList(newChatList);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 获取历史消息失败:', error);
|
||||
// 如果获取失败，至少显示开场白
|
||||
const newChatList: ChatItem[] = generateNewChatListWithOpenStatement(notSyncToStateIntroduction, notSyncToStateInputs);
|
||||
setChatList(newChatList);
|
||||
}
|
||||
}
|
||||
|
||||
if (isNewConversation && isChatStarted) {
|
||||
setChatList(generateNewChatListWithOpenStatement());
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理会话ID变化
|
||||
*/
|
||||
const handleConversationIdChange = (id: string) => {
|
||||
console.log('🔄 会话ID变化:', { id, currentId: currConversationId });
|
||||
|
||||
if (id === '-1') {
|
||||
createNewChat();
|
||||
setConversationIdChangeBecauseOfNew(true);
|
||||
} else {
|
||||
setConversationIdChangeBecauseOfNew(false);
|
||||
}
|
||||
|
||||
// 触发会话切换
|
||||
setCurrConversationId(id, CHAT_CONFIG.APP_ID);
|
||||
};
|
||||
|
||||
/**
|
||||
* 检查是否可以发送消息
|
||||
*/
|
||||
const checkCanSend = () => {
|
||||
if (currConversationId !== '-1') {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!currInputs || !promptConfig?.prompt_variables) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const inputLens = Object.values(currInputs).length;
|
||||
const promptVariablesLens = promptConfig.prompt_variables.length;
|
||||
|
||||
const emptyInput = inputLens < promptVariablesLens || Object.values(currInputs).find(v => !v);
|
||||
if (emptyInput) {
|
||||
console.error('必填变量值不能为空');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理发送消息
|
||||
*/
|
||||
const handleSendMessage = async (message: string, files?: any[]) => {
|
||||
if (isResponding) {
|
||||
console.log('正在响应中，请等待...');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!checkCanSend()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// console.log('📤 发送消息:', { message, conversationId: currConversationId });
|
||||
|
||||
try {
|
||||
// 准备输入数据
|
||||
const toServerInputs: Record<string, any> = {};
|
||||
if (currInputs) {
|
||||
Object.keys(currInputs).forEach((key) => {
|
||||
toServerInputs[key] = currInputs[key];
|
||||
});
|
||||
}
|
||||
|
||||
// 使用 useChatMessage 钩子的 handleSend 方法
|
||||
await handleSend(
|
||||
message,
|
||||
isNewConversation ? null : currConversationId,
|
||||
files,
|
||||
toServerInputs
|
||||
);
|
||||
|
||||
} catch (error) {
|
||||
console.error('发送消息失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理侧边栏切换
|
||||
*/
|
||||
const handleSidebarToggle = () => {
|
||||
setSidebarCollapsed(!sidebarCollapsed);
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理会话选择
|
||||
*/
|
||||
const handleConversationSelect = (conversationId: string) => {
|
||||
if (conversationId !== currConversationId) {
|
||||
setCurrConversationId(conversationId, CHAT_CONFIG.APP_ID);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理新建会话
|
||||
*/
|
||||
const handleNewConversation = () => {
|
||||
setCurrConversationId('-1', CHAT_CONFIG.APP_ID, false);
|
||||
createNewChat();
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理会话删除后的状态更新
|
||||
*/
|
||||
const handleConversationDeleted = (conversationId: string) => {
|
||||
console.log('🗑️ 处理会话删除后的状态更新:', conversationId);
|
||||
|
||||
// 如果删除的是当前会话，切换到新会话
|
||||
if (conversationId === currConversationId) {
|
||||
handleNewConversation();
|
||||
}
|
||||
|
||||
// 从列表中移除会话
|
||||
removeConversationFromList(conversationId);
|
||||
|
||||
console.log('✅ 会话删除状态更新完成:', conversationId);
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理会话重命名后的状态更新
|
||||
*/
|
||||
const handleConversationRenamed = (conversationId: string, newName: string) => {
|
||||
console.log('✏️ 处理会话重命名后的状态更新:', { conversationId, newName });
|
||||
|
||||
// 更新本地会话列表中的名称
|
||||
updateConversationInList(conversationId, { name: newName });
|
||||
|
||||
console.log('✅ 会话重命名状态更新完成:', conversationId, '->', newName);
|
||||
};
|
||||
|
||||
/**
|
||||
* 组件初始化 - 参考webapp-conversation的逻辑
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (!hasSetAppConfig) {
|
||||
console.error('应用配置不完整');
|
||||
setAppUnavailable(true);
|
||||
return;
|
||||
}
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
console.log('🚀 开始初始化聊天应用...');
|
||||
|
||||
// 并行获取会话列表和应用参数
|
||||
const [conversationData, appParams] = await Promise.all([
|
||||
fetchConversations(),
|
||||
fetchAppParams()
|
||||
]);
|
||||
|
||||
console.log('📋 获取到的数据:', { conversationData, appParams });
|
||||
|
||||
// 处理会话数据
|
||||
const conversations = (conversationData as any).data || [];
|
||||
if ((conversationData as any).error) {
|
||||
console.error('获取会话列表失败:', (conversationData as any).error);
|
||||
throw new Error((conversationData as any).error);
|
||||
}
|
||||
|
||||
// 处理当前会话ID
|
||||
const _conversationId = getConversationIdFromStorage(CHAT_CONFIG.APP_ID);
|
||||
const isNotNewConversation = conversations.some((item: ConversationItem) => item.id === _conversationId);
|
||||
|
||||
console.log('💾 本地存储的会话ID:', _conversationId);
|
||||
console.log('🔍 是否为已存在的会话:', isNotNewConversation);
|
||||
|
||||
// 获取新会话信息
|
||||
const { user_input_form, opening_statement: introduction } = (appParams as any).data || {};
|
||||
|
||||
setNewConversationInfo({
|
||||
name: '新对话',
|
||||
introduction: introduction || '',
|
||||
});
|
||||
|
||||
// 设置提示配置
|
||||
setPromptConfig({
|
||||
prompt_template: '',
|
||||
prompt_variables: user_input_form || [],
|
||||
});
|
||||
|
||||
// 设置会话列表
|
||||
setConversationList(conversations);
|
||||
|
||||
// 如果存在有效的会话ID，则设置为当前会话
|
||||
if (isNotNewConversation) {
|
||||
console.log('🎯 设置当前会话ID:', _conversationId);
|
||||
setCurrConversationId(_conversationId, CHAT_CONFIG.APP_ID, false);
|
||||
} else {
|
||||
// 如果localStorage为空或会话不存在，自动创建新会话
|
||||
console.log('🆕 localStorage为空或会话不存在，创建新会话');
|
||||
setCurrConversationId('-1', CHAT_CONFIG.APP_ID, false);
|
||||
}
|
||||
|
||||
setInited(true);
|
||||
console.log('✅ 聊天应用初始化完成');
|
||||
} catch (e: any) {
|
||||
console.error('❌ 初始化失败:', e);
|
||||
if (e.status === 404) {
|
||||
setAppUnavailable(true);
|
||||
} else {
|
||||
setIsUnknownReason(true);
|
||||
setAppUnavailable(true);
|
||||
}
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
// 监听会话切换
|
||||
useEffect(() => {
|
||||
handleConversationSwitch();
|
||||
}, [currConversationId, inited]);
|
||||
|
||||
// 自动滚动到底部
|
||||
useEffect(() => {
|
||||
if (chatListDomRef.current) {
|
||||
chatListDomRef.current.scrollTop = chatListDomRef.current.scrollHeight;
|
||||
}
|
||||
}, [chatList]);
|
||||
|
||||
// 如果应用不可用，显示错误页面
|
||||
if (appUnavailable) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">应用暂时不可用</h2>
|
||||
<p className="text-gray-600">
|
||||
{isUnknownReason ? '发生了未知错误，请稍后重试' : '应用配置不正确，请检查配置'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 如果未初始化完成，显示加载状态
|
||||
if (!inited) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"></div>
|
||||
<p className="text-gray-600">正在加载...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 判断是否已设置输入
|
||||
const hasSetInputs = (() => {
|
||||
if (!isNewConversation) {
|
||||
return true;
|
||||
}
|
||||
return isChatStarted;
|
||||
})();
|
||||
|
||||
const conversationName = currConversationInfo?.name || '新对话';
|
||||
const conversationIntroduction = currConversationInfo?.introduction || '';
|
||||
|
||||
return (
|
||||
<Layout style={{ height: '90vh' }}>
|
||||
{/* 侧边栏 */}
|
||||
<ChatSidebar
|
||||
ref={sidebarRef}
|
||||
collapsed={sidebarCollapsed}
|
||||
onToggle={handleSidebarToggle}
|
||||
conversations={conversationList}
|
||||
currentConversationId={currConversationId}
|
||||
onConversationSelect={handleConversationSelect}
|
||||
onNewConversation={handleNewConversation}
|
||||
onConversationDeleted={handleConversationDeleted}
|
||||
onConversationRenamed={handleConversationRenamed}
|
||||
/>
|
||||
|
||||
{/* 主内容区域 */}
|
||||
<Layout>
|
||||
<Content
|
||||
style={{
|
||||
background: colorBgContainer,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
{/* 聊天区域 */}
|
||||
<div className="flex-[0.85] overflow-hidden">
|
||||
<div
|
||||
ref={chatListDomRef}
|
||||
className="h-full overflow-y-auto px-4 py-4 space-y-2"
|
||||
>
|
||||
{/* 如果是新会话且未开始聊天，显示欢迎信息 */}
|
||||
{isNewConversation && !isChatStarted && (
|
||||
<div className="text-center py-8">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">开始新的对话</h3>
|
||||
<p className="text-gray-600">请在下方输入您的问题</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 聊天消息列表 */}
|
||||
{chatList.map((item) => (
|
||||
<ChatMessage
|
||||
key={item.id}
|
||||
message={item}
|
||||
isResponding={isResponding && item.id === chatList[chatList.length - 1]?.id}
|
||||
onFeedback={handleFeedback}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 输入区域 */}
|
||||
<div className="flex-[0.16] border-t border-gray-200 bg-white">
|
||||
<ChatInput
|
||||
onSendMessage={handleSendMessage}
|
||||
disabled={isResponding}
|
||||
placeholder="请输入您的问题..."
|
||||
onStop={stopResponding}
|
||||
isResponding={isResponding}
|
||||
/>
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user