phsl / new-api

Fix ReferenceError caused by undefined `isValidMessage` and `MESSAGE_ROLES`
in the buildApiPayload function within api.js.

Changes:
- Add missing `isValidMessage` import from utils.js
- Add missing `MESSAGE_ROLES` import from playground constants
- Consolidate duplicate `formatMessageForAPI` import
- Clean up import statements organization

Resolves: ReferenceError: isValidMessage is not defined at buildApiPayload (api.js:39:13)

- Rename files to follow camelCase naming convention:
  • auth-header.js → authUtils.js
  • other.js → logUtils.js
  • rehypeSplitWordsIntoSpans.js → textAnimationUtils.js

- Update import paths in affected components:
  • Update exports in helpers/index.js
  • Fix import in LogsTable.js for logUtils
  • Fix import in MarkdownRenderer.js for textAnimationUtils

- Remove old files after successful migration

- Improve file naming clarity:
  • authUtils.js better describes authentication utilities
  • logUtils.js clearly indicates log processing functions
  • textAnimationUtils.js concisely describes text animation functionality

This refactoring enhances code maintainability and follows consistent naming patterns throughout the helpers directory.

- Remove automatic insertion of "你好" placeholder message in preview payload
- Keep messages array empty when no user messages exist in conversation
- Only process image handling logic when user messages are present
- Ensure preview request body accurately reflects current conversation state

Previously, the preview panel would automatically inject a default "你好"
user message when the conversation was empty, which could be misleading.
This change ensures the preview payload shows exactly what would be sent
based on the current conversation state, improving accuracy and user
understanding of the actual API request structure.

- Add clear context button positioned on the left side of input area
- Create symmetric layout with clear button (left) and send button (right)
- Standardize both buttons to 32x32px size for consistent appearance
- Apply distinct styling: gray background for clear (red on hover), purple for send
- Add smooth transition animations for better user experience
- Align buttons vertically centered for improved visual balance

The clear conversation button provides quick access to context clearing
functionality directly from the input area, matching the design patterns
shown in Semi Design documentation and improving overall user workflow.

- Add onMessageReset reference comparison to OptimizedMessageActions memo
- Force component re-render when model selection changes
- Prevent stale closure issue in retry functionality
- Ensure first retry attempt uses newly selected model

Previously, when changing the model selection, the retry button would
still use the previous model due to React memo optimization preventing
re-renders. By comparing the onMessageReset callback reference, the
component now properly updates when the model changes, ensuring the
retry functionality immediately uses the currently selected model.

- Store editing message object reference using useRef to avoid ID conflicts
- Use object reference comparison first before falling back to ID matching
- Apply fix to both save and cancel operations in message editing
- Clear reference after edit completion to prevent stale object issues

Previously, when editing imported messages that contained duplicate IDs,
the findIndex operation would match the first occurrence rather than the
intended message, causing conversation history truncation when saving
edits. This change stores and uses object references for accurate message
identification during the editing process.

- Use object reference comparison first before falling back to ID matching
- Prevent incorrect message index lookup when duplicate IDs exist
- Apply fix to both handleMessageReset and handleMessageDelete functions
- Maintain backward compatibility with ID-based message identification

Previously, when importing messages that contained duplicate IDs, the
findIndex operation would match the first occurrence rather than the
intended message, causing history truncation on retry. This change uses
object reference comparison as the primary method, ensuring accurate
message identification and preserving conversation history.

- Extend handleMessageReset condition to include 'system' role messages
- Allow system messages to trigger regeneration like assistant messages
- Fix disabled retry button issue when message role is switched to system
- Maintain consistent user experience across different message roles

Previously, when an assistant message was switched to system role,
the retry button became non-functional. This change ensures that
system messages can be regenerated by finding the previous user
message and resending it, maintaining feature parity with assistant
messages.

- Add multi-dimensional animation with translateY, scale, and blur transforms
- Introduce 60% keyframe for smoother animation progression
- Extend animation duration from 0.4s to 0.6s for better visual impact
- Apply cubic-bezier(0.22, 1, 0.36, 1) easing for more natural motion
- Add will-change property to optimize rendering performance
- Improve perceived responsiveness during AI response streaming

