@tangleai/assistant 0.21.1 → 0.24.1

package/src/component.js

@@ -1,4 +1,3 @@
-//@ts-check
 /** The visual assistant owns one app, its request lifecycle and its DOM listeners. */
 import { createApp, formEventFields } from '@jarenjs/app';
 import { createMdComponent } from '@jarenjs/md/component';
@@ -6,88 +5,108 @@ import { highlightPlugin } from '@jarenjs/md/plugins';
 import { mermaidPlugin } from '@jarenjs/mermaid/plugin';
 import { createLedger } from '@tangleai/context';
 import { createToolbox } from '@tangleai/agents';
-import { createAssistantState, createAssistantController, ASSISTANT_ACTIONS } from './index.js';
-import { createAssistantRules } from './views.js';
-import { assistantView } from './viewmodel.js';
-
-/**
- * @typedef {{ title?: string, launchLabel?: string, launchTitle?: string,
- *   intro?: string, capabilities?: string[], settingsHint?: string }} AssistantPresentation
- * @typedef {AssistantPresentation & Partial<Omit<Parameters<typeof createAssistantController>[0], 'getApp'>> & {
- *   settings?: any, transcript?: any, open?: boolean,
- *   schedule?: (flush: () => void) => void, onError?: (error: Error) => void,
- *   renderMarkdown?: (source: string) => any }} AssistantOptions
- */
+import { createAssistantState, createAssistantController, ASSISTANT_ACTIONS } from "./index.js";
+import { createAssistantRules } from "./views.js";
+import { assistantView } from "./viewmodel.js";
 const DEFAULT_PRESENTATION = {
-  title: 'Assistant', launchLabel: ' Assistant', launchTitle: 'Open assistant',
-  intro: 'Describe what you want to get done. The assistant can use the tools this host provides.',
-  capabilities: [],
-  settingsHint: 'Provider requests use your settings. This host controls local persistence.',
+    title: 'Assistant', launchLabel: ' Assistant', launchTitle: 'Open assistant',
+    intro: 'Describe what you want to get done. The assistant can use the tools this host provides.',
+    capabilities: [],
+    settingsHint: 'Provider requests use your settings. This host controls local persistence.',
 };
 let nextInstance = 0;
-/** @param {AssistantPresentation} value */
+/** @param value */
 function presentation(value) {
-  return Object.fromEntries(Object.entries(value).filter(([key]) => Object.hasOwn(DEFAULT_PRESENTATION, key)));
+    return Object.fromEntries(Object.entries(value).filter(([key]) => Object.hasOwn(DEFAULT_PRESENTATION, key)));
 }
