feat: massive chat reliability + UX pass (web/desktop/mobile/vscode) (#593)
## Added Features - Add VS Code save-as-image flow for assistant messages via webview bridge + native save dialog. - Add hourly desktop update checks after startup. - Add new tool output display mode: `Changes` (auto-expand edit/write/patch only; keep activity expanded; mode guidance text). - Add GitHub PR attachment flow in chat input with PR picker + attached PR chip/details. - Add mobile overlay presentation for GitHub Issue and PR pickers (shared with desktop picker content). ## Fixes - Save-gate project icon updates until explicit Save; allow icon removal with same save-gated behavior. - Restore clickable chat action buttons in sticky header mode (desktop + Firefox hit-target issue). - Clamp sticky user messages to bounded chat height and allow internal scrolling. - Prevent drawer context crash during iPad/tablet orientation switching. - Improve text-selection action menu placement on narrow screens. - Move assistant message time into clock tooltip; keep duration display clean. - Hide `Link GitHub Issue` row in VS Code chat input area (GitHub flow is not yet ready there). - Remove laggy close animation in text-selection popover; keep open motion/positioning behavior. - Fetch branches when picker opens and cache empty; show loading state instead of false “No branches found”. - Fix share-image export metadata rendering (theme background resolution, timestamp rendering, footer alignment). - Scope MCP services status/toggles to active directory to avoid cross-project leakage. - Improve long user-message clamp behavior (40% cap variant, hidden scrollbar, scroll shadows, expansion detection). - Fix desktop `Check for Updates` menu handler; prevent duplicate checks; show clear success/error toasts. - Stabilize long user-message scrolling behavior (follow-up hardening). - Avoid premature web update failure on slower servers. - Restore user message image previews + fullscreen gallery navigation payload. - Repair desktop chat drag-and-drop image attachments when native drop coords are missing. - Move GitHub issue linking entry into Add attachment menu. - Align header context usage percentage visuals with context panel. - Align `@` file search with active project in all runtimes. - Route `@` file discovery through OpenCode SDK `find.files`; remove legacy `/api/fs/search` reliance. - Make chat `@` mention behavior consistent with files-style behavior. - Keep status-row todos in stable order after status changes; add compact status icons; replace noisy priority labels. ## Refactors / UX Consistency - Simplify chat attachment model and remove project file picker path. - Keep composer focused on `@` mention file flow. - Use direct `Attach files` action in VS Code instead of attachment dropdown path. - Unify issue/PR picker behavior between desktop and mobile overlays.
This commit is contained in:
Bohdan Triapitsyn
committed by
GitHub
GitHub
parent
ca18b8be0f
commit
79143bff4c
@@ -49,10 +49,11 @@ const THEME_MODE_OPTIONS: Array<{ value: ThemeMode; label: string }> = [
|
||||
},
|
||||
];
|
||||
|
||||
const TOOL_EXPANSION_OPTIONS: Array<{ value: 'collapsed' | 'activity' | 'detailed'; label: string; description: string }> = [
|
||||
{ value: 'collapsed', label: 'Collapsed', description: 'Activity and tools start collapsed' },
|
||||
{ value: 'activity', label: 'Summary', description: 'Activity expanded, tools collapsed' },
|
||||
{ value: 'detailed', label: 'Detailed', description: 'Activity expanded, key tools expanded' },
|
||||
const TOOL_EXPANSION_OPTIONS: Array<{ value: 'collapsed' | 'activity' | 'detailed' | 'changes'; label: string; description: string }> = [
|
||||
{ value: 'collapsed', label: 'Collapsed', description: 'Activity and tool calls stay collapsed by default.' },
|
||||
{ value: 'activity', label: 'Summary', description: 'Activity opens by default; tool calls stay collapsed.' },
|
||||
{ value: 'detailed', label: 'Detailed', description: 'Activity opens; key tools auto-expand for richer detail.' },
|
||||
{ value: 'changes', label: 'Changes', description: 'Activity opens; only edit/write/patch tools auto-expand.' },
|
||||
];
|
||||
|
||||
const DIFF_LAYOUT_OPTIONS: Option<'dynamic' | 'inline' | 'side-by-side'>[] = [
|
||||
@@ -242,6 +243,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
|
||||
|| shouldShow('queueMode')
|
||||
|| shouldShow('textJustificationActivity')
|
||||
|| shouldShow('persistDraft');
|
||||
const selectedToolExpansionOption = TOOL_EXPANSION_OPTIONS.find((option) => option.value === toolCallExpansion);
|
||||
|
||||
const showPwaInstallNameSetting = shouldShow('pwaInstallName') && isWebRuntime() && browserTab;
|
||||
const [pwaInstallName, setPwaInstallName] = React.useState('');
|
||||
@@ -710,6 +712,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
|
||||
return (
|
||||
<ButtonSmall
|
||||
key={option.value}
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
className={cn(
|
||||
@@ -725,6 +728,11 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{selectedToolExpansionOption && (
|
||||
<p className="mt-2 typography-ui-label font-normal text-muted-foreground">
|
||||
{selectedToolExpansionOption.description}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
|
||||
@@ -43,9 +43,22 @@ export const ProjectsPage: React.FC = () => {
|
||||
const [isUploadingIcon, setIsUploadingIcon] = React.useState(false);
|
||||
const [isRemovingCustomIcon, setIsRemovingCustomIcon] = React.useState(false);
|
||||
const [isDiscoveringIcon, setIsDiscoveringIcon] = React.useState(false);
|
||||
const [pendingRemoveImageIcon, setPendingRemoveImageIcon] = React.useState(false);
|
||||
const [pendingUploadIconFile, setPendingUploadIconFile] = React.useState<File | null>(null);
|
||||
const [pendingUploadIconPreviewUrl, setPendingUploadIconPreviewUrl] = React.useState<string | null>(null);
|
||||
const [previewImageFailed, setPreviewImageFailed] = React.useState(false);
|
||||
const fileInputRef = React.useRef<HTMLInputElement | null>(null);
|
||||
|
||||
const clearPendingUploadIcon = React.useCallback(() => {
|
||||
setPendingUploadIconFile(null);
|
||||
setPendingUploadIconPreviewUrl((previousUrl) => {
|
||||
if (previousUrl) {
|
||||
URL.revokeObjectURL(previousUrl);
|
||||
}
|
||||
return null;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const selectedProjectRef = React.useMemo(() => {
|
||||
if (!selectedProject) {
|
||||
return null;
|
||||
@@ -65,71 +78,139 @@ export const ProjectsPage: React.FC = () => {
|
||||
setIcon(selectedProject.icon ?? null);
|
||||
setColor(selectedProject.color ?? null);
|
||||
setIconBackground(selectedProject.iconBackground ?? null);
|
||||
setPendingRemoveImageIcon(false);
|
||||
clearPendingUploadIcon();
|
||||
setPreviewImageFailed(false);
|
||||
}, [selectedProject]);
|
||||
}, [selectedProject, clearPendingUploadIcon]);
|
||||
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
clearPendingUploadIcon();
|
||||
};
|
||||
}, [clearPendingUploadIcon]);
|
||||
|
||||
const hasChanges = Boolean(selectedProject) && (
|
||||
name.trim() !== (selectedProject?.label ?? '').trim()
|
||||
|| icon !== (selectedProject?.icon ?? null)
|
||||
|| color !== (selectedProject?.color ?? null)
|
||||
|| iconBackground !== (selectedProject?.iconBackground ?? null)
|
||||
|| pendingRemoveImageIcon
|
||||
|| Boolean(pendingUploadIconFile)
|
||||
);
|
||||
|
||||
const handleSave = React.useCallback(() => {
|
||||
const handleSave = React.useCallback(async () => {
|
||||
if (!selectedProject) return;
|
||||
updateProjectMeta(selectedProject.id, { label: name.trim(), icon, color, iconBackground });
|
||||
}, [color, icon, iconBackground, name, selectedProject, updateProjectMeta]);
|
||||
|
||||
if (pendingUploadIconFile) {
|
||||
setIsUploadingIcon(true);
|
||||
const uploadResult = await uploadProjectIcon(selectedProject.id, pendingUploadIconFile);
|
||||
setIsUploadingIcon(false);
|
||||
if (!uploadResult.ok) {
|
||||
toast.error(uploadResult.error || 'Failed to upload project icon');
|
||||
return;
|
||||
}
|
||||
toast.success('Project icon updated');
|
||||
clearPendingUploadIcon();
|
||||
setPendingRemoveImageIcon(false);
|
||||
}
|
||||
|
||||
const willRemoveImageIcon = pendingRemoveImageIcon && Boolean(selectedProject.iconImage);
|
||||
|
||||
if (willRemoveImageIcon) {
|
||||
setIsRemovingCustomIcon(true);
|
||||
const removeResult = await removeProjectIcon(selectedProject.id);
|
||||
setIsRemovingCustomIcon(false);
|
||||
if (!removeResult.ok) {
|
||||
toast.error(removeResult.error || 'Failed to remove project icon');
|
||||
return;
|
||||
}
|
||||
toast.success('Project icon removed');
|
||||
setPendingRemoveImageIcon(false);
|
||||
setIconBackground(null);
|
||||
}
|
||||
|
||||
updateProjectMeta(selectedProject.id, {
|
||||
label: name.trim(),
|
||||
icon,
|
||||
color,
|
||||
iconBackground: willRemoveImageIcon ? null : iconBackground,
|
||||
});
|
||||
}, [
|
||||
color,
|
||||
icon,
|
||||
iconBackground,
|
||||
name,
|
||||
pendingUploadIconFile,
|
||||
pendingRemoveImageIcon,
|
||||
clearPendingUploadIcon,
|
||||
uploadProjectIcon,
|
||||
removeProjectIcon,
|
||||
selectedProject,
|
||||
updateProjectMeta,
|
||||
]);
|
||||
|
||||
const currentColorVar = color ? (COLOR_MAP[color] ?? null) : null;
|
||||
const hasImageIcon = Boolean(selectedProject?.iconImage);
|
||||
const hasStoredImageIcon = Boolean(selectedProject?.iconImage);
|
||||
const hasPendingUploadImageIcon = Boolean(pendingUploadIconFile && pendingUploadIconPreviewUrl);
|
||||
const hasCustomIcon = selectedProject?.iconImage?.source === 'custom';
|
||||
const iconPreviewUrl = selectedProject && hasImageIcon && !previewImageFailed
|
||||
? getProjectIconImageUrl(selectedProject)
|
||||
const effectiveHasImageIcon = (hasStoredImageIcon && !pendingRemoveImageIcon) || hasPendingUploadImageIcon;
|
||||
const hasRemovableImageIcon = effectiveHasImageIcon;
|
||||
const iconPreviewUrl = !previewImageFailed
|
||||
? (hasPendingUploadImageIcon
|
||||
? pendingUploadIconPreviewUrl
|
||||
: (selectedProject && hasStoredImageIcon && !pendingRemoveImageIcon
|
||||
? getProjectIconImageUrl(selectedProject)
|
||||
: null))
|
||||
: null;
|
||||
|
||||
const handleUploadIcon = React.useCallback(async (file: File | null) => {
|
||||
const handleUploadIcon = React.useCallback((file: File | null) => {
|
||||
if (!selectedProject || !file || isUploadingIcon) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsUploadingIcon(true);
|
||||
void uploadProjectIcon(selectedProject.id, file)
|
||||
.then((result) => {
|
||||
if (!result.ok) {
|
||||
toast.error(result.error || 'Failed to upload project icon');
|
||||
return;
|
||||
}
|
||||
toast.success('Project icon updated');
|
||||
})
|
||||
.finally(() => {
|
||||
setIsUploadingIcon(false);
|
||||
});
|
||||
}, [isUploadingIcon, selectedProject, uploadProjectIcon]);
|
||||
setPendingRemoveImageIcon(false);
|
||||
setPreviewImageFailed(false);
|
||||
setPendingUploadIconFile(file);
|
||||
setPendingUploadIconPreviewUrl((previousUrl) => {
|
||||
if (previousUrl) {
|
||||
URL.revokeObjectURL(previousUrl);
|
||||
}
|
||||
return URL.createObjectURL(file);
|
||||
});
|
||||
}, [isUploadingIcon, selectedProject]);
|
||||
|
||||
const handleRemoveCustomIcon = React.useCallback(async () => {
|
||||
if (!selectedProject || !hasCustomIcon || isRemovingCustomIcon) {
|
||||
const handleRemoveImageIcon = React.useCallback(() => {
|
||||
if (!selectedProject || !hasRemovableImageIcon || isRemovingCustomIcon) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsRemovingCustomIcon(true);
|
||||
void removeProjectIcon(selectedProject.id)
|
||||
.then((result) => {
|
||||
if (!result.ok) {
|
||||
toast.error(result.error || 'Failed to remove project icon');
|
||||
return;
|
||||
}
|
||||
toast.success('Custom project icon removed');
|
||||
})
|
||||
.finally(() => {
|
||||
setIsRemovingCustomIcon(false);
|
||||
});
|
||||
}, [hasCustomIcon, isRemovingCustomIcon, removeProjectIcon, selectedProject]);
|
||||
if (hasPendingUploadImageIcon) {
|
||||
clearPendingUploadIcon();
|
||||
}
|
||||
if (hasStoredImageIcon) {
|
||||
setPendingRemoveImageIcon(true);
|
||||
} else {
|
||||
setPendingRemoveImageIcon(false);
|
||||
}
|
||||
setPreviewImageFailed(false);
|
||||
}, [
|
||||
clearPendingUploadIcon,
|
||||
hasPendingUploadImageIcon,
|
||||
hasRemovableImageIcon,
|
||||
hasStoredImageIcon,
|
||||
isRemovingCustomIcon,
|
||||
selectedProject,
|
||||
]);
|
||||
|
||||
const handleDiscoverIcon = React.useCallback(async () => {
|
||||
if (!selectedProject || isDiscoveringIcon) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearPendingUploadIcon();
|
||||
setPendingRemoveImageIcon(false);
|
||||
setPreviewImageFailed(false);
|
||||
|
||||
setIsDiscoveringIcon(true);
|
||||
void discoverProjectIcon(selectedProject.id)
|
||||
.then((result) => {
|
||||
@@ -146,7 +227,7 @@ export const ProjectsPage: React.FC = () => {
|
||||
.finally(() => {
|
||||
setIsDiscoveringIcon(false);
|
||||
});
|
||||
}, [discoverProjectIcon, isDiscoveringIcon, selectedProject]);
|
||||
}, [clearPendingUploadIcon, discoverProjectIcon, isDiscoveringIcon, selectedProject]);
|
||||
|
||||
if (!selectedProject) {
|
||||
return (
|
||||
@@ -279,7 +360,7 @@ export const ProjectsPage: React.FC = () => {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{hasImageIcon && iconPreviewUrl && (
|
||||
{effectiveHasImageIcon && iconPreviewUrl && (
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<span className="typography-meta text-muted-foreground">Preview</span>
|
||||
<span className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-border/60 bg-[var(--surface-elevated)] p-1">
|
||||
@@ -298,7 +379,7 @@ export const ProjectsPage: React.FC = () => {
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{hasImageIcon && (
|
||||
{effectiveHasImageIcon && (
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2">
|
||||
<input
|
||||
type="color"
|
||||
@@ -349,15 +430,26 @@ export const ProjectsPage: React.FC = () => {
|
||||
</ButtonSmall>
|
||||
</>
|
||||
)}
|
||||
{hasCustomIcon && (
|
||||
{hasRemovableImageIcon && (
|
||||
<ButtonSmall
|
||||
size="xs"
|
||||
className="!font-normal"
|
||||
variant="outline"
|
||||
onClick={() => void handleRemoveCustomIcon()}
|
||||
onClick={() => void handleRemoveImageIcon()}
|
||||
disabled={isRemovingCustomIcon}
|
||||
>
|
||||
{isRemovingCustomIcon ? 'Removing...' : 'Remove Custom Icon'}
|
||||
{isRemovingCustomIcon ? 'Removing...' : 'Remove Project Icon'}
|
||||
</ButtonSmall>
|
||||
)}
|
||||
{pendingRemoveImageIcon && (
|
||||
<ButtonSmall
|
||||
size="xs"
|
||||
className="!font-normal"
|
||||
variant="outline"
|
||||
onClick={() => setPendingRemoveImageIcon(false)}
|
||||
disabled={isRemovingCustomIcon}
|
||||
>
|
||||
Undo Remove
|
||||
</ButtonSmall>
|
||||
)}
|
||||
</div>
|
||||
@@ -368,7 +460,7 @@ export const ProjectsPage: React.FC = () => {
|
||||
<div className="mt-0.5 px-2 py-1">
|
||||
<ButtonSmall
|
||||
onClick={handleSave}
|
||||
disabled={!hasChanges || name.trim().length === 0}
|
||||
disabled={!hasChanges || name.trim().length === 0 || isUploadingIcon || isRemovingCustomIcon}
|
||||
size="xs"
|
||||
className="!font-normal"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user