@adecore/agents-react 0.23.1 → 0.24.0

package/dist/chat/ui/highlighter.js

@@ -0,0 +1,151 @@
+import { useChatHost } from '../../host.js';
+import { shikiThemeOf } from './code-theme.js';
+// A plain language needs no grammar; shiki draws it in the theme's own foreground.
+const PLAIN = 'text';
+/* Plain text when the highlighter has no grammar for `lang`, as a bundle without that language answers. */
+async function grammarOf(loaded, lang) {
+    if (lang === PLAIN || loaded.getLoadedLanguages().includes(lang)) {
+        return lang;
+    }
+    try {
+        await loaded.loadLanguage(lang);
+        return lang;
+    }
+    catch {
+        return PLAIN;
+    }
+}
+function createCodeHighlighter(source) {
+    let highlighter = null;
+    let highlighterLoad = null;
+    const languages = new Map();
+    const languageLoads = new Map();
+    const themes = new Set();
+    const themeLoads = new Map();
+    const tokenizers = new Map();
+    const load = () => {
+        highlighterLoad ??= source().then((loaded) => {
+            highlighter = loaded;
+            return loaded;
+        });
+        return highlighterLoad;
+    };
+    const ready = (langs, theme) => {
+        if (highlighter === null || !themes.has(theme)) {
+            return null;
+        }
+        for (const lang of langs) {
+            if (!languages.has(lang)) {
+                return null;
+            }
+        }
+        return highlighter;
+    };
+    const language = (lang) => 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));
+                    }
+                    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, 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() {
+    return import('shiki/bundle/web').then(({ createHighlighter }) => createHighlighter({ themes: [], langs: [] }));
+}
+let bundled = null;
+const borrowed = new WeakMap();
+/* The highlighter a host lends, which stays the host's, or without one the web bundle's of this package. */
+export function codeHighlighter(source) {
+    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() {
+    return codeHighlighter(useChatHost().code.highlighter);
+}
+/* Loads the grammar of one language into the web bundle's highlighter, once. */
+export function loadLanguage(lang) {
+    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, custom) {
+    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, theme) {
+    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) {
+    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, theme) {
+    return codeHighlighter().tokenizer(lang, theme);
+}
+/* The inline style of one token; undefined when it only has the surrounding color. */
+export function tokenStyle(token) {
+    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/dist/chat/ui/index.d.ts

@@ -0,0 +1,67 @@
+export { AccountPill } from './AccountPill.js';
+export { AnsiOutput } from './AnsiOutput.js';
+export { BookmarkMarker } from './BookmarkMarker.js';
+export { BookmarkSubmenu } from './BookmarkSubmenu.js';
+export { ChatActivity, StatusIcon } from './ChatActivity.js';
+export { ChatReferenceChip } from './ChatReferenceChip.js';
+export { CodeBlock } from './CodeBlock.js';
+export { Composer } from './Composer.js';
+export { type ComposerInputHandle, ComposerInput, type InputSelection } from './ComposerInput.js';
+export { default as DiffPool } from './DiffPool.js';
+export { default as EditDiff } from './EditDiff.js';
+export { FadingWords } from './FadingWords.js';
+export { GoalDock, GoalPill } from './GoalDock.js';
+export { ImageThumb, type ImageThumbProps } from './ImageView.js';
+export { LimitDock, LimitPill } from './LimitState.js';
+export { ReplyMarkdown, MessageMarkdown, Markdown } from './Markdown.js';
+export { MermaidBlock } from './MermaidBlock.js';
+export { MessageActions } from './MessageActions.js';
+export { ModelPicker, StashPicker } from './Pickers.js';
+export { type PromptHold, PromptComposer } from './PromptComposer.js';
+export { QuoteButton } from './QuoteButton.js';
+export { ResumeCompactionDock } from './ResumeCompactionDock.js';
+export { RowTime } from './RowTime.js';
+export { RunSettings } from './RunSettings.js';
+export { Scrubber, type CardChat } from './Scrubber.js';
+export { SubagentTitleCrumb, SubagentBreadcrumb, SubagentActions } from './SubagentControls.js';
+export { SubagentInfo } from './SubagentInfo.js';
+export { SubagentStopButton } from './SubagentStopButton.js';
+export { SubagentTimeline } from './SubagentTimeline.js';
+export { Timeline } from './Timeline.js';
+export { TimelineMenuPopup, BookmarkMenuItems } from './TimelineMenu.js';
+export { default as UnifiedDiff } from './UnifiedDiff.js';
+export { UploadThumb } from './UploadThumb.js';
+export { VisualDialogs } from './VisualDialogs.js';
+export { type VisualFrameProps, VisualFrame } from './VisualFrame.js';
+export { WelcomeGreeting } from './Welcome.js';
+export { chipDecorations, type ChipChoices } from './composer/chips.js';
+export { externalChange, markdownLanguage, composerEditorExtensions } from './composer/editor.js';
+export { insertAtSelection } from './composer/insert.js';
+export { listItemAt, enterAction, inOpenFence, recallDirection, type EnterAction, type EnterKeys, type ListItem, type EnterContext, type RecallContext } from './composer/keys.js';
+export { createDiffSyntaxRuntime, diffSyntaxRuntime, type DiffSyntaxRuntime, type DiffSyntaxRuntimeOptions, type DiffSyntaxSession, type DiffSyntaxMapping, type DiffSourceTokenSession, diffSourceTokens } from './diff-syntax.js';
+export { useDiffTheme } from './diff-theme.js';
+export type { UnifiedDiffProps } from './diff/diff-props.js';
+export { FileLinkContext, useFileLinkCwd, useFileLinkScopeId, useOpenFileLink } from './file-links.js';
+export { type ChatFindField, type FindReveal, useOpenForFind } from './find-reveal.js';
+export type { DiffContents } from './full-diff.js';
+export { type UiBlockFrameProps, UiBlockFrame, type UiBlockFix, type UiBlockFooterProps } from './intelligent-ui/UiBlockFrame.js';
+export { UiFallbackPart, type UiFallbackProblem } from './intelligent-ui/UiFallbackPart.js';
+export { UiReply } from './intelligent-ui/UiReply.js';
+export { uiChartData, type UiChartSeries, type UiChartValues, type UiChartData } from './intelligent-ui/chart-data.js';
+export { uiNodeLabel } from './intelligent-ui/node-text.js';
+export { UI_RENDERERS } from './intelligent-ui/registry.js';
+export type { UiRenderContext, UiRendererProps, UiLinkTarget, UiLink, UiAnswer, UiLiveStatus, UiLiveValue, UiRenderer, UiRenderers } from './intelligent-ui/render-context.js';
+export { uiTableColumns, type UiColumnKind, type UiTableColumn } from './intelligent-ui/table-data.js';
+export type { QuoteTaker } from './quote-selection.js';
+export { ReplyContext } from './reply-context.js';
+export { ForksRow } from './rows/ForksRow.js';
+export { GeneratedImageRow } from './rows/GeneratedImageRow.js';
+export { UserRow, ReportRow, ReplyHeader, AssistantRow, ThinkingRow, LiveThoughtRow, NoteRow, AgentTurnRow, CompactionRow, ApprovalHistoryRow, QuestionHistoryRow } from './rows/MessageRows.js';
+export { type RowContainerProps, RowContainer } from './rows/RowContainer.js';
+export { Row, type RowProps } from './rows/Rows.js';
+export { SubagentRow, SubagentBranchRow } from './rows/SubagentRow.js';
+export { TaskRow } from './rows/TaskRow.js';
+export { VisualRow } from './rows/VisualRow.js';
+export { ToggleLine, WorkRow, RunningFor, WorkLiveRow, WorkGroupRow, TurnFoldRow, ChangedFilesRow, WorkingRow } from './rows/WorkRows.js';
+export { WorkflowRow } from './rows/WorkflowRow.js';
+export { useDiffSourceTokens } from './use-diff-source-tokens.js';

package/dist/chat/ui/index.js

@@ -0,0 +1,64 @@
+// Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
+export { AccountPill } from './AccountPill.js';
+export { AnsiOutput } from './AnsiOutput.js';
+export { BookmarkMarker } from './BookmarkMarker.js';
+export { BookmarkSubmenu } from './BookmarkSubmenu.js';
+export { ChatActivity, StatusIcon } from './ChatActivity.js';
+export { ChatReferenceChip } from './ChatReferenceChip.js';
+export { CodeBlock } from './CodeBlock.js';
+export { Composer } from './Composer.js';
+export { ComposerInput } from './ComposerInput.js';
+export { default as DiffPool } from './DiffPool.js';
+export { default as EditDiff } from './EditDiff.js';
+export { FadingWords } from './FadingWords.js';
+export { GoalDock, GoalPill } from './GoalDock.js';
+export { ImageThumb } from './ImageView.js';
+export { LimitDock, LimitPill } from './LimitState.js';
+export { ReplyMarkdown, MessageMarkdown, Markdown } from './Markdown.js';
+export { MermaidBlock } from './MermaidBlock.js';
+export { MessageActions } from './MessageActions.js';
+export { ModelPicker, StashPicker } from './Pickers.js';
+export { PromptComposer } from './PromptComposer.js';
+export { QuoteButton } from './QuoteButton.js';
+export { ResumeCompactionDock } from './ResumeCompactionDock.js';
+export { RowTime } from './RowTime.js';
+export { RunSettings } from './RunSettings.js';
+export { Scrubber } from './Scrubber.js';
+export { SubagentTitleCrumb, SubagentBreadcrumb, SubagentActions } from './SubagentControls.js';
+export { SubagentInfo } from './SubagentInfo.js';
+export { SubagentStopButton } from './SubagentStopButton.js';
+export { SubagentTimeline } from './SubagentTimeline.js';
+export { Timeline } from './Timeline.js';
+export { TimelineMenuPopup, BookmarkMenuItems } from './TimelineMenu.js';
+export { default as UnifiedDiff } from './UnifiedDiff.js';
+export { UploadThumb } from './UploadThumb.js';
+export { VisualDialogs } from './VisualDialogs.js';
+export { VisualFrame } from './VisualFrame.js';
+export { WelcomeGreeting } from './Welcome.js';
+export { chipDecorations } from './composer/chips.js';
+export { externalChange, markdownLanguage, composerEditorExtensions } from './composer/editor.js';
+export { insertAtSelection } from './composer/insert.js';
+export { listItemAt, enterAction, inOpenFence, recallDirection } from './composer/keys.js';
+export { createDiffSyntaxRuntime, diffSyntaxRuntime, diffSourceTokens } from './diff-syntax.js';
+export { useDiffTheme } from './diff-theme.js';
+export { FileLinkContext, useFileLinkCwd, useFileLinkScopeId, useOpenFileLink } from './file-links.js';
+export { useOpenForFind } from './find-reveal.js';
+export { UiBlockFrame } from './intelligent-ui/UiBlockFrame.js';
+export { UiFallbackPart } from './intelligent-ui/UiFallbackPart.js';
+export { UiReply } from './intelligent-ui/UiReply.js';
+export { uiChartData } from './intelligent-ui/chart-data.js';
+export { uiNodeLabel } from './intelligent-ui/node-text.js';
+export { UI_RENDERERS } from './intelligent-ui/registry.js';
+export { uiTableColumns } from './intelligent-ui/table-data.js';
+export { ReplyContext } from './reply-context.js';
+export { ForksRow } from './rows/ForksRow.js';
+export { GeneratedImageRow } from './rows/GeneratedImageRow.js';
+export { UserRow, ReportRow, ReplyHeader, AssistantRow, ThinkingRow, LiveThoughtRow, NoteRow, AgentTurnRow, CompactionRow, ApprovalHistoryRow, QuestionHistoryRow } from './rows/MessageRows.js';
+export { RowContainer } from './rows/RowContainer.js';
+export { Row } from './rows/Rows.js';
+export { SubagentRow, SubagentBranchRow } from './rows/SubagentRow.js';
+export { TaskRow } from './rows/TaskRow.js';
+export { VisualRow } from './rows/VisualRow.js';
+export { ToggleLine, WorkRow, RunningFor, WorkLiveRow, WorkGroupRow, TurnFoldRow, ChangedFilesRow, WorkingRow } from './rows/WorkRows.js';
+export { WorkflowRow } from './rows/WorkflowRow.js';
+export { useDiffSourceTokens } from './use-diff-source-tokens.js';

package/dist/chat/ui/intelligent-ui/UiReply.js

@@ -4,7 +4,7 @@ import ReactMarkdown, {} from 'react-markdown';
 import { useTranslation } from 'react-i18next';
 import { evaluateUiBlock, uiInputValues, isUiComponent, UI_CATALOG_VERSION, UiState } from '@adecore/intelligent-ui';
 import { ErrorBoundary, Tooltip } from '@adecore/ui';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 import { UiReplyNavigationContext } from '../reply-context.js';
 import { ReplyMarkdown } from '../Markdown.js';
 import { rehypeFadeWords } from '../rehype-fade.js';
@@ -233,6 +233,7 @@ function UiNodeBody({ node, parent, texts, context }) {
     return (_jsx(Renderer, { node: node, context: context, children: _jsx(UiNodes, { nodes: node.children, parent: node.type, texts: texts, context: context }) }));
 }
 function UiBlockBody({ block, context, answered, frozen }) {
+    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));
@@ -273,7 +274,7 @@ function UiBlockBody({ block, context, answered, frozen }) {
             : undefined
     }), [sources, element]);
     const liveValue = useUiLiveValues(block, evaluation.nodes, queries.currentReadings);
