Skip to content

feat(ai-create): global 'AI is generating…' bar that persists across navigation#130

Open
dantaspaulo wants to merge 1 commit into
trypostit:mainfrom
dantaspaulo:feat/global-ai-generation-bar
Open

feat(ai-create): global 'AI is generating…' bar that persists across navigation#130
dantaspaulo wants to merge 1 commit into
trypostit:mainfrom
dantaspaulo:feat/global-ai-generation-bar

Conversation

@dantaspaulo

Copy link
Copy Markdown

Problem

AI generation runs on the backend — the StreamPostCreation job broadcasts
.ai.creation.completed on the private user.{id}.ai-creation.{creationId}
channel — but only the dedicated loading screen listened to that channel. As
soon as the user navigated away, they lost any visual sign that a generation was
still running; only the final bell notification told them.

Change

A global singleton composable, useAiGeneration, becomes the sole owner of
the Echo subscription. Its module-level state persists across Inertia
navigations (SPA) and survives a hard reload via sessionStorage — it
re-subscribes to still-running generations, with a safety timeout so the bar
never gets stuck.

A thin bar at the top of the content shows "AI is generating your post…". On
completion it turns into a clickable "Your post is ready — View post"; on failure
it becomes a dismissible error.

The loading screen no longer subscribes to Echo directly — it now observes
the composable and redirects when its generation is done. That also removes the
two-owners conflict of both the screen and the composable calling leave() on
the same channel.

How

  • useAiGeneration.ts (new) — owns the channel subscription and the shared
    state (track, hydrate, complete, per-id find).
  • AiGenerationBar.vue (new) — the bar, mounted at the top of SidebarInset in
    AppSidebarLayout.
  • Loading.vue — observes the composable instead of Echo; owns no subscription.
  • lang/{en,es,pt-BR}/posts.phpbar_* strings.

The channel name, event (.ai.creation.completed) and payload
({ post_id, error }) are unchanged — the same contract the loading screen
already used.

…navigation

AI generation runs on the backend (the StreamPostCreation job broadcasts
.ai.creation.completed on the private user.{id}.ai-creation.{creationId}
channel), but only the dedicated loading screen listened to that channel. As
soon as the user navigated away, they lost any visual sign that a generation
was still running — only the final bell notification told them.

Introduce a global singleton composable (useAiGeneration) that is the sole owner
of the Echo subscription. Its module-level state persists across Inertia
navigations (SPA) and survives a hard reload via sessionStorage (it re-subscribes
to still-running generations, with a safety timeout). A thin bar at the top of
the content shows 'AI is generating your post…'; on completion it turns into a
clickable 'Your post is ready — View post', and on failure into a dismissible
error.

The loading screen no longer subscribes to Echo directly — it observes the
composable and redirects when its generation is done, which also removes the
two-owners conflict of both calling leave() on the same channel.

- useAiGeneration.ts (new): owns the subscription + state.
- AiGenerationBar.vue (new): the bar, mounted in AppSidebarLayout.
- Loading.vue: observes the composable instead of Echo directly.
- lang/{en,es,pt-BR}/posts.php: bar_* strings.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant