BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: inherit model-picker reorder/accordion persistence and shift-delete from otto-ui (#1833)

Browse Source 
* feat(model-picker): drag-to-reorder providers and persist accordion state

Ports two model/provider picker QoL features from otto-ui:
- Persist collapsed state of picker sections (favorites, recent, each
  provider) via a new persisted zustand store so collapse survives
  remounts and reloads, shared across every picker surface.
- Desktop drag-to-reorder of provider sections (whole header as the
  mouse activator, 8px threshold so a plain click still toggles
  collapse), with the order persisted in useUIStore.providerOrder and
  applied across ModelControls, ModelMultiSelect and ModelSelector.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* feat(sessions): shift-click quick action hard-deletes thread without prompt

Ports the shift-quick-delete feature from otto-ui. The sidebar quick
action (normally archive) becomes a no-prompt hard delete while Shift is
held: the icon switches to a trash bin, the affordance turns destructive,
and the click bypasses the confirmation dialog via a new skipConfirm
source flag. A shared useShiftKeyHeld hook (single window listener set,
useSyncExternalStore) keeps only the small action button re-rendering on
Shift state changes, and resets on window blur so the affordance can't
get stuck after alt-tab.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

---------

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>
This commit is contained in:
Serhii Dziupin
2026-06-26 19:36:47 +03:00
committed by GitHub
co-authored by Serhii Dziupin
parent e7b952cbcb
commit 3e3cd82a47
19 changed files with 377 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ModelControls.tsx
+5
View File
@@ -366,6 +366,8 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
const toggleFavoriteModel = useUIStore((state) => state.toggleFavoriteModel);
const reorderFavoriteModel = useUIStore((state) => state.reorderFavoriteModel);
const providerOrder = useUIStore((state) => state.providerOrder);
const setProviderOrder = useUIStore((state) => state.setProviderOrder);
const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
const addRecentModel = useUIStore((state) => state.addRecentModel);
const addRecentAgent = useUIStore((state) => state.addRecentAgent);
@@ -2368,6 +2370,9 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
)}
reorderFavoriteAriaLabel={t('chat.modelControls.reorderFavoriteAria')}
reorderFavoriteTitle={t('chat.modelControls.reorderFavoriteTitle')}
providerOrder={providerOrder}
onReorderProvider={setProviderOrder}
reorderProviderTitle={t('chat.modelControls.reorderProviderTitle')}
footerContent={(activeEntry) => {
const activeHasThinkingVariants = activeEntry
? getModelVariantOptions(activeEntry.providerID, activeEntry.modelID).length > 0
packages/ui/src/components/model-picker/ModelPickerList.tsx
+146 -22
View File
@@ -1,13 +1,14 @@
import React from 'react';
import {
DndContext,
MouseSensor,
PointerSensor,
closestCenter,
useSensor,
useSensors,
type DragEndEvent,
} from '@dnd-kit/core';
import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { CSS as DndCSS } from '@dnd-kit/utilities';
import { Icon } from '@/components/icon/Icon';
import { Input } from '@/components/ui/input';
@@ -18,6 +19,7 @@ import { getCurrentIntlLocale } from '@/lib/i18n';
import { mergeModelMetadataWithLiveModel } from '@/lib/modelMetadata';
import { getModelDisplayName as getSharedModelDisplayName } from '@/lib/modelDisplay';
import { cn } from '@/lib/utils';
import { useModelPickerSectionsStore } from '@/stores/useModelPickerSectionsStore';
import type { ModelMetadata } from '@/types';
type ProviderModel = Record<string, unknown> & { id?: string; name?: string };
@@ -256,6 +258,35 @@ const SortableFavoriteModelRow: React.FC<{
);
};
const SortableProviderSection: React.FC<{
id: string;
disabled?: boolean;
children: (dragHandleProps: SortableFavoriteHandleProps) => React.ReactNode;
}> = ({ id, disabled = false, children }) => {
const {
attributes,
listeners,
setNodeRef,
setActivatorNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id, disabled });
return (
<div
ref={setNodeRef}
style={{
transform: DndCSS.Translate.toString(transform),
transition,
}}
className={cn(isDragging && 'opacity-60')}
>
{children({ attributes, listeners, setActivatorNodeRef, isDragging })}
</div>
);
};
const STICKY_HEADER_OFFSET = 32;
const scrollIntoView = (container: HTMLElement | null, node: HTMLElement | null) => {
@@ -328,6 +359,9 @@ interface ModelPickerListProps {
onReorderFavorite?: (active: ModelPickerEntry, over: ModelPickerEntry) => void;
reorderFavoriteAriaLabel?: string;
reorderFavoriteTitle?: string;
providerOrder?: string[];
onReorderProvider?: (orderedProviderIDs: string[]) => void;
reorderProviderTitle?: string;
footerContent?: React.ReactNode | ((activeEntry: ModelPickerEntry | undefined) => React.ReactNode);
renderVersion?: number;
tooltipsEnabled?: boolean;
@@ -365,6 +399,9 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
onReorderFavorite,
reorderFavoriteAriaLabel,
reorderFavoriteTitle,
providerOrder,
onReorderProvider,
reorderProviderTitle,
footerContent,
renderVersion,
tooltipsEnabled = true,
@@ -376,10 +413,21 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
const scrollRef = React.useRef<HTMLElement | null>(null);
const keyboardOwnsSelectionRef = React.useRef(false);
const lastMousePositionRef = React.useRef<{ x: number; y: number } | null>(null);
const [collapsedSections, setCollapsedSections] = React.useState<Set<string>>(() => new Set());
const collapsedRecord = useModelPickerSectionsStore((state) => state.collapsedSections);
const toggleSection = useModelPickerSectionsStore((state) => state.toggleSection);
const collapsedSections = React.useMemo(
() => new Set(Object.keys(collapsedRecord).filter((key) => collapsedRecord[key])),
[collapsedRecord],
);
const favoriteRowSensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
);
// Desktop-only provider reordering: a MouseSensor (no TouchSensor) keeps the
// section headers tappable/scrollable on touch devices while enabling
// click-and-drag with a mouse.
const providerSectionSensors = useSensors(
useSensor(MouseSensor, { activationConstraint: { distance: 8 } }),
);
const allowedProviderSet = React.useMemo(() => {
if (!allowedProviderIds || allowedProviderIds.length === 0) return null;
@@ -412,7 +460,17 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
return matchesQuery(getModelDisplayName(model), providerName);
}), [allowedProviderSet, isHidden, matchesQuery, providerById, recentModels]);
const filteredProviders = React.useMemo(() => providers
const orderedProviders = React.useMemo(() => {
if (!providerOrder || providerOrder.length === 0) return providers;
const rank = new Map(providerOrder.map((id, index) => [id, index] as const));
const ranked = providers
.filter((provider) => rank.has(provider.id))
.sort((a, b) => (rank.get(a.id) ?? 0) - (rank.get(b.id) ?? 0));
const unranked = providers.filter((provider) => !rank.has(provider.id));
return [...ranked, ...unranked];
}, [providerOrder, providers]);
const filteredProviders = React.useMemo(() => orderedProviders
.filter((provider) => !allowedProviderSet || allowedProviderSet.has(provider.id))
.map((provider) => {
const models = Array.isArray(provider.models) ? provider.models : [];
@@ -423,7 +481,7 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
});
return { ...provider, models: filteredModels };
})
.filter((provider) => provider.models.length > 0), [allowedProviderSet, isHidden, matchesQuery, providers]);
.filter((provider) => provider.models.length > 0), [allowedProviderSet, isHidden, matchesQuery, orderedProviders]);
const flatModelList = React.useMemo(() => {
const items: ModelPickerEntry[] = [];
@@ -438,6 +496,7 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
const hasResults = flatModelList.length > 0;
const favoriteSortingEnabled = Boolean(onReorderFavorite) && searchQuery.trim().length === 0 && filteredFavorites.length > 1;
const providerSortingEnabled = Boolean(onReorderProvider) && searchQuery.trim().length === 0 && !allowedProviderSet && filteredProviders.length > 1;
const favoriteLookup: Map<string, ModelPickerEntry> = React.useMemo(() => new Map(
filteredFavorites.map((entry) => [`${entry.providerID}:${entry.modelID}`, entry] as const),
), [filteredFavorites]);
@@ -591,18 +650,61 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
onReorderFavorite(activeFavorite, overFavorite);
};
const isSectionCollapsed = (key: string) => collapsedSections.has(key);
const toggleSectionCollapsed = (key: string) => {
setCollapsedSections((prev) => {
const next = new Set(prev);
if (next.has(key)) next.delete(key);
else next.add(key);
return next;
});
const handleProviderDragEnd = (event: DragEndEvent) => {
if (!onReorderProvider) return;
const { active, over } = event;
if (!over || active.id === over.id) return;
const ids = orderedProviders.map((provider) => provider.id);
const from = ids.indexOf(String(active.id));
const to = ids.indexOf(String(over.id));
if (from === -1 || to === -1) return;
onReorderProvider(arrayMove(ids, from, to));
};
const renderSectionHeader = (key: string, icon: React.ReactNode, label: React.ReactNode) => {
const isSectionCollapsed = (key: string) => collapsedSections.has(key);
const toggleSectionCollapsed = (key: string) => toggleSection(key);
const renderSectionHeader = (key: string, icon: React.ReactNode, label: React.ReactNode, headerDragProps?: SortableFavoriteHandleProps) => {
const collapsed = isSectionCollapsed(key);
const toggleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
toggleSectionCollapsed(key);
}
};
// When the section is reorderable, the whole header acts as the drag
// activator (desktop mouse, with an 8px threshold so a plain click still
// toggles collapse). A <button> cannot be the activator because dnd-kit's
// attributes/listeners turn it into a draggable widget, so render a div
// with button semantics. The drag listeners are spread first so our
// onClick/onKeyDown collapse handlers take precedence.
if (headerDragProps) {
return (
<div
ref={headerDragProps.setActivatorNodeRef}
{...headerDragProps.attributes}
{...headerDragProps.listeners}
role="button"
tabIndex={0}
aria-expanded={!collapsed}
title={reorderProviderTitle}
className={cn(headerClassName, 'w-full text-left cursor-grab select-none active:cursor-grabbing')}
onClick={() => toggleSectionCollapsed(key)}
onKeyDown={toggleKeyDown}
>
<Icon name="draggable" className="size-3.5 flex-shrink-0 text-muted-foreground/70" />
{icon}
<span className="min-w-0 truncate">{label}</span>
<span className="ml-auto flex size-4 flex-shrink-0 items-center justify-center text-muted-foreground">
<Icon name={collapsed ? 'arrow-right-s' : 'arrow-down-s'} className="size-4" />
</span>
</div>
);
}
return (
<button
type="button"
@@ -619,6 +721,20 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
);
};
const renderProviderSection = (
provider: (typeof filteredProviders)[number],
providerIndex: number,
headerDragProps?: SortableFavoriteHandleProps,
) => (
<>
{providerIndex > 0 ? <div className="h-px bg-border/40 my-1" /> : null}
{renderSectionHeader(`provider:${provider.id}`, <ProviderLogo providerId={provider.id} className="h-4 w-4 flex-shrink-0" />, provider.name || provider.id, headerDragProps)}
{!isSectionCollapsed(`provider:${provider.id}`)
? provider.models.map((model) => renderRow({ model, providerID: provider.id, modelID: model.id as string }, 'provider', false, currentFlatIndex++))
: null}
</>
);
return (
<>
<div className="px-2 py-1 border-b border-border/40">
@@ -687,15 +803,23 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
{(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 ? <div className="h-px bg-border/40 my-1" /> : null}
{filteredProviders.map((provider, providerIndex) => (
<div key={provider.id}>
{providerIndex > 0 ? <div className="h-px bg-border/40 my-1" /> : null}
{renderSectionHeader(`provider:${provider.id}`, <ProviderLogo providerId={provider.id} className="h-4 w-4 flex-shrink-0" />, provider.name || provider.id)}
{!isSectionCollapsed(`provider:${provider.id}`)
? provider.models.map((model) => renderRow({ model, providerID: provider.id, modelID: model.id as string }, 'provider', false, currentFlatIndex++))
: null}
</div>
))}
{providerSortingEnabled ? (
<DndContext sensors={providerSectionSensors} collisionDetection={closestCenter} onDragEnd={handleProviderDragEnd}>
<SortableContext items={filteredProviders.map((provider) => provider.id)} strategy={verticalListSortingStrategy}>
{filteredProviders.map((provider, providerIndex) => (
<SortableProviderSection key={provider.id} id={provider.id} disabled={disabled}>
{(dragHandleProps) => renderProviderSection(provider, providerIndex, dragHandleProps)}
</SortableProviderSection>
))}
</SortableContext>
</DndContext>
) : (
filteredProviders.map((provider, providerIndex) => (
<div key={provider.id}>
{renderProviderSection(provider, providerIndex)}
</div>
))
)}
</div>
</ScrollableOverlay>
packages/ui/src/components/multirun/ModelMultiSelect.tsx
+2
View File
@@ -107,6 +107,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
const { favoriteModelsList, recentModelsList } = useModelLists();
const hiddenModels = useUIStore((state) => state.hiddenModels);
const providerOrder = useUIStore((state) => state.providerOrder);
const [isOpen, setIsOpen] = React.useState(false);
const [searchQuery, setSearchQuery] = React.useState('');
const [availableHeight, setAvailableHeight] = React.useState<number | null>(null);
@@ -260,6 +261,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
>
<ModelPickerList
providers={providers}
providerOrder={providerOrder}
favoriteModels={favoriteModelsList}
recentModels={recentModelsList}
modelsMetadata={modelsMetadata}
packages/ui/src/components/sections/agents/ModelSelector.tsx
+2
View File
@@ -46,6 +46,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
const toggleFavoriteModel = useUIStore((state) => state.toggleFavoriteModel);
const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
const addRecentModel = useUIStore((state) => state.addRecentModel);
const providerOrder = useUIStore((state) => state.providerOrder);
const { favoriteModelsList, recentModelsList } = useModelLists();
const { isMobile: deviceIsMobile } = useDeviceInfo();
const isActuallyMobile = isMobile || deviceIsMobile;
@@ -94,6 +95,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
const picker = (
<ModelPickerList
providers={providers}
providerOrder={providerOrder}
favoriteModels={favoriteModelsList}
recentModels={recentModelsList}
modelsMetadata={modelsMetadata}
packages/ui/src/components/session/sidebar/SessionNodeItem.tsx
+81 -22
View File
@@ -33,6 +33,7 @@ import { useSessionDisplayStore } from '@/stores/useSessionDisplayStore';
import { useSessionUnseenCount } from '@/sync/notification-store';
import { useSessionMultiSelectStore } from '@/stores/useSessionMultiSelectStore';
import { useI18n } from '@/lib/i18n';
import { useShiftKeyHeld } from '@/hooks/useShiftKeyHeld';
import { getRuntimeBearerTokenSync } from '@/lib/runtime-auth';
import { getRuntimeApiBaseUrl } from '@/lib/runtime-switch';
import { parseMultiRunSessionTitle } from '@/lib/multirun/title';
@@ -82,7 +83,7 @@ type Props = {
addSessionToFolder: (scopeKey: string, folderId: string, sessionId: string) => void;
createFolderAndStartRename: (scopeKey: string, parentId?: string | null) => { id: string } | null;
openContextPanelTab: (directory: string, options: { mode: 'chat'; dedupeKey: string; label: string; readOnly?: boolean }) => void;
handleDeleteSession: (session: Session, source?: { archivedBucket?: boolean; hardDelete?: boolean }) => void;
handleDeleteSession: (session: Session, source?: { archivedBucket?: boolean; hardDelete?: boolean; skipConfirm?: boolean }) => void;
mobileVariant: boolean;
alwaysShowActions: boolean;
renderSessionNode: (
@@ -139,6 +140,68 @@ type Props = {
liveSessionById: Map<string, Session>;
};
type QuickSessionActionProps = {
archiveLabel: string;
deleteLabel: string;
buttonSizeClass: string;
iconSizeClass: string;
onPointerDown: (event: React.PointerEvent<HTMLButtonElement>) => void;
onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => void;
onArchive: (event: React.MouseEvent<HTMLButtonElement>) => void;
onDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
};
// Extracted so only this small button re-renders when Shift is pressed/released,
// instead of every mounted session row.
const QuickSessionAction = React.memo(function QuickSessionAction({
archiveLabel,
deleteLabel,
buttonSizeClass,
iconSizeClass,
onPointerDown,
onMouseDown,
onArchive,
onDelete,
}: QuickSessionActionProps): React.ReactNode {
const shiftHeld = useShiftKeyHeld();
const label = shiftHeld ? deleteLabel : archiveLabel;
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
if (shiftHeld || event.shiftKey) {
onDelete(event);
return;
}
onArchive(event);
};
return (
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
className={cn(
'inline-flex items-center justify-center rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
shiftHeld
? 'text-destructive hover:text-destructive'
: 'text-muted-foreground hover:text-foreground',
buttonSizeClass,
)}
aria-label={label}
onPointerDown={onPointerDown}
onMouseDown={onMouseDown}
onClick={handleClick}
onKeyDown={(event) => event.stopPropagation()}
>
<Icon name={shiftHeld ? 'delete-bin' : 'archive'} className={iconSizeClass} />
</button>
</TooltipTrigger>
<TooltipContent side="left" sideOffset={8}>
{label}
</TooltipContent>
</Tooltip>
);
});
function SessionNodeItemComponent(props: Props): React.ReactNode {
const { t } = useI18n();
const {
@@ -634,6 +697,13 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
handleDeleteSession(session, { archivedBucket });
};
const handleQuickDeleteClick = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
event.stopPropagation();
setOpenSidebarMenuKey(null);
handleDeleteSession(session, { archivedBucket, hardDelete: true, skipConfirm: true });
};
const handleOpenInEditorPointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {
event.preventDefault();
event.stopPropagation();
@@ -1046,27 +1116,16 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
: cn('opacity-0', revealOnHoverClass),
)}>
{showQuickArchiveAction ? (
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
className={cn(
'inline-flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
isMinimalMode && !alwaysShowActions ? 'h-4 w-4' : 'h-6 w-6',
)}
aria-label={t('sessions.sidebar.bulkActions.archive')}
onPointerDown={handleQuickArchivePointerDown}
onMouseDown={handleQuickArchiveMouseDown}
onClick={handleQuickArchiveClick}
onKeyDown={(event) => event.stopPropagation()}
>
<Icon name="archive" className={cn(isMinimalMode && !alwaysShowActions ? 'h-2.5 w-2.5' : 'h-3.5 w-3.5')} />
</button>
</TooltipTrigger>
<TooltipContent side="left" sideOffset={8}>
{t('sessions.sidebar.bulkActions.archive')}
</TooltipContent>
</Tooltip>
<QuickSessionAction
archiveLabel={t('sessions.sidebar.bulkActions.archive')}
deleteLabel={t('sessions.sidebar.bulkActions.delete')}
buttonSizeClass={isMinimalMode && !alwaysShowActions ? 'h-4 w-4' : 'h-6 w-6'}
iconSizeClass={isMinimalMode && !alwaysShowActions ? 'h-2.5 w-2.5' : 'h-3.5 w-3.5'}
onPointerDown={handleQuickArchivePointerDown}
onMouseDown={handleQuickArchiveMouseDown}
onArchive={handleQuickArchiveClick}
onDelete={handleQuickDeleteClick}
/>
) : null}
{showOpenInEditorAction ? (
<Tooltip>
packages/ui/src/components/session/sidebar/hooks/useSessionActions.ts
+3 -1
View File
@@ -15,6 +15,8 @@ type DeleteSessionConfirmSetter = React.Dispatch<React.SetStateAction<{
type DeleteSessionSource = {
archivedBucket?: boolean;
hardDelete?: boolean;
/** Bypass the confirmation dialog and delete/archive immediately. */
skipConfirm?: boolean;
};
type Args = {
@@ -253,7 +255,7 @@ export const useSessionActions = (args: Args) => {
collectDescendants(session.id),
shouldHardDelete,
).map((s) => s.id);
if (!args.showDeletionDialog) {
if (!args.showDeletionDialog || source?.skipConfirm === true) {
void executeDeleteSession(session, source, { descendantIds: effectiveDescendantIds });
return;
}
packages/ui/src/components/ui/ProviderLogo.tsx
+1
View File
@@ -34,6 +34,7 @@ export const ProviderLogo: React.FC<ProviderLogoProps> = ({
loading="eager"
decoding="async"
fetchPriority="high"
draggable={false}
onError={handleError}
/>
);
packages/ui/src/hooks/useShiftKeyHeld.ts
+77
View File
@@ -0,0 +1,77 @@
import { useSyncExternalStore } from 'react';
/**
* Tracks whether the Shift key is currently held, shared across all consumers
* via a single set of window listeners.
*
* Using one module-level listener set (instead of per-component listeners)
* keeps this cheap even when many rows subscribe, and `useSyncExternalStore`
* lets unrelated subtrees stay isolated — only components that actually call
* this hook re-render when the Shift state flips.
*/
let shiftHeld = false;
const listeners = new Set<() => void>();
let initialized = false;
function emit(): void {
for (const listener of listeners) {
listener();
}
}
function setShiftHeld(next: boolean): void {
if (shiftHeld === next) {
return;
}
shiftHeld = next;
emit();
}
function handleKeyDown(event: KeyboardEvent): void {
if (event.key === 'Shift') {
setShiftHeld(true);
}
}
function handleKeyUp(event: KeyboardEvent): void {
if (event.key === 'Shift') {
setShiftHeld(false);
}
}
// The window can lose focus while Shift is held (e.g. alt-tab), and the
// matching keyup never arrives — reset so the UI doesn't get stuck in the
// "delete" affordance.
function handleReset(): void {
setShiftHeld(false);
}
function ensureListeners(): void {
if (initialized || typeof window === 'undefined') {
return;
}
initialized = true;
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('keyup', handleKeyUp);
window.addEventListener('blur', handleReset);
}
function subscribe(onStoreChange: () => void): () => void {
ensureListeners();
listeners.add(onStoreChange);
return () => {
listeners.delete(onStoreChange);
};
}
function getSnapshot(): boolean {
return shiftHeld;
}
function getServerSnapshot(): boolean {
return false;
}
export function useShiftKeyHeld(): boolean {
return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}
packages/ui/src/lib/i18n/messages/en.ts
+1
View File
@@ -1999,6 +1999,7 @@ export const dict = {
'chat.modelControls.noProvidersOrModelsFound': 'No providers or models match your search.',
'chat.modelControls.reorderFavoriteAria': 'Reorder favorite',
'chat.modelControls.reorderFavoriteTitle': 'Drag to reorder favorite',
'chat.modelControls.reorderProviderTitle': 'Drag to reorder provider',
'chat.modelControls.permissionLabel.custom': 'Custom',
'chat.modelControls.permissionLabel.allow': 'Allow',
'chat.modelControls.permissionLabel.deny': 'Deny',
packages/ui/src/lib/i18n/messages/es.ts
+1
View File
@@ -1965,6 +1965,7 @@ export const dict: Record<I18nKey, string> = {
"chat.modelControls.noProvidersOrModelsFound": "Ningún proveedor o modelo coincide con tu búsqueda.",
"chat.modelControls.reorderFavoriteAria": "Reordenar favorito",
"chat.modelControls.reorderFavoriteTitle": "Arrastrar para reordenar favorito",
"chat.modelControls.reorderProviderTitle": "Arrastrar para reordenar proveedor",
"chat.modelControls.permissionLabel.custom": "Personalizado",
"chat.modelControls.permissionLabel.allow": "Permitir",
"chat.modelControls.permissionLabel.deny": "Denegar",
packages/ui/src/lib/i18n/messages/fr.ts
+1
View File
@@ -1820,6 +1820,7 @@ export const dict = {
'chat.modelControls.noProvidersOrModelsFound': 'Aucun fournisseur ou modèle ne correspond à votre recherche.',
'chat.modelControls.reorderFavoriteAria': 'Réorganiser les favoris',
'chat.modelControls.reorderFavoriteTitle': 'Faites glisser pour réorganiser les favoris',
'chat.modelControls.reorderProviderTitle': 'Faites glisser pour réorganiser le fournisseur',
'chat.modelControls.permissionLabel.custom': 'Personnalisé',
'chat.modelControls.permissionLabel.allow': 'Permettre',
'chat.modelControls.permissionLabel.deny': 'Refuser',
packages/ui/src/lib/i18n/messages/ko.ts
+1
View File
@@ -1999,6 +1999,7 @@ export const dict: Record<I18nKey, string> = {
'chat.modelControls.noProvidersOrModelsFound': '검색과 일치하는 프로바이더 또는 모델이 없습니다.',
'chat.modelControls.reorderFavoriteAria': '즐겨찾기 순서 변경',
'chat.modelControls.reorderFavoriteTitle': '드래그하여 즐겨찾기 순서 변경',
'chat.modelControls.reorderProviderTitle': '드래그하여 공급자 순서 변경',
'chat.modelControls.permissionLabel.custom': '사용자 지정',
'chat.modelControls.permissionLabel.allow': '허용',
'chat.modelControls.permissionLabel.deny': '거부',
packages/ui/src/lib/i18n/messages/pl.ts
+1
View File
@@ -1169,6 +1169,7 @@ export const dict: Record<I18nKey, string> = {
'chat.modelControls.removeFromFavorites': 'Usuń z ulubionych',
'chat.modelControls.reorderFavoriteAria': 'Zmień kolejność ulubionych',
'chat.modelControls.reorderFavoriteTitle': 'Przeciągnij, aby zmienić kolejność ulubionych',
'chat.modelControls.reorderProviderTitle': 'Przeciągnij, aby zmienić kolejność dostawcy',
'chat.modelControls.resetToDefault': 'Przywróć domyślne',
'chat.modelControls.searchAgents': 'Szukaj agentów',
'chat.modelControls.searchModels': 'Szukaj modeli...',
packages/ui/src/lib/i18n/messages/pt-BR.ts
+1
View File
@@ -1965,6 +1965,7 @@ export const dict: Record<I18nKey, string> = {
"chat.modelControls.noProvidersOrModelsFound": "Nenhum provedor ou modelo corresponde à sua pesquisa.",
"chat.modelControls.reorderFavoriteAria": "Reordenar favorito",
"chat.modelControls.reorderFavoriteTitle": "Arraste para reordenar favorito",
"chat.modelControls.reorderProviderTitle": "Arraste para reordenar provedor",
"chat.modelControls.permissionLabel.custom": "Personalizado",
"chat.modelControls.permissionLabel.allow": "Permitir",
"chat.modelControls.permissionLabel.deny": "Negar",
packages/ui/src/lib/i18n/messages/uk.ts
+1
View File
@@ -1965,6 +1965,7 @@ export const dict: Record<I18nKey, string> = {
"chat.modelControls.noProvidersOrModelsFound": "Жоден провайдер або модель не відповідає пошуку.",
"chat.modelControls.reorderFavoriteAria": "Змінити порядок вибраного",
"chat.modelControls.reorderFavoriteTitle": "Перетягніть, щоб змінити порядок вибраного",
"chat.modelControls.reorderProviderTitle": "Перетягніть, щоб змінити порядок провайдера",
"chat.modelControls.permissionLabel.custom": "Custom",
"chat.modelControls.permissionLabel.allow": "Дозволити",
"chat.modelControls.permissionLabel.deny": "Заборонити",
packages/ui/src/lib/i18n/messages/zh-CN.ts
+1
View File
@@ -1965,6 +1965,7 @@ export const dict: Record<I18nKey, string> = {
'chat.modelControls.noProvidersOrModelsFound': '没有提供商或模型匹配你的搜索。',
'chat.modelControls.reorderFavoriteAria': '重新排序收藏',
'chat.modelControls.reorderFavoriteTitle': '拖动以重新排序收藏',
'chat.modelControls.reorderProviderTitle': '拖动以重新排序提供商',
'chat.modelControls.permissionLabel.custom': '自定义',
'chat.modelControls.permissionLabel.allow': '允许',
'chat.modelControls.permissionLabel.deny': '拒绝',
packages/ui/src/lib/i18n/messages/zh-TW.ts
+1
View File
@@ -1969,6 +1969,7 @@ export const dict: Record<I18nKey, string> = {
'chat.modelControls.noProvidersOrModelsFound': '沒有供應商或模型符合你的搜尋。',
'chat.modelControls.reorderFavoriteAria': '重新排序最愛',
'chat.modelControls.reorderFavoriteTitle': '拖曳以重新排序最愛',
'chat.modelControls.reorderProviderTitle': '拖曳以重新排序供應商',
'chat.modelControls.permissionLabel.custom': '自訂',
'chat.modelControls.permissionLabel.allow': '允許',
'chat.modelControls.permissionLabel.deny': '拒絕',
packages/ui/src/stores/useModelPickerSectionsStore.ts
+36
View File
@@ -0,0 +1,36 @@
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
/**
* Persisted collapsed state for the collapsible sections (accordions) in the
* model/provider picker (`ModelPickerList`): the `favorites` and `recent`
* sections plus each `provider:<id>` group. Section keys are stable and shared
* across every picker surface, so collapsing a provider in one picker is
* remembered everywhere and survives remounts and full page reloads.
*
* Only collapsed keys are stored (presence === collapsed); the default for any
* unknown key is expanded.
*/
type ModelPickerSectionsStore = {
collapsedSections: Record<string, boolean>;
toggleSection: (key: string) => void;
};
export const useModelPickerSectionsStore = create<ModelPickerSectionsStore>()(
persist(
(set) => ({
collapsedSections: {},
toggleSection: (key) =>
set((state) => {
const next = { ...state.collapsedSections };
if (next[key]) delete next[key];
else next[key] = true;
return { collapsedSections: next };
}),
}),
{
name: 'model-picker-collapsed-sections',
version: 1,
},
),
);
packages/ui/src/stores/useUIStore.ts
+15
View File
@@ -577,6 +577,7 @@ interface UIStore {
favoriteModels: Array<{ providerID: string; modelID: string }>;
hiddenModels: Array<{ providerID: string; modelID: string }>;
providerOrder: string[];
collapsedModelProviders: string[];
recentModels: Array<{ providerID: string; modelID: string }>;
recentAgents: string[];
@@ -727,6 +728,7 @@ interface UIStore {
overProviderID: string,
overModelID: string,
) => void;
setProviderOrder: (orderedProviderIDs: string[]) => void;
toggleHiddenModel: (providerID: string, modelID: string) => void;
isHiddenModel: (providerID: string, modelID: string) => boolean;
hideAllModels: (providerID: string, modelIDs: string[]) => void;
@@ -861,6 +863,7 @@ export const useUIStore = create<UIStore>()(
mobileKeyboardMode: getStoredMobileKeyboardMode(),
favoriteModels: [],
hiddenModels: [],
providerOrder: [],
collapsedModelProviders: [],
recentModels: [],
recentAgents: [],
@@ -1735,6 +1738,17 @@ export const useUIStore = create<UIStore>()(
});
},
setProviderOrder: (orderedProviderIDs) => {
set((state) => {
const next = orderedProviderIDs.filter((id) => typeof id === 'string' && id.length > 0);
const current = state.providerOrder;
if (current.length === next.length && current.every((id, index) => id === next[index])) {
return state;
}
return { providerOrder: next };
});
},
toggleHiddenModel: (providerID, modelID) => {
set((state) => {
const exists = state.hiddenModels.some(
@@ -2217,6 +2231,7 @@ export const useUIStore = create<UIStore>()(
cornerRadius: state.cornerRadius,
favoriteModels: state.favoriteModels,
hiddenModels: state.hiddenModels,
providerOrder: state.providerOrder,
collapsedModelProviders: state.collapsedModelProviders,
recentModels: state.recentModels,
recentAgents: state.recentAgents,