@adecore/agents-react 0.23.0 → 0.24.0

package/src/chat/ui/diff/syntax-runtime.ts

@@ -7,7 +7,7 @@ import {
     type DiffSyntaxService,
     type DiffSyntaxTokens
 } from '@adecore/editor/shiki-worker';
-import { chatHost } from '../../../host';
+import type { ChatHost } from '../../../host';
 
 interface Pending {
     promise: Promise<DiffSyntaxTokens | null>;
@@ -39,11 +39,16 @@ export interface DiffSyntaxRuntimeOptions {
 }
 
 let nextGeneration = 0;
-let shared: DiffSyntaxRuntime | undefined;
+const shared = new WeakMap<ChatHost['code'], DiffSyntaxRuntime>();
 
-export function diffSyntaxRuntime(): DiffSyntaxRuntime {
-    const code = chatHost().code;
-    return (shared ??= createDiffSyntaxRuntime({ workerFactory: code.syntaxWorker, themes: code.custom, highlighter: code.highlighter }));
+/* The runtime of a host's `code`, made on first use and shared by every diff under that host. */
+export function diffSyntaxRuntime(code: ChatHost['code']): DiffSyntaxRuntime {
+    let runtime = shared.get(code);
+    if (runtime === undefined) {
+        runtime = createDiffSyntaxRuntime({ workerFactory: code.syntaxWorker, themes: code.custom, highlighter: code.highlighter });
+        shared.set(code, runtime);
+    }
+    return runtime;
 }
 
 export function createDiffSyntaxRuntime(options: DiffSyntaxRuntimeOptions): DiffSyntaxRuntime {

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

@@ -1,7 +1,7 @@
 import type { LineToken } from '@adecore/editor';
 import { lineTokensOf, type DiffSyntaxDocument } from '@adecore/editor/shiki-worker';
 import type { DiffDocument } from '@adecore/merge';
-import { diffSyntaxRuntime, type DiffSyntaxRuntime } from './diff/syntax-runtime';
+import type { DiffSyntaxRuntime } from './diff/syntax-runtime';
 
 export { createDiffSyntaxRuntime, diffSyntaxRuntime } from './diff/syntax-runtime';
 export type { DiffSyntaxRuntime, DiffSyntaxRuntimeOptions, DiffSyntaxSession } from './diff/syntax-runtime';
@@ -18,7 +18,7 @@ export interface DiffSourceTokenSession {
 }
 
 /* Structurally accepts the editor's source mapping without depending on its React renderer. */
-export function diffSourceTokens(document: DiffDocument, mapping: DiffSyntaxMapping, runtime: DiffSyntaxRuntime = diffSyntaxRuntime()): DiffSourceTokenSession {
+export function diffSourceTokens(document: DiffDocument, mapping: DiffSyntaxMapping, runtime: DiffSyntaxRuntime): DiffSourceTokenSession {
     const sides = { old: runtime.open(mapping.documents.old), new: runtime.open(mapping.documents.new) };
     const cache = { old: new Map<number, ReadonlyArray<readonly LineToken[] | null>>(), new: new Map<number, ReadonlyArray<readonly LineToken[] | null>>() };
     const pending = { old: new Set<number>(), new: new Set<number>() };

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

@@ -1,23 +1,24 @@
 import { useMemo } from 'react';
 import { registerCustomTheme, type ThemesType } from '@pierre/diffs';
-import { chatHost } from '../../host';
+import { useChatHost, type ChatHost } from '../../host';
 
-let registered = false;
+const registered = new WeakSet<ChatHost['code']['custom']>();
 
-/* The library resolves Shiki's bundled themes by id on its own; the app's own it only knows by registration, done once the host is set. */
-function registerThemes(): void {
-    if (registered) {
+/* The library resolves Shiki's bundled themes by id on its own; the app's own it only knows by registration, done once per host. */
+function registerThemes(custom: ChatHost['code']['custom']): void {
+    if (registered.has(custom)) {
         return;
     }
-    registered = true;
-    for (const theme of chatHost().code.custom) {
+    registered.add(custom);
+    for (const theme of custom) {
         registerCustomTheme(theme.name, () => Promise.resolve(theme));
     }
 }
 
 /* The code themes a diff is drawn in, the same pair a chat's code blocks use. */
 export function useDiffTheme(): ThemesType {
-    registerThemes();
-    const { light, dark } = chatHost().code.useThemes();
+    const { code } = useChatHost();
+    registerThemes(code.custom);
+    const { light, dark } = code.useThemes();
     return useMemo(() => ({ light, dark }), [light, dark]);
 }

package/src/chat/ui/file-links.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext, useMemo } from 'react';
-import { chatHost, type FileRef } from '../../host';
+import { useChatHost, type FileRef } from '../../host';
 import { ChatScopeContext } from '../../scope';
 
 /*
@@ -21,10 +21,12 @@ export function useFileLinkScopeId(): string | null {
 export function useFileLinkTarget(text: string): FileRef | null {
     const cwd = useFileLinkCwd();
     const scopeId = useFileLinkScopeId();
-    return useMemo(() => chatHost().fileLinks?.target(text, cwd, scopeId) ?? null, [text, cwd, scopeId]);
+    const { fileLinks } = useChatHost();
+    return useMemo(() => fileLinks?.target(text, cwd, scopeId) ?? null, [fileLinks, text, cwd, scopeId]);
 }
 
-/* A reference followed, the way the app opens a file or a folder. */
-export function openFileLink(cwd: string | null, ref: FileRef, scopeId: string | null = null): void {
-    chatHost().fileLinks?.open(cwd, ref, scopeId);
+/* Follows a reference the way the app opens a file or a folder. */
+export function useOpenFileLink(): (cwd: string | null, ref: FileRef, scopeId?: string | null) => void {
+    const { fileLinks } = useChatHost();
+    return (cwd, ref, scopeId = null) => fileLinks?.open(cwd, ref, scopeId);
 }

package/src/chat/ui/highlighter.ts

@@ -0,0 +1,185 @@
+import type { CSSProperties } from 'react';
+import type { BundledLanguage, BundledTheme, Highlighter, ThemeRegistration } from 'shiki';
+import type { CodeToken, Tokenize } from './code-lines';
+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';
+
+/* One highlighter with the grammars and themes asked of it, each loaded once. */
+export interface CodeHighlighter {
+    loadLanguage(lang: string): Promise<void>;
+    /* Loads a theme: one of `custom` by its name, or a bundled one by its id. */
+    loadTheme(theme: string, custom: ChatHost['code']['custom']): Promise<void>;
+    /* The highlighter once every one of `langs` and `theme` is in, or null while one is still on its way. */
+    ready(langs: Iterable<string>, theme: string): Highlighter | null;
+    /* The language shiki draws `lang` in: its own grammar, or plain text. Only meaningful once a load settled. */
+    language(lang: string): string;
+    /* The tokenizer for a language in a theme, or null while shiki, the grammar or the theme is still on its way. */
+    tokenizer(lang: string, theme: string): { tokenize: Tokenize<GrammarState>; fg: string | undefined } | null;
+}
+
+/* Plain text when the highlighter has no grammar for `lang`, as a bundle without that language answers. */
+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;
+    }
+}
+
+function createCodeHighlighter(source: () => Promise<Highlighter>): CodeHighlighter {
+    let highlighter: Highlighter | null = null;
+    let highlighterLoad: Promise<Highlighter> | null = null;
+    const languages = new Map<string, string>();
+    const languageLoads = new Map<string, Promise<void>>();
+    const themes = new Set<string>();
+    const themeLoads = new Map<string, Promise<void>>();
+    const tokenizers = new Map<string, { tokenize: Tokenize<GrammarState>; fg: string | undefined }>();
+
+    const load = (): Promise<Highlighter> => {
+        highlighterLoad ??= source().then((loaded) => {
+            highlighter = loaded;
+            return loaded;
+        });
+        return highlighterLoad;
+    };
+
+    const ready = (langs: Iterable<string>, theme: string): Highlighter | null => {
+        if (highlighter === null || !themes.has(theme)) {
+            return null;
+        }
+        for (const lang of langs) {
+            if (!languages.has(lang)) {
+                return null;
+            }
+        }
+        return highlighter;
+    };
+
+    const language = (lang: string): string => languages.get(lang) ?? PLAIN;
+
+    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: (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;
+        }
+    };
+}
+
+// Shiki loads on the first code it draws, not with the app; the web bundle covers the languages a coding agent writes.
+function loadBundled(): Promise<Highlighter> {
+    return import('shiki/bundle/web').then(({ createHighlighter }) => createHighlighter({ themes: [], langs: [] }) as Promise<Highlighter>);
+}
+
+let bundled: CodeHighlighter | null = null;
+const borrowed = new WeakMap<() => Promise<Highlighter>, CodeHighlighter>();
+
+/* The highlighter a host lends, which stays the host's, or without one the web bundle's of this package. */
+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;
+}
+
+/* The code highlighter of the host this is rendered under. */
+export function useCodeHighlighter(): CodeHighlighter {
+    return codeHighlighter(useChatHost().code.highlighter);
+}
+
+/* Loads the grammar of one language into the web bundle's highlighter, once. */
+export function loadLanguage(lang: string): Promise<void> {
+    return codeHighlighter().loadLanguage(lang);
+}
+
+/* Loads a theme into the web bundle's highlighter, once: one of `custom` by its name, or a bundled one by its id. */
+export function loadTheme(theme: string, custom: ChatHost['code']['custom']): Promise<void> {
+    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' } : {}),
+        ...(style & 2 ? { fontWeight: 'bold' } : {}),
+        ...(decorations ? { textDecoration: decorations } : {})
+    };
+}

package/src/chat/ui/index.ts

@@ -0,0 +1,109 @@
+// Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
+export { AccountPill } from './AccountPill';
+export { AnsiOutput } from './AnsiOutput';
+export { BookmarkMarker } from './BookmarkMarker';
+export { BookmarkSubmenu } from './BookmarkSubmenu';
+export { ChatActivity, StatusIcon } from './ChatActivity';
+export { ChatReferenceChip } from './ChatReferenceChip';
+export { CodeBlock } from './CodeBlock';
+export { Composer } from './Composer';
+export { type ComposerInputHandle, ComposerInput, type InputSelection } from './ComposerInput';
+export { default as DiffPool } from './DiffPool';
+export { default as EditDiff } from './EditDiff';
+export { FadingWords } from './FadingWords';
+export { GoalDock, GoalPill } from './GoalDock';
+export { ImageThumb, type ImageThumbProps } from './ImageView';
+export { LimitDock, LimitPill } from './LimitState';
+export { ReplyMarkdown, MessageMarkdown, Markdown } from './Markdown';
+export { MermaidBlock } from './MermaidBlock';
+export { MessageActions } from './MessageActions';
+export { ModelPicker, StashPicker } from './Pickers';
+export { type PromptHold, PromptComposer } from './PromptComposer';
+export { QuoteButton } from './QuoteButton';
+export { ResumeCompactionDock } from './ResumeCompactionDock';
+export { RowTime } from './RowTime';
+export { RunSettings } from './RunSettings';
+export { Scrubber, type CardChat } from './Scrubber';
+export { SubagentTitleCrumb, SubagentBreadcrumb, SubagentActions } from './SubagentControls';
+export { SubagentInfo } from './SubagentInfo';
+export { SubagentStopButton } from './SubagentStopButton';
+export { SubagentTimeline } from './SubagentTimeline';
+export { Timeline } from './Timeline';
+export { TimelineMenuPopup, BookmarkMenuItems } from './TimelineMenu';
+export { default as UnifiedDiff } from './UnifiedDiff';
+export { UploadThumb } from './UploadThumb';
+export { VisualDialogs } from './VisualDialogs';
+export { type VisualFrameProps, VisualFrame } from './VisualFrame';
+export { WelcomeGreeting } from './Welcome';
+export { chipDecorations, type ChipChoices } from './composer/chips';
+export { externalChange, markdownLanguage, composerEditorExtensions } from './composer/editor';
+export { insertAtSelection } from './composer/insert';
+export {
+    listItemAt,
+    enterAction,
+    inOpenFence,
+    recallDirection,
+    type EnterAction,
+    type EnterKeys,
+    type ListItem,
+    type EnterContext,
+    type RecallContext
+} from './composer/keys';
+export {
+    createDiffSyntaxRuntime,
+    diffSyntaxRuntime,
+    type DiffSyntaxRuntime,
+    type DiffSyntaxRuntimeOptions,
+    type DiffSyntaxSession,
+    type DiffSyntaxMapping,
+    type DiffSourceTokenSession,
+    diffSourceTokens
+} from './diff-syntax';
+export { useDiffTheme } from './diff-theme';
+export type { UnifiedDiffProps } from './diff/diff-props';
+export { FileLinkContext, useFileLinkCwd, useFileLinkScopeId, useOpenFileLink } from './file-links';
+export { type ChatFindField, type FindReveal, useOpenForFind } from './find-reveal';
+export type { DiffContents } from './full-diff';
+export { type UiBlockFrameProps, UiBlockFrame, type UiBlockFix, type UiBlockFooterProps } from './intelligent-ui/UiBlockFrame';
+export { UiFallbackPart, type UiFallbackProblem } from './intelligent-ui/UiFallbackPart';
+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,
+    UiLinkTarget,
+    UiLink,
+    UiAnswer,
+    UiLiveStatus,
+    UiLiveValue,
+    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';
+export { ForksRow } from './rows/ForksRow';
+export { GeneratedImageRow } from './rows/GeneratedImageRow';
+export {
+    UserRow,
+    ReportRow,
+    ReplyHeader,
+    AssistantRow,
+    ThinkingRow,
+    LiveThoughtRow,
+    NoteRow,
+    AgentTurnRow,
+    CompactionRow,
+    ApprovalHistoryRow,
+    QuestionHistoryRow
+} from './rows/MessageRows';
+export { type RowContainerProps, RowContainer } from './rows/RowContainer';
+export { Row, type RowProps } from './rows/Rows';
+export { SubagentRow, SubagentBranchRow } from './rows/SubagentRow';
+export { TaskRow } from './rows/TaskRow';
+export { VisualRow } from './rows/VisualRow';
+export { ToggleLine, WorkRow, RunningFor, WorkLiveRow, WorkGroupRow, TurnFoldRow, ChangedFilesRow, WorkingRow } from './rows/WorkRows';
+export { WorkflowRow } from './rows/WorkflowRow';
+export { useDiffSourceTokens } from './use-diff-source-tokens';

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

@@ -26,7 +26,7 @@ import {
 } from '@adecore/intelligent-ui';
 import { ErrorBoundary, Tooltip } from '@adecore/ui';
 import type { ChatUiAnswer, ChatUiQueryState } from '@adecore/agent-contracts';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import { UiReplyNavigationContext } from '../reply-context';
 import { ReplyMarkdown } from '../Markdown';
 import { rehypeFadeWords } from '../rehype-fade';
@@ -314,7 +314,7 @@ interface UiNodeBoundaryState {
 }
 
 class UiNodeBoundary extends Component<UiNodeBoundaryProps, UiNodeBoundaryState> {
-    state = { failed: false, node: this.props.node };
+    override state = { failed: false, node: this.props.node };
 
     static getDerivedStateFromError(): { failed: boolean } {
         return { failed: true };
@@ -324,7 +324,7 @@ class UiNodeBoundary extends Component<UiNodeBoundaryProps, UiNodeBoundaryState>
         return props.node === state.node ? null : { failed: false, node: props.node };
     }
 
-    render(): ReactNode {
+    override render(): ReactNode {
         return this.state.failed ? <UiFallbackPart fallback={this.props.node.fallback} problem={{ kind: 'failed' }} /> : this.props.children;
     }
 }
@@ -379,6 +379,7 @@ function UiBlockBody({
     answered?: ChatUiAnswer;
     frozen?: ChatUiQueryState['blocks'][string];
 }): ReactNode {
+    const host = useChatHost();
     const { t } = useTranslation('agent-chat');
     const key = JSON.stringify([context.scopeId, context.chatId, context.itemId, block.id]);
     const [state] = useState(() => localState(key, block, answered));
@@ -428,7 +429,7 @@ function UiBlockBody({
         [sources, element]
     );
     const liveValue = useUiLiveValues(block, evaluation.nodes, queries.currentReadings);
-    const sendChoice = chatHost().intelligentUi?.sendChoice;
+    const sendChoice = host.intelligentUi?.sendChoice;
     const rendering: UiRenderContext = {
         ...context,
         ...links,

package/src/chat/ui/intelligent-ui/renderers/content.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import type { UiProps } from '@adecore/intelligent-ui';
 import { PreviewCard, Tooltip } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
-import { chatHost } from '../../../../host';
+import { useChatHost } from '../../../../host';
 import { CodeBlock } from '../../CodeBlock';
 import { CodeStreamingContext } from '../../code-streaming';
 import { ImageThumb } from '../../ImageView';
@@ -26,7 +26,8 @@ export function CodeBlockRenderer({ node }: UiRendererProps<UiProps<'CodeBlock'>
 
 /* Its own component, so the host's hook is only called for an image that names an attachment. */
 function AttachedImage({ scopeId, chatId, attachmentId, alt }: { scopeId: string; chatId: string; attachmentId: string; alt: string }) {
-    const source = chatHost().attachments.useUrl(scopeId, chatId, attachmentId);
+    const host = useChatHost();
+    const source = host.attachments.useUrl(scopeId, chatId, attachmentId);
     return <ImageThumb source={source} alt={alt} className="max-h-70 max-w-full object-contain" />;
 }
 

package/src/chat/ui/intelligent-ui/use-ui-links.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { ChatUiLinkReading, ChatUiQueryState } from '@adecore/agent-contracts';
 import { uiLinkTargets, type UiLinkTarget } from '@adecore/intelligent-ui/links';
 import { uiInputValues, UI_HOST_LIMITS, type UiBlock, UiState } from '@adecore/intelligent-ui';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import type { UiRenderContext } from './render-context';
 
 interface LinkState {
@@ -23,7 +23,7 @@ export function useUiLinks(
     const [checked, setChecked] = useState<Record<string, LinkState>>({});
     // What each node was last checked as, so a change of input checks only the targets it moved.
     const asked = useRef(new Map<string, string>());
-    const host = chatHost().intelligentUi;
+    const host = useChatHost().intelligentUi;
     const values = uiInputValues(block, state);
     const scope = state.scope();
     const queryValues = Object.fromEntries(

package/src/chat/ui/intelligent-ui/use-ui-queries.ts

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { ChatUiQueryReading, ChatUiQueryState } from '@adecore/agent-contracts';
 import { uiInputValues, UI_CATALOG_VERSION, UI_HOST_LIMITS, UiState, type UiBlock, type UiViewNode, type UiNode } from '@adecore/intelligent-ui';
-import { chatHost } from '../../../host';
+import { useChatHost } from '../../../host';
 import type { UiLiveValue, UiLiveStatus, UiRenderContext } from './render-context';
 
 interface LocalReading {
@@ -43,6 +43,7 @@ export function useUiQueries(
     element: HTMLDivElement | null,
     frozen?: ChatUiQueryState['blocks'][string]
 ) {
+    const host = useChatHost();
     const [readings, setReadings] = useState<Record<string, LocalReading>>({});
     const [busyInput, setBusyInput] = useState<string | null>(null);
     const lastRead = useRef({ inputKey: '', at: 0 });
@@ -70,8 +71,8 @@ export function useUiQueries(
     };
     const reads = readsFor(JSON.parse(inputs));
     const ready = reads !== null;
-    const query = chatHost().intelligentUi?.query;
-    const subscribe = chatHost().intelligentUi?.subscribe;
+    const query = host.intelligentUi?.query;
+    const subscribe = host.intelligentUi?.subscribe;
     useEffect(() => {
         const scope = state.scope();
         for (const name of Object.keys(block.queries)) {