@adecore/agents-react 0.38.0 → 0.40.0

package/src/chat/ui/full-diff.ts

@@ -18,6 +18,7 @@ export function fullFileDiff(patch: string, name: string, contents: DiffContents
             newFile: { name, contents: contents.new },
             throwOnError: true
         });
+
         return parsed === undefined || parsed.isPartial || parsed.hunks.length === 0 ? null : parsed;
     } catch {
         return null;

package/src/chat/ui/highlighter.ts

@@ -5,7 +5,9 @@ import { useChatHost, type ChatHost } from '../../host';
 import { shikiThemeOf } from './code-theme';
 
 export type { Highlighter };
+
 export type GrammarState = ReturnType<Highlighter['getLastGrammarState']>;
+
 // A plain language needs no grammar; shiki draws it in the theme's own foreground.
 const PLAIN = 'text';
 
@@ -27,8 +29,10 @@ async function grammarOf(loaded: Highlighter, lang: string): Promise<string> {
     if (lang === PLAIN || loaded.getLoadedLanguages().includes(lang)) {
         return lang;
     }
+
     try {
         await loaded.loadLanguage(lang as BundledLanguage);
+
         return lang;
     } catch {
         return PLAIN;
@@ -48,8 +52,10 @@ function createCodeHighlighter(source: () => Promise<Highlighter>): CodeHighligh
     const load = (): Promise<Highlighter> => {
         highlighterLoad ??= source().then((loaded) => {
             highlighter = loaded;
+
             return loaded;
         });
+
         return highlighterLoad;
     };
 
@@ -57,11 +63,13 @@ function createCodeHighlighter(source: () => Promise<Highlighter>): CodeHighligh
         if (highlighter === null || !themes.has(theme)) {
             return null;
         }
+
         for (const lang of langs) {
             if (!languages.has(lang)) {
                 return null;
             }
         }
+
         return highlighter;
     };
 
@@ -70,49 +78,63 @@ function createCodeHighlighter(source: () => Promise<Highlighter>): CodeHighligh
     return {
         loadLanguage(lang) {
             let pending = languageLoads.get(lang);
+
             if (!pending) {
                 pending = load().then(async (loaded) => {
                     languages.set(lang, await grammarOf(loaded, lang));
                 });
+
                 languageLoads.set(lang, pending);
             }
+
             return pending;
         },
         loadTheme(theme, custom) {
             let pending = themeLoads.get(theme);
+
             if (!pending) {
                 pending = load().then(async (loaded) => {
                     // Loading a theme the highlighter already has replaces it, under whatever else of the host draws with it.
                     if (!loaded.getLoadedThemes().includes(theme)) {
                         await loaded.loadTheme(shikiThemeOf(theme, custom) as BundledTheme | ThemeRegistration);
                     }
+
                     themes.add(theme);
                 });
+
                 themeLoads.set(theme, pending);
             }
+
             return pending;
         },
         ready,
         language,
         tokenizer(lang, theme) {
             const loaded = ready([lang], theme);
+
             if (loaded === null) {
                 return null;
             }
+
             const resolved = language(lang);
             const key = `${resolved}:${theme}`;
             let entry = tokenizers.get(key);
+
             if (!entry) {
                 const options = { lang: resolved as BundledLanguage, theme };
+
                 entry = {
                     tokenize: tokens.wrap(key, (code, state) => {
                         const result = loaded.codeToTokens(code, state ? { ...options, grammarState: state } : options);
+
                         return { lines: result.tokens, state: result.grammarState };
                     }),
                     fg: loaded.getTheme(theme).fg
                 };
+
                 tokenizers.set(key, entry);
             }
+
             return entry;
         }
     };
@@ -130,13 +152,17 @@ const borrowed = new WeakMap<() => Promise<Highlighter>, CodeHighlighter>();
 export function codeHighlighter(source?: () => Promise<Highlighter>): CodeHighlighter {
     if (source === undefined) {
         bundled ??= createCodeHighlighter(loadBundled);
+
         return bundled;
     }
+
     let highlighter = borrowed.get(source);
+
     if (highlighter === undefined) {
         highlighter = createCodeHighlighter(source);
         borrowed.set(source, highlighter);
     }
+
     return highlighter;
 }
 
@@ -155,28 +181,16 @@ export function loadTheme(theme: string, custom: ChatHost['code']['custom']): Pr
     return codeHighlighter().loadTheme(theme, custom);
 }
 
-/* The web bundle's highlighter once every one of `langs` and `theme` is in, or null while one is still on its way. */
-export function readyHighlighter(langs: Iterable<string>, theme: string): Highlighter | null {
-    return codeHighlighter().ready(langs, theme);
-}
-
-/* The language the web bundle draws `lang` in: the bundled grammar, or plain text. Only meaningful once a load settled. */
-export function loadedLanguage(lang: string): string {
-    return codeHighlighter().language(lang);
-}
-
-/* The web bundle's tokenizer for a language in a theme, or null while shiki, the grammar or the theme is still on its way. */
-export function tokenizerFor(lang: string, theme: string): { tokenize: Tokenize<GrammarState>; fg: string | undefined } | null {
-    return codeHighlighter().tokenizer(lang, theme);
-}
-
 /* The inline style of one token; undefined when it only has the surrounding color. */
 export function tokenStyle(token: CodeToken): CSSProperties | undefined {
     const style = token.fontStyle ?? 0;
+
     if (token.color === undefined && style <= 0) {
         return undefined;
     }
+
     const decorations = [style & 4 ? 'underline' : '', style & 8 ? 'line-through' : ''].filter(Boolean).join(' ');
+
     return {
         color: token.color,
         ...(style & 1 ? { fontStyle: 'italic' } : {}),

package/src/chat/ui/icons.tsx

@@ -5,10 +5,6 @@ import { Icon } from '@adecore/ui';
 
 const SIZE = 12;
 
-/* A pending dock draws its mark a step up from the lines of a transcript, at the size a sidebar
-   row uses, because it is a thing to answer rather than a thing to read past. */
-export const DOCK_ICON_SIZE = 14;
-
 /* The gutter every row in the thread opens with: 16 wide, on the line box of its first row of text,
    so the mark of a tool call, a note and a fold all sit in one column and their labels start at the
    same x. The same box the menu rows and the toasts use. */
@@ -17,8 +13,10 @@ export const ROW_GUTTER = 'grid h-5 w-4 shrink-0 place-items-center';
 /* The icon that says what a tool call is about; unknown tools get the wrench. */
 export function toolIcon(name: string, size: number = SIZE): ReactNode {
     const known = toolEntry(name);
+
     if (known !== undefined) {
         return <Icon icon={known.icon} size={size} />;
     }
+
     return name.startsWith('mcp__') ? <Icon icon={Hammer} size={size} /> : <Icon icon={Wrench} size={size} />;
 }

package/src/chat/ui/index.ts

@@ -14,6 +14,9 @@ export { ImageThumb, type ImageThumbProps } from './ImageView';
 export { LimitDock, LimitPill } from './LimitState';
 export { ReplyMarkdown, MessageMarkdown, Markdown } from './Markdown';
 export { ModelPicker } from './Pickers';
+export { PromptEditor } from './PromptEditor';
+export { promptPicks } from './composer/prompt-picks';
+export type { PromptDraft } from './composer/use-prompt-menus';
 export { ResumeCompactionDock } from './ResumeCompactionDock';
 export { SubagentTitleCrumb, SubagentBreadcrumb } from './SubagentControls';
 export { SubagentInfo } from './SubagentInfo';
@@ -25,6 +28,7 @@ export { UploadThumb } from './UploadThumb';
 export { VisualPageFrame, type VisualPageFrameProps } from './VisualFrame';
 export { WelcomeGreeting } from './Welcome';
 export { externalChange, composerEditorExtensions } from './composer/editor';
+
 export {
     createDiffSyntaxRuntime,
     diffSyntaxRuntime,
@@ -35,6 +39,7 @@ export {
     type DiffSourceTokenSession,
     diffSourceTokens
 } from './diff-syntax';
+
 export { useDiffTheme } from './diff-theme';
 export type { UnifiedDiffProps } from './diff/diff-props';
 export { FileLinkContext, useFileLinkCwd } from './file-links';
@@ -45,6 +50,7 @@ export { UiReply } from './intelligent-ui/UiReply';
 export { uiChartData, type UiChartSeries, type UiChartValues, type UiChartData } from './intelligent-ui/chart-data';
 export { uiNodeLabel } from './intelligent-ui/node-text';
 export { UI_RENDERERS } from './intelligent-ui/registry';
+
 export type {
     UiRenderContext,
     UiRendererProps,
@@ -57,6 +63,7 @@ export type {
     UiRenderer,
     UiRenderers
 } from './intelligent-ui/render-context';
+
 export { uiTableColumns, type UiColumnKind, type UiTableColumn } from './intelligent-ui/table-data';
 export type { QuoteTaker } from './quote-selection';
 export { ReplyContext } from './reply-context';

package/src/chat/ui/intelligent-ui/UiBlockFrame.tsx

@@ -34,14 +34,19 @@ function LivePart({ live }: { live: UiLiveStatus }) {
     const slow = useLater(live.state === 'reading', READING_SPINNER_MS);
     const { readAt } = live;
     const fresh = live.state === 'fresh' || live.state === 'reading';
+
     const ago = useTickingText(() => {
         if (readAt === null) {
             return '';
         }
+
         const time = formatAgo(Date.now() - readAt);
+
         return fresh ? t('blocks.live.read', { time }) : time;
     });
+
     const source = live.source ?? live.sources[0] ?? '';
+
     const icon = slow ? (
         <Spinner size={12} />
     ) : live.state === 'failed' ? (
@@ -51,14 +56,17 @@ function LivePart({ live }: { live: UiLiveStatus }) {
     ) : (
         <Icon icon={Radio} size={12} className="text-positive" />
     );
+
     const words =
         live.state === 'failed'
             ? t('blocks.live.failed', { source })
             : live.state === 'refused'
               ? t('blocks.live.refused', { source })
               : t('blocks.live.label');
+
     const reason = live.state === 'failed' || live.state === 'refused' ? uiReasonText(t, live.code, live.reason) : undefined;
     const hint = reason !== undefined ? reason : live.sources.length > 0 ? t('blocks.live.sources', { sources: live.sources.join(', ') }) : null;
+
     const body = (
         <span tabIndex={hint === null ? undefined : 0} className="flex items-center gap-1.5">
             {icon}
@@ -79,6 +87,7 @@ function LivePart({ live }: { live: UiLiveStatus }) {
             )}
         </span>
     );
+
     return hint === null ? body : <Tooltip label={hint}>{body}</Tooltip>;
 }
 
@@ -87,9 +96,11 @@ function UiBlockFooter({ live = null, answered = null, fixes = NO_FIXES, shownAs
     const { t } = useTranslation('agent-chat');
     const [fixesOpen, setFixesOpen] = useState(false);
     const listId = useId();
+
     if (live === null && answered === null && fixes.length === 0 && shownAsText === null) {
         return null;
     }
+
     return (
         <div className="flex flex-col gap-1.5 text-2xs text-text-faint">
             <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
@@ -155,34 +166,44 @@ function useRisingFloor(active: boolean): [RefObject<HTMLDivElement | null>, num
     const ref = useRef<HTMLDivElement>(null);
     const held = useRef(0);
     const [floor, setFloor] = useState(0);
+
     useLayoutEffect(() => {
         const element = ref.current;
+
         if (element === null) {
             return;
         }
+
         if (active) {
             const observer = new ResizeObserver(() => {
                 const height = Math.ceil(element.getBoundingClientRect().height);
                 held.current = Math.max(held.current, height);
                 setFloor(held.current);
             });
+
             observer.observe(element);
+
             return () => {
                 observer.disconnect();
                 setFloor(0);
             };
         }
+
         // The final render already let go of the floor, so the card measures its own height here.
         const from = held.current;
         const to = element.getBoundingClientRect().height;
         held.current = 0;
         const reduced = element.ownerDocument.defaultView?.matchMedia('(prefers-reduced-motion: reduce)').matches === true;
+
         if (from - to < 1 || reduced) {
             return;
         }
+
         const release = element.animate([{ minHeight: `${from}px` }, { minHeight: `${to}px` }], { duration: RELEASE_MS, easing: 'ease-out' });
+
         return () => release.cancel();
     }, [active]);
+
     return [ref, floor];
 }
 
@@ -198,17 +219,21 @@ export function UiBlockFrame({ nodes, phase, children, className, ...footer }: U
     const streaming = phase === 'streaming';
     const head = uiBlockHead(nodes);
     const [ref, floor] = useRisingFloor(streaming);
+
     // Only while the focus is inside the block, so the composer keeps the same keys for sending.
     const pickPrimary = (event: KeyboardEvent<HTMLDivElement>): void => {
         if (!matchesShortcut(KEY_SHORTCUTS.modEnter, event, host.isApplePlatform())) {
             return;
         }
+
         const primary = event.currentTarget.querySelector<HTMLButtonElement>('[data-ui-primary-choice]');
+
         if (primary !== null) {
             event.preventDefault();
             primary.click();
         }
     };
+
     return (
         <UiHeadContext value={head?.id ?? null}>
             <div

package/src/chat/ui/intelligent-ui/UiFallbackPart.tsx

@@ -12,6 +12,7 @@ export type UiFallbackProblem = { kind: 'unknown'; component: string } | { kind:
  */
 export function UiFallbackPart({ fallback, problem }: { fallback: string; problem: UiFallbackProblem }) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <div className="chat-ui-flat flex flex-col gap-1.5 rounded-xl bg-ui-tile p-1.5">
             <span className="chat-ui-flat-inner flex items-center gap-1.5 px-1.5 pt-0.5 text-2xs text-text-muted">

package/src/chat/ui/intelligent-ui/UiReply.tsx

@@ -45,15 +45,19 @@ const localStates = new UiPageMemory<UiState>(64);
 
 function localState(key: string, block: UiBlock, answered?: ChatUiAnswer): UiState {
     let state = localStates.get(key);
+
     if (!state) {
         state = new UiState(block);
+
         if (answered && answered.revision === block.revision) {
             for (const [name, value] of Object.entries(answered.values ?? {})) {
                 state.set(name, value);
             }
         }
+
         localStates.set(key, state);
     }
+
     return state;
 }
 
@@ -102,6 +106,7 @@ function remarkInlineProse(this: { data(): object }) {
     // The field remark-parse reads its syntax extensions from, as remark-gfm adds its own.
     const data = this.data() as { micromarkExtensions?: unknown[] };
     data.micromarkExtensions = [...(data.micromarkExtensions ?? []), { disable: { null: BLOCK_CONSTRUCTS } }];
+
     return (tree: ProseTree) => {
         tree.children = [
             {
@@ -118,26 +123,35 @@ function remarkCitations() {
             if (['link', 'inlineCode', 'code'].includes(parent.type)) {
                 return;
             }
+
             parent.children = parent.children?.flatMap((child) => {
                 if (child.type !== 'text' || !child.value) {
                     visit(child);
+
                     return [child];
                 }
+
                 const parts: ProseTree[] = [];
                 let start = 0;
+
                 for (const match of child.value.matchAll(/\[(\d{1,3})\]/g)) {
                     parts.push({ type: 'text', value: child.value.slice(start, match.index) });
+
                     parts.push({
                         type: 'citation',
                         data: { hName: 'span', hProperties: { 'data-ui-citation': match[1] } },
                         children: [{ type: 'text', value: match[0] }]
                     });
+
                     start = match.index + match[0].length;
                 }
+
                 parts.push({ type: 'text', value: child.value.slice(start) });
+
                 return parts;
             });
         };
+
         visit(tree);
     };
 }
@@ -148,28 +162,35 @@ interface CitationTarget {
     url: string;
     ancestors: string[];
 }
+
 const CitationContext = createContext<{ sources: ReadonlyMap<number, CitationTarget>; reveal?: (source: CitationTarget) => void }>({ sources: new Map() });
 
 function ProseCitation({ number, children }: { number: number; children?: ReactNode }) {
     const { sources, reveal } = useContext(CitationContext);
     const source = sources.get(number);
+
     return source ? <UiSourceCitation number={number} title={source.title} url={source.url} onReveal={reveal ? () => reveal(source) : undefined} /> : children;
 }
 
 function sourceTargets(nodes: readonly UiViewNode[]): Map<number, CitationTarget> {
     const lists: CitationTarget[][] = [];
+
     const visit = (nodes: readonly UiViewNode[], ancestors: string[] = []) => {
         for (const node of nodes) {
             const path = ['Tab', 'Section'].includes(node.type) ? [...ancestors, node.id] : ancestors;
+
             if (node.type === 'Sources') {
                 lists.push(
                     uiChildrenOf(node, 'Source').map((source) => ({ id: source.id, title: source.props.title, url: source.props.url, ancestors: path }))
                 );
             }
+
             visit(node.children, path);
         }
     };
+
     visit(nodes);
+
     // Numbers restart in each Sources list, so multiple lists have no unambiguous prose target.
     return new Map(lists.length === 1 ? lists[0].map((source, index) => [index + 1, source]) : []);
 }
@@ -184,9 +205,11 @@ const ProseUrlContext = createContext<((url: string) => void) | undefined>(undef
 /* Through the host only, like a Source: the address is the model's, so nothing here navigates by itself. */
 function ProseLink({ href, children }: { href?: string; children?: ReactNode }) {
     const openUrl = useContext(ProseUrlContext);
+
     if (openUrl === undefined || href === undefined || !/^https?:\/\//i.test(href)) {
         return children;
     }
+
     return (
         <Tooltip label={uiUrlDomain(href)}>
             <button type="button" className="cursor-pointer text-accent underline underline-offset-2 select-text" onClick={() => openUrl(href)}>
@@ -215,9 +238,11 @@ const PROSE_COMPONENTS: Components = {
  */
 const UiProse = memo(function UiProse({ text, fade, openUrl }: { text: string; fade: boolean; openUrl?: (url: string) => void }) {
     const [, lead = '', body = '', trail = ''] = /^(\s*)([\s\S]*?)(\s*)$/.exec(text) ?? [];
+
     if (body === '') {
         return text;
     }
+
     return (
         <ProseUrlContext value={openUrl}>
             {lead}
@@ -241,8 +266,10 @@ function writtenTexts(nodes: readonly UiNode[], into = new Map<string, boolean>(
         if (node.type === '$text') {
             into.set(node.id, node.expressions.text === undefined);
         }
+
         writtenTexts(node.children, into);
     }
+
     return into;
 }
 
@@ -250,6 +277,7 @@ function isInline(node: UiViewNode): boolean {
     if (node.type === '$text') {
         return true;
     }
+
     return node.error === undefined && (node.type === 'Tag' || (LINKS.has(node.type) && node.children.length === 0));
 }
 
@@ -271,16 +299,21 @@ function UiNodes({ nodes, parent, texts, context }: UiNodesProps): ReactNode {
             <UiNodeBody node={node} parent={parent} texts={texts} context={context} />
         </UiNodeBoundary>
     );
+
     const paragraph = PARAGRAPHS[parent];
+
     if (parent === 'Choices') {
         // A primary choice stands first in the order a keyboard and a screen reader meet it too, not only on screen.
         return [...nodes].sort((a, b) => Number(b.props.primary === true) - Number(a.props.primary === true)).map(drawn);
     }
+
     if (paragraph === undefined) {
         return nodes.map(drawn);
     }
+
     const output: ReactNode[] = [];
     let run: UiViewNode[] = [];
+
     const close = () => {
         if (run.some((node) => !isBlank(node))) {
             output.push(
@@ -289,17 +322,23 @@ function UiNodes({ nodes, parent, texts, context }: UiNodesProps): ReactNode {
                 </div>
             );
         }
+
         run = [];
     };
+
     for (const node of nodes) {
         if (isInline(node)) {
             run.push(node);
+
             continue;
         }
+
         close();
         output.push(drawn(node));
     }
+
     close();
+
     return output;
 }
 
@@ -342,22 +381,28 @@ function UiNodeBody({
 }): ReactNode {
     if (node.type === '$text') {
         const text = String(node.props.text ?? '');
+
         return LITERAL_PARENTS.has(parent) || texts.get(node.sourceId ?? node.id) !== true ? (
             text
         ) : (
             <UiProse text={text} fade={context.phase === 'streaming'} openUrl={context.openUrl} />
         );
     }
+
     if (node.error !== undefined) {
         return <UiFallbackPart fallback={node.fallback} problem={{ kind: 'failed' }} />;
     }
+
     if (!isUiComponent(node.type)) {
         return <UiFallbackPart fallback={node.fallback} problem={{ kind: 'unknown', component: node.type }} />;
     }
+
     const Renderer = UI_RENDERERS[node.type] as UiRenderer<Record<string, unknown>> | null;
+
     if (Renderer === null) {
         return null;
     }
+
     return (
         <Renderer node={node} context={context}>
             <UiNodes nodes={node.children} parent={node.type} texts={texts} context={context} />
@@ -374,8 +419,10 @@ function placeReader(frozen: ChatUiQueryState['blocks'][string] | undefined, rev
     if (frozen === undefined || frozen.revision !== revision) {
         return () => (unrecorded ? null : undefined);
     }
+
     return (nodeId, address) => {
         const reading = Object.hasOwn(frozen.places ?? {}, nodeId) ? frozen.places![nodeId] : undefined;
+
         return reading?.address === address.trim() && reading.state === 'found' && reading.lat !== undefined && reading.lon !== undefined
             ? { lat: reading.lat, lon: reading.lon, label: reading.label }
             : null;
@@ -406,14 +453,17 @@ function UiBlockBody({
     const key = JSON.stringify([context.scopeId, context.chatId, context.itemId, block.id]);
     const [state] = useState(() => localState(key, block, answered));
     state.sync(block);
+
     const stateRevision = useSyncExternalStore(
         (listener) => state.subscribe(listener),
         () => state.snapshot(),
         () => state.snapshot()
     );
+
     const [optimistic, setOptimistic] = useState<{ revision: string; choiceId: string; state: 'sending' | 'sent' | 'queued' } | null>(null);
     const [failedChoiceId, setFailedChoiceId] = useState<string | null>(null);
     const pending = useRef(false);
+
     useEffect(() => {
         if (answered && answered.revision === block.revision && answered.values) {
             for (const [name, value] of Object.entries(answered.values)) {
@@ -421,17 +471,21 @@ function UiBlockBody({
             }
         }
     }, [state, answered, block.revision]);
+
     const answer =
         answered && answered.revision === block.revision
             ? { choiceId: answered.choiceId, state: answered.queued ? ('queued' as const) : ('sent' as const) }
             : optimistic?.revision === block.revision
               ? optimistic
               : null;
+
     const [element, setElement] = useState<HTMLDivElement | null>(null);
     const navigation = useContext(UiReplyNavigationContext);
     const flash = navigation?.flash;
+
     const flashing =
         navigation?.chatId === context.chatId && flash?.itemId === context.itemId && flash.blockId === block.id && flash.revision === block.revision;
+
     const queries = useUiQueries(block, state, context, element, frozen);
     const links = useUiLinks(block, state, context, queries.reads, frozen);
     // The state changes in place, so its revision is what tells this evaluation it went stale.
@@ -439,6 +493,7 @@ function UiBlockBody({
     const evaluation = useMemo(() => evaluateUiBlock(block, state), [block, state, stateRevision]);
     const texts = useMemo(() => writtenTexts(block.nodes), [block]);
     const sources = useMemo(() => sourceTargets(evaluation.nodes), [evaluation]);
+
     const citations = useMemo(
         () => ({
             sources,
@@ -450,9 +505,11 @@ function UiBlockBody({
         }),
         [sources, element]
     );
+
     const liveValue = useUiLiveValues(block, evaluation.nodes, queries.currentReadings);
     const sendChoice = host.intelligentUi?.sendChoice;
     const place = useMemo(() => placeReader(frozen, block.revision, unrecorded), [frozen, block.revision, unrecorded]);
+
     const rendering: UiRenderContext = {
         ...context,
         ...links,
@@ -470,15 +527,19 @@ function UiBlockBody({
                         if (pending.current || answer || queries.reading) {
                             return;
                         }
+
                         const values = uiInputValues(block, state);
                         const reads = queries.readsFor(values);
+
                         if (reads === null) {
                             return;
                         }
+
                         pending.current = true;
                         setFailedChoiceId(null);
                         const revision = block.revision!;
                         setOptimistic({ revision, choiceId, state: 'sending' });
+
                         void sendChoice(context.scopeId, {
                             chatId: context.chatId,
                             itemId: context.itemId,
@@ -499,9 +560,11 @@ function UiBlockBody({
                     }
                   : undefined
     };
+
     const unknown = block.catalogVersion !== UI_CATALOG_VERSION;
     const failed = !unknown && !block.nodes.length && block.diagnostics.length > 0;
     const shownAsText = unknown ? t('blocks.unreadable') : failed ? block.diagnostics[0].message : undefined;
+
     return (
         <div ref={setElement} className="relative" data-ui-block={block.id} data-ui-revision={block.revision} tabIndex={-1}>
             {flashing && <span key={flash.nonce} className="chat-flash pointer-events-none absolute inset-0 rounded-lg" aria-hidden />}