@celljs/ta-web 0.0.0-stage → 4.6.0

package/src/browser/components/session-view.tsx

@@ -0,0 +1,153 @@
+import type { Notice, SessionStore } from '@celljs/ta-client';
+import type { TaServer, TaSessionInfo, TaWorkspaceServer } from '@celljs/ta-protocol';
+import * as React from 'react';
+import { useNotices, useOpenLink, useSessionState } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { MessageUtil } from '../util/message';
+import { Composer } from './composer';
+import type { ComposerBoxHandle } from './composer-box';
+import { useConversationScroll } from './conversation-scroll';
+import { DialogView } from './dialog-view';
+import { OpenLink } from './link';
+import { FileUrls } from './media';
+import { useMessageActions } from './message-actions';
+import { MessageActions } from './message-footer';
+import { ConversationSession, MessageList } from './message-list';
+import { useSessionSettings } from './session-settings';
+
+/** What the extensions of the session say with `notify` goes to the notices of the page; what was said before it opened stays quiet. */
+function useSessionNotices(notices: Notice[]) {
+    const [, center] = useNotices();
+    const seen = React.useRef<Set<string> | undefined>(undefined);
+    React.useEffect(() => {
+        if (!seen.current) {
+            seen.current = new Set(notices.map(notice => notice.id));
+            return;
+        }
+        for (const notice of notices) {
+            if (!seen.current.has(notice.id)) {
+                seen.current.add(notice.id);
+                center.notify(notice.message, { level: notice.type });
+            }
+        }
+    }, [notices, center]);
+}
+
+export interface SessionViewProps {
+    store: SessionStore;
+    server: TaServer;
+    workspace: TaWorkspaceServer;
+    info?: TaSessionInfo;
+    onClosed(): void;
+    /** A run started or settled: the list of sessions shows it. */
+    onActivity(): void;
+    /** At the start and the end of the bar on top. */
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    /** Instead of the hint of an empty conversation. */
+    empty?: React.ReactNode;
+    aboveComposer?: React.ReactNode;
+    belowComposer?: React.ReactNode;
+    /** In the box at the start: the message a fork left out. */
+    draftText?: string;
+    /** In a narrow column, as a tab of the workbench: no bar on top. */
+    compact?: boolean;
+}
+
+export function SessionView({
+    store,
+    server,
+    workspace,
+    info,
+    onClosed,
+    onActivity,
+    leading,
+    trailing,
+    empty,
+    aboveComposer,
+    belowComposer,
+    draftText,
+    compact = false,
+}: SessionViewProps) {
+    const t = useT();
+    const state = useSessionState(store);
+    const [, notices] = useNotices();
+    const asked = React.useMemo(() => state.messages.filter(message => message.role === 'user').length, [state.messages]);
+    const scroller = useConversationScroll(asked);
+    const fail = (cause: unknown) => notices.error(cause);
+    useSessionNotices(state.notices);
+    const { settings, actions } = useSessionSettings(server, store.sessionId, state.working, t, fail);
+    const composer = React.useRef<ComposerBoxHandle>(null);
+    const cwd = info?.cwd;
+    const messageActions = useMessageActions(store, server, state.working, cwd, composer, onActivity);
+    React.useEffect(() => {
+        if (draftText) {
+            composer.current?.setText(draftText);
+        }
+    }, [draftText]);
+    const fileUrl = React.useCallback((path: string) => workspace.fileUrl(path, cwd), [workspace, cwd]);
+    const openLink = useOpenLink(cwd);
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: runs when a run starts or settles
+    React.useEffect(() => onActivity(), [state.working, onActivity]);
+
+    React.useEffect(() => {
+        if (state.closed) {
+            onClosed();
+        }
+    }, [state.closed, onClosed]);
+
+    const statuses = Object.values(state.status);
+    const dialog = state.pendingUi[0];
+    const title = info?.sessionName || (info ? MessageUtil.basename(info.cwd) : t('ta.session.title'));
+
+    return (
+        <section className={`ta-session ${compact ? 'ta-session-compact' : ''}`}>
+            {!compact && (
+                <header className="ta-session-header">
+                    {leading}
+                    <div className="ta-session-title">
+                        <span className="ta-title">{title}</span>
+                        {info && (
+                            <span className="ta-muted ta-path" title={info.cwd}>
+                                {MessageUtil.shortPath(info.cwd)}
+                            </span>
+                        )}
+                    </div>
+                    {trailing}
+                </header>
+            )}
+            <div className="ta-scroll" ref={scroller}>
+                <div className="ta-thread">
+                    {state.messages.length === 0 && (empty ?? <div className="ta-empty">{t('ta.session.empty', { cwd: info?.cwd ?? '.' })}</div>)}
+                    <ConversationSession.Provider value={info}>
+                        <MessageActions.Provider value={messageActions}>
+                            <FileUrls.Provider value={fileUrl}>
+                                <OpenLink.Provider value={openLink}>
+                                    <MessageList state={state} />
+                                </OpenLink.Provider>
+                            </FileUrls.Provider>
+                        </MessageActions.Provider>
+                    </ConversationSession.Provider>
+                </div>
+            </div>
+            <div className="ta-bottom">
+                {dialog && <DialogView key={dialog.id} request={dialog} respond={response => store.respondUi(response).catch(fail)} />}
+                {aboveComposer}
+                <Composer
+                    ref={composer}
+                    store={store}
+                    server={server}
+                    workspace={workspace}
+                    working={state.working}
+                    commands={settings.commands}
+                    cwd={info?.cwd}
+                    actions={[actions]}
+                    onError={fail}
+                />
+                {belowComposer}
+                {statuses.length > 0 && <div className="ta-statusline">{statuses.join(' · ')}</div>}
+            </div>
+        </section>
+    );
+}