The enhanced animation now provides a more polished and engaging user
experience when AI responses are being streamed, with text appearing
smoothly from bottom-up with subtle scaling and blur effects.

**Problem 1: Chat interface not refreshing when resetting imported messages**
- The "reset messages simultaneously" option during config import failed to
  update the chat interface properly
- Normal conversation resets worked correctly

**Problem 2: Messages stuck in loading state after page refresh**
- When AI was generating a response and user refreshed the page, the message
  remained in loading state indefinitely
- Stop button had no effect on these orphaned loading messages

**Changes Made:**

1. **Fixed config reset message refresh** (`usePlaygroundState.js`):
   ```javascript
   // Clear messages first, then set defaults to force component re-render
   setMessage([]);
   setTimeout(() => {
     setMessage(DEFAULT_MESSAGES);
   }, 0);
   ```

2. **Enhanced stop generator functionality** (`useApiRequest.js`):
   ```javascript
   // Handle orphaned loading messages even without active SSE connection
   const onStopGenerator = useCallback(() => {
     // Close active SSE if exists
     if (sseSourceRef.current) {
       sseSourceRef.current.close();
       sseSourceRef.current = null;
     }

     // Always attempt to complete any loading/incomplete messages
     // ... processing logic
   }, [setMessage, applyAutoCollapseLogic, saveMessages]);
   ```

3. **Added automatic message state recovery** (`usePlaygroundState.js`):
   ```javascript
   // Auto-fix loading/incomplete messages on page load
   useEffect(() => {
     const lastMsg = message[message.length - 1];
     if (lastMsg.status === MESSAGE_STATUS.LOADING ||
         lastMsg.status === MESSAGE_STATUS.INCOMPLETE) {
       // Process incomplete content and mark as complete
       // Save corrected message state
     }
   }, []);
   ```

**Root Cause:**
- Config reset: Direct state assignment didn't trigger component refresh
- Loading state: No recovery mechanism for interrupted SSE connections after refresh

**Impact:**
- ✅ Config reset now properly refreshes chat interface
- ✅ Stop button works on orphaned loading messages
- ✅ Page refresh automatically recovers incomplete messages
- ✅ No more permanently stuck loading states

When using the "reset messages simultaneously" option during config import,
the conversation messages in the chat interface were not being properly reset,
while normal conversation resets worked correctly.

**Changes:**
- Modified `handleConfigReset` in `usePlaygroundState.js` to clear messages
  before setting default examples
- Added asynchronous message update to force Chat component re-render
- Ensures immediate UI refresh when resetting imported conversation data

**Root Cause:**
The direct assignment to DEFAULT_MESSAGES didn't trigger a complete
component refresh, causing the chat interface to display stale data.

**Solution:**
```javascript
// Before
setMessage(DEFAULT_MESSAGES);

// After
setMessage([]);
setTimeout(() => {
  setMessage(DEFAULT_MESSAGES);
}, 0);
```

This two-step approach forces the Chat component to unmount and remount
with fresh data, resolving the display inconsistency.

feat: 增加对Gemini MimeType类型的验证

fix: 完善Gemini渠道对tools中additionalProperties的清理

Fix: The edit interface is not billed (usage-based pricing).

- Modify saveMessagesImmediately to accept messages parameter
- Pass updated message list to all save calls instead of relying on closure
- Ensure complete message history is saved including the last message
- Fix timing issue where old message state was being saved

This fixes the issue where the last conversation was not being persisted to localStorage.

- Move useEffect hooks before conditional returns in MessageContent and ThinkingContent
- Ensure hooks are called in the same order every render
- Fix "Rendered fewer hooks than expected" error when API returns non-200 status
- Follow React hooks rules: only call hooks at the top level

This prevents the entire page from crashing when API requests fail.

- Refactor message saving strategy from automatic to manual saving
  - Save messages only on key operations: send, complete, edit, delete, role toggle, clear
  - Prevent frequent localStorage writes during streaming responses

- Remove excessive console logging
  - Remove all console.log statements from save/load operations
  - Clean up debug logs to reduce console noise

- Optimize initial state loading with lazy initialization
  - Replace useRef with useState lazy initialization for config and messages
  - Ensure loadConfig and loadMessages are called only once on mount
  - Prevent redundant localStorage reads during re-renders

