Skip to content

improvement(chat): partialize chat store to only persist image URL instead of full image in floating chat #2842

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
waleedlatif1 merged 1 commit into from
Jan 16, 2026
Merged

improvement(chat): partialize chat store to only persist image URL instead of full image in floating chat #2842

waleedlatif1 merged 1 commit into from
Jan 16, 2026

Conversation

@waleedlatif1
Copy link
Collaborator

@waleedlatif1 waleedlatif1 commented Jan 16, 2026

Summary

  • partialize chat store to only persist image URL instead of full image in floating chat
  • fixed stale closure

Type of Change

  • Bug fix

Testing

Tested manually

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@vercel
Copy link

vercel bot commented Jan 16, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Review Updated (UTC)
docs Skipped Skipped Jan 16, 2026 0:46am

Review with Vercel Agent

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Jan 16, 2026

Greptile Summary

This PR optimizes localStorage usage by preventing full base64-encoded images from being persisted in the chat store. The implementation adds a partialize function to the Zustand persist middleware that clears the dataUrl field from message attachments before storage, while keeping metadata like filename and type intact.

  • Modified chat store to use partialize in persist config, clearing dataUrl from attachments before localStorage storage
  • Replaced unsafe URL.createObjectURL pattern (creating URLs on every render with onLoad cleanup) with ref-based URL caching and proper lifecycle management
  • Fixed stale closure bug in useChatFileUpload hook by using functional state updates instead of closure-dependent updates
  • Added timeout protection to FileReader operations to prevent indefinite hangs on large files
  • Updated attachment display logic to verify both image type AND valid dataUrl before rendering

Confidence Score: 5/5

  • This PR is safe to merge with minimal risk
  • The changes are well-structured and address real performance and correctness issues. The partialize implementation correctly clears only the dataUrl while preserving necessary metadata. The URL management improvements prevent memory leaks. The stale closure fix uses proper React patterns with functional updates. All changes follow established patterns from the codebase's style guides.
  • No files require special attention

Important Files Changed

Filename Overview
apps/sim/stores/chat/store.ts Added partialize to persist config to clear dataUrl from attachments, preventing large base64 images from being stored in localStorage
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx Added proper URL.createObjectURL management with ref-based caching and cleanup, added timeout protection to FileReader operations
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx Fixed image display logic to check both type and dataUrl validity before rendering as image
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-file-upload.ts Fixed stale closure bug by using functional state updates in addFiles, preventing race conditions with rapid file additions

Sequence Diagram

sequenceDiagram
    participant User
    participant Chat
    participant FileUploadHook
    participant FileReader
    participant ChatStore
    participant LocalStorage
    
    User->>Chat: Drop/select image files
    Chat->>FileUploadHook: addFiles(files)
    FileUploadHook->>FileUploadHook: Validate files (size, duplicates)
    FileUploadHook->>FileUploadHook: setChatFiles (functional update)
    FileUploadHook-->>Chat: chatFiles updated
    
    Chat->>Chat: getFilePreviewUrl(file)
    Chat->>Chat: URL.createObjectURL(file.file)
    Chat->>Chat: Store URL in ref Map
    Chat-->>User: Display image preview
    
    User->>Chat: Send message
    Chat->>FileReader: readAsDataURL(file.file)
    Note over FileReader: 60s timeout protection
    FileReader-->>Chat: dataUrl (base64)
    Chat->>Chat: processFileAttachments()
    
    Chat->>ChatStore: addMessage(message with attachments)
    ChatStore->>ChatStore: Add message to state
    ChatStore->>LocalStorage: persist(state)
    Note over ChatStore,LocalStorage: partialize clears dataUrl
    ChatStore->>LocalStorage: Store message without base64
    
    User->>Chat: Reload page
    LocalStorage->>ChatStore: Rehydrate state
    Note over LocalStorage,ChatStore: dataUrl is empty string
    ChatStore-->>Chat: messages with empty dataUrl
    Chat->>Chat: canDisplayAsImage checks dataUrl
    Chat-->>User: Show attachment metadata only
    
    User->>Chat: Remove file from preview
    Chat->>FileUploadHook: removeFile(fileId)
    Chat->>Chat: Cleanup: URL.revokeObjectURL(url)
    Chat->>Chat: Remove from ref Map
Loading

@waleedlatif1 waleedlatif1 merged commit 87e6057 into staging Jan 16, 2026
11 checks passed
@waleedlatif1 waleedlatif1 deleted the improvement/floating-chat branch January 16, 2026 00:54
@waleedlatif1 waleedlatif1 mentioned this pull request Jan 16, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@waleedlatif1