Bohdan Triapitsyn
86ef96302d
Navigation model rebuilt around two full-width drawers and a minimal header (sessions / title-switcher / usage ring / workspace): - Left sessions drawer: cross-project tree with live status indicators, swipe actions on sessions (rename/archive/delete) and on group headers (project edit / two-step close, worktree delete), reorder-only edit mode with collapsible project cards and draggable worktrees, app-level footer (connected instance, settings, pending web update). - Right workspace drawer: Changes / Files / Terminal / Notes / MCP as pill tabs (inactive tabs icon-only); panes stay mounted once visited. The full desktop file editor serves the Files tab; read/skill tool taps in chat open the file there at the requested line. - Header session switcher on title tap: 10 cross-project recents with live busy/attention indicators and project · branch metadata; the usage ring opens a metadata overlay with an explicit loading state. - The overflow menu is gone on phones (its destinations moved into the drawers); iPad keeps it until its dedicated layout pass. Correctness and continuity: - /auth/session answers bearer-first, so a stale WebView cookie can no longer mask a revoked device token; cold launches classify failures fast and land on an explicit connect screen. - Authoritative session snapshots raise frozen ordering baselines and stale live ranks — recents stay truthful after the app slept. - Cold launches reopen the last active session per instance (persisted pointer, confirmed against a sessions snapshot; a user-opened draft clears it), with a logo hold instead of a draft flash. Also: collapsed pill composer gains the stop control; chat tool rows share one 36px rhythm; Task subtool rows truncate; larger bottom safe area so the composer clears big-screen corner radii; Capacitor build hides About/Update (store updates apply there); widgets link to the sessions drawer with a list icon; MobileApp split into focused modules; five mobile-surface detectors unified; translucent borders normalized to 70%; all new strings translated across the 10 locales. iPad and foldable layouts are intentionally untouched - separate next version PR.
1221 lines
51 KiB
TypeScript
1221 lines
51 KiB
TypeScript
import React from 'react';
|
|
import type { Message, Part, Session } from '@opencode-ai/sdk/v2';
|
|
import type { PermissionRequest } from '@/types/permission';
|
|
import type { QuestionRequest } from '@/types/question';
|
|
|
|
import { ChatInput } from './ChatInput';
|
|
import { DraftPresetChips } from './DraftPresetChips';
|
|
import { useInputStore } from '@/sync/input-store';
|
|
import { useUIStore } from '@/stores/useUIStore';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import ChatEmptyState from './ChatEmptyState';
|
|
import { useGlobalSyncStore } from '@/sync/global-sync-store';
|
|
import MessageList, { type MessageListHandle } from './MessageList';
|
|
import { PermissionCard } from './PermissionCard';
|
|
import { QuestionCard } from './QuestionCard';
|
|
import { StatusRowContainer } from './StatusRowContainer';
|
|
import { SessionRecapNote } from '@/components/chat/SessionRecapSpacer';
|
|
import ScrollToBottomButton from './components/ScrollToBottomButton';
|
|
import { PromptNavigatorRail } from './components/PromptNavigatorRail';
|
|
import { ScrollShadow } from '@/components/ui/ScrollShadow';
|
|
import { useChatAutoFollow, type AnimationHandlers, type ContentChangeReason } from '@/hooks/useChatAutoFollow';
|
|
import { useChatTimelineController } from './hooks/useChatTimelineController';
|
|
import { TimelineDialog } from './TimelineDialog';
|
|
import { useChatTurnNavigation } from './hooks/useChatTurnNavigation';
|
|
import { useChatSurfaceMode } from './useChatSurfaceMode';
|
|
import { useDeviceInfo } from '@/lib/device';
|
|
import { Button } from '@/components/ui/button';
|
|
import { OverlayScrollbar } from '@/components/ui/OverlayScrollbar';
|
|
import { Icon } from "@/components/icon/Icon";
|
|
import { cn, formatDirectoryName } from '@/lib/utils';
|
|
import { useProjectsStore } from '@/stores/useProjectsStore';
|
|
|
|
// New sync system imports
|
|
import { useSessionUIStore } from '@/sync/session-ui-store';
|
|
import { useStreamingStore } from '@/sync/streaming';
|
|
import {
|
|
useSessionMessageCount,
|
|
useSessionMessageRecords,
|
|
useSessionMessageLoadState,
|
|
useSyncDirectory,
|
|
useSessionRenderable,
|
|
useSessionStatus,
|
|
useScopedBlockingPermissions,
|
|
useScopedBlockingQuestions,
|
|
useParentSession,
|
|
useSession,
|
|
} from '@/sync/sync-context';
|
|
import { useSync } from '@/sync/use-sync';
|
|
import { usePlanDetection } from '@/hooks/usePlanDetection';
|
|
import { useI18n } from '@/lib/i18n';
|
|
import { isMobileSurfaceRuntime } from '@/lib/runtimeSurface';
|
|
import { isVSCodeRuntime } from '@/lib/desktop';
|
|
import { getEmbeddedSessionChatOriginSessionId } from '@/components/layout/contextPanelEmbeddedChat';
|
|
import { isFullySyntheticMessage } from '@/lib/messages/synthetic';
|
|
import { normalizeUserDisplayParts } from './message/normalizeUserDisplayParts';
|
|
import { findShellCommandForMessage, isUserShellMarkerMessage } from './lib/shellBridge';
|
|
import { resolveChatPromptReadOnly } from './chatPromptReadOnly';
|
|
import { getRuntimeKey } from '@/lib/runtime-switch';
|
|
import { createFirstVisibleSessionPerformanceTracker } from '@/sync/session-load-performance';
|
|
|
|
const EMPTY_MESSAGES: Array<{ info: Message; parts: Part[] }> = [];
|
|
const IDLE_SESSION_STATUS = { type: 'idle' as const };
|
|
const CHAT_FORCE_SCROLL_BOTTOM_EVENT = 'openchamber:chat-force-scroll-bottom';
|
|
const DEFAULT_RETRY_MESSAGE = 'Quota limit reached. Retrying automatically.';
|
|
const CHAT_SCROLL_STYLE = {
|
|
overflowAnchor: 'none',
|
|
overscrollBehavior: 'contain',
|
|
overscrollBehaviorY: 'contain',
|
|
} as const;
|
|
const CHAT_NAVIGATION_IGNORED_TARGET_SELECTOR = [
|
|
'a[href]',
|
|
'button',
|
|
'input',
|
|
'select',
|
|
'textarea',
|
|
'[contenteditable="true"]',
|
|
'[role="button"]',
|
|
'[role="combobox"]',
|
|
'[role="dialog"]',
|
|
'[role="listbox"]',
|
|
'[role="menu"]',
|
|
'[role="menuitem"]',
|
|
'[role="option"]',
|
|
'[role="textbox"]',
|
|
'[data-radix-popper-content-wrapper]',
|
|
].join(',');
|
|
type SessionMessageRecord = { info: Message; parts: Part[] };
|
|
|
|
const isHTMLElement = (target: EventTarget | null): target is HTMLElement => {
|
|
return target instanceof HTMLElement;
|
|
};
|
|
|
|
const shouldIgnoreChatNavigationTarget = (target: EventTarget | null): boolean => {
|
|
if (!isHTMLElement(target)) {
|
|
return false;
|
|
}
|
|
|
|
return Boolean(target.closest(CHAT_NAVIGATION_IGNORED_TARGET_SELECTOR));
|
|
};
|
|
|
|
const shouldIgnoreChatNavigationForFocus = (activeElement: Element | null, scrollContainer: HTMLElement | null): boolean => {
|
|
if (typeof document === 'undefined') {
|
|
return true;
|
|
}
|
|
|
|
if (!activeElement || activeElement === document.body || activeElement === document.documentElement) {
|
|
return true;
|
|
}
|
|
|
|
if (shouldIgnoreChatNavigationTarget(activeElement)) {
|
|
return true;
|
|
}
|
|
|
|
return !scrollContainer?.contains(activeElement);
|
|
};
|
|
|
|
const hasBlockingChatOverlay = (): boolean => {
|
|
const {
|
|
isAboutDialogOpen,
|
|
isCommandPaletteOpen,
|
|
isHelpDialogOpen,
|
|
isImagePreviewOpen,
|
|
isMultiRunLauncherOpen,
|
|
isSessionSwitcherOpen,
|
|
isSettingsDialogOpen,
|
|
} = useUIStore.getState();
|
|
|
|
return isAboutDialogOpen
|
|
|| isCommandPaletteOpen
|
|
|| isHelpDialogOpen
|
|
|| isImagePreviewOpen
|
|
|| isMultiRunLauncherOpen
|
|
|| isSessionSwitcherOpen
|
|
|| isSettingsDialogOpen;
|
|
};
|
|
|
|
type HydratingToolSkeletonRow = {
|
|
id: string;
|
|
titleWidth: string;
|
|
detailWidth: string;
|
|
};
|
|
|
|
type ChatViewportProps = {
|
|
currentSessionId: string;
|
|
currentSessionKey: string;
|
|
isDesktopExpandedInput: boolean;
|
|
isMobile: boolean;
|
|
stickyUserHeader: boolean;
|
|
directory?: string;
|
|
scrollRef: React.RefObject<HTMLDivElement | null>;
|
|
messageListRef: React.RefObject<MessageListHandle | null>;
|
|
pendingRevealWork: boolean;
|
|
renderedMessages: SessionMessageRecord[];
|
|
isLoadingOlder: boolean;
|
|
sessionIsWorking: boolean;
|
|
streamingMessageId: string | null;
|
|
activeStreamingPhase: import('./message/types').StreamPhase | null;
|
|
retryOverlay: {
|
|
sessionId: string;
|
|
message: string;
|
|
confirmedAt?: number;
|
|
fallbackTimestamp?: number;
|
|
} | null;
|
|
handleMessageContentChange: (reason?: ContentChangeReason) => void;
|
|
getAnimationHandlers: (messageId: string) => AnimationHandlers;
|
|
handleHistoryScroll: () => void;
|
|
scrollToBottom: () => void;
|
|
sessionQuestions: QuestionRequest[];
|
|
sessionPermissions: PermissionRequest[];
|
|
isProgrammaticFollowActive: boolean;
|
|
showLoadOlderButton: boolean;
|
|
onLoadOlder: () => void;
|
|
turnIds: string[];
|
|
activeTurnId: string | null;
|
|
onSelectTurn: (turnId: string) => void;
|
|
showPromptNavigator: boolean;
|
|
canLoadEarlierPrompts: boolean;
|
|
isLoadingOlderPrompts: boolean;
|
|
onLoadEarlierPrompts: () => void;
|
|
};
|
|
|
|
const ChatViewport = React.memo(({
|
|
currentSessionId,
|
|
currentSessionKey,
|
|
isDesktopExpandedInput,
|
|
isMobile,
|
|
stickyUserHeader,
|
|
directory,
|
|
scrollRef,
|
|
messageListRef,
|
|
pendingRevealWork,
|
|
renderedMessages,
|
|
isLoadingOlder,
|
|
sessionIsWorking,
|
|
streamingMessageId,
|
|
activeStreamingPhase,
|
|
retryOverlay,
|
|
handleMessageContentChange,
|
|
getAnimationHandlers,
|
|
handleHistoryScroll,
|
|
scrollToBottom,
|
|
sessionQuestions,
|
|
sessionPermissions,
|
|
isProgrammaticFollowActive,
|
|
showLoadOlderButton,
|
|
onLoadOlder,
|
|
turnIds,
|
|
activeTurnId,
|
|
onSelectTurn,
|
|
showPromptNavigator,
|
|
canLoadEarlierPrompts,
|
|
isLoadingOlderPrompts,
|
|
onLoadEarlierPrompts,
|
|
}: ChatViewportProps) => {
|
|
const { t } = useI18n();
|
|
const promptPreviewsByTurnIdRef = React.useRef<Map<string, Part[]>>(new Map());
|
|
// Cache normalized parts per source array so unchanged messages keep the
|
|
// same reference and the memo below can bail out to the previous map.
|
|
const normalizedPromptPartsCache = React.useRef(new WeakMap<Part[], Part[]>());
|
|
// Shell-mode prompts show their extracted command; cache by message id so
|
|
// the parts array reference is stable while the command is unchanged.
|
|
const shellPreviewCache = React.useRef(new Map<string, { command: string; parts: Part[] }>());
|
|
const shellPreviewSessionRef = React.useRef(currentSessionId);
|
|
if (shellPreviewSessionRef.current !== currentSessionId) {
|
|
shellPreviewSessionRef.current = currentSessionId;
|
|
shellPreviewCache.current.clear();
|
|
}
|
|
const promptPreviewsByTurnId = React.useMemo(() => {
|
|
const next = new Map<string, Part[]>();
|
|
for (let index = 0; index < renderedMessages.length; index += 1) {
|
|
const message = renderedMessages[index];
|
|
if (message.info.role !== 'user') {
|
|
continue;
|
|
}
|
|
if (isUserShellMarkerMessage(message)) {
|
|
const command = findShellCommandForMessage(renderedMessages, index) ?? '';
|
|
const cached = shellPreviewCache.current.get(message.info.id);
|
|
if (cached && cached.command === command) {
|
|
next.set(message.info.id, cached.parts);
|
|
} else {
|
|
const parts = [{ type: 'text', text: command ? `$ ${command}` : '/shell' } as Part];
|
|
shellPreviewCache.current.set(message.info.id, { command, parts });
|
|
next.set(message.info.id, parts);
|
|
}
|
|
continue;
|
|
}
|
|
// Other fully synthetic user messages (loop continuations,
|
|
// plan-mode injections) are not prompts the user typed — keep
|
|
// them out of the navigator entirely.
|
|
if (isFullySyntheticMessage(message.parts)) {
|
|
continue;
|
|
}
|
|
let displayParts = normalizedPromptPartsCache.current.get(message.parts);
|
|
if (!displayParts) {
|
|
displayParts = normalizeUserDisplayParts(message.parts);
|
|
normalizedPromptPartsCache.current.set(message.parts, displayParts);
|
|
}
|
|
if (displayParts.length === 0) {
|
|
continue;
|
|
}
|
|
next.set(message.info.id, displayParts);
|
|
}
|
|
const prev = promptPreviewsByTurnIdRef.current;
|
|
if (prev.size === next.size) {
|
|
let unchanged = true;
|
|
for (const [id, parts] of next) {
|
|
if (prev.get(id) !== parts) {
|
|
unchanged = false;
|
|
break;
|
|
}
|
|
}
|
|
if (unchanged) {
|
|
return prev;
|
|
}
|
|
}
|
|
promptPreviewsByTurnIdRef.current = next;
|
|
return next;
|
|
}, [renderedMessages]);
|
|
// Only real (non-synthetic) prompts become rail entries; selection still
|
|
// targets the same turn anchors as the timeline.
|
|
const promptTurnIds = React.useMemo(
|
|
() => turnIds.filter((id) => promptPreviewsByTurnId.has(id)),
|
|
[promptPreviewsByTurnId, turnIds],
|
|
);
|
|
// If the viewport sits in a filtered-out (synthetic) turn, treat the
|
|
// nearest preceding real prompt as active so the rail doesn't jump.
|
|
const railActiveTurnId = React.useMemo(() => {
|
|
if (!activeTurnId || promptPreviewsByTurnId.has(activeTurnId)) {
|
|
return activeTurnId;
|
|
}
|
|
const activeIndex = turnIds.indexOf(activeTurnId);
|
|
for (let index = activeIndex - 1; index >= 0; index -= 1) {
|
|
const turnId = turnIds[index];
|
|
if (promptPreviewsByTurnId.has(turnId)) {
|
|
return turnId;
|
|
}
|
|
}
|
|
return null;
|
|
}, [activeTurnId, promptPreviewsByTurnId, turnIds]);
|
|
const focusScrollContainer = React.useCallback((event: React.MouseEvent<HTMLElement>) => {
|
|
if (event.defaultPrevented || shouldIgnoreChatNavigationTarget(event.target)) {
|
|
return;
|
|
}
|
|
|
|
if (typeof window !== 'undefined' && window.getSelection()?.type === 'Range') {
|
|
return;
|
|
}
|
|
|
|
scrollRef.current?.focus({ preventScroll: true });
|
|
}, [scrollRef]);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'relative min-h-0',
|
|
isDesktopExpandedInput
|
|
? 'absolute inset-0 opacity-0 pointer-events-none'
|
|
: 'flex-1'
|
|
)}
|
|
aria-hidden={isDesktopExpandedInput}
|
|
>
|
|
<div className="absolute inset-0">
|
|
<ScrollShadow
|
|
className="absolute inset-0 overflow-y-auto overflow-x-hidden z-0 chat-scroll overlay-scrollbar-target"
|
|
ref={scrollRef}
|
|
style={CHAT_SCROLL_STYLE}
|
|
observeMutations={false}
|
|
hideTopShadow={isMobile && stickyUserHeader}
|
|
tabIndex={0}
|
|
onClick={focusScrollContainer}
|
|
onScroll={handleHistoryScroll}
|
|
data-scroll-shadow="true"
|
|
data-scrollbar="chat"
|
|
>
|
|
<div className="relative z-0 min-h-full">
|
|
{showLoadOlderButton && (
|
|
<div className="flex justify-center pt-3 pb-1">
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={onLoadOlder}
|
|
disabled={isLoadingOlder}
|
|
>
|
|
{isLoadingOlder && (
|
|
<Icon name="loader-4" className="size-4 animate-spin" />
|
|
)}
|
|
{t('chat.history.loadOlder')}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
<MessageList
|
|
key={currentSessionKey}
|
|
ref={messageListRef}
|
|
sessionKey={currentSessionId}
|
|
disableStaging={pendingRevealWork}
|
|
messages={renderedMessages}
|
|
sessionIsWorking={sessionIsWorking}
|
|
activeStreamingMessageId={streamingMessageId}
|
|
activeStreamingPhase={activeStreamingPhase}
|
|
retryOverlay={retryOverlay}
|
|
onMessageContentChange={handleMessageContentChange}
|
|
getAnimationHandlers={getAnimationHandlers}
|
|
isLoadingOlder={isLoadingOlder}
|
|
scrollToBottom={scrollToBottom}
|
|
scrollRef={scrollRef}
|
|
directory={directory}
|
|
/>
|
|
{(sessionQuestions.length > 0 || sessionPermissions.length > 0) && (
|
|
<div>
|
|
{sessionQuestions.map((question) => (
|
|
<QuestionCard key={question.id} question={question} />
|
|
))}
|
|
{sessionPermissions.map((permission) => (
|
|
<PermissionCard key={permission.id} permission={permission} />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<SessionRecapNote sessionId={currentSessionId} directory={directory} isMobile={isMobile} />
|
|
|
|
<div className="mb-3">
|
|
<StatusRowContainer />
|
|
</div>
|
|
|
|
<div className="flex-shrink-0" style={{ height: isMobile ? '40px' : '10vh' }} aria-hidden="true" />
|
|
</div>
|
|
</ScrollShadow>
|
|
<OverlayScrollbar containerRef={scrollRef} suppressVisibility={isProgrammaticFollowActive} userIntentOnly observeMutations={false} />
|
|
{showPromptNavigator && promptTurnIds.length >= 2 ? (
|
|
<PromptNavigatorRail
|
|
turnIds={promptTurnIds}
|
|
previewsByTurnId={promptPreviewsByTurnId}
|
|
activeTurnId={railActiveTurnId}
|
|
onSelectTurn={onSelectTurn}
|
|
canLoadEarlier={canLoadEarlierPrompts}
|
|
isLoadingOlder={isLoadingOlderPrompts}
|
|
onLoadEarlier={onLoadEarlierPrompts}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}, (prev, next) => {
|
|
return prev.currentSessionId === next.currentSessionId
|
|
&& prev.currentSessionKey === next.currentSessionKey
|
|
&& prev.isDesktopExpandedInput === next.isDesktopExpandedInput
|
|
&& prev.isMobile === next.isMobile
|
|
&& prev.stickyUserHeader === next.stickyUserHeader
|
|
&& prev.directory === next.directory
|
|
&& prev.scrollRef === next.scrollRef
|
|
&& prev.messageListRef === next.messageListRef
|
|
&& prev.pendingRevealWork === next.pendingRevealWork
|
|
&& prev.renderedMessages === next.renderedMessages
|
|
&& prev.isLoadingOlder === next.isLoadingOlder
|
|
&& prev.sessionIsWorking === next.sessionIsWorking
|
|
&& prev.streamingMessageId === next.streamingMessageId
|
|
&& prev.activeStreamingPhase === next.activeStreamingPhase
|
|
&& prev.retryOverlay === next.retryOverlay
|
|
&& prev.handleMessageContentChange === next.handleMessageContentChange
|
|
&& prev.getAnimationHandlers === next.getAnimationHandlers
|
|
&& prev.handleHistoryScroll === next.handleHistoryScroll
|
|
&& prev.scrollToBottom === next.scrollToBottom
|
|
&& prev.sessionQuestions === next.sessionQuestions
|
|
&& prev.sessionPermissions === next.sessionPermissions
|
|
&& prev.isProgrammaticFollowActive === next.isProgrammaticFollowActive
|
|
&& prev.showLoadOlderButton === next.showLoadOlderButton
|
|
&& prev.onLoadOlder === next.onLoadOlder
|
|
&& prev.turnIds === next.turnIds
|
|
&& prev.activeTurnId === next.activeTurnId
|
|
&& prev.onSelectTurn === next.onSelectTurn
|
|
&& prev.showPromptNavigator === next.showPromptNavigator
|
|
&& prev.canLoadEarlierPrompts === next.canLoadEarlierPrompts
|
|
&& prev.isLoadingOlderPrompts === next.isLoadingOlderPrompts
|
|
&& prev.onLoadEarlierPrompts === next.onLoadEarlierPrompts;
|
|
});
|
|
|
|
ChatViewport.displayName = 'ChatViewport';
|
|
|
|
const HYDRATING_SKELETON_ITEMS: Array<{
|
|
id: number;
|
|
toolRows: HydratingToolSkeletonRow[];
|
|
textWidths: [string, string, string];
|
|
}> = [
|
|
{
|
|
id: 1,
|
|
toolRows: [
|
|
{ id: 'search', titleWidth: 'w-24', detailWidth: 'w-52' },
|
|
{ id: 'read', titleWidth: 'w-20', detailWidth: 'w-36' },
|
|
{ id: 'edit', titleWidth: 'w-24', detailWidth: 'w-64' },
|
|
],
|
|
textWidths: ['w-24', 'w-[92%]', 'w-[78%]'],
|
|
},
|
|
{
|
|
id: 2,
|
|
toolRows: [
|
|
{ id: 'read', titleWidth: 'w-20', detailWidth: 'w-40' },
|
|
{ id: 'search', titleWidth: 'w-24', detailWidth: 'w-48' },
|
|
],
|
|
textWidths: ['w-20', 'w-[88%]', 'w-[70%]'],
|
|
},
|
|
{
|
|
id: 3,
|
|
toolRows: [
|
|
{ id: 'shell', titleWidth: 'w-28', detailWidth: 'w-44' },
|
|
{ id: 'edit', titleWidth: 'w-24', detailWidth: 'w-56' },
|
|
],
|
|
textWidths: ['w-24', 'w-[84%]', 'w-[64%]'],
|
|
},
|
|
];
|
|
|
|
const ReadOnlyPromptBanner: React.FC = () => {
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<div className="p-3">
|
|
<div className="rounded-2xl border border-border/70 bg-[var(--surface-background)] px-4 py-3 typography-ui-label text-muted-foreground">
|
|
{t('chat.container.readOnlySubagentPromptBanner')}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const getProjectDisplayLabel = (project: { label?: string; path: string }): string => {
|
|
const label = project.label?.trim();
|
|
return label || formatDirectoryName(project.path);
|
|
};
|
|
|
|
const renderDraftTitle = (title: string, projectLabel: string | null): React.ReactNode => {
|
|
if (!projectLabel) return title;
|
|
const projectIndex = title.indexOf(projectLabel);
|
|
if (projectIndex === -1) return title;
|
|
|
|
return (
|
|
<>
|
|
{title.slice(0, projectIndex)}
|
|
<span className="font-medium">{projectLabel}</span>
|
|
{title.slice(projectIndex + projectLabel.length)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const DraftWelcome: React.FC = () => {
|
|
const { t } = useI18n();
|
|
const selectedProjectId = useSessionUIStore((state) => state.newSessionDraft.selectedProjectId ?? null);
|
|
const projectLabel = useProjectsStore(React.useCallback((state) => {
|
|
const projectId = selectedProjectId ?? state.activeProjectId;
|
|
const project = (projectId
|
|
? state.projects.find((candidate) => candidate.id === projectId)
|
|
: null) ?? state.projects[0] ?? null;
|
|
return project ? getProjectDisplayLabel(project) : null;
|
|
}, [selectedProjectId]));
|
|
|
|
return (
|
|
<div className="oc-draft-center flex min-h-0 flex-1 flex-col items-center justify-center px-6 text-center">
|
|
<h1 className="text-balance text-3xl font-normal tracking-tight text-foreground">
|
|
{renderDraftTitle(
|
|
projectLabel
|
|
? t('chat.emptyState.draftTitleWithProject', { project: projectLabel })
|
|
: t('chat.emptyState.draftTitle'),
|
|
projectLabel,
|
|
)}
|
|
</h1>
|
|
<DraftPresetChips
|
|
onSubmit={(starter) => useInputStore.getState().requestPresetSubmit(starter.submitText, starter.ref.type)}
|
|
className="oc-draft-starters mt-8 max-w-md"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
type ChatContainerProps = {
|
|
active?: boolean;
|
|
autoOpenDraft?: boolean;
|
|
readOnly?: boolean;
|
|
};
|
|
|
|
export const ChatContainer: React.FC<ChatContainerProps> = ({ active = true, autoOpenDraft = true, readOnly = false }) => {
|
|
const { t } = useI18n();
|
|
// Session UI state
|
|
const currentSessionId = useSessionUIStore((s) => s.currentSessionId);
|
|
const currentSessionDirectory = useSessionUIStore((s) => s.currentSessionDirectory);
|
|
const openNewSessionDraft = useSessionUIStore((s) => s.openNewSessionDraft);
|
|
const setCurrentSession = useSessionUIStore((s) => s.setCurrentSession);
|
|
const newSessionDraft = useSessionUIStore((s) => s.newSessionDraft);
|
|
|
|
// Sync actions
|
|
const sync = useSync();
|
|
const syncDirectory = useSyncDirectory();
|
|
const effectiveSessionDirectory = currentSessionDirectory ?? syncDirectory;
|
|
const currentSessionKey = currentSessionId
|
|
? JSON.stringify([getRuntimeKey(), effectiveSessionDirectory, currentSessionId])
|
|
: null;
|
|
const ensureSessionRenderable = React.useCallback(
|
|
(sessionId: string) => sync.ensureSessionRenderable(sessionId, false, effectiveSessionDirectory),
|
|
[effectiveSessionDirectory, sync],
|
|
);
|
|
const loadMoreMessages = React.useCallback(
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
(sessionId: string, _direction: 'up' | 'down') => sync.loadMore(sessionId, effectiveSessionDirectory),
|
|
[effectiveSessionDirectory, sync],
|
|
);
|
|
|
|
// UI store
|
|
const isExpandedInput = useUIStore((state) => state.isExpandedInput);
|
|
const stickyUserHeader = useUIStore((state) => state.stickyUserHeader);
|
|
const promptNavigatorEnabled = useUIStore((state) => state.promptNavigatorEnabled);
|
|
const allowPromptingSubagentSessions = useUIStore((state) => state.allowPromptingSubagentSessions);
|
|
const isTimelineDialogOpen = useUIStore((s) => s.isTimelineDialogOpen);
|
|
const setTimelineDialogOpen = useUIStore((s) => s.setTimelineDialogOpen);
|
|
|
|
// Streaming state
|
|
const streamingMessageId = useStreamingStore(
|
|
React.useCallback(
|
|
(s) => (currentSessionId ? s.streamingMessageIds.get(currentSessionId) ?? null : null),
|
|
[currentSessionId],
|
|
),
|
|
);
|
|
const activeStreamingPhase = useStreamingStore(
|
|
React.useCallback(
|
|
(s) => {
|
|
if (!streamingMessageId) return null;
|
|
return s.messageStreamStates.get(streamingMessageId)?.phase ?? null;
|
|
},
|
|
[streamingMessageId],
|
|
),
|
|
);
|
|
const sessionMessageCount = useSessionMessageCount(currentSessionId ?? '', effectiveSessionDirectory);
|
|
const hasRenderableSessionSnapshot = useSessionRenderable(currentSessionId ?? '', effectiveSessionDirectory);
|
|
// Messages from sync system
|
|
const sessionMessageRecords = useSessionMessageRecords(currentSessionId ?? '', effectiveSessionDirectory, {
|
|
enabled: active,
|
|
suspendPartUpdates: Boolean(streamingMessageId),
|
|
suspendPartUpdatesForMessageId: streamingMessageId,
|
|
});
|
|
const sessionMessages = currentSessionId ? sessionMessageRecords : EMPTY_MESSAGES;
|
|
const sessionMessageLoadState = useSessionMessageLoadState(
|
|
currentSessionId ?? '',
|
|
effectiveSessionDirectory,
|
|
);
|
|
const [firstVisiblePerformance] = React.useState(createFirstVisibleSessionPerformanceTracker);
|
|
|
|
React.useEffect(() => {
|
|
if (!active || !currentSessionKey || !hasRenderableSessionSnapshot || sessionMessages.length === 0) return;
|
|
return firstVisiblePerformance.schedule(currentSessionKey, sessionMessages.length);
|
|
}, [active, currentSessionKey, firstVisiblePerformance, hasRenderableSessionSnapshot, sessionMessages.length]);
|
|
|
|
// Plan detection - watches messages for plan creation and signals store
|
|
usePlanDetection(currentSessionId ?? '', sessionMessages);
|
|
|
|
// Session status from sync system
|
|
const sessionStatusForCurrent = useSessionStatus(currentSessionId ?? '', effectiveSessionDirectory) ?? IDLE_SESSION_STATUS;
|
|
|
|
// Scoped blocking requests — only subscribe to permissions/questions for
|
|
// the current session + descendant subagent sessions, not all sessions in
|
|
// the directory.
|
|
const sessionPermissions = useScopedBlockingPermissions(currentSessionId, effectiveSessionDirectory);
|
|
const sessionQuestions = useScopedBlockingQuestions(currentSessionId, effectiveSessionDirectory);
|
|
|
|
const sessionIsWorking = React.useMemo(() => {
|
|
if (!currentSessionId || sessionPermissions.length > 0 || sessionQuestions.length > 0) {
|
|
return false;
|
|
}
|
|
|
|
const statusType = sessionStatusForCurrent.type ?? 'idle';
|
|
if (statusType === 'busy' || statusType === 'retry') {
|
|
return true;
|
|
}
|
|
|
|
const lastMessage = sessionMessages[sessionMessages.length - 1]?.info as Message | undefined;
|
|
return Boolean(
|
|
lastMessage
|
|
&& lastMessage.role === 'assistant'
|
|
&& typeof (lastMessage as { time?: { completed?: number } }).time?.completed !== 'number',
|
|
);
|
|
}, [currentSessionId, sessionMessages, sessionPermissions.length, sessionQuestions.length, sessionStatusForCurrent.type]);
|
|
const activeRetryStatus = React.useMemo(() => {
|
|
if (!currentSessionId || sessionStatusForCurrent.type !== 'retry') {
|
|
return null;
|
|
}
|
|
|
|
const rawMessage = typeof (sessionStatusForCurrent as { message?: string }).message === 'string'
|
|
? (((sessionStatusForCurrent as { message?: string }).message) ?? '').trim()
|
|
: '';
|
|
|
|
return {
|
|
sessionId: currentSessionId,
|
|
message: rawMessage || DEFAULT_RETRY_MESSAGE,
|
|
confirmedAt: (sessionStatusForCurrent as { confirmedAt?: number }).confirmedAt,
|
|
};
|
|
}, [currentSessionId, sessionStatusForCurrent]);
|
|
const [retryFallbackTimestamp, setRetryFallbackTimestamp] = React.useState<number>(0);
|
|
const retryFallbackSessionRef = React.useRef<string | null>(null);
|
|
|
|
React.useEffect(() => {
|
|
if (!activeRetryStatus || typeof activeRetryStatus.confirmedAt === 'number') {
|
|
retryFallbackSessionRef.current = null;
|
|
setRetryFallbackTimestamp(0);
|
|
return;
|
|
}
|
|
|
|
if (retryFallbackSessionRef.current !== activeRetryStatus.sessionId) {
|
|
retryFallbackSessionRef.current = activeRetryStatus.sessionId;
|
|
setRetryFallbackTimestamp(Date.now());
|
|
}
|
|
}, [activeRetryStatus]);
|
|
|
|
const retryOverlay = React.useMemo(() => {
|
|
if (!activeRetryStatus) {
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
...activeRetryStatus,
|
|
fallbackTimestamp: retryFallbackTimestamp,
|
|
};
|
|
}, [activeRetryStatus, retryFallbackTimestamp]);
|
|
|
|
// History metadata — use sync's hasMore/isLoading
|
|
const historyMeta = React.useMemo(() => {
|
|
if (!currentSessionId) return null;
|
|
return {
|
|
limit: sessionMessages.length,
|
|
complete: sessionMessageLoadState.complete || !sessionMessageLoadState.cursor,
|
|
loading: sessionMessageLoadState.status === 'loading',
|
|
};
|
|
}, [currentSessionId, sessionMessageLoadState.complete, sessionMessageLoadState.cursor, sessionMessageLoadState.status, sessionMessages.length]);
|
|
|
|
const { isMobile } = useDeviceInfo();
|
|
const isVSCode = isVSCodeRuntime();
|
|
const chatSurfaceMode = useChatSurfaceMode();
|
|
const draftOpen = Boolean(newSessionDraft?.open);
|
|
const initError = useGlobalSyncStore((s) => s.error);
|
|
// Despite the historical name, this now covers mobile too: the mobile
|
|
// composer enters the same fullscreen-input mode via its drag handle.
|
|
const isDesktopExpandedInput = isExpandedInput;
|
|
const useCompactDraftLayout = isMobile || isVSCode || chatSurfaceMode === 'mini-chat';
|
|
const messageListRef = React.useRef<MessageListHandle | null>(null);
|
|
const currentSession = useSession(currentSessionId, effectiveSessionDirectory);
|
|
const parentSession = useParentSession(currentSessionId, effectiveSessionDirectory);
|
|
|
|
// In the embedded session-chat iframe, hide "Return to parent" when
|
|
// viewing the panel's anchor session (the one recorded in the URL). Going
|
|
// up from the anchor would show the primary session that's already in the
|
|
// main chat. Drilling into a deeper subtask (currentSessionId ≠ anchor)
|
|
// re-enables the button to navigate back to the embedded session.
|
|
const embeddedPanelAnchorSessionId = getEmbeddedSessionChatOriginSessionId();
|
|
const hideReturnToParent =
|
|
embeddedPanelAnchorSessionId !== null && currentSessionId === embeddedPanelAnchorSessionId;
|
|
|
|
const handleReturnToParentSession = React.useCallback(() => {
|
|
if (!parentSession) return;
|
|
const parentDirectory = (parentSession as Session & { directory?: string | null }).directory ?? null;
|
|
setCurrentSession(parentSession.id, parentDirectory);
|
|
}, [parentSession, setCurrentSession]);
|
|
|
|
const returnToParentButton = parentSession && !hideReturnToParent ? (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="xs"
|
|
onClick={handleReturnToParentSession}
|
|
className="absolute left-3 top-3 z-20 !font-normal bg-[var(--surface-background)]/95"
|
|
aria-label={t('chat.container.returnToParent.aria')}
|
|
title={parentSession.title?.trim()
|
|
? t('chat.container.returnToParent.titleNamed', { title: parentSession.title })
|
|
: t('chat.container.returnToParent.title')}
|
|
>
|
|
<Icon name="arrow-left" className="h-4 w-4" />
|
|
{t('chat.container.returnToParent.label')}
|
|
</Button>
|
|
) : null;
|
|
const promptReadOnly = resolveChatPromptReadOnly(currentSession, allowPromptingSubagentSessions, readOnly);
|
|
|
|
React.useEffect(() => {
|
|
// VS Code/Cursor/Positron webviews delete window.parent (and window.top).
|
|
// The old `window.parent === window` check does not catch that, so
|
|
// `window.parent.postMessage(...)` threw on chat open:
|
|
// TypeError: Cannot read properties of undefined (reading 'postMessage')
|
|
if (typeof window === 'undefined' || !window.parent || window.parent === window) {
|
|
return;
|
|
}
|
|
|
|
const parentWindow = window.parent;
|
|
const applySetting = (value: boolean) => {
|
|
useUIStore.getState().setAllowPromptingSubagentSessions(value);
|
|
};
|
|
const scopedWindow = window as typeof window & {
|
|
__openchamberApplyChatSettingsSync?: (payload: { allowPromptingSubagentSessions: boolean }) => void;
|
|
};
|
|
const applySync = (payload: { allowPromptingSubagentSessions: boolean }) => {
|
|
applySetting(payload.allowPromptingSubagentSessions);
|
|
};
|
|
const handleMessage = (event: MessageEvent) => {
|
|
if (event.source !== parentWindow || event.origin !== window.location.origin) return;
|
|
const data = event.data as { type?: unknown; payload?: { allowPromptingSubagentSessions?: unknown } };
|
|
if (data?.type !== 'openchamber:chat-settings-sync'
|
|
|| typeof data.payload?.allowPromptingSubagentSessions !== 'boolean') return;
|
|
applySetting(data.payload.allowPromptingSubagentSessions);
|
|
};
|
|
|
|
scopedWindow.__openchamberApplyChatSettingsSync = applySync;
|
|
window.addEventListener('message', handleMessage);
|
|
parentWindow.postMessage({ type: 'openchamber:chat-settings-request' }, window.location.origin);
|
|
return () => {
|
|
window.removeEventListener('message', handleMessage);
|
|
if (scopedWindow.__openchamberApplyChatSettingsSync === applySync) {
|
|
delete scopedWindow.__openchamberApplyChatSettingsSync;
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
React.useEffect(() => {
|
|
if (autoOpenDraft && !currentSessionId && !draftOpen) {
|
|
// Programmatic fallback, not user navigation — must not clear the
|
|
// persisted last-session pointer the cold-launch restore reads.
|
|
openNewSessionDraft({ automatic: true });
|
|
}
|
|
}, [autoOpenDraft, currentSessionId, draftOpen, openNewSessionDraft]);
|
|
|
|
const activeTurnChangeRef = React.useRef<(turnId: string | null) => void>(() => {});
|
|
const handleActiveTurnChange = React.useCallback((turnId: string | null) => {
|
|
activeTurnChangeRef.current(turnId);
|
|
}, []);
|
|
|
|
const {
|
|
scrollRef,
|
|
notifyContentChange: handleMessageContentChange,
|
|
getAnimationHandlers,
|
|
goToBottom,
|
|
scrollToBottomOnSend,
|
|
releaseAutoFollow,
|
|
restoreSnapshot,
|
|
isPinned,
|
|
isFollowingProgrammatically,
|
|
showScrollButton,
|
|
} = useChatAutoFollow({
|
|
currentSessionId,
|
|
currentSessionKey,
|
|
sessionMessageCount,
|
|
sessionIsWorking,
|
|
isMobile,
|
|
onActiveTurnChange: handleActiveTurnChange,
|
|
});
|
|
|
|
const viewportMessages = sessionMessages;
|
|
|
|
const timelineController = useChatTimelineController({
|
|
sessionId: currentSessionId,
|
|
sessionKey: currentSessionKey,
|
|
messages: viewportMessages,
|
|
historyMeta,
|
|
scrollRef,
|
|
messageListRef,
|
|
loadMoreMessages,
|
|
goToBottom,
|
|
releaseAutoFollow,
|
|
isPinned,
|
|
showScrollButton,
|
|
});
|
|
const resumeToLatestInstant = React.useCallback(() => {
|
|
goToBottom('instant');
|
|
}, [goToBottom]);
|
|
// Mobile loads older history via an explicit top button instead of a
|
|
// scroll-position trigger (see handleHistoryScroll in the controller).
|
|
const showLoadOlderButton = isMobileSurfaceRuntime()
|
|
&& timelineController.historySignals.canLoadEarlier;
|
|
const timelineLoadEarlier = timelineController.loadEarlier;
|
|
const handleLoadOlderClick = React.useCallback(() => {
|
|
void timelineLoadEarlier({ userInitiated: true });
|
|
}, [timelineLoadEarlier]);
|
|
|
|
React.useEffect(() => {
|
|
activeTurnChangeRef.current = timelineController.handleActiveTurnChange;
|
|
}, [timelineController.handleActiveTurnChange]);
|
|
|
|
React.useEffect(() => {
|
|
if (sessionPermissions.length === 0 && sessionQuestions.length === 0) {
|
|
return;
|
|
}
|
|
handleMessageContentChange('permission');
|
|
}, [handleMessageContentChange, sessionPermissions, sessionQuestions]);
|
|
|
|
const navigation = useChatTurnNavigation({
|
|
sessionId: currentSessionId,
|
|
turnIds: timelineController.turnIds,
|
|
activeTurnId: timelineController.activeTurnId,
|
|
scrollToTurn: timelineController.scrollToTurn,
|
|
scrollToMessage: timelineController.scrollToMessage,
|
|
resumeToBottom: timelineController.resumeToBottomInstant,
|
|
});
|
|
const handlePromptNavigatorSelect = React.useCallback((turnId: string) => {
|
|
void navigation.scrollToTurnId(turnId, { behavior: 'smooth' });
|
|
}, [navigation]);
|
|
const canLoadEarlierPrompts = timelineController.historySignals.canLoadEarlier;
|
|
const showPromptNavigator = !isMobile
|
|
&& !isVSCode
|
|
&& !isDesktopExpandedInput
|
|
&& promptNavigatorEnabled
|
|
&& timelineController.turnIds.length >= 2;
|
|
|
|
React.useEffect(() => {
|
|
if (!showPromptNavigator) {
|
|
useUIStore.getState().setPromptNavigatorPanelOpen(false);
|
|
}
|
|
}, [showPromptNavigator]);
|
|
|
|
React.useEffect(() => {
|
|
if (typeof window === 'undefined' || !currentSessionId) return;
|
|
|
|
const handleForceScrollBottom = (event: Event) => {
|
|
const customEvent = event as CustomEvent<{ sessionId?: string }>;
|
|
if (customEvent.detail?.sessionId && customEvent.detail.sessionId !== currentSessionId) return;
|
|
goToBottom('instant');
|
|
};
|
|
|
|
window.addEventListener(CHAT_FORCE_SCROLL_BOTTOM_EVENT, handleForceScrollBottom as EventListener);
|
|
return () => {
|
|
window.removeEventListener(CHAT_FORCE_SCROLL_BOTTOM_EVENT, handleForceScrollBottom as EventListener);
|
|
};
|
|
}, [currentSessionId, goToBottom]);
|
|
|
|
React.useEffect(() => {
|
|
if (typeof window === 'undefined' || !currentSessionId || isDesktopExpandedInput) {
|
|
return;
|
|
}
|
|
|
|
const handleChatTurnKeyDown = (event: KeyboardEvent) => {
|
|
if (event.defaultPrevented || event.isComposing) {
|
|
return;
|
|
}
|
|
|
|
if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
|
|
return;
|
|
}
|
|
|
|
if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
|
|
return;
|
|
}
|
|
|
|
const { activeMainTab } = useUIStore.getState();
|
|
if (activeMainTab !== 'chat' || hasBlockingChatOverlay()) {
|
|
return;
|
|
}
|
|
|
|
const scrollContainer = scrollRef.current;
|
|
if (shouldIgnoreChatNavigationForFocus(document.activeElement, scrollContainer)) {
|
|
return;
|
|
}
|
|
|
|
if (shouldIgnoreChatNavigationTarget(event.target)) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
const offset = event.key === 'ArrowUp' ? -1 : 1;
|
|
void navigation.scrollByTurnOffset(offset, { resumePastEnd: false });
|
|
};
|
|
|
|
window.addEventListener('keydown', handleChatTurnKeyDown);
|
|
return () => {
|
|
window.removeEventListener('keydown', handleChatTurnKeyDown);
|
|
};
|
|
}, [currentSessionId, isDesktopExpandedInput, navigation, scrollRef]);
|
|
|
|
React.useLayoutEffect(() => {
|
|
const container = scrollRef.current;
|
|
if (!container) return;
|
|
|
|
const updateChatScrollHeight = () => {
|
|
container.style.setProperty('--chat-scroll-height', `${container.clientHeight}px`);
|
|
};
|
|
|
|
updateChatScrollHeight();
|
|
|
|
let rafId = 0;
|
|
const scheduleUpdate = () => {
|
|
if (rafId) return;
|
|
rafId = requestAnimationFrame(() => {
|
|
rafId = 0;
|
|
updateChatScrollHeight();
|
|
});
|
|
};
|
|
|
|
if (typeof ResizeObserver === 'undefined') {
|
|
window.addEventListener('resize', scheduleUpdate);
|
|
return () => {
|
|
if (rafId) cancelAnimationFrame(rafId);
|
|
window.removeEventListener('resize', scheduleUpdate);
|
|
};
|
|
}
|
|
|
|
const resizeObserver = new ResizeObserver(scheduleUpdate);
|
|
resizeObserver.observe(container);
|
|
|
|
return () => {
|
|
if (rafId) cancelAnimationFrame(rafId);
|
|
resizeObserver.disconnect();
|
|
};
|
|
}, [currentSessionId, isDesktopExpandedInput, scrollRef]);
|
|
|
|
const lastScrolledSessionKeyRef = React.useRef<string | null>(null);
|
|
|
|
const isSessionHydrating =
|
|
Boolean(currentSessionId)
|
|
&& !hasRenderableSessionSnapshot;
|
|
const retrySessionLoad = React.useCallback(() => {
|
|
if (!active || !currentSessionId) return;
|
|
void sync.ensureSessionRenderable(currentSessionId, true, effectiveSessionDirectory);
|
|
}, [active, currentSessionId, effectiveSessionDirectory, sync]);
|
|
|
|
React.useEffect(() => {
|
|
if (!active || !currentSessionId) return;
|
|
if (lastScrolledSessionKeyRef.current === currentSessionKey) return;
|
|
|
|
const hasHashTarget = typeof window !== 'undefined' && window.location.hash.length > 0;
|
|
lastScrolledSessionKeyRef.current = currentSessionKey;
|
|
if (hasHashTarget) {
|
|
// Hash navigation handler will scroll to target; we just release auto-follow.
|
|
releaseAutoFollow();
|
|
return;
|
|
}
|
|
|
|
const run = () => {
|
|
void restoreSnapshot();
|
|
};
|
|
if (typeof window === 'undefined') {
|
|
run();
|
|
} else {
|
|
window.requestAnimationFrame(run);
|
|
}
|
|
}, [active, currentSessionId, currentSessionKey, releaseAutoFollow, restoreSnapshot]);
|
|
|
|
React.useEffect(() => {
|
|
if (!active || !currentSessionId) return;
|
|
if (hasRenderableSessionSnapshot) return;
|
|
void ensureSessionRenderable(currentSessionId);
|
|
}, [active, currentSessionId, ensureSessionRenderable, hasRenderableSessionSnapshot]);
|
|
|
|
if (!currentSessionId && !draftOpen) {
|
|
// With auto-open, the draft welcome opens on the next tick (effect below),
|
|
// so the empty state is only ever transient here — render a neutral
|
|
// background instead of flashing the logo / "start a new chat" on refresh.
|
|
// Keep the empty state when there's nothing to auto-open or an init error to show.
|
|
if (autoOpenDraft && !initError) {
|
|
return <div className="flex h-full flex-col bg-background" />;
|
|
}
|
|
return (
|
|
<div className="flex flex-col h-full bg-background">
|
|
<ChatEmptyState />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!currentSessionId && draftOpen) {
|
|
return (
|
|
// No transform on this root: it would become the containing block for
|
|
// the fullscreen composer's position:fixed visual-viewport pinning in
|
|
// mobile browsers (see ChatInput's composerFormRef effect).
|
|
<div data-composer-bound className="relative flex h-full flex-col bg-background">
|
|
{useCompactDraftLayout && !isDesktopExpandedInput ? <DraftWelcome /> : null}
|
|
<div
|
|
className={cn(
|
|
'relative z-10 flex min-h-0',
|
|
isDesktopExpandedInput
|
|
? 'flex-1 bg-background'
|
|
: useCompactDraftLayout
|
|
? 'bg-background px-0'
|
|
: 'flex-1 items-center justify-center bg-background px-0 pb-[6vh]'
|
|
)}
|
|
>
|
|
{promptReadOnly ? <ReadOnlyPromptBanner /> : <ChatInput scrollToBottom={scrollToBottomOnSend} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!currentSessionId) {
|
|
return null;
|
|
}
|
|
|
|
if (isSessionHydrating && sessionMessages.length === 0 && !sessionIsWorking) {
|
|
if (sessionMessageLoadState.status === 'error') {
|
|
return (
|
|
<div data-composer-bound className="relative flex h-full flex-col bg-background">
|
|
{returnToParentButton}
|
|
<div className="flex min-h-0 flex-1 items-center justify-center px-6">
|
|
<div className="max-w-sm text-center">
|
|
<div className="mx-auto mb-3 flex size-9 items-center justify-center rounded-full bg-[color-mix(in_srgb,var(--status-error)_10%,transparent)] text-[var(--status-error)]">
|
|
<Icon name="error-warning" className="size-4" />
|
|
</div>
|
|
<p className="typography-ui-label font-medium text-foreground">{t('chat.container.sessionLoadError.title')}</p>
|
|
<p className="typography-meta mt-1 text-muted-foreground">{t('chat.container.sessionLoadError.description')}</p>
|
|
<Button variant="outline" size="sm" className="mt-4" onClick={retrySessionLoad}>
|
|
{t('chat.container.sessionLoadError.retry')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="relative z-10 bg-background">
|
|
{promptReadOnly ? <ReadOnlyPromptBanner /> : <ChatInput scrollToBottom={scrollToBottomOnSend} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div data-composer-bound className="relative flex flex-col h-full bg-background">
|
|
{returnToParentButton}
|
|
<div
|
|
className={cn(
|
|
'relative min-h-0',
|
|
isDesktopExpandedInput
|
|
? 'absolute inset-0 opacity-0 pointer-events-none'
|
|
: 'flex-1'
|
|
)}
|
|
aria-hidden={isDesktopExpandedInput}
|
|
>
|
|
<div className="absolute inset-0 overflow-y-auto overflow-x-hidden bg-background pt-6" style={CHAT_SCROLL_STYLE}>
|
|
<div className="space-y-4">
|
|
{HYDRATING_SKELETON_ITEMS.map((item) => (
|
|
<div key={item.id} className="group w-full">
|
|
<div className="chat-message-column">
|
|
<div className="space-y-2.5 px-4 py-3">
|
|
<div className="space-y-1.5">
|
|
{item.toolRows.map((row) => {
|
|
return (
|
|
<div key={`${item.id}-${row.id}`} className="flex items-center gap-2">
|
|
<Skeleton className="h-3.5 w-3.5 rounded-full flex-shrink-0" />
|
|
<Skeleton className={cn('h-4 rounded-md', row.titleWidth)} />
|
|
<Skeleton className={cn('h-4 rounded-md', row.detailWidth)} />
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="space-y-1.5 pt-1">
|
|
<Skeleton className={cn('h-4 rounded-md', item.textWidths[0])} />
|
|
<Skeleton className={cn('h-4 rounded-md', item.textWidths[1])} />
|
|
<Skeleton className={cn('h-4 rounded-md', item.textWidths[2])} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
'relative z-10',
|
|
isDesktopExpandedInput
|
|
? 'flex-1 min-h-0 bg-background'
|
|
: 'bg-background'
|
|
)}
|
|
>
|
|
{promptReadOnly ? <ReadOnlyPromptBanner /> : <ChatInput scrollToBottom={scrollToBottomOnSend} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (sessionMessages.length === 0 && !sessionIsWorking) {
|
|
return (
|
|
// No transform here either — same fixed-positioning constraint as the
|
|
// draft branch above.
|
|
<div data-composer-bound className="relative flex flex-col h-full bg-background">
|
|
{returnToParentButton}
|
|
<div
|
|
className={cn(
|
|
'relative min-h-0',
|
|
isDesktopExpandedInput
|
|
? 'absolute inset-0 opacity-0 pointer-events-none'
|
|
: 'flex-1'
|
|
)}
|
|
aria-hidden={isDesktopExpandedInput}
|
|
>
|
|
{!isDesktopExpandedInput ? (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<ChatEmptyState />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
'relative z-10',
|
|
isDesktopExpandedInput
|
|
? 'flex-1 min-h-0 bg-background'
|
|
: 'bg-background'
|
|
)}
|
|
>
|
|
{promptReadOnly ? <ReadOnlyPromptBanner /> : <ChatInput scrollToBottom={scrollToBottomOnSend} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div data-composer-bound className="relative flex flex-col h-full bg-background">
|
|
{returnToParentButton}
|
|
<ChatViewport
|
|
currentSessionId={currentSessionId}
|
|
currentSessionKey={currentSessionKey ?? currentSessionId}
|
|
isDesktopExpandedInput={isDesktopExpandedInput}
|
|
isMobile={isMobile}
|
|
stickyUserHeader={stickyUserHeader}
|
|
directory={effectiveSessionDirectory}
|
|
scrollRef={scrollRef}
|
|
messageListRef={messageListRef}
|
|
pendingRevealWork={timelineController.pendingRevealWork}
|
|
renderedMessages={timelineController.renderedMessages}
|
|
isLoadingOlder={timelineController.isLoadingOlder}
|
|
sessionIsWorking={sessionIsWorking}
|
|
streamingMessageId={streamingMessageId}
|
|
activeStreamingPhase={activeStreamingPhase}
|
|
retryOverlay={retryOverlay}
|
|
handleMessageContentChange={handleMessageContentChange}
|
|
getAnimationHandlers={getAnimationHandlers}
|
|
handleHistoryScroll={timelineController.handleHistoryScroll}
|
|
scrollToBottom={resumeToLatestInstant}
|
|
sessionQuestions={sessionQuestions}
|
|
sessionPermissions={sessionPermissions}
|
|
isProgrammaticFollowActive={isFollowingProgrammatically}
|
|
showLoadOlderButton={showLoadOlderButton}
|
|
onLoadOlder={handleLoadOlderClick}
|
|
turnIds={timelineController.turnIds}
|
|
activeTurnId={timelineController.activeTurnId}
|
|
onSelectTurn={handlePromptNavigatorSelect}
|
|
showPromptNavigator={showPromptNavigator}
|
|
canLoadEarlierPrompts={canLoadEarlierPrompts}
|
|
isLoadingOlderPrompts={timelineController.isLoadingOlder}
|
|
onLoadEarlierPrompts={handleLoadOlderClick}
|
|
/>
|
|
|
|
<div
|
|
className={cn(
|
|
'relative z-10',
|
|
isDesktopExpandedInput
|
|
? 'flex-1 min-h-0 bg-background'
|
|
: 'bg-background'
|
|
)}
|
|
>
|
|
{!isDesktopExpandedInput && sessionMessages.length > 0 && (
|
|
<ScrollToBottomButton
|
|
visible={timelineController.showScrollToBottom}
|
|
onClick={navigation.resumeToLatest}
|
|
/>
|
|
)}
|
|
{promptReadOnly ? <ReadOnlyPromptBanner /> : <ChatInput scrollToBottom={scrollToBottomOnSend} />}
|
|
</div>
|
|
|
|
<TimelineDialog
|
|
open={isTimelineDialogOpen}
|
|
onOpenChange={setTimelineDialogOpen}
|
|
onScrollToMessage={timelineController.scrollToMessage}
|
|
onScrollByTurnOffset={navigation.scrollByTurnOffset}
|
|
onResumeToLatest={resumeToLatestInstant}
|
|
canLoadEarlier={timelineController.historySignals.canLoadEarlier}
|
|
isLoadingEarlier={timelineController.isLoadingOlder}
|
|
onLoadEarlier={handleLoadOlderClick}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|