ui: Chat Conversation Tabbed navigation by allozaur · Pull Request #27263 · ggml-org/llama.cpp

allozaur · 2026-08-17T13:21:21Z

Overview

Browser-style tab bar above the chat screen to manage multiple open conversations
Persist open tabs to localStorage and sync them automatically with the URL route
Improved existing horizontal scrollable carousel UI & functionality
Added keyboard shortcuts:
- Cycle through open tabs (Shift + Cmd/Ctrl + Left/Right)
- Close the current tab (Shift + Cmd/Ctrl + X)
Automatically close the tab when the underlying conversation is deleted
Add a user setting in the Display menu to enable or disable conversation tabs (enabled by default)
Move the sidebar expanded/collapsed state to a shared UI store for better synchronization with the tab bar

Screen.Recording.2026-08-21.at.13.48.43.mp4

Requirements

I have read and agree with the contributing guidelines
AI usage disclosure: YES, pi:DeepSeek-V4-Flash-0731 + llama-ui:Qwen3.8-27B-GGUF:Q4_K_M

Copilot

Pull request overview

Warning

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Adds browser-style conversation tabs to the chat UI, including persistence and keyboard shortcuts, while refactoring the existing horizontal scroll carousel into a reusable component and centralizing shared UI state.

Changes:

Introduce tabsStore + ChatTabs UI for multi-conversation tab navigation with localStorage persistence.
Replace HorizontalScrollCarousel with reusable ScrollCarousel + improved resize handling.
Add settings + keyboard shortcuts for tab cycling/closing and move sidebar expanded state to uiStore.

Reviewed changes

Copilot reviewed 36 out of 37 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
tools/ui/tests/stories/a11y/HorizontalScrollCarousel.a11y.stories.svelte	Updates a11y Storybook story to use new `ScrollCarousel` component.
tools/ui/src/routes/search/+page.svelte	Routes desktop users away from mobile search using `openNewChat()` instead of `ROUTES.NEW_CHAT`.
tools/ui/src/routes/+layout.svelte	Adds global shortcuts for tab navigation and logic to drop the transient new-chat tab.
tools/ui/src/routes/(chat)/+page.svelte	Simplifies chat route init; now opens new-chat on prompt/model deep-links.
tools/ui/src/routes/(chat)/+layout.svelte	Renders `ChatTabs` conditionally and syncs tabs with route changes.
tools/ui/src/lib/types/navigation.d.ts	Adds `action` field for sidebar items (e.g., `new-chat`).
tools/ui/src/lib/stores/ui.svelte.ts	Introduces shared `uiStore` for cross-component layout state.
tools/ui/src/lib/stores/tabs.svelte.ts	Adds `tabsStore` with persistence, activation/close logic, and route sync.
tools/ui/src/lib/stores/init.ts	Initializes `tabsStore` after conversations load to prune persisted tab ids.
tools/ui/src/lib/stores/index.ts	Exports `tabsStore`, `NEW_CHAT_TAB_ID`, and `uiStore`.
tools/ui/src/lib/stores/conversations/preferences.svelte.ts	Minor refactor to avoid repeated active conversation id lookups.
tools/ui/src/lib/stores/conversations/index.svelte.ts	Integrates tab removal/close behavior into conversation deletion flows; adds `openNewChat()`.
tools/ui/src/lib/services/database.service.ts	Adds helper to persist conversation with caller-supplied id.
tools/ui/src/lib/hooks/use-scroll-carousel.svelte.ts	Adds resize observation for both container and content; exposes `contentContainer`.
tools/ui/src/lib/hooks/use-keyboard-shortcuts.svelte.ts	Adds close-tab + tab-cycle shortcuts and wires new-chat to `openNewChat()`.
tools/ui/src/lib/enums/keyboard.enums.ts	Adds X key variants for close-tab shortcut.
tools/ui/src/lib/constants/ui.constants.ts	Switches sidebar New Chat action from a route to an `action` handler.
tools/ui/src/lib/constants/storage.constants.ts	Adds `CHAT_TABS_LOCALSTORAGE_KEY`.
tools/ui/src/lib/constants/settings.constants.ts	Adds “Conversation tabs” setting (default enabled).
tools/ui/src/lib/constants/settings-keys.constants.ts	Adds `conversationTabs` settings key.
tools/ui/src/lib/constants/routes.constants.ts	Removes `NEW_CHAT` route and associated URL param definition.
tools/ui/src/lib/components/ui/scroll-carousel/scroll-carousel.svelte	New shared `ScrollCarousel` component with variants and external hook support.
tools/ui/src/lib/components/ui/scroll-carousel/index.ts	Exports `ScrollCarousel`.
tools/ui/src/lib/components/app/settings/SettingsChatMobileHeader.svelte	Refactors header section scroller to use `ScrollCarousel`.
tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte	Handles `action: 'new-chat'` by calling `openNewChat()`.
tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte	Moves sidebar expanded/collapsed state into `uiStore`.
tools/ui/src/lib/components/app/misc/index.ts	Removes export of the deleted `HorizontalScrollCarousel`.
tools/ui/src/lib/components/app/misc/HorizontalScrollCarousel.svelte	Deletes old carousel implementation (replaced by `ScrollCarousel`).
tools/ui/src/lib/components/app/chat/index.ts	Exports new `ChatTabs` component.
tools/ui/src/lib/components/app/chat/ChatTabs/ChatTabsItem.svelte	Adds a tab item UI with close/stop actions and link-like behavior.
tools/ui/src/lib/components/app/chat/ChatTabs/ChatTabs.svelte	Adds the tab strip UI driven by `tabsStore` + `ScrollCarousel`.
tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenActionScrollDown.svelte	Updates styling to account for updated UI design.
tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte	Adjusts empty-state logic and layout min-height for tab offset.
tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte	Includes `--chat-tabs-offset` in assistant min-height calculations.
tools/ui/src/lib/components/app/chat/ChatForm/ChatFormMcpResourcesList.svelte	Uses `ScrollCarousel` for MCP resource attachments.
tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewThumbnailStrip.svelte	Uses `ScrollCarousel` for attachment thumbnail strip.
tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsList.svelte	Replaces carousel ref + rendering with `ScrollCarousel`.

