@celljs/ta-web 0.0.0-stage → 4.6.1

package/src/browser/chat/chat.spec.ts

@@ -0,0 +1,194 @@
+import { beforeEach, describe, expect, it } from 'bun:test';
+import type { SessionState } from '@celljs/ta-client';
+import type { TaOpenSessionOptions, TaSessionInfo } from '@celljs/ta-protocol';
+import type { WebTool } from '../extension/web-extension-api';
+import { TaChatImpl } from './chat';
+
+class FakeStore {
+    readonly prompts: unknown[][] = [];
+    state = { messages: [] as unknown[], tools: {} as SessionState['tools'], working: false, closed: false };
+    attached = false;
+    readonly listeners = new Set<(state: FakeStore['state']) => void>();
+    constructor(
+        readonly sessionId: string,
+        readonly options: unknown,
+    ) {}
+    async attach() {
+        this.attached = true;
+    }
+    async detach() {
+        this.attached = false;
+    }
+    subscribe(listener: (state: FakeStore['state']) => void) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    onEvent() {
+        return () => undefined;
+    }
+    async prompt(...args: unknown[]) {
+        this.prompts.push(args);
+    }
+    set(change: Partial<FakeStore['state']>) {
+        this.state = { ...this.state, ...change };
+        for (const listener of this.listeners) {
+            listener(this.state);
+        }
+    }
+}
+
+function tool(name: string): WebTool {
+    return { name, description: name, parameters: { type: 'object' }, execute: () => name };
+}
+
+function setup() {
+    const storage = new Map<string, string>();
+    let next = 0;
+    const sessions: TaSessionInfo[] = [];
+    const opened: Partial<TaOpenSessionOptions>[] = [];
+    const reloaded: string[] = [];
+    const server = {
+        async openSession(options: TaOpenSessionOptions) {
+            opened.push(options);
+            const sessionId = `s${++next}`;
+            sessions.unshift({ sessionId, cwd: options.cwd, sessionFile: options.sessionFile ?? `/${sessionId}.jsonl`, createdAt: next } as TaSessionInfo);
+            return { sessionId };
+        },
+        async closeSession(sessionId: string) {
+            sessions.splice(
+                sessions.findIndex(session => session.sessionId === sessionId),
+                1,
+            );
+        },
+        async getState(sessionId: string) {
+            return { sessionFile: sessions.find(session => session.sessionId === sessionId)?.sessionFile };
+        },
+        async reload(sessionId: string) {
+            reloaded.push(sessionId);
+        },
+    };
+    const stores: FakeStore[] = [];
+    const workbench = {
+        server,
+        state: { server: { cwd: '/home' }, sessions: [] as TaSessionInfo[] },
+        async refresh() {
+            this.state = { ...this.state, sessions: [...sessions] };
+        },
+        createStore(sessionId: string, options: unknown) {
+            const store = new FakeStore(sessionId, options);
+            stores.push(store);
+            return store;
+        },
+        subscribe: () => () => undefined,
+    };
+    const extensions = {
+        state: { tools: [tool('add_note')] },
+        changed: false,
+        connected: [] as ({ cwd?: string; sessionId?: string } | undefined)[],
+        async refresh() {
+            return this.changed;
+        },
+        connect(conversation?: { cwd?: string; sessionId?: string }) {
+            this.connected.push(conversation && { cwd: conversation.cwd, sessionId: conversation.sessionId });
+        },
+        emit() {},
+    };
+    const persisted = {
+        get: (spec: { key: string; initial: string }) => storage.get(`ta.${spec.key}`) ?? spec.initial,
+        load: async (spec: { key: string; initial: string }) => storage.get(`ta.${spec.key}`) ?? spec.initial,
+        set: (spec: { key: string }, value: string) => void storage.set(`ta.${spec.key}`, value),
+    };
+    const chat = new TaChatImpl();
+    Object.assign(chat, { workbench, extensions, persisted });
+    return { chat, opened, stores, sessions, extensions, reloaded, storage };
+}
+
+describe('TaChatImpl', () => {
+    let env: ReturnType<typeof setup>;
+    beforeEach(() => {
+        env = setup();
+    });
+
+    it('starts with a new conversation that opens with its first message, with the tools of the web extensions', async () => {
+        await env.chat.start();
+        expect(env.opened).toEqual([]);
+        expect(env.chat.state.draft).toEqual({ cwd: '/home' });
+        await env.chat.submit('hello');
+        expect(env.opened).toMatchObject([{ cwd: '/home', clientTools: [{ name: 'add_note' }] }]);
+        expect(env.chat.state).toMatchObject({ draft: undefined, store: { sessionId: 's1' } });
+        expect(env.stores[0].attached).toBe(true);
+        expect(env.stores[0].prompts).toEqual([['hello', { images: undefined }]]);
+    });
+
+    it('opens a fork beside the conversation shown, which stays, with the tools of the web extensions', async () => {
+        await env.chat.start();
+        await env.chat.submit('one');
+        const store = await env.chat.openBeside({ sessionFile: '/fork.jsonl', cwd: '/work' });
+        expect(env.opened.at(-1)).toMatchObject({ sessionFile: '/fork.jsonl', cwd: '/work', clientTools: [{ name: 'add_note' }] });
+        expect(store.sessionId).toBe('s2');
+        expect((store as unknown as FakeStore).attached).toBe(true);
+        expect(env.chat.state.store?.sessionId).toBe('s1');
+    });
+
+    it('shows the conversation of before after a reload of the page', async () => {
+        env.storage.set('ta.chat.file', '/s1.jsonl');
+        await env.chat.start();
+        expect(env.opened).toMatchObject([{ sessionFile: '/s1.jsonl' }]);
+        expect(env.chat.state.store?.sessionId).toBe('s1');
+    });
+
+    it('opens a new conversation in the directory of the last one, and shows a new one when the last open closes', async () => {
+        await env.chat.start();
+        env.chat.setDraftCwd('/work');
+        await env.chat.submit('one');
+        expect(env.opened.at(-1)).toMatchObject({ cwd: '/work' });
+        await env.chat.draft();
+        expect(env.chat.state).toMatchObject({ store: undefined, draft: { cwd: '/work' } });
+        expect(env.stores[0].attached).toBe(false);
+        await env.chat.show('s1');
+        expect(env.chat.state).toMatchObject({ draft: undefined, store: { sessionId: 's1' } });
+        await env.chat.close('s1');
+        expect(env.chat.state).toMatchObject({ store: undefined, draft: { cwd: '/work' } });
+        expect(env.sessions).toEqual([]);
+    });
+
+    it('gives web extensions the directory of the new conversation, and that of a session opened elsewhere', async () => {
+        await env.chat.start();
+        expect(env.extensions.connected.at(-1)).toEqual({ cwd: '/home', sessionId: undefined });
+        env.chat.setDraftCwd('/work');
+        expect(env.extensions.connected.at(-1)).toEqual({ cwd: '/work', sessionId: undefined });
+        // An agent's session, opened by a web extension: the page did not list it yet.
+        await (env.chat as any).workbench.server.openSession({ cwd: '/agent' });
+        await env.chat.show('s1');
+        expect(env.extensions.connected.at(-1)).toEqual({ cwd: '/agent', sessionId: 's1' });
+    });
+
+    it('keeps the new conversation when its session cannot open', async () => {
+        await env.chat.start();
+        Object.assign(env.chat, { workbench: { ...(env.chat as any).workbench, server: { openSession: () => Promise.reject(new Error('locked')) } } });
+        await expect(env.chat.submit('hello')).rejects.toThrow('locked');
+        expect(env.chat.state.draft).toEqual({ cwd: '/home' });
+    });
+
+    it('opens the conversation again with new tools, and reloads it when a package changed', async () => {
+        await env.chat.start();
+        await env.chat.submit('hello');
+        const [first] = env.stores;
+        first.set({ working: true });
+        first.set({ working: false });
+        await Promise.resolve();
+        expect(env.reloaded).toEqual([]);
+        env.extensions.changed = true;
+        first.set({ working: true });
+        first.set({ working: false });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(env.reloaded).toEqual(['s1']);
+        env.extensions.state.tools = [tool('add_note'), tool('timer')];
+        first.set({ working: true });
+        first.set({ working: false });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(env.opened.at(-1)).toMatchObject({ sessionFile: '/s1.jsonl', clientTools: [{ name: 'add_note' }, { name: 'timer' }] });
+        expect(env.chat.state.store?.sessionId).toBe('s2');
+        expect(first.attached).toBe(false);
+    });
+});

