77157da8fc
- 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
56 lines
2.5 KiB
JavaScript
56 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import MessageContent from './MessageContent';
|
|
import MessageActions from './MessageActions';
|
|
import SettingsPanel from './SettingsPanel';
|
|
import DebugPanel from './DebugPanel';
|
|
|
|
// 优化的消息内容组件
|
|
export const OptimizedMessageContent = React.memo(MessageContent, (prevProps, nextProps) => {
|
|
// 只有这些属性变化时才重新渲染
|
|
return (
|
|
prevProps.message.id === nextProps.message.id &&
|
|
prevProps.message.content === nextProps.message.content &&
|
|
prevProps.message.status === nextProps.message.status &&
|
|
prevProps.message.isReasoningExpanded === nextProps.message.isReasoningExpanded &&
|
|
prevProps.isEditing === nextProps.isEditing &&
|
|
prevProps.editValue === nextProps.editValue &&
|
|
prevProps.styleState.isMobile === nextProps.styleState.isMobile
|
|
);
|
|
});
|
|
|
|
// 优化的消息操作组件
|
|
export const OptimizedMessageActions = React.memo(MessageActions, (prevProps, nextProps) => {
|
|
return (
|
|
prevProps.message.id === nextProps.message.id &&
|
|
prevProps.isAnyMessageGenerating === nextProps.isAnyMessageGenerating &&
|
|
prevProps.isEditing === nextProps.isEditing
|
|
);
|
|
});
|
|
|
|
// 优化的设置面板组件
|
|
export const OptimizedSettingsPanel = React.memo(SettingsPanel, (prevProps, nextProps) => {
|
|
return (
|
|
JSON.stringify(prevProps.inputs) === JSON.stringify(nextProps.inputs) &&
|
|
JSON.stringify(prevProps.parameterEnabled) === JSON.stringify(nextProps.parameterEnabled) &&
|
|
JSON.stringify(prevProps.models) === JSON.stringify(nextProps.models) &&
|
|
JSON.stringify(prevProps.groups) === JSON.stringify(nextProps.groups) &&
|
|
prevProps.customRequestMode === nextProps.customRequestMode &&
|
|
prevProps.customRequestBody === nextProps.customRequestBody &&
|
|
prevProps.showDebugPanel === nextProps.showDebugPanel &&
|
|
prevProps.showSettings === nextProps.showSettings &&
|
|
JSON.stringify(prevProps.previewPayload) === JSON.stringify(nextProps.previewPayload) &&
|
|
JSON.stringify(prevProps.messages) === JSON.stringify(nextProps.messages)
|
|
);
|
|
});
|
|
|
|
// 优化的调试面板组件
|
|
export const OptimizedDebugPanel = React.memo(DebugPanel, (prevProps, nextProps) => {
|
|
return (
|
|
prevProps.show === nextProps.show &&
|
|
prevProps.activeTab === nextProps.activeTab &&
|
|
JSON.stringify(prevProps.debugData) === JSON.stringify(nextProps.debugData) &&
|
|
JSON.stringify(prevProps.previewPayload) === JSON.stringify(nextProps.previewPayload) &&
|
|
prevProps.customRequestMode === nextProps.customRequestMode &&
|
|
prevProps.showDebugPanel === nextProps.showDebugPanel
|
|
);
|
|
});
|