@celljs/ta-web 0.0.0-stage → 4.6.1

package/src/browser/avatar/dino-motion.ts

@@ -0,0 +1,313 @@
+import { type Mood, type Pose, REST } from './dino-avatar';
+
+const TAU = Math.PI * 2;
+
+function smooth(x: number): number {
+    const t = Math.min(1, Math.max(0, x));
+    return t * t * (3 - 2 * t);
+}
+
+/** A value that eases between `keys` ([seconds, value]) and starts over every `period` seconds. */
+function track(t: number, period: number, keys: [number, number][]): number {
+    const at = ((t % period) + period) % period;
+    let i = 0;
+    while (i < keys.length - 1 && keys[i + 1][0] <= at) {
+        i++;
+    }
+    const [t0, v0] = keys[i];
+    const [t1, v1] = keys[i + 1] ?? [period + keys[0][0], keys[0][1]];
+    return v0 + (v1 - v0) * smooth((at - t0) / (t1 - t0));
+}
+
+/** A step of a walk or a run: the legs swing against each other, the foot swinging forward is lifted, the body rises over each step. */
+function gait(t: number, period: number, stride: number, lift: number, bounce: number): Partial<Pose> {
+    const phase = (t / period) * TAU;
+    const sin = Math.sin(phase);
+    const cos = Math.cos(phase);
+    return {
+        back: stride * sin,
+        front: -stride * sin,
+        backLift: lift * Math.max(0, -cos),
+        frontLift: lift * Math.max(0, cos),
+        y: -bounce * (0.5 + 0.5 * Math.cos(2 * phase)),
+        arm: -stride * 0.8 * sin,
+        // The tail follows the hips a little late, its tip later still, so it swings like a whip.
+        tail: 5 * Math.sin(phase - 0.7),
+        tip: 9 * Math.sin(phase - 1.5),
+        head: 2.5 * Math.cos(2 * phase - 0.6),
+    };
+}
+
+/** Looking about: the head turns, now and then to look at you, and the tail answers it a moment later. */
+function lookAbout(t: number): Partial<Pose> {
+    const head = track(t, 9, [
+        [0, 0],
+        [1.2, -7],
+        [2.6, -7],
+        [3.4, 3],
+        [5, 3],
+        [5.8, 0],
+    ]);
+    return {
+        head,
+        turn: track(t, 9, [
+            [0, 0],
+            [5.8, 0],
+            [6.4, 1],
+            [8, 1],
+            [8.6, 0],
+        ]),
+        tail: -track(t - 0.35, 9, [
+            [0, 0],
+            [1.2, -6],
+            [2.6, -6],
+            [3.4, 4],
+            [5, 4],
+            [5.8, 0],
+        ]),
+        tip: 3 * Math.sin((t / 3) * TAU - 1),
+        jaw: track(t, 9, [
+            [0, 0],
+            [3.6, 0],
+            [3.75, 16],
+            [3.9, 0],
+            [4.05, 10],
+            [4.25, 0],
+        ]),
+    };
+}
+
+function breathe(t: number, period = 3.6): Partial<Pose> {
+    const b = Math.sin((t / period) * TAU);
+    return { sx: 1 + 0.008 * b, sy: 1 - 0.008 * b };
+}
+
+/** How long a poke lasts, in seconds. */
+export const POKE = 1;
+
+/** How far the big dinosaur of an empty page walks to either side, in units of the logo. */
+const ROAM = 130;
+const WALK = 0.9;
+const SPEED = 68;
+/** Walking one way, then looking at you, then turning round. */
+const LEG = (2 * ROAM) / SPEED;
+const LOOK = 1.4;
+const TURN = 0.7;
+const ROUND = 2 * (LEG + LOOK + TURN);
+
+/**
+ * Turning round: it crouches, hops, and turns in the air. Its head turns to you first, so mid-turn it
+ * faces you, snout drawn in; it never goes thin as a card: at the top of the hop it is already round.
+ */
+function turning(k: number, from: number): Partial<Pose> {
+    const swing = smooth((k - 0.25) / 0.5);
+    const crouch = Math.sin(Math.min(1, k / 0.25) * Math.PI) + 0.6 * Math.sin(Math.min(1, Math.max(0, (k - 0.8) / 0.2)) * Math.PI);
+    const hop = Math.sin(Math.min(1, Math.max(0, (k - 0.2) / 0.6)) * Math.PI);
+    // How wide it is seen: full in profile, two thirds facing you; its side changes at the top of the hop.
+    const side = swing < 0.5 ? from : -from;
+    return {
+        face: side * (1 - 0.34 * Math.sin(swing * Math.PI)),
+        // It keeps looking at you all through the turn, and only then looks ahead again; mid-turn its chest faces you too.
+        turn: 1 - smooth((k - 0.75) / 0.25),
+        spin: (0.3 + 0.6 * Math.sin(swing * Math.PI)) * (1 - smooth((k - 0.75) / 0.25)),
+        y: -14 * hop + 4 * crouch,
+        sy: 1 - 0.07 * crouch + 0.04 * hop,
+        sx: 1 + 0.05 * crouch - 0.02 * hop,
+        back: 12 * hop,
+        front: -12 * hop,
+        backLift: 5 * hop,
+        frontLift: 5 * hop,
+        tail: 9 * hop,
+        tip: 14 * hop,
+        jaw: 5 * hop,
+        head: -3 * hop,
+    };
+}
+
+function roam(t: number): Partial<Pose> {
+    const at = ((t % ROUND) + ROUND) % ROUND;
+    const half = ROUND / 2;
+    const dir = at < half ? 1 : -1;
+    const local = at % half;
+    const start = -dir * ROAM;
+    if (local < LEG) {
+        return { ...gait(local, WALK, 17, 7, 3), x: start + dir * SPEED * local, face: dir, lean: 3 };
+    }
+    if (local < LEG + LOOK) {
+        // It stops at the end, looks at you, and opens its jaw a little.
+        const k = (local - LEG) / LOOK;
+        const look = smooth(k / 0.3);
+        return {
+            x: dir * ROAM,
+            face: dir,
+            turn: look,
+            spin: 0.3 * look,
+            head: -4 * look,
+            jaw: 10 * Math.sin(Math.min(1, Math.max(0, (k - 0.45) / 0.35)) * Math.PI),
+            tail: -4 * look,
+        };
+    }
+    return { x: dir * ROAM, ...turning((local - LEG - LOOK) / TURN, dir) };
+}
+
+/**
+ * How ta moves for each mood, as a pose at `t` seconds. Thinking it walks on the spot and working it
+ * runs; `roaming` (the big ta of an empty page) walks to and fro when idle.
+ */
+export namespace DinoMotion {
+    export function pose(mood: Mood, t: number, roaming = false): Pose {
+        return { ...REST, ...parts(mood, t, roaming) };
+    }
+
+    function parts(mood: Mood, t: number, roaming: boolean): Partial<Pose> {
+        switch (mood) {
+            case 'idle':
+                return roaming ? roam(t) : { ...breathe(t), ...lookAbout(t) };
+            case 'thinking':
+                return { ...gait(t, WALK, 17, 7, 3), lean: 3, turn: 0.15 + 0.15 * Math.sin((t / 4) * TAU), head: -3 + 2.5 * Math.cos((t / WALK) * 2 * TAU) };
+            case 'working': {
+                const run = gait(t, 0.5, 28, 13, 7);
+                const phase = (t / 0.5) * TAU;
+                return {
+                    ...run,
+                    lean: 11,
+                    head: 5 + 3 * Math.cos(2 * phase),
+                    tail: -10 + 6 * Math.sin(phase - 0.7),
+                    jaw: 9 + 5 * Math.sin(2 * phase),
+                    sy: 1 - 0.03 * Math.cos(2 * phase),
+                    sx: 1 + 0.02 * Math.cos(2 * phase),
+                };
+            }
+            case 'speaking': {
+                // The jaw moves like syllables: two rates that rarely meet.
+                const jaw = 4 + 7 * Math.abs(Math.sin(t * 7.3)) * (0.6 + 0.4 * Math.sin(t * 2.1));
+                return {
+                    ...breathe(t),
+                    jaw,
+                    head: -2 + 2 * Math.sin(t * 2.1),
+                    turn: 0.35,
+                    tail: 3 * Math.sin((t / 2.4) * TAU),
+                    tip: 5 * Math.sin((t / 2.4) * TAU - 1),
+                };
+            }
+            case 'listening':
+                return {
+                    ...breathe(t),
+                    head: -4 + 1.5 * Math.sin((t / 3) * TAU),
+                    turn: 0.75,
+                    tail: 3 * Math.sin((t / 3) * TAU - 1),
+                    tip: 5 * Math.sin((t / 3) * TAU - 1.8),
+                };
+            case 'attention': {
+                // A roar: it rears its head, opens its jaw wide and shakes; the tail lashes.
+                const roar = track(t, 2.6, [
+                    [0, 0],
+                    [0.35, 1],
+                    [1.5, 1],
+                    [1.9, 0],
+                ]);
+                const shake = roar * Math.sin(t * 40) * 1.2;
+                return {
+                    head: -13 * roar + shake,
+                    jaw: 30 * roar,
+                    lean: -4 * roar,
+                    tail: 9 * Math.sin((t / 0.8) * TAU),
+                    tip: 14 * Math.sin((t / 0.8) * TAU - 1.2),
+                    arm: -16 * roar,
+                };
+            }
+            case 'done': {
+                // A hop and a short roar, then it stands pleased with itself.
+                const hop = t < 0.5 ? Math.sin((t / 0.5) * Math.PI) : 0;
+                const roar = track(Math.min(t, 1.6), 3, [
+                    [0, 0],
+                    [0.45, 1],
+                    [1.1, 1],
+                    [1.6, 0],
+                ]);
+                return {
+                    ...breathe(t),
+                    y: -12 * hop,
+                    sy: 1 - 0.04 * hop,
+                    head: -9 * roar,
+                    jaw: 24 * roar,
+                    tail: 6 * Math.sin((t / 1.2) * TAU),
+                    tip: 9 * Math.sin((t / 1.2) * TAU - 1),
+                };
+            }
+            case 'sleeping':
+                return { ...breathe(t, 4.8), head: 9 + 1.5 * Math.sin((t / 4.8) * TAU), lean: -2, tail: 4, tip: 12 };
+        }
+    }
+
+    /**
+     * Where the pointer is from the head, in units of the drawing, and how much ta minds it (0 to 1):
+     * it follows it with its head, and turns to face you when the pointer is above, below or behind it.
+     */
+    export interface Look {
+        x: number;
+        y: number;
+        weight: number;
+    }
+
+    export function look(pose: Pose, { x, y, weight }: Look): Pose {
+        if (weight <= 0) {
+            return pose;
+        }
+        // In the drawing's own terms: ahead is the way it faces.
+        const ahead = x * Math.sign(pose.face || 1);
+        const distance = Math.hypot(ahead, y) || 1;
+        const pitch = (Math.atan2(y, Math.max(ahead, distance * 0.35)) * 180) / Math.PI;
+        const facing = 1 - smooth((ahead / distance + 0.1) / 0.8);
+        // Very close to its head, it bares its teeth a little.
+        const close = 1 - smooth((distance - 40) / 80);
+        return {
+            ...pose,
+            head: pose.head + weight * Math.max(-16, Math.min(12, pitch * 0.45)),
+            turn: Math.max(pose.turn, weight * 0.9 * facing),
+            jaw: pose.jaw + weight * 7 * close,
+            tail: pose.tail - weight * 5 * facing,
+        };
+    }
+
+    /** Poked (clicked), it hops and roars for a second; `t` is the time since, in seconds. */
+    export function poke(pose: Pose, t: number): Pose {
+        if (t < 0 || t >= POKE) {
+            return pose;
+        }
+        const k = t / POKE;
+        const roar = Math.sin(Math.min(1, k / 0.75) * Math.PI);
+        const hop = k < 0.3 ? Math.sin((k / 0.3) * Math.PI) : 0;
+        return {
+            ...pose,
+            // It roars to the side, where its open jaw shows, even if it was looking at you.
+            turn: pose.turn * (1 - 0.75 * roar),
+            y: pose.y - 12 * hop,
+            sy: pose.sy - 0.05 * hop,
+            head: pose.head - 11 * roar + roar * 1.2 * Math.sin(t * 42),
+            jaw: pose.jaw + 26 * roar,
+            arm: pose.arm - 18 * roar,
+            tail: pose.tail + 10 * Math.sin(k * Math.PI * 3) * (1 - k),
+            tip: pose.tip + 16 * Math.sin(k * Math.PI * 3 - 1) * (1 - k),
+        };
+    }
+
+    /** Blend from `a` to `b` by `k` (0 to 1), eased. */
+    export function blend(a: Pose, b: Pose, k: number): Pose {
+        if (k >= 1) {
+            return b;
+        }
+        const e = smooth(k);
+        const out = { ...b };
+        for (const key of Object.keys(b) as (keyof Pose)[]) {
+            out[key] = a[key] + (b[key] - a[key]) * e;
+        }
+        if (Math.sign(a.face) !== Math.sign(b.face)) {
+            // Facing the other way, it turns round as when it roams, never thin as a card.
+            out.face = (e < 0.5 ? a.face : b.face) * (1 - 0.34 * Math.sin(e * Math.PI));
+            out.turn = Math.max(out.turn, Math.sin(e * Math.PI));
+            out.spin = Math.max(out.spin, 0.9 * Math.sin(e * Math.PI));
+        }
+        return out;
+    }
+}

