@celljs/ta-web 0.0.0-stage → 4.6.0

package/src/browser/assistant/assistant-tasks.tsx

@@ -0,0 +1,194 @@
+import type { SessionState } from '@celljs/ta-client';
+import { Check, ChevronRight, CircleSlash, Square, X } from 'lucide-react';
+import * as React from 'react';
+import { Icon } from '../components/icon';
+import { Markdown } from '../components/markdown';
+import { SessionView } from '../components/session-view';
+import { useWorkbench } from '../hooks';
+import type { MessageId } from '../i18n/messages';
+import { type Translate, useT } from '../i18n/use-t';
+import { ProcessUtil } from '../util/process';
+import { ToolUtil } from '../util/tool';
+import { useAssistant, useNow, useTaskStates } from './assistant-hooks';
+import type { AssistantTask } from './assistant-protocol';
+
+// The tasks of the double: their list, their status and the tab of one.
+
+export const STATUS_ICONS = { done: Check, failed: X, stopped: CircleSlash };
+/** The dot of a task in the conversation: the colors of the steps of a turn. */
+export const TASK_DOTS = { running: 'running', done: 'done', failed: 'error', stopped: 'cancelled' } as const;
+
+export function elapsed(task: AssistantTask, now: number): string {
+    const seconds = Math.max(0, Math.round(((task.endedAt ?? now) - task.startedAt) / 1000));
+    return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+}
+
+export function TaskStatus({ status }: { status: AssistantTask['status'] }) {
+    return (
+        <span className={`ta-task-status ta-task-status-${status}`}>
+            {status === 'running' ? <span className="ta-spinner" /> : <Icon icon={STATUS_ICONS[status]} size={14} />}
+        </span>
+    );
+}
+
+/** What a task does now, in a few words: the call it runs, else whether it thinks or writes. */
+export function activity(task: AssistantTask, state: SessionState | undefined, t: Translate): string {
+    const run = state && ToolUtil.current(state.tools);
+    if (run) {
+        const summary = ToolUtil.summary(run.toolName, (run.args as Record<string, unknown>) ?? {});
+        return [summary.verb ? t(summary.verb) : summary.name, summary.target].filter(Boolean).join(' ');
+    }
+    if (task.status === 'running' && state?.working) {
+        return t(`ta.session.phase.${ProcessUtil.phase(state.messages)}`);
+    }
+    return task.status === 'running' ? t('ta.task.running') : ProcessUtil.preview(task.result ?? '', 80) || t(`ta.task.${task.status}`);
+}
+
+/**
+ * The conversation with ta, drawn as in any other session: ta at the head of each turn, the work it did
+ * folded, what it does now on one line; and a line for each task that ended.
+ */
+export function RunningTasks({
+    tasks,
+    taskStates,
+    now,
+    onTask,
+}: {
+    tasks: AssistantTask[];
+    taskStates: Map<string, SessionState>;
+    now: number;
+    onTask(id: string): void;
+}) {
+    const t = useT();
+    const running = tasks.filter(task => task.status === 'running');
+    if (!running.length) {
+        return null;
+    }
+    return (
+        <div className="ta-running">
+            {running.map(task => (
+                <button key={task.id} type="button" className="ta-row ta-row-task ta-row-running" onClick={() => onTask(task.id)}>
+                    <span className="ta-status ta-status-running" />
+                    <span className="ta-row-title">{task.title}</span>
+                    <span className="ta-row-activity">{activity(task, taskStates.get(task.id), t)}</span>
+                    <span className="ta-row-meta">{elapsed(task, now)}</span>
+                    <Icon icon={ChevronRight} size={14} className="ta-row-chevron" />
+                </button>
+            ))}
+        </div>
+    );
+}
+
+export function TaskList({
+    tasks,
+    taskStates,
+    now,
+    onOpen,
+}: {
+    tasks: AssistantTask[];
+    taskStates: Map<string, SessionState>;
+    now: number;
+    onOpen(id: string): void;
+}) {
+    const t = useT();
+    if (tasks.length === 0) {
+        return <div className="ta-side-empty">{t('ta.assistant.noTasks')}</div>;
+    }
+    const newest = [...tasks].reverse();
+    const group = (title: MessageId, list: AssistantTask[]) =>
+        list.length > 0 && (
+            <section className="ta-task-group">
+                <div className="ta-side-section">
+                    {t(title)} · {list.length}
+                </div>
+                <ul className="ta-side-list">
+                    {list.map(task => (
+                        <li key={task.id}>
+                            <button type="button" className="ta-side-item ta-task-item" onClick={() => onOpen(task.id)}>
+                                <span className={`ta-status ta-status-${TASK_DOTS[task.status]}`} />
+                                <span className="ta-side-item-text">
+                                    <span className="ta-side-item-title">{task.title}</span>
+                                    <span className="ta-side-item-sub">{activity(task, taskStates.get(task.id), t)}</span>
+                                </span>
+                                <span className="ta-side-item-time">{elapsed(task, now)}</span>
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            </section>
+        );
+    return (
+        <>
+            {group(
+                'ta.assistant.runningTasks',
+                newest.filter(task => task.status === 'running'),
+            )}
+            {group(
+                'ta.assistant.endedTasks',
+                newest.filter(task => task.status !== 'running'),
+            )}
+        </>
+    );
+}
+
+/** The name of the `panel` view of the tasks, in the built-in web extension `assistant`. */
+export const ASSISTANT_TASKS_VIEW = 'tasks';
+
+/** The tasks ta handed out, running first: a tool of the workbench beside the conversation. */
+export function AssistantTasks({ onOpen }: { onOpen(task: AssistantTask): void }) {
+    const [{ tasks }, assistant] = useAssistant();
+    const taskStates = useTaskStates(assistant, tasks);
+    const now = useNow(1000);
+    const open = (id: string) => {
+        const task = tasks.find(candidate => candidate.id === id);
+        if (task) {
+            onOpen(task);
+        }
+    };
+    return (
+        <div className="ta-assistant-tasks">
+            <TaskList tasks={tasks} taskStates={taskStates} now={now} onOpen={open} />
+        </div>
+    );
+}
+
+/** One task, its session or its result: a tab of the workbench. */
+export function AssistantTaskView({ taskId }: { taskId: string }) {
+    const t = useT();
+    const [{ sessions }, workbench] = useWorkbench();
+    const [{ tasks }, assistant] = useAssistant();
+    const task = tasks.find(candidate => candidate.id === taskId);
+    if (!task) {
+        return <div className="ta-empty">{t('ta.assistant.noTasks')}</div>;
+    }
+    const store = assistant.taskStore(task.id);
+    const info = sessions.find(session => session.sessionId === task.sessionId);
+    return (
+        <div className="ta-assistant-task">
+            <div className="ta-assistant-task-bar">
+                <TaskStatus status={task.status} />
+                <span className="ta-assistant-task-title">{task.title}</span>
+                {task.status === 'running' && (
+                    <button type="button" className="ta-button ta-danger" onClick={() => assistant.stopTask(task.id).catch(() => undefined)}>
+                        <Icon icon={Square} size={13} /> {t('ta.stop')}
+                    </button>
+                )}
+            </div>
+            {store ? (
+                <SessionView
+                    store={store}
+                    server={workbench.server}
+                    workspace={workbench.workspace}
+                    info={info}
+                    onClosed={() => undefined}
+                    onActivity={() => undefined}
+                />
+            ) : (
+                <div className="ta-empty">
+                    {t('ta.assistant.taskEnded')}
+                    <Markdown text={task.result ?? ''} />
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,453 @@
+import type { SessionMessage, SessionState, SessionStore } from '@celljs/ta-client';
+import type { RpcExtensionUIRequest } from '@celljs/ta-protocol';
+import { BellRing, ChevronRight, ListTodo, type LucideIcon, Mic, Volume2, VolumeX } from 'lucide-react';
+import * as React from 'react';
+import { Callout } from '../components/callout';
+import { Composer } from '../components/composer';
+import type { ComposerAction, ComposerBoxHandle } from '../components/composer-box';
+import { ASK_CLASS, useConversationScroll } from '../components/conversation-scroll';
+import { DialogView } from '../components/dialog-view';
+import { HeroCards, HeroSteps, type HeroSuggestion } from '../components/hero-cards';
+import { Icon, IconButton } from '../components/icon';
+import { Markdown } from '../components/markdown';
+import { useMessageActions } from '../components/message-actions';
+import { MessageActions, TurnFooter, UserFooter } from '../components/message-footer';
+import { Process, quiet, TurnAvatar, UserImages } from '../components/message-list';
+import { RunStatus } from '../components/run-status';
+import { useSessionSettings } from '../components/session-settings';
+import { TaAvatar } from '../components/ta-avatar';
+import { WorkbenchToggle } from '../components/workbench-toggle';
+import { useNotices, usePersisted, useSessionState, useSettings, useWebExtensions, useWorkbench } from '../hooks';
+import type { MessageId } from '../i18n/messages';
+import { type Translate, useT } from '../i18n/use-t';
+import { MessageUtil } from '../util/message';
+import { ProcessUtil } from '../util/process';
+import { ASSISTANT_NAME_STATE } from './assistant';
+import { useAssistant, useLastActive, useNow, useTaskStates } from './assistant-hooks';
+import type { AssistantTask } from './assistant-protocol';
+import { ASSISTANT_TASKS_VIEW, RunningTasks, TASK_DOTS } from './assistant-tasks';
+
+export { ASSISTANT_TASKS_VIEW, AssistantTasks, AssistantTaskView } from './assistant-tasks';
+
+/** The name of the built-in web extension of the double. */
+export const ASSISTANT_NAME = 'assistant';
+
+import type { Mood } from '../avatar/dino-avatar';
+import { Voice } from './voice';
+
+const SLEEP_AFTER_MS = 120000;
+const CELEBRATE_MS = 4000;
+const TASK_UPDATE = /^<task_update id="([^"]+)" title="([^"]*)" status="(\w+)">/;
+const SUGGESTIONS: HeroSuggestion[] = [
+    { picture: 'summary', label: 'ta.suggest.1.label', text: 'ta.suggest.1' },
+    { picture: 'tests', label: 'ta.suggest.2.label', text: 'ta.suggest.2' },
+    { picture: 'changes', label: 'ta.suggest.3.label', text: 'ta.suggest.3' },
+];
+/** How the double works, in place of a sentence: say it, it runs in the background, it tells you. */
+const STEPS: [LucideIcon, MessageId][] = [
+    [Mic, 'ta.assistant.step.say'],
+    [ListTodo, 'ta.assistant.step.run'],
+    [BellRing, 'ta.assistant.step.tell'],
+];
+
+interface MoodInputs {
+    working: boolean;
+    attention: boolean;
+    listening: boolean;
+    speaking: boolean;
+    running: number;
+    recentlyDone: boolean;
+    idleForMs: number;
+}
+
+/** What ta shows, most urgent first. */
+export function moodOf({ working, attention, listening, speaking, running, recentlyDone, idleForMs }: MoodInputs): Mood {
+    if (listening) {
+        return 'listening';
+    }
+    if (attention) {
+        return 'attention';
+    }
+    if (speaking) {
+        return 'speaking';
+    }
+    if (recentlyDone) {
+        return 'done';
+    }
+    if (working) {
+        return 'thinking';
+    }
+    if (running > 0) {
+        return 'working';
+    }
+    return idleForMs > SLEEP_AFTER_MS ? 'sleeping' : 'idle';
+}
+
+interface Attention {
+    source: string;
+    store: SessionStore;
+    request: RpcExtensionUIRequest;
+}
+
+function lastReply(messages: SessionMessage[]): { index: number; text: string } | undefined {
+    for (let index = messages.length - 1; index >= 0; index--) {
+        const message = messages[index] as { role: string; stopReason?: string };
+        if (message.role === 'assistant' && message.stopReason !== 'toolUse') {
+            const text = MessageUtil.text(MessageUtil.blocks(messages[index])).trim();
+            if (text) {
+                return { index, text };
+            }
+        }
+    }
+    return undefined;
+}
+
+function Conversation({ state, onTask, t }: { state: SessionState; onTask(id: string): void; t: Translate }) {
+    const items = React.useMemo(() => ProcessUtil.items(state.messages, state.working), [state.messages, state.working]);
+    let lastTurn = items.length - 1;
+    while (lastTurn >= 0 && items[lastTurn].kind !== 'turn') {
+        lastTurn--;
+    }
+    const waiting = state.pendingUi.length > 0;
+    const last = items[items.length - 1];
+    const status = state.working || state.compacting ? <RunStatus state={state} /> : undefined;
+    const onHead = status && quiet(last);
+    return (
+        <>
+            {items.map((item, index) => {
+                if (item.kind === 'turn') {
+                    const results = MessageUtil.results(item.messages);
+                    const { errorMessage, stopReason } = (item.last ?? {}) as { errorMessage?: string; stopReason?: string };
+                    const mood = ProcessUtil.mood(item, index === lastTurn, waiting);
+                    return (
+                        <div key={item.key} className={`ta-msg-ta ${item.active ? 'ta-turn-live' : ''}`}>
+                            <Process
+                                steps={item.steps}
+                                active={item.active}
+                                results={results}
+                                tools={state.tools}
+                                leading={<TurnAvatar mood={mood} />}
+                                status={onHead && item === last ? status : undefined}
+                            />
+                            {item.reply.map((text, index) => (
+                                <Markdown key={index} text={text} />
+                            ))}
+                            {!item.active && stopReason === 'error' && errorMessage && <Callout level="error">{errorMessage}</Callout>}
+                            {!item.active && <TurnFooter messages={item.messages} last={item.last} reply={item.reply.join('\n\n').trim()} />}
+                        </div>
+                    );
+                }
+                const { role } = item.message as { role: string };
+                if (role !== 'user') {
+                    return null;
+                }
+                const blocks = MessageUtil.blocks(item.message);
+                const text = MessageUtil.text(blocks).trim();
+                const update = TASK_UPDATE.exec(text);
+                if (update) {
+                    const status = update[3] as AssistantTask['status'];
+                    return (
+                        <button key={item.key} type="button" className="ta-row ta-row-task" onClick={() => onTask(update[1])}>
+                            <span className={`ta-status ta-status-${TASK_DOTS[status]}`} />
+                            <span className="ta-row-title">{update[2]}</span>
+                            <span className="ta-row-meta">{t(`ta.task.${status}` as MessageId)}</span>
+                            <Icon icon={ChevronRight} size={14} className="ta-row-chevron" />
+                        </button>
+                    );
+                }
+                return (
+                    <div key={item.key} className={`ta-msg-user ${ASK_CLASS}`}>
+                        <UserImages blocks={blocks} />
+                        {text && <div className="ta-msg-bubble">{text}</div>}
+                        <UserFooter message={item.message} text={text} />
+                    </div>
+                );
+            })}
+            {status && !onHead && <div className="ta-run-line">{status}</div>}
+        </>
+    );
+}
+
+/** The tasks at work, at the end of the conversation: what each does now and for how long, so that a long run does not look stuck. */
+interface ChatProps {
+    store: SessionStore;
+    tasks: AssistantTask[];
+    taskStates: Map<string, SessionState>;
+    onTask(id: string): void;
+    onMood(mood: Mood): void;
+    /** Opens the tasks in the workbench. */
+    onTasks(): void;
+}
+
+function Chat({ store, tasks, taskStates, onTask, onMood, onTasks }: ChatProps) {
+    const t = useT();
+    const [{ lastFinished }, assistant] = useAssistant();
+    const [workbench, bench] = useWorkbench();
+    const [settingsState, settings] = useSettings();
+    const state = useSessionState(store);
+    const now = useNow(1000);
+    const lastActive = useLastActive();
+    const [listening, setListening] = React.useState(false);
+    const [speaking, setSpeaking] = React.useState(false);
+    const [, notices] = useNotices();
+    const voice = React.useRef<Voice.Listening | undefined>(undefined);
+    const spoken = React.useRef<number | undefined>(undefined);
+    const box = React.useRef<ComposerBoxHandle>(null);
+    const speak = settingsState.settings.speak;
+
+    const attentions: Attention[] = [
+        ...state.pendingUi.map(request => ({ source: 'ta', store, request })),
+        ...tasks.flatMap(task => {
+            const taskStore = assistant.taskStore(task.id);
+            return taskStore ? (taskStates.get(task.id)?.pendingUi ?? []).map(request => ({ source: task.title, store: taskStore, request })) : [];
+        }),
+    ];
+    const running = tasks.filter(task => task.status === 'running').length;
+    const mood = moodOf({
+        working: state.working,
+        attention: attentions.length > 0,
+        listening,
+        speaking,
+        running,
+        recentlyDone: !!lastFinished && now - lastFinished < CELEBRATE_MS,
+        idleForMs: now - lastActive,
+    });
+    React.useEffect(() => onMood(mood), [mood, onMood]);
+    const reply = lastReply(state.messages);
+
+    // Reads a new reply out once the run has settled; what was said before the page opened stays quiet.
+    React.useEffect(() => {
+        if (state.working || !reply || spoken.current === reply.index) {
+            return;
+        }
+        const first = spoken.current === undefined;
+        spoken.current = reply.index;
+        if (!first && speak && Voice.canSpeak()) {
+            setSpeaking(true);
+            Voice.speak(reply.text, settingsState.language, () => setSpeaking(false));
+        }
+    }, [speak, state.working, reply, settingsState.language]);
+
+    // What the user said; a task that reports back stays where it comes in.
+    const asked = React.useMemo(
+        () => state.messages.filter(message => message.role === 'user' && !TASK_UPDATE.test(MessageUtil.text(MessageUtil.blocks(message)).trim())).length,
+        [state.messages],
+    );
+    const scroller = useConversationScroll(asked);
+
+    const say = (message: string) => {
+        hush();
+        return assistant.say(message);
+    };
+    const fail = (cause: unknown) => notices.error(cause);
+    const session = useSessionSettings(bench.server, store.sessionId, state.working, t, fail);
+    const messageActions = useMessageActions(store, bench.server, state.working, workbench.server?.cwd, box, () => undefined);
+    const hush = () => {
+        Voice.hush();
+        setSpeaking(false);
+    };
+    const send = (message: string) => {
+        const trimmed = message.trim();
+        if (trimmed) {
+            say(trimmed).catch(cause => {
+                box.current?.setText(trimmed);
+                fail(cause);
+            });
+        }
+    };
+
+    const toggleVoice = () => {
+        if (listening) {
+            voice.current?.stop();
+            return;
+        }
+        Voice.hush();
+        setSpeaking(false);
+        let heard = '';
+        voice.current = Voice.listen(
+            settingsState.language,
+            (words, final) => {
+                heard = words;
+                box.current?.setText(words);
+                if (final) {
+                    voice.current?.stop();
+                }
+            },
+            failure => {
+                setListening(false);
+                if (failure) {
+                    notices.notify(t('ta.assistant.speechFailed', { error: failure }), { level: 'error' });
+                } else if (heard) {
+                    box.current?.setText('');
+                    send(heard);
+                }
+            },
+        );
+        setListening(voice.current !== undefined);
+    };
+
+    const toggleSpeak = () => {
+        settings.update({ speak: !speak });
+        if (speak) {
+            Voice.hush();
+            setSpeaking(false);
+        }
+    };
+
+    const talkLabel = t(listening ? 'ta.assistant.stopListening' : 'ta.assistant.talk');
+    // The microphone is on the right of the box, where it is at hand; while it listens it shows a wave and stops on a click.
+    const mic = Voice.canListen() && (
+        <button
+            type="button"
+            className={`ta-mic ${listening ? 'ta-on' : ''}`}
+            title={talkLabel}
+            aria-label={talkLabel}
+            aria-pressed={listening}
+            onClick={toggleVoice}
+        >
+            {listening ? (
+                <span className="ta-wave" aria-hidden="true">
+                    <i />
+                    <i />
+                    <i />
+                    <i />
+                </span>
+            ) : (
+                <Icon icon={Mic} size={17} />
+            )}
+        </button>
+    );
+    // Images, files and commands, the settings of the session, then reading aloud and the tasks: all in the + of the box.
+    const actions: ComposerAction[][] = [
+        session.actions,
+        [
+            ...(Voice.canSpeak()
+                ? [
+                      {
+                          key: 'speak',
+                          label: t(speak ? 'ta.assistant.speakOff' : 'ta.assistant.speakOn'),
+                          icon: <Icon icon={speak ? VolumeX : Volume2} size={16} />,
+                          run: toggleSpeak,
+                      },
+                  ]
+                : []),
+            ...(tasks.length > 0
+                ? [
+                      {
+                          key: 'tasks',
+                          label: t('ta.assistant.showTasks'),
+                          icon: <Icon icon={ListTodo} size={16} />,
+                          detail: running > 0 ? t('ta.assistant.working', { count: running }) : t('ta.assistant.tasks'),
+                          run: onTasks,
+                      },
+                  ]
+                : []),
+        ],
+    ];
+
+    return (
+        <>
+            <div className="ta-chat-scroll" ref={scroller}>
+                <div className="ta-chat-col">
+                    {state.messages.length === 0 ? (
+                        <div className="ta-hero">
+                            <TaAvatar mood={mood} size={112} className="ta-hero-avatar" roam />
+                            <h1>{t('ta.assistant.hello')}</h1>
+                            <HeroSteps steps={STEPS} />
+                            <HeroCards suggestions={SUGGESTIONS} onPick={send} />
+                        </div>
+                    ) : (
+                        <MessageActions.Provider value={messageActions}>
+                            <Conversation state={state} onTask={onTask} t={t} />
+                        </MessageActions.Provider>
+                    )}
+                    <RunningTasks tasks={tasks} taskStates={taskStates} now={now} onTask={onTask} />
+                </div>
+            </div>
+            <div className="ta-composer-area">
+                <div className="ta-chat-col">
+                    {attentions.map(({ source, store: from, request }) => (
+                        <div key={request.id} className="ta-attention">
+                            <div className="ta-attention-source">{source}</div>
+                            <DialogView request={request} respond={response => from.respondUi(response).catch(() => undefined)} />
+                        </div>
+                    ))}
+                    <Composer
+                        ref={box}
+                        store={store}
+                        server={bench.server}
+                        workspace={bench.workspace}
+                        working={state.working}
+                        commands={session.settings.commands}
+                        cwd={workbench.server?.cwd}
+                        placeholder={listening ? t('ta.assistant.listening') : t('ta.assistant.placeholder')}
+                        actions={actions}
+                        onSending={hush}
+                        onError={fail}
+                        after={mic}
+                    />
+                </div>
+            </div>
+        </>
+    );
+}
+
+/** ta as the user's double, which hands work out to tasks and reports back: a page of the built-in web extension. Its tasks open in the workbench. */
+export function AssistantPanel({ onTask }: { onTask(task: AssistantTask): void }) {
+    const t = useT();
+    const [workbench] = useWorkbench();
+    const [state, assistant] = useAssistant();
+    const [, extensions] = useWebExtensions();
+    const [mood, setMood] = React.useState<Mood>('idle');
+    const [name] = usePersisted(ASSISTANT_NAME_STATE);
+    const taskStates = useTaskStates(assistant, state.tasks);
+    React.useEffect(() => {
+        if (workbench.status === 'online') {
+            void assistant.start();
+        }
+    }, [workbench.status, assistant]);
+
+    const store = assistant.store();
+    const running = state.tasks.filter(candidate => candidate.status === 'running').length;
+    const openTask = (id: string) => {
+        const task = state.tasks.find(candidate => candidate.id === id);
+        if (task) {
+            onTask(task);
+        }
+    };
+    const openTasks = () => extensions.openView(`${ASSISTANT_NAME}/${ASSISTANT_TASKS_VIEW}`);
+    return (
+        <div className="ta-assistant">
+            <div className="ta-assistant-main">
+                <header className="ta-main-head ta-wide-only">
+                    <span className="ta-head-spacer" />
+                    <div className="ta-main-title">
+                        <span>{name || t('ta.assistant.me')}</span>
+                        <span className="ta-main-sub">
+                            {MessageUtil.basename(workbench.server?.cwd ?? '')} · {t(`ta.mood.${mood}`)}
+                        </span>
+                    </div>
+                    <IconButton icon={ListTodo} label={t('ta.assistant.showTasks')} className="ta-tasks-button" badge={running} onClick={openTasks} />
+                    <WorkbenchToggle />
+                </header>
+                <div className="ta-assistant-body">
+                    <div className="ta-assistant-chat">
+                        {store ? (
+                            <Chat store={store} tasks={state.tasks} taskStates={taskStates} onTask={openTask} onMood={setMood} onTasks={openTasks} />
+                        ) : (
+                            <div className="ta-empty">
+                                {state.error ? (
+                                    <Callout level="error">{state.error}</Callout>
+                                ) : (
+                                    <>
+                                        <span className="ta-spinner" /> {t('ta.assistant.waking')}
+                                    </>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}