@adecore/agents-react 0.0.1 → 0.17.0-beta.1

package/src/prompts/ui/PromptCard.tsx

@@ -0,0 +1,101 @@
+import type { KeyboardEvent, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Hand, MessageCircleQuestionMark, type LucideIcon } from 'lucide-react';
+import { chatHost } from '../../host';
+import { headingKey, isPrimaryKey, staysInCard, stepIndex, toolbarKey } from '../logic/keys';
+import { Icon } from '@adecore/ui';
+
+/* The raised glass a chat's composer is made of, for a card that stands on its own over a canvas. */
+export const PROMPT_SURFACE =
+    'flex flex-col overflow-hidden rounded-2xl border border-border bg-[color-mix(in_srgb,var(--surface-raised)_92%,transparent)] shadow-float backdrop-blur-[14px]';
+
+export type PromptCardKind = 'approval' | 'question' | 'waiting';
+
+const ICONS: Record<PromptCardKind, LucideIcon> = { approval: Hand, question: MessageCircleQuestionMark, waiting: MessageCircleQuestionMark };
+
+interface PromptCardProps {
+    kind: PromptCardKind;
+    heading: ReactNode;
+    /* The muted line under the heading; left out when there is nothing to say. */
+    meta?: ReactNode;
+    /* The stack's source row, drawn above the card and outside `.prompt-card`, so paging is never mistaken for an answer. */
+    top?: ReactNode;
+    actions: ReactNode;
+    busy: boolean;
+    /* Why the card cannot be answered from here, in a quiet line; null while it can. */
+    notice: string | null;
+    error: string | null;
+    children?: ReactNode;
+}
+
+/*
+ * The keys every card shares: Mod+Enter, entering from the heading and the action row. The body handles
+ * its own keys first and says so with `preventDefault`.
+ */
+function onCardKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    const card = event.currentTarget;
+    const target = event.target instanceof HTMLElement ? event.target : null;
+    if (!event.defaultPrevented) {
+        if (isPrimaryKey(event.nativeEvent, chatHost().isApplePlatform())) {
+            event.preventDefault();
+            // A click on the button itself, so a disabled Next or Answer stays as disabled as it looks.
+            card.querySelector<HTMLButtonElement>('[data-prompt-primary]:not(:disabled)')?.click();
+        } else if (target?.classList.contains('prompt-heading') && headingKey(event.nativeEvent)) {
+            event.preventDefault();
+            card.querySelector<HTMLElement>('[data-prompt-entry]:not(:disabled), [data-prompt-primary]:not(:disabled)')?.focus();
+        } else {
+            const toolbar = target?.closest('[role="toolbar"]');
+            const step = toolbar ? toolbarKey(event.nativeEvent) : null;
+            if (toolbar && step !== null) {
+                event.preventDefault();
+                const buttons = [...toolbar.querySelectorAll<HTMLButtonElement>('button:not(:disabled)')];
+                const current = buttons.findIndex((button) => button.contains(target));
+                buttons[stepIndex(current, buttons.length, step)]?.focus();
+            }
+        }
+    }
+    if (event.defaultPrevented || staysInCard(event.nativeEvent)) {
+        event.stopPropagation();
+    }
+}
+
+/* What every prompt looks like, whatever asked it: in a chat's composer and in a canvas's stack. */
+export function PromptCard({ kind, heading, meta, top, actions, busy, notice, error, children }: PromptCardProps) {
+    const { t } = useTranslation('agent-prompts');
+    const card = (
+        <div className="prompt-card flex min-h-0 flex-col gap-2 p-3" role="group" aria-label={t(`card.${kind}`)} aria-busy={busy} onKeyDown={onCardKeyDown}>
+            {/* The scroll box would clip the focus ring of whatever sits against its edge, so it carries the
+                room that ring needs and gives the same amount back to the card's own padding. */}
+            <div className="-m-1.5 max-h-[min(50dvh,480px)] overflow-auto overscroll-contain p-1.5">
+                <div className="flex flex-col gap-2">
+                    <div className="flex items-start gap-2">
+                        <Icon icon={ICONS[kind]} size={16} className="mt-[3px] shrink-0 text-status-needs-you" />
+                        <h3 tabIndex={-1} className="prompt-heading min-w-0 break-words text-sm font-semibold text-text outline-offset-4">
+                            {heading}
+                        </h3>
+                    </div>
+                    {meta && <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs text-text-muted">{meta}</div>}
+                    {children}
+                    {notice && <p className="text-xs text-text-muted">{notice}</p>}
+                    {error && (
+                        <p role="alert" className="text-xs text-status-error">
+                            {error}
+                        </p>
+                    )}
+                </div>
+            </div>
+            <div role="toolbar" aria-label={t('toolbar')} className="flex flex-wrap items-center gap-1.5">
+                {actions}
+            </div>
+        </div>
+    );
+    if (top === undefined) {
+        return card;
+    }
+    return (
+        <div className="flex min-h-0 flex-col">
+            {top}
+            {card}
+        </div>
+    );
+}

package/src/prompts/ui/PromptView.tsx

@@ -0,0 +1,111 @@
+import { useTranslation } from 'react-i18next';
+import { toolSummary } from '../../chat/logic/tools';
+import { chatHost } from '../../host';
+import { answerValue, promptAnswers, questionAnswer, type PromptDraft } from '../logic/prompts';
+import { approvalButtons, type PromptViewProps } from '../logic/subjects';
+import { ApprovalBody } from './ApprovalBody';
+import { ApprovalActions, QuestionActions } from './PromptActions';
+import { PromptCard } from './PromptCard';
+import { QuestionBody } from './QuestionBody';
+
+/* A permission request or question, answered in place: a chat's, or one of the app's own that it draws itself. */
+export function PromptView(props: PromptViewProps) {
+    const { subject, draft, onDraft, onAction, more, hasDraft, denyReason, disabled, sending, error, top } = props;
+    const { t } = useTranslation('agent-prompts');
+    const locked = sending || disabled;
+    const notice = disabled ? t('error.notConnected') : null;
+    const buttons = approvalButtons(subject, draft.reason).map(({ action, ...button }) => ({ ...button, onPress: () => onAction(action) }));
+
+    if (subject.kind === 'host') {
+        return chatHost().prompts.render(subject.prompt, props);
+    }
+
+    const { item } = subject;
+    const question = item.kind === 'question' ? item.questions[Math.min(draft.index, item.questions.length - 1)]! : null;
+    const answer = question ? questionAnswer(draft, question) : null;
+    const last = item.kind === 'question' && draft.index === item.questions.length - 1;
+    // Whether Next or Answer may go with this draft. The keys ask it as well as the button.
+    const readyWith = (next: PromptDraft): boolean =>
+        item.kind === 'question' && !!question && !!answerValue(questionAnswer(next, question)) && !(last && !promptAnswers(item, next));
+    const commit = (next: PromptDraft) => {
+        if (item.kind !== 'question' || locked || !readyWith(next)) {
+            return;
+        }
+        if (!last) {
+            onDraft({ ...next, index: next.index + 1 });
+        } else {
+            const answers = promptAnswers(item, next);
+            if (answers) {
+                onAction({ kind: 'answer', answers });
+            }
+        }
+    };
+    const multiple = item.kind === 'question' && item.questions.length > 1;
+    const meta =
+        more > 0 || hasDraft || multiple ? (
+            <>
+                {more > 0 && <span className="tabular-nums">{t('meta.waiting', { count: more + 1 })}</span>}
+                {multiple && <span className="tabular-nums">{t('meta.question', { index: draft.index + 1, total: item.questions.length })}</span>}
+                {hasDraft && <span>{t('meta.draftSaved')}</span>}
+            </>
+        ) : null;
+
+    if (item.kind === 'approval') {
+        return (
+            <PromptCard
+                kind="approval"
+                heading={`${item.toolName === 'Bash' ? t('approval.runCommand') : item.toolName} ${item.toolName === 'Bash' ? '' : toolSummary(item.toolName, item.input)}`}
+                meta={meta}
+                top={top}
+                busy={sending}
+                notice={notice}
+                error={error}
+                actions={
+                    <ApprovalActions
+                        buttons={buttons}
+                        onAddReason={denyReason && !draft.showReason ? () => onDraft({ ...draft, showReason: true }) : undefined}
+                        locked={locked}
+                        sending={sending}
+                    />
+                }
+            >
+                <ApprovalBody item={item} draft={draft} onDraft={onDraft} denyReason={denyReason} locked={locked} />
+            </PromptCard>
+        );
+    }
+
+    return (
+        <PromptCard
+            kind="question"
+            heading={question?.question}
+            meta={meta}
+            top={top}
+            busy={sending}
+            notice={notice}
+            error={error}
+            actions={
+                <QuestionActions
+                    index={draft.index}
+                    dismissable={item.async === true}
+                    last={last}
+                    ready={readyWith(draft)}
+                    locked={locked}
+                    sending={sending}
+                    onPrevious={() => onDraft({ ...draft, index: draft.index - 1 })}
+                    onDismiss={() => onAction({ kind: 'dismiss' })}
+                    onCommit={() => commit(draft)}
+                />
+            }
+        >
+            {question && answer && (
+                <QuestionBody
+                    question={question}
+                    answer={answer}
+                    onAnswer={(next) => onDraft({ ...draft, answers: { ...draft.answers, [question.id]: next } })}
+                    onCommit={(next) => commit({ ...draft, answers: { ...draft.answers, [question.id]: next } })}
+                    locked={locked}
+                />
+            )}
+        </PromptCard>
+    );
+}

package/src/prompts/ui/QuestionBody.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useRef, type KeyboardEvent } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Circle, CircleCheck, Square } from 'lucide-react';
+import type { ChatQuestion } from '@adecore/agent-contracts';
+import { answerFieldKey, choiceKey, stepIndex } from '../logic/keys';
+import { pickPromptChoice, type PromptAnswer } from '../logic/prompts';
+import { Icon } from '@adecore/ui';
+import { chatHost } from '../../host';
+
+/* One question of a request: its choices, "Something else…", or a written answer when it offers no choices. */
+export function QuestionBody({
+    question,
+    answer,
+    onAnswer,
+    onCommit,
+    locked
+}: {
+    question: ChatQuestion;
+    answer: PromptAnswer;
+    onAnswer(answer: PromptAnswer): void;
+    /* Next or Answer with this answer in place, when the question allows it. */
+    onCommit(answer: PromptAnswer): void;
+    locked: boolean;
+}) {
+    const { t } = useTranslation('agent-prompts');
+    const AnswerField = chatHost().dictation.Textarea;
+    // The choices, then the "Something else…" field form one list with a single tab stop.
+    const items = useRef<(HTMLElement | null)[]>([]);
+    const shownQuestion = useRef(question.id);
+    const count = question.choices.length + 1;
+    const chosen = question.choices.findIndex((choice) => !answer.custom && answer.choices.includes(choice.label));
+    const tabStop = chosen !== -1 ? chosen : answer.custom ? question.choices.length : 0;
+
+    // The focused choice of the question before is gone once the next one shows; the keyboard goes on in this one.
+    useEffect(() => {
+        if (shownQuestion.current === question.id) {
+            return;
+        }
+        shownQuestion.current = question.id;
+        if (document.activeElement === null || document.activeElement === document.body) {
+            (items.current[tabStop] ?? items.current[0])?.focus({ preventScroll: true });
+        }
+    }, [question.id, tabStop]);
+
+    const onChoiceKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number, label: string) => {
+        const action = choiceKey(event.nativeEvent, {
+            multiSelect: question.multiSelect,
+            anyChosen: !answer.custom && answer.choices.length > 0
+        });
+        if (action === null) {
+            return;
+        }
+        event.preventDefault();
+        if (action.kind === 'move') {
+            items.current[stepIndex(index, count, action.to)]?.focus();
+        } else if (action.kind === 'commit') {
+            onCommit(answer);
+        } else {
+            const next = pickPromptChoice(answer, question, label);
+            onAnswer(next);
+            if (action.kind === 'pick-and-commit') {
+                onCommit(next);
+            }
+        }
+    };
+
+    const onFieldKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+        const field = event.currentTarget;
+        const action = answerFieldKey(event.nativeEvent, {
+            belowChoices: question.choices.length > 0,
+            caretAtStart: field.selectionStart === 0 && field.selectionEnd === 0,
+            hasText: field.value.trim() !== ''
+        });
+        if (action === null) {
+            return;
+        }
+        event.preventDefault();
+        if (action.kind === 'to-last-choice') {
+            items.current[question.choices.length - 1]?.focus();
+        } else if (action.kind === 'commit') {
+            onCommit({ ...answer, custom: true });
+        }
+    };
+
+    return (
+        <div className="flex flex-col gap-2">
+            {question.multiSelect && <p className="text-xs text-text-muted">{t('question.multiSelect')}</p>}
+            {question.choices.length > 0 && (
+                <div role={question.multiSelect ? 'group' : 'radiogroup'} aria-label={question.question} className="flex flex-col gap-2">
+                    {question.choices.map((choice, index) => {
+                        const selected = !answer.custom && answer.choices.includes(choice.label);
+                        return (
+                            <button
+                                key={choice.label}
+                                ref={(element) => {
+                                    items.current[index] = element;
+                                }}
+                                type="button"
+                                role={question.multiSelect ? 'checkbox' : 'radio'}
+                                aria-checked={selected}
+                                tabIndex={index === tabStop ? 0 : -1}
+                                data-prompt-entry={index === tabStop ? '' : undefined}
+                                disabled={locked}
+                                className={clsx(
+                                    'flex min-h-9 items-start gap-2 rounded-lg border px-3 py-2 text-left disabled:opacity-50',
+                                    selected ? 'border-accent bg-accent-soft' : 'border-border bg-surface-hover hover:bg-surface-active'
+                                )}
+                                onClick={() => onAnswer(pickPromptChoice(answer, question, choice.label))}
+                                onKeyDown={(event) => onChoiceKeyDown(event, index, choice.label)}
+                            >
+                                <Icon
+                                    icon={selected ? CircleCheck : question.multiSelect ? Square : Circle}
+                                    size={16}
+                                    className="mt-0.5 shrink-0 text-text-muted"
+                                />
+                                <span className="flex min-w-0 flex-wrap items-baseline gap-x-2">
+                                    <span className="text-xs text-text">{choice.label}</span>
+                                    {choice.description && <span className="text-xs text-text-muted">{choice.description}</span>}
+                                </span>
+                            </button>
+                        );
+                    })}
+                    <label
+                        className={clsx(
+                            'flex min-h-9 items-start gap-2 rounded-lg border px-3 py-2 text-left text-xs text-text focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-accent',
+                            answer.custom ? 'border-accent bg-accent-soft' : 'border-border bg-surface-hover',
+                            locked && 'opacity-50'
+                        )}
+                        // A press picks the row; the keyboard only passing through on its way up or down does not.
+                        onPointerDown={() => {
+                            if (!locked && !answer.custom) {
+                                onAnswer({ ...answer, custom: true });
+                            }
+                        }}
+                    >
+                        <Icon icon={answer.custom ? CircleCheck : Circle} size={16} className="mt-0.5 shrink-0" />
+                        <AnswerField
+                            ref={(element) => {
+                                items.current[question.choices.length] = element;
+                            }}
+                            rows={1}
+                            tabIndex={tabStop === question.choices.length ? 0 : -1}
+                            data-prompt-entry={tabStop === question.choices.length ? '' : undefined}
+                            className="max-h-40 min-w-0 flex-1 resize-none field-sizing-content bg-transparent outline-none placeholder:text-text-muted"
+                            buttonClassName="-my-1 -mr-1.5"
+                            aria-label={t('question.answerLabel')}
+                            placeholder={t('question.somethingElse')}
+                            value={answer.text}
+                            disabled={locked}
+                            onChange={(e) => onAnswer({ ...answer, custom: true, text: e.target.value })}
+                            onKeyDown={onFieldKeyDown}
+                        />
+                    </label>
+                </div>
+            )}
+            {question.choices.length === 0 && (
+                <AnswerField
+                    ref={(element) => {
+                        items.current[0] = element;
+                    }}
+                    className="field min-h-20 text-sm"
+                    aria-label={t('question.answerLabel')}
+                    placeholder={t('question.answerPlaceholder')}
+                    data-prompt-entry=""
+                    value={answer.text}
+                    disabled={locked}
+                    onChange={(e) => onAnswer({ ...answer, text: e.target.value })}
+                    onKeyDown={onFieldKeyDown}
+                />
+            )}
+        </div>
+    );
+}