package/src/browser/components/settings-controls.tsx

@@ -0,0 +1,94 @@
+import type { LucideIcon } from 'lucide-react';
+import * as React from 'react';
+import type { MessageId } from '../i18n/messages';
+import { useT } from '../i18n/use-t';
+import { ShortcutUtil } from '../settings/agent-settings';
+import { Icon } from './icon';
+
+// The controls of the settings view: rows, switches, segmented choices, fields.
+
+export interface Choice<T> {
+    value: T;
+    icon?: LucideIcon;
+    label: MessageId | string;
+}
+
+/** One row of a section: what the search looks in, and what it draws. */
+export interface RowEntry {
+    key: string;
+    search: string;
+    node: React.ReactNode;
+}
+
+export function Keys({ keys }: { keys: string }) {
+    return (
+        <span className="ta-keys">
+            {ShortcutUtil.keys(keys).map((key, index) => (
+                <kbd key={index} className="ta-kbd">
+                    {key}
+                </kbd>
+            ))}
+        </span>
+    );
+}
+
+export function Segmented<T extends string>({ value, choices, onChange, label }: { value: T; choices: Choice<T>[]; onChange(value: T): void; label: string }) {
+    const t = useT();
+    return (
+        <fieldset className="ta-segmented" aria-label={label}>
+            {choices.map(choice => (
+                <button
+                    key={choice.value}
+                    type="button"
+                    aria-pressed={choice.value === value}
+                    className={choice.value === value ? 'ta-on' : ''}
+                    onClick={() => onChange(choice.value)}
+                >
+                    {choice.icon && <Icon icon={choice.icon} size={15} />}
+                    {choice.label.startsWith('ta.') ? t(choice.label as MessageId) : choice.label}
+                </button>
+            ))}
+        </fieldset>
+    );
+}
+
+export function Switch({ checked, onChange, label, disabled }: { checked: boolean; onChange(checked: boolean): void; label: string; disabled?: boolean }) {
+    return (
+        <input
+            type="checkbox"
+            role="switch"
+            className="ta-switch"
+            aria-label={label}
+            aria-checked={checked}
+            checked={checked}
+            disabled={disabled}
+            onChange={event => onChange(event.target.checked)}
+        />
+    );
+}
+
+export interface RowProps {
+    label: string;
+    description?: React.ReactNode;
+    stacked?: boolean;
+    /** Set in the file shown: a bar on its left, as in an IDE. */
+    modified?: boolean;
+    children?: React.ReactNode;
+}
+
+/** Label and description on the left, the control on the right; stacked when the control is wide. */
+export function Row({ label, description, stacked, modified, children }: RowProps) {
+    return (
+        <div className={`ta-setting-row${stacked ? ' ta-stacked' : ''}${modified ? ' ta-modified' : ''}`}>
+            <div className="ta-setting-text">
+                <span className="ta-setting-label">{label}</span>
+                {description && <span className="ta-setting-description">{description}</span>}
+            </div>
+            {children && <div className="ta-setting-control">{children}</div>}
+        </div>
+    );
+}
+
+export function row(key: string, search: (string | undefined)[], node: React.ReactNode): RowEntry {
+    return { key, search: search.filter(Boolean).join(' '), node };
+}