chore: ws auto reconnect

[appflowy]

Description

---

Checklist

General

• I've included relevant documentation or comments for the changes introduced.
• I've tested the changes in multiple environments (e.g., different browsers, operating systems).

Testing

• I've added or updated tests to validate the changes introduced for AppFlowy Web.

Feature-Specific

• For feature additions, I've added a preview (video, screenshot, or demo) in the "Feature Preview" section.
• I've verified that this feature integrates seamlessly with existing functionality.

Summary by Sourcery

Implement automatic WebSocket reconnection on page return and extend the AI assistant writer request to support custom prompts based on the selected prompt.

New Features:

• Automatically attempt WebSocket reconnection when the page becomes visible, gains focus, or comes back online while the socket is closed and not loading.
• Support passing a custom prompt derived from the selected prompt into AI assistant writer requests, including a new CustomPrompt assistant type.

[sourcery-ai]

Reviewer's Guide

Implements automatic WebSocket reconnection when the user returns to the page and adds support for passing a custom prompt’s content through the AI assistant pipeline down to the writer request API as an optional custom_prompt payload field.

Sequence diagram for automatic WebSocket reconnection on page return

sequenceDiagram
  actor User
  participant Window
  participant Document
  participant ConnectBanner

  User->>Window: Leave page (tab inactive)
  Window-->>ConnectBanner: WebSocket transitions to CLOSED
  ConnectBanner->>ConnectBanner: isClosed = true
  ConnectBanner->>ConnectBanner: autoReconnectAttemptedRef = false

  User->>Window: Return to page (focus)
  Window-->>ConnectBanner: focus event
  ConnectBanner->>ConnectBanner: tryAutoReconnect()
  ConnectBanner->>ConnectBanner: check isClosed && !isLoading
  ConnectBanner->>Window: check navigator.onLine
  ConnectBanner->>Document: check visibilityState == visible
  ConnectBanner->>ConnectBanner: autoReconnectAttemptedRef = true
  ConnectBanner->>ConnectBanner: Log.debug Trying to auto reconnect
  ConnectBanner->>ConnectBanner: handleReconnect()

  Window-->>ConnectBanner: online event (optional)
  Document-->>ConnectBanner: visibilitychange to visible (optional)
  ConnectBanner->>ConnectBanner: tryAutoReconnect() (skipped if autoReconnectAttemptedRef is true)

Loading

Sequence diagram for passing custom prompt through AI assistant pipeline

sequenceDiagram
  actor User
  participant PromptModal
  participant AIAssistantProvider
  participant WriterRequest
  participant BackendAPI

  User->>PromptModal: Select prompt (id)
  PromptModal-->>AIAssistantProvider: currentPromptId, prompts

  User->>AIAssistantProvider: Trigger AI assistant
  AIAssistantProvider->>AIAssistantProvider: selectedPrompt = prompts.find(id == currentPromptId)
  AIAssistantProvider->>WriterRequest: fetchAIAssistant(inputText, assistantType, responseFormat, ragIds, completionHistory, promptId, customPrompt, modelName)
  Note right of WriterRequest: customPrompt = selectedPrompt.content

  WriterRequest->>WriterRequest: Build payload
  WriterRequest->>BackendAPI: POST /ai_assistant
  BackendAPI-->>WriterRequest: Streamed response
  WriterRequest-->>AIAssistantProvider: Messages via onMessage
  AIAssistantProvider-->>User: Display AI response

Loading

Class diagram for updated AI assistant writer request and types

classDiagram
  class AIAssistantType {
    <<enumeration>>
    Rewrite
    FixSpellingGrammar
    MakeShorter
    MakeLonger
    ContinueWriting
    Explain
    AskAIAnything
    CustomPrompt
  }

  class CompletionResult {
    +role CompletionRole
    +content string
  }

  class CompletionRole {
    <<enumeration>>
    user
    assistant
    system
  }

  class Prompt {
    +id string
    +content string
  }

  class UsePromptModal {
    +currentPromptId string
    +prompts Prompt[]
    +updateCurrentPromptId(id string) void
  }

  class WriterRequest {
    -axiosInstance any
    -viewId string
    +constructor(axiosInstance any, viewId string)
    +fetchAIAssistant(inputText string, assistantType AIAssistantType, responseFormat string, ragIds string[], completionHistory CompletionResult[], promptId string, customPrompt string, modelName string, onMessage function) Promise<void>
  }

  class AIAssistantProvider {
    +assistantType AIAssistantType
    +selectedModelName string
    +currentPromptId string
    +prompts Prompt[]
    +applyAssistant() void
  }

  AIAssistantProvider --> UsePromptModal : uses
  AIAssistantProvider --> WriterRequest : uses
  UsePromptModal "1" --> "*" Prompt : manages
  WriterRequest ..> CompletionResult : uses
  CompletionResult --> CompletionRole : has
  AIAssistantProvider --> AIAssistantType : uses
  WriterRequest --> AIAssistantType : uses

Loading

File-Level Changes

Change	Details	Files
Add automatic WebSocket reconnection when the page becomes visible, gains focus, or regains network connectivity.	Track whether an auto-reconnect has already been attempted with a ref to avoid repeated attempts per closed session. Reset the auto-reconnect-attempt flag whenever the WebSocket is not in a closed state. Register window focus and online listeners plus a document visibilitychange listener to attempt reconnection only when the socket is closed, not loading, the document is visible, and the browser is online. Invoke the reconnect handler once immediately when the effect runs and clean up all listeners on unmount or dependency changes. Log a debug message just before triggering an automatic reconnect.	src/components/app/ConnectBanner.tsx
Propagate selected prompt content through the AI assistant flow so writer requests can send a custom system prompt to the backend.	Extend the prompt modal hook usage to access the list of prompts alongside the current prompt id. Lookup the selected prompt by id before sending a writer request and derive an optional customPrompt string from its content. Include the customPrompt in the writer request payload and forward it to the backend as a custom_prompt.system field when present. Update the writer request payload type and enum of assistant types to account for a new CustomPrompt option and the customPrompt field. Ensure the AI assistant effect dependencies include prompts so it reacts correctly when the prompt list changes.	src/components/chat/provider/ai-assistant-provider.tsx src/components/chat/types/writer.ts src/components/chat/request/writer-request.ts

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey there - I've reviewed your changes and they look great!

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}