-    const sendChoice = chatHost().intelligentUi?.sendChoice;
+    const sendChoice = host.intelligentUi?.sendChoice;
     const rendering = {
         ...context,
         ...links,

package/dist/chat/ui/intelligent-ui/renderers/content.js

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

package/dist/chat/ui/intelligent-ui/use-ui-links.js

@@ -1,14 +1,14 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { uiLinkTargets } from '@adecore/intelligent-ui/links';
 import { uiInputValues, UI_HOST_LIMITS, UiState } from '@adecore/intelligent-ui';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 // Inputs that change in a run, such as a dragged slider, check their links once the run rested.
 const LINK_SETTLE_MS = 300;
 export function useUiLinks(block, state, context, reads, frozen) {
     const [checked, setChecked] = useState({});
     // What each node was last checked as, so a change of input checks only the targets it moved.
     const asked = useRef(new Map());
-    const host = chatHost().intelligentUi;
+    const host = useChatHost().intelligentUi;
     const values = uiInputValues(block, state);
     const scope = state.scope();
     const queryValues = Object.fromEntries(Object.keys(block.queries)

package/dist/chat/ui/intelligent-ui/use-ui-queries.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { uiInputValues, UI_CATALOG_VERSION, UI_HOST_LIMITS, UiState } from '@adecore/intelligent-ui';
-import { chatHost } from '../../../host.js';
+import { useChatHost } from '../../../host.js';
 const NO_READINGS = {};
 // A changed input reads once it has rested this long, so dragging a slider reads its last value only.
 const INPUT_SETTLE_MS = 300;
@@ -18,6 +18,7 @@ function documentVisible() {
     return document.visibilityState !== 'hidden';
 }
 export function useUiQueries(block, state, context, element, frozen) {
+    const host = useChatHost();
     const [readings, setReadings] = useState({});
     const [busyInput, setBusyInput] = useState(null);
     const lastRead = useRef({ inputKey: '', at: 0 });
@@ -44,8 +45,8 @@ export function useUiQueries(block, state, context, element, frozen) {
     };
     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)) {

package/dist/chat/ui/markdown-blocks.d.ts

@@ -1,6 +1,14 @@
 export interface MarkdownBlock {
     text: string;
     openFence: boolean;
+    fence?: MarkdownFence;
+}
+export interface MarkdownFence {
+    marker: string;
+    info: string;
+    body: string;
+    closed: boolean;
+    source: string;
 }
 export declare function splitMarkdownBlocks(text: string): MarkdownBlock[];
 export declare function settledBlocksText(text: string): string;