Remove the 5-image upload restriction in playground and enhance UI consistency
Changes:
- Remove 5-image limit constraint from ImageUrlInput component
- Update hint text to remove "maximum 5 images" references
- Add custom scrollbar styling for image list to match site-wide design
- Apply consistent thin scrollbar (6px width) with Semi Design color variables
- Maintain hover effects and rounded corners for better UX
Breaking Changes: None
Files modified:
- web/src/components/playground/ImageUrlInput.js
- web/src/index.css
This change allows users to upload unlimited images in playground mode while
maintaining visual consistency across the application's scrollable elements.
- Move reset settings button to the same row as the last modified timestamp
- Use flexbox layout with justify-between to align timestamp left and reset button right
- Keep export and import buttons on the separate row below
- Improve space utilization and visual hierarchy in the settings panel
This change enhances the user interface by creating a more compact and intuitive layout
for the configuration management controls in the playground component.
Hide y-axis scrollbars to provide a cleaner UI experience while maintaining
scroll functionality through mouse wheel and keyboard navigation.
Changes include:
- Hide scrollbars in CustomRequestEditor TextArea component
- Hide scrollbars in chat container and all related chat components
- Hide scrollbars in thinking content areas
- Add cross-browser compatibility for scrollbar hiding
- Maintain scroll functionality while improving visual aesthetics
Components affected:
- CustomRequestEditor.js: Added custom-request-textarea class
- index.css: Updated scrollbar styles for chat, thinking, and editor areas
The interface now provides a more streamlined appearance consistent with
modern UI design patterns while preserving all interactive capabilities.
Fix role toggle functionality where switching message roles (assistant/system)
did not update the UI immediately and required page refresh to see changes.
Changes:
- Add message.role comparison in OptimizedMessageContent memo function
- Add message.role comparison in OptimizedMessageActions memo function
The issue was caused by React.memo optimization that wasn't tracking role
changes, preventing re-renders when only the message role property changed.
Now role switches are reflected immediately in both message content display
and action button states.
Fixes: Role switching requires page refresh to display correctly
- 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
- Replace gradient background with purple theme matching EditChannel cards
- Add decorative circle elements for visual consistency
- Update all icons and text to white color for better contrast
- Apply inline styles to ensure proper color rendering
- Maintain hover effects with adjusted opacity values
This change creates visual consistency across the application by adopting
the same modern gradient design pattern used in EditChannel header cards.
- Replace pink-purple gradient with indigo-purple gradient to match PersonalSetting.js color scheme
- Update icon container gradient from purple-indigo to indigo-purple for consistency
- Enhance shadow effects from shadow-sm to shadow-lg to align with card design standards
- Improve hover effects with refined opacity and smoother transitions (duration-300)
- Increase content background opacity from 70% to 80% for better readability
- Update scrollbar color to purple theme (rgba(139, 92, 246, 0.3))
- Standardize border radius to rounded-xl for unified styling
- Apply consistent styling to "thinking in progress" state with matching gradient background
This change ensures visual consistency across the application by adopting the same
purple-blue color palette used in PersonalSetting component, creating a more
cohesive user experience.
- Fix thinking content area scroll functionality in MessageContent.js
* Replace max-h-50 with explicit maxHeight style (200px)
* Add thinking-content-scroll CSS class for proper scrollbar styling
* Ensure scrollbars are visible when content exceeds container height
- Add thinking-content-scroll CSS class in index.css
* Define webkit scrollbar styles with proper dimensions (6px)
* Add hover effects and cross-browser compatibility
* Support both webkit and Firefox scrollbar styling
- Remove unused CSS classes to improve code cleanliness
* Remove .hide-on-mobile class (no usage found in codebase)
* Remove .debug-code class (no longer needed)
- Improve user experience for viewing lengthy thinking content
* Users can now properly scroll through AI reasoning content
* Maintains content visibility with appropriate height constraints
Resolves issue where thinking section had max height but no scrolling capability.
- Add intelligent content truncation for payloads over 50K characters
- Implement tiered performance handling based on content size
- Use useMemo and useCallback for memory optimization and caching
- Add progressive loading with async processing for very large content
- Introduce performance warning indicators and user feedback
- Create expand/collapse functionality with smooth animations
- Skip syntax highlighting for extremely large content (>100K)
- Add loading states and debounce handling for better UX
- Display remaining content size indicators (e.g., +15K)
- Implement chunk-based processing to prevent UI blocking
This optimization ensures that even multi-megabyte JSON responses
won't cause page freezing or performance degradation in the debug
panel, while maintaining full functionality for regular-sized content.
- Change response content language from 'javascript' to 'json' for proper highlighting
- Improve automatic JSON detection to handle both objects and arrays
- Add intelligent content type detection based on string patterns
- Include development environment debug logging for troubleshooting
- Ensure all API responses display with correct JSON syntax coloring
This fix resolves the issue where API response data was not properly
syntax highlighted, ensuring consistent JSON formatting across all
debug panel tabs (preview, request, and response).
- Create new CodeViewer component with VS Code dark theme styling
- Implement custom JSON syntax highlighting with proper color coding
- Add improved copy functionality with hover effects and user feedback
- Refactor DebugPanel to use the new CodeViewer component
- Apply dark background (#1e1e1e) with syntax colors matching VS Code
- Enhance UX with floating copy button and responsive design
- Support automatic JSON formatting and parsing
- Maintain compatibility with existing Semi Design components
The debug panel now displays preview requests, actual requests, and
responses in a professional code editor style, improving readability
and developer experience in the playground interface.
- Replace Semi UI's MarkdownRender with react-markdown library for better performance and features
- Add comprehensive markdown rendering support including:
* Math formulas with KaTeX
* Code syntax highlighting with rehype-highlight
* Mermaid diagrams support
* GitHub Flavored Markdown (tables, task lists, etc.)
* HTML preview for code blocks
* Media file support (audio/video)
- Create new MarkdownRenderer component with enhanced features:
* Copy code button with hover effects
* Code folding for long code blocks
* Responsive design for mobile devices
- Add white text styling for user messages to improve readability on blue backgrounds
- Update all components using markdown rendering:
* MessageContent.js - playground chat messages
* About/index.js - about page content
* Home/index.js - home page content
* NoticeModal.js - system notice modal
* OtherSetting.js - settings page
- Install new dependencies: react-markdown, remark-math, remark-breaks, remark-gfm,
rehype-katex, rehype-highlight, katex, mermaid, use-debounce, clsx
- Add comprehensive CSS styles in markdown.css for better theming and user experience
- Remove unused imports and optimize component imports
Breaking changes: None - maintains backward compatibility with existing markdown content
Previously, the "thinking" indicator and loading icon would only disappear
after the entire message generation was complete, which created a poor user
experience where users had to wait for the full response to see that the
reasoning phase had finished.
Changes made:
- Add `isThinkingComplete` field to independently track reasoning state
- Update streaming logic to mark thinking complete when content starts flowing
- Detect closed `<think>` tags to mark reasoning completion
- Modify MessageContent component to use independent thinking state
- Update "思考中..." text and loading icon display conditions
- Ensure thinking state is properly set in all completion scenarios
(non-stream, errors, manual stop)
Now the thinking section immediately shows as complete when reasoning ends,
rather than waiting for the entire message to finish, providing much better
real-time feedback to users.
Files modified:
- web/src/hooks/useApiRequest.js
- web/src/components/playground/MessageContent.js
- web/src/utils/messageUtils.js
Update tooltip messages from "正在生成中，请稍候..." to "操作暂时被禁用"
in MessageActions component to better reflect that actions can be disabled
during both message generation and editing states.
Changes:
- Replace specific "generating" message with generic "temporarily disabled" message
- Applies to retry, edit, role toggle, and delete action tooltips
- Provides more accurate user feedback for disabled states
Files modified:
- web/src/components/playground/MessageActions.js
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.
- Add role toggle button in MessageActions component for assistant/system messages
- Implement handleRoleToggle function in Playground component to switch between assistant and system roles
- Add visual distinction for system messages with orange badge indicator
- Update roleInfo configuration to use consistent avatars for assistant and system roles
- Add proper tooltip texts and visual feedback for role switching
- Ensure role toggle is disabled during message generation to prevent conflicts
This feature allows users to easily switch message roles between assistant and system,
providing better control over conversation flow and message categorization in the playground interface.
- Add real-time request body preview that updates when parameters change
- Implement pre-constructed payload generation for debugging without sending requests
- Add support for image URLs in preview payload construction
- Upgrade debug panel to card-style tabs with custom arrow navigation
- Add collapsible functionality and dropdown menu for tab selection
- Integrate image-enabled messages with proper multimodal content structure
- Refactor tab state management with internal useState and external sync
- Remove redundant status labels and clean up component structure
- Set preview tab as default active tab for better UX
- Maintain backward compatibility with existing debug functionality
This enhancement significantly improves the debugging experience by allowing
developers to see exactly what request will be sent before actually sending it,
with real-time updates as they adjust parameters, models, or image settings.
Add a toggle switch to enable/disable image uploads in the playground,
with automatic disabling after message sending to prevent accidental
image inclusion in subsequent messages.
Changes:
- Add `imageEnabled` field to default configuration with false as default
- Enhance ImageUrlInput component with enable/disable toggle switch
- Update UI to show disabled state with opacity and color changes
- Modify message sending logic to only include images when enabled
- Implement auto-disable functionality after message is sent
- Update SettingsPanel to pass through new imageEnabled props
- Maintain backward compatibility with existing configurations
User Experience:
- Images are disabled by default for privacy and intentional usage
- Users must explicitly enable image uploads before adding URLs
- After sending a message with images, the feature auto-disables
- Clear visual feedback shows current enabled/disabled state
- Manual control allows users to re-enable when needed
This improves user control over multimodal conversations and prevents
unintentional image sharing in follow-up messages.
Fix TypeError when processing multimodal messages containing both text and images.
The error "textContent.text.trim is not a function" occurred when textContent
was null or textContent.text was not a string type.
Changes:
- Add comprehensive type checking for textContent.text access
- Implement getTextContent() utility function for unified content extraction
- Enhance error handling to support multimodal content display
- Fix message copy functionality to handle array-format content
- Improve message reset functionality to extract text content for retry
- Add user-friendly warnings when copying messages without text content
Technical improvements:
- Validate textContent existence and text property type before calling trim()
- Extract text content from multimodal messages for operations like copy/retry
- Maintain backward compatibility with string-format content
- Preserve all existing functionality while adding robust error handling
Fixes issues with:
- Image + text message processing
- Message copying from multimodal content
- Message retry with image attachments
- Error display for complex message formats
This ensures the playground component handles multimodal content gracefully
without breaking existing text-only message functionality.