-/** @param {HTMLElement | null} node @param {AssistantOptions} [options] */
+/** @param node @param [options] */
 export function mountAssistant(node, options = {}) {
-  let app, disposed = false, closing;
-  const id = `tangle-assistant-${++nextInstance}`;
-  let settings = options.settings ?? null, transcript = options.transcript ?? null;
-  const aiStorage = options.aiStorage ?? { read: () => settings, write: value => { settings = structuredClone(value); } };
-  const aiChat = options.aiChat ?? { read: () => transcript, write: value => { transcript = structuredClone(value); } };
-  const md = createMdComponent({ plugins: [highlightPlugin(), mermaidPlugin({ theme: 'host' })], headingIds: true, headingAnchors: true });
-  const renderMarkdown = options.renderMarkdown ?? (source => md.view(source, { slugPrefix: `user-content-${id}-` }));
-  const controller = createAssistantController({ ...options, aiStorage, aiChat,
-    ledger: options.ledger ?? createLedger(), toolbox: options.toolbox ?? createToolbox(), getApp: () => app });
-  app = createApp({
-    state: { ai: { ...createAssistantState(aiStorage.read(), aiChat.read()), open: options.open ?? false }, presentation: { ...DEFAULT_PRESENTATION, ...presentation(options) } },
-    actions: { ...ASSISTANT_ACTIONS, 'assistant/presentation': { patch: [{ op: 'replace', path: '/presentation', value: '$payload' }] } },
-    view: { $jslt: '0.1', modes: { assistant: { unmatched: 'error' } }, rules: [
-      { match: '$', body: ['section', { class: 'tangle-assistant', 'data-assistant-instance': id }, { $apply: ['$.ui.assistant', 'assistant'] }] },
-      ...createAssistantRules(`${id}-models`),
-    ] },
-  }, {
-    node, document: node?.ownerDocument, schedule: options.schedule, onError: options.onError,
-    eventFields: formEventFields(), effects: controller.effects,
-    afterRender: () => { if (node?.querySelectorAll) md.hydrate(node); },
-    viewModel: state => ({ ui: { assistant: { ...assistantView(state.ai, renderMarkdown), ...state.presentation,
-      capabilities: state.presentation.capabilities.map(text => ({ text })) } } }),
-  });
-  // A Markdown fragment belongs to this component, not to its host's hash router.
-  function click(event) {
-    const anchor = event.target.closest?.('a[href^="#"]');
-    const href = anchor?.getAttribute('href');
-    if (!href || href.startsWith('#/')) return;
-    event.preventDefault();
-    let fragment; try { fragment = decodeURIComponent(href.slice(1)); } catch { return; }
-    for (const target of node?.querySelectorAll('[id]') ?? []) {
-      if (target.id === fragment) { target.scrollIntoView?.({ block: 'nearest' }); break; }
+    let app, disposed = false, closing;
+    const id = `tangle-assistant-${++nextInstance}`;
+    let settings = options.settings ?? null, transcript = options.transcript ?? null;
+    const aiStorage = options.aiStorage ?? { read: () => settings, write: (value) => { settings = structuredClone(value); } };
+    const aiChat = options.aiChat ?? { read: () => transcript, write: (value) => { transcript = structuredClone(value); } };
+    const md = createMdComponent({ plugins: [highlightPlugin(), mermaidPlugin({ theme: 'host' })], headingIds: true, headingAnchors: true });
+    const renderMarkdown = options.renderMarkdown ?? (source => md.view(source, { slugPrefix: `user-content-${id}-` }));
+    const controller = createAssistantController({
+        ...options, aiStorage, aiChat,
+        ledger: options.ledger ?? createLedger(), toolbox: options.toolbox ?? createToolbox(), getApp: () => app
+    });
+    app = createApp({
+        state: { ai: { ...createAssistantState(aiStorage.read(), aiChat.read()), open: options.open ?? false }, presentation: { ...DEFAULT_PRESENTATION, ...presentation(options) } },
+        actions: { ...ASSISTANT_ACTIONS, 'assistant/presentation': { patch: [{ op: 'replace', path: '/presentation', value: '$payload' }] } },
+        view: {
+            $jslt: '0.1', modes: { assistant: { unmatched: 'error' } }, rules: [
+                { match: '$', body: ['section', { class: 'tangle-assistant', 'data-assistant-instance': id }, { $apply: ['$.ui.assistant', 'assistant'] }] },
+                ...createAssistantRules(`${id}-models`),
+            ]
+        },
+    }, {
+        node, document: node?.ownerDocument, schedule: options.schedule, onError: options.onError,
+        eventFields: formEventFields(), effects: controller.effects,
+        afterRender: () => { if (node?.querySelectorAll)
+            md.hydrate(node); },
+        viewModel: (state) => ({
+            ui: {
+                assistant: {
+                    ...assistantView(state.ai, renderMarkdown), ...state.presentation,
+                    capabilities: state.presentation.capabilities.map((text) => ({ text }))
+                }
+            }
+        }),
+    });
+    // A Markdown fragment belongs to this component, not to its host's hash router.
+    function click(event) {
+        const anchor = event.target.closest?.('a[href^="#"]');
+        const href = anchor?.getAttribute('href');
+        if (!href || href.startsWith('#/'))
+            return;
+        event.preventDefault();
+        let fragment;
+        try {
+            fragment = decodeURIComponent(href.slice(1));
+        }
+        catch {
+            return;
+        }
+        for (const target of node?.querySelectorAll('[id]') ?? []) {
+            if (target.id === fragment) {
+                target.scrollIntoView?.({ block: 'nearest' });
+                break;
+            }
+        }
     }
-  }
-  node?.addEventListener('click', click);
-  if (options.open) {
-    controller.effects['ai-ensure-settings']({}, app.dispatch);
-    controller.effects['ai-ledger-read']({}, app.dispatch);
-  }
-  return {
-    controller,
-    read: () => structuredClone(app.getState().ai),
-    dispatch(action, payload = null, event = null) { if (!disposed) app.dispatch(action, payload, event); },
-    subscribe(listener) { return app.subscribe(state => listener(structuredClone(state.ai))); },
-    /** Presentation updates retain the transcript, request and input node. */
-    update(/** @type {AssistantPresentation} */ next) {
-      if (!disposed) app.dispatch('assistant/presentation', { ...app.getState().presentation, ...presentation(next) });
-    },
-    dispose() {
-      if (disposed) return closing;
-      disposed = true; node?.removeEventListener('click', click);
-      closing = controller.dispose(); app.destroy(); return closing;
-    },
-  };
+    node?.addEventListener('click', click);
+    if (options.open) {
+        controller.effects['ai-ensure-settings']({}, app.dispatch);
+        controller.effects['ai-ledger-read']({}, app.dispatch);
+    }
+    return {
+        controller,
+        read: () => structuredClone(app.getState().ai),
+        dispatch(action, payload = null, event = null) { if (!disposed)
+            app.dispatch(action, payload, event); },
+        subscribe(listener) { return app.subscribe((state) => listener(structuredClone(state.ai))); },
+        /** Presentation updates retain the transcript, request and input node. */
+        update(next) {
+            if (!disposed)
+                app.dispatch('assistant/presentation', { ...app.getState().presentation, ...presentation(next) });
+        },
+        dispose() {
+            if (disposed)
+                return closing;
+            disposed = true;
+            node?.removeEventListener('click', click);
+            closing = controller.dispose();
+            app.destroy();
+            return closing;
+        },
+    };
 }
-/** @param {AssistantOptions} [options] */
+/** @param [options] */
 export function createAssistantWidget(options = {}) {
-  return { mount: (host, props) => mountAssistant(host, { ...options, ...props }),
-    update: (handle, props) => handle.update(props), unmount: handle => handle.dispose() };
+    return {
+        mount: (host, props) => mountAssistant(host, { ...options, ...props }),
+        update: (handle, props) => handle.update(props), unmount: (handle) => handle.dispose()
+    };
 }

package/src/controller.d.ts

@@ -4,13 +4,8 @@
  * injected `aiFetch` keeps the whole thing testable against a scripted
  * transport, and the injected `ledger` keeps it testable without a
  * store.
- * @param {{ toolbox: any, getApp: () => any,
- *   aiFetch?: typeof fetch,
- *   aiStorage: { read: () => any, write: (data: any) => any },
- *   aiChat: { read: () => any, write: (data: any) => any },
- *   ledger: any, system?: string, headers?: Record<string, string>, onDispose?: () => any }} deps
  */
-export function createAssistantController(deps: {
+export declare function createAssistantController(deps: {
     toolbox: any;
     getApp: () => any;
     aiFetch?: typeof fetch;