♻️ refactor(playground): major architectural overhaul and code optimization
Completely restructured the Playground component from a 1437-line monolith into a maintainable, modular architecture with 62.4% code reduction (540 lines). **Key Improvements:** - **Modular Architecture**: Extracted business logic into separate utility files - `utils/constants.js` - Centralized constant management - `utils/messageUtils.js` - Message processing utilities - `utils/apiUtils.js` - API-related helper functions - **Custom Hooks**: Created specialized hooks for better state management - `usePlaygroundState.js` - Centralized state management - `useMessageActions.js` - Message operation handlers - `useApiRequest.js` - API request management - **Code Quality**: Applied SOLID principles and functional programming patterns - **Performance**: Optimized re-renders with useCallback and proper dependency arrays - **Maintainability**: Implemented single responsibility principle and separation of concerns **Technical Achievements:** - Eliminated code duplication and redundancy - Replaced magic strings with typed constants - Extracted complex inline logic into pure functions - Improved error handling and API response processing - Enhanced code readability and testability **Breaking Changes:** None - All existing functionality preserved This refactor transforms the codebase into enterprise-grade quality following React best practices and modern development standards.
This commit is contained in:
Apple\Apple
360
web/src/hooks/useApiRequest.js
Normal file
360
web/src/hooks/useApiRequest.js
Normal file
@@ -0,0 +1,360 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SSE } from 'sse';
|
||||
import { getUserIdFromLocalStorage } from '../helpers/index.js';
|
||||
import {
|
||||
API_ENDPOINTS,
|
||||
MESSAGE_STATUS,
|
||||
DEBUG_TABS
|
||||
} from '../utils/constants';
|
||||
import {
|
||||
buildApiPayload,
|
||||
handleApiError
|
||||
} from '../utils/apiUtils';
|
||||
import {
|
||||
processThinkTags,
|
||||
processIncompleteThinkTags
|
||||
} from '../utils/messageUtils';
|
||||
|
||||
export const useApiRequest = (
|
||||
setMessage,
|
||||
setDebugData,
|
||||
setActiveDebugTab,
|
||||
sseSourceRef
|
||||
) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// 流式消息更新
|
||||
const streamMessageUpdate = useCallback((textChunk, type) => {
|
||||
setMessage(prevMessage => {
|
||||
const lastMessage = prevMessage[prevMessage.length - 1];
|
||||
if (lastMessage.status === MESSAGE_STATUS.ERROR) {
|
||||
return prevMessage;
|
||||
}
|
||||
|
||||
if (lastMessage.status === MESSAGE_STATUS.LOADING ||
|
||||
lastMessage.status === MESSAGE_STATUS.INCOMPLETE) {
|
||||
|
||||
let newMessage = { ...lastMessage };
|
||||
|
||||
if (type === 'reasoning') {
|
||||
newMessage = {
|
||||
...newMessage,
|
||||
reasoningContent: (lastMessage.reasoningContent || '') + textChunk,
|
||||
status: MESSAGE_STATUS.INCOMPLETE,
|
||||
};
|
||||
} else if (type === 'content') {
|
||||
const shouldCollapseReasoning = !lastMessage.content && lastMessage.reasoningContent;
|
||||
const newContent = (lastMessage.content || '') + textChunk;
|
||||
|
||||
let shouldCollapseFromThinkTag = false;
|
||||
if (lastMessage.isReasoningExpanded && newContent.includes('</think>')) {
|
||||
const thinkMatches = newContent.match(/<think>/g);
|
||||
const thinkCloseMatches = newContent.match(/<\/think>/g);
|
||||
if (thinkMatches && thinkCloseMatches &&
|
||||
thinkCloseMatches.length >= thinkMatches.length) {
|
||||
shouldCollapseFromThinkTag = true;
|
||||
}
|
||||
}
|
||||
|
||||
newMessage = {
|
||||
...newMessage,
|
||||
content: newContent,
|
||||
status: MESSAGE_STATUS.INCOMPLETE,
|
||||
isReasoningExpanded: (shouldCollapseReasoning || shouldCollapseFromThinkTag)
|
||||
? false : lastMessage.isReasoningExpanded,
|
||||
};
|
||||
}
|
||||
|
||||
return [...prevMessage.slice(0, -1), newMessage];
|
||||
}
|
||||
|
||||
return prevMessage;
|
||||
});
|
||||
}, [setMessage]);
|
||||
|
||||
// 完成消息
|
||||
const completeMessage = useCallback((status = MESSAGE_STATUS.COMPLETE) => {
|
||||
setMessage(prevMessage => {
|
||||
const lastMessage = prevMessage[prevMessage.length - 1];
|
||||
if (lastMessage.status === MESSAGE_STATUS.COMPLETE ||
|
||||
lastMessage.status === MESSAGE_STATUS.ERROR) {
|
||||
return prevMessage;
|
||||
}
|
||||
return [
|
||||
...prevMessage.slice(0, -1),
|
||||
{
|
||||
...lastMessage,
|
||||
status: status,
|
||||
isReasoningExpanded: false
|
||||
}
|
||||
];
|
||||
});
|
||||
}, [setMessage]);
|
||||
|
||||
// 非流式请求
|
||||
const handleNonStreamRequest = useCallback(async (payload) => {
|
||||
setDebugData(prev => ({
|
||||
...prev,
|
||||
request: payload,
|
||||
timestamp: new Date().toISOString(),
|
||||
response: null
|
||||
}));
|
||||
setActiveDebugTab(DEBUG_TABS.REQUEST);
|
||||
|
||||
try {
|
||||
const response = await fetch(API_ENDPOINTS.CHAT_COMPLETIONS, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'New-Api-User': getUserIdFromLocalStorage(),
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
let errorBody = '';
|
||||
try {
|
||||
errorBody = await response.text();
|
||||
} catch (e) {
|
||||
errorBody = '无法读取错误响应体';
|
||||
}
|
||||
|
||||
const errorInfo = handleApiError(
|
||||
new Error(`HTTP error! status: ${response.status}, body: ${errorBody}`),
|
||||
response
|
||||
);
|
||||
|
||||
setDebugData(prev => ({
|
||||
...prev,
|
||||
response: JSON.stringify(errorInfo, null, 2)
|
||||
}));
|
||||
setActiveDebugTab(DEBUG_TABS.RESPONSE);
|
||||
|
||||
throw new Error(`HTTP error! status: ${response.status}, body: ${errorBody}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
setDebugData(prev => ({
|
||||
...prev,
|
||||
response: JSON.stringify(data, null, 2)
|
||||
}));
|
||||
setActiveDebugTab(DEBUG_TABS.RESPONSE);
|
||||
|
||||
if (data.choices?.[0]) {
|
||||
const choice = data.choices[0];
|
||||
let content = choice.message?.content || '';
|
||||
let reasoningContent = choice.message?.reasoning_content || '';
|
||||
|
||||
const processed = processThinkTags(content, reasoningContent);
|
||||
|
||||
setMessage(prevMessage => {
|
||||
const newMessages = [...prevMessage];
|
||||
const lastMessage = newMessages[newMessages.length - 1];
|
||||
if (lastMessage?.status === MESSAGE_STATUS.LOADING) {
|
||||
newMessages[newMessages.length - 1] = {
|
||||
...lastMessage,
|
||||
content: processed.content,
|
||||
reasoningContent: processed.reasoningContent,
|
||||
status: MESSAGE_STATUS.COMPLETE,
|
||||
isReasoningExpanded: false
|
||||
};
|
||||
}
|
||||
return newMessages;
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Non-stream request error:', error);
|
||||
|
||||
const errorInfo = handleApiError(error);
|
||||
setDebugData(prev => ({
|
||||
...prev,
|
||||
response: JSON.stringify(errorInfo, null, 2)
|
||||
}));
|
||||
setActiveDebugTab(DEBUG_TABS.RESPONSE);
|
||||
|
||||
setMessage(prevMessage => {
|
||||
const newMessages = [...prevMessage];
|
||||
const lastMessage = newMessages[newMessages.length - 1];
|
||||
if (lastMessage?.status === MESSAGE_STATUS.LOADING) {
|
||||
newMessages[newMessages.length - 1] = {
|
||||
...lastMessage,
|
||||
content: t('请求发生错误: ') + error.message,
|
||||
status: MESSAGE_STATUS.ERROR,
|
||||
isReasoningExpanded: false
|
||||
};
|
||||
}
|
||||
return newMessages;
|
||||
});
|
||||
}
|
||||
}, [setDebugData, setActiveDebugTab, setMessage, t]);
|
||||
|
||||
// SSE请求
|
||||
const handleSSE = useCallback((payload) => {
|
||||
setDebugData(prev => ({
|
||||
...prev,
|
||||
request: payload,
|
||||
timestamp: new Date().toISOString(),
|
||||
response: null
|
||||
}));
|
||||
setActiveDebugTab(DEBUG_TABS.REQUEST);
|
||||
|
||||
const source = new SSE(API_ENDPOINTS.CHAT_COMPLETIONS, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'New-Api-User': getUserIdFromLocalStorage(),
|
||||
},
|
||||
method: 'POST',
|
||||
payload: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
sseSourceRef.current = source;
|
||||
|
||||
let responseData = '';
|
||||
let hasReceivedFirstResponse = false;
|
||||
|
||||
source.addEventListener('message', (e) => {
|
||||
if (e.data === '[DONE]') {
|
||||
source.close();
|
||||
sseSourceRef.current = null;
|
||||
setDebugData(prev => ({ ...prev, response: responseData }));
|
||||
completeMessage();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const payload = JSON.parse(e.data);
|
||||
responseData += e.data + '\n';
|
||||
|
||||
if (!hasReceivedFirstResponse) {
|
||||
setActiveDebugTab(DEBUG_TABS.RESPONSE);
|
||||
hasReceivedFirstResponse = true;
|
||||
}
|
||||
|
||||
const delta = payload.choices?.[0]?.delta;
|
||||
if (delta) {
|
||||
if (delta.reasoning_content) {
|
||||
streamMessageUpdate(delta.reasoning_content, 'reasoning');
|
||||
}
|
||||
if (delta.content) {
|
||||
streamMessageUpdate(delta.content, 'content');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to parse SSE message:', error);
|
||||
const errorInfo = `解析错误: ${error.message}`;
|
||||
|
||||
setDebugData(prev => ({
|
||||
...prev,
|
||||
response: responseData + `\n\nError: ${errorInfo}`
|
||||
}));
|
||||
setActiveDebugTab(DEBUG_TABS.RESPONSE);
|
||||
|
||||
streamMessageUpdate(t('解析响应数据时发生错误'), 'content');
|
||||
completeMessage(MESSAGE_STATUS.ERROR);
|
||||
}
|
||||
});
|
||||
|
||||
source.addEventListener('error', (e) => {
|
||||
console.error('SSE Error:', e);
|
||||
const errorMessage = e.data || t('请求发生错误');
|
||||
|
||||
const errorInfo = handleApiError(new Error(errorMessage));
|
||||
errorInfo.readyState = source.readyState;
|
||||
|
||||
setDebugData(prev => ({
|
||||
...prev,
|
||||
response: responseData + '\n\nSSE Error:\n' + JSON.stringify(errorInfo, null, 2)
|
||||
}));
|
||||
setActiveDebugTab(DEBUG_TABS.RESPONSE);
|
||||
|
||||
streamMessageUpdate(errorMessage, 'content');
|
||||
completeMessage(MESSAGE_STATUS.ERROR);
|
||||
sseSourceRef.current = null;
|
||||
source.close();
|
||||
});
|
||||
|
||||
source.addEventListener('readystatechange', (e) => {
|
||||
if (e.readyState >= 2 && source.status !== undefined && source.status !== 200) {
|
||||
const errorInfo = handleApiError(new Error('HTTP状态错误'));
|
||||
errorInfo.status = source.status;
|
||||
errorInfo.readyState = source.readyState;
|
||||
|
||||
setDebugData(prev => ({
|
||||
...prev,
|
||||
response: responseData + '\n\nHTTP Error:\n' + JSON.stringify(errorInfo, null, 2)
|
||||
}));
|
||||
setActiveDebugTab(DEBUG_TABS.RESPONSE);
|
||||
|
||||
source.close();
|
||||
streamMessageUpdate(t('连接已断开'), 'content');
|
||||
completeMessage(MESSAGE_STATUS.ERROR);
|
||||
}
|
||||
});
|
||||
|
||||
try {
|
||||
source.stream();
|
||||
} catch (error) {
|
||||
console.error('Failed to start SSE stream:', error);
|
||||
const errorInfo = handleApiError(error);
|
||||
|
||||
setDebugData(prev => ({
|
||||
...prev,
|
||||
response: 'Stream启动失败:\n' + JSON.stringify(errorInfo, null, 2)
|
||||
}));
|
||||
setActiveDebugTab(DEBUG_TABS.RESPONSE);
|
||||
|
||||
streamMessageUpdate(t('建立连接时发生错误'), 'content');
|
||||
completeMessage(MESSAGE_STATUS.ERROR);
|
||||
}
|
||||
}, [setDebugData, setActiveDebugTab, streamMessageUpdate, completeMessage, t]);
|
||||
|
||||
// 停止生成
|
||||
const onStopGenerator = useCallback(() => {
|
||||
if (sseSourceRef.current) {
|
||||
sseSourceRef.current.close();
|
||||
sseSourceRef.current = null;
|
||||
|
||||
setMessage(prevMessage => {
|
||||
const lastMessage = prevMessage[prevMessage.length - 1];
|
||||
if (lastMessage.status === MESSAGE_STATUS.LOADING ||
|
||||
lastMessage.status === MESSAGE_STATUS.INCOMPLETE) {
|
||||
|
||||
const processed = processIncompleteThinkTags(
|
||||
lastMessage.content || '',
|
||||
lastMessage.reasoningContent || ''
|
||||
);
|
||||
|
||||
return [
|
||||
...prevMessage.slice(0, -1),
|
||||
{
|
||||
...lastMessage,
|
||||
status: MESSAGE_STATUS.COMPLETE,
|
||||
reasoningContent: processed.reasoningContent || null,
|
||||
content: processed.content,
|
||||
isReasoningExpanded: false
|
||||
}
|
||||
];
|
||||
}
|
||||
return prevMessage;
|
||||
});
|
||||
}
|
||||
}, [setMessage]);
|
||||
|
||||
// 发送请求
|
||||
const sendRequest = useCallback((payload, isStream) => {
|
||||
if (isStream) {
|
||||
handleSSE(payload);
|
||||
} else {
|
||||
handleNonStreamRequest(payload);
|
||||
}
|
||||
}, [handleSSE, handleNonStreamRequest]);
|
||||
|
||||
return {
|
||||
sendRequest,
|
||||
onStopGenerator,
|
||||
streamMessageUpdate,
|
||||
completeMessage,
|
||||
};
|
||||
};
|
||||
188
web/src/hooks/useMessageActions.js
Normal file
188
web/src/hooks/useMessageActions.js
Normal file
@@ -0,0 +1,188 @@
|
||||
import { useCallback } from 'react';
|
||||
import { Toast, Modal } from '@douyinfe/semi-ui';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { getTextContent } from '../utils/messageUtils';
|
||||
import { ERROR_MESSAGES } from '../utils/constants';
|
||||
|
||||
export const useMessageActions = (message, setMessage, onMessageSend) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// 复制消息
|
||||
const handleMessageCopy = useCallback((targetMessage) => {
|
||||
const textToCopy = getTextContent(targetMessage);
|
||||
|
||||
if (!textToCopy) {
|
||||
Toast.warning({
|
||||
content: t(ERROR_MESSAGES.NO_TEXT_CONTENT),
|
||||
duration: 2,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const copyToClipboard = async (text) => {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
Toast.success({
|
||||
content: t('消息已复制到剪贴板'),
|
||||
duration: 2,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Clipboard API 复制失败:', err);
|
||||
fallbackCopy(text);
|
||||
}
|
||||
} else {
|
||||
fallbackCopy(text);
|
||||
}
|
||||
};
|
||||
|
||||
const fallbackCopy = (text) => {
|
||||
try {
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
textArea.style.cssText = `
|
||||
position: fixed;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
`;
|
||||
textArea.setAttribute('readonly', '');
|
||||
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
textArea.setSelectionRange(0, text.length);
|
||||
|
||||
const successful = document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
|
||||
if (successful) {
|
||||
Toast.success({
|
||||
content: t('消息已复制到剪贴板'),
|
||||
duration: 2,
|
||||
});
|
||||
} else {
|
||||
throw new Error('execCommand copy failed');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('回退复制方案也失败:', err);
|
||||
|
||||
let errorMessage = t(ERROR_MESSAGES.COPY_FAILED);
|
||||
if (window.location.protocol === 'http:' && window.location.hostname !== 'localhost') {
|
||||
errorMessage = t(ERROR_MESSAGES.COPY_HTTPS_REQUIRED);
|
||||
} else if (!navigator.clipboard && !document.execCommand) {
|
||||
errorMessage = t(ERROR_MESSAGES.BROWSER_NOT_SUPPORTED);
|
||||
}
|
||||
|
||||
Toast.error({
|
||||
content: errorMessage,
|
||||
duration: 4,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
copyToClipboard(textToCopy);
|
||||
}, [t]);
|
||||
|
||||
// 重新生成消息
|
||||
const handleMessageReset = useCallback((targetMessage) => {
|
||||
setMessage(prevMessages => {
|
||||
const messageIndex = prevMessages.findIndex(msg => msg.id === targetMessage.id);
|
||||
if (messageIndex === -1) return prevMessages;
|
||||
|
||||
if (targetMessage.role === 'user') {
|
||||
const newMessages = prevMessages.slice(0, messageIndex);
|
||||
const contentToSend = getTextContent(targetMessage);
|
||||
|
||||
setTimeout(() => {
|
||||
onMessageSend(contentToSend);
|
||||
}, 100);
|
||||
|
||||
return newMessages;
|
||||
} else if (targetMessage.role === 'assistant') {
|
||||
let userMessageIndex = messageIndex - 1;
|
||||
while (userMessageIndex >= 0 && prevMessages[userMessageIndex].role !== 'user') {
|
||||
userMessageIndex--;
|
||||
}
|
||||
|
||||
if (userMessageIndex >= 0) {
|
||||
const userMessage = prevMessages[userMessageIndex];
|
||||
const newMessages = prevMessages.slice(0, userMessageIndex);
|
||||
const contentToSend = getTextContent(userMessage);
|
||||
|
||||
setTimeout(() => {
|
||||
onMessageSend(contentToSend);
|
||||
}, 100);
|
||||
|
||||
return newMessages;
|
||||
}
|
||||
}
|
||||
|
||||
return prevMessages;
|
||||
});
|
||||
}, [setMessage, onMessageSend]);
|
||||
|
||||
// 删除消息
|
||||
const handleMessageDelete = useCallback((targetMessage) => {
|
||||
Modal.confirm({
|
||||
title: t('确认删除'),
|
||||
content: t('确定要删除这条消息吗？'),
|
||||
okText: t('确定'),
|
||||
cancelText: t('取消'),
|
||||
okButtonProps: {
|
||||
type: 'danger',
|
||||
},
|
||||
onOk: () => {
|
||||
setMessage(prevMessages => {
|
||||
const messageIndex = prevMessages.findIndex(msg => msg.id === targetMessage.id);
|
||||
if (messageIndex === -1) return prevMessages;
|
||||
|
||||
if (targetMessage.role === 'user' && messageIndex < prevMessages.length - 1) {
|
||||
const nextMessage = prevMessages[messageIndex + 1];
|
||||
if (nextMessage.role === 'assistant') {
|
||||
Toast.success({
|
||||
content: t('已删除消息及其回复'),
|
||||
duration: 2,
|
||||
});
|
||||
return prevMessages.filter((_, index) =>
|
||||
index !== messageIndex && index !== messageIndex + 1
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Toast.success({
|
||||
content: t('消息已删除'),
|
||||
duration: 2,
|
||||
});
|
||||
return prevMessages.filter(msg => msg.id !== targetMessage.id);
|
||||
});
|
||||
},
|
||||
});
|
||||
}, [setMessage, t]);
|
||||
|
||||
// 切换角色
|
||||
const handleRoleToggle = useCallback((targetMessage) => {
|
||||
setMessage(prevMessages => {
|
||||
return prevMessages.map(msg => {
|
||||
if (msg.id === targetMessage.id &&
|
||||
(msg.role === 'assistant' || msg.role === 'system')) {
|
||||
const newRole = msg.role === 'assistant' ? 'system' : 'assistant';
|
||||
Toast.success({
|
||||
content: t(`已切换为${newRole === 'system' ? 'System' : 'Assistant'}角色`),
|
||||
duration: 2,
|
||||
});
|
||||
return { ...msg, role: newRole };
|
||||
}
|
||||
return msg;
|
||||
});
|
||||
});
|
||||
}, [setMessage, t]);
|
||||
|
||||
return {
|
||||
handleMessageCopy,
|
||||
handleMessageReset,
|
||||
handleMessageDelete,
|
||||
handleRoleToggle,
|
||||
};
|
||||
};
|
||||
155
web/src/hooks/usePlaygroundState.js
Normal file
155
web/src/hooks/usePlaygroundState.js
Normal file
@@ -0,0 +1,155 @@
|
||||
import { useState, useCallback, useRef } from 'react';
|
||||
import { DEFAULT_MESSAGES, DEFAULT_CONFIG, DEBUG_TABS } from '../utils/constants';
|
||||
import { loadConfig, saveConfig } from '../components/playground/configStorage';
|
||||
|
||||
export const usePlaygroundState = () => {
|
||||
const savedConfig = loadConfig();
|
||||
|
||||
// 基础配置状态
|
||||
const [inputs, setInputs] = useState(savedConfig.inputs || DEFAULT_CONFIG.inputs);
|
||||
const [parameterEnabled, setParameterEnabled] = useState(
|
||||
savedConfig.parameterEnabled || DEFAULT_CONFIG.parameterEnabled
|
||||
);
|
||||
const [systemPrompt, setSystemPrompt] = useState(
|
||||
savedConfig.systemPrompt || DEFAULT_CONFIG.systemPrompt
|
||||
);
|
||||
const [showDebugPanel, setShowDebugPanel] = useState(
|
||||
savedConfig.showDebugPanel || DEFAULT_CONFIG.showDebugPanel
|
||||
);
|
||||
|
||||
// UI状态
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [models, setModels] = useState([]);
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [status, setStatus] = useState({});
|
||||
|
||||
// 消息相关状态
|
||||
const [message, setMessage] = useState(DEFAULT_MESSAGES);
|
||||
|
||||
// 调试状态
|
||||
const [debugData, setDebugData] = useState({
|
||||
request: null,
|
||||
response: null,
|
||||
timestamp: null,
|
||||
previewRequest: null,
|
||||
previewTimestamp: null
|
||||
});
|
||||
const [activeDebugTab, setActiveDebugTab] = useState(DEBUG_TABS.PREVIEW);
|
||||
const [previewPayload, setPreviewPayload] = useState(null);
|
||||
|
||||
// 编辑状态
|
||||
const [editingMessageId, setEditingMessageId] = useState(null);
|
||||
const [editValue, setEditValue] = useState('');
|
||||
|
||||
// Refs
|
||||
const sseSourceRef = useRef(null);
|
||||
const chatRef = useRef(null);
|
||||
const saveConfigTimeoutRef = useRef(null);
|
||||
|
||||
// 配置更新函数
|
||||
const handleInputChange = useCallback((name, value) => {
|
||||
setInputs(prev => ({ ...prev, [name]: value }));
|
||||
}, []);
|
||||
|
||||
const handleParameterToggle = useCallback((paramName) => {
|
||||
setParameterEnabled(prev => ({
|
||||
...prev,
|
||||
[paramName]: !prev[paramName]
|
||||
}));
|
||||
}, []);
|
||||
|
||||
// 配置保存
|
||||
const debouncedSaveConfig = useCallback(() => {
|
||||
if (saveConfigTimeoutRef.current) {
|
||||
clearTimeout(saveConfigTimeoutRef.current);
|
||||
}
|
||||
|
||||
saveConfigTimeoutRef.current = setTimeout(() => {
|
||||
const configToSave = {
|
||||
inputs,
|
||||
parameterEnabled,
|
||||
systemPrompt,
|
||||
showDebugPanel,
|
||||
};
|
||||
saveConfig(configToSave);
|
||||
}, 1000);
|
||||
}, [inputs, parameterEnabled, systemPrompt, showDebugPanel]);
|
||||
|
||||
// 配置导入/重置
|
||||
const handleConfigImport = useCallback((importedConfig) => {
|
||||
if (importedConfig.inputs) {
|
||||
setInputs(prev => ({ ...prev, ...importedConfig.inputs }));
|
||||
}
|
||||
if (importedConfig.parameterEnabled) {
|
||||
setParameterEnabled(prev => ({ ...prev, ...importedConfig.parameterEnabled }));
|
||||
}
|
||||
if (importedConfig.systemPrompt) {
|
||||
setSystemPrompt(importedConfig.systemPrompt);
|
||||
}
|
||||
if (typeof importedConfig.showDebugPanel === 'boolean') {
|
||||
setShowDebugPanel(importedConfig.showDebugPanel);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleConfigReset = useCallback(() => {
|
||||
const defaultConfig = loadConfig();
|
||||
setInputs(defaultConfig.inputs);
|
||||
setParameterEnabled(defaultConfig.parameterEnabled);
|
||||
setSystemPrompt(defaultConfig.systemPrompt);
|
||||
setShowDebugPanel(defaultConfig.showDebugPanel);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
// 配置状态
|
||||
inputs,
|
||||
parameterEnabled,
|
||||
systemPrompt,
|
||||
showDebugPanel,
|
||||
|
||||
// UI状态
|
||||
showSettings,
|
||||
models,
|
||||
groups,
|
||||
status,
|
||||
|
||||
// 消息状态
|
||||
message,
|
||||
|
||||
// 调试状态
|
||||
debugData,
|
||||
activeDebugTab,
|
||||
previewPayload,
|
||||
|
||||
// 编辑状态
|
||||
editingMessageId,
|
||||
editValue,
|
||||
|
||||
// Refs
|
||||
sseSourceRef,
|
||||
chatRef,
|
||||
saveConfigTimeoutRef,
|
||||
|
||||
// 更新函数
|
||||
setInputs,
|
||||
setParameterEnabled,
|
||||
setSystemPrompt,
|
||||
setShowDebugPanel,
|
||||
setShowSettings,
|
||||
setModels,
|
||||
setGroups,
|
||||
setStatus,
|
||||
setMessage,
|
||||
setDebugData,
|
||||
setActiveDebugTab,
|
||||
setPreviewPayload,
|
||||
setEditingMessageId,
|
||||
setEditValue,
|
||||
|
||||
// 处理函数
|
||||
handleInputChange,
|
||||
handleParameterToggle,
|
||||
debouncedSaveConfig,
|
||||
handleConfigImport,
|
||||
handleConfigReset,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user