@dxos/plugin-assistant 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

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/ChatPresets.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Select } from '@dxos/react-ui';
+
+export type ChatPresetsProps = {
+  presets?: { id: string; label: string }[];
+  preset?: string;
+  onChange?: (id: string) => void;
+};
+
+export const ChatPresets = ({ presets, preset, onChange }: ChatPresetsProps) => {
+  return (
+    <Select.Root value={preset} onValueChange={onChange}>
+      <Select.TriggerButton classNames='text-sm' />
+      <Select.Content>
+        {presets?.map(({ id, label }) => (
+          <Select.Option key={id} value={id} classNames='text-sm'>
+            {label}
+          </Select.Option>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+};

package/src/components/ChatPrompt/ChatReferences.tsx

@@ -4,19 +4,20 @@
 
 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';
 import { TagPicker, type TagPickerItemData, type TagPickerOptions } from '@dxos/react-ui-tag-picker';
+import { mx } from '@dxos/react-ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 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) => {
@@ -24,24 +25,26 @@ export const ChatReferences = ({ classNames, space, context, onUpdate }: ChatRef
 
   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],
   );
 
   return (
     <TagPicker
-      classNames={classNames}
+      classNames={mx('h-[1.75rem] text-sm', classNames)}
       mode='multi-select'
       placeholder={t('context objects placeholder')}
       items={items}

package/src/components/ChatPrompt/ChatStatusIndicator.tsx

@@ -2,18 +2,31 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-import { Icon, Tooltip } from '@dxos/react-ui';
+import { Icon, Tooltip, useTimeout } from '@dxos/react-ui';
 import { Spinner } from '@dxos/react-ui-sfx';
 import { errorText } from '@dxos/react-ui-theme';
 
 export type ChatStatusIndicatorProps = {
+  preset?: string;
   error?: Error;
   processing?: boolean;
 };
 
-export const ChatStatusIndicator = ({ error, processing }: ChatStatusIndicatorProps) => {
+export const ChatStatusIndicator = ({ preset, error, processing }: ChatStatusIndicatorProps) => {
+  const [init, setInit] = useState(false);
+  useEffect(() => {
+    setInit(false);
+  }, [preset]);
+  useTimeout(
+    async () => {
+      setInit(true);
+    },
+    1_500,
+    [preset],
+  );
+
   if (error) {
     return (
       <Tooltip.Trigger content={error.message} delayDuration={0}>
@@ -22,5 +35,5 @@ export const ChatStatusIndicator = ({ error, processing }: ChatStatusIndicatorPr
     );
   }
 
-  return <Spinner active={processing} />;
+  return <Spinner state={!init ? 'flash' : processing ? 'spin' : 'pulse'} />;
 };

package/src/components/ChatPrompt/index.ts

@@ -2,9 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './events';
-
 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,121 +2,204 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type FC, type PropsWithChildren } from 'react';
+import React, { type FC, Fragment, type PropsWithChildren } from 'react';
 
-import { type MessageContentBlock, type Message, type Tool } from '@dxos/ai';
-import { Surface } from '@dxos/app-framework';
-import { type Obj } from '@dxos/echo';
+import { type Tool } from '@dxos/ai';
+import { ErrorBoundary, Surface } from '@dxos/app-framework';
+import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
+import { DXN, DXN_ECHO_REGEXP } from '@dxos/keys';
 import { type Space } from '@dxos/react-client/echo';
-import { Button, Icon, IconButton, type ThemedClassName } from '@dxos/react-ui';
+import { Button, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import {
   MarkdownViewer,
   ToggleContainer as NativeToggleContainer,
   type ToggleContainerProps,
 } from '@dxos/react-ui-components';
 import { mx } from '@dxos/react-ui-theme';
+import { type ContentBlock, type DataType } from '@dxos/schema';
 import { safeParseJson } from '@dxos/util';
 
+import { meta } from '../../meta';
+import { type ChatEvent } from '../Chat';
+import { Toolbox } from '../Toolbox';
+
+import { ObjectLink } from './Link';
 import { Json, ToolBlock, isToolMessage } from './ToolBlock';
-import { type ChatProcessor } from '../../hooks';
-import { ToolboxContainer } from '../Toolbox';
+
+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<{
-  space?: Space;
-  processor?: ChatProcessor;
-  message: Message;
   debug?: boolean;
+  space?: Space;
+  message: DataType.Message;
   tools?: Tool[];
-  onPrompt?: (text: string) => void;
-  onDelete?: (id: string) => void;
-  onAddToGraph?: (object: Obj.Any) => void;
+  onEvent?: (event: ChatEvent) => void;
+  onDelete?: () => void;
 }>;
 
-export const ChatMessage = ({
-  classNames,
-  space,
-  processor,
-  message,
-  tools,
-  onPrompt,
-  onAddToGraph,
-}: ChatMessageProps) => {
-  const { role, content = [] } = message;
-
-  // TODO(burdon): Restructure types to make check unnecessary.
+export const ChatMessage = ({ classNames, debug, space, message, tools, onEvent, onDelete }: ChatMessageProps) => {
+  const { t } = useTranslation(meta.id);
+  const {
+    sender: { role },
+    blocks,
+  } = message;
+
+  // TODO(burdon): Consolidate tools upstream?
   if (isToolMessage(message)) {
     return (
-      <MessageContainer classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}>
-        <ToolBlock classNames={panelClassNames} message={message} tools={tools} />
-      </MessageContainer>
+      <MessageItem classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}>
+        <ToolBlock classNames={panelClasses} message={message} tools={tools} />
+      </MessageItem>
     );
   }
 
-  return content.map((block, idx) => {
-    // TODO(burdon): Filter empty messages.
-    if (block.type === 'text' && block.text.replaceAll(/\s+/g, '').length === 0) {
-      return null;
-    }
+  return (
+    <>
+      {debug && (
+        <div className={mx('flex justify-end text-subdued', marginClasses)}>
+          <pre className='text-xs'>{JSON.stringify({ created: message.created })}</pre>
+        </div>
+      )}
 
-    const Component = components[block.type] ?? components.default;
+      {blocks.map((block, idx) => {
+        // TODO(burdon): Filter empty messages.
+        if (block._tag === 'text' && block.text.replaceAll(/\s+/g, '').length === 0) {
+          return null;
+        }
 
-    return (
-      <MessageContainer
-        key={idx}
-        classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}
-        user={block.type === 'text' && role === 'user'}
-      >
-        <Component space={space} processor={processor} block={block} onPrompt={onPrompt} onAddToGraph={onAddToGraph} />
-      </MessageContainer>
-    );
-  });
+        const Component: ContentBlockComponent = components[block._tag] ?? components.default!;
+        if (!Component) {
+          return null;
+        }
+
+        return (
+          <Fragment key={idx}>
+            <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>
+              </div>
+            )}
+          </Fragment>
+        );
+      })}
+
+      {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 BlockComponent = FC<{
+type ContentBlockProps = {
   space?: Space;
-  /** @deprecated Replace with context */
-  processor?: ChatProcessor;
-  block: MessageContentBlock;
-  onPrompt?: (text: string) => void;
-  onAddToGraph?: (object: Obj.Any) => void;
-}>;
+  block: ContentBlock.Any;
+  onEvent?: (event: ChatEvent) => void;
+};
+
+type ContentBlockComponent = FC<ContentBlockProps>;
 
-const components: Record<string, BlockComponent> = {
+/**
+ * Components for rendering content blocks.
+ */
+const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', ContentBlockComponent>> = {
   //
   // Text
   //
-  ['text' as const]: ({ block }) => {
-    invariant(block.type === 'text');
-    // const [open, setOpen] = useState(block.disposition === 'cot' && block.pending);
-    const title = block.disposition ? titles[block.disposition] : undefined;
-    if (!title) {
-      return <MarkdownViewer classNames='[&>p]:animate-[fadeIn_0.5s]' content={block.text} />;
-    }
+  ['text' as const]: ({ space, block }) => {
+    invariant(block._tag === '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 (
+              <a
+                href={href}
+                className='text-primary-500 hover:text-primary-500' // TODO(burdon): Token.
+                target='_blank'
+                rel='noopener noreferrer'
+                {...props}
+              >
+                {children}
+              </a>
+            );
+          },
+        }}
+      />
+    );
+  },
 
+  //
+  // 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 ml-2 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>
     );
   },
@@ -124,54 +207,25 @@ const components: Record<string, BlockComponent> = {
   //
   // JSON
   //
-  ['json' as const]: ({ space, processor, block, onPrompt, onAddToGraph }) => {
-    invariant(block.type === 'json');
+  ['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.json ?? '{}') ?? ({} as any);
-        return <IconButton icon='ph--lightning--regular' label={text} onClick={() => onPrompt?.(text)} />;
-      }
-
-      case 'select': {
-        const { options = [] }: { options: string[] } = safeParseJson(block.json ?? '{}') ?? ({} as any);
-        return (
-          <div className='flex flex-wrap gap-1'>
-            {options.map((option, idx) => (
-              <Button
-                classNames={'animate-[fadeIn_0.5s] rounded-sm text-sm'}
-                key={option}
-                onClick={() => onPrompt?.(option)}
-              >
-                {option}
-              </Button>
-            ))}
-          </div>
-        );
-      }
-
       case 'graph': {
         return (
           <div className='flex flex-wrap gap-1'>
             <Surface
               role='card'
-              data={{ subject: JSON.parse(block.json ?? '{}') }}
+              data={{ subject: JSON.parse(block.data ?? '{}') }}
               limit={1}
-              fallback={<div className='font-mono text-xs text-pre'>{block.json}</div>}
+              fallback={<div className='font-mono text-xs text-pre'>{block.data}</div>}
             />
-            {onAddToGraph && (
+            {onEvent && (
               <IconButton
                 icon='ph--plus--regular'
                 label='Add to graph'
-                onClick={() => onAddToGraph?.(JSON.parse(block.json ?? '{}'))}
+                onClick={() => onEvent?.({ type: 'add', object: JSON.parse(block.data ?? '{}') })}
               />
             )}
           </div>
@@ -179,10 +233,9 @@ const components: Record<string, BlockComponent> = {
       }
 
       default: {
-        const title = block.disposition ? titles[block.disposition] : undefined;
         return (
-          <ToggleContainer title={title ?? 'JSON'}>
-            <Json data={safeParseJson(block.json ?? block)} />
+          <ToggleContainer title={block.disposition ?? block._tag}>
+            <Json data={safeParseJson(block.data ?? block)} />
           </ToggleContainer>
         );
       }
@@ -190,49 +243,40 @@ const components: Record<string, BlockComponent> = {
   },
 
   //
-  // Default
+  // Fallback
   //
   default: ({ block }) => {
-    let title = titles[block.type];
-    if (block.type === 'tool_use') {
-      title = `Tool [${block.name}]`; // TODO(burdon): Get label from tool.
-    }
-
     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 panelClassNames = 'flex flex-col w-full px-2 bg-activeSurface rounded-sm';
-const userClassNames = 'bg-[--user-fill] text-accentSurfaceText';
-
-const ToggleContainer = (props: ToggleContainerProps) => {
-  return <NativeToggleContainer {...props} classNames={mx(panelClassNames, props.classNames)} />;
-};
-
-const MessageContainer = ({ children, classNames, user }: ThemedClassName<PropsWithChildren<{ user?: boolean }>>) => {
+/**
+ * Wrapper for each message.
+ */
+const MessageItem = ({ classNames, children, user }: ThemedClassName<PropsWithChildren<{ user?: boolean }>>) => {
   if (!children) {
     return null;
   }
 
   return (
-    <div role='list-item' className={mx('flex w-full', user && 'justify-end', classNames)}>
-      <div className={mx(user ? ['px-2 py-1 rounded-sm', userClassNames] : 'w-full')}>{children}</div>
+    <div role='list-item' className={mx('flex is-full', user && 'justify-end', marginClasses, classNames)}>
+      <div className={mx(user ? ['rounded-sm', 'bg-[--user-fill] text-accentSurfaceText', paddingClasses] : 'is-full')}>
+        {children}
+      </div>
     </div>
   );
 };
+
+const ToggleContainer = (props: ToggleContainerProps) => {
+  return <NativeToggleContainer {...props} classNames={mx(panelClasses, props.classNames)} />;
+};
+
+export const renderObjectLink = (obj: Obj.Any) => `[${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}>`);