Suppressed comments (1)

tools/ui/src/routes/(chat)/+page.svelte:1

This change removes the prior URL-param handling behavior (model selection by ?model=..., optional eager load, and the “model not available” dialog) but the PR description focuses on tab navigation/persistence and doesn’t mention removing deep-link capabilities. If those deep links are still intended to work, the previous logic needs to be preserved (or moved elsewhere) so ?model=... actually selects the requested model and errors are surfaced appropriately.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Observe the content wrapper as well as the container, since adding overflowing items does not change the container's own box size. Also expose an onScrollableChange callback. Assisted-by: pi

Single carousel component with top/center variants, gap and scroll options, and hover-revealed chevrons. Rename the HorizontalScrollCarousel accessibility story accordingly. Assisted-by: pi

Switch the settings mobile header, attachments list, thumbnail strip, and MCP resources to the unified component, and drop HorizontalScrollCarousel. Assisted-by: pi

Scroll newly added tabs into view, fade overflowing tabs at the edges, and hide the New chat button while a new-chat tab is open. Assisted-by: pi

Shift+Cmd/Ctrl+Left/Right cycles the open tabs, mirroring the existing Shift+Cmd/Ctrl+Up/Down conversation navigation. Assisted-by: pi

The full tab is now a link instead of only the inner label button, while the stop and close buttons stay interactive by swallowing their clicks. Assisted-by: pi

Widen the tab bar for the expanded sidebar and rename the tab bar height variable to --chat-tabs-offset with a smaller value so the chat screen min-height accounts for the overlay without overshooting. Assisted-by: pi

Subtract the tab bar offset when it is shown so the last assistant message does not overflow the available viewport space. Assisted-by: pi

- handle ?model selection, with ?load=true eager router loading - ?q now creates a conversation, sends the prompt, and clears the params - show the not-available-model dialog for unknown models - never block mount on the conversation list Assisted-by: pi

- the tab anchor covers the whole item while stop/close stay siblings, so interactive elements are never nested inside the anchor - cmd/ctrl/middle clicks are left to the browser (new window) - extract the tab labels, the active-tab data attribute, and the sidebar-offset max widths into constants Assisted-by: pi

- drop the dead scrollLeft/scrollRight helpers and the unused onScrollableChange/scrollBy props - init the carousel once instead of inside a derived - restore items-start on the center variant - always show the settings header arrows on touch Assisted-by: pi