package/src/browser/chat/chat-protocol.ts

@@ -0,0 +1,47 @@
+import type { SessionStore } from '@celljs/ta-client';
+import type { ImageContent } from '@celljs/ta-protocol';
+
+export const TaChat = Symbol('TaChat');
+
+/** A new conversation not opened yet: its session opens with its first message. */
+export interface ChatDraft {
+    /** Where it will work. */
+    cwd: string;
+}
+
+export interface ChatState {
+    /** The conversation shown, once there is one. */
+    store?: SessionStore;
+    /** Shown instead of a conversation. */
+    draft?: ChatDraft;
+    error?: string;
+}
+
+/**
+ * The conversation the page shows, one of the open sessions of the server, or a new one. The conversations
+ * it opens have the tools of the web extensions; when a run ends, the web extensions load again, and so do
+ * the pi extensions of the conversation if a package changed.
+ */
+export interface TaChat {
+    readonly state: ChatState;
+    subscribe(listener: (state: ChatState) => void): () => void;
+    /** Unless one is shown: the conversation of before, if the server has it open or its file is there, else a new one. */
+    start(): Promise<void>;
+    /**
+     * Shows a new conversation, in the directory the last new one was in, else the server's (where the
+     * double works). Nothing opens on the server until its first message.
+     */
+    draft(): Promise<void>;
+    /** Moves the new conversation to another directory; the next new ones start there too. */
+    setDraftCwd(cwd: string): void;
+    /** Opens the session of the new conversation and sends its first message; fails as the opening fails. */
+    submit(message: string, images?: ImageContent[]): Promise<void>;
+    show(sessionId: string): Promise<void>;
+    /**
+     * Opens a conversation beside the one shown, which stays: from a file (a fork), else a new one in `cwd`.
+     * It has the tools of the web extensions, which its store runs; detach the store when done with it.
+     */
+    openBeside(options: { sessionFile?: string; cwd: string }): Promise<SessionStore>;
+    /** Closes an open session; its file stays. Closing the one shown shows another, or a new one. */
+    close(sessionId: string): Promise<void>;
+}