package/src/browser/chat/chat.ts

@@ -0,0 +1,335 @@
+import { Autowired, Component } from '@celljs/core';
+import type { ClientTool, SessionState, SessionStore } from '@celljs/ta-client';
+import type { ImageContent, TaEvent, TaOpenSessionOptions } from '@celljs/ta-protocol';
+import type { WebTool } from '../extension/web-extension-api';
+import { TaWebExtensions } from '../extension/web-extension-protocol';
+import { TaNotices } from '../notices/notices-protocol';
+import { type StateSpec, StateUtil, TaState } from '../state/state-protocol';
+import { TaWorkbench } from '../workbench-protocol';
+import { type ChatState, TaChat } from './chat-protocol';
+
+/** The file of the conversation shown last, in any browser: the page opens it again. */
+const FILE: StateSpec<string> = { key: 'chat.file', tier: 'user', initial: '', parse: StateUtil.string };
+/** The directory of the last new conversation. */
+const CWD: StateSpec<string> = { key: 'chat.cwd', tier: 'user', initial: '', parse: StateUtil.string };
+/** A file in a directory of packages: `extensions/<name>/...`, of the user or a project. */
+const PACKAGE_FILE = /(^|[\\/])extensions[\\/][^\\/]+[\\/]/;
+
+export namespace ChatUtil {
+    export function toolNames(tools: WebTool[]): string {
+        return tools
+            .map(tool => tool.name)
+            .sort()
+            .join(',');
+    }
+
+    /** Ids of the runs of `write` and `edit` in a directory of packages that are not in `seen`. */
+    export function packageEdits(state: SessionState, seen: Set<string>): string[] {
+        return Object.entries(state.tools)
+            .filter(([id, run]) => {
+                const path = (run.args as { path?: unknown } | undefined)?.path;
+                return !seen.has(id) && (run.toolName === 'write' || run.toolName === 'edit') && typeof path === 'string' && PACKAGE_FILE.test(path);
+            })
+            .map(([id]) => id);
+    }
+
+    export function message(error: unknown): string {
+        return error instanceof Error ? error.message : String(error);
+    }
+}
+
+@Component(TaChat)
+export class TaChatImpl implements TaChat {
+    @Autowired(TaWorkbench)
+    protected readonly workbench: TaWorkbench;
+
+    @Autowired(TaWebExtensions)
+    protected readonly extensions: TaWebExtensions;
+
+    @Autowired(TaNotices)
+    protected readonly notices: TaNotices;
+    @Autowired(TaState)
+    protected readonly persisted: TaState;
+
+    protected current: ChatState = {};
+    protected readonly listeners = new Set<(state: ChatState) => void>();
+    /** One change of the conversation shown at a time. */
+    protected queue: Promise<void> = Promise.resolve();
+    /** The tools of the conversations this page opened, by session: only those are opened again when the tools change. */
+    protected readonly opened = new Map<string, string>();
+    protected readonly seenEdits = new Set<string>();
+    protected unfollow: (() => void)[] = [];
+    protected watching = false;
+    /** A web extension changed packages during a run: its end loads them again. */
+    protected reloadPending = false;
+
+    get state(): ChatState {
+        return this.current;
+    }
+
+    subscribe(listener: (state: ChatState) => void): () => void {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+
+    start(): Promise<void> {
+        return this.enqueue(async () => {
+            if (!this.watching) {
+                this.watching = true;
+                // Signed out, the conversation goes with its connection.
+                this.workbench.subscribe(state => state.status === 'signed-out' && this.current.store && this.leave());
+            }
+            if (this.current.store || this.current.draft) {
+                return;
+            }
+            await this.extensions.refresh();
+            await this.workbench.refresh();
+            const file = (await this.persisted.load(FILE)) || undefined;
+            const open = file && this.workbench.state.sessions.find(session => session.sessionFile === file);
+            const sessionId = open ? open.sessionId : file ? await this.open({ sessionFile: file }).catch(() => undefined) : undefined;
+            if (sessionId) {
+                await this.attach(sessionId);
+            } else {
+                this.showDraft();
+            }
+        });
+    }
+
+    draft(): Promise<void> {
+        return this.enqueue(async () => {
+            if (!this.current.draft) {
+                this.leave();
+                this.showDraft();
+            }
+        });
+    }
+
+    setDraftCwd(cwd: string): void {
+        if (this.current.draft) {
+            this.persisted.set(CWD, cwd);
+            this.update({ draft: { cwd } });
+            this.extensions.connect({ cwd });
+        }
+    }
+
+    submit(message: string, images?: ImageContent[]): Promise<void> {
+        const next = this.queue.then(async () => {
+            const { draft } = this.current;
+            if (!draft) {
+                return;
+            }
+            const sessionId = await this.open({ cwd: draft.cwd });
+            if (draft.cwd) {
+                this.persisted.set(CWD, draft.cwd);
+            }
+            await this.attach(sessionId);
+            await this.current.store?.prompt(message, { images });
+        });
+        this.queue = next.catch(() => undefined);
+        return next;
+    }
+
+    show(sessionId: string): Promise<void> {
+        return this.enqueue(async () => {
+            if (this.current.store?.sessionId !== sessionId) {
+                await this.attach(sessionId);
+            }
+        });
+    }
+
+    async openBeside(options: { sessionFile?: string; cwd: string }): Promise<SessionStore> {
+        const sessionId = await this.open(options);
+        const store = this.workbench.createStore(sessionId, { clientTools: this.extensions.state.tools.map(tool => this.clientTool(tool.name)) });
+        await store.attach();
+        await this.workbench.refresh();
+        return store;
+    }
+
+    close(sessionId: string): Promise<void> {
+        return this.enqueue(async () => {
+            await this.workbench.server.closeSession(sessionId);
+            this.opened.delete(sessionId);
+            if (this.current.store?.sessionId === sessionId) {
+                await this.replace();
+            } else {
+                await this.workbench.refresh();
+            }
+        });
+    }
+
+    protected enqueue(change: () => Promise<void>): Promise<void> {
+        // With a conversation shown, a failure is a notice; with none, the page says it in its place.
+        const next = this.queue
+            .then(change)
+            .catch(error => (this.current.store || this.current.draft ? void this.notices.error(error) : this.update({ error: ChatUtil.message(error) })));
+        this.queue = next;
+        return next;
+    }
+
+    /** Opens a session with the tools of the web extensions of now. */
+    protected async open(options: Partial<TaOpenSessionOptions>): Promise<string> {
+        const tools = this.extensions.state.tools;
+        const { sessionId } = await this.workbench.server.openSession({
+            ...options,
+            cwd: options.cwd?.trim() || this.workbench.state.server?.cwd || '.',
+            clientTools: tools.map(({ name, description, parameters }) => ({ name, description, parameters })),
+        });
+        this.opened.set(sessionId, ChatUtil.toolNames(tools));
+        return sessionId;
+    }
+
+    /** Follows a session, running the web tools it asks for. */
+    protected async attach(sessionId: string): Promise<void> {
+        this.leave();
+        const store = this.workbench.createStore(sessionId, { clientTools: this.extensions.state.tools.map(tool => this.clientTool(tool.name)) });
+        await store.attach();
+        this.seenEdits.clear();
+        for (const id of Object.keys(store.state.tools)) {
+            this.seenEdits.add(id);
+        }
+        // The list has the sessions opened since, as those of agents: web extensions get the directory of this one.
+        await this.workbench.refresh();
+        this.follow(store);
+        this.remember(this.workbench.state.sessions.find(session => session.sessionId === sessionId)?.sessionFile);
+    }
+
+    /** The newest other open session, or a new conversation. */
+    protected async replace(): Promise<void> {
+        this.leave();
+        await this.workbench.refresh();
+        const [next] = this.workbench.state.sessions;
+        if (next) {
+            await this.attach(next.sessionId);
+        } else {
+            this.showDraft();
+        }
+    }
+
+    protected showDraft(): void {
+        const cwd = this.persisted.get(CWD) || this.workbench.state.server?.cwd || '';
+        this.update({ draft: { cwd }, error: undefined });
+        this.extensions.connect(cwd ? { cwd } : undefined);
+    }
+
+    /** Runs the web tool of the name that is loaded when the model calls it: a changed one runs as it is now. */
+    protected clientTool(name: string): ClientTool {
+        const tool = () => this.extensions.state.tools.find(candidate => candidate.name === name);
+        const { description = '', parameters = {} } = tool() ?? {};
+        return {
+            definition: { name, description, parameters },
+            run: async (input, request) => {
+                const current = tool();
+                if (!current) {
+                    throw new Error(`The web extension of the tool ${name} is no longer loaded.`);
+                }
+                return current.execute(request.id, (input ?? {}) as Record<string, unknown>);
+            },
+        };
+    }
+
+    protected follow(store: SessionStore): void {
+        let working = store.state.working;
+        this.unfollow = [
+            store.subscribe(state => {
+                if (state.closed) {
+                    // Closed by another client.
+                    void this.enqueue(() => (this.current.store === store ? this.replace() : Promise.resolve()));
+                } else if (working && !state.working) {
+                    void this.settled(store);
+                }
+                working = state.working;
+            }),
+            store.onEvent(event => this.onEvent(event)),
+        ];
+        this.extensions.connect({
+            send: text => store.prompt(text, { streamingBehavior: 'followUp' }).then(() => undefined),
+            cwd: this.workbench.state.sessions.find(session => session.sessionId === store.sessionId)?.cwd,
+            sessionId: store.sessionId,
+            reload: () => this.reloadPackages(store),
+        });
+        this.update({ store, draft: undefined, error: undefined });
+    }
+
+    protected leave(): void {
+        for (const stop of this.unfollow.splice(0)) {
+            stop();
+        }
+        this.extensions.connect(undefined);
+        this.current.store?.detach().catch(() => undefined);
+        this.update({ store: undefined });
+    }
+
+    protected onEvent(event: TaEvent): void {
+        if (event.type === 'session_replaced') {
+            this.remember(event.info.sessionFile);
+        }
+        this.extensions.emit(event);
+    }
+
+    /**
+     * A run ended, in which ta may have made or changed a package. The web extensions load again. New or
+     * removed web tools need the conversation opened again with them; a changed package needs its pi
+     * extensions loaded again. A new run in the meantime puts both off to its end.
+     */
+    protected settled(store: SessionStore): Promise<void> {
+        return this.enqueue(async () => {
+            const changed = await this.extensions.refresh();
+            const edits = ChatUtil.packageEdits(store.state, this.seenEdits);
+            for (const id of edits) {
+                this.seenEdits.add(id);
+            }
+            if (store !== this.current.store || store.state.working) {
+                return;
+            }
+            const pending = this.reloadPending;
+            this.reloadPending = false;
+            await this.loadPackages(store, changed || edits.length > 0 || pending);
+        });
+    }
+
+    /** A web extension changed packages (reloadExtensions): as at the end of a run, or at the end of the one under way. */
+    protected reloadPackages(store: SessionStore): Promise<void> {
+        return this.enqueue(async () => {
+            if (store !== this.current.store) {
+                return;
+            }
+            if (store.state.working) {
+                this.reloadPending = true;
+                return;
+            }
+            await this.loadPackages(store, true);
+        });
+    }
+
+    protected async loadPackages(store: SessionStore, changed: boolean): Promise<void> {
+        const tools = this.opened.get(store.sessionId);
+        if (tools !== undefined && tools !== ChatUtil.toolNames(this.extensions.state.tools)) {
+            await this.reopen(store);
+        } else if (changed) {
+            await this.workbench.server.reload(store.sessionId);
+        }
+    }
+
+    /** The same conversation, from its file, with the tools of now. */
+    protected async reopen(store: SessionStore): Promise<void> {
+        const { sessionFile } = await this.workbench.server.getState(store.sessionId);
+        const cwd = this.workbench.state.sessions.find(session => session.sessionId === store.sessionId)?.cwd;
+        this.leave();
+        await this.workbench.server.closeSession(store.sessionId);
+        this.opened.delete(store.sessionId);
+        await this.attach(await this.open({ sessionFile, cwd }));
+    }
+
+    protected remember(sessionFile: string | undefined): void {
+        if (sessionFile) {
+            this.persisted.set(FILE, sessionFile);
+        }
+    }
+
+    protected update(change: Partial<ChatState>): void {
+        this.current = { ...this.current, ...change };
+        for (const listener of this.listeners) {
+            listener(this.current);
+        }
+    }
+}

package/src/browser/components/account-menu.tsx

@@ -0,0 +1,114 @@
+import { Download, LogOut, User } from 'lucide-react';
+import * as React from 'react';
+import { usePwa, useWorkbench } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { MessageUtil } from '../util/message';
+import { Icon } from './icon';
+
+/** Closes on Escape and on a click outside; the focus goes back to the button. */
+export function useDismiss(open: boolean, close: () => void, root: React.RefObject<HTMLElement | null>, button: React.RefObject<HTMLElement | null>) {
+    React.useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const onPointer = (event: PointerEvent) => {
+            if (!root.current?.contains(event.target as Node)) {
+                close();
+            }
+        };
+        const onKey = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                close();
+                button.current?.focus();
+            }
+        };
+        document.addEventListener('pointerdown', onPointer);
+        document.addEventListener('keydown', onKey);
+        return () => {
+            document.removeEventListener('pointerdown', onPointer);
+            document.removeEventListener('keydown', onKey);
+        };
+    }, [open, close, root, button]);
+}
+
+/**
+ * The account at the foot of the navigation: who is signed in to which ta serve. A round figure with the
+ * state of the connection as a dot; how the page looks is under the gear above it.
+ */
+export function AccountMenu() {
+    const t = useT();
+    const [{ status, server }, workbench] = useWorkbench();
+    const [{ installable, standalone }, pwa] = usePwa();
+    const [open, setOpen] = React.useState(false);
+    const root = React.useRef<HTMLDivElement>(null);
+    const button = React.useRef<HTMLButtonElement>(null);
+    const id = React.useId();
+    const close = React.useCallback(() => setOpen(false), []);
+    useDismiss(open, close, root, button);
+    const online = status === 'online';
+    const state = online ? t('ta.online') : t('ta.reconnecting');
+
+    return (
+        <div className="ta-account" ref={root}>
+            <button
+                ref={button}
+                type="button"
+                className={`ta-account-button ${open ? 'ta-on' : ''}`}
+                title={`${t('ta.account')} · ${state}`}
+                aria-label={t('ta.account')}
+                aria-haspopup="menu"
+                aria-expanded={open}
+                aria-controls={open ? id : undefined}
+                onClick={() => setOpen(!open)}
+            >
+                <Icon icon={User} size={17} />
+                <span className={`ta-account-dot ${online ? 'ta-ok' : 'ta-warn'}`} />
+            </button>
+            {open && (
+                <div className="ta-account-menu" id={id} role="menu" aria-label={t('ta.account')}>
+                    <div className="ta-account-head">
+                        <span className="ta-account-figure">
+                            <Icon icon={User} size={16} />
+                        </span>
+                        <div className="ta-account-text">
+                            <span className="ta-account-title">
+                                ta serve
+                                <span className={`ta-account-state ${online ? 'ta-ok' : 'ta-warn'}`}>
+                                    <span className="ta-dot" /> {state}
+                                </span>
+                            </span>
+                            <span className="ta-account-sub ta-ellipsis" title={server?.cwd}>
+                                {server ? `v${server.version} · ${MessageUtil.shortPath(server.cwd)}` : '…'}
+                            </span>
+                        </div>
+                    </div>
+                    {installable && !standalone && (
+                        <button
+                            type="button"
+                            role="menuitem"
+                            className="ta-account-item"
+                            onClick={() => {
+                                close();
+                                void pwa.install();
+                            }}
+                        >
+                            <Icon icon={Download} size={15} /> {t('ta.pwa.install')}
+                        </button>
+                    )}
+                    <div className="ta-account-sep" />
+                    <button
+                        type="button"
+                        role="menuitem"
+                        className="ta-account-item ta-danger"
+                        onClick={() => {
+                            close();
+                            workbench.signOut();
+                        }}
+                    >
+                        <Icon icon={LogOut} size={15} /> {t('ta.settings.signOut')}
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}