@dxos/plugin-assistant 0.8.4-main.c1de068 → 0.8.4-main.f5c0578

package/src/components/ChatContainer.tsx

@@ -2,40 +2,64 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Capabilities, useCapability } from '@dxos/app-framework';
-import { type AssociatedArtifact } from '@dxos/blueprints';
 import { getSpace } from '@dxos/client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
+import { type MaybePromise } from '@dxos/util';
 
-import { Chat } from './Chat';
-import { useChatProcessor, useChatServices } from '../hooks';
+import {
+  type AiChatProcessor,
+  useBlueprintRegistry,
+  useChatProcessor,
+  useChatServices,
+  useOnline,
+  usePresets,
+} from '../hooks';
 import { meta } from '../meta';
 import { type Assistant } from '../types';
 
+import { Chat } from './Chat';
+
 export type ChatContainerProps = {
-  role: string;
   chat: Assistant.Chat;
-  artifact?: AssociatedArtifact;
+  role?: string;
+  onProcessorReady?: (processor: AiChatProcessor) => MaybePromise<void>;
 };
 
-export const ChatContainer = ({ role, chat, artifact }: ChatContainerProps) => {
+export const ChatContainer = ({ chat, onProcessorReady }: ChatContainerProps) => {
   const space = getSpace(chat);
   const settings = useCapability(Capabilities.SettingsStore).getStore<Assistant.Settings>(meta.id)?.value;
-  const services = useChatServices({ space });
-  const processor = useChatProcessor({ chat, services, settings });
-  if (!processor) {
+  const services = useChatServices({ space, chat });
+  const [online, setOnline] = useOnline();
+  const { preset, ...chatProps } = usePresets(online);
+  const blueprintRegistry = useBlueprintRegistry();
+  const processor = useChatProcessor({ space, chat, preset, services, blueprintRegistry, settings });
+
+  useEffect(() => {
+    if (processor && onProcessorReady) {
+      const timeout = setTimeout(() => onProcessorReady(processor));
+      return () => clearTimeout(timeout);
+    }
+  }, [processor, onProcessorReady]);
+
+  if (!chat || !processor) {
     return null;
   }
 
-  // TODO(burdon): Add attention attributes.
   return (
     <StackItem.Content classNames='container-max-width'>
-      <Chat.Root chat={chat} processor={processor} artifact={artifact}>
+      <Chat.Root chat={chat} processor={processor}>
         <Chat.Thread />
-        <div className='pbe-4 pis-2 pie-2'>
-          <Chat.Prompt classNames='border border-subduedSeparator rounded-md' />
+        <div className='p-2'>
+          <Chat.Prompt
+            {...chatProps}
+            classNames='p-2 border border-transparent rounded-md'
+            preset={preset?.id}
+            online={online}
+            onChangeOnline={setOnline}
+          />
         </div>
       </Chat.Root>
     </StackItem.Content>

package/src/components/ChatDialog.tsx

@@ -4,16 +4,17 @@
 
 import React, { useCallback, useState } from 'react';
 
-import { useCapability, Capabilities } from '@dxos/app-framework';
+import { Capabilities, useCapability } from '@dxos/app-framework';
 import { getSpace } from '@dxos/client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { ChatDialog as NativeChatDialog } from '@dxos/react-ui-chat';
 
-import { Chat, type ChatRootProps } from './Chat';
-import { useChatProcessor, useChatServices } from '../hooks';
+import { useBlueprintRegistry, useChatProcessor, useChatServices, useOnline, usePresets } from '../hooks';
 import { meta } from '../meta';
 import { type Assistant } from '../types';
 
+import { Chat, type ChatRootProps } from './Chat';
+
 export type ChatDialogProps = {
   chat?: Assistant.Chat;
 };
@@ -23,8 +24,11 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
 
   const space = getSpace(chat);
   const settings = useCapability(Capabilities.SettingsStore).getStore<Assistant.Settings>(meta.id)?.value;
-  const services = useChatServices({ space });
-  const processor = useChatProcessor({ chat, services, settings });
+  const services = useChatServices({ space, chat });
+  const [online, setOnline] = useOnline();
+  const { preset, ...chatProps } = usePresets(online);
+  const blueprintRegistry = useBlueprintRegistry();
+  const processor = useChatProcessor({ space, chat, preset, services, blueprintRegistry, settings });
 
   // TODO(burdon): Refocus when open.
   const [open, setOpen] = useState(true);
@@ -54,7 +58,7 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
           <Chat.Thread />
         </NativeChatDialog.Content>
         <NativeChatDialog.Footer>
-          <Chat.Prompt expandable />
+          <Chat.Prompt {...chatProps} preset={preset?.id} online={online} onChangeOnline={setOnline} expandable />
         </NativeChatDialog.Footer>
       </NativeChatDialog.Root>
     </Chat.Root>

package/src/components/ChatPrompt/ChatOptions.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { type AiContextBinder } from '@dxos/assistant';
+import { type Blueprint } from '@dxos/blueprints';
+import { DropdownMenu, Icon, IconButton, useTranslation } from '@dxos/react-ui';
+
+import { useBlueprints } from '../../hooks';
+import { meta } from '../../meta';
+
+export type ChatOptionsProps = {
+  context?: AiContextBinder;
+  blueprintRegistry?: Blueprint.Registry;
+  onUpdateBlueprint?: (key: string, isActive: boolean) => void;
+};
+
+/**
+ * Manages the runtime context for the chat.
+ */
+// TODO(burdon): Refactor this as a Dialog (and move the object selector here also).
+export const ChatOptions = ({ context, blueprintRegistry, onUpdateBlueprint }: ChatOptionsProps) => {
+  const { t } = useTranslation(meta.id);
+
+  // TODO(burdon): Possibly constrain query as registry grows.
+  const blueprints = useMemo(() => blueprintRegistry?.query() ?? [], [blueprintRegistry]);
+
+  const activeBlueprints = useBlueprints({ context });
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <IconButton icon='ph--plus--regular' variant='ghost' size={5} iconOnly label={t('button add blueprint')} />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content side='left'>
+          <DropdownMenu.Viewport>
+            {blueprints.map((blueprint) => (
+              <DropdownMenu.CheckboxItem
+                key={blueprint.key}
+                checked={activeBlueprints?.get(blueprint.key) !== undefined}
+                onCheckedChange={(checked) => onUpdateBlueprint?.(blueprint.key, !!checked)}
+                classNames='gap-2'
+              >
+                <div className='flex-1 min-is-0'>{blueprint.name}</div>
+                <DropdownMenu.ItemIndicator asChild>
+                  <Icon icon='ph--check--regular' size={4} />
+                </DropdownMenu.ItemIndicator>
+              </DropdownMenu.CheckboxItem>
+            ))}
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};

package/src/components/ChatPrompt/ChatReferences.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback } from 'react';
 
-import { type ContextBinder } from '@dxos/assistant';
+import { type AiContextBinder } from '@dxos/assistant';
 import { type Space } from '@dxos/client/echo';
 import { Filter, Obj, Ref } from '@dxos/echo';
 import { type ThemedClassName, useAsyncState, useTranslation } from '@dxos/react-ui';
@@ -16,26 +16,28 @@ import { meta } from '../../meta';
 
 export type ChatReferencesProps = ThemedClassName<{
   space: Space;
-  context: ContextBinder;
-  onUpdate?: (ids: string[]) => void;
+  context: AiContextBinder;
+  onUpdate?: (dxns: string[]) => void;
 }>;
 
 export const ChatReferences = ({ classNames, space, context, onUpdate }: ChatReferencesProps) => {
-  const { t: _t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.id);
 
   const [items] = useAsyncState<TagPickerItemData[]>(async () => {
     const objects = await Ref.Array.loadAll(context.objects.value ?? []);
-    return objects.filter(isNonNullable).map((obj) => ({ id: obj.id, label: Obj.getLabel(obj) ?? obj.id }));
+    return objects
+      .filter(isNonNullable)
+      .map((obj) => ({ id: Obj.getDXN(obj).toString(), label: Obj.getLabel(obj) ?? Obj.getTypename(obj) ?? obj.id }));
   }, [context]);
 
   const handleSearch = useCallback<NonNullable<TagPickerOptions['onSearch']>>(
-    (text, ids) => {
+    (text, dxns) => {
       // TODO(burdon): Filter by Item tag (e.g., exclude "contacts") and Query by object label.
       // TODO(burdon): Change to Filter.text().
       const objects = space.db.query(Filter.everything()).runSync();
       return objects
-        .map(({ object }) => ({ id: object.id, label: Obj.getLabel(object) ?? '' }))
-        .filter(({ id, label }) => !ids.includes(id) && label.toLocaleLowerCase().includes(text.toLocaleLowerCase()));
+        .map(({ object }) => ({ id: Obj.getDXN(object).toString(), label: Obj.getLabel(object) ?? '' }))
+        .filter(({ id, label }) => !dxns.includes(id) && label.toLocaleLowerCase().includes(text.toLocaleLowerCase()));
     },
     [space],
   );
@@ -44,7 +46,7 @@ export const ChatReferences = ({ classNames, space, context, onUpdate }: ChatRef
     <TagPicker
       classNames={mx('h-[1.75rem] text-sm', classNames)}
       mode='multi-select'
-      // placeholder={t('context objects placeholder')}
+      placeholder={t('context objects placeholder')}
       items={items}
       onSearch={handleSearch}
       onUpdate={onUpdate}

package/src/components/ChatPrompt/index.ts

@@ -3,7 +3,7 @@
 //
 
 export * from './ChatActions';
-export * from './ChatOptionsMenu';
+export * from './ChatOptions';
 export * from './ChatPresets';
 export * from './ChatReferences';
 export * from './ChatStatusIndicator';

package/src/components/ChatThread/ChatMessage.tsx

@@ -2,13 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { Fragment, type FC, type PropsWithChildren } from 'react';
+import React, { type FC, Fragment, type PropsWithChildren, useMemo } from 'react';
 
 import { type Tool } from '@dxos/ai';
-import { Surface } from '@dxos/app-framework';
+import { ErrorBoundary, Surface } from '@dxos/app-framework';
+import { resolveRef } from '@dxos/client';
+import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
+import { DXN, DXN_ECHO_REGEXP } from '@dxos/keys';
+import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { Button, Icon, IconButton, useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { Button, IconButton, Link, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import {
   MarkdownViewer,
   ToggleContainer as NativeToggleContainer,
@@ -18,35 +22,39 @@ import { mx } from '@dxos/react-ui-theme';
 import { type ContentBlock, type DataType } from '@dxos/schema';
 import { safeParseJson } from '@dxos/util';
 
-import { Json, ToolBlock, isToolMessage } from './ToolBlock';
-import { type ChatProcessor } from '../../hooks';
 import { meta } from '../../meta';
 import { type ChatEvent } from '../Chat';
-import { ToolboxContainer } from '../Toolbox';
+import { Toolbox } from '../Toolbox';
+
+import { ObjectLink } from './Link';
+import { Json, ToolBlock, isToolMessage } from './ToolBlock';
+
+const panelClasses = 'flex flex-col is-full bg-activeSurface rounded-sm';
+const marginClasses = 'pie-4 pis-4';
+const paddingClasses = 'pis-2 pie-2 pbs-0.5 pbe-0.5';
 
 export type ChatMessageProps = ThemedClassName<{
   debug?: boolean;
   space?: Space;
   message: DataType.Message;
-  // TODO(burdon): Move to context.
-  processor?: ChatProcessor;
   tools?: Tool[];
   onEvent?: (event: ChatEvent) => void;
+  onDelete?: () => void;
 }>;
 
-export const ChatMessage = ({ classNames, debug, space, message, processor, tools, onEvent }: ChatMessageProps) => {
+export const ChatMessage = ({ classNames, debug, space, message, tools, onEvent, onDelete }: ChatMessageProps) => {
   const { t } = useTranslation(meta.id);
   const {
     sender: { role },
     blocks,
   } = message;
 
-  // TODO(burdon): Restructure types to make check unnecessary.
+  // TODO(burdon): Consolidate tools upstream?
   if (isToolMessage(message)) {
     return (
-      <MessageContainer classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}>
+      <MessageItem classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}>
         <ToolBlock classNames={panelClasses} message={message} tools={tools} />
-      </MessageContainer>
+      </MessageItem>
     );
   }
 
@@ -64,16 +72,18 @@ export const ChatMessage = ({ classNames, debug, space, message, processor, tool
           return null;
         }
 
-        const Component: BlockComponent = components[block._tag] ?? components.default!;
+        const Component: ContentBlockComponent = components[block._tag] ?? components.default!;
         if (!Component) {
           return null;
         }
 
         return (
           <Fragment key={idx}>
-            <MessageContainer classNames={classNames} user={block._tag === 'text' && role === 'user'}>
-              <Component space={space} processor={processor} block={block} onEvent={onEvent} />
-            </MessageContainer>
+            <MessageItem classNames={classNames} user={block._tag === 'text' && role === 'user'}>
+              <ErrorBoundary data={block}>
+                <Component space={space} block={block} onEvent={onEvent} />
+              </ErrorBoundary>
+            </MessageItem>
             {debug && (
               <div className={mx('flex justify-end text-subdued', marginClasses)}>
                 <pre className='text-xs'>{JSON.stringify({ block: block._tag })}</pre>
@@ -82,64 +92,122 @@ export const ChatMessage = ({ classNames, debug, space, message, processor, tool
           </Fragment>
         );
       })}
-      <div className={mx('flex justify-end pbs-2 pbe-2 opacity-50 hover:opacity-100', marginClasses)}>
-        <IconButton
-          classNames='animate-[fadeIn_0.5s]'
-          icon='ph--trash--regular'
-          iconOnly
-          label={t('button delete message')}
-          onClick={() => onEvent?.({ type: 'delete', id: message.id })}
-        />
-      </div>
+
+      {onDelete && (
+        <div className={mx('flex justify-end pbs-2 pbe-2 opacity-50 hover:opacity-100', marginClasses)}>
+          <IconButton
+            classNames='animate-[fadeIn_0.5s]'
+            icon='ph--trash--regular'
+            iconOnly
+            label={t('button delete message')}
+            onClick={() => onDelete()}
+          />
+        </div>
+      )}
     </>
   );
 };
 
-type BlockComponentProps = {
+type ContentBlockProps = {
   space?: Space;
   block: ContentBlock.Any;
-  /** @deprecated Replace with context */
-  processor?: ChatProcessor;
   onEvent?: (event: ChatEvent) => void;
 };
 
-type BlockComponent = FC<BlockComponentProps>;
+type ContentBlockComponent = FC<ContentBlockProps>;
 
-const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', BlockComponent>> = {
+/**
+ * Components for rendering content blocks.
+ */
+const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', ContentBlockComponent>> = {
   //
   // Text
   //
-  ['text' as const]: ({ block }) => {
+  ['text' as const]: ({ space, block }) => {
     invariant(block._tag === 'text');
-    // const [open, setOpen] = useState(block.disposition === 'cot' && block.pending);
-    const title = block.disposition ? titles[block.disposition] : undefined;
-    if (!title) {
-      return <MarkdownViewer content={block.text} />;
-    }
+    return (
+      <MarkdownViewer
+        content={preprocessTextContent(block.text)}
+        components={{
+          a: ({ node: { properties }, children, href, ...props }) => {
+            if (space && typeof properties?.href === 'string' && properties?.href?.startsWith('dxn')) {
+              try {
+                // TODO(burdon): Check valid length (since serialized).
+                const dxn = DXN.parse(properties.href);
+                return <ObjectLink space={space} dxn={dxn} />;
+              } catch {}
+            }
 
-    // TOOD(burdon): Store last time user opened/closed COT.
-    // Autoclose when streaming ends.
-    // useEffect(() => {
-    //   if (block.disposition === 'cot' && !block.pending) {
-    //     setOpen(false);
-    //   }
-    // }, [block.disposition, block.pending]);
+            // TODO(burdon): Can we revert to the default handler?
+            return (
+              <Link href={href} target='_blank' rel='noopener noreferrer' {...props}>
+                {children}
+              </Link>
+            );
+          },
+          img: ({ node: { properties }, ...props }) => {
+            const client = useClient();
+            if (space && typeof properties?.src === 'string' && properties?.src?.startsWith('dxn')) {
+              try {
+                const dxn = DXN.parse(properties?.src);
+                const subject = resolveRef(client, dxn, space);
+                const data = useMemo(() => ({ subject }), [subject]);
+                return <Surface role='card--transclusion' data={data} limit={1} />;
+              } catch {}
+            }
+            return <img {...properties} />;
+          },
+        }}
+      />
+    );
+  },
 
+  //
+  // Suggest
+  //
+  ['suggest' as const]: ({ block, onEvent }) => {
+    const { t } = useTranslation(meta.id);
+    invariant(block._tag === 'suggest');
     return (
-      <ToggleContainer
-        // open={open}
-        defaultOpen={systemDispositions.includes(block.disposition ?? '') && block.pending}
-        title={title}
-        icon={
-          block.pending ? (
-            <Icon icon={'ph--circle-notch--regular'} classNames='text-subdued animate-spin' size={4} />
-          ) : undefined
-        }
-      >
-        <MarkdownViewer
-          content={block.text}
-          classNames={['pbe-2', systemDispositions.includes(block.disposition ?? '') && 'text-sm text-subdued']}
-        />
+      <IconButton
+        icon='ph--lightning--regular'
+        label={block.text}
+        title={t('button suggest')}
+        onClick={() => onEvent?.({ type: 'submit', text: block.text })}
+      />
+    );
+  },
+
+  //
+  // Select
+  //
+  ['select' as const]: ({ block, onEvent }) => {
+    const { t } = useTranslation(meta.id);
+    invariant(block._tag === 'select');
+    return (
+      <div className='flex flex-wrap gap-1'>
+        {block.options.map((option, idx) => (
+          <Button
+            classNames={'animate-[fadeIn_0.5s] rounded-sm text-sm'}
+            key={idx}
+            onClick={() => onEvent?.({ type: 'submit', text: option })}
+            title={t('button select option')}
+          >
+            {option}
+          </Button>
+        ))}
+      </div>
+    );
+  },
+
+  //
+  // Toolkit
+  //
+  ['toolkit' as const]: ({ block }) => {
+    invariant(block._tag === 'toolkit');
+    return (
+      <ToggleContainer title='Toolbox' classNames={panelClasses} defaultOpen>
+        <Toolbox classNames={marginClasses} />
       </ToggleContainer>
     );
   },
@@ -147,42 +215,11 @@ const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', BlockComp
   //
   // JSON
   //
-  ['json' as const]: ({ space, processor, block, onEvent }) => {
+  ['json' as const]: ({ block, onEvent }) => {
     invariant(block._tag === 'json');
 
+    // TODO(burdon): Disposition is deprecated.
     switch (block.disposition) {
-      case 'tool_list': {
-        return (
-          <ToggleContainer title={titles[block.disposition]} defaultOpen={true}>
-            <ToolboxContainer space={space} processor={processor} classNames='pbe-2' />
-          </ToggleContainer>
-        );
-      }
-
-      case 'suggest': {
-        const { text = '' }: { text: string } = safeParseJson(block.data ?? '{}') ?? ({} as any);
-        return (
-          <IconButton icon='ph--lightning--regular' label={text} onClick={() => onEvent?.({ type: 'submit', text })} />
-        );
-      }
-
-      case 'select': {
-        const { options = [] }: { options: string[] } = safeParseJson(block.data ?? '{}') ?? ({} as any);
-        return (
-          <div className='flex flex-wrap gap-1'>
-            {options.map((text, idx) => (
-              <Button
-                classNames={'animate-[fadeIn_0.5s] rounded-sm text-sm'}
-                key={idx}
-                onClick={() => onEvent?.({ type: 'submit', text })}
-              >
-                {text}
-              </Button>
-            ))}
-          </div>
-        );
-      }
-
       case 'graph': {
         return (
           <div className='flex flex-wrap gap-1'>
@@ -204,9 +241,8 @@ const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', BlockComp
       }
 
       default: {
-        const title = block.disposition ? titles[block.disposition] : undefined;
         return (
-          <ToggleContainer title={title ?? 'JSON'}>
+          <ToggleContainer title={block.disposition ?? block._tag}>
             <Json data={safeParseJson(block.data ?? block)} />
           </ToggleContainer>
         );
@@ -215,41 +251,21 @@ const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', BlockComp
   },
 
   //
-  // Default
+  // Fallback
   //
   default: ({ block }) => {
-    let title = titles[block._tag];
-    if (block._tag === 'toolCall') {
-      title = `Tool [${block.name}]`; // TODO(burdon): Get label from tool.
-    } else {
-      title = block._tag;
-    }
-
     return (
-      <ToggleContainer title={title ?? 'JSON'}>
+      <ToggleContainer title={block._tag}>
         <Json data={block} />
       </ToggleContainer>
     );
   },
 };
 
-// TODO(burdon): Translations.
-const titles: Record<string, string> = {
-  ['cot' as const]: 'Chain of thought',
-  ['artifact' as const]: 'Artifact',
-  ['tool_use' as const]: 'Tool request',
-  ['tool_result' as const]: 'Tool result',
-  ['tool_list' as const]: 'Tools',
-  ['artifact-update' as const]: 'Artifact(s) changed',
-};
-
-const systemDispositions: string[] = ['cot', 'artifact-update'];
-
-const panelClasses = 'flex flex-col is-full bg-activeSurface rounded-sm';
-const marginClasses = 'pie-4 pis-4';
-const paddingClasses = 'pis-2 pie-2 pbs-0.5 pbe-0.5';
-
-const MessageContainer = ({ classNames, children, user }: ThemedClassName<PropsWithChildren<{ user?: boolean }>>) => {
+/**
+ * Wrapper for each message.
+ */
+const MessageItem = ({ classNames, children, user }: ThemedClassName<PropsWithChildren<{ user?: boolean }>>) => {
   if (!children) {
     return null;
   }
@@ -266,3 +282,10 @@ const MessageContainer = ({ classNames, children, user }: ThemedClassName<PropsW
 const ToggleContainer = (props: ToggleContainerProps) => {
   return <NativeToggleContainer {...props} classNames={mx(panelClasses, props.classNames)} />;
 };
+
+export const renderObjectLink = (obj: Obj.Any, transclusion?: boolean) =>
+  `${transclusion ? '!' : ''}[${Obj.getLabel(obj)}](${Obj.getDXN(obj).toString()})`;
+
+// TODO(burdon): Move to parser.
+const preprocessTextContent = (content: string) =>
+  content.replaceAll(new RegExp(DXN_ECHO_REGEXP, 'g'), (_, dxn) => `<${dxn}>`);