@celljs/ta-web 0.0.0-stage → 4.6.0

package/src/browser/components/agent-settings-view.tsx

@@ -0,0 +1,196 @@
+import type { TaSettingSpec, TaSettingsScope, TaSettingsSnapshot } from '@celljs/ta-protocol';
+import { RotateCcw } from 'lucide-react';
+import * as React from 'react';
+import { useWorkbench } from '../hooks';
+import { type Translate, useT } from '../i18n/use-t';
+import { AgentSettingsUtil } from '../settings/agent-settings';
+import { MessageUtil } from '../util/message';
+import { IconButton } from './icon';
+import { Switch } from './settings-controls';
+
+// The settings of ta in pi's files, of the user or of a project, in the settings view.
+
+/** The settings of ta of the user and of the project in `cwd`, as the server reads them. */
+export function useAgentSettings(cwd: string | undefined) {
+    const [workbench, bench] = useWorkbench();
+    const online = workbench.status === 'online';
+    const [snapshot, setSnapshot] = React.useState<TaSettingsSnapshot>();
+    const [error, setError] = React.useState<string>();
+    React.useEffect(() => {
+        if (!online) {
+            return;
+        }
+        let live = true;
+        bench.settings.getSettings(cwd).then(
+            next => live && setSnapshot(next),
+            failure => live && setError(failure instanceof Error ? failure.message : String(failure)),
+        );
+        return () => {
+            live = false;
+        };
+    }, [online, bench, cwd]);
+    const update = React.useCallback(
+        (scope: TaSettingsScope, changes: Record<string, unknown>) => {
+            setError(undefined);
+            bench.settings
+                .updateSettings(scope, changes, cwd)
+                .then(setSnapshot, failure => setError(failure instanceof Error ? failure.message : String(failure)));
+        },
+        [bench, cwd],
+    );
+    return { online, snapshot, error, update };
+}
+
+function show(t: Translate, spec: TaSettingSpec, value: unknown): string {
+    if (typeof value === 'boolean') {
+        return t(value ? 'ta.settings.on' : 'ta.settings.off');
+    }
+    const label = typeof value === 'string' ? AgentSettingsUtil.valueLabel(spec.key, value) : undefined;
+    return label ? t(label) : String(value);
+}
+
+/** What the setting is when the file shown does not set it, in words. */
+function inheritedLabel(t: Translate, spec: TaSettingSpec, snapshot: TaSettingsSnapshot, scope: TaSettingsScope): string {
+    const { value, source } = AgentSettingsUtil.inherited(snapshot, scope, spec.key);
+    if (source === 'user') {
+        return t('ta.settings.fromUser', { value: show(t, spec, value) });
+    }
+    return source === 'default' ? t('ta.settings.default', { value: show(t, spec, value) }) : t('ta.settings.decides');
+}
+
+/** A field of text or a number, saved when it loses the focus or on Enter. */
+function TextSetting({
+    value,
+    placeholder,
+    numeric,
+    label,
+    disabled,
+    onCommit,
+}: {
+    value: unknown;
+    placeholder: string;
+    numeric: boolean;
+    label: string;
+    disabled: boolean;
+    onCommit(value: unknown): void;
+}) {
+    const shown = value === undefined ? '' : String(value);
+    const [text, setText] = React.useState(shown);
+    React.useEffect(() => setText(shown), [shown]);
+    const commit = () => {
+        const trimmed = text.trim();
+        if (trimmed === shown) {
+            return;
+        }
+        onCommit(trimmed === '' ? null : numeric ? Number(trimmed) : trimmed);
+    };
+    return (
+        <input
+            className="ta-input ta-setting-input"
+            type={numeric ? 'number' : 'text'}
+            min={numeric ? 0 : undefined}
+            step={numeric ? 1 : undefined}
+            value={text}
+            placeholder={placeholder}
+            aria-label={label}
+            disabled={disabled}
+            onChange={event => setText(event.target.value)}
+            onBlur={commit}
+            onKeyDown={event => event.key === 'Enter' && (event.target as HTMLInputElement).blur()}
+        />
+    );
+}
+
+export interface AgentControlProps {
+    spec: TaSettingSpec;
+    scope: TaSettingsScope;
+    snapshot: TaSettingsSnapshot;
+    disabled: boolean;
+    onChange(changes: Record<string, unknown>): void;
+}
+
+export function AgentControl({ spec, scope, snapshot, disabled, onChange }: AgentControlProps) {
+    const t = useT();
+    const label = t(AgentSettingsUtil.label(spec.key));
+    const own = snapshot[scope][spec.key];
+    const { value } = AgentSettingsUtil.effective(snapshot, scope, spec.key);
+    const set = (next: unknown) => onChange({ [spec.key]: next });
+    let control: React.ReactNode;
+    if (spec.type === 'boolean') {
+        control = <Switch label={label} checked={value === true} disabled={disabled} onChange={set} />;
+    } else if (spec.type === 'enum' || spec.type === 'model') {
+        const values = spec.type === 'model' ? [...snapshot.models] : [...(spec.values ?? [])];
+        if (typeof own === 'string' && !values.includes(own)) {
+            values.unshift(own);
+        }
+        control = (
+            <select
+                className="ta-input ta-select"
+                aria-label={label}
+                disabled={disabled}
+                value={typeof own === 'string' ? own : ''}
+                onChange={event => set(event.target.value || null)}
+            >
+                <option value="">{inheritedLabel(t, spec, snapshot, scope)}</option>
+                {values.map(option => (
+                    <option key={option} value={option}>
+                        {show(t, spec, option)}
+                    </option>
+                ))}
+            </select>
+        );
+    } else {
+        control = (
+            <TextSetting
+                value={own}
+                numeric={spec.type === 'number'}
+                label={label}
+                disabled={disabled}
+                placeholder={inheritedLabel(t, spec, snapshot, scope)}
+                onCommit={set}
+            />
+        );
+    }
+    return (
+        <>
+            {own !== undefined && (
+                <IconButton icon={RotateCcw} label={t('ta.settings.reset')} className="ta-setting-reset" disabled={disabled} onClick={() => set(null)} />
+            )}
+            {control}
+        </>
+    );
+}
+
+/** User or project, for the settings of ta, and the file they are kept in. */
+export function ScopeBar({ scope, onScope, snapshot }: { scope: TaSettingsScope; onScope(scope: TaSettingsScope): void; snapshot?: TaSettingsSnapshot }) {
+    const t = useT();
+    const project = snapshot
+        ? (snapshot.cwd
+              .split(/[\\/]+/)
+              .filter(Boolean)
+              .pop() ?? snapshot.cwd)
+        : '';
+    const file = snapshot ? MessageUtil.shortPath(scope === 'user' ? snapshot.userFile : snapshot.projectFile) : '';
+    return (
+        <div className="ta-settings-scope">
+            <div className="ta-settings-tabs" role="tablist" aria-label={t('ta.settings.agent')}>
+                {(['user', 'project'] as const).map(candidate => (
+                    <button
+                        key={candidate}
+                        type="button"
+                        role="tab"
+                        aria-selected={scope === candidate}
+                        className={`ta-settings-tab${scope === candidate ? ' ta-active' : ''}`}
+                        title={candidate === 'project' ? snapshot?.cwd : undefined}
+                        onClick={() => onScope(candidate)}
+                    >
+                        {candidate === 'user' ? t('ta.settings.scope.user') : t('ta.settings.scope.project', { name: project })}
+                    </button>
+                ))}
+            </div>
+            {snapshot && (
+                <span className="ta-settings-file">{t(scope === 'user' ? 'ta.settings.scopeHint.user' : 'ta.settings.scopeHint.project', { file })}</span>
+            )}
+        </div>
+    );
+}