- the new-chat sentinel is no longer pruned on init, so reloading on the bare new-chat route keeps the tab the user is on - closing the active conversation falls back to the new-chat screen when Conversation tabs are off Assisted-by: pi

- prune persisted tabs after the list loads in the background instead of awaiting it during init - openNewChat now returns void; its return value was never read Assisted-by: pi

The chat start page creates the conversation and hands the prompt over to the chat route, which still sees it in the query string. Sending it on both sides queues the second copy as a pending message, which shows up as a stray user bubble once the answer lands and vanishes on reload since it never reaches the database. The tab bar takes the max width of the collapsed sidebar while it is expanded, and the other way round. The tab list is pruned against a snapshot of the loaded conversations, so a conversation created while that list is still loading loses its tab even though the route just opened it. The active tab then falls out of the list and the cycling shortcut jumps to an edge on every keypress instead of moving one tab over. Tabs synced from the route are kept as they are, only the persisted ones are pruned. The rich chat input claims ctrl or alt with shift and an arrow for its badge-aware word jump, which now belongs to the tab cycling shortcut. Holding shift hands the key combination over, the plain word jump is unchanged. The close-tab shortcut consumes the event before checking whether the setting is on, and the logo background loses its importance flag.

* ui : add browser-style conversation tabs store Track open conversation tabs in order, persisted to localStorage and pruned against the loaded conversation list on init. The chat layout syncs the route's tab on every navigation, so any way of reaching a conversation opens a tab for it. * ui : add temporary new-chat tabs New-chat tabs are unsaved conversations carrying a temporary id used directly as the route (#/chat/<id>). They live in memory and are only persisted to the database - keeping the same id so the route and tab stay stable - when the first message is sent. Deleting one drops it without confirmation, and deleting conversations now closes their tabs. * ui : render conversation tab bar in chat layout Desktop-only tab bar above the chat screen, one tab per open conversation or new-chat tab. The active tab follows the route id; clicking navigates, middle-click or the close button closes (switching to the left neighbor), and a trailing + starts a new chat. Tabs appear only on chat-id routes; the bare #/ new-chat view has none. The bare route stays put unless a prompt/model deep-link routes it to a new-chat tab. * ui : route new-chat entry points through tabs The sidebar New chat item, Cmd+Shift+O, the search page and the arrow-key fallback now open a new-chat tab instead of navigating to the ?new_chat URL, which is removed. New chat is no longer a special route but a tab like any other conversation. * ui : track sidebar expanded state in a shared ui store Move the desktop sidebar expanded/collapsed state out of deviceStore into a dedicated uiStore so the chat tab bar can react to it. Assisted-by: pi * chat : add opt-in conversation tabs setting Add a Display setting that turns browser-style conversation tabs on or off, enabled by default. Assisted-by: pi * chat : add browser-style conversation tabs with a new-chat screen Track open conversations as tabs above the chat, one per open chat, plus a single New chat tab for the bare `#/` route. New chat is just the `#/` screen - no temporary conversations - and its tab is dropped when navigating away. Sending the first message creates a real conversation and opens a tab for it. Assisted-by: pi * chat : turn tab bar into a horizontally scrollable carousel Make the tab bar a horizontally scrollable carousel with edge scroll buttons and active-tab centering, and align its styling with the sidebar. Assisted-by: pi * chat : restyle the scroll-to-bottom button to match tab styling Assisted-by: pi * chat : add close-tab keyboard shortcut Assisted-by: pi * chat : soften tab bar fade and dim inactive tabs Assisted-by: pi * feat: Add stop button to tabs * refactor: Componentize * ui : fix carousel scrollability detection Observe the content wrapper as well as the container, since adding overflowing items does not change the container's own box size. Also expose an onScrollableChange callback. Assisted-by: pi * ui : add unified ScrollCarousel component Single carousel component with top/center variants, gap and scroll options, and hover-revealed chevrons. Rename the HorizontalScrollCarousel accessibility story accordingly. Assisted-by: pi * ui : migrate carousels to ScrollCarousel Switch the settings mobile header, attachments list, thumbnail strip, and MCP resources to the unified component, and drop HorizontalScrollCarousel. Assisted-by: pi * ui : improve chat tabs carousel UX Scroll newly added tabs into view, fade overflowing tabs at the edges, and hide the New chat button while a new-chat tab is open. Assisted-by: pi * refactor: Naming * chat : add keyboard shortcut to jump between conversation tabs Shift+Cmd/Ctrl+Left/Right cycles the open tabs, mirroring the existing Shift+Cmd/Ctrl+Up/Down conversation navigation. Assisted-by: pi * chat : make the whole tab item act as a link The full tab is now a link instead of only the inner label button, while the stop and close buttons stay interactive by swallowing their clicks. Assisted-by: pi * chat : adjust tab bar width and use a shared offset variable Widen the tab bar for the expanded sidebar and rename the tab bar height variable to --chat-tabs-offset with a smaller value so the chat screen min-height accounts for the overlay without overshooting. Assisted-by: pi * chat : account for the tab bar offset in the assistant min-height Subtract the tab bar offset when it is shown so the last assistant message does not overflow the available viewport space. Assisted-by: pi * refactor: Post-review fixes * ui : restore deep links on the chat start page - handle ?model selection, with ?load=true eager router loading - ?q now creates a conversation, sends the prompt, and clears the params - show the not-available-model dialog for unknown models - never block mount on the conversation list Assisted-by: pi * ui : fix tab item link nesting and centralize tab constants - the tab anchor covers the whole item while stop/close stay siblings, so interactive elements are never nested inside the anchor - cmd/ctrl/middle clicks are left to the browser (new window) - extract the tab labels, the active-tab data attribute, and the sidebar-offset max widths into constants Assisted-by: pi * ui : tidy scroll carousel hook and keep mobile header arrows on - drop the dead scrollLeft/scrollRight helpers and the unused onScrollableChange/scrollBy props - init the carousel once instead of inside a derived - restore items-start on the center variant - always show the settings header arrows on touch Assisted-by: pi * ui : keep the new-chat tab across reloads and fall back on close - the new-chat sentinel is no longer pruned on init, so reloading on the bare new-chat route keeps the tab the user is on - closing the active conversation falls back to the new-chat screen when Conversation tabs are off Assisted-by: pi * ui : don't block startup on the conversation list - prune persisted tabs after the list loads in the background instead of awaiting it during init - openNewChat now returns void; its return value was never read Assisted-by: pi * ui: fix routing nits * chore: Update doc comments * refactor: Mark fire-and-forget openNewChat calls as `void` * chat: fix the deep-linked prompt, the tab width and the tab shortcuts The chat start page creates the conversation and hands the prompt over to the chat route, which still sees it in the query string. Sending it on both sides queues the second copy as a pending message, which shows up as a stray user bubble once the answer lands and vanishes on reload since it never reaches the database. The tab bar takes the max width of the collapsed sidebar while it is expanded, and the other way round. The tab list is pruned against a snapshot of the loaded conversations, so a conversation created while that list is still loading loses its tab even though the route just opened it. The active tab then falls out of the list and the cycling shortcut jumps to an edge on every keypress instead of moving one tab over. Tabs synced from the route are kept as they are, only the persisted ones are pruned. The rich chat input claims ctrl or alt with shift and an arrow for its badge-aware word jump, which now belongs to the tab cycling shortcut. Holding shift hands the key combination over, the plain word jump is unchanged. The close-tab shortcut consumes the event before checking whether the setting is on, and the logo background loses its importance flag. --------- Co-authored-by: Pascal <admin@serveurperso.com>

