perf(web): decouple chat input state to resolve lag in long conversat…

[jiakeboge]

…ions (#351)

Extract ComposerInput component to isolate frequent keystroke renders. Refactor ChatComposer to use hasContent flag instead of full input state.
Apply React.memo to heavy config panels (Quiz, Math, Research, Visualize).
Stabilize parent callbacks in ChatPage using useCallback. Fix residual syntax errors and missing canSend definition in composer. Address #351 by implementing deep state colocation.

Description

This PR addresses the performance regression reported in Issue #351, where the TutorBot chatbox exhibited significant input lag during conversations with 50+ messages. The root cause was "Big State" anti-pattern: every keystroke triggered a re-render of the entire ChatComposer and its heavy sub-components (Quiz/Math/Research panels), as well as unnecessary reconciliation checks for the message list.

Key Changes

• State Colocation: Created a lightweight ComposerInput component. The input state now lives locally within this component, ensuring keystrokes only trigger a render of the textarea itself.
• Render Isolation: Applied React.memo to all heavy configuration panels and the @mention popup. They no longer re-render when the user is typing.
• Dependency Optimization: Refactored over 20+ callbacks in the main ChatPage into useCallback to ensure stable references, preventing ChatComposer from being forced to update.
• Robustness: Fixed a runtime ReferenceError for canSend and resolved several syntax errors in the memoized components.

Related Issues

• Closes [Bug]: Residual input lag in TutorBot Chatbox (Follow-up to #317) #351
• Related to [Bug]: Residual input lag in TutorBot Chatbox (Follow-up to #317) #351

Verification Results

• React DevTools: Confirmed that typing only highlights the ComposerInput component. ChatComposer and ChatMessages remain idle.
• Performance Profiling: Scripting time per keystroke reduced from ~25ms to <2ms in a 100-message session.
• Linting: All 8 modified files pass npm run lint and TypeScript type checks.

Module(s) Affected

• agents
• api
• config
• core
• knowledge
• logging
• services
• tools
• utils
• web (Frontend)
• docs (Documentation)
• scripts
• tests
• Other: ...

Checklist

• I have read and followed the contribution guidelines.
• My code follows the project's coding standards.
• I have run pre-commit run --all-files and fixed any issues.
• I have added relevant tests for my changes.
• I have updated the documentation (if necessary).
• My changes do not introduce any new security vulnerabilities.

Additional Notes

Add any other context or screenshots about the pull request here.

[pancacake]

Thanks! that means a lot to me！