mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-04-19 17:48:37 +00:00
- Add CustomRequestEditor component with JSON validation and real-time formatting - Implement bidirectional sync between chat messages and custom request body - Add persistent local storage for chat messages (separate from config) - Remove redundant System Prompt field in custom mode - Refactor configuration storage to separate messages and settings New Features: • Custom request body mode with JSON editor and syntax highlighting • Real-time bidirectional synchronization between chat UI and custom request body • Persistent message storage that survives page refresh • Enhanced configuration export/import including message data • Improved parameter organization with collapsible sections Technical Changes: • Add loadMessages/saveMessages functions in configStorage • Update usePlaygroundState hook to handle message persistence • Refactor SettingsPanel to remove System Prompt in custom mode • Add STORAGE_KEYS constants for better storage key management • Implement debounced auto-save for both config and messages • Add hash-based change detection to prevent unnecessary updates UI/UX Improvements: • Disabled state styling for parameters in custom mode • Warning banners and visual feedback for mode switching • Mobile-responsive design for custom request editor • Consistent styling with existing design system
93 lines
3.1 KiB
JavaScript
93 lines
3.1 KiB
JavaScript
import { useCallback, useState } from 'react';
|
||
import { Toast, Modal } from '@douyinfe/semi-ui';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { getTextContent, buildApiPayload, createLoadingAssistantMessage } from '../utils/messageUtils';
|
||
import { MESSAGE_ROLES } from '../utils/constants';
|
||
|
||
export const useMessageEdit = (
|
||
setMessage,
|
||
inputs,
|
||
parameterEnabled,
|
||
sendRequest
|
||
) => {
|
||
const { t } = useTranslation();
|
||
const [editingMessageId, setEditingMessageId] = useState(null);
|
||
const [editValue, setEditValue] = useState('');
|
||
|
||
const handleMessageEdit = useCallback((targetMessage) => {
|
||
const editableContent = getTextContent(targetMessage);
|
||
setEditingMessageId(targetMessage.id);
|
||
setEditValue(editableContent);
|
||
}, []);
|
||
|
||
const handleEditSave = useCallback(() => {
|
||
if (!editingMessageId || !editValue.trim()) return;
|
||
|
||
setMessage(prevMessages => {
|
||
const messageIndex = prevMessages.findIndex(msg => msg.id === editingMessageId);
|
||
if (messageIndex === -1) return prevMessages;
|
||
|
||
const targetMessage = prevMessages[messageIndex];
|
||
let newContent;
|
||
|
||
if (Array.isArray(targetMessage.content)) {
|
||
newContent = targetMessage.content.map(item =>
|
||
item.type === 'text' ? { ...item, text: editValue.trim() } : item
|
||
);
|
||
} else {
|
||
newContent = editValue.trim();
|
||
}
|
||
|
||
const updatedMessages = prevMessages.map(msg =>
|
||
msg.id === editingMessageId ? { ...msg, content: newContent } : msg
|
||
);
|
||
|
||
// 处理用户消息编辑后的重新生成
|
||
if (targetMessage.role === MESSAGE_ROLES.USER) {
|
||
const hasSubsequentAssistantReply = messageIndex < prevMessages.length - 1 &&
|
||
prevMessages[messageIndex + 1].role === MESSAGE_ROLES.ASSISTANT;
|
||
|
||
if (hasSubsequentAssistantReply) {
|
||
Modal.confirm({
|
||
title: t('消息已编辑'),
|
||
content: t('检测到该消息后有AI回复,是否删除后续回复并重新生成?'),
|
||
okText: t('重新生成'),
|
||
cancelText: t('仅保存'),
|
||
onOk: () => {
|
||
const messagesUntilUser = updatedMessages.slice(0, messageIndex + 1);
|
||
setMessage(messagesUntilUser);
|
||
|
||
setTimeout(() => {
|
||
const payload = buildApiPayload(messagesUntilUser, null, inputs, parameterEnabled);
|
||
setMessage(prevMsg => [...prevMsg, createLoadingAssistantMessage()]);
|
||
sendRequest(payload, inputs.stream);
|
||
}, 100);
|
||
},
|
||
onCancel: () => setMessage(updatedMessages)
|
||
});
|
||
return prevMessages;
|
||
}
|
||
}
|
||
|
||
return updatedMessages;
|
||
});
|
||
|
||
setEditingMessageId(null);
|
||
setEditValue('');
|
||
Toast.success({ content: t('消息已更新'), duration: 2 });
|
||
}, [editingMessageId, editValue, t, inputs, parameterEnabled, sendRequest, setMessage]);
|
||
|
||
const handleEditCancel = useCallback(() => {
|
||
setEditingMessageId(null);
|
||
setEditValue('');
|
||
}, []);
|
||
|
||
return {
|
||
editingMessageId,
|
||
editValue,
|
||
setEditValue,
|
||
handleMessageEdit,
|
||
handleEditSave,
|
||
handleEditCancel
|
||
};
|
||
};
|