Grayscale/nanobot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(webui): complete temporary chat mode

Browse Source
This commit is contained in:
chengyongru
2026-08-08 23:20:59 +08:00
committed by Xubin Ren
parent c9a6145878
commit a5bc3bfbb9
51 changed files with 1285 additions and 945 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/ChatList.tsx
+113 -2
View File
@@ -4,17 +4,20 @@ import {
useMemo,
useRef,
useState,
type RefObject,
} from "react";
import {
Archive,
ArchiveRestore,
Folder,
MessageCircleDashed,
MoreHorizontal,
Pencil,
Pin,
PinOff,
Plus,
Trash2,
X,
} from "lucide-react";
import { useTranslation } from "react-i18next";
@@ -50,8 +53,10 @@ const ACTION_MENU_CONTENT_CLASS = "w-[8.5rem] min-w-[8.5rem]";
interface ChatListProps {
sessions: ChatSummary[];
temporarySessions?: ChatSummary[];
activeKey: string | null;
onSelect: (key: string) => void;
onCloseTemporaryChat?: (key: string) => void;
onRequestDelete: (key: string, label: string) => void;
onTogglePin: (key: string) => void;
onRequestRename: (key: string, label: string) => void;
@@ -81,8 +86,10 @@ interface ChatListProps {
export const ChatList = memo(function ChatList({
sessions,
temporarySessions = [],
activeKey,
onSelect,
onCloseTemporaryChat,
onRequestDelete,
onTogglePin,
onRequestRename,
@@ -188,7 +195,7 @@ export const ChatList = memo(function ChatList({
setVisibleLimit(INITIAL_VISIBLE_SESSIONS);
}, [showArchived, sort]);
if (loading && sessions.length === 0) {
if (loading && sessions.length === 0 && temporarySessions.length === 0) {
return (
<div className="px-3 py-6 text-[12px] text-muted-foreground">
{t("chat.loading")}
@@ -196,7 +203,7 @@ export const ChatList = memo(function ChatList({
);
}
if (sessions.length === 0) {
if (sessions.length === 0 && temporarySessions.length === 0) {
return (
<div className="px-3 py-6 text-[12px] leading-5 text-muted-foreground/80">
{emptyLabel ?? t("chat.noSessions")}
@@ -237,6 +244,17 @@ export const ChatList = memo(function ChatList({
data-chat-list-content
className="relative min-w-0 space-y-3 px-2 py-1.5"
>
{temporarySessions.length > 0 ? (
<TemporaryChatSection
sessions={temporarySessions}
activeKey={activeKey}
activeRowRef={activeRowRef}
running={running}
onSelect={onSelect}
onClose={onCloseTemporaryChat}
actionMenuPortalContainer={actionMenuPortalContainer}
/>
) : null}
{limitedGroups.map((group, index) => {
const foldableChatsGroup = isFoldableChatsGroup(group);
const foldedChatsGroup = isFoldedChatsGroup(group, collapsedGroups);
@@ -497,6 +515,99 @@ export const ChatList = memo(function ChatList({
);
});
function TemporaryChatSection({
sessions,
activeKey,
activeRowRef,
running,
onSelect,
onClose,
actionMenuPortalContainer,
}: {
sessions: ChatSummary[];
activeKey: string | null;
activeRowRef: RefObject<HTMLDivElement>;
running: ReadonlySet<string>;
onSelect: (key: string) => void;
onClose?: (key: string) => void;
actionMenuPortalContainer?: HTMLElement | null;
}) {
const { t } = useTranslation();
return (
<section aria-label={t("temporaryChat.sectionTitle")} className="relative z-[1]">
<ChatsGroupHeader label={t("temporaryChat.sectionTitle")} />
<ul className="space-y-0.5">
{sessions.map((session) => {
const active = session.key === activeKey;
const title = deriveTitle(session.preview, t("temporaryChat.title"));
return (
<li key={session.key} className="min-w-0">
<div
ref={active ? activeRowRef : undefined}
data-temporary-chat-row={session.key}
className={cn(
"group flex min-h-8 min-w-0 max-w-full items-center gap-2 rounded-xl px-2 text-[13px]",
SIDEBAR_SELECTION_ITEM_CLASS,
active
? "text-sidebar-accent-foreground"
: "text-sidebar-foreground/82 hover:bg-sidebar-foreground/[0.035] hover:text-sidebar-foreground dark:hover:bg-white/[0.05]",
)}
>
<button
type="button"
onClick={() => onSelect(session.key)}
aria-current={active ? "page" : undefined}
title={title}
className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden py-1.5 text-left"
>
<MessageCircleDashed
className="h-3.5 w-3.5 shrink-0 text-[hsl(var(--temporary-foreground))]"
aria-hidden
/>
<span className="min-w-0 flex-1 truncate font-medium leading-5">
{title}
</span>
</button>
<SessionActivityIndicator state={running.has(session.chatId) ? "running" : null} />
{onClose ? (
<DropdownMenu modal={false}>
<DropdownMenuTrigger
className={cn(
"inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground/75 opacity-40 transition-opacity",
"hover:bg-sidebar-accent hover:text-sidebar-foreground group-hover:opacity-100",
"focus-visible:opacity-100",
active && "opacity-100",
)}
aria-label={t("chat.actions", { title })}
>
<MoreHorizontal className="h-3.5 w-3.5" />
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className={ACTION_MENU_CONTENT_CLASS}
portalContainer={actionMenuPortalContainer}
onCloseAutoFocus={(event) => event.preventDefault()}
>
<DropdownMenuItem
tone="destructive"
onSelect={() => onClose(session.key)}
>
<X className="h-4 w-4 shrink-0" />
{t("temporaryChat.closeAction")}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
) : null}
</div>
</li>
);
})}
</ul>
</section>
);
}
function ProjectGroupHeader({
label,
path,
webui/src/components/MessageBubble.tsx
+8 -1
View File
@@ -52,6 +52,8 @@ import type {
interface MessageBubbleProps {
message: UIMessage;
/** Give temporary-chat user turns the dashed private-mode treatment. */
temporary?: boolean;
/** When false, hide this message's copy button. Default true. */
showCopyAction?: boolean;
cliApps?: CliAppInfo[];
@@ -258,6 +260,7 @@ function UserDeliveryStatus({
/** Render user turns as compact bubbles and assistant turns as document-like prose. */
export function MessageBubble({
message,
temporary = false,
showCopyAction = true,
cliApps = [],
mcpPresets = [],
@@ -326,9 +329,13 @@ export function MessageBubble({
) : null}
{hasText ? (
<p
data-temporary-message={temporary ? "true" : undefined}
className={cn(
"ml-auto w-fit max-w-full min-w-0 rounded-[18px] bg-secondary/70 px-4 py-2",
"ml-auto w-fit max-w-full min-w-0 rounded-[18px] px-4 py-2",
"text-left text-[16px]/[1.75] whitespace-pre-wrap [overflow-wrap:anywhere]",
temporary
? "border border-dashed border-muted-foreground/40 bg-transparent"
: "bg-secondary/70",
)}
>
{messageText}
webui/src/components/Sidebar.tsx
+6 -15
View File
@@ -8,7 +8,6 @@ import {
Archive,
Brain,
CalendarClock,
MessageCircleDashed,
Menu,
Search,
Settings,
@@ -32,13 +31,13 @@ import { cn } from "@/lib/utils";
interface SidebarProps {
sessions: ChatSummary[];
temporarySessions?: ChatSummary[];
activeKey: string | null;
loading: boolean;
newChatActive: boolean;
temporaryChatActive: boolean;
onNewChat: () => void;
onOpenTemporaryChat: () => void;
onSelect: (key: string) => void;
onCloseTemporaryChat?: (key: string) => void;
onRequestDelete: (key: string, label: string) => void;
onTogglePin: (key: string) => void;
onRequestRename: (key: string, label: string) => void;
@@ -98,10 +97,8 @@ export function Sidebar(props: SidebarProps) {
const toggleLabel = t("thread.header.toggleSidebar");
const newChatShortcut = newChatShortcutLabel();
const activeActionRef = useRef<HTMLButtonElement>(null);
const activeActionId = props.temporaryChatActive
? "temporary-chat"
: props.newChatActive
? "new-chat"
const activeActionId = props.newChatActive
? "new-chat"
: props.activeUtility
? `utility:${props.activeUtility}`
: null;
@@ -175,14 +172,6 @@ export function Sidebar(props: SidebarProps) {
shortcut={newChatShortcut}
ariaKeyShortcuts="Meta+Shift+O Control+Shift+O"
/>
<SidebarActionButton
collapsed={collapsed}
label={t("temporaryChat.title")}
onClick={props.onOpenTemporaryChat}
active={props.temporaryChatActive}
selectionRef={activeActionRef}
icon={<MessageCircleDashed className="h-4 w-4" />}
/>
<SidebarActionButton
collapsed={collapsed}
label={t("sidebar.searchAria")}
@@ -234,10 +223,12 @@ export function Sidebar(props: SidebarProps) {
{!collapsed && (
<ChatList
sessions={props.sessions}
temporarySessions={props.temporarySessions}
activeKey={props.activeKey}
loading={props.loading}
emptyLabel={t("chat.noSessions")}
onSelect={props.onSelect}
onCloseTemporaryChat={props.onCloseTemporaryChat}
onRequestDelete={props.onRequestDelete}
onTogglePin={props.onTogglePin}
onRequestRename={props.onRequestRename}
webui/src/components/thread/ThreadComposer.tsx
+30 -30
View File
@@ -7,6 +7,7 @@ import {
useState,
type CSSProperties,
type KeyboardEvent as ReactKeyboardEvent,
type Ref,
} from "react";
import { MarkdownText, preloadMarkdownText } from "@/components/MarkdownText";
@@ -200,14 +201,14 @@ interface ThreadComposerProps {
sessions?: ChatSummary[];
skills?: SkillSummary[];
onStop?: () => void;
surfaceRef?: Ref<HTMLDivElement>;
onTranscribeAudio?: (dataUrl: string, options?: { durationMs?: number }) => Promise<string>;
/** Unix seconds from server; turn elapsed timer above input while set. */
runStartedAt?: number | null;
/** Sustained objective for this chat (WebSocket ``goal_state``). */
goalState?: GoalStateWsPayload;
workspaceScope?: WorkspaceScopePayload | null;
compactWorkspaceControls?: boolean;
workspaceConnected?: boolean;
workspaceControlsHidden?: boolean;
workspaceDefaultScope?: WorkspaceScopePayload | null;
workspaceControls?: WorkspacesPayload["controls"] | null;
workspaceScopeDisabled?: boolean;
@@ -956,12 +957,12 @@ export function ThreadComposer({
sessions = [],
skills = [],
onStop,
surfaceRef,
onTranscribeAudio,
runStartedAt = null,
goalState,
workspaceScope = null,
compactWorkspaceControls = false,
workspaceConnected = false,
workspaceControlsHidden = false,
workspaceDefaultScope = null,
workspaceControls = null,
workspaceScopeDisabled = false,
@@ -1017,7 +1018,7 @@ export function ThreadComposer({
&& !!workspaceDefaultScope
&& !!onWorkspaceScopeChange
&& workspaceControls?.can_change_project !== false;
const showProjectPicker = projectPickerAvailable && !compactWorkspaceControls;
const showProjectPicker = projectPickerAvailable && !workspaceControlsHidden;
useEffect(() => {
secondEnterPromptIdRef.current = null;
@@ -2249,6 +2250,7 @@ export function ThreadComposer({
/>
) : null}
<div
ref={surfaceRef}
className={cn(
"thread-composer-surface group/composer relative mx-auto flex w-full flex-col overflow-visible transition-all duration-200",
isHero
@@ -2394,7 +2396,7 @@ export function ThreadComposer({
) : null}
<div
className={cn(
"thread-composer-footer flex flex-nowrap items-center",
"thread-composer-footer flex flex-nowrap items-center motion-safe:transition-[padding-bottom] motion-safe:[transition-duration:220ms] motion-safe:ease-in-out",
isHero
? cn(
"gap-x-1.5 px-3 sm:px-4",
@@ -2433,19 +2435,6 @@ export function ThreadComposer({
>
<Plus className={cn(isHero ? "h-[18px] w-[18px]" : "h-4 w-4")} />
</Button>
{compactWorkspaceControls && projectPickerAvailable ? (
<WorkspaceProjectPicker
compact
connected={workspaceConnected}
isHero={isHero}
disabled={disabled || workspaceScopeDisabled}
scope={workspaceScope}
defaultScope={workspaceDefaultScope}
controls={workspaceControls}
error={workspaceError}
onChange={onWorkspaceScopeChange}
/>
) : null}
{voiceRecorder.isRecording ? (
<VoiceRecordingMeter
ariaLabel={voiceRecordingStatusLabel}
@@ -2454,7 +2443,7 @@ export function ThreadComposer({
isHero={isHero}
levels={voiceRecorder.levels}
/>
) : workspaceScope && (!compactWorkspaceControls || workspaceConnected) ? (
) : workspaceScope && !workspaceControlsHidden ? (
<WorkspaceAccessMenu
scope={workspaceScope}
disabled={disabled || workspaceScopeDisabled}
@@ -2565,16 +2554,27 @@ export function ThreadComposer({
</Button>
</div>
</div>
{showProjectPicker ? (
<WorkspaceProjectPicker
isHero={isHero}
disabled={disabled || workspaceScopeDisabled}
scope={workspaceScope}
defaultScope={workspaceDefaultScope}
controls={workspaceControls}
error={workspaceError}
onChange={onWorkspaceScopeChange}
/>
{projectPickerAvailable ? (
<div
className="composer-workspace-drawer"
data-composer-workspace-drawer=""
data-state={showProjectPicker ? "open" : "closed"}
aria-hidden={showProjectPicker ? undefined : true}
>
<div className="composer-workspace-drawer-clip">
<div className="composer-workspace-drawer-content">
<WorkspaceProjectPicker
isHero={isHero}
disabled={disabled || workspaceScopeDisabled || !showProjectPicker}
scope={workspaceScope}
defaultScope={workspaceDefaultScope}
controls={workspaceControls}
error={workspaceError}
onChange={onWorkspaceScopeChange}
/>
</div>
</div>
</div>
) : null}
</div>
</form>
webui/src/components/thread/ThreadHeader.tsx
+55 -3
View File
@@ -1,8 +1,14 @@
import { Menu, Moon, Sun } from "lucide-react";
import type { ReactNode } from "react";
import { Menu, MessageCircleDashed, Moon, Sun } from "lucide-react";
import { type ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
interface ThreadHeaderProps {
@@ -16,6 +22,9 @@ interface ThreadHeaderProps {
minimal?: boolean;
promptNavigatorAction?: ReactNode;
sessionInfoAction?: ReactNode;
temporaryChatEnabled?: boolean;
temporaryChatDisabled?: boolean;
onTemporaryChatEnabledChange?: (enabled: boolean) => void;
}
export function ThreadHeader({
@@ -29,13 +38,17 @@ export function ThreadHeader({
minimal = false,
promptNavigatorAction,
sessionInfoAction,
temporaryChatEnabled = false,
temporaryChatDisabled = false,
onTemporaryChatEnabledChange,
}: ThreadHeaderProps) {
const { t } = useTranslation();
return (
<div
data-testid="thread-header"
className={cn(
"relative z-10 flex items-center justify-between gap-3 px-3 py-2",
"relative z-30 flex items-center justify-between gap-3 px-3 py-2",
minimal && "h-11",
!minimal && hostChromeTitleInset && "lg:pl-[128px]",
)}
@@ -63,6 +76,45 @@ export function ThreadHeader({
<div className="ml-auto flex shrink-0 items-center gap-1">
{sessionInfoAction}
{promptNavigatorAction}
{onTemporaryChatEnabledChange ? (
<TooltipProvider delayDuration={700} skipDelayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<Button
type="button"
variant="ghost"
size="icon"
disabled={temporaryChatDisabled}
aria-label={t("temporaryChat.title")}
aria-pressed={temporaryChatEnabled}
onClick={() => onTemporaryChatEnabledChange(!temporaryChatEnabled)}
className={cn(
"host-no-drag h-8 w-8 shrink-0 rounded-full bg-transparent text-muted-foreground shadow-none transition-none hover:text-foreground",
temporaryChatEnabled ? "hover:bg-transparent" : "hover:bg-accent/45",
)}
>
<MessageCircleDashed
data-testid="temporary-chat-icon"
className={cn(
"h-4 w-4 motion-safe:transition-colors",
temporaryChatEnabled
? "text-[var(--temporary-control-active)] motion-safe:duration-150"
: "text-current motion-safe:duration-75",
)}
aria-hidden
/>
</Button>
</TooltipTrigger>
<TooltipContent
side="bottom"
align="end"
className="max-w-72 rounded-xl border border-border/70 bg-popover px-3 py-2 text-[12px]/[1.4] text-popover-foreground shadow-[0_8px_24px_rgba(15,23,42,0.13)] dark:border-white/10"
>
{t("temporaryChat.description")}
</TooltipContent>
</Tooltip>
</TooltipProvider>
) : null}
{!hideThemeButton ? (
<ThemeButton
theme={theme}
webui/src/components/thread/ThreadMessages.tsx
+7
View File
@@ -8,6 +8,7 @@ import type { CliAppInfo, McpPresetInfo, SlashCommand, UIMessage } from "@/lib/t
interface ThreadMessagesProps {
messages: UIMessage[];
temporary?: boolean;
/** When true, agent turn still in flight — keeps activity timeline expanded. */
isStreaming?: boolean;
hiddenUserMessageCount?: number;
@@ -50,6 +51,7 @@ export function assistantForkFlags(units: DisplayUnit[]): boolean[] {
export function ThreadMessages({
messages,
temporary = false,
isStreaming = false,
hiddenUserMessageCount = 0,
cliApps = [],
@@ -125,6 +127,7 @@ export function ThreadMessages({
forkIndex={forkIndex}
showForkBoundary={index === forkBoundaryAfterUnitIndex}
forkBoundaryLabel={t("thread.forkedFromHistory")}
temporary={temporary}
cliApps={cliApps}
mcpPresets={mcpPresets}
slashCommands={slashCommands}
@@ -147,6 +150,7 @@ interface ThreadDisplayUnitProps {
forkIndex?: number;
showForkBoundary: boolean;
forkBoundaryLabel: string;
temporary: boolean;
cliApps: CliAppInfo[];
mcpPresets: McpPresetInfo[];
slashCommands: SlashCommand[];
@@ -164,6 +168,7 @@ const ThreadDisplayUnit = memo(function ThreadDisplayUnit({
forkIndex,
showForkBoundary,
forkBoundaryLabel,
temporary,
cliApps,
mcpPresets,
slashCommands,
@@ -200,6 +205,7 @@ const ThreadDisplayUnit = memo(function ThreadDisplayUnit({
) : (
<MessageBubble
message={unit.message}
temporary={temporary}
cliApps={cliApps}
mcpPresets={mcpPresets}
slashCommands={slashCommands}
@@ -227,6 +233,7 @@ function threadDisplayUnitPropsEqual(
&& previous.forkIndex === next.forkIndex
&& previous.showForkBoundary === next.showForkBoundary
&& previous.forkBoundaryLabel === next.forkBoundaryLabel
&& previous.temporary === next.temporary
&& previous.cliApps === next.cliApps
&& previous.mcpPresets === next.mcpPresets
&& previous.slashCommands === next.slashCommands
webui/src/components/thread/ThreadShell.tsx
+33 -44
View File
@@ -1,11 +1,9 @@
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import type { PointerEvent as ReactPointerEvent } from "react";
import { RotateCcw } from "lucide-react";
import { useTranslation } from "react-i18next";
import { FilePreviewAvailabilityProvider } from "@/components/FilePreviewAvailabilityContext";
import { FilePreviewPanel } from "@/components/FilePreviewPanel";
import { Button } from "@/components/ui/button";
import { PromptNavigator } from "@/components/thread/PromptNavigator";
import { SessionInfoPopover } from "@/components/thread/SessionInfoPopover";
import { ThreadComposer } from "@/components/thread/ThreadComposer";
@@ -35,6 +33,7 @@ import {
} from "@/lib/mcp-preset-events";
import type { CanonicalRunSnapshot, StreamError } from "@/lib/nanobot-client";
import { inferProviderFromModelName, providerDisplayLabel } from "@/lib/provider-brand";
import { isTemporaryChatId } from "@/lib/temporary-chat";
import type {
ChatSummary,
SettingsPayload,
@@ -298,11 +297,16 @@ interface ThreadShellProps {
sessions?: ChatSummary[];
title: string;
temporary?: boolean;
onClearTemporaryChat?: () => void;
temporaryChatIds?: readonly string[];
temporaryChatEnabled?: boolean;
onTemporaryChatEnabledChange?: (enabled: boolean) => void;
onToggleSidebar: () => void;
onGoHome?: () => void;
onNewChat?: () => void;
onCreateChat?: (workspaceScope?: WorkspaceScopePayload | null) => Promise<string | null>;
onCreateChat?: (
workspaceScope?: WorkspaceScopePayload | null,
initialMessage?: string,
) => Promise<string | null>;
onForkChat?: (sourceChatId: string, beforeUserIndex: number) => Promise<string | null>;
onTurnEnd?: () => void;
theme?: "light" | "dark";
@@ -312,7 +316,6 @@ interface ThreadShellProps {
hideThemeButton?: boolean;
hideHeader?: boolean;
workspaceScope?: WorkspaceScopePayload | null;
workspaceConnected?: boolean;
workspaceDefaultScope?: WorkspaceScopePayload | null;
workspaceControls?: WorkspacesPayload["controls"] | null;
workspaceScopeDisabled?: boolean;
@@ -482,7 +485,7 @@ function HeroGreeting({ text }: { text: string }) {
<h1
ref={headingRef}
data-testid="hero-greeting"
className="whitespace-nowrap text-[34px] font-normal leading-[1.08] tracking-normal text-foreground sm:text-[48px] sm:leading-tight"
className="select-none whitespace-nowrap text-[34px] font-normal leading-[1.08] tracking-normal text-foreground sm:text-[48px] sm:leading-tight"
>
{text}
</h1>
@@ -586,7 +589,9 @@ export function ThreadShell({
sessions = [],
title,
temporary = false,
onClearTemporaryChat,
temporaryChatIds = [],
temporaryChatEnabled = false,
onTemporaryChatEnabledChange,
onToggleSidebar,
onCreateChat,
onForkChat,
@@ -598,7 +603,6 @@ export function ThreadShell({
hideThemeButton = false,
hideHeader = false,
workspaceScope = null,
workspaceConnected = false,
workspaceDefaultScope = null,
workspaceControls = null,
workspaceScopeDisabled = false,
@@ -665,6 +669,7 @@ export function ThreadShell({
const [quotedContext, setQuotedContext] = useState<string | null>(null);
const [composerFocusSignal, setComposerFocusSignal] = useState(0);
const shellRef = useRef<HTMLElement | null>(null);
const composerSurfaceRef = useRef<HTMLDivElement | null>(null);
const filePreviewWidthRef = useRef(FILE_PREVIEW_DEFAULT_WIDTH);
const filePreviewCloseTimerRef = useRef<number | null>(null);
const pendingFirstRef = useRef<PendingFirstMessage | null>(null);
@@ -672,7 +677,6 @@ export function ThreadShell({
const viewportRef = useRef<ThreadViewportHandle | null>(null);
const activeViewportTurnByChatIdRef = useRef<Map<string, string>>(new Map());
const messageCacheRef = useRef<Map<string, UIMessage[]>>(new Map());
const temporaryChatIdRef = useRef<string | null>(null);
/** Last chatId we associated with the in-memory thread (for cache-on-switch). */
const prevChatIdForCacheRef = useRef<string | null>(null);
/** Skip one message-cache write right after chatId changes (messages may not match yet). */
@@ -687,6 +691,8 @@ export function ThreadShell({
const sessionKeyByChatIdRef = useRef<Map<string, string>>(new Map());
const currentUiMessagesRef = useRef<UIMessage[] | null>(null);
const uiRevisionRef = useRef(0);
const showTemporaryChatControl =
!hideHeader && !session && !loading && !!onTemporaryChatEnabledChange;
const initial = useMemo(() => {
if (!chatId) return historical;
@@ -746,13 +752,14 @@ export function ThreadShell({
}, [historyKey]);
useEffect(() => {
if (!temporary || !chatId) return;
const previous = temporaryChatIdRef.current;
temporaryChatIdRef.current = chatId;
if (!previous || previous === chatId) return;
messageCacheRef.current.delete(previous);
activeViewportTurnByChatIdRef.current.delete(previous);
}, [chatId, temporary]);
const retained = new Set(temporaryChatIds);
for (const cachedChatId of messageCacheRef.current.keys()) {
if (isTemporaryChatId(cachedChatId) && !retained.has(cachedChatId)) {
messageCacheRef.current.delete(cachedChatId);
activeViewportTurnByChatIdRef.current.delete(cachedChatId);
}
}
}, [temporaryChatIds]);
const handleQuoteSelection = useCallback((text: string) => {
setQuotedContext(text);
@@ -1256,7 +1263,7 @@ export function ThreadShell({
setBooting(true);
pendingFirstRef.current = { content, images, options: withWorkspaceScope(options) };
setPendingFirstTargetChatId(null);
const newId = await onCreateChat?.(workspaceScope);
const newId = await onCreateChat?.(workspaceScope, content);
if (!newId) {
pendingFirstRef.current = null;
setPendingFirstTargetChatId(null);
@@ -1422,8 +1429,7 @@ export function ThreadShell({
runStartedAt={currentRunStartedAt}
goalState={currentGoalState}
workspaceScope={workspaceScope}
compactWorkspaceControls={temporary}
workspaceConnected={workspaceConnected}
workspaceControlsHidden={temporary}
workspaceDefaultScope={workspaceDefaultScope}
workspaceControls={workspaceControls}
workspaceScopeDisabled={workspaceScopeDisabled}
@@ -1462,12 +1468,12 @@ export function ThreadShell({
mcpPresets={mcpPresets}
sessions={mentionSessions}
skills={skills}
surfaceRef={composerSurfaceRef}
runStartedAt={currentRunStartedAt}
onTranscribeAudio={transcribeAudio}
goalState={currentGoalState}
workspaceScope={workspaceScope}
compactWorkspaceControls={temporary}
workspaceConnected={workspaceConnected}
workspaceControlsHidden={temporary}
workspaceDefaultScope={workspaceDefaultScope}
workspaceControls={workspaceControls}
workspaceScopeDisabled={workspaceScopeDisabled}
@@ -1491,29 +1497,6 @@ export function ThreadShell({
);
const sessionInfoAction = historyKey ? (
<SessionInfoPopover sessionKey={historyKey} token={token} title={title} />
) : temporary ? (
<div className="flex items-center gap-1">
<span
className="rounded-full border border-border/70 bg-muted/35 px-2 py-1 text-[11px] text-muted-foreground"
title={t("temporaryChat.description")}
>
{t("temporaryChat.notSaved")}
</span>
{onClearTemporaryChat ? (
<Button
type="button"
variant="ghost"
size="icon"
disabled={turnActive}
aria-label={t("temporaryChat.clear")}
title={t("temporaryChat.clear")}
onClick={onClearTemporaryChat}
className="h-8 w-8 rounded-full text-muted-foreground/85 hover:bg-accent/40 hover:text-foreground"
>
<RotateCcw className="h-3.5 w-3.5" />
</Button>
) : null}
</div>
) : undefined;
const promptNavigatorAction = historyKey ? (
<PromptNavigator
@@ -1537,6 +1520,11 @@ export function ThreadShell({
minimal={!session && !loading}
promptNavigatorAction={promptNavigatorAction}
sessionInfoAction={sessionInfoAction}
temporaryChatEnabled={temporaryChatEnabled}
temporaryChatDisabled={booting || turnActive}
onTemporaryChatEnabledChange={
showTemporaryChatControl ? onTemporaryChatEnabledChange : undefined
}
/>
) : null}
<FilePreviewAvailabilityProvider
@@ -1545,6 +1533,7 @@ export function ThreadShell({
<ThreadViewport
ref={viewportRef}
messages={displayMessages}
temporary={temporary}
isStreaming={turnActive}
emptyState={emptyState}
composer={composer}
webui/src/components/thread/ThreadViewport.tsx
+3
View File
@@ -35,6 +35,7 @@ export interface ThreadViewportHandle {
interface ThreadViewportProps {
messages: UIMessage[];
temporary?: boolean;
isStreaming: boolean;
composer: ReactNode;
emptyState?: ReactNode;
@@ -157,6 +158,7 @@ function readSoftKeyboardInsetBottom(container: HTMLElement | null): number {
export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportProps>(function ThreadViewport({
messages,
temporary = false,
isStreaming,
composer,
emptyState,
@@ -682,6 +684,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
<div ref={messageContentRef} className="mx-auto w-full max-w-[49.5rem]">
<ThreadMessages
messages={visibleMessages}
temporary={temporary}
isStreaming={isStreaming}
hiddenUserMessageCount={hiddenUserMessageCount}
cliApps={cliApps}
webui/src/components/thread/WorkspaceControls.tsx
+6 -2
View File
@@ -78,8 +78,12 @@ export function WorkspaceProjectPicker({
}, [currentProjectScope?.project_path, open]);
useEffect(() => {
if (error && visible) setOpen(true);
}, [error, visible]);
if (disabled) setOpen(false);
}, [disabled]);
useEffect(() => {
if (error && visible && !disabled) setOpen(true);
}, [disabled, error, visible]);
const applyProjectPath = useCallback(
(projectPath: string, projectName?: string) => {