github-actions Bot added the server/ui label Aug 17, 2026

allozaur changed the title ~~allozaur/feat/chat conversation tabs~~ ui: Chat Conversation Tabbed navigation Aug 17, 2026

allozaur force-pushed the allozaur/feat/chat-conversation-tabs branch from 85a1d38 to 34e6092 Compare August 18, 2026 07:50

allozaur force-pushed the allozaur/feat/chat-conversation-tabs branch from 34e6092 to 9a5cb03 Compare August 18, 2026 09:36

allozaur force-pushed the allozaur/feat/chat-conversation-tabs branch from 9a5cb03 to 1895fe3 Compare August 20, 2026 12:32

allozaur force-pushed the allozaur/feat/chat-conversation-tabs branch 3 times, most recently from cd416a5 to 9255610 Compare August 21, 2026 08:16

allozaur changed the base branch from allozaur/feat/drag-and-drop-json-data-import to allozaur/fix/settings-nav-order August 21, 2026 08:16

allozaur force-pushed the allozaur/feat/chat-conversation-tabs branch from 9255610 to 5c20d43 Compare August 21, 2026 10:03

allozaur force-pushed the allozaur/feat/chat-conversation-tabs branch from 5c20d43 to 8522347 Compare August 21, 2026 10:11

Base automatically changed from allozaur/fix/settings-nav-order to master August 21, 2026 10:30

allozaur force-pushed the allozaur/feat/chat-conversation-tabs branch 2 times, most recently from 56bca7f to 0806ae2 Compare August 21, 2026 13:38

allozaur marked this pull request as ready for review August 21, 2026 13:38

Copilot AI lite review requested due to automatic review settings August 21, 2026 13:38

allozaur requested a review from a team as a code owner August 21, 2026 13:38

allozaur requested review from ServeurpersoCom and ggerganov August 21, 2026 13:39

allozaur commented Aug 21, 2026

View reviewed changes

Copilot AI reviewed Aug 21, 2026

View reviewed changes

Copilot started reviewing on behalf of allozaur August 21, 2026 14:37

View session

allozaur force-pushed the allozaur/feat/chat-conversation-tabs branch from 0806ae2 to 124241f Compare August 21, 2026 18:00

allozaur and others added 19 commits August 23, 2026 07:25

ui : fix carousel scrollability detection

d900ec7

Observe the content wrapper as well as the container, since adding overflowing items does not change the container's own box size. Also expose an onScrollableChange callback. Assisted-by: pi

ui : add unified ScrollCarousel component

6568871

Single carousel component with top/center variants, gap and scroll options, and hover-revealed chevrons. Rename the HorizontalScrollCarousel accessibility story accordingly. Assisted-by: pi

ui : migrate carousels to ScrollCarousel

fed4740

Switch the settings mobile header, attachments list, thumbnail strip, and MCP resources to the unified component, and drop HorizontalScrollCarousel. Assisted-by: pi

ui : improve chat tabs carousel UX

495fe44

Scroll newly added tabs into view, fade overflowing tabs at the edges, and hide the New chat button while a new-chat tab is open. Assisted-by: pi

refactor: Naming

6622549

chat : add keyboard shortcut to jump between conversation tabs

26da5a3

Shift+Cmd/Ctrl+Left/Right cycles the open tabs, mirroring the existing Shift+Cmd/Ctrl+Up/Down conversation navigation. Assisted-by: pi

chat : make the whole tab item act as a link

7b67452

The full tab is now a link instead of only the inner label button, while the stop and close buttons stay interactive by swallowing their clicks. Assisted-by: pi

chat : adjust tab bar width and use a shared offset variable

1b183b4

Widen the tab bar for the expanded sidebar and rename the tab bar height variable to --chat-tabs-offset with a smaller value so the chat screen min-height accounts for the overlay without overshooting. Assisted-by: pi

chat : account for the tab bar offset in the assistant min-height

0ed2ffb

Subtract the tab bar offset when it is shown so the last assistant message does not overflow the available viewport space. Assisted-by: pi

refactor: Post-review fixes

b4c672c

ui : don't block startup on the conversation list

89776eb

- prune persisted tabs after the list loads in the background instead of awaiting it during init - openNewChat now returns void; its return value was never read Assisted-by: pi

ui: fix routing nits

01d0f13

chore: Update doc comments

54b74f2

refactor: Mark fire-and-forget openNewChat calls as void

e4c77b8

allozaur force-pushed the allozaur/feat/chat-conversation-tabs branch from e89a0be to 128dd1f Compare August 23, 2026 05:25

ggerganov approved these changes Aug 23, 2026

View reviewed changes

ServeurpersoCom merged commit 8144f31 into master Aug 23, 2026
6 checks passed

ggerganov mentioned this pull request Aug 25, 2026

llama.cpp : bump version to 0.3.0 #27696

Merged

allozaur deleted the allozaur/feat/chat-conversation-tabs branch August 26, 2026 12:46

Navigation Menu

Repository navigation

ui: Chat Conversation Tabbed navigation - #27263

ui: Chat Conversation Tabbed navigation#27263
ServeurpersoCom merged 32 commits into
masterfrom
allozaur/feat/chat-conversation-tabs

allozaur commented Aug 17, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

allozaur commented Aug 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Requirements

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

allozaur commented Aug 17, 2026 •

edited

Loading