feat: improve VS Code dev flow and stabilize sidebar/chat behavior (#754)
* fix: improve session sidebar tooltip and truncation behavior - Keep new-draft tooltip anchored to its trigger button - Fix minimal-mode worktree/group header text truncation - Tune minimal-mode right padding to reduce early label clipping * fix: render reasoning through markdown pipeline - Use Streamdown rendering for reasoning in live chat mode - Remove italic styling from reasoning text - Render expanded reasoning content with MarkdownRenderer * chore: remove legacy electron dependencies - Removed unused Electron packages from root and UI manifests - Deleted obsolete Electron context menu type declaration - Regenerated lockfile after dependency cleanup * fix: handle non-repository folders in git status API - Prevent 500 errors when status is requested outside a valid Git repo - Improve repository detection using `git rev-parse --git-dir` - Reduce noisy server logs for expected non-repo status checks * fix unloaded session chat layout flicker * fix: reduce noisy TTS status polling Cache and dedupe TTS status requests, and only check provider availability when the related voice features are enabled so disabled voice setups stay quiet. * perf: throttle background PR git status refreshes * fix: improve VS Code Explorer file drop mentions in chat - Add Explorer context action to insert selected files as @mentions. - Handle Explorer drag-and-drop to prefill @file mentions instead of attachments. - Prevent duplicate plain-path text when dropping multiple files. * fix: deduplicate recent sessions in VS Code sidebar - Hide sessions from main list when already shown in recent - Apply dedup only in VS Code runtime - Keep session search behavior unchanged * feat: add true HMR dev flow for VS Code extension - Load VS Code webview from Vite dev server with React refresh preamble - Add `vscode:dev` runner that starts watchers and opens Extension Development Host - Update VS Code dev docs and scripts to use the new HMR startup flow * feat: polish VS Code session sidebar and attachment UX - Add resizable sessions sidebar in VS Code layout - Tighten session list spacing and hover behavior in VS Code - Remove bulk file/image attach success toasts while keeping error toasts
This commit is contained in:
Bohdan Triapitsyn
committed by
GitHub
GitHub
parent
ea6d4c4d43
commit
1231fd773e
@@ -412,39 +412,58 @@ export const ChatContainer: React.FC = () => {
|
||||
if (isSessionHydrating && sessionMessages.length === 0 && !streamingMessageId) {
|
||||
return (
|
||||
<div
|
||||
className="relative flex flex-col h-full bg-background gap-0"
|
||||
className="relative flex flex-col h-full bg-background"
|
||||
style={isMobile ? { paddingBottom: 'var(--oc-keyboard-inset, 0px)' } : undefined}
|
||||
>
|
||||
{returnToParentButton}
|
||||
<div className="flex-1 overflow-y-auto bg-background pt-6">
|
||||
<div className="space-y-4">
|
||||
{HYDRATING_SKELETON_ITEMS.map((item) => (
|
||||
<div key={item.id} className="group w-full">
|
||||
<div className="chat-message-column">
|
||||
<div className="space-y-2.5 px-4 py-3">
|
||||
<div className="space-y-1.5">
|
||||
{item.toolRows.map((row) => {
|
||||
return (
|
||||
<div key={`${item.id}-${row.id}`} className="flex items-center gap-2">
|
||||
<Skeleton className="h-3.5 w-3.5 rounded-full flex-shrink-0" />
|
||||
<Skeleton className={cn('h-4 rounded-md', row.titleWidth)} />
|
||||
<Skeleton className={cn('h-4 rounded-md', row.detailWidth)} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="space-y-1.5 pt-1">
|
||||
<Skeleton className={cn('h-4 rounded-md', item.textWidths[0])} />
|
||||
<Skeleton className={cn('h-4 rounded-md', item.textWidths[1])} />
|
||||
<Skeleton className={cn('h-4 rounded-md', item.textWidths[2])} />
|
||||
<div
|
||||
className={cn(
|
||||
'relative min-h-0',
|
||||
isDesktopExpandedInput
|
||||
? 'absolute inset-0 opacity-0 pointer-events-none'
|
||||
: 'flex-1'
|
||||
)}
|
||||
aria-hidden={isDesktopExpandedInput}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-y-auto overflow-x-hidden bg-background pt-6">
|
||||
<div className="space-y-4">
|
||||
{HYDRATING_SKELETON_ITEMS.map((item) => (
|
||||
<div key={item.id} className="group w-full">
|
||||
<div className="chat-message-column">
|
||||
<div className="space-y-2.5 px-4 py-3">
|
||||
<div className="space-y-1.5">
|
||||
{item.toolRows.map((row) => {
|
||||
return (
|
||||
<div key={`${item.id}-${row.id}`} className="flex items-center gap-2">
|
||||
<Skeleton className="h-3.5 w-3.5 rounded-full flex-shrink-0" />
|
||||
<Skeleton className={cn('h-4 rounded-md', row.titleWidth)} />
|
||||
<Skeleton className={cn('h-4 rounded-md', row.detailWidth)} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="space-y-1.5 pt-1">
|
||||
<Skeleton className={cn('h-4 rounded-md', item.textWidths[0])} />
|
||||
<Skeleton className={cn('h-4 rounded-md', item.textWidths[1])} />
|
||||
<Skeleton className={cn('h-4 rounded-md', item.textWidths[2])} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChatInput scrollToBottom={scrollToBottom} />
|
||||
<div
|
||||
className={cn(
|
||||
'relative z-10',
|
||||
isDesktopExpandedInput
|
||||
? 'flex-1 min-h-0 bg-background'
|
||||
: 'bg-background/95 supports-[backdrop-filter]:bg-background/80'
|
||||
)}
|
||||
>
|
||||
<ChatInput scrollToBottom={scrollToBottom} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -456,11 +475,21 @@ export const ChatContainer: React.FC = () => {
|
||||
style={isMobile ? { paddingBottom: 'var(--oc-keyboard-inset, 0px)' } : undefined}
|
||||
>
|
||||
{returnToParentButton}
|
||||
{!isDesktopExpandedInput ? (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<ChatEmptyState />
|
||||
<div
|
||||
className={cn(
|
||||
'relative min-h-0',
|
||||
isDesktopExpandedInput
|
||||
? 'absolute inset-0 opacity-0 pointer-events-none'
|
||||
: 'flex-1'
|
||||
)}
|
||||
aria-hidden={isDesktopExpandedInput}
|
||||
>
|
||||
{!isDesktopExpandedInput ? (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<ChatEmptyState />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<div
|
||||
className={cn(
|
||||
'relative z-10',
|
||||
|
||||
@@ -70,6 +70,103 @@ const MAX_VISIBLE_TEXTAREA_LINES = 8;
|
||||
const EMPTY_QUEUE: QueuedMessage[] = [];
|
||||
const FILE_MENTION_TOKEN = /^@[^\s]+$/;
|
||||
const CHAT_DRAFT_PERSIST_DEBOUNCE_MS = 500;
|
||||
const VS_CODE_DROP_DATA_TYPES = [
|
||||
'CodeFiles',
|
||||
'codefiles',
|
||||
'application/vnd.code.tree',
|
||||
'application/vnd.code.tree.explorer',
|
||||
'text/uri-list',
|
||||
'text/plain',
|
||||
];
|
||||
|
||||
const FILE_URI_PREFIX = 'file://';
|
||||
|
||||
const isLikelyAbsolutePath = (value: string): boolean => (
|
||||
value.startsWith('/')
|
||||
|| value.startsWith('\\\\')
|
||||
|| /^[A-Za-z]:[\\/]/.test(value)
|
||||
);
|
||||
|
||||
const toLikelyFileDropReference = (value: string): string | null => {
|
||||
const trimmed = value.trim().replace(/^['"]+|['"]+$/g, '');
|
||||
if (!trimmed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (/[\r\n]/.test(trimmed)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (trimmed.toLowerCase().startsWith(FILE_URI_PREFIX)) {
|
||||
return trimmed;
|
||||
}
|
||||
|
||||
if (isLikelyAbsolutePath(trimmed)) {
|
||||
return trimmed;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const collectStringLeaves = (input: unknown, output: Set<string>, depth = 0): void => {
|
||||
if (depth > 6 || input == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof input === 'string') {
|
||||
output.add(input);
|
||||
return;
|
||||
}
|
||||
|
||||
if (Array.isArray(input)) {
|
||||
for (const item of input) {
|
||||
collectStringLeaves(item, output, depth + 1);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof input !== 'object') {
|
||||
return;
|
||||
}
|
||||
|
||||
for (const value of Object.values(input)) {
|
||||
collectStringLeaves(value, output, depth + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const parseDroppedFileReferences = (rawPayload: string): string[] => {
|
||||
const extracted = new Set<string>();
|
||||
|
||||
const addCandidatesFromText = (value: string): void => {
|
||||
const direct = toLikelyFileDropReference(value);
|
||||
if (direct) {
|
||||
extracted.add(direct);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const line of value.split(/\r?\n/)) {
|
||||
const candidate = toLikelyFileDropReference(line);
|
||||
if (candidate) {
|
||||
extracted.add(candidate);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
addCandidatesFromText(rawPayload);
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(rawPayload) as unknown;
|
||||
const leaves = new Set<string>();
|
||||
collectStringLeaves(parsed, leaves);
|
||||
for (const leaf of leaves) {
|
||||
addCandidatesFromText(leaf);
|
||||
}
|
||||
} catch {
|
||||
// Ignore non-JSON payloads.
|
||||
}
|
||||
|
||||
return Array.from(extracted);
|
||||
};
|
||||
|
||||
const normalizePath = (value?: string | null): string | null => {
|
||||
if (typeof value !== 'string') {
|
||||
@@ -119,6 +216,18 @@ const appendWithLineBreaks = (base: string, next: string): string => {
|
||||
return `${base}${separator}${nextWithTrailingBreaks}`;
|
||||
};
|
||||
|
||||
const appendInlineText = (base: string, next: string): string => {
|
||||
const nextTrimmed = next.trim();
|
||||
if (!nextTrimmed) {
|
||||
return base;
|
||||
}
|
||||
if (!base) {
|
||||
return `${nextTrimmed} `;
|
||||
}
|
||||
const separator = /[\s\n]$/.test(base) ? '' : ' ';
|
||||
return `${base}${separator}${nextTrimmed} `;
|
||||
};
|
||||
|
||||
interface ChatInputProps {
|
||||
onOpenSettings?: () => void;
|
||||
scrollToBottom?: (options?: { instant?: boolean; force?: boolean }) => void;
|
||||
@@ -189,6 +298,9 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
const [draftMessage, setDraftMessage] = React.useState(''); // Preserves input when entering history mode
|
||||
const textareaRef = React.useRef<HTMLTextAreaElement>(null);
|
||||
const dropZoneRef = React.useRef<HTMLDivElement>(null);
|
||||
const suppressNextFileDropTextInsertRef = React.useRef(false);
|
||||
const suppressNextFileDropTextInsertTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const pendingDroppedAbsolutePathsRef = React.useRef<string[]>([]);
|
||||
const canAcceptDropRef = React.useRef(false);
|
||||
const nativeDragInsideDropZoneRef = React.useRef(false);
|
||||
const mentionRef = React.useRef<FileMentionHandle>(null);
|
||||
@@ -216,6 +328,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
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);
|
||||
@@ -713,6 +826,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
if (!next.trim()) return prev;
|
||||
return appendWithLineBreaks(prev, next);
|
||||
});
|
||||
} else if (pending.mode === 'append-inline') {
|
||||
setMessage((prev) => appendInlineText(prev, pending.text));
|
||||
} else {
|
||||
setMessage(pending.text);
|
||||
}
|
||||
@@ -1578,7 +1693,49 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
updateAutocompleteState(nextValue, cursorPosition);
|
||||
}, [adjustTextareaHeight, message, updateAutocompleteState]);
|
||||
|
||||
const clearDropTextSuppression = React.useCallback(() => {
|
||||
suppressNextFileDropTextInsertRef.current = false;
|
||||
pendingDroppedAbsolutePathsRef.current = [];
|
||||
if (suppressNextFileDropTextInsertTimeoutRef.current) {
|
||||
clearTimeout(suppressNextFileDropTextInsertTimeoutRef.current);
|
||||
suppressNextFileDropTextInsertTimeoutRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const scheduleDropTextSuppressionExpiry = React.useCallback(() => {
|
||||
if (suppressNextFileDropTextInsertTimeoutRef.current) {
|
||||
clearTimeout(suppressNextFileDropTextInsertTimeoutRef.current);
|
||||
}
|
||||
suppressNextFileDropTextInsertTimeoutRef.current = setTimeout(() => {
|
||||
clearDropTextSuppression();
|
||||
}, 700);
|
||||
}, [clearDropTextSuppression]);
|
||||
|
||||
const handleBeforeInput = React.useCallback((e: React.FormEvent<HTMLTextAreaElement>) => {
|
||||
if (!isVSCodeRuntime() || !suppressNextFileDropTextInsertRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nativeInputEvent = e.nativeEvent as InputEvent | undefined;
|
||||
if (nativeInputEvent?.inputType === 'insertFromDrop') {
|
||||
e.preventDefault();
|
||||
clearDropTextSuppression();
|
||||
}
|
||||
}, [clearDropTextSuppression]);
|
||||
|
||||
const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const nativeInputEvent = e.nativeEvent as InputEvent | undefined;
|
||||
if (isVSCodeRuntime() && suppressNextFileDropTextInsertRef.current) {
|
||||
const candidateAbsolutePaths = pendingDroppedAbsolutePathsRef.current;
|
||||
const isLikelyDropTextInsertion = nativeInputEvent?.inputType === 'insertFromDrop'
|
||||
|| candidateAbsolutePaths.some((path) => path.length > 0 && e.target.value.includes(path));
|
||||
|
||||
if (isLikelyDropTextInsertion) {
|
||||
clearDropTextSuppression();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const value = e.target.value;
|
||||
const cursorPosition = e.target.selectionStart ?? value.length;
|
||||
|
||||
@@ -1605,6 +1762,12 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
updateAutocompleteState(value, cursorPosition);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
clearDropTextSuppression();
|
||||
};
|
||||
}, [clearDropTextSuppression]);
|
||||
|
||||
const handlePaste = React.useCallback(async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
|
||||
const fileMap = new Map<string, File>();
|
||||
|
||||
@@ -1639,25 +1802,14 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
insertTextAtSelection(pastedText);
|
||||
}
|
||||
|
||||
let attachedCount = 0;
|
||||
|
||||
for (const file of imageFiles) {
|
||||
const sizeBefore = useSessionStore.getState().attachedFiles.length;
|
||||
try {
|
||||
await addAttachedFile(file);
|
||||
const sizeAfter = useSessionStore.getState().attachedFiles.length;
|
||||
if (sizeAfter > sizeBefore) {
|
||||
attachedCount += 1;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Clipboard image attach failed', error);
|
||||
toast.error(error instanceof Error ? error.message : 'Failed to attach image from clipboard');
|
||||
}
|
||||
}
|
||||
|
||||
if (attachedCount > 0) {
|
||||
toast.success(`Attached ${attachedCount} image${attachedCount > 1 ? 's' : ''} from clipboard`);
|
||||
}
|
||||
}, [addAttachedFile, currentSessionId, newSessionDraftOpen, insertTextAtSelection]);
|
||||
|
||||
const handleFileSelect = (file: { name: string; path: string; relativePath?: string }) => {
|
||||
@@ -1843,12 +1995,26 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
if (dataTransfer.files && dataTransfer.files.length > 0) return true;
|
||||
if (dataTransfer.types) {
|
||||
const types = Array.from(dataTransfer.types);
|
||||
if (types.includes('Files')) return true;
|
||||
if (types.includes('text/uri-list')) return true;
|
||||
const lowerTypes = types.map((type) => type.toLowerCase());
|
||||
if (lowerTypes.includes('files')) return true;
|
||||
if (lowerTypes.includes('text/uri-list')) return true;
|
||||
if (lowerTypes.includes('codefiles')) return true;
|
||||
if (lowerTypes.some((type) => type.includes('vnd.code.tree'))) return true;
|
||||
}
|
||||
|
||||
const uriList = dataTransfer.getData('text/uri-list') || dataTransfer.getData('text/plain');
|
||||
return typeof uriList === 'string' && uriList.toLowerCase().includes('file://');
|
||||
for (const dataType of VS_CODE_DROP_DATA_TYPES) {
|
||||
let payload = '';
|
||||
try {
|
||||
payload = dataTransfer.getData(dataType);
|
||||
} catch {
|
||||
continue;
|
||||
}
|
||||
if (payload && parseDroppedFileReferences(payload).length > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}, []);
|
||||
|
||||
const collectDroppedFiles = React.useCallback((dataTransfer: DataTransfer | null | undefined): File[] => {
|
||||
@@ -1870,83 +2036,26 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
const collectDroppedFileUris = React.useCallback((dataTransfer: DataTransfer | null | undefined): string[] => {
|
||||
if (!dataTransfer || typeof dataTransfer.getData !== 'function') return [];
|
||||
|
||||
const rawUriList = dataTransfer.getData('text/uri-list') || dataTransfer.getData('text/plain');
|
||||
if (!rawUriList) return [];
|
||||
const extracted = new Set<string>();
|
||||
|
||||
const candidates = rawUriList
|
||||
.split(/\r?\n/)
|
||||
.map((value) => value.trim())
|
||||
.filter((value) => value.length > 0 && !value.startsWith('#'))
|
||||
.filter((value) => value.toLowerCase().startsWith('file://'));
|
||||
|
||||
return Array.from(new Set(candidates));
|
||||
}, []);
|
||||
|
||||
const attachVSCodeDroppedUris = React.useCallback(async (uris: string[]) => {
|
||||
if (uris.length === 0) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/vscode/drop-files', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ uris }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to attach dropped files (${response.status})`);
|
||||
for (const dataType of VS_CODE_DROP_DATA_TYPES) {
|
||||
let rawPayload = '';
|
||||
try {
|
||||
rawPayload = dataTransfer.getData(dataType);
|
||||
} catch {
|
||||
continue;
|
||||
}
|
||||
if (!rawPayload) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const picked = Array.isArray(data?.files) ? data.files : [];
|
||||
const skipped = Array.isArray(data?.skipped) ? data.skipped : [];
|
||||
|
||||
if (skipped.length > 0) {
|
||||
const summary = skipped
|
||||
.map((entry: { name?: string; reason?: string }) => `${entry?.name || 'file'}: ${entry?.reason || 'skipped'}`)
|
||||
.join('\n');
|
||||
toast.error(`Some dropped files were skipped:\n${summary}`);
|
||||
for (const candidate of parseDroppedFileReferences(rawPayload)) {
|
||||
extracted.add(candidate);
|
||||
}
|
||||
|
||||
let attachedCount = 0;
|
||||
for (const file of picked as Array<{ name: string; mimeType?: string; dataUrl?: string }>) {
|
||||
if (!file?.dataUrl) continue;
|
||||
|
||||
const sizeBefore = useSessionStore.getState().attachedFiles.length;
|
||||
try {
|
||||
const [meta, base64] = file.dataUrl.split(',');
|
||||
const mime = file.mimeType || (meta?.match(/data:(.*);base64/)?.[1] || 'application/octet-stream');
|
||||
if (!base64) continue;
|
||||
|
||||
const binary = atob(base64);
|
||||
const bytes = new Uint8Array(binary.length);
|
||||
for (let i = 0; i < binary.length; i++) {
|
||||
bytes[i] = binary.charCodeAt(i);
|
||||
}
|
||||
|
||||
const blob = new Blob([bytes], { type: mime });
|
||||
const localFile = new File([blob], file.name || 'file', { type: mime });
|
||||
await addAttachedFile(localFile);
|
||||
|
||||
const sizeAfter = useSessionStore.getState().attachedFiles.length;
|
||||
if (sizeAfter > sizeBefore) {
|
||||
attachedCount += 1;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Dropped file attach failed', error);
|
||||
toast.error(error instanceof Error ? error.message : 'Failed to attach dropped file');
|
||||
}
|
||||
}
|
||||
|
||||
if (attachedCount > 0) {
|
||||
toast.success(`Attached ${attachedCount} file${attachedCount > 1 ? 's' : ''}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('VS Code dropped file attach failed', error);
|
||||
toast.error(error instanceof Error ? error.message : 'Failed to attach dropped files');
|
||||
}
|
||||
}, [addAttachedFile]);
|
||||
|
||||
return Array.from(extracted);
|
||||
}, []);
|
||||
|
||||
const normalizeDroppedPath = React.useCallback((rawPath: string): string => {
|
||||
const input = rawPath.trim();
|
||||
@@ -1986,6 +2095,24 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
return normalizedAbsolutePath;
|
||||
}, [chatSearchDirectory]);
|
||||
|
||||
const addVSCodeDroppedUrisAsMentions = React.useCallback((uris: string[]) => {
|
||||
if (uris.length === 0) return;
|
||||
|
||||
const mentions = Array.from(new Set(uris
|
||||
.map((entry) => normalizeDroppedPath(entry))
|
||||
.map((entry) => toProjectRelativeMentionPath(entry))
|
||||
.map((entry) => entry.trim().replace(/^\.\//, ''))
|
||||
.filter((entry) => entry.length > 0)
|
||||
.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]);
|
||||
|
||||
const handleDragEnter = (e: React.DragEvent) => {
|
||||
if (!hasDraggedFiles(e.dataTransfer)) {
|
||||
return;
|
||||
@@ -2014,11 +2141,14 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
e.stopPropagation();
|
||||
if (e.currentTarget === e.target) {
|
||||
setIsDragging(false);
|
||||
clearDropTextSuppression();
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = async (e: React.DragEvent) => {
|
||||
if (!hasDraggedFiles(e.dataTransfer)) {
|
||||
const draggedFiles = hasDraggedFiles(e.dataTransfer);
|
||||
if (!draggedFiles) {
|
||||
clearDropTextSuppression();
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
@@ -2032,32 +2162,40 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
if (files.length === 0 && isVSCodeRuntime()) {
|
||||
const droppedUris = collectDroppedFileUris(e.dataTransfer);
|
||||
if (droppedUris.length > 0) {
|
||||
await attachVSCodeDroppedUris(droppedUris);
|
||||
pendingDroppedAbsolutePathsRef.current = droppedUris
|
||||
.map((entry) => normalizeDroppedPath(entry))
|
||||
.map((entry) => entry.trim())
|
||||
.filter((entry) => entry.length > 0);
|
||||
addVSCodeDroppedUrisAsMentions(droppedUris);
|
||||
} else {
|
||||
clearDropTextSuppression();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
let attachedCount = 0;
|
||||
|
||||
if (files.length > 0) {
|
||||
for (const file of files) {
|
||||
const sizeBefore = useSessionStore.getState().attachedFiles.length;
|
||||
try {
|
||||
await addAttachedFile(file);
|
||||
const sizeAfter = useSessionStore.getState().attachedFiles.length;
|
||||
if (sizeAfter > sizeBefore) {
|
||||
attachedCount += 1;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('File attach failed', error);
|
||||
toast.error(error instanceof Error ? error.message : 'Failed to attach file');
|
||||
}
|
||||
}
|
||||
}
|
||||
clearDropTextSuppression();
|
||||
};
|
||||
|
||||
if (attachedCount > 0) {
|
||||
toast.success(`Attached ${attachedCount} file${attachedCount > 1 ? 's' : ''}`);
|
||||
const handleDropCapture = (e: React.DragEvent) => {
|
||||
if (!isVSCodeRuntime()) {
|
||||
return;
|
||||
}
|
||||
if (!hasDraggedFiles(e.dataTransfer)) {
|
||||
return;
|
||||
}
|
||||
suppressNextFileDropTextInsertRef.current = true;
|
||||
scheduleDropTextSuppressionExpiry();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
// Tauri desktop: handle native file drops via onDragDropEvent
|
||||
@@ -2118,9 +2256,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
: [];
|
||||
if (paths.length === 0) return;
|
||||
|
||||
let attachedCount = 0;
|
||||
for (const path of paths) {
|
||||
const sizeBefore = useSessionStore.getState().attachedFiles.length;
|
||||
try {
|
||||
const normalizedPath = normalizeDroppedPath(path);
|
||||
const fileName = normalizedPath.split(/[\\/]/).pop() || normalizedPath;
|
||||
@@ -2149,16 +2285,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
}
|
||||
|
||||
await addAttachedFile(file);
|
||||
const sizeAfter = useSessionStore.getState().attachedFiles.length;
|
||||
if (sizeAfter > sizeBefore) attachedCount++;
|
||||
} catch (error) {
|
||||
console.error('Failed to attach dropped file:', path, error);
|
||||
toast.error(`Failed to attach ${path.split(/[\\/]/).pop() || 'file'}`);
|
||||
}
|
||||
}
|
||||
if (attachedCount > 0) {
|
||||
toast.success(`Attached ${attachedCount} file${attachedCount > 1 ? 's' : ''}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -2183,26 +2314,16 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
const fileInputRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
const attachFiles = React.useCallback(async (files: FileList | File[]) => {
|
||||
let attachedCount = 0;
|
||||
const list = Array.isArray(files) ? files : Array.from(files);
|
||||
|
||||
for (const file of list) {
|
||||
const sizeBefore = useSessionStore.getState().attachedFiles.length;
|
||||
try {
|
||||
await addAttachedFile(file);
|
||||
const sizeAfter = useSessionStore.getState().attachedFiles.length;
|
||||
if (sizeAfter > sizeBefore) {
|
||||
attachedCount += 1;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('File attach failed', error);
|
||||
toast.error(error instanceof Error ? error.message : 'Failed to attach file');
|
||||
}
|
||||
}
|
||||
|
||||
if (attachedCount > 0) {
|
||||
toast.success(`Attached ${attachedCount} file${attachedCount > 1 ? 's' : ''}`);
|
||||
}
|
||||
}, [addAttachedFile]);
|
||||
|
||||
const handleVSCodePickFiles = React.useCallback(async () => {
|
||||
@@ -3068,6 +3189,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
backgroundColor: currentTheme?.colors?.surface?.subtle,
|
||||
}}
|
||||
ref={dropZoneRef}
|
||||
onDropCapture={handleDropCapture}
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
@@ -3192,10 +3314,12 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
data-chat-input="true"
|
||||
value={message}
|
||||
onChange={handleTextChange}
|
||||
onBeforeInput={handleBeforeInput}
|
||||
onKeyDown={handleKeyDown}
|
||||
onPaste={handlePaste}
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragOver={handleDragOver}
|
||||
onDropCapture={handleDropCapture}
|
||||
onDrop={handleDrop}
|
||||
onPointerDownCapture={handleTextareaPointerDownCapture}
|
||||
onKeyUp={updateAutocompleteOverlayPosition}
|
||||
|
||||
@@ -20,24 +20,15 @@ export const FileAttachmentButton = memo(() => {
|
||||
const iconSizeClass = isMobile ? 'h-5 w-5' : 'h-[18px] w-[18px]';
|
||||
|
||||
const attachFiles = async (files: FileList | File[]) => {
|
||||
let attachedCount = 0;
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
const sizeBefore = useSessionStore.getState().attachedFiles.length;
|
||||
try {
|
||||
await addAttachedFile(file);
|
||||
const sizeAfter = useSessionStore.getState().attachedFiles.length;
|
||||
if (sizeAfter > sizeBefore) {
|
||||
attachedCount++;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('File attach failed', error);
|
||||
toast.error(error instanceof Error ? error.message : 'Failed to attach file');
|
||||
}
|
||||
}
|
||||
if (attachedCount > 0) {
|
||||
toast.success(`Attached ${attachedCount} file${attachedCount > 1 ? 's' : ''}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
|
||||
@@ -1186,16 +1186,16 @@ const AssistantMessageBody: React.FC<Omit<MessageBodyProps, 'isUser'>> = ({
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
const partText = (part as { text?: string }).text;
|
||||
if (partText && partText.trim().length > 0) {
|
||||
rendered.push(
|
||||
<FadeInOnReveal key={`reasoning-${messageId}-${i}`}>
|
||||
<div className="my-0.5 text-sm text-muted-foreground/60 italic leading-relaxed whitespace-pre-wrap">
|
||||
{partText}
|
||||
</div>
|
||||
</FadeInOnReveal>
|
||||
);
|
||||
}
|
||||
rendered.push(
|
||||
<AssistantTextPart
|
||||
key={`reasoning-${messageId}-${i}`}
|
||||
part={part}
|
||||
messageId={messageId}
|
||||
streamPhase={streamPhase}
|
||||
chatRenderMode={chatRenderMode}
|
||||
onContentChange={onContentChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
i++;
|
||||
|
||||
@@ -7,6 +7,7 @@ import type { ContentChangeReason } from '@/hooks/useChatScrollManager';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { useDurationTickerNow } from './useDurationTicker';
|
||||
import { MarkdownRenderer } from '../../MarkdownRenderer';
|
||||
|
||||
type PartWithText = Part & { text?: string; content?: string; time?: { start?: number; end?: number } };
|
||||
|
||||
@@ -78,6 +79,7 @@ type ReasoningTimelineBlockProps = {
|
||||
blockId: string;
|
||||
time?: { start?: number; end?: number };
|
||||
showDuration?: boolean;
|
||||
isStreaming?: boolean;
|
||||
};
|
||||
|
||||
export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
|
||||
@@ -87,6 +89,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
|
||||
blockId,
|
||||
time,
|
||||
showDuration = true,
|
||||
isStreaming = false,
|
||||
}) => {
|
||||
const [isExpanded, setIsExpanded] = React.useState(false);
|
||||
|
||||
@@ -140,7 +143,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
|
||||
|
||||
{(summary || (showDuration && typeof timeStart === 'number')) ? (
|
||||
<div className="flex items-center gap-1 flex-1 min-w-0 typography-meta text-muted-foreground/70">
|
||||
{summary ? <span className="flex-1 min-w-0 truncate italic">{summary}</span> : null}
|
||||
{summary ? <span className="flex-1 min-w-0 truncate">{summary}</span> : null}
|
||||
{showDuration && typeof timeStart === 'number' ? (
|
||||
<span className="relative flex-shrink-0 tabular-nums text-right">
|
||||
<span className="text-muted-foreground/80 transition-opacity duration-150">
|
||||
@@ -163,11 +166,17 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
|
||||
)}
|
||||
>
|
||||
<ScrollableOverlay
|
||||
as="blockquote"
|
||||
as="div"
|
||||
outerClassName="max-h-80"
|
||||
className="whitespace-pre-wrap break-words typography-meta italic text-muted-foreground/70 p-0"
|
||||
className="p-0"
|
||||
>
|
||||
{text}
|
||||
<MarkdownRenderer
|
||||
content={text}
|
||||
messageId={blockId}
|
||||
isAnimated={false}
|
||||
isStreaming={isStreaming}
|
||||
variant="reasoning"
|
||||
/>
|
||||
</ScrollableOverlay>
|
||||
</div>
|
||||
)}
|
||||
@@ -191,6 +200,7 @@ const ReasoningPart: React.FC<ReasoningPartProps> = ({
|
||||
const rawText = partWithText.text || partWithText.content || '';
|
||||
const textContent = React.useMemo(() => cleanReasoningText(rawText), [rawText]);
|
||||
const time = partWithText.time;
|
||||
const isStreaming = chatRenderMode === 'live' && typeof time?.end !== 'number';
|
||||
|
||||
// Show reasoning even if time.end isn't set yet (during streaming)
|
||||
// Only hide if there's no text content
|
||||
@@ -206,6 +216,7 @@ const ReasoningPart: React.FC<ReasoningPartProps> = ({
|
||||
blockId={part.id || `${messageId}-reasoning`}
|
||||
time={time}
|
||||
showDuration={chatRenderMode !== 'sorted'}
|
||||
isStreaming={isStreaming}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -43,6 +43,8 @@ const MOBILE_WIDTH_THRESHOLD = 550;
|
||||
const EXPANDED_LAYOUT_THRESHOLD = 1400;
|
||||
// Sessions sidebar width in expanded layout
|
||||
const SESSIONS_SIDEBAR_WIDTH = 280;
|
||||
const SESSIONS_SIDEBAR_MIN_WIDTH = Math.round(SESSIONS_SIDEBAR_WIDTH * 0.7);
|
||||
const SESSIONS_SIDEBAR_MAX_WIDTH = 520;
|
||||
|
||||
type VSCodeView = 'sessions' | 'chat' | 'settings';
|
||||
|
||||
@@ -80,7 +82,12 @@ export const VSCodeLayout: React.FC = () => {
|
||||
|
||||
const [currentView, setCurrentView] = React.useState<VSCodeView>(() => (bootDraftOpen ? 'chat' : 'sessions'));
|
||||
const [containerWidth, setContainerWidth] = React.useState<number>(0);
|
||||
const [expandedSidebarWidth, setExpandedSidebarWidth] = React.useState<number>(SESSIONS_SIDEBAR_WIDTH);
|
||||
const [isResizingExpandedSidebar, setIsResizingExpandedSidebar] = React.useState(false);
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
const expandedSidebarResizeStartXRef = React.useRef(0);
|
||||
const expandedSidebarResizeStartWidthRef = React.useRef(SESSIONS_SIDEBAR_WIDTH);
|
||||
const expandedSidebarResizePointerIdRef = React.useRef<number | null>(null);
|
||||
const currentSessionId = useSessionStore((state) => state.currentSessionId);
|
||||
const sessions = useSessionStore((state) => state.sessions);
|
||||
|
||||
@@ -357,6 +364,45 @@ export const VSCodeLayout: React.FC = () => {
|
||||
const usesMobileLayout = containerWidth > 0 && containerWidth < MOBILE_WIDTH_THRESHOLD;
|
||||
const usesExpandedLayout = containerWidth >= EXPANDED_LAYOUT_THRESHOLD;
|
||||
|
||||
const clampExpandedSidebarWidth = React.useCallback((value: number) => {
|
||||
return Math.min(SESSIONS_SIDEBAR_MAX_WIDTH, Math.max(SESSIONS_SIDEBAR_MIN_WIDTH, value));
|
||||
}, []);
|
||||
|
||||
const handleExpandedSidebarResizeStart = React.useCallback((event: React.PointerEvent<HTMLDivElement>) => {
|
||||
try {
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
expandedSidebarResizePointerIdRef.current = event.pointerId;
|
||||
expandedSidebarResizeStartXRef.current = event.clientX;
|
||||
expandedSidebarResizeStartWidthRef.current = expandedSidebarWidth;
|
||||
setIsResizingExpandedSidebar(true);
|
||||
event.preventDefault();
|
||||
}, [expandedSidebarWidth]);
|
||||
|
||||
const handleExpandedSidebarResizeMove = React.useCallback((event: React.PointerEvent<HTMLDivElement>) => {
|
||||
if (expandedSidebarResizePointerIdRef.current !== event.pointerId) {
|
||||
return;
|
||||
}
|
||||
const delta = event.clientX - expandedSidebarResizeStartXRef.current;
|
||||
const nextWidth = clampExpandedSidebarWidth(expandedSidebarResizeStartWidthRef.current + delta);
|
||||
setExpandedSidebarWidth((current) => (current === nextWidth ? current : nextWidth));
|
||||
}, [clampExpandedSidebarWidth]);
|
||||
|
||||
const handleExpandedSidebarResizeEnd = React.useCallback((event: React.PointerEvent<HTMLDivElement>) => {
|
||||
if (expandedSidebarResizePointerIdRef.current !== event.pointerId) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
event.currentTarget.releasePointerCapture(event.pointerId);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
expandedSidebarResizePointerIdRef.current = null;
|
||||
setIsResizingExpandedSidebar(false);
|
||||
}, []);
|
||||
|
||||
// In expanded layout, always show chat (with sidebar alongside)
|
||||
// Navigate to chat automatically when expanded layout is enabled and we're on sessions view
|
||||
React.useEffect(() => {
|
||||
@@ -392,8 +438,8 @@ export const VSCodeLayout: React.FC = () => {
|
||||
<div className="flex h-full">
|
||||
{/* Sessions sidebar */}
|
||||
<div
|
||||
className="h-full border-r border-border overflow-hidden flex-shrink-0"
|
||||
style={{ width: SESSIONS_SIDEBAR_WIDTH }}
|
||||
className={cn('relative h-full border-r border-border overflow-hidden flex-shrink-0', isResizingExpandedSidebar && 'select-none')}
|
||||
style={{ width: expandedSidebarWidth, minWidth: expandedSidebarWidth, maxWidth: expandedSidebarWidth }}
|
||||
>
|
||||
<SessionSidebar
|
||||
mobileVariant
|
||||
@@ -401,6 +447,19 @@ export const VSCodeLayout: React.FC = () => {
|
||||
hideDirectoryControls
|
||||
showOnlyMainWorkspace
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
'absolute right-0 top-0 z-20 h-full w-[3px] cursor-col-resize transition-colors hover:bg-[var(--interactive-border)]/80',
|
||||
isResizingExpandedSidebar && 'bg-[var(--interactive-border)]'
|
||||
)}
|
||||
onPointerDown={handleExpandedSidebarResizeStart}
|
||||
onPointerMove={handleExpandedSidebarResizeMove}
|
||||
onPointerUp={handleExpandedSidebarResizeEnd}
|
||||
onPointerCancel={handleExpandedSidebarResizeEnd}
|
||||
role="separator"
|
||||
aria-orientation="vertical"
|
||||
aria-label="Resize sessions sidebar"
|
||||
/>
|
||||
</div>
|
||||
{/* Chat content */}
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
@@ -533,7 +592,7 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
|
||||
}, [setQuotaDisplayMode]);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 pl-1 pr-2 py-1 border-b border-border bg-background shrink-0">
|
||||
<div className="flex items-center gap-1.5 pl-3 pr-2 py-1 border-b border-border bg-background shrink-0">
|
||||
{showBack && onBack && (
|
||||
<button
|
||||
onClick={onBack}
|
||||
|
||||
@@ -170,6 +170,11 @@ export const VoiceSettings: React.FC = () => {
|
||||
}, [isBrowserPreviewPlaying]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!voiceModeEnabled || voiceProvider !== 'openai') {
|
||||
setIsOpenAIAvailable(openaiApiKey.trim().length > 0);
|
||||
return;
|
||||
}
|
||||
|
||||
const checkOpenAIAvailability = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/tts/status');
|
||||
@@ -183,9 +188,15 @@ export const VoiceSettings: React.FC = () => {
|
||||
};
|
||||
|
||||
checkOpenAIAvailability();
|
||||
}, [openaiApiKey]);
|
||||
}, [openaiApiKey, voiceModeEnabled, voiceProvider]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!voiceModeEnabled) {
|
||||
setIsSayAvailable(false);
|
||||
setSayVoices([]);
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('/api/tts/say/status')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
@@ -202,7 +213,7 @@ export const VoiceSettings: React.FC = () => {
|
||||
.catch(() => {
|
||||
setIsSayAvailable(false);
|
||||
});
|
||||
}, []);
|
||||
}, [voiceModeEnabled]);
|
||||
|
||||
const previewVoice = useCallback(async () => {
|
||||
if (previewAudio) {
|
||||
|
||||
@@ -1032,6 +1032,44 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
|
||||
];
|
||||
}, [activeNowSessions, sessionSidebarMetaById]);
|
||||
|
||||
const recentSessionIds = React.useMemo(() => {
|
||||
return new Set(activitySections.flatMap((section) => section.items.map((item) => item.node.session.id)));
|
||||
}, [activitySections]);
|
||||
|
||||
const sectionsForSidebarRender = React.useMemo(() => {
|
||||
if (!isVSCode || hasSessionSearchQuery || recentSessionIds.size === 0) {
|
||||
return sectionsForRender;
|
||||
}
|
||||
|
||||
const filterNodes = (nodes: SessionNode[]): SessionNode[] => {
|
||||
return nodes.reduce<SessionNode[]>((acc, node) => {
|
||||
if (recentSessionIds.has(node.session.id)) {
|
||||
return acc;
|
||||
}
|
||||
|
||||
const filteredChildren = filterNodes(node.children);
|
||||
if (filteredChildren.length === node.children.length) {
|
||||
acc.push(node);
|
||||
return acc;
|
||||
}
|
||||
|
||||
acc.push({
|
||||
...node,
|
||||
children: filteredChildren,
|
||||
});
|
||||
return acc;
|
||||
}, []);
|
||||
};
|
||||
|
||||
return sectionsForRender.map((section) => ({
|
||||
...section,
|
||||
groups: section.groups.map((group) => ({
|
||||
...group,
|
||||
sessions: filterNodes(group.sessions),
|
||||
})),
|
||||
}));
|
||||
}, [isVSCode, hasSessionSearchQuery, recentSessionIds, sectionsForRender]);
|
||||
|
||||
const desktopHeaderActionButtonClass =
|
||||
'inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md leading-none text-foreground hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed';
|
||||
const mobileHeaderActionButtonClass =
|
||||
@@ -1203,12 +1241,13 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
|
||||
}, [prStatusEntries]);
|
||||
|
||||
const renderGroupSessions = React.useCallback(
|
||||
(group: SessionGroup, groupKey: string, projectId?: string | null, hideGroupLabel?: boolean, dragHandleProps?: SortableDragHandleProps | null) => (
|
||||
(group: SessionGroup, groupKey: string, projectId?: string | null, hideGroupLabel?: boolean, dragHandleProps?: SortableDragHandleProps | null, compactBodyPadding?: boolean) => (
|
||||
<SessionGroupSection
|
||||
group={group}
|
||||
groupKey={groupKey}
|
||||
projectId={projectId}
|
||||
hideGroupLabel={hideGroupLabel}
|
||||
compactBodyPadding={compactBodyPadding}
|
||||
hasSessionSearchQuery={hasSessionSearchQuery}
|
||||
normalizedSessionSearchQuery={normalizedSessionSearchQuery}
|
||||
groupSearchDataByGroup={groupSearchDataByGroup}
|
||||
@@ -1363,7 +1402,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
|
||||
|
||||
<SidebarProjectsList
|
||||
topContent={topContent}
|
||||
sectionsForRender={sectionsForRender}
|
||||
sectionsForRender={sectionsForSidebarRender}
|
||||
projectSections={projectSections}
|
||||
activeProjectId={activeProjectId}
|
||||
showOnlyMainWorkspace={showOnlyMainWorkspace}
|
||||
|
||||
@@ -91,6 +91,7 @@ type Props = {
|
||||
}>;
|
||||
onToggleCollapsedGroup: (groupKey: string) => void;
|
||||
dragHandleProps?: SortableDragHandleProps | null;
|
||||
compactBodyPadding?: boolean;
|
||||
};
|
||||
|
||||
export function SessionGroupSection(props: Props): React.ReactNode {
|
||||
@@ -132,6 +133,7 @@ export function SessionGroupSection(props: Props): React.ReactNode {
|
||||
prVisualStateByDirectoryBranch,
|
||||
onToggleCollapsedGroup,
|
||||
dragHandleProps,
|
||||
compactBodyPadding = false,
|
||||
} = props;
|
||||
|
||||
const searchData = hasSessionSearchQuery ? groupSearchDataByGroup.get(group) : null;
|
||||
@@ -373,8 +375,8 @@ export function SessionGroupSection(props: Props): React.ReactNode {
|
||||
? (hasWorktreeDeleteAction ? 'pr-14' : 'pr-7')
|
||||
: isMinimalMode
|
||||
? (hasWorktreeDeleteAction
|
||||
? 'pr-10 group-hover/gh:pr-14 group-focus-within/gh:pr-14'
|
||||
: 'pr-10')
|
||||
? 'pr-2 group-hover/gh:pr-14 group-focus-within/gh:pr-14'
|
||||
: 'pr-2')
|
||||
: (hasWorktreeDeleteAction
|
||||
? 'pr-5 group-hover/gh:pr-14 group-focus-within/gh:pr-14'
|
||||
: 'pr-5');
|
||||
@@ -415,8 +417,10 @@ export function SessionGroupSection(props: Props): React.ReactNode {
|
||||
</SessionFolderDndScope>
|
||||
);
|
||||
|
||||
const groupBodyPaddingClass = compactBodyPadding ? 'pb-2 pl-1' : 'pb-3 pl-4';
|
||||
|
||||
if (hideGroupLabel) {
|
||||
return <div className="oc-group"><div className="oc-group-body pb-3 pl-4">{body}</div></div>;
|
||||
return <div className="oc-group"><div className={cn('oc-group-body', groupBodyPaddingClass)}>{body}</div></div>;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -438,12 +442,12 @@ export function SessionGroupSection(props: Props): React.ReactNode {
|
||||
<div
|
||||
ref={dragHandleProps?.setActivatorNodeRef}
|
||||
className={cn(
|
||||
'min-w-0 flex items-start gap-1 pl-0.5 transition-[padding] cursor-grab active:cursor-grabbing',
|
||||
'min-w-0 flex flex-1 items-start gap-1 overflow-hidden pl-0.5 transition-[padding] cursor-grab active:cursor-grabbing',
|
||||
groupHeaderRightPadding,
|
||||
)}
|
||||
{...(dragHandleProps?.listeners ?? {})}
|
||||
>
|
||||
<div className="min-w-0 flex flex-col justify-center gap-0.5">
|
||||
<div className="min-w-0 flex flex-1 flex-col justify-center gap-0.5 overflow-hidden">
|
||||
<p className="text-[14px] font-normal truncate text-foreground/92">
|
||||
{showInlinePrTitle && prIndicator ? (
|
||||
<span className="inline-flex min-w-0 max-w-full items-center">
|
||||
@@ -503,17 +507,17 @@ export function SessionGroupSection(props: Props): React.ReactNode {
|
||||
<span className="ml-1 min-w-0 flex-1 truncate leading-none align-middle">{group.branch}</span>
|
||||
</span>
|
||||
) : group.isArchivedBucket ? (
|
||||
<span className="inline-flex min-w-0 items-center gap-1">
|
||||
<span className="inline-flex min-w-0 max-w-full items-center gap-1">
|
||||
<span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
|
||||
<RiArchiveLine className="h-3.5 w-3.5 shrink-0 text-muted-foreground group-hover/gh:hidden" />
|
||||
<span className="hidden text-muted-foreground group-hover/gh:inline-flex h-3.5 w-3.5 items-center justify-center">
|
||||
{isCollapsed ? <RiArrowRightSLine className="h-3.5 w-3.5" /> : <RiArrowDownSLine className="h-3.5 w-3.5" />}
|
||||
</span>
|
||||
</span>
|
||||
<span className="truncate">{renderHighlightedText(group.label, normalizedSessionSearchQuery)}</span>
|
||||
<span className="min-w-0 flex-1 truncate">{renderHighlightedText(group.label, normalizedSessionSearchQuery)}</span>
|
||||
</span>
|
||||
) : (!group.isMain || group.worktree) ? (
|
||||
<span className="inline-flex min-w-0 items-center gap-1">
|
||||
<span className="inline-flex min-w-0 max-w-full items-center gap-1">
|
||||
<span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
|
||||
<RiGitBranchLine
|
||||
className="h-3.5 w-3.5 shrink-0 text-muted-foreground group-hover/gh:hidden"
|
||||
@@ -523,7 +527,7 @@ export function SessionGroupSection(props: Props): React.ReactNode {
|
||||
{isCollapsed ? <RiArrowRightSLine className="h-3.5 w-3.5" /> : <RiArrowDownSLine className="h-3.5 w-3.5" />}
|
||||
</span>
|
||||
</span>
|
||||
<span className="truncate">{renderHighlightedText(group.label, normalizedSessionSearchQuery)}</span>
|
||||
<span className="min-w-0 flex-1 truncate">{renderHighlightedText(group.label, normalizedSessionSearchQuery)}</span>
|
||||
</span>
|
||||
) : (
|
||||
renderHighlightedText(group.label, normalizedSessionSearchQuery)
|
||||
@@ -659,7 +663,7 @@ export function SessionGroupSection(props: Props): React.ReactNode {
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{!isCollapsed ? <div className="oc-group-body pb-3 pl-4">{body}</div> : null}
|
||||
{!isCollapsed ? <div className={cn('oc-group-body', groupBodyPaddingClass)}>{body}</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -152,6 +152,15 @@ export function SessionNodeItem(props: Props): React.ReactNode {
|
||||
const displayMode = useSessionDisplayStore((state) => state.displayMode);
|
||||
const isMinimalMode = displayMode === 'minimal';
|
||||
const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
|
||||
const revealOnHoverClass = isVSCode
|
||||
? 'group-hover:opacity-100 group-hover:pointer-events-auto'
|
||||
: 'group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto';
|
||||
const hideOnHoverClass = isVSCode
|
||||
? 'group-hover:opacity-0'
|
||||
: 'group-hover:opacity-0 group-focus-within:opacity-0';
|
||||
const revealPaddingClass = isVSCode
|
||||
? 'group-hover:pr-5'
|
||||
: 'group-hover:pr-5 group-focus-within:pr-5';
|
||||
const suppressNextSelectRef = React.useRef(false);
|
||||
|
||||
const session = node.session;
|
||||
@@ -433,7 +442,9 @@ export function SessionNodeItem(props: Props): React.ReactNode {
|
||||
}}
|
||||
className={cn(
|
||||
'flex min-w-0 flex-1 cursor-pointer flex-col gap-0 overflow-hidden rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 text-foreground select-none disabled:cursor-not-allowed transition-[padding]',
|
||||
mobileVariant ? 'pr-7' : '',
|
||||
mobileVariant
|
||||
? (isVSCode ? revealPaddingClass : 'pr-7')
|
||||
: '',
|
||||
)}
|
||||
>
|
||||
<div className={cn('flex w-full items-center min-w-0 flex-1 overflow-hidden', isMinimalMode ? 'gap-1' : 'gap-1')}>
|
||||
@@ -446,7 +457,7 @@ export function SessionNodeItem(props: Props): React.ReactNode {
|
||||
'whitespace-nowrap text-right text-[0.72rem] text-muted-foreground/75 transition-opacity duration-150',
|
||||
isMenuOpen
|
||||
? 'opacity-0'
|
||||
: 'group-hover:opacity-0 group-focus-within:opacity-0',
|
||||
: hideOnHoverClass,
|
||||
)}>
|
||||
{sessionCompactUpdatedLabel}
|
||||
</span>
|
||||
@@ -458,7 +469,7 @@ export function SessionNodeItem(props: Props): React.ReactNode {
|
||||
'absolute inset-y-0 right-0 inline-flex h-4 w-4 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
|
||||
isMenuOpen
|
||||
? 'opacity-100 pointer-events-auto'
|
||||
: 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto',
|
||||
: cn('opacity-0 pointer-events-none', revealOnHoverClass),
|
||||
)}
|
||||
aria-label="Session menu"
|
||||
onClick={handleMenuTriggerClick}
|
||||
@@ -509,7 +520,12 @@ export function SessionNodeItem(props: Props): React.ReactNode {
|
||||
e.stopPropagation();
|
||||
handleSessionDoubleClick();
|
||||
}}
|
||||
className={cn('flex min-w-0 flex-1 cursor-pointer flex-col gap-0 overflow-hidden rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 text-foreground select-none disabled:cursor-not-allowed transition-[padding]', mobileVariant ? 'pr-7' : 'group-hover:pr-5 group-focus-within:pr-5')}
|
||||
className={cn(
|
||||
'flex min-w-0 flex-1 cursor-pointer flex-col gap-0 overflow-hidden rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 text-foreground select-none disabled:cursor-not-allowed transition-[padding]',
|
||||
mobileVariant
|
||||
? (isVSCode ? revealPaddingClass : 'pr-7')
|
||||
: revealPaddingClass
|
||||
)}
|
||||
>
|
||||
<div className={cn('flex w-full items-center min-w-0 flex-1 overflow-hidden', isMinimalMode ? 'gap-1' : 'gap-1')}>
|
||||
{inlineStatusMarker}
|
||||
@@ -550,9 +566,9 @@ export function SessionNodeItem(props: Props): React.ReactNode {
|
||||
'transition-opacity',
|
||||
isMenuOpen
|
||||
? 'opacity-100 pointer-events-auto'
|
||||
: mobileVariant
|
||||
: (mobileVariant && !isVSCode)
|
||||
? 'opacity-100 pointer-events-auto'
|
||||
: 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto',
|
||||
: cn('opacity-0 pointer-events-none', revealOnHoverClass),
|
||||
),
|
||||
)}>
|
||||
<DropdownMenu open={isMenuOpen} onOpenChange={handleMenuOpenChange}>
|
||||
@@ -564,7 +580,7 @@ export function SessionNodeItem(props: Props): React.ReactNode {
|
||||
isMinimalMode && !mobileVariant
|
||||
? (isMenuOpen
|
||||
? 'h-4 w-4 opacity-100 pointer-events-auto'
|
||||
: 'h-4 w-4 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto')
|
||||
: cn('h-4 w-4 opacity-0 pointer-events-none', revealOnHoverClass))
|
||||
: 'h-6 w-6 opacity-100',
|
||||
)}
|
||||
aria-label="Session menu"
|
||||
|
||||
@@ -38,7 +38,7 @@ type Props = {
|
||||
hasSessionSearchQuery: boolean;
|
||||
emptyState: React.ReactNode;
|
||||
searchEmptyState: React.ReactNode;
|
||||
renderGroupSessions: (group: SessionGroup, groupKey: string, projectId?: string | null, hideGroupLabel?: boolean, dragHandleProps?: SortableDragHandleProps | null) => React.ReactNode;
|
||||
renderGroupSessions: (group: SessionGroup, groupKey: string, projectId?: string | null, hideGroupLabel?: boolean, dragHandleProps?: SortableDragHandleProps | null, compactBodyPadding?: boolean) => React.ReactNode;
|
||||
homeDirectory: string | null;
|
||||
collapsedProjects: Set<string>;
|
||||
hideDirectoryControls: boolean;
|
||||
@@ -111,7 +111,7 @@ export function SidebarProjectsList(props: Props): React.ReactNode {
|
||||
const hideGroupLabel = group.id === primaryGroup.id;
|
||||
return (
|
||||
<React.Fragment key={groupKey}>
|
||||
{props.renderGroupSessions(group, groupKey, activeSection.project.id, hideGroupLabel)}
|
||||
{props.renderGroupSessions(group, groupKey, activeSection.project.id, hideGroupLabel, null, true)}
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -290,8 +290,8 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
|
||||
onNewSession();
|
||||
}}
|
||||
className={cn(
|
||||
'h-6 w-6 rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
|
||||
mobileVariant ? 'inline-flex items-center justify-center' : isHovered ? 'inline-flex items-center justify-center' : 'hidden',
|
||||
'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
|
||||
mobileVariant ? 'opacity-100' : isHovered ? 'opacity-100' : 'opacity-0 pointer-events-none',
|
||||
)}
|
||||
aria-label={isRepo ? 'New draft session' : 'New session'}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user