= ({ children }) =>
ref={passwordInputRef}
type="password"
autoComplete="current-password"
- placeholder="Enter password"
+ placeholder={t('sessionAuth.password.placeholder')}
value={password}
onChange={(event) => {
setPassword(event.target.value);
@@ -332,7 +534,7 @@ export const SessionAuthGate: React.FC = ({ children }) =>
type="submit"
size="icon"
disabled={!password || isSubmitting}
- aria-label={isSubmitting ? 'Unlocking' : 'Unlock'}
+ aria-label={isSubmitting ? t('sessionAuth.actions.unlockingAria') : t('sessionAuth.actions.unlockAria')}
>
{isSubmitting ? (
= ({ children }) =>
)}
+ {canOfferPasskeySetup ? (
+
+
+ {t('sessionAuth.actions.trustDevice')}
+
+ void handlePasskeySetupOnly()}
+ disabled={isSubmitting}
+ >
+ {isPasskeyBusy && activePasskeyAction === 'register'
+ ? t('sessionAuth.actions.cancelPasskeySetup')
+ : t('sessionAuth.actions.addPasskey')}
+
+
+ ) : (
+
+ {t('sessionAuth.actions.trustDevice')}
+
+ )}
{errorMessage && (
{errorMessage}
@@ -353,7 +594,7 @@ export const SessionAuthGate: React.FC = ({ children }) =>
- Use Local if remote is unreachable.
+ {t('sessionAuth.locked.hostSwitcherHint')}
)}
diff --git a/src/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx b/src/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx
index 3a1aa39..98cc461 100644
--- a/src/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx
+++ b/src/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx
@@ -3,6 +3,7 @@ import { cn, fuzzyMatch } from '@/lib/utils';
import { useConfigStore } from '@/stores/useConfigStore';
import { useAgentsStore, isAgentBuiltIn, type AgentWithExtras } from '@/stores/useAgentsStore';
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { useI18n } from '@/lib/i18n';
interface AgentInfo {
name: string;
@@ -40,13 +41,15 @@ export const AgentMentionAutocomplete = React.forwardRef {
+ const { t } = useI18n();
const containerRef = React.useRef(null);
const [selectedIndex, setSelectedIndex] = React.useState(0);
const [agents, setAgents] = React.useState([]);
const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
const ignoreTabClickRef = React.useRef(false);
- const { getVisibleAgents } = useConfigStore();
- const { agents: agentsWithMetadata, loadAgents } = useAgentsStore();
+ const getVisibleAgents = useConfigStore((state) => state.getVisibleAgents);
+ const agentsWithMetadata = useAgentsStore((state) => state.agents);
+ const loadAgents = useAgentsStore((state) => state.loadAgents);
React.useEffect(() => {
if (agentsWithMetadata.length === 0) {
@@ -156,7 +159,7 @@ export const AgentMentionAutocomplete = React.forwardRef#{agent.name}
{isSystem ? (
- system
+ {t('chat.agentMentionAutocomplete.badge.system')}
) : agent.scope ? (
([
+ { id: 'commands' as const, label: t('chat.autocomplete.tabs.commands') },
+ { id: 'agents' as const, label: t('chat.autocomplete.tabs.agents') },
+ { id: 'files' as const, label: t('chat.autocomplete.tabs.files') },
+ ]), [t]);
+
return (
- {([
- { id: 'commands' as const, label: 'Commands' },
- { id: 'agents' as const, label: 'Agents' },
- { id: 'files' as const, label: 'Files' },
- ]).map((tab) => (
+ {tabs.map((tab) => (
) : (
- No agents found
+ {t('chat.agentMentionAutocomplete.empty')}
)}
- ↑↓ navigate • Enter select • Esc close
+ {t('chat.autocomplete.keyboardHint')}
);
diff --git a/src/packages/ui/src/components/chat/ChangedFilesList.tsx b/src/packages/ui/src/components/chat/ChangedFilesList.tsx
new file mode 100644
index 0000000..bc8f670
--- /dev/null
+++ b/src/packages/ui/src/components/chat/ChangedFilesList.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
+import { type ChangedFileEntry, getDisplayPath, getFileStats } from './changedFiles';
+import { useI18n } from '@/lib/i18n';
+
+interface ChangedFilesListProps {
+ files: ChangedFileEntry[];
+ currentDirectory: string;
+ onOpenFile: (file: ChangedFileEntry) => void;
+}
+
+export const ChangedFilesList: React.FC
= ({ files, currentDirectory, onOpenFile }) => {
+ const { t } = useI18n();
+ return (
+ <>
+
+ {t('chat.changedFiles.title')}
+ {files.length}
+
+
+
+ {files.map((file, index) => {
+ const { fileName, dirPart } = getDisplayPath(file, currentDirectory);
+ const stats = getFileStats(file);
+
+ return (
+ onOpenFile(file)}
+ >
+
+ {dirPart ? (
+ <>
+
+ {dirPart}
+
+
+ /
+ {fileName}
+
+
+ ) : (
+ {fileName}
+ )}
+
+ {(stats.additions > 0 || stats.deletions > 0) ? (
+
+ {stats.additions > 0 ? +{stats.additions} : null}
+ {stats.deletions > 0 ? -{stats.deletions} : null}
+
+ ) : null}
+
+ );
+ })}
+
+
+ );
+};
diff --git a/src/packages/ui/src/components/chat/ChatContainer.tsx b/src/packages/ui/src/components/chat/ChatContainer.tsx
index d072445..ff3401a 100644
--- a/src/packages/ui/src/components/chat/ChatContainer.tsx
+++ b/src/packages/ui/src/components/chat/ChatContainer.tsx
@@ -1,23 +1,23 @@
import React from 'react';
import { RiArrowLeftLine } from '@remixicon/react';
-import { useShallow } from 'zustand/react/shallow';
-import type { Message, Part } from '@opencode-ai/sdk/v2';
+import type { Message, Part, Session } from '@opencode-ai/sdk/v2';
import { ChatInput } from './ChatInput';
-import { useSessionStore } from '@/stores/useSessionStore';
import { useUIStore } from '@/stores/useUIStore';
import { Skeleton } from '@/components/ui/skeleton';
import ChatEmptyState from './ChatEmptyState';
import MessageList, { type MessageListHandle } from './MessageList';
+import { PermissionCard } from './PermissionCard';
+import { QuestionCard } from './QuestionCard';
+import { StatusRowContainer } from './StatusRowContainer';
import ScrollToBottomButton from './components/ScrollToBottomButton';
import { ScrollShadow } from '@/components/ui/ScrollShadow';
-import { useChatScrollManager } from '@/hooks/useChatScrollManager';
+import { useChatScrollManager, type AnimationHandlers, type ContentChangeReason } from '@/hooks/useChatScrollManager';
import { useChatTimelineController } from './hooks/useChatTimelineController';
import { useChatTurnNavigation } from './hooks/useChatTurnNavigation';
import { useDeviceInfo } from '@/lib/device';
import { Button } from '@/components/ui/button';
import { OverlayScrollbar } from '@/components/ui/OverlayScrollbar';
-import { TimelineDialog } from './TimelineDialog';
import type { PermissionRequest } from '@/types/permission';
import type { QuestionRequest } from '@/types/question';
import { cn } from '@/lib/utils';
@@ -26,11 +26,99 @@ import {
flattenBlockingRequests,
} from './lib/blockingRequests';
+// New sync system imports
+import { useSessionUIStore } from '@/sync/session-ui-store';
+import { useViewportStore } from '@/sync/viewport-store';
+import { useStreamingStore } from '@/sync/streaming';
+import {
+ useSessionMessageCount,
+ useSessionMessageRecords,
+ useSessions,
+ useDirectorySync,
+ useSessionStatus,
+} from '@/sync/sync-context';
+import { useSync } from '@/sync/use-sync';
+import { usePlanDetection } from '@/hooks/usePlanDetection';
+import { getAllSyncSessions } from '@/sync/sync-refs';
+import { useI18n } from '@/lib/i18n';
+
const EMPTY_MESSAGES: Array<{ info: Message; parts: Part[] }> = [];
const EMPTY_PERMISSIONS: PermissionRequest[] = [];
const EMPTY_QUESTIONS: QuestionRequest[] = [];
const IDLE_SESSION_STATUS = { type: 'idle' as const };
const SESSION_RESELECTED_EVENT = 'openchamber:session-reselected';
+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;
@@ -38,6 +126,162 @@ type HydratingToolSkeletonRow = {
detailWidth: string;
};
+type ChatViewportProps = {
+ currentSessionId: string;
+ isDesktopExpandedInput: boolean;
+ isMobile: boolean;
+ stickyUserHeader: boolean;
+ scrollRef: React.RefObject;
+ messageListRef: React.RefObject;
+ turnStart: number;
+ pendingRevealWork: boolean;
+ renderedMessages: SessionMessageRecord[];
+ hasMoreAboveTurns: boolean;
+ 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;
+ handleLoadOlder: () => void;
+ scrollToBottom: (options?: { instant?: boolean; force?: boolean }) => void;
+ sessionQuestions: QuestionRequest[];
+ sessionPermissions: PermissionRequest[];
+ isProgrammaticFollowActive: boolean;
+};
+
+const ChatViewport = React.memo(({
+ currentSessionId,
+ isDesktopExpandedInput,
+ isMobile,
+ stickyUserHeader,
+ scrollRef,
+ messageListRef,
+ turnStart,
+ pendingRevealWork,
+ renderedMessages,
+ hasMoreAboveTurns,
+ isLoadingOlder,
+ sessionIsWorking,
+ streamingMessageId,
+ activeStreamingPhase,
+ retryOverlay,
+ handleMessageContentChange,
+ getAnimationHandlers,
+ handleLoadOlder,
+ scrollToBottom,
+ sessionQuestions,
+ sessionPermissions,
+ isProgrammaticFollowActive,
+}: ChatViewportProps) => {
+ const focusScrollContainer = React.useCallback((event: React.MouseEvent) => {
+ if (event.defaultPrevented || shouldIgnoreChatNavigationTarget(event.target)) {
+ return;
+ }
+
+ if (typeof window !== 'undefined' && window.getSelection()?.type === 'Range') {
+ return;
+ }
+
+ scrollRef.current?.focus({ preventScroll: true });
+ }, [scrollRef]);
+
+ return (
+
+
+
+
+
+ {(sessionQuestions.length > 0 || sessionPermissions.length > 0) && (
+
+ {sessionQuestions.map((question) => (
+
+ ))}
+ {sessionPermissions.map((permission) => (
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
+
();
+ for (const [k, v] of Object.entries(allPermissions)) m.set(k, v as PermissionRequest[]);
+ return m;
+ }, [allPermissions]);
- const blockingRequestState = useSessionStore(
- useShallow((state) => ({
- sessions: state.sessions,
- permissions: state.permissions,
- questions: state.questions,
- }))
- );
+ const questionsMap = React.useMemo(() => {
+ const m = new Map();
+ for (const [k, v] of Object.entries(allQuestions)) m.set(k, v as QuestionRequest[]);
+ return m;
+ }, [allQuestions]);
const scopedSessionIds = React.useMemo(
() => collectVisibleSessionIdsForBlockingRequests(
- blockingRequestState.sessions.map((session) => ({ id: session.id, parentID: session.parentID })),
+ sessions.map((session) => ({ id: session.id, parentID: session.parentID })),
currentSessionId,
),
- [blockingRequestState.sessions, currentSessionId]
+ [sessions, currentSessionId],
);
const sessionPermissions = React.useMemo(() => {
if (scopedSessionIds.length === 0) return EMPTY_PERMISSIONS;
- return flattenBlockingRequests(blockingRequestState.permissions, scopedSessionIds);
- }, [blockingRequestState.permissions, scopedSessionIds]);
+ return flattenBlockingRequests(permissionsMap, scopedSessionIds);
+ }, [permissionsMap, scopedSessionIds]);
const sessionQuestions = React.useMemo(() => {
if (scopedSessionIds.length === 0) return EMPTY_QUESTIONS;
- return flattenBlockingRequests(blockingRequestState.questions, scopedSessionIds);
- }, [blockingRequestState.questions, scopedSessionIds]);
+ return flattenBlockingRequests(questionsMap, scopedSessionIds);
+ }, [questionsMap, scopedSessionIds]);
+ const sessionIsWorking = React.useMemo(() => {
+ if (!currentSessionId || sessionPermissions.length > 0 || sessionQuestions.length > 0) {
+ return false;
+ }
- const historyMeta = useSessionStore(
- React.useCallback(
- (state) => (currentSessionId ? state.sessionHistoryMeta.get(currentSessionId) ?? null : null),
- [currentSessionId]
- )
- );
+ if (streamingMessageId || activeStreamingPhase) {
+ return true;
+ }
- const streamingMessageId = useSessionStore(
- React.useCallback(
- (state) => (currentSessionId ? state.streamingMessageIds.get(currentSessionId) ?? null : null),
- [currentSessionId]
- )
- );
+ const statusType = sessionStatusForCurrent.type ?? 'idle';
+ if (statusType === 'busy' || statusType === 'retry') {
+ return true;
+ }
- const sessionStatusForCurrent = useSessionStore(
- React.useCallback(
- (state) => (currentSessionId ? state.sessionStatus?.get(currentSessionId) ?? IDLE_SESSION_STATUS : IDLE_SESSION_STATUS),
- [currentSessionId]
- )
- );
+ 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',
+ );
+ }, [activeStreamingPhase, currentSessionId, sessionMessages, sessionPermissions.length, sessionQuestions.length, sessionStatusForCurrent.type, streamingMessageId]);
+ const activeRetryStatus = React.useMemo(() => {
+ if (!currentSessionId || sessionStatusForCurrent.type !== 'retry') {
+ return null;
+ }
- const hasSessionMessagesEntry = useSessionStore(
- React.useCallback((state) => (currentSessionId ? state.messages.has(currentSessionId) : false), [currentSessionId])
- );
+ 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(0);
+ const retryFallbackSessionRef = React.useRef(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: !sync.hasMore(currentSessionId),
+ loading: sync.isLoading(currentSessionId),
+ };
+ }, [currentSessionId, sessionMessages.length, sync]);
const { isMobile } = useDeviceInfo();
const draftOpen = Boolean(newSessionDraft?.open);
@@ -173,24 +495,19 @@ export const ChatContainer: React.FC = () => {
const messageListRef = React.useRef(null);
const parentSession = React.useMemo(() => {
- if (!currentSessionId) {
- return null;
- }
-
+ if (!currentSessionId) return null;
const current = sessions.find((session) => session.id === currentSessionId);
const parentID = current?.parentID;
- if (!parentID) {
- return null;
- }
-
- return sessions.find((session) => session.id === parentID) ?? null;
+ if (!parentID) return null;
+ return sessions.find((session) => session.id === parentID)
+ ?? getAllSyncSessions().find((session) => session.id === parentID)
+ ?? null;
}, [currentSessionId, sessions]);
const handleReturnToParentSession = React.useCallback(() => {
- if (!parentSession) {
- return;
- }
- void setCurrentSession(parentSession.id);
+ if (!parentSession) return;
+ const parentDirectory = (parentSession as Session & { directory?: string | null }).directory ?? null;
+ setCurrentSession(parentSession.id, parentDirectory);
}, [parentSession, setCurrentSession]);
const returnToParentButton = parentSession ? (
@@ -200,11 +517,13 @@ export const ChatContainer: React.FC = () => {
size="xs"
onClick={handleReturnToParentSession}
className="absolute left-3 top-3 z-20 !font-normal bg-[var(--surface-background)]/95"
- aria-label="Return to parent session"
- title={parentSession.title?.trim() ? `Return to: ${parentSession.title}` : 'Return to parent session'}
+ aria-label={t('chat.container.returnToParent.aria')}
+ title={parentSession.title?.trim()
+ ? t('chat.container.returnToParent.titleNamed', { title: parentSession.title })
+ : t('chat.container.returnToParent.title')}
>
;
- if (customEvent.detail !== currentSessionId) {
+ const handleChatTurnKeyDown = (event: KeyboardEvent) => {
+ if (event.defaultPrevented || event.isComposing) {
return;
}
- resumeToBottomInstant();
+ 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.useEffect(() => {
+ if (typeof window === 'undefined' || !currentSessionId) return;
+
+ const handleSessionReselected = (event: Event) => {
+ const customEvent = event as CustomEvent;
+ if (customEvent.detail !== currentSessionId) return;
+ if (isPinned || !isOverflowing || isProgrammaticFollowActive) return;
+ void resumeToBottomInstant();
};
window.addEventListener(SESSION_RESELECTED_EVENT, handleSessionReselected as EventListener);
return () => {
window.removeEventListener(SESSION_RESELECTED_EVENT, handleSessionReselected as EventListener);
};
- }, [currentSessionId, resumeToBottomInstant]);
+ }, [currentSessionId, isOverflowing, isPinned, isProgrammaticFollowActive, resumeToBottomInstant]);
React.useLayoutEffect(() => {
const container = scrollRef.current;
- if (!container) {
- return;
- }
+ if (!container) return;
const updateChatScrollHeight = () => {
container.style.setProperty('--chat-scroll-height', `${container.clientHeight}px`);
@@ -329,37 +711,56 @@ export const ChatContainer: React.FC = () => {
};
}, [currentSessionId, isDesktopExpandedInput, scrollRef]);
- const hasHistoryMetadata = React.useMemo(() => {
- return Boolean(historyMeta);
- }, [historyMeta]);
+ const lastScrolledSessionRef = React.useRef(null);
const isSessionHydrating =
Boolean(currentSessionId)
- && (!hasSessionMessagesEntry || !hasHistoryMetadata || historyMeta?.loading === true);
+ && !hasLoadedSessionMessages;
React.useEffect(() => {
if (!currentSessionId) {
return;
}
- const hasSessionMessages = hasSessionMessagesEntry;
- if (hasSessionMessages && hasHistoryMetadata) {
+ if (lastScrolledSessionRef.current === currentSessionId) {
return;
}
+ const hasHashTarget = typeof window !== 'undefined' && window.location.hash.length > 0;
+ if (hasHashTarget) {
+ lastScrolledSessionRef.current = currentSessionId;
+ return;
+ }
+
+ lastScrolledSessionRef.current = currentSessionId;
+
+ if (typeof window === 'undefined') {
+ resumeToLatestInstant();
+ return;
+ }
+
+ window.requestAnimationFrame(() => {
+ resumeToLatestInstant();
+ });
+ }, [currentSessionId, resumeToLatestInstant]);
+
+ React.useEffect(() => {
+ if (!currentSessionId) return;
+ if (hasLoadedSessionMessages) return;
+
const load = async () => {
await loadMessages(currentSessionId).finally(() => {
const statusType = sessionStatusForCurrent.type ?? 'idle';
const isActivePhase = statusType === 'busy' || statusType === 'retry';
const hasHashTarget = typeof window !== 'undefined' && window.location.hash.length > 0;
- const shouldSkipScroll = (isActivePhase && isPinned) || hasHashTarget;
+ const shouldSkipScroll = hasHashTarget || (isActivePhase && isPinned);
if (!shouldSkipScroll) {
if (typeof window === 'undefined') {
- scrollToBottom({ instant: true });
+ resumeToLatestInstant();
} else {
window.requestAnimationFrame(() => {
- scrollToBottom({ instant: true });
+ resumeToLatestInstant();
});
}
}
@@ -367,41 +768,35 @@ export const ChatContainer: React.FC = () => {
};
void load();
- }, [currentSessionId, hasHistoryMetadata, hasSessionMessagesEntry, isPinned, loadMessages, scrollToBottom, sessionMessages.length, sessionStatusForCurrent.type]);
+ }, [currentSessionId, hasLoadedSessionMessages, isPinned, loadMessages, resumeToLatestInstant, sessionStatusForCurrent.type]);
- if (!currentSessionId && !draftOpen) {
- return (
-
-
- );
- }
+ if (!currentSessionId && !draftOpen) {
+ return (
+
+
+ );
+ }
- if (!currentSessionId && draftOpen) {
- return (
-
- {!isDesktopExpandedInput ? (
-
-
- ) : null}
+ if (!currentSessionId && draftOpen) {
+ return (
+
+ {!isDesktopExpandedInput ? (
+
+
+ ) : null}
-
-
+ isDesktopExpandedInput
+ ? 'flex-1 min-h-0 bg-background'
+ : 'bg-background'
+ )}
+ >
+
+
);
}
@@ -409,23 +804,20 @@ export const ChatContainer: React.FC = () => {
return null;
}
- if (isSessionHydrating && sessionMessages.length === 0 && !streamingMessageId) {
- return (
-
- {returnToParentButton}
-
+ {returnToParentButton}
+
-
+
{HYDRATING_SKELETON_ITEMS.map((item) => (
@@ -457,26 +849,23 @@ export const ChatContainer: React.FC = () => {
-
+ isDesktopExpandedInput
+ ? 'flex-1 min-h-0 bg-background'
+ : 'bg-background'
+ )}
+ >
+
+
);
}
- if (sessionMessages.length === 0 && !streamingMessageId) {
- return (
-
- {returnToParentButton}
-
+ {returnToParentButton}
+
{
-
+ isDesktopExpandedInput
+ ? 'flex-1 min-h-0 bg-background'
+ : 'bg-background'
+ )}
+ >
+
+
);
}
- return (
-
- {returnToParentButton}
-
-
-
-
- {
- void timelineController.loadEarlier();
- }}
- scrollToBottom={scrollToBottom}
- scrollRef={scrollRef}
- />
-
-
-
-
-
+ return (
+
+ {returnToParentButton}
+
- {!isDesktopExpandedInput && sessionMessages.length > 0 && (
-
+ {!isDesktopExpandedInput && sessionMessages.length > 0 && (
+
-
-
{
- releasePinnedScroll();
- return navigation.scrollToMessageId(messageId, { behavior: 'smooth', updateHash: false });
- }}
- onScrollByTurnOffset={(offset) => {
- releasePinnedScroll();
- void navigation.scrollByTurnOffset(offset);
- }}
- onResumeToLatest={navigation.resumeToLatest}
- />
);
};
diff --git a/src/packages/ui/src/components/chat/ChatEmptyState.tsx b/src/packages/ui/src/components/chat/ChatEmptyState.tsx
index 00c30ee..e5ad6e9 100644
--- a/src/packages/ui/src/components/chat/ChatEmptyState.tsx
+++ b/src/packages/ui/src/components/chat/ChatEmptyState.tsx
@@ -1,45 +1,29 @@
import React from 'react';
import { OpenChamberLogo } from '@/components/ui/OpenChamberLogo';
-import { TextLoop } from '@/components/ui/TextLoop';
import { useThemeSystem } from '@/contexts/useThemeSystem';
-
-const phrases = [
- "Fix the failing tests",
- "Refactor this to be more readable",
- "Add form validation",
- "Optimize this function",
- "Write tests for this",
- "Explain how this works",
- "Add a new feature",
- "Help me debug this",
- "Review my code",
- "Simplify this logic",
- "Add error handling",
- "Create a new component",
- "Update the documentation",
- "Find the bug here",
- "Improve performance",
- "Add type definitions",
-];
+import { useGlobalSyncStore } from '@/sync/global-sync-store';
+import { useI18n } from '@/lib/i18n';
const ChatEmptyState: React.FC = () => {
+ const { t } = useI18n();
const { currentTheme } = useThemeSystem();
+ const initError = useGlobalSyncStore((s) => s.error);
- // Use theme's muted foreground for secondary text
const textColor = currentTheme?.colors?.surface?.mutedForeground || 'var(--muted-foreground)';
return (
-
-
- {phrases.map((phrase) => (
- "{phrase}…"
- ))}
-
+
+ {initError ? (
+
+ {t('chat.emptyState.opencodeUnreachable')}
+
+ {initError.message}
+
+
+ ) : (
+
{t('chat.emptyState.startNewChat')}
+ )}
);
};
diff --git a/src/packages/ui/src/components/chat/ChatErrorBoundary.tsx b/src/packages/ui/src/components/chat/ChatErrorBoundary.tsx
index c2fc26a..29d3e12 100644
--- a/src/packages/ui/src/components/chat/ChatErrorBoundary.tsx
+++ b/src/packages/ui/src/components/chat/ChatErrorBoundary.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import { RiChat3Line, RiRestartLine } from '@remixicon/react';
import { Button } from '../ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
+import { useI18n } from '@/lib/i18n';
interface ChatErrorBoundaryState {
hasError: boolean;
@@ -14,8 +15,21 @@ interface ChatErrorBoundaryProps {
sessionId?: string;
}
-export class ChatErrorBoundary extends React.Component
{
- constructor(props: ChatErrorBoundaryProps) {
+interface ChatErrorBoundaryTexts {
+ title: string;
+ description: string;
+ sessionLabel: string;
+ detailsSummary: string;
+ resetAction: string;
+ persistentHint: string;
+}
+
+interface ChatErrorBoundaryViewProps extends ChatErrorBoundaryProps {
+ texts: ChatErrorBoundaryTexts;
+}
+
+class ChatErrorBoundaryView extends React.Component {
+ constructor(props: ChatErrorBoundaryViewProps) {
super(props);
this.state = { hasError: false };
}
@@ -44,24 +58,24 @@ export class ChatErrorBoundary extends React.Component
- The chat interface encountered an error. This might be due to a temporary network issue or corrupted message data.
+ {this.props.texts.description}
{this.props.sessionId && (
- Session: {this.props.sessionId}
+ {this.props.texts.sessionLabel}: {this.props.sessionId}
)}
{this.state.error && (
- Error details
-
+ {this.props.texts.detailsSummary}
+
{this.state.error.toString()}
@@ -70,12 +84,12 @@ export class ChatErrorBoundary extends React.Component
- If the problem persists, try refreshing the page.
+ {this.props.texts.persistentHint}
@@ -86,3 +100,20 @@ export class ChatErrorBoundary extends React.Component
+ );
+}
diff --git a/src/packages/ui/src/components/chat/ChatInput.tsx b/src/packages/ui/src/components/chat/ChatInput.tsx
index dd1526d..24b724d 100644
--- a/src/packages/ui/src/components/chat/ChatInput.tsx
+++ b/src/packages/ui/src/components/chat/ChatInput.tsx
@@ -16,37 +16,40 @@ import {
RiSendPlane2Line,
} from '@remixicon/react';
import { BrowserVoiceButton } from '@/components/voice';
-import { useSessionStore } from '@/stores/useSessionStore';
-import { useSessionStore as useSessionManagementStore } from '@/stores/sessionStore';
+// sessionStore removed — currentSessionId comes from useSessionUIStore
import { useConfigStore } from '@/stores/useConfigStore';
import { useUIStore } from '@/stores/useUIStore';
import { useMessageQueueStore, type QueuedMessage } from '@/stores/messageQueueStore';
+import { useSessionUIStore } from '@/sync/session-ui-store';
+import { useSelectionStore } from '@/sync/selection-store';
+import { useInputStore } from '@/sync/input-store';
import type { AttachedFile } from '@/stores/types/sessionTypes';
+import * as sessionActions from '@/sync/session-actions';
+import { useUserMessageHistory } from '@/sync/sync-context';
import { useInlineCommentDraftStore, type InlineCommentDraft } from '@/stores/useInlineCommentDraftStore';
import { appendInlineComments } from '@/lib/messages/inlineComments';
+import { renderMagicPrompt } from '@/lib/magicPrompts';
import { AttachedFilesList } from './FileAttachment';
import { QueuedMessageChips } from './QueuedMessageChips';
import { FileMentionAutocomplete, type FileMentionHandle } from './FileMentionAutocomplete';
-import { CommandAutocomplete, type CommandAutocompleteHandle } from './CommandAutocomplete';
+import { CommandAutocomplete, type CommandAutocompleteHandle, type CommandInfo } from './CommandAutocomplete';
import { SkillAutocomplete, type SkillAutocompleteHandle } from './SkillAutocomplete';
import { cn, formatDirectoryName, isMacOS } from '@/lib/utils';
import { ModelControls } from './ModelControls';
-import { UnifiedControlsDrawer } from './UnifiedControlsDrawer';
import { parseAgentMentions } from '@/lib/messages/agentMentions';
import { StatusRow } from './StatusRow';
+import { PendingChangesBar } from './PendingChangesBar';
import { MobileAgentButton } from './MobileAgentButton';
import { MobileModelButton } from './MobileModelButton';
import { MobileSessionStatusBar } from './MobileSessionStatusBar';
-import { useAssistantStatus } from '@/hooks/useAssistantStatus';
import { useCurrentSessionActivity } from '@/hooks/useSessionActivity';
import { toast } from '@/components/ui';
-import { useFileStore } from '@/stores/fileStore';
-import { useMessageStore } from '@/stores/messageStore';
+// useMessageStore removed — messages now come from sync system
import { isTauriShell, isVSCodeRuntime } from '@/lib/desktop';
import { isIMECompositionEvent } from '@/lib/ime';
import { StopIcon } from '@/components/icons/StopIcon';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import type { MobileControlsPanel } from './mobileControlsUtils';
+import { getCycledPrimaryAgentName, type MobileControlsPanel } from './mobileControlsUtils';
import {
DropdownMenu,
DropdownMenuContent,
@@ -61,10 +64,14 @@ import { useChatSearchDirectory } from '@/hooks/useChatSearchDirectory';
import { opencodeClient } from '@/lib/opencode/client';
import { useProjectsStore } from '@/stores/useProjectsStore';
import { PROJECT_COLOR_MAP, PROJECT_ICON_MAP, getProjectIconImageUrl } from '@/lib/projectMeta';
-import { useGitBranches, useGitStore } from '@/stores/useGitStore';
+import { useGitBranches, useGitStore, useIsGitRepo } from '@/stores/useGitStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
import { createWorktreeDraft } from '@/lib/worktreeSessionCreator';
+import { buildSessionTargetOptions } from '@/sync/session-worktree-contract';
import { usePermissionStore } from '@/stores/permissionStore';
+import { extractGitChangedFiles } from './changedFiles';
+import { useI18n } from '@/lib/i18n';
const MAX_VISIBLE_TEXTAREA_LINES = 8;
const EMPTY_QUEUE: QueuedMessage[] = [];
@@ -81,6 +88,28 @@ const VS_CODE_DROP_DATA_TYPES = [
const FILE_URI_PREFIX = 'file://';
+const encodeFilePath = (filepath: string): string => {
+ let normalized = filepath.replace(/\\/g, '/');
+ if (/^[A-Za-z]:/.test(normalized)) {
+ normalized = `/${normalized}`;
+ }
+ return normalized
+ .split('/')
+ .map((segment, index) => {
+ if (index === 1 && /^[A-Za-z]:$/.test(segment)) return segment;
+ return encodeURIComponent(segment);
+ })
+ .join('/');
+};
+
+const toServerFileUrl = (filepath: string): string => {
+ const normalized = filepath.replace(/\\/g, '/').trim();
+ if (normalized.toLowerCase().startsWith(FILE_URI_PREFIX)) {
+ return normalized;
+ }
+ return `file://${encodeFilePath(normalized)}`;
+};
+
const isLikelyAbsolutePath = (value: string): boolean => (
value.startsWith('/')
|| value.startsWith('\\\\')
@@ -198,6 +227,373 @@ const getProjectIconColor = (projectColor?: string | null): string | undefined =
return PROJECT_COLOR_MAP[projectColor] ?? undefined;
};
+const MemoModelControls = React.memo(ModelControls);
+const MemoBrowserVoiceButton = React.memo(BrowserVoiceButton);
+const MemoMobileAgentButton = React.memo(MobileAgentButton);
+const MemoMobileModelButton = React.memo(MobileModelButton);
+const MemoStatusRow = React.memo(StatusRow);
+
+type ComposerAttachmentControlsProps = {
+ isMobile: boolean;
+ isVSCode: boolean;
+ footerIconButtonClass: string;
+ iconSizeClass: string;
+ fileInputRef: React.RefObject
;
+ handleLocalFileSelect: (event: React.ChangeEvent) => void | Promise;
+ handlePickLocalFiles: () => void;
+ handleOpenCommandMenu: () => void;
+ openIssuePicker: () => void;
+ openPrPicker: () => void;
+ onOpenSettings?: () => void;
+};
+
+const ComposerAttachmentControls = React.memo(function ComposerAttachmentControls(props: ComposerAttachmentControlsProps) {
+ const { t } = useI18n();
+ const {
+ isMobile,
+ isVSCode,
+ footerIconButtonClass,
+ iconSizeClass,
+ fileInputRef,
+ handleLocalFileSelect,
+ handlePickLocalFiles,
+ handleOpenCommandMenu,
+ openIssuePicker,
+ openPrPicker,
+ onOpenSettings,
+ } = props;
+
+ return (
+
+ {isMobile ? (
+
{
+ if (event.pointerType === 'touch') {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }}
+ onClick={handleOpenCommandMenu}
+ title={t('chat.chatInput.actions.commands')}
+ aria-label={t('chat.chatInput.actions.commands')}
+ >
+
+ ) : null}
+
+
+
+ {isVSCode ? (
+
+
+ ) : (
+
+
+
+
+
+
+ {
+ requestAnimationFrame(handlePickLocalFiles);
+ }}
+ >
+
+ {
+ requestAnimationFrame(openIssuePicker);
+ }}
+ >
+
+ {
+ requestAnimationFrame(openPrPicker);
+ }}
+ >
+
+
+
+ )}
+
+
+ {onOpenSettings ? (
+
+
+ ) : null}
+
{
+ event.preventDefault();
+ }}
+ onPointerDownCapture={(event) => {
+ if (event.pointerType === 'touch') {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }}
+ aria-pressed={permissionAutoAcceptEnabled}
+ aria-label={ariaLabel}
+ title={ariaLabel}
+ >
+ {permissionAutoAcceptEnabled ? (
+
+ );
+
+ if (!withTooltip) {
+ return button;
+ }
+
+ return (
+
+
+ {button}
+
+
+ {tooltipLabel}
+
+
+ );
+});
+
+type FocusModeButtonProps = {
+ footerIconButtonClass: string;
+ iconSizeClass: string;
+ isExpandedInput: boolean;
+ onToggle: () => void;
+};
+
+const FocusModeButton = React.memo(function FocusModeButton(props: FocusModeButtonProps) {
+ const { footerIconButtonClass, iconSizeClass, isExpandedInput, onToggle } = props;
+ const { t } = useI18n();
+
+ return (
+
+
+ {
+ event.preventDefault();
+ }}
+ onClick={onToggle}
+ aria-label={t('chat.chatInput.focusMode.toggleAria')}
+ aria-pressed={isExpandedInput}
+ >
+
+
+
+
+ {t('chat.chatInput.focusMode.label')}
+
+ {isMacOS() ? '⌘⇧E' : 'Ctrl+Shift+E'}
+
+
+
+
+ );
+});
+
+type ComposerActionButtonsProps = {
+ isMobile: boolean;
+ footerIconButtonClass: string;
+ sendIconSizeClass: string;
+ stopIconSizeClass: string;
+ canSend: boolean;
+ canAbort: boolean;
+ hasContent: boolean;
+ currentSessionId: string | null;
+ newSessionDraftOpen: boolean;
+ onPrimaryAction: () => void;
+ onQueueMessage: () => void;
+ onAbort: () => void;
+};
+
+const ComposerActionButtons = React.memo(function ComposerActionButtons(props: ComposerActionButtonsProps) {
+ const {
+ isMobile,
+ footerIconButtonClass,
+ sendIconSizeClass,
+ stopIconSizeClass,
+ canSend,
+ canAbort,
+ hasContent,
+ currentSessionId,
+ newSessionDraftOpen,
+ onPrimaryAction,
+ onQueueMessage,
+ onAbort,
+ } = props;
+ const { t } = useI18n();
+
+ const sendButton = (
+ {
+ if (!isMobile) {
+ return;
+ }
+
+ event.preventDefault();
+ onPrimaryAction();
+ }}
+ className={cn(
+ footerIconButtonClass,
+ canSend && (currentSessionId || newSessionDraftOpen)
+ ? 'text-primary hover:text-primary'
+ : 'opacity-30'
+ )}
+ aria-label={t('chat.chatInput.actions.sendMessageAria')}
+ >
+
+ );
+
+ if (!canAbort) {
+ return sendButton;
+ }
+
+ return (
+
+ {hasContent ? (
+ {
+ if (isMobile) {
+ event.preventDefault();
+ }
+ onQueueMessage();
+ }}
+ className={cn(
+ footerIconButtonClass,
+ 'absolute z-20 bottom-full left-1/2 -translate-x-1/2 mb-1',
+ currentSessionId ? 'text-primary hover:text-primary' : 'opacity-30'
+ )}
+ aria-label={t('chat.chatInput.actions.queueMessageAria')}
+ >
+
+ ) : null}
+
+
+
+ );
+}, (prev, next) => (
+ prev.isMobile === next.isMobile
+ && prev.footerIconButtonClass === next.footerIconButtonClass
+ && prev.sendIconSizeClass === next.sendIconSizeClass
+ && prev.stopIconSizeClass === next.stopIconSizeClass
+ && prev.canSend === next.canSend
+ && prev.canAbort === next.canAbort
+ && prev.hasContent === next.hasContent
+ && prev.currentSessionId === next.currentSessionId
+ && prev.newSessionDraftOpen === next.newSessionDraftOpen
+));
+
const appendWithLineBreaks = (base: string, next: string): string => {
const separator = !base
? ''
@@ -266,14 +662,46 @@ const saveStoredDraft = (sessionId: string | null, draft: string): void => {
}
};
-export const ChatInput: React.FC = ({ onOpenSettings, scrollToBottom }) => {
+// Per-session confirmed mentions key — tracks which @mentions are confirmed (blue) vs plain text
+const getConfirmedMentionsKey = (sessionId: string | null): string =>
+ `openchamber_chat_confirmed_mentions_${sessionId ?? 'new'}`;
+
+const saveConfirmedMentions = (sessionId: string | null, mentions: Set): void => {
+ try {
+ if (mentions.size > 0) {
+ localStorage.setItem(getConfirmedMentionsKey(sessionId), JSON.stringify([...mentions]));
+ } else {
+ localStorage.removeItem(getConfirmedMentionsKey(sessionId));
+ }
+ } catch {
+ // Ignore localStorage errors
+ }
+};
+
+const loadConfirmedMentions = (sessionId: string | null): Set => {
+ try {
+ const raw = localStorage.getItem(getConfirmedMentionsKey(sessionId));
+ if (raw) {
+ const parsed = JSON.parse(raw);
+ if (Array.isArray(parsed)) {
+ return new Set(parsed.filter((v): v is string => typeof v === 'string'));
+ }
+ }
+ } catch {
+ // Ignore localStorage errors
+ }
+ return new Set();
+};
+
+const ChatInputComponent: React.FC = ({ onOpenSettings, scrollToBottom }) => {
+ const { t } = useI18n();
// Track if we restored a draft on mount (for text selection)
const initialDraftRef = React.useRef(null);
// Track initial session ID (captured at mount time for draft restoration)
const initialSessionIdRef = React.useRef(null);
const [message, setMessage] = React.useState(() => {
// Read per-session draft at mount time using the current session from the store
- const sessionId = useSessionStore.getState().currentSessionId;
+ const sessionId = useSessionUIStore.getState().currentSessionId;
initialSessionIdRef.current = sessionId;
const draft = getStoredDraft(sessionId);
if (draft) {
@@ -281,8 +709,14 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}
return draft;
});
+ // Restore confirmed mentions from localStorage on mount
+ const confirmedMentionsRef = React.useRef>(loadConfirmedMentions(initialSessionIdRef.current));
+ // Helper: check if a mention path looks like a file/folder (has path separators, extension, or was explicitly confirmed)
+ const isConfirmedFilePath = (text: string): boolean =>
+ text.includes('/') || text.includes('\\') || text.includes('.') || confirmedMentionsRef.current.has(text);
const [inputMode, setInputMode] = React.useState<'normal' | 'shell'>('normal');
const [isDragging, setIsDragging] = React.useState(false);
+ const [isInternalDrag, setIsInternalDrag] = React.useState(false);
const [showFileMention, setShowFileMention] = React.useState(false);
const [mentionQuery, setMentionQuery] = React.useState('');
const [showCommandAutocomplete, setShowCommandAutocomplete] = React.useState(false);
@@ -291,13 +725,15 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
const [showSkillAutocomplete, setShowSkillAutocomplete] = React.useState(false);
const [skillQuery, setSkillQuery] = React.useState('');
const [textareaSize, setTextareaSize] = React.useState<{ height: number; maxHeight: number } | null>(null);
- const [mobileControlsOpen, setMobileControlsOpen] = React.useState(false);
const [mobileControlsPanel, setMobileControlsPanel] = React.useState(null);
// Message history navigation state (up/down arrow to recall previous messages)
const [historyIndex, setHistoryIndex] = React.useState(-1); // -1 = not browsing, 0+ = index from most recent
const [draftMessage, setDraftMessage] = React.useState(''); // Preserves input when entering history mode
const textareaRef = React.useRef(null);
+ const cursorPosRef = React.useRef(0);
+ const previousMessageLengthRef = React.useRef(message.length);
const dropZoneRef = React.useRef(null);
+ const dragEnterCountRef = React.useRef(0);
const suppressNextFileDropTextInsertRef = React.useRef(false);
const suppressNextFileDropTextInsertTimeoutRef = React.useRef | null>(null);
const pendingDroppedAbsolutePathsRef = React.useRef([]);
@@ -313,54 +749,77 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
const lastPersistedDraftRef = React.useRef>(new Map());
const currentSessionIdForDraftRef = React.useRef(null);
- const sendMessage = useSessionStore((state) => state.sendMessage);
- const currentSessionId = useSessionStore((state) => state.currentSessionId);
- const newSessionDraft = useSessionStore((state) => state.newSessionDraft);
+ // TODO: port sendMessage to session-actions (complex — creates sessions, handles attachments, etc.)
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const sendMessage = React.useRef((...args: any[]) =>
+ Promise.resolve((useSessionUIStore.getState().sendMessage as (...a: unknown[]) => unknown)(...args)),
+ ).current;
+ const currentSessionId = useSessionUIStore((s) => s.currentSessionId);
+ const currentDirectory = useDirectoryStore((s) => s.currentDirectory);
+ const newSessionDraft = useSessionUIStore((s) => s.newSessionDraft);
const newSessionDraftOpen = Boolean(newSessionDraft?.open);
- const setNewSessionDraftTarget = useSessionStore((state) => state.setNewSessionDraftTarget);
- const availableWorktreesByProject = useSessionStore((state) => state.availableWorktreesByProject);
- const abortCurrentOperation = useSessionStore((state) => state.abortCurrentOperation);
- const acknowledgeSessionAbort = useSessionStore((state) => state.acknowledgeSessionAbort);
- const abortPromptSessionId = useSessionStore((state) => state.abortPromptSessionId);
- const clearAbortPrompt = useSessionStore((state) => state.clearAbortPrompt);
- const attachedFiles = useSessionStore((state) => state.attachedFiles);
- const addAttachedFile = useSessionStore((state) => state.addAttachedFile);
- const clearAttachedFiles = useSessionStore((state) => state.clearAttachedFiles);
- const saveSessionAgentSelection = useSessionStore((state) => state.saveSessionAgentSelection);
- const consumePendingInputText = useSessionStore((state) => state.consumePendingInputText);
- const setPendingInputText = useSessionStore((state) => state.setPendingInputText);
- const pendingInputText = useSessionStore((state) => state.pendingInputText);
- const consumePendingSyntheticParts = useSessionStore((state) => state.consumePendingSyntheticParts);
- const currentManagementSessionId = useSessionManagementStore((state) => state.currentSessionId);
+ const setNewSessionDraftTarget = useSessionUIStore((s) => s.setNewSessionDraftTarget);
+ const availableWorktreesByProject = useSessionUIStore((s) => s.availableWorktreesByProject);
+ const abortPromptSessionId = useSessionUIStore((s) => s.abortPromptSessionId);
+ const clearAbortPrompt = useSessionUIStore((s) => s.clearAbortPrompt);
+ const attachedFiles = useInputStore((s) => s.attachedFiles);
+ const addAttachedFile = useInputStore((s) => s.addAttachedFile);
+ const clearAttachedFiles = useInputStore((s) => s.clearAttachedFiles);
+ const saveSessionAgentSelection = useSelectionStore((s) => s.saveSessionAgentSelection);
+ const consumePendingInputText = useInputStore((s) => s.consumePendingInputText);
+ const setPendingInputText = useInputStore((s) => s.setPendingInputText);
+ const pendingInputText = useInputStore((s) => s.pendingInputText);
+ const consumePendingSyntheticParts = useInputStore((s) => s.consumePendingSyntheticParts);
+ const acknowledgeSessionAbort = useSessionUIStore((s) => s.acknowledgeSessionAbort);
+ const abortCurrentOperation = React.useCallback(
+ (sessionIdOverride?: string) => sessionActions.abortCurrentOperation(sessionIdOverride ?? currentSessionId ?? ''),
+ [currentSessionId],
+ );
+ const currentManagementSessionId = currentSessionId;
const projects = useProjectsStore((state) => state.projects);
const activeProjectId = useProjectsStore((state) => state.activeProjectId);
const setActiveProjectIdOnly = useProjectsStore((state) => state.setActiveProjectIdOnly);
- const { currentProviderId, currentModelId, currentVariant, currentAgentName, setAgent, getVisibleAgents } = useConfigStore();
+ const currentProviderId = useConfigStore((state) => state.currentProviderId);
+ const currentModelId = useConfigStore((state) => state.currentModelId);
+ const currentVariant = useConfigStore((state) => state.currentVariant);
+ const currentAgentName = useConfigStore((state) => state.currentAgentName);
+ const setAgent = useConfigStore((state) => state.setAgent);
+ const getVisibleAgents = useConfigStore((state) => state.getVisibleAgents);
const agents = getVisibleAgents();
- const primaryAgents = React.useMemo(() => agents.filter((agent) => agent.mode === 'primary'), [agents]);
- const { isMobile, inputBarOffset, isKeyboardOpen, setTimelineDialogOpen, cornerRadius, persistChatDraft, inputSpellcheckEnabled, isExpandedInput, setExpandedInput } = useUIStore();
- const { working } = useAssistantStatus();
+ const isMobile = useUIStore((state) => state.isMobile);
+ const inputBarOffset = useUIStore((state) => state.inputBarOffset);
+ const persistChatDraft = useUIStore((state) => state.persistChatDraft);
+ const inputSpellcheckEnabled = useUIStore((state) => state.inputSpellcheckEnabled);
+ const isExpandedInput = useUIStore((state) => state.isExpandedInput);
+ const setExpandedInput = useUIStore((state) => state.setExpandedInput);
const { git: runtimeGit } = useRuntimeAPIs();
const { currentTheme } = useThemeSystem();
const chatSearchDirectory = useChatSearchDirectory();
+ const isGitRepo = useIsGitRepo(currentDirectory);
+ const currentGitStatus = useGitStore((state) =>
+ currentDirectory ? state.directories.get(currentDirectory)?.status ?? null : null,
+ );
const [showAbortStatus, setShowAbortStatus] = React.useState(false);
- const [textareaScrollTop, setTextareaScrollTop] = React.useState(0);
const setSessionAutoAccept = usePermissionStore((state) => state.setSessionAutoAccept);
+ const composerHighlightRef = React.useRef(null);
const isDesktopExpanded = isExpandedInput && !isMobile;
- const chatInputRadius = 'var(--radius-lg)';
+ const chatInputRadius = 'var(--radius-xl)';
- const sendableAttachedFiles = React.useMemo(
- () => attachedFiles.filter((file) => file.source !== 'server'),
- [attachedFiles],
+ const sendableAttachedFiles = attachedFiles;
+
+ const knownAgentNames = React.useMemo(
+ () => new Set(agents.map((agent) => agent.name.toLowerCase())),
+ [agents]
);
+ const knownAgentNamesRef = React.useRef(knownAgentNames);
+ knownAgentNamesRef.current = knownAgentNames;
const hasInlineMentionForHighlight = React.useMemo(() => {
if (!message || !message.includes('@') || inputMode === 'shell') {
return false;
}
- const knownAgentNames = new Set(agents.map((agent) => agent.name.toLowerCase()));
const mentionRegex = /@([^\s]+)/g;
let match: RegExpExecArray | null;
while ((match = mentionRegex.exec(message)) !== null) {
@@ -376,12 +835,12 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
if (knownAgentNames.has(mentionPath.toLowerCase())) {
return true;
}
- if (mentionPath.includes('/') || mentionPath.includes('\\') || mentionPath.includes('.')) {
+ if (isConfirmedFilePath(mentionPath)) {
return true;
}
}
return false;
- }, [agents, inputMode, message]);
+ }, [inputMode, message, knownAgentNames]);
const highlightedComposerContent = React.useMemo(() => {
if (!hasInlineMentionForHighlight) {
@@ -389,7 +848,6 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}
const parts: Array<{ text: string; mentionKind: 'none' | 'file' | 'agent' }> = [];
- const knownAgentNames = new Set(agents.map((agent) => agent.name.toLowerCase()));
const mentionRegex = /@([^\s]+)/g;
let lastIndex = 0;
let match: RegExpExecArray | null;
@@ -405,7 +863,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
const isFileMention = isBoundary
&& mention.length > 0
&& !knownAgentNames.has(mention.toLowerCase())
- && (mention.includes('/') || mention.includes('\\') || mention.includes('.'));
+ && isConfirmedFilePath(mention);
if (start > lastIndex) {
parts.push({ text: message.slice(lastIndex, start), mentionKind: 'none' });
@@ -422,12 +880,16 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}
return parts;
- }, [agents, hasInlineMentionForHighlight, message]);
+ }, [hasInlineMentionForHighlight, message, knownAgentNames]);
const sanitizeAttachmentsForSend = React.useCallback(
(files: AttachedFile[] | undefined): AttachedFile[] => (files ?? [])
- .filter((file) => file.source !== 'server')
- .map((file) => ({ ...file })),
+ .map((file) => ({
+ ...file,
+ dataUrl: file.source === 'server' && file.serverPath
+ ? toServerFileUrl(file.serverPath)
+ : file.dataUrl,
+ })),
[],
);
@@ -438,7 +900,6 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
const clientDirectory = opencodeClient.getDirectory() || '';
const root = (chatSearchDirectory || clientDirectory).replace(/\\/g, '/').replace(/\/+$/, '');
- const knownAgentNames = new Set(agents.map((agent) => agent.name.toLowerCase()));
const seenPaths = new Set();
const attachments: AttachedFile[] = [];
@@ -461,11 +922,11 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
continue;
}
- if (knownAgentNames.has(mentionPath.toLowerCase())) {
+ if (knownAgentNamesRef.current.has(mentionPath.toLowerCase())) {
continue;
}
- const looksLikeFilePath = mentionPath.includes('/') || mentionPath.includes('\\') || mentionPath.includes('.');
+ const looksLikeFilePath = isConfirmedFilePath(mentionPath);
if (!looksLikeFilePath) {
continue;
}
@@ -498,7 +959,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
filename,
mimeType: 'text/plain',
size: 0,
- dataUrl: normalizedServerPath,
+ dataUrl: toServerFileUrl(normalizedServerPath),
source: 'server',
serverPath: normalizedServerPath,
});
@@ -508,7 +969,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
sanitizedText: rawText,
attachments,
};
- }, [agents, chatSearchDirectory]);
+ }, [chatSearchDirectory]);
const [autocompleteOverlayPosition, setAutocompleteOverlayPosition] = React.useState(null);
const abortTimeoutRef = React.useRef | null>(null);
const prevWasAbortedRef = React.useRef(false);
@@ -563,29 +1024,9 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
const consumeDrafts = useInlineCommentDraftStore((state) => state.consumeDrafts);
const hasDrafts = draftCount > 0;
- // User message history for up/down arrow navigation
- // Get raw messages from store (stable reference)
- const sessionMessages = useMessageStore(
- React.useCallback(
- (state) => (currentSessionId ? state.messages.get(currentSessionId) : undefined),
- [currentSessionId]
- )
- );
- // Derive user message history with useMemo to avoid infinite re-renders
- const userMessageHistory = React.useMemo(() => {
- if (!sessionMessages) return [];
- return sessionMessages
- .filter((m) => m.info.role === 'user')
- .map((m) => {
- const textPart = m.parts.find((p) => p.type === 'text');
- if (textPart && 'text' in textPart) {
- return String(textPart.text);
- }
- return '';
- })
- .filter((text) => text.length > 0)
- .reverse(); // Most recent first
- }, [sessionMessages]);
+ // User message history for up/down arrow navigation.
+ // Keep this on a narrow hook instead of full session message records.
+ const userMessageHistory = useUserMessageHistory(currentSessionId ?? "");
// Keep messageRef in sync with message state
React.useEffect(() => {
@@ -604,6 +1045,15 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}
saveStoredDraft(sessionId, draft);
+ // Only persist confirmed mentions that are actually present in the draft text
+ const activeMentions = new Set();
+ for (const mention of confirmedMentionsRef.current) {
+ if (draft.includes(`@${mention}`)) {
+ activeMentions.add(mention);
+ }
+ }
+ confirmedMentionsRef.current = activeMentions;
+ saveConfirmedMentions(sessionId, activeMentions);
lastPersistedDraftRef.current.set(key, draft);
}, []);
@@ -656,6 +1106,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
// Restore draft for the session we're entering
const newDraft = getStoredDraft(currentSessionId);
setMessage(newDraft);
+ confirmedMentionsRef.current = loadConfirmedMentions(currentSessionId);
if (newDraft) {
requestAnimationFrame(() => {
textareaRef.current?.select();
@@ -664,6 +1115,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
} else {
// Persist disabled: clear input without saving
setMessage('');
+ confirmedMentionsRef.current = new Set();
}
}
}, [clearPendingDraftPersist, currentSessionId, persistChatDraft, persistDraftImmediately]);
@@ -723,98 +1175,16 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
// Session activity for queue availability and controls
const { phase: sessionPhase } = useCurrentSessionActivity();
- const handleTextareaPointerDownCapture = React.useCallback((event: React.PointerEvent) => {
- if (!isMobile) {
- return;
- }
-
- if (event.pointerType !== 'touch') {
- return;
- }
-
- const textarea = textareaRef.current;
- if (!textarea) {
- return;
- }
-
- if (document.activeElement === textarea) {
- return;
- }
-
- // Prevent iOS from scrolling the page to reveal the input.
- event.preventDefault();
- event.stopPropagation();
-
- const scroller = document.scrollingElement;
- if (scroller && scroller.scrollTop !== 0) {
- scroller.scrollTop = 0;
- }
- if (window.scrollY !== 0) {
- window.scrollTo(0, 0);
- }
-
- try {
- textarea.focus({ preventScroll: true });
- } catch {
- textarea.focus();
- }
-
- const len = textarea.value.length;
- try {
- textarea.setSelectionRange(len, len);
- } catch {
- // ignored
- }
- }, [isMobile]);
-
- const handleOpenMobileControls = React.useCallback(() => {
- if (!isMobile) {
- return;
- }
-
- if (mobileControlsOpen) {
- setMobileControlsOpen(false);
- return;
- }
-
- setMobileControlsPanel(null);
-
- if (isKeyboardOpen) {
- textareaRef.current?.blur();
- requestAnimationFrame(() => {
- setMobileControlsOpen(true);
- });
- return;
- }
-
- setMobileControlsOpen(true);
- }, [isMobile, isKeyboardOpen, mobileControlsOpen]);
-
- const handleCloseMobileControls = React.useCallback(() => {
- setMobileControlsOpen(false);
- }, []);
-
const handleOpenMobilePanel = React.useCallback((panel: MobileControlsPanel) => {
if (!isMobile) {
return;
}
- setMobileControlsOpen(false);
textareaRef.current?.blur();
requestAnimationFrame(() => {
setMobileControlsPanel(panel);
});
}, [isMobile]);
- const handleReturnToUnifiedControls = React.useCallback(() => {
- if (!isMobile) {
- return;
- }
- setMobileControlsPanel(null);
- requestAnimationFrame(() => {
- setMobileControlsOpen(true);
- });
- }, [isMobile]);
-
// Consume pending input text (e.g., from revert action)
React.useEffect(() => {
if (pendingInputText !== null) {
@@ -839,11 +1209,11 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}
}, [pendingInputText, consumePendingInputText]);
- const hasContent = message.trim() || sendableAttachedFiles.length > 0 || hasDrafts;
+ const hasContent = message.trim().length > 0 || sendableAttachedFiles.length > 0 || hasDrafts;
const hasQueuedMessages = queuedMessages.length > 0;
const canSend = hasContent || hasQueuedMessages;
- const canAbort = working.isWorking;
+ const canAbort = sessionPhase !== 'idle';
// Keep a ref to handleSubmit so callbacks don't depend on it.
type SubmitOptions = {
@@ -866,9 +1236,18 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
addToQueue(currentSessionId, {
content: messageToQueue,
attachments: attachmentsToQueue.length > 0 ? attachmentsToQueue : undefined,
+ sendConfig: currentProviderId && currentModelId ? {
+ providerID: currentProviderId,
+ modelID: currentModelId,
+ agent: currentAgentName ?? undefined,
+ variant: currentVariant ?? undefined,
+ } : undefined,
});
// Clear input and attachments
+ // Note: confirmedMentionsRef is NOT cleared here because queued messages
+ // are processed later in handleSubmit which reads the ref via extractInlineFileMentions.
+ // The ref is cleared in handleSubmit after all queued messages are sent.
setMessage('');
if (attachmentsToQueue.length > 0) {
clearAttachedFiles();
@@ -877,7 +1256,30 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
if (!isMobile) {
textareaRef.current?.focus();
}
- }, [hasContent, currentSessionId, message, sendableAttachedFiles, sanitizeAttachmentsForSend, addToQueue, clearAttachedFiles, isMobile, consumeDrafts]);
+ }, [hasContent, currentSessionId, message, sendableAttachedFiles, sanitizeAttachmentsForSend, addToQueue, clearAttachedFiles, isMobile, consumeDrafts, currentProviderId, currentModelId, currentAgentName, currentVariant]);
+
+ const handleQueuedMessageEdit = React.useCallback((content: string) => {
+ setMessage(content);
+ setTimeout(() => {
+ textareaRef.current?.focus();
+ }, 0);
+ }, []);
+
+ const handleOpenAgentPanel = React.useCallback(() => {
+ setMobileControlsPanel('agent');
+ }, []);
+
+ const handleToggleExpandedInput = React.useCallback(() => {
+ setExpandedInput(!isExpandedInput);
+ }, [isExpandedInput, setExpandedInput]);
+
+ const openIssuePicker = React.useCallback(() => {
+ setIssuePickerOpen(true);
+ }, []);
+
+ const openPrPicker = React.useCallback(() => {
+ setPrPickerOpen(true);
+ }, []);
const handleSubmit = async (options?: SubmitOptions) => {
const queuedOnly = options?.queuedOnly ?? false;
@@ -888,9 +1290,6 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
return;
}
- // Re-pin and scroll to bottom when sending
- scrollToBottom?.({ instant: true, force: true });
-
if (!currentProviderId || !currentModelId) {
console.warn('Cannot send message: provider or model not selected');
return;
@@ -1012,8 +1411,10 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}
if (!queuedOnly) {
setMessage('');
+ confirmedMentionsRef.current.clear();
// Clear per-session draft on submit
saveStoredDraft(currentSessionId, '');
+ saveConfirmedMentions(currentSessionId, confirmedMentionsRef.current);
// Reset message history navigation state
setHistoryIndex(-1);
setDraftMessage('');
@@ -1037,25 +1438,82 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
.split(/\s+/)[0]
?.toLowerCase();
- // NEW: /undo - revert to last message (populates input with reverted message text)
if (commandName === 'undo' && currentSessionId) {
- await useSessionStore.getState().handleSlashUndo(currentSessionId);
- // Don't clear message - pendingInputText will populate it with reverted message
+ await useSessionUIStore.getState().handleSlashUndo(currentSessionId);
scrollToBottom?.({ instant: true, force: true });
- return; // Don't send to assistant
+ return;
}
- // NEW: /redo - unrevert or partial redo (populates input with message text)
else if (commandName === 'redo' && currentSessionId) {
- await useSessionStore.getState().handleSlashRedo(currentSessionId);
- // Don't clear message - pendingInputText will populate it
+ await useSessionUIStore.getState().handleSlashRedo(currentSessionId);
scrollToBottom?.({ instant: true, force: true });
- return; // Don't send to assistant
+ return;
}
- // NEW: /timeline - open timeline dialog
- else if (commandName === 'timeline' && currentSessionId) {
- setTimelineDialogOpen(true);
- setMessage('');
- return; // Don't send to assistant
+ else if (commandName === 'compact' && currentSessionId) {
+ try {
+ await sessionActions.waitForConnectionOrThrow();
+ const { opencodeClient } = await import('@/lib/opencode/client');
+ const sdk = opencodeClient.getSdkClient();
+ const configState = useConfigStore.getState();
+ await sdk.session.summarize({
+ sessionID: currentSessionId,
+ modelID: configState.currentModelId || '',
+ providerID: configState.currentProviderId || '',
+ });
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : t('chat.chatInput.toast.compactFailed'));
+ }
+ return;
+ }
+ else if (commandName === 'summary' && currentSessionId) {
+ try {
+ await sessionActions.waitForConnectionOrThrow();
+ // Everything after `/summary ` is an optional topic hint
+ // the user wants the summary focused on.
+ const topic = normalizedCommand.replace(/^\/summary\b/i, '').trim();
+ const topicLine = topic ? ` focused on: ${topic}` : '';
+ const topicBlock = topic
+ ? `The user asked you to focus this summary on: ${topic}. Prioritize that topic; mention unrelated threads only in passing.`
+ : '';
+ const visibleText = await renderMagicPrompt('session.summary.visible', { topic_line: topicLine });
+ const instructionsText = await renderMagicPrompt('session.summary.instructions', { topic_block: topicBlock });
+ await sendMessage(
+ visibleText,
+ currentProviderId,
+ currentModelId,
+ currentAgentName,
+ [],
+ agentMentionName,
+ [{ text: instructionsText, synthetic: true }],
+ currentVariant,
+ inputMode,
+ );
+ scrollToBottom?.({ instant: true, force: true });
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : t('chat.chatInput.toast.summaryFailed'));
+ }
+ return;
+ }
+ else if (commandName === 'workspace-review' && (currentSessionId || newSessionDraftOpen)) {
+ try {
+ await sessionActions.waitForConnectionOrThrow();
+ const visibleText = await renderMagicPrompt('session.review.visible');
+ const instructionsText = await renderMagicPrompt('session.review.instructions');
+ await sendMessage(
+ visibleText,
+ currentProviderId,
+ currentModelId,
+ currentAgentName,
+ [],
+ agentMentionName,
+ [{ text: instructionsText, synthetic: true }],
+ currentVariant,
+ inputMode,
+ );
+ scrollToBottom?.({ instant: true, force: true });
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : t('chat.chatInput.toast.reviewFailed'));
+ }
+ return;
}
}
@@ -1065,7 +1523,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
...additionalParts.flatMap(p => p.attachments ?? []),
];
- void sendMessage(
+ const sendPromise = sendMessage(
primaryText,
currentProviderId,
currentModelId,
@@ -1075,7 +1533,17 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
additionalParts.length > 0 ? additionalParts : undefined,
currentVariant,
inputMode
- ).then(() => {
+ );
+
+ if (typeof window === 'undefined') {
+ scrollToBottom?.({ instant: true, force: true });
+ } else {
+ window.requestAnimationFrame(() => {
+ scrollToBottom?.({ instant: true, force: true });
+ });
+ }
+
+ void sendPromise.then(() => {
// Clear linked issue after successful message send
if (linkedIssue) {
setLinkedIssue(null);
@@ -1106,25 +1574,25 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
normalized === 'failed to send message';
if (normalized.includes('payload too large') || normalized.includes('413') || normalized.includes('entity too large')) {
- toast.error('Attachments are too large to send. Please try reducing the number or size of images.');
+ toast.error(t('chat.chatInput.toast.attachmentsTooLarge'));
if (allAttachments.length > 0) {
- useFileStore.setState({ attachedFiles: allAttachments });
+ useInputStore.setState({ attachedFiles: allAttachments });
}
return;
}
if (isSoftNetworkError) {
if (allAttachments.length > 0) {
- useFileStore.setState({ attachedFiles: allAttachments });
- toast.error('Failed to send attachments. Try fewer files or smaller images.');
+ useInputStore.setState({ attachedFiles: allAttachments });
+ toast.error(t('chat.chatInput.toast.sendAttachmentsFailed'));
}
return;
}
if (allAttachments.length > 0) {
- useFileStore.setState({ attachedFiles: allAttachments });
+ useInputStore.setState({ attachedFiles: allAttachments });
}
- toast.error(rawMessage || 'Message failed to send. Attachments restored.');
+ toast.error(rawMessage || t('chat.chatInput.toast.messageSendFailed'));
});
if (!isMobile) {
@@ -1182,10 +1650,13 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}
const token = message.slice(tokenStart, tokenEnd);
+ const mentionContent = token.slice(1);
const looksLikeFileMention = FILE_MENTION_TOKEN.test(token)
- && (token.includes('/') || token.includes('\\') || token.includes('.'));
+ && !knownAgentNamesRef.current.has(mentionContent.toLowerCase())
+ && isConfirmedFilePath(mentionContent);
if (looksLikeFileMention) {
+ confirmedMentionsRef.current.delete(mentionContent);
const removeUntil = message[tokenEnd] === ' ' ? tokenEnd + 1 : tokenEnd;
const nextMessage = `${message.slice(0, tokenStart)}${message.slice(removeUntil)}`;
e.preventDefault();
@@ -1461,33 +1932,37 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}, [abortCurrentOperation, clearAbortPrompt, currentSessionId, startAbortIndicator]);
const handleCycleAgent = React.useCallback(() => {
- if (primaryAgents.length <= 1) return;
+ const nextAgentName = getCycledPrimaryAgentName(agents, currentAgentName);
+ if (!nextAgentName) return;
- const currentIndex = primaryAgents.findIndex(agent => agent.name === currentAgentName);
- const nextIndex = (currentIndex + 1) % primaryAgents.length;
- const nextAgent = primaryAgents[nextIndex];
-
- setAgent(nextAgent.name);
+ setAgent(nextAgentName);
if (currentSessionId) {
- saveSessionAgentSelection(currentSessionId, nextAgent.name);
+ saveSessionAgentSelection(currentSessionId, nextAgentName);
}
- }, [primaryAgents, currentAgentName, currentSessionId, setAgent, saveSessionAgentSelection]);
+ }, [agents, currentAgentName, currentSessionId, setAgent, saveSessionAgentSelection]);
- const adjustTextareaHeight = React.useCallback(() => {
+ const adjustTextareaHeight = React.useCallback((options?: { allowShrink?: boolean }) => {
const textarea = textareaRef.current;
if (!textarea) {
return;
}
+ const previousScrollTop = textarea.scrollTop;
+
if (isDesktopExpanded) {
textarea.style.height = '100%';
textarea.style.maxHeight = 'none';
setTextareaSize(null);
+ if (textarea.scrollTop !== previousScrollTop) {
+ textarea.scrollTop = previousScrollTop;
+ }
return;
}
- textarea.style.height = 'auto';
+ if (options?.allowShrink ?? true) {
+ textarea.style.height = 'auto';
+ }
const view = textarea.ownerDocument?.defaultView;
const computedStyle = view ? view.getComputedStyle(textarea) : null;
@@ -1506,6 +1981,9 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
textarea.style.height = `${nextHeight}px`;
textarea.style.maxHeight = `${maxHeight}px`;
+ if (textarea.scrollTop !== previousScrollTop) {
+ textarea.scrollTop = previousScrollTop;
+ }
setTextareaSize((prev) => {
if (prev && prev.height === nextHeight && prev.maxHeight === maxHeight) {
@@ -1516,7 +1994,9 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}, [isDesktopExpanded]);
React.useLayoutEffect(() => {
- adjustTextareaHeight();
+ const allowShrink = message.length < previousMessageLengthRef.current;
+ previousMessageLengthRef.current = message.length;
+ adjustTextareaHeight({ allowShrink });
}, [adjustTextareaHeight, message, isMobile]);
const updateAutocompleteState = React.useCallback((value: string, cursorPosition: number) => {
@@ -1575,7 +2055,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
const isWordBoundary = !charBefore || /\s/.test(charBefore);
if (isWordBoundary && !textAfterAt.includes(' ') && !textAfterAt.includes('\n')) {
setMentionQuery(textAfterAt);
- setAutocompleteTab('agents');
+ setAutocompleteTab((current) => current === 'files' ? 'files' : 'agents');
setShowFileMention(true);
} else {
setShowFileMention(false);
@@ -1618,22 +2098,31 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
// ignored
}
}
+ const cursorPosition = textarea?.selectionStart ?? message.length;
+ const textBeforeCursor = message.substring(0, cursorPosition);
+ const lastAtSymbol = textBeforeCursor.lastIndexOf('@');
+ const nextMentionQuery = lastAtSymbol !== -1
+ ? textBeforeCursor.substring(lastAtSymbol + 1).replace(/[\s\n].*$/, '')
+ : '';
+
setAutocompleteTab(tab);
setCommandQuery('');
- setMentionQuery('');
if (tab === 'commands') {
+ setMentionQuery('');
applyAutocompletePrefix('/');
}
if (tab === 'agents') {
+ setMentionQuery(nextMentionQuery);
applyAutocompletePrefix('@');
}
if (tab === 'files') {
+ setMentionQuery(nextMentionQuery);
applyAutocompletePrefix('@');
}
setShowSkillAutocomplete(false);
setShowCommandAutocomplete(tab === 'commands');
setShowFileMention(tab === 'agents' || tab === 'files');
- }, [applyAutocompletePrefix, isMobile, setAutocompleteTab, setCommandQuery, setMentionQuery, setShowCommandAutocomplete, setShowFileMention, setShowSkillAutocomplete]);
+ }, [applyAutocompletePrefix, isMobile, message, setAutocompleteTab, setCommandQuery, setMentionQuery, setShowCommandAutocomplete, setShowFileMention, setShowSkillAutocomplete]);
const handleOpenCommandMenu = React.useCallback(() => {
if (!isMobile) {
@@ -1807,10 +2296,10 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
await addAttachedFile(file);
} catch (error) {
console.error('Clipboard image attach failed', error);
- toast.error(error instanceof Error ? error.message : 'Failed to attach image from clipboard');
+ toast.error(error instanceof Error ? error.message : t('chat.chatInput.toast.clipboardAttachFailed'));
}
}
- }, [addAttachedFile, currentSessionId, newSessionDraftOpen, insertTextAtSelection]);
+ }, [addAttachedFile, currentSessionId, newSessionDraftOpen, insertTextAtSelection, t]);
const handleFileSelect = (file: { name: string; path: string; relativePath?: string }) => {
@@ -1822,6 +2311,8 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
? file.relativePath.trim()
: (toProjectRelativeMentionPath(file.path) || file.name);
+ confirmedMentionsRef.current.add(mentionPath);
+
if (lastAtSymbol !== -1) {
const newMessage =
message.substring(0, lastAtSymbol) +
@@ -1936,7 +2427,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
textareaRef.current?.focus();
};
- const handleCommandSelect = (command: { name: string; description?: string; agent?: string; model?: string }) => {
+ const handleCommandSelect = (command: CommandInfo) => {
setMessage(`/${command.name} `);
@@ -1975,7 +2466,6 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
React.useEffect(() => {
if (!isMobile) {
- setMobileControlsOpen(false);
setMobileControlsPanel(null);
}
}, [isMobile]);
@@ -1999,6 +2489,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
if (lowerTypes.includes('files')) return true;
if (lowerTypes.includes('text/uri-list')) return true;
if (lowerTypes.includes('codefiles')) return true;
+ if (lowerTypes.includes('application/x-openchamber-file-path')) return true;
if (lowerTypes.some((type) => type.includes('vnd.code.tree'))) return true;
}
@@ -2098,20 +2589,25 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
const addVSCodeDroppedUrisAsMentions = React.useCallback((uris: string[]) => {
if (uris.length === 0) return;
- const mentions = Array.from(new Set(uris
+ const paths = uris
.map((entry) => normalizeDroppedPath(entry))
.map((entry) => toProjectRelativeMentionPath(entry))
.map((entry) => entry.trim().replace(/^\.\//, ''))
- .filter((entry) => entry.length > 0)
- .map((entry) => `@${entry}`)));
+ .filter((entry) => entry.length > 0);
+
+ for (const p of paths) {
+ confirmedMentionsRef.current.add(p);
+ }
+
+ const mentions = Array.from(new Set(paths.map((entry) => `@${entry}`)));
if (mentions.length === 0) {
return;
}
setPendingInputText(mentions.join(' '), 'append-inline');
- toast.success(`Added ${mentions.length} file mention${mentions.length > 1 ? 's' : ''}`);
- }, [normalizeDroppedPath, setPendingInputText, toProjectRelativeMentionPath]);
+ toast.success(t('chat.chatInput.toast.addedFileMentions', { count: mentions.length }));
+ }, [normalizeDroppedPath, setPendingInputText, t, toProjectRelativeMentionPath]);
const handleDragEnter = (e: React.DragEvent) => {
if (!hasDraggedFiles(e.dataTransfer)) {
@@ -2119,6 +2615,11 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}
e.preventDefault();
e.stopPropagation();
+ dragEnterCountRef.current++;
+ const isInternal = e.dataTransfer.types?.includes('application/x-openchamber-file-path') ?? false;
+ if (isInternal !== isInternalDrag) {
+ setIsInternalDrag(isInternal);
+ }
if ((currentSessionId || newSessionDraftOpen) && !isDragging) {
setIsDragging(true);
}
@@ -2139,13 +2640,24 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
const handleDragLeave = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
- if (e.currentTarget === e.target) {
+ dragEnterCountRef.current--;
+ if (dragEnterCountRef.current <= 0) {
+ dragEnterCountRef.current = 0;
setIsDragging(false);
+ setIsInternalDrag(false);
clearDropTextSuppression();
}
};
+ const handleDragEnd = () => {
+ dragEnterCountRef.current = 0;
+ setIsDragging(false);
+ setIsInternalDrag(false);
+ clearDropTextSuppression();
+ };
+
const handleDrop = async (e: React.DragEvent) => {
+ dragEnterCountRef.current = 0;
const draggedFiles = hasDraggedFiles(e.dataTransfer);
if (!draggedFiles) {
clearDropTextSuppression();
@@ -2157,6 +2669,37 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
if (!currentSessionId && !newSessionDraftOpen) return;
+ // Internal drag: file tree → chat input (relative path as @mention)
+ const internalPath = e.dataTransfer.getData('application/x-openchamber-file-path');
+ if (internalPath && internalPath !== '.') {
+ confirmedMentionsRef.current.add(internalPath);
+ const mention = `@${internalPath}`;
+ const textarea = textareaRef.current;
+ const currentMessage = messageRef.current;
+ if (textarea) {
+ const pos = textarea.selectionStart ?? cursorPosRef.current;
+ const end = textarea.selectionEnd ?? pos;
+ const before = currentMessage.slice(0, pos);
+ const after = currentMessage.slice(end);
+ const needSpaceBefore = before.length > 0 && !/\s$/.test(before);
+ const needSpaceAfter = after.length > 0 && !/^\s/.test(after);
+ const insert = `${needSpaceBefore ? ' ' : ''}${mention}${needSpaceAfter ? ' ' : ''}`;
+ const nextMessage = `${before}${insert}${after}`;
+ setMessage(nextMessage);
+ requestAnimationFrame(() => {
+ const cursorPos = pos + insert.length;
+ textarea.selectionStart = cursorPos;
+ textarea.selectionEnd = cursorPos;
+ cursorPosRef.current = cursorPos;
+ textarea.focus();
+ });
+ } else {
+ setMessage((prev) => appendInlineText(prev, mention));
+ }
+ clearDropTextSuppression();
+ return;
+ }
+
const files = collectDroppedFiles(e.dataTransfer);
if (files.length === 0 && isVSCodeRuntime()) {
@@ -2179,7 +2722,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
await addAttachedFile(file);
} catch (error) {
console.error('File attach failed', error);
- toast.error(error instanceof Error ? error.message : 'Failed to attach file');
+ toast.error(error instanceof Error ? error.message : t('chat.chatInput.toast.attachFileFailed'));
}
}
}
@@ -2187,15 +2730,15 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
};
const handleDropCapture = (e: React.DragEvent) => {
- if (!isVSCodeRuntime()) {
- return;
- }
if (!hasDraggedFiles(e.dataTransfer)) {
return;
}
- suppressNextFileDropTextInsertRef.current = true;
- scheduleDropTextSuppressionExpiry();
+ // Prevent native textarea drop text insertion for all runtimes
e.preventDefault();
+ if (isVSCodeRuntime()) {
+ suppressNextFileDropTextInsertRef.current = true;
+ scheduleDropTextSuppressionExpiry();
+ }
};
// Tauri desktop: handle native file drops via onDragDropEvent
@@ -2287,7 +2830,9 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
await addAttachedFile(file);
} catch (error) {
console.error('Failed to attach dropped file:', path, error);
- toast.error(`Failed to attach ${path.split(/[\\/]/).pop() || 'file'}`);
+ toast.error(t('chat.chatInput.toast.attachNamedFailed', {
+ name: path.split(/[\\/]/).pop() || t('chat.chatInput.fileFallback'),
+ }));
}
}
}
@@ -2309,7 +2854,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
cancelled = true;
if (unlisten) unlisten();
};
- }, [addAttachedFile, normalizeDroppedPath]);
+ }, [addAttachedFile, normalizeDroppedPath, t]);
const fileInputRef = React.useRef(null);
@@ -2321,10 +2866,10 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
await addAttachedFile(file);
} catch (error) {
console.error('File attach failed', error);
- toast.error(error instanceof Error ? error.message : 'Failed to attach file');
+ toast.error(error instanceof Error ? error.message : t('chat.chatInput.toast.attachFileFailed'));
}
}
- }, [addAttachedFile]);
+ }, [addAttachedFile, t]);
const handleVSCodePickFiles = React.useCallback(async () => {
try {
@@ -2337,7 +2882,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
const summary = skipped
.map((s: { name?: string; reason?: string }) => `${s?.name || 'file'}: ${s?.reason || 'skipped'}`)
.join('\n');
- toast.error(`Some files were skipped:\n${summary}`);
+ toast.error(t('chat.chatInput.toast.someFilesSkipped', { summary }));
}
const asFiles = picked
@@ -2366,9 +2911,9 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}
} catch (error) {
console.error('VS Code file pick failed', error);
- toast.error(error instanceof Error ? error.message : 'Failed to pick files in VS Code');
+ toast.error(error instanceof Error ? error.message : t('chat.chatInput.toast.vscodePickFailed'));
}
- }, [attachFiles]);
+ }, [attachFiles, t]);
const handlePickLocalFiles = React.useCallback(() => {
if (isVSCodeRuntime()) {
@@ -2442,6 +2987,8 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
};
}, [fetchBranches, runtimeGit, selectedDraftProject, selectedDraftProjectBranches?.all, selectedDraftProjectPath, showDraftTargetSelectors]);
+ const selectedDraftProjectCurrentBranch = selectedDraftProjectBranches?.current?.trim() ?? '';
+
const projectRootBranchOption = React.useMemo(() => {
if (!selectedDraftProject) {
return null;
@@ -2450,25 +2997,20 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
if (!value) {
return null;
}
- const projectRootBranch = selectedDraftProjectBranches?.current?.trim() ?? '';
- if (!projectRootBranch) {
+ if (!selectedDraftProjectCurrentBranch) {
return null;
}
return {
value,
- label: projectRootBranch,
+ label: selectedDraftProjectCurrentBranch,
};
- }, [selectedDraftProject, selectedDraftProjectBranches]);
+ }, [selectedDraftProject, selectedDraftProjectCurrentBranch]);
const worktreeBranchOptions = React.useMemo(() => {
if (!selectedDraftProject) {
- return [] as Array<{ value: string; label: string }>;
+ return [];
}
- const seen = new Set();
- const options: Array<{ value: string; label: string }> = [];
- const rootValue = projectRootBranchOption?.value ?? null;
-
const worktrees = (() => {
if (!selectedDraftProjectPath) {
return [];
@@ -2478,23 +3020,13 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
?? [];
})();
- worktrees
- .slice()
- .sort((a, b) => a.branch.localeCompare(b.branch))
- .forEach((worktree) => {
- const normalizedValue = normalizePath(worktree.path);
- if (!normalizedValue || normalizedValue === rootValue || seen.has(normalizedValue)) {
- return;
- }
- seen.add(normalizedValue);
- options.push({
- value: normalizedValue,
- label: worktree.branch?.trim() || formatDirectoryName(worktree.path),
- });
- });
-
- return options;
- }, [availableWorktreesByProject, projectRootBranchOption?.value, selectedDraftProject, selectedDraftProjectPath]);
+ return buildSessionTargetOptions({
+ projectRoot: normalizePath(selectedDraftProject.path) ?? '',
+ rootBranch: selectedDraftProjectCurrentBranch,
+ worktrees,
+ pendingBootstrapDirectory: newSessionDraft?.bootstrapPendingDirectory ?? null,
+ });
+ }, [availableWorktreesByProject, newSessionDraft?.bootstrapPendingDirectory, selectedDraftProject, selectedDraftProjectCurrentBranch, selectedDraftProjectPath]);
const selectedDraftDirectory = React.useMemo(
() => normalizePath(newSessionDraft?.bootstrapPendingDirectory ?? null)
@@ -2543,6 +3075,13 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
return draftBranchItems.find((item) => item.value === selectedValue)?.label ?? formatDirectoryName(selectedValue);
}, [draftBranchItems, selectedDraftDirectory]);
+ const hasPendingChanges = React.useMemo(() => {
+ if (isGitRepo !== true || !currentGitStatus || currentGitStatus.isClean) {
+ return false;
+ }
+ return extractGitChangedFiles(currentGitStatus.files, currentGitStatus.diffStats, currentDirectory).length > 0;
+ }, [currentDirectory, currentGitStatus, isGitRepo]);
+
const selectedDraftBranchIsKnown = React.useMemo(() => {
if (!selectedDraftDirectory) {
return true;
@@ -2560,7 +3099,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
if (!selectedDraftDirectory || !selectedDraftBranchIsKnown) {
return;
}
- useSessionStore.getState().setDraftPreserveDirectoryOverride(false);
+ useSessionUIStore.getState().setDraftPreserveDirectoryOverride(false);
}, [newSessionDraft?.open, newSessionDraft?.preserveDirectoryOverride, selectedDraftBranchIsKnown, selectedDraftDirectory]);
const shouldShowDraftBranchSelector = React.useMemo(() => {
@@ -2574,7 +3113,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}, [isDiscoveringDraftBranches, projectRootBranchOption, worktreeBranchOptions.length]);
const handleDraftProjectChange = React.useCallback((projectId: string) => {
- const draft = useSessionStore.getState().newSessionDraft;
+ const draft = useSessionUIStore.getState().newSessionDraft;
if (draft?.pendingWorktreeRequestId || draft?.bootstrapPendingDirectory || draft?.preserveDirectoryOverride) {
return;
}
@@ -2592,7 +3131,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}, [activeProjectId, projects, setActiveProjectIdOnly, setNewSessionDraftTarget]);
const handleDraftDirectoryChange = React.useCallback((directory: string) => {
- const draft = useSessionStore.getState().newSessionDraft;
+ const draft = useSessionUIStore.getState().newSessionDraft;
if (draft?.pendingWorktreeRequestId || draft?.bootstrapPendingDirectory || draft?.preserveDirectoryOverride) {
return;
}
@@ -2678,252 +3217,18 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
const handlePermissionAutoAcceptToggle = React.useCallback(() => {
if (!permissionScopeSessionId) {
- toast.error('Open a session first');
+ toast.error(t('chat.chatInput.toast.openSessionFirst'));
return;
}
const nextEnabled = !permissionAutoAcceptEnabled;
setSessionAutoAccept(permissionScopeSessionId, nextEnabled).catch(() => {
- toast.error('Failed to toggle permission auto-accept');
+ toast.error(t('chat.chatInput.toast.togglePermissionAutoAcceptFailed'));
});
- }, [permissionAutoAcceptEnabled, permissionScopeSessionId, setSessionAutoAccept]);
-
- const permissionAutoAcceptAriaLabel = permissionAutoAcceptEnabled
- ? 'Disable permission auto-accept'
- : 'Enable permission auto-accept';
- const permissionAutoAcceptTooltipLabel = permissionAutoAcceptEnabled
- ? 'Permission auto-accept: on'
- : 'Permission auto-accept: off';
-
- const permissionAutoAcceptButton = (
- {
- event.preventDefault();
- }}
- onPointerDownCapture={(event) => {
- if (event.pointerType === 'touch') {
- event.preventDefault();
- event.stopPropagation();
- }
- }}
- aria-pressed={permissionAutoAcceptEnabled}
- aria-label={permissionAutoAcceptAriaLabel}
- title={permissionAutoAcceptAriaLabel}
- >
- {permissionAutoAcceptEnabled ? (
-
- );
-
- const permissionAutoAcceptButtonWithTooltip = (
-
-
- {permissionAutoAcceptButton}
-
-
- {permissionAutoAcceptTooltipLabel}
-
-
- );
-
- // Send button - respects queue mode setting
- const sendButton = (
- {
- if (!isMobile) {
- return;
- }
-
- event.preventDefault();
- handlePrimaryAction();
- }}
- className={cn(
- footerIconButtonClass,
- canSend && (currentSessionId || newSessionDraftOpen)
- ? 'text-primary hover:text-primary'
- : 'opacity-30'
- )}
- aria-label="Send message"
- >
-
- );
-
- // Queue button for adding message to queue while working
- const queueButton = (
- {
- if (isMobile) {
- event.preventDefault();
- }
- handleQueueMessage();
- }}
- className={cn(
- footerIconButtonClass,
- 'absolute z-20 bottom-full left-1/2 -translate-x-1/2 mb-1',
- hasContent && currentSessionId
- ? 'text-primary hover:text-primary'
- : 'opacity-30'
- )}
- aria-label="Queue message"
- >
-
- );
-
- // Stop button replaces send button when working
- const stopButton = (
-
-
- );
-
- // Action buttons area: either send button, or stop (+ optional queue button floating above)
- const actionButtons = canAbort ? (
-
- {hasContent && queueButton}
- {stopButton}
-
- ) : (
- sendButton
- );
-
- const attachmentMenu = (
- <>
-
- {isVSCode ? (
- handlePickLocalFiles()}
- title="Attach files"
- aria-label="Attach files"
- >
-
- ) : (
-
-
-
-
-
-
- {
- requestAnimationFrame(() => handlePickLocalFiles());
- }}
- >
-
- {
- requestAnimationFrame(() => {
- setIssuePickerOpen(true);
- });
- }}
- >
-
- {
- requestAnimationFrame(() => {
- setPrPickerOpen(true);
- });
- }}
- >
-
-
-
- )}
-
-
- );
-
- const settingsButton = onOpenSettings ? (
-
-
- ) : null;
-
- const attachmentsControls = (
-
- {isMobile ? (
- {
- if (event.pointerType === 'touch') {
- event.preventDefault();
- event.stopPropagation();
- }
- }}
- onClick={handleOpenCommandMenu}
- title="Commands"
- aria-label="Commands"
- >
-
- ) : null}
- {attachmentMenu}
- {settingsButton}
-
- );
-
- const workingStatusText = working.statusText;
+ }, [permissionAutoAcceptEnabled, permissionScopeSessionId, setSessionAutoAccept, t]);
React.useEffect(() => {
- const pendingAbortBanner = Boolean(working.wasAborted);
+ const pendingAbortBanner = Boolean(abortPromptSessionId) && abortPromptSessionId === currentSessionId;
if (!prevWasAbortedRef.current && pendingAbortBanner && !showAbortStatus) {
startAbortIndicator();
if (currentSessionId) {
@@ -2932,11 +3237,11 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
}
prevWasAbortedRef.current = pendingAbortBanner;
}, [
+ abortPromptSessionId,
acknowledgeSessionAbort,
currentSessionId,
showAbortStatus,
startAbortIndicator,
- working.wasAborted,
]);
React.useEffect(() => {
@@ -2955,20 +3260,14 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
className={cn(
"relative pt-0 pb-4",
isDesktopExpanded && 'flex h-full min-h-0 flex-col pt-4',
- isMobile && isKeyboardOpen ? "ios-keyboard-safe-area" : "bottom-safe-area"
+ isMobile && 'bottom-safe-area'
)}
- data-keyboard-avoid="true"
- style={isMobile && inputBarOffset > 0 && !isKeyboardOpen ? { marginBottom: `${inputBarOffset}px` } : undefined}
+ style={isMobile && inputBarOffset > 0 ? { marginBottom: `${inputBarOffset}px` } : undefined}
>
-
+
{
- setMessage(content);
- setTimeout(() => {
- textareaRef.current?.focus();
- }, 0);
- }}
+ onEditMessage={handleQueuedMessageEdit}
/>
{hasDrafts && (
@@ -2979,7 +3278,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
borderColor: currentTheme?.colors?.interactive?.border,
}}
>
- Review comments:
+ {t('chat.chatInput.reviewComments')}
{draftCount}
@@ -3005,7 +3304,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
#{linkedIssue.number}
{linkedIssue.author && (
- by {linkedIssue.author.login}
+ {t('chat.chatInput.linked.byAuthor', { author: linkedIssue.author.login })}
)}
@@ -3018,7 +3317,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
className="flex items-center justify-center h-6 w-6 hover:bg-[var(--interactive-hover)] rounded-full transition-colors"
- aria-label="Open issue in browser"
+ aria-label={t('chat.chatInput.linked.issue.openInBrowserAria')}
>
= ({ onOpenSettings, scrollToBo
setLinkedIssue(null);
}}
className="flex items-center justify-center h-6 w-6 hover:bg-[var(--interactive-hover)] rounded-full transition-colors cursor-pointer"
- aria-label="Remove linked issue"
+ aria-label={t('chat.chatInput.linked.issue.removeAria')}
>
@@ -3051,9 +3350,9 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
/>
)}
- PR #{linkedPr.number}
+ {t('chat.chatInput.linked.pr.number', { number: linkedPr.number })}
{linkedPr.author && (
- by {linkedPr.author.login}
+ {t('chat.chatInput.linked.byAuthor', { author: linkedPr.author.login })}
)}
@@ -3069,7 +3368,7 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
className="flex items-center justify-center h-6 w-6 hover:bg-[var(--interactive-hover)] rounded-full transition-colors"
- aria-label="Open pull request in browser"
+ aria-label={t('chat.chatInput.linked.pr.openInBrowserAria')}
>
= ({ onOpenSettings, scrollToBo
setLinkedPr(null);
}}
className="flex items-center justify-center h-6 w-6 hover:bg-[var(--interactive-hover)] rounded-full transition-colors cursor-pointer"
- aria-label="Remove linked pull request"
+ aria-label={t('chat.chatInput.linked.pr.removeAria')}
>
@@ -3087,17 +3386,11 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
)}
-
@@ -3107,7 +3400,7 @@ export const ChatInput: React.FC
= ({ onOpenSettings, scrollToBo
>
{renderProjectLabelWithIcon(selectedDraftProject)}
@@ -3129,16 +3422,16 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
>
- {selectedDraftBranchLabel ?? 'Branch'}
+ {selectedDraftBranchLabel ?? t('chat.chatInput.branch')}
{projectRootBranchOption ? (
- Project root
+ {t('chat.chatInput.projectRoot')}
{projectRootBranchOption.label}
@@ -3147,19 +3440,19 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
{projectRootBranchOption ?
- Worktrees
+ {t('chat.chatInput.worktrees')}
{ e.stopPropagation(); }}
onClick={(e) => { e.preventDefault(); e.stopPropagation(); void createWorktreeDraft(); }}
>
- + New
+ {t('chat.chatInput.worktreeNew')}
{worktreeBranchOptions.map((option) => (
- {option.label}
+ {option.pending ? '⏳ ' : ''}{option.label}
))}
@@ -3194,22 +3487,25 @@ export const ChatInput: React.FC = ({ onOpenSettings, scrollToBo
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
+ onDragEnd={handleDragEnd}
>
{isDragging && (
-
+
handlePickLocalFiles()}
- title="Attach files"
- aria-label="Attach files"
+ title={t('chat.chatInput.actions.attachFiles')}
+ aria-label={t('chat.chatInput.actions.attachFiles')}
>
-
Drop files here to attach
+
+ {isInternalDrag ? t('chat.chatInput.drop.insertMention') : t('chat.chatInput.drop.attachFiles')}
+
)}
@@ -3291,7 +3587,7 @@ export const ChatInput: React.FC
= ({ onOpenSettings, scrollToBo
: 'pt-4 pb-2',
inputMode === 'shell' ? 'font-mono' : 'typography-markdown md:typography-ui-label',
)}
- style={{ transform: `translateY(-${textareaScrollTop}px)` }}
+ ref={composerHighlightRef}
>
{highlightedComposerContent.map((part, index) => (
= ({ onOpenSettings, scrollToBo