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

package/dist/chat/ui/ChatReferenceChip.d.ts

@@ -0,0 +1,4 @@
+export declare function ChatReferenceChip({ chatId, onRemove }: {
+    chatId: string;
+    onRemove?: () => void;
+}): import("react").JSX.Element;

package/dist/chat/ui/ChatReferenceChip.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { MessageSquare, X } from 'lucide-react';
+import { chatHost } from '../../host.js';
+import { CHIP_IN_MESSAGE, MENTION_TONE } from './chips.js';
+import { Icon, Tooltip } from '@adecore/ui';
+/* A chat attached to a message, under the title it has now rather than the one it had when it was attached. */
+export function ChatReferenceChip({ chatId, onRemove }) {
+    const { t } = useTranslation('agent-chat');
+    const chat = chatHost()
+        .useReferableChats()
+        .find((candidate) => candidate.id === chatId);
+    const title = chat === undefined ? t('chatReference.gone') : chat.title || t('chatReference.untitled');
+    return (_jsxs("span", { className: clsx(MENTION_TONE, CHIP_IN_MESSAGE), children: [_jsx(Icon, { icon: MessageSquare, size: 12, className: "shrink-0" }), _jsx("span", { className: "truncate", children: title }), onRemove && (_jsx(Tooltip, { label: t('chatReference.remove', { title }), name: true, children: _jsx("button", { className: "-mr-0.5 shrink-0 rounded-sm opacity-70 hover:opacity-100", onClick: onRemove, children: _jsx(Icon, { icon: X, size: 12 }) }) }))] }));
+}

package/dist/chat/ui/CodeBlock.d.ts

@@ -0,0 +1,4 @@
+export declare function CodeBlock({ code, lang }: {
+    code: string;
+    lang: string;
+}): import("react").JSX.Element;