package/src/browser/chat/chat-view.tsx

@@ -0,0 +1,155 @@
+import { useInject } from '@celljs/react';
+import type { ImageContent } from '@celljs/ta-protocol';
+import * as React from 'react';
+import { Callout } from '../components/callout';
+import { Composer } from '../components/composer';
+import { DirectoryButton } from '../components/folder-picker';
+import { HeroCards, type HeroSuggestion } from '../components/hero-cards';
+import { IconButton, SidebarLeft } from '../components/icon';
+import { SessionView } from '../components/session-view';
+import { TaAvatar } from '../components/ta-avatar';
+import { WorkbenchToggle } from '../components/workbench-toggle';
+import { ExtensionBoundary } from '../extension/extension-view';
+import { WebLabelUtil, type WebWidgetEntry } from '../extension/web-extension-protocol';
+import { useNotices, useWorkbench } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { MessageUtil } from '../util/message';
+import { type ChatDraft, type ChatState, TaChat } from './chat-protocol';
+
+const SUGGESTIONS: HeroSuggestion[] = [
+    { picture: 'card', label: 'ta.chat.suggest.1.label', text: 'ta.chat.suggest.1' },
+    { picture: 'page', label: 'ta.chat.suggest.2.label', text: 'ta.chat.suggest.2' },
+    { picture: 'command', label: 'ta.chat.suggest.3.label', text: 'ta.chat.suggest.3' },
+];
+
+export function useChat(): [ChatState, TaChat] {
+    const chat = useInject<TaChat>(TaChat);
+    const state = React.useSyncExternalStore(
+        listener => chat.subscribe(listener),
+        () => chat.state,
+    );
+    return [state, chat];
+}
+
+/** What a web extension draws: in its own boundary, so that a failure stays in its place. */
+export function Widget({ widget }: { widget: WebWidgetEntry }) {
+    const Content = widget.component;
+    return (
+        <ExtensionBoundary name={WebLabelUtil.text(widget.title) || widget.id} resetKey={Content}>
+            <Content />
+        </ExtensionBoundary>
+    );
+}
+
+function Hero({ cwd, onPick }: { cwd: string; onPick(text: string): void }) {
+    const t = useT();
+    return (
+        <div className="ta-hero">
+            <TaAvatar size={88} className="ta-hero-face" roam />
+            <h1>{t('ta.chat.title')}</h1>
+            <p>{t('ta.chat.hint', { cwd: MessageUtil.basename(cwd) || cwd })}</p>
+            <HeroCards suggestions={SUGGESTIONS} onPick={onPick} />
+        </div>
+    );
+}
+
+interface DraftViewProps {
+    draft: ChatDraft;
+    menu: React.ReactNode;
+    aboveComposer: React.ReactNode;
+    belowComposer: React.ReactNode;
+}
+
+/** A new conversation: the message box opens it, in the directory shown beside its +, which may be changed. */
+function DraftView({ draft, menu, aboveComposer, belowComposer }: DraftViewProps) {
+    const t = useT();
+    const [, workbench] = useWorkbench();
+    const [, chat] = useChat();
+    const [, notices] = useNotices();
+    const fail = (cause: unknown) => notices.error(cause);
+    const submit = (message: string, images?: ImageContent[]) => chat.submit(message, images);
+    const list = React.useCallback((directory: string) => workbench.workspace.listDirectory('.', directory), [workbench]);
+    return (
+        <section className="ta-session">
+            <header className="ta-session-header">
+                {menu}
+                <div className="ta-session-title">
+                    <span className="ta-title">{t('ta.chat.new')}</span>
+                </div>
+                <WorkbenchToggle />
+            </header>
+            <div className="ta-scroll">
+                <div className="ta-thread">
+                    <Hero cwd={draft.cwd} onPick={text => void submit(text).catch(fail)} />
+                </div>
+            </div>
+            <div className="ta-bottom">
+                {aboveComposer}
+                <Composer
+                    server={workbench.server}
+                    workspace={workbench.workspace}
+                    working={false}
+                    commands={[]}
+                    cwd={draft.cwd || undefined}
+                    onSubmit={submit}
+                    onError={fail}
+                    beside={<DirectoryButton cwd={draft.cwd} list={list} onPick={cwd => chat.setDraftCwd(cwd)} />}
+                />
+                {belowComposer}
+            </div>
+        </section>
+    );
+}
+
+export interface ChatViewProps {
+    /** The widgets of web extensions around the message box. */
+    widgets: WebWidgetEntry[];
+    onMenu(): void;
+}
+
+/** The conversation shown, with the widgets of web extensions around its message box. */
+export function ChatView({ widgets, onMenu }: ChatViewProps) {
+    const t = useT();
+    const [{ sessions }, workbench] = useWorkbench();
+    const [{ store, draft, error }] = useChat();
+    const refresh = React.useCallback(() => void workbench.refresh().catch(() => undefined), [workbench]);
+    const menu = <IconButton icon={SidebarLeft} label={t('ta.sidebar')} className="ta-narrow-only" onClick={onMenu} />;
+    const around = (placement: WebWidgetEntry['placement']) =>
+        widgets.filter(widget => widget.placement === placement).map(widget => <Widget key={widget.id} widget={widget} />);
+    if (draft) {
+        return <DraftView draft={draft} menu={menu} aboveComposer={around('aboveEditor')} belowComposer={around('belowEditor')} />;
+    }
+    if (!store) {
+        return (
+            <>
+                <header className="ta-main-head ta-narrow-only">{menu}</header>
+                <div className="ta-empty">
+                    {error ? (
+                        <Callout level="error">{error}</Callout>
+                    ) : (
+                        <>
+                            <span className="ta-spinner" /> {t('ta.chat.opening')}
+                        </>
+                    )}
+                </div>
+            </>
+        );
+    }
+    const info = sessions.find(session => session.sessionId === store.sessionId);
+    return (
+        <SessionView
+            key={store.sessionId}
+            store={store}
+            server={workbench.server}
+            workspace={workbench.workspace}
+            info={info}
+            onClosed={refresh}
+            onActivity={refresh}
+            leading={menu}
+            trailing={<WorkbenchToggle />}
+            empty={<Hero cwd={info?.cwd ?? ''} onPick={text => store.prompt(text).catch(() => undefined)} />}
+            aboveComposer={around('aboveEditor')}
+            belowComposer={around('belowEditor')}
+        />
+    );
+}