package/src/providers/AccountColors.tsx

@@ -0,0 +1,8 @@
+import { AccentSwatches } from '@adecore/ui';
+import { chatHost } from '../host';
+
+/* The colors an account may wear, the host's palette. */
+export function AccountColors({ value, label, onChange }: { value: string | undefined; label: string; onChange(id: string): void }) {
+    const { all, featured, label: labelOf } = chatHost().accents;
+    return <AccentSwatches value={value} label={label} accents={all} featured={featured} labelOf={labelOf} onValueChange={onChange} />;
+}

package/src/providers/AccountDetail.tsx

@@ -0,0 +1,209 @@
+import { useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { LogIn } from 'lucide-react';
+import type { ProviderInfo } from '@adecore/agent-contracts';
+import { AccountDot } from '../agents/AccountDot';
+import { accountName, FOLDER_VARIABLES, type AccountEntry } from '../agents/accounts';
+import { ConfirmDialog, DetailHeader, SettingsRow, SettingsSection } from '@adecore/ui/settings';
+import { Button, copyText, Icon, Input, Switch, Tooltip } from '@adecore/ui';
+import { chatHost } from '../host';
+import { useChatScope } from '../scope';
+import { removeAccount, saveAccount } from './account-actions';
+import { AccountVariables } from './AccountVariables';
+import { AccountColors } from './AccountColors';
+import { CliMark } from './parts';
+
+// The states in which the machine's own sentence says more than the usual line under the login.
+const TROUBLE = new Set(['folder-missing', 'unavailable', 'failed']);
+
+interface AccountDetailProps {
+    provider: ProviderInfo;
+    entry: AccountEntry;
+    /* False for a CLI without a config folder: it has only its own login, and nothing to sign in here. */
+    canLogIn: boolean;
+    /* Why a login cannot open a terminal right now, or null when it can. */
+    loginBlocked: string | null;
+    secretsAvailable: boolean;
+    onRemoved(): void;
+}
+
+/* The name a person types, saved when they leave the field; an empty one goes back to what was there. */
+function NameField({ value, label, onSave }: { value: string; label: string; onSave(name: string): void }) {
+    const [draft, setDraft] = useState(value);
+    const commit = (): void => {
+        const name = draft.trim();
+        if (name === '' || name === value) {
+            setDraft(value);
+            return;
+        }
+        onSave(name);
+    };
+    return (
+        <Input
+            className="w-55 max-w-full"
+            value={draft}
+            maxLength={80}
+            aria-label={label}
+            onChange={(event) => setDraft(event.target.value)}
+            onBlur={commit}
+            onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                    event.currentTarget.blur();
+                }
+            }}
+        />
+    );
+}
+
+/* One account: how it looks in a picker, who is signed in, where its folder is, its variables. */
+export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secretsAvailable, onRemoved }: AccountDetailProps) {
+    const { t } = useTranslation('agent-providers');
+    const scope = useChatScope();
+    const [confirming, setConfirming] = useState(false);
+    const { id, account, status, isDefault } = entry;
+    const name = accountName(entry, provider.name);
+    const folder = status?.home ?? '';
+    const variable = FOLDER_VARIABLES[provider.kind];
+    const signedIn = status?.state === 'ready';
+
+    const showFolder = (): void => {
+        copyText(folder);
+        chatHost().notify({ kind: 'success', title: t('account.folderCopied'), description: folder });
+    };
+
+    const loginDetail = (): string => {
+        if (status !== null && TROUBLE.has(status.state) && status.message) {
+            return status.message;
+        }
+        if (!signedIn) {
+            return t('account.login.signedOutDetail');
+        }
+        return status?.plan ? t('account.login.planDetail', { plan: status.plan }) : t('account.login.detail');
+    };
+
+    const loginButton = (
+        <Button variant="secondary" disabled={loginBlocked !== null} onClick={() => void chatHost().openLogin?.(scope.id, provider.kind, id, name)}>
+            <Icon icon={LogIn} size={14} />
+            {signedIn ? t('account.login.logInAgain') : t('account.login.logIn')}
+        </Button>
+    );
+
+    return (
+        <>
+            <DetailHeader
+                mark={
+                    <span className="grid h-6 shrink-0 place-items-center">
+                        <AccountDot color={account.color} className="size-3" />
+                    </span>
+                }
+                title={name}
+                subtitle={
+                    <>
+                        <CliMark kind={provider.kind} size={12} className="text-text-muted" />
+                        {t('account.kind', { provider: provider.name })}
+                    </>
+                }
+                actions={
+                    folder !== '' && (
+                        <Button variant="secondary" onClick={showFolder}>
+                            {t('account.showFolder')}
+                        </Button>
+                    )
+                }
+            />
+            <SettingsSection>
+                <SettingsRow
+                    label={t('account.enabled.label')}
+                    description={t('account.enabled.description')}
+                    control={
+                        <Switch
+                            checked={account.enabled !== false}
+                            label={t('account.enabled.label')}
+                            onCheckedChange={(checked) => {
+                                const { enabled: _enabled, ...rest } = account;
+                                void saveAccount(scope, id, checked ? rest : { ...rest, enabled: false });
+                            }}
+                        />
+                    }
+                />
+                <SettingsRow
+                    label={t('account.name')}
+                    control={
+                        <NameField key={name} value={name} label={t('account.name')} onSave={(label) => void saveAccount(scope, id, { ...account, label })} />
+                    }
+                />
+                <SettingsRow
+                    label={t('account.color')}
+                    control={
+                        <AccountColors
+                            value={account.color}
+                            label={t('account.color')}
+                            onChange={(color) => void saveAccount(scope, id, { ...account, color })}
+                        />
+                    }
+                />
+            </SettingsSection>
+            {canLogIn && (
+                <SettingsSection title={t('account.login.title')}>
+                    <SettingsRow
+                        label={
+                            signedIn
+                                ? status?.email
+                                    ? t('account.login.signedInAs', { email: status.email })
+                                    : t('account.login.signedIn')
+                                : t('account.login.signedOut')
+                        }
+                        description={loginBlocked === null ? loginDetail() : `${loginDetail()} ${loginBlocked}`}
+                        control={
+                            loginBlocked === null ? (
+                                loginButton
+                            ) : (
+                                <Tooltip label={loginBlocked}>
+                                    <span className="inline-flex">{loginButton}</span>
+                                </Tooltip>
+                            )
+                        }
+                    />
+                    <SettingsRow label={t('account.folder.label')}>
+                        <Input mono className="h-8.5" value={folder} readOnly aria-label={t('account.folder.label')} />
+                        <p className="-mt-1 text-xs text-text-muted">
+                            {variable ? (
+                                <Trans
+                                    t={t}
+                                    i18nKey="account.folder.detail"
+                                    values={{ variable }}
+                                    components={{ code: <code className="font-mono text-code" /> }}
+                                />
+                            ) : (
+                                t('account.folder.detailPlain')
+                            )}
+                        </p>
+                    </SettingsRow>
+                </SettingsSection>
+            )}
+            <AccountVariables key={`${id}:${JSON.stringify(account.env ?? [])}`} id={id} account={account} secretsAvailable={secretsAvailable} />
+            <SettingsSection>
+                <SettingsRow
+                    label={t('account.remove.label')}
+                    description={isDefault ? t('account.remove.defaultNote') : t('account.remove.description')}
+                    control={
+                        <Button variant="danger-outline" disabled={isDefault} onClick={() => setConfirming(true)}>
+                            {t('account.remove.button')}
+                        </Button>
+                    }
+                />
+            </SettingsSection>
+            <ConfirmDialog
+                open={confirming}
+                onOpenChange={setConfirming}
+                title={t('account.remove.confirmTitle', { account: name })}
+                description={t('account.remove.confirmDescription', { folder })}
+                confirmLabel={t('account.remove.confirm')}
+                onConfirm={async () => {
+                    await removeAccount(scope, id, provider.kind);
+                    onRemoved();
+                }}
+            />
+        </>
+    );
+}