package/dist/chat/ui/CodeBlock.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, memo, useContext, useEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { IncrementalLines } from './code-lines.js';
+import { CodeStreamingContext } from './code-streaming.js';
+import { WHOLE_FADE_CLASS } from './rehype-fade.js';
+import { shikiThemeOf, useCodeTheme } from './code-theme.js';
+// A plain language needs no grammar; shiki draws it in the theme's own foreground.
+const PLAIN = 'text';
+let highlighter = null;
+let highlighterLoad = null;
+const loadedLanguages = new Set([PLAIN]);
+const languageLoads = new Map();
+const loadedThemes = new Set();
+const themeLoads = new Map();
+const tokenizers = new Map();
+// Shiki loads on the first code block, not with the app; the web bundle covers the languages a coding agent writes.
+function loadHighlighter() {
+    highlighterLoad ??= import('shiki/bundle/web').then(async ({ createHighlighter }) => {
+        highlighter = await createHighlighter({ themes: [], langs: [] });
+        return highlighter;
+    });
+    return highlighterLoad;
+}
+function resolveLanguage(lang, known) {
+    return known !== null && lang in known ? lang : PLAIN;
+}
+let bundled = null;
+/* Loads the highlighter and the grammar of one language, once each. */
+function loadLanguage(lang) {
+    let load = languageLoads.get(lang);
+    if (!load) {
+        load = Promise.all([loadHighlighter(), import('shiki/bundle/web')]).then(async ([loaded, { bundledLanguages }]) => {
+            bundled = bundledLanguages;
+            const language = resolveLanguage(lang, bundledLanguages);
+            if (!loadedLanguages.has(language)) {
+                await loaded.loadLanguage(language);
+                loadedLanguages.add(language);
+            }
+        });
+        languageLoads.set(lang, load);
+    }
+    return load;
+}
+/* Loads a theme into the highlighter, once. */
+function loadTheme(theme) {
+    let load = themeLoads.get(theme);
+    if (!load) {
+        load = loadHighlighter().then(async (loaded) => {
+            await loaded.loadTheme(shikiThemeOf(theme));
+            loadedThemes.add(theme);
+        });
+        themeLoads.set(theme, load);
+    }
+    return load;
+}
+/* The tokenizer for a language in a theme, or null while shiki, the grammar or the theme is still on its way. */
+function tokenizerFor(lang, theme) {
+    if (highlighter === null || bundled === null || !languageLoads.has(lang) || !loadedThemes.has(theme)) {
+        return null;
+    }
+    const language = resolveLanguage(lang, bundled);
+    if (!loadedLanguages.has(language)) {
+        return null;
+    }
+    const key = `${language}:${theme}`;
+    let entry = tokenizers.get(key);
+    if (!entry) {
+        const loaded = highlighter;
+        const options = { lang: language, 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;
+}
+function styleOf(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 } : {})
+    };
+}
+/* A line whose tokens did not change keeps its elements, so a selection in it survives the next delta. */
+const CodeLine = memo(function CodeLine({ tokens }) {
+    return (_jsx("span", { className: "line", children: tokens.map((token, index) => (_jsx("span", { style: styleOf(token), children: token.content }, index))) }));
+});
+/*
+ * A fenced block, highlighted a line at a time. Until shiki and the grammar are there it holds its
+ * place invisibly in the same shape, so there is never a frame of bare code that turns colored. A
+ * fence that is still open is tokenized as it grows, and the same component carries on once it
+ * closes, so closing it does not draw it again.
+ */
+export function CodeBlock({ code, lang }) {
+    const theme = useCodeTheme();
+    const streaming = useContext(CodeStreamingContext);
+    // What loaded last, so a block whose theme changes draws again once the new one is in.
+    const [loaded, setLoaded] = useState(null);
+    const tokenizer = tokenizerFor(lang, theme);
+    // Only a block that had to wait fades in; one drawn highlighted from its first frame just stands there.
+    const [waited] = useState(tokenizer === null);
+    const lines = useMemo(() => (tokenizer ? new IncrementalLines(tokenizer.tokenize) : null), [tokenizer]);
+    const tokens = useMemo(() => lines?.update(code, !streaming) ?? null, [lines, code, streaming]);
+    useEffect(() => {
+        if (tokenizer !== null) {
+            return;
+        }
+        let cancelled = false;
+        Promise.all([loadLanguage(lang), loadTheme(theme)])
+            .then(() => !cancelled && setLoaded(`${lang}:${theme}`))
+            .catch(() => !cancelled && setLoaded('failed'));
+        return () => {
+            cancelled = true;
+        };
+    }, [lang, theme, tokenizer]);
+    if (tokenizer === null || tokens === null) {
+        const failed = loaded === 'failed';
+        return (_jsx("div", { className: clsx('chat-code', !failed && 'invisible'), "aria-hidden": failed ? undefined : true, children: _jsx("pre", { children: _jsx("code", { children: code }) }) }));
+    }
+    return (_jsx("div", { className: clsx('chat-code', waited && WHOLE_FADE_CLASS), children: _jsx("pre", { style: { color: tokenizer.fg }, children: _jsx("code", { children: tokens.map((line, index) => (_jsxs(Fragment, { children: [_jsx(CodeLine, { tokens: line }), index < tokens.length - 1 && '\n'] }, index))) }) }) }));
+}

package/dist/chat/ui/Composer.d.ts

@@ -0,0 +1,15 @@
+import type { AgentKind, ChatInfo, ModelSelection } from '@adecore/agent-contracts';
+import type { ChatSendExtras } from '../chat-client.js';
+interface ComposerProps {
+    chatId: string;
+    info: ChatInfo;
+    focused: boolean;
+    answerPromptsElsewhere?: () => void;
+    disabled: boolean;
+    readOnly?: boolean;
+    providerFixed: boolean;
+    onSend(text: string, extras: ChatSendExtras): void;
+    onRetarget(provider: AgentKind, selection: ModelSelection): Promise<void>;
+}
+export declare function Composer({ chatId, info, focused, answerPromptsElsewhere, disabled, readOnly, providerFixed, onSend, onRetarget }: ComposerProps): import("react").JSX.Element;
+export {};