fix: render performance while generating messages

[louis-menlo]

Describe Your Changes

This PR fixes the issue where the app UI becomes laggy while generating messages with tiny models. The performance issue is caused by poor state handling during message updates. Every time a token is yielded, the code loops through the messages array to check if a message is available before updating. This redundant operation is costly.

Before:

After:

Self Checklist

This pull request includes several changes aimed at improving the handling of thread-related state and message generation in the ModelHandler and related components. The most important changes include adding new atoms, updating imports, and modifying various hooks and components to support the new state management.

State Management Enhancements:

• web/helpers/atoms/ChatMessage.atom.ts: Added a new atom subscribedGeneratingMessageAtom to store the subscribed generating message thread.
• web/hooks/useSetActiveThread.ts: Updated to use the new subscribedGeneratingMessageAtom and added logic to clear the subscriber when the active thread changes. [1] [2]

Component Updates:

• web/containers/Providers/ModelHandler.tsx:

  • Imported the new atom and updated existing imports to include useAtom. [1] [2] [3]
  • Added state and effect hooks to manage the new subscribed generating message state and active thread state. [1] [2] [3] [4]

• web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx:

  • Imported the new atom and updated existing imports to include useAtom. [1] [2]
  • Added state and effect hooks to manage the new subscribed generating message state within the ChatItem component.

These changes collectively enhance the state management related to thread handling and message generation, ensuring more robust and reactive behavior in the application.

[github-actions]

Barecheck - Code coverage report

Total: 68.6%

Your code coverage diff: -0.06% ▾

Uncovered files and lines

File	Lines
web/helpers/atoms/ChatMessage.atom.ts	31, 33-34, 64, 88-89, 91-92, 94, 97-98, 105-106, 108, 111-112, 115-116, 127, 130-131, 136, 139-140, 144, 147-148, 150-151, 154, 170-175, 177, 180-181, 183-184, 186
web/hooks/useSetActiveThread.ts	35, 37-38, 42-44, 54
web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx	27-29, 32, 35, 38-42, 45, 48, 54-55, 58-59, 62-66

[github-actions]

This is the build for this pull request. You can download it from the Artifacts section here: Build URL.