- Update hooks to support new save strategy
  - Pass saveMessages callback through component hierarchy
  - Add saveMessagesImmediately to relevant hooks (useApiRequest, useMessageActions, useMessageEdit)
  - Trigger saves at appropriate lifecycle points

This significantly improves performance by reducing localStorage I/O operations
from continuous writes during streaming to discrete saves at meaningful points.

Summary
This commit addresses two critical issues affecting the real-time chat experience in the Playground:

1. Optimized re-rendering of reasoning content
   • Added `reasoningContent` to the comparison function of `OptimizedMessageContent` (`web/src/components/playground/OptimizedComponents.js`).
   • Ensures the component re-renders while reasoning text streams, resolving the bug where only the first characters (“好,”) were shown until the stream finished.

2. Defensive checks for SSE message updates
   • Added early-return guards in `streamMessageUpdate` (`web/src/hooks/useApiRequest.js`).
   • Skips updates when `lastMessage` is undefined or the last message isn’t from the assistant, preventing `TypeError: Cannot read properties of undefined (reading 'status')` during rapid SSE responses.

Impact
• Real-time reasoning content now appears progressively, enhancing user feedback.
• Eliminates runtime crashes caused by undefined message references, improving overall stability.

- Remove duplicate thinking content rendering logic from MessageContent component
- Import and utilize ThinkingContent component for consistent thinking display
- Clean up unused icon imports (ChevronRight, ChevronUp, Brain)
- Consolidate "思考中..." header text logic into single component
- Reduce code duplication by ~70 lines while maintaining all functionality
- Improve component separation of concerns and maintainability

The MessageContent component now delegates thinking content rendering to the
dedicated ThinkingContent component, eliminating the previously duplicated
UI logic and state management for thinking processes.

- Add consistent title section with gradient icon and heading
- Include close button in mobile view for better UX consistency
- Standardize mobile and desktop ConfigManager styling
- Adjust layout structure and padding for visual alignment
- Use Settings icon with purple-to-pink gradient to match design system

This change ensures both SettingsPanel and DebugPanel have identical
header layouts and interaction patterns across all screen sizes.

## Breaking Changes
- Remove backward compatibility layer for old action types
- StyleContext is no longer exported, use useStyle hook instead

## Major Improvements
- **Architecture**: Replace useState with useReducer for complex state management
- **Performance**: Add debounced resize handling and batch updates via BATCH_UPDATE action
- **DX**: Export useStyle hook and styleActions for type-safe usage
- **Memory**: Use useMemo to cache context value and prevent unnecessary re-renders

## Bug Fixes
- **UI**: Eliminate padding flicker when navigating to /console/chat* and /console/playground routes
- **Logic**: Remove redundant localStorage operations and state synchronization

## Implementation Details
- Define ACTION_TYPES and ROUTE_PATTERNS constants for better maintainability
- Add comprehensive JSDoc documentation for all functions
- Extract custom hooks: useWindowResize, useRouteChange, useMobileSiderAutoHide
- Calculate shouldInnerPadding directly in PageLayout based on pathname to prevent async updates
- Integrate localStorage saving logic into SET_SIDER_COLLAPSED reducer case
- Remove SET_INNER_PADDING action as it's no longer needed

## Updated Components
- PageLayout.js: Direct padding calculation based on route
- HeaderBar.js: Use new useStyle hook and styleActions
- SiderBar.js: Remove redundant localStorage calls
- LogsTable.js: Remove unused StyleContext import
- Playground/index.js: Migrate to new API

## Performance Impact
- Reduced component re-renders through optimized context structure
- Eliminated unnecessary effect dependencies and state updates
- Improved route transition smoothness with synchronous padding calculation

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.

- Remove duplicate onRoleToggle prop passing to ChatArea component in Playground/index.js
- Move Toast notification outside setMessage callback in useMessageActions hook
- Prevent multiple event bindings that caused repeated role switch notifications
- Add early return validation for role toggle eligibility

This fixes the issue where users would see multiple success toasts when switching
between Assistant and System roles in the chat interface.

Files changed:
- web/src/pages/Playground/index.js
- web/src/hooks/useMessageActions.js