Skip to content

#114: Bound high-risk dialogs and folder uploads #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
justsml wants to merge 1 commit into
base: main
Choose a base branch
from
Open

#114: Bound high-risk dialogs and folder uploads #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 37 additions & 18 deletions src/components/AgentModelsDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,12 @@ import {
serializeAgentConfig,
} from "../lib/models/agent-config-serialization";
import { formatCompactModelId, formatModelDisplay } from "../lib/models/display";
import { type ModelOverrideMap, type ModelOverrideTarget } from "../lib/models/overrides";
import type { ModelOverrideMap, ModelOverrideTarget } from "../lib/models/overrides";
import {
DismissGuardNotice,
handleRovingFocusKeyDown,
useAccessibleDialog,
} from "./accessibility/AccessibleDialog";
import type { ComposerModelOption } from "./ChatComposer";
import { CopyRawButton } from "./chat/CopyRawButton";
import type {
Expand Down Expand Up @@ -161,18 +166,13 @@ export function AgentModelsDialog({
}
}, [open]);

useEffect(() => {
if (!open) {
return;
}
const handler = (event: KeyboardEvent) => {
if (event.key === "Escape") {
onClose();
}
};
window.addEventListener("keydown", handler);
return () => window.removeEventListener("keydown", handler);
}, [open, onClose]);
const accessibleDialog = useAccessibleDialog({
open,
onClose,
hasUnsavedChanges: Boolean(
pasteValue.trim() || profileName.trim() || profileDescription.trim(),
),
});

const serialized = useMemo(
() =>
Expand Down Expand Up @@ -329,13 +329,17 @@ export function AgentModelsDialog({
);

return (
<div className="agent-models-backdrop" role="presentation" onMouseDown={onClose}>
<div className="agent-models-backdrop">
<section
ref={accessibleDialog.dialogRef}
className="agent-models-dialog"
role="dialog"
aria-modal="true"
aria-labelledby="agent-models-title"
onMouseDown={(event) => event.stopPropagation()}
aria-describedby={
accessibleDialog.showDismissGuard ? "agent-models-dismiss-warning" : undefined
}
tabIndex={-1}
>
<header className="agent-models-header">
<span className="agent-models-icon" aria-hidden="true">
Expand All @@ -352,28 +356,33 @@ export function AgentModelsDialog({
className="icon-button"
type="button"
aria-label="Close agent models"
onClick={onClose}
data-dialog-initial-focus
onClick={accessibleDialog.requestClose}
>
<X size={18} />
</button>
</header>

<nav className="agent-models-tabs" role="tablist" aria-label="Agent models sections">
<div className="agent-models-tabs" role="tablist" aria-label="Agent models sections">
<button
type="button"
role="tab"
aria-selected={tab === "agents"}
tabIndex={tab === "agents" ? 0 : -1}
className={tab === "agents" ? "is-active" : ""}
onClick={() => setTab("agents")}
onKeyDown={(event) => handleRovingFocusKeyDown(event, "tab")}
>
<Sparkles size={15} /> Agents
</button>
<button
type="button"
role="tab"
aria-selected={tab === "profiles"}
tabIndex={tab === "profiles" ? 0 : -1}
className={tab === "profiles" ? "is-active" : ""}
onClick={() => setTab("profiles")}
onKeyDown={(event) => handleRovingFocusKeyDown(event, "tab")}
>
<Save size={15} /> Profiles
{profiles.length > 0 ? (
Expand All @@ -384,15 +393,25 @@ export function AgentModelsDialog({
type="button"
role="tab"
aria-selected={tab === "history"}
tabIndex={tab === "history" ? 0 : -1}
className={tab === "history" ? "is-active" : ""}
onClick={() => setTab("history")}
onKeyDown={(event) => handleRovingFocusKeyDown(event, "tab")}
>
<History size={15} /> History
{revisions.length > 0 ? (
<span className="agent-models-tab-count">{revisions.length}</span>
) : null}
</button>
</nav>
</div>

<div id="agent-models-dismiss-warning">
<DismissGuardNotice
open={accessibleDialog.showDismissGuard}
onKeepEditing={accessibleDialog.keepEditing}
onDiscard={accessibleDialog.discardAndClose}
/>
</div>

{tab === "agents" ? (
<>
Expand Down
39 changes: 34 additions & 5 deletions src/components/AppConfigDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@ import {
} from "lucide-react";
import { useEffect, useMemo, useState } from "react";

import {
DismissGuardNotice,
handleRovingFocusKeyDown,
useAccessibleDialog,
} from "./accessibility/AccessibleDialog";
import { readJson } from "./chat/messageUtils";

type TargetKind = "storage" | "vector" | "llm" | "observability" | "compute";
Expand Down Expand Up @@ -163,6 +168,15 @@ export function AppConfigDialog({
return draft.observability.targets;
}, [draft, tab]);

const configDirty =
Boolean(importText.trim()) ||
(draft !== null && view !== null && JSON.stringify(draft) !== JSON.stringify(view.config));
const accessibleDialog = useAccessibleDialog({
open,
onClose,
hasUnsavedChanges: configDirty,
});

if (!open) return null;

const updateTarget = (targetId: string, patch: Partial<ProviderTarget>) => {
Expand Down Expand Up @@ -402,13 +416,17 @@ export function AppConfigDialog({
const registry = view?.registry[tab] ?? [];

return (
<div className="app-config-backdrop" role="presentation" onMouseDown={onClose}>
<div className="app-config-backdrop">
<section
ref={accessibleDialog.dialogRef}
className="app-config-dialog"
role="dialog"
aria-modal="true"
aria-labelledby="app-config-title"
onMouseDown={(event) => event.stopPropagation()}
aria-describedby={
accessibleDialog.showDismissGuard ? "app-config-dismiss-warning" : undefined
}
tabIndex={-1}
>
<header className="app-config-header">
<span className="app-config-icon">
Expand All @@ -425,7 +443,8 @@ export function AppConfigDialog({
className="icon-button"
type="button"
aria-label="Close app configuration"
onClick={onClose}
data-dialog-initial-focus
onClick={accessibleDialog.requestClose}
>
<X size={18} />
</button>
Expand Down Expand Up @@ -453,7 +472,7 @@ export function AppConfigDialog({
</div>
) : null}

<nav className="app-config-tabs" role="tablist">
<div className="app-config-tabs" role="tablist" aria-label="App configuration sections">
{TABS.map((item) => {
const Icon = item.icon;
const count =
Expand All @@ -470,14 +489,24 @@ export function AppConfigDialog({
type="button"
role="tab"
aria-selected={tab === item.id}
tabIndex={tab === item.id ? 0 : -1}
className={tab === item.id ? "is-active" : ""}
onClick={() => setTab(item.id)}
onKeyDown={(event) => handleRovingFocusKeyDown(event, "tab")}
>
<Icon size={15} /> {item.label} <span>{count ?? 0}</span>
</button>
);
})}
</nav>
</div>

<div id="app-config-dismiss-warning">
<DismissGuardNotice
open={accessibleDialog.showDismissGuard}
onKeepEditing={accessibleDialog.keepEditing}
onDiscard={accessibleDialog.discardAndClose}
/>
</div>

<div className="app-config-toolbar">
<textarea
Expand Down
Loading
Loading