Studio: new-chat shortcut, composer draft autosave, archive threads (#5771)
* new-chat shortcut, composer draft autosave, archive threads * fix * Studio: harden chat UX additions for legacy threads and unavailable storage Two robustness fixes on top of the new chat UX features: - groupThreads: coerce archived to a boolean before comparing (Boolean(t.archived) !== archived). Threads from the older browser-only Studio, or any record predating the archived field, can carry archived === undefined/null. The raw `!== archived` comparison dropped those from BOTH the Recents and Archived sidebar groups, hiding existing chats. Treat missing as not-archived so legacy chats still appear in Recents. - composer draft autosave: wrap the localStorage read and write in try/catch. When storage is unavailable (private mode, disabled cookies, blocked storage) or full (quota exceeded), getItem/setItem throw; the throw in the restore effect would surface to React and break the chat page. Draft persistence is best-effort, so degrade quietly. Verified with bun unit tests on the real groupThreads (legacy undefined no longer vanishes) and Playwright across chromium, firefox and webkit (draft save/restore/isolation/clear, new-chat shortcut + crypto.randomUUID, and localStorage blocked/quota throw handling). tsc clean; no new eslint findings. * Fix composer draft bleed and orphan cleanup for PR #5771 Centralize composer draft storage in a small util and tighten two edge cases: - New chat draft bleed: every new chat shared the chat-draft:__new__ slot, so starting a fresh chat could restore the previous one's half-typed text. Clear that slot at every new chat entry point (sidebar buttons and Cmd/Ctrl+Shift+O). - Orphan drafts: deleting a thread left its chat-draft:<id> key behind. Clear the draft for every deleted thread id. New util utils/composer-draft.ts owns the key format and wraps localStorage in try/catch (private mode, blocked storage, quota), replacing the inline copy in thread.tsx so reads and writes stay best effort everywhere. * address review * fix: remove unused chat sidebar binding --------- Co-authored-by: Daniel Han <michaelhan2050@gmail.com> Co-authored-by: Lee Jackson <130007945+Imagineer99@users.noreply.github.com> Co-authored-by: imagineer99 <samleejackson0@gmail.com>
This commit is contained in:
Nilay
GitHub
parent
3427e3fd62
commit
911ceba7fa
6 changed files with 289 additions and 13 deletions
|
|
@ -45,6 +45,8 @@ import { Switch } from "@/components/ui/switch";
|
|||
import { useAnimatedThemeToggle } from "@/components/ui/animated-theme-toggler";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
Archive01Icon,
|
||||
ArchiveRestoreIcon,
|
||||
ChefHatIcon,
|
||||
CursorInfo02Icon,
|
||||
DashboardCircleIcon,
|
||||
|
|
@ -83,13 +85,16 @@ import { HugeiconsIcon } from "@hugeicons/react";
|
|||
import { ChevronDown, ChevronsUpDown, MoreHorizontalIcon, Moon, Sun } from "lucide-react";
|
||||
import { Link, useNavigate, useRouterState } from "@tanstack/react-router";
|
||||
import {
|
||||
archiveChatItem,
|
||||
ChatSearchDialog,
|
||||
clearNewChatDraft,
|
||||
createChatProject,
|
||||
deleteChatProject,
|
||||
deleteChatItem,
|
||||
moveChatItemToProject,
|
||||
renameChatItem,
|
||||
renameChatProject,
|
||||
unarchiveChatItem,
|
||||
useChatRuntimeStore,
|
||||
useChatProjects,
|
||||
useChatSearchStore,
|
||||
|
|
@ -291,15 +296,16 @@ export function AppSidebar() {
|
|||
const activeProjectId = isChatRoute
|
||||
? ((search.project as string | undefined) ?? null)
|
||||
: null;
|
||||
const { items: allChatItems } = useChatSidebarItems({
|
||||
enabled: !isStudioRoute,
|
||||
requireMessages: false,
|
||||
});
|
||||
const { items: allChatItems, archivedItems: archivedChatItems } =
|
||||
useChatSidebarItems({
|
||||
enabled: !isStudioRoute,
|
||||
requireMessages: false,
|
||||
});
|
||||
const recentChatItems = useMemo(
|
||||
() => allChatItems.filter((item) => !item.projectId),
|
||||
[allChatItems],
|
||||
);
|
||||
const chatItems = allChatItems;
|
||||
const [archivedOpen, setArchivedOpen] = useState(false);
|
||||
const storeThreadId = useChatRuntimeStore((s) => s.activeThreadId);
|
||||
const setActiveThreadId = useChatRuntimeStore((s) => s.setActiveThreadId);
|
||||
const activeThreadId = isChatRoute
|
||||
|
|
@ -349,6 +355,7 @@ export function AppSidebar() {
|
|||
|
||||
function openNewChat(projectId = activeProjectId) {
|
||||
if (chatDisabled) return;
|
||||
clearNewChatDraft();
|
||||
setActiveThreadId(null);
|
||||
useChatRuntimeStore.getState().setActiveProjectId(projectId);
|
||||
navigate({ to: "/chat", search: chatSearchForProject(projectId) });
|
||||
|
|
@ -374,6 +381,33 @@ export function AppSidebar() {
|
|||
});
|
||||
}
|
||||
|
||||
async function handleArchiveThread(item: SidebarItem) {
|
||||
try {
|
||||
await archiveChatItem(item, activeThreadId, (view) => {
|
||||
navigate({
|
||||
to: "/chat",
|
||||
search: item.projectId
|
||||
? { project: item.projectId }
|
||||
: { new: view.newThreadNonce },
|
||||
});
|
||||
});
|
||||
} catch (err) {
|
||||
toast.error("Failed to archive chat", {
|
||||
description: err instanceof Error ? err.message : undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUnarchiveThread(item: SidebarItem) {
|
||||
try {
|
||||
await unarchiveChatItem(item);
|
||||
} catch (err) {
|
||||
toast.error("Failed to unarchive chat", {
|
||||
description: err instanceof Error ? err.message : undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
type RenameTarget =
|
||||
| { kind: "chat"; item: SidebarItem; current: string }
|
||||
| { kind: "project"; project: ProjectRecord; current: string }
|
||||
|
|
@ -692,6 +726,10 @@ export function AppSidebar() {
|
|||
</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuItem onSelect={() => void handleArchiveThread(item)}>
|
||||
<HugeiconsIcon icon={Archive01Icon} strokeWidth={1.75} className="size-icon" />
|
||||
<span>Archive</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
onSelect={() => setConfirmingDelete({ kind: "chat", item })}
|
||||
|
|
@ -961,6 +999,85 @@ export function AppSidebar() {
|
|||
</Collapsible>
|
||||
)}
|
||||
|
||||
{/* Archived chats — hidden on Studio + when nothing is archived */}
|
||||
{!isStudioRoute && archivedChatItems.length > 0 && (
|
||||
<Collapsible open={archivedOpen} onOpenChange={setArchivedOpen} asChild>
|
||||
<SidebarGroup className="group-data-[collapsible=icon]:hidden px-0 py-0">
|
||||
<SidebarGroupLabel className={cn("sidebar-sticky-label sidebar-sticky-label-following", scrolled && "is-scrolled")} asChild>
|
||||
<CollapsibleTrigger className="cursor-pointer flex w-full items-center gap-1 group/sb-collap">
|
||||
Archived
|
||||
<ChevronDown className="size-3.5 opacity-0 transition-[transform,opacity] duration-200 group-hover/sb-collap:opacity-100 group-focus-visible/sb-collap:opacity-100 data-[state=open]:rotate-0 [[data-state=closed]_&]:rotate-[-90deg] [[data-state=closed]_&]:opacity-100" />
|
||||
</CollapsibleTrigger>
|
||||
</SidebarGroupLabel>
|
||||
<CollapsibleContent>
|
||||
<SidebarGroupContent className="px-1.5">
|
||||
<SidebarMenu>
|
||||
{archivedChatItems.map((item) => (
|
||||
<SidebarMenuItem key={item.id} className="group/archived-item relative">
|
||||
<SidebarMenuButton
|
||||
data-testid="archived-thread"
|
||||
data-thread-type={item.type}
|
||||
data-thread-id={item.id}
|
||||
isActive={activeThreadId === item.id}
|
||||
className="sidebar-nav-btn h-[33px] cursor-pointer rounded-full pl-3.5 pr-4 group-hover/archived-item:pr-8 group-has-[.sidebar-row-action[data-state=open]]/archived-item:pr-8 text-[14.5px] leading-[19px] tracking-nav font-medium text-muted-foreground"
|
||||
onClick={() => {
|
||||
navigate({
|
||||
to: "/chat",
|
||||
search:
|
||||
item.type === "single"
|
||||
? { thread: item.id }
|
||||
: { compare: item.id },
|
||||
});
|
||||
closeMobileIfOpen();
|
||||
}}
|
||||
>
|
||||
<span className="truncate">{item.title}</span>
|
||||
</SidebarMenuButton>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
aria-label="Archived chat options"
|
||||
className="sidebar-row-action group-hover/archived-item:opacity-100 group-hover/archived-item:pointer-events-auto focus-visible:opacity-100 focus-visible:pointer-events-auto"
|
||||
>
|
||||
<span className="sidebar-row-action-glyph">
|
||||
<HugeiconsIcon icon={MoreVerticalIcon} strokeWidth={1.75} className="size-icon" />
|
||||
</span>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
side="bottom"
|
||||
align="start"
|
||||
sideOffset={0}
|
||||
className="unsloth-plus-menu menu-flat-destructive w-52"
|
||||
>
|
||||
<DropdownMenuItem onSelect={() => openRenameChat(item)}>
|
||||
<HugeiconsIcon icon={Edit03Icon} strokeWidth={1.75} className="size-icon" />
|
||||
<span>Rename</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onSelect={() => void handleUnarchiveThread(item)}>
|
||||
<HugeiconsIcon icon={ArchiveRestoreIcon} strokeWidth={1.75} className="size-icon" />
|
||||
<span>Unarchive</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
onSelect={() => setConfirmingDelete({ kind: "chat", item })}
|
||||
>
|
||||
<HugeiconsIcon icon={Delete02Icon} strokeWidth={1.75} className="size-icon" />
|
||||
<span>Delete</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</CollapsibleContent>
|
||||
</SidebarGroup>
|
||||
</Collapsible>
|
||||
)}
|
||||
|
||||
{isStudioRoute && runItems.length > 0 && !chatOnly && (
|
||||
<Collapsible open={runsOpen} onOpenChange={setRunsOpen} asChild>
|
||||
<SidebarGroup className="group-data-[collapsible=icon]:hidden px-0 py-0">
|
||||
|
|
|
|||
|
|
@ -71,8 +71,11 @@ import { useChatRuntimeStore } from "@/features/chat/stores/chat-runtime-store";
|
|||
import { useExternalProvidersStore } from "@/features/chat/stores/external-providers-store";
|
||||
import {
|
||||
PLUS_MENU_ORDER,
|
||||
composerDraftKey,
|
||||
readComposerDraft,
|
||||
type PlusMenuItemId,
|
||||
usePlusMenuPrefsStore,
|
||||
writeComposerDraft,
|
||||
} from "@/features/chat";
|
||||
import { deleteThreadMessage } from "@/features/chat/utils/delete-thread-message";
|
||||
import { ThreadDocumentsBar } from "@/features/rag/components/thread-documents-bar";
|
||||
|
|
@ -943,6 +946,31 @@ const Composer: FC<{
|
|||
const referenceThreadId = threadId ?? activeThreadId ?? null;
|
||||
const hasSendableContent =
|
||||
composerText.trim().length > 0 || hasAttachments || hasPendingAudio;
|
||||
|
||||
// Per-thread draft autosave: restore on mount, then mirror composer text
|
||||
// into localStorage (debounced) so a half-typed message survives a
|
||||
// navigation or reload. Cleared once empty (i.e. after a send). Setting the
|
||||
// text even when no draft exists keeps a thread from inheriting the
|
||||
// previous thread's composer contents.
|
||||
const draftKey = composerDraftKey(activeThreadId);
|
||||
const lastDraftKeyRef = useRef(draftKey);
|
||||
useEffect(() => {
|
||||
const draft = readComposerDraft(draftKey) ?? "";
|
||||
const composer = aui.composer();
|
||||
if (composer.getState().isEditing) {
|
||||
composer.setText(draft);
|
||||
}
|
||||
}, [draftKey, aui]);
|
||||
useEffect(() => {
|
||||
// After a thread switch composerText can still hold the previous
|
||||
// thread's text; skip that cycle so it isn't saved under the new key.
|
||||
if (lastDraftKeyRef.current !== draftKey) {
|
||||
lastDraftKeyRef.current = draftKey;
|
||||
return;
|
||||
}
|
||||
const t = setTimeout(() => writeComposerDraft(draftKey, composerText), 300);
|
||||
return () => clearTimeout(t);
|
||||
}, [composerText, draftKey]);
|
||||
// Two-row layout shows once the input wraps or a tool is on. Tools can
|
||||
// pre-select before a model loads, so an active toggle expands it either way.
|
||||
const composerExpanded =
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue