@dxos/plugin-assistant 0.8.3 → 0.8.4-main.28f8d3d

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

@@ -0,0 +1,55 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+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: AiContextBinder;
+  onUpdate?: (dxns: string[]) => void;
+}>;
+
+export const ChatReferences = ({ classNames, space, context, onUpdate }: ChatReferencesProps) => {
+  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.getDXN(obj).toString(), label: Obj.getLabel(obj) ?? Obj.getTypename(obj) ?? obj.id }));
+  }, [context]);
+
+  const handleSearch = useCallback<NonNullable<TagPickerOptions['onSearch']>>(
+    (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: Obj.getDXN(object).toString(), label: Obj.getLabel(object) ?? '' }))
+        .filter(({ id, label }) => !dxns.includes(id) && label.toLocaleLowerCase().includes(text.toLocaleLowerCase()));
+    },
+    [space],
+  );
+
+  return (
+    <TagPicker
+      classNames={mx('h-[1.75rem] text-sm', classNames)}
+      mode='multi-select'
+      placeholder={t('context objects placeholder')}
+      items={items}
+      onSearch={handleSearch}
+      onUpdate={onUpdate}
+    />
+  );
+};

package/src/components/ChatPrompt/ChatStatusIndicator.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+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 = ({ 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}>
+        <Icon icon='ph--warning-circle--regular' classNames={errorText} size={5} />
+      </Tooltip.Trigger>
+    );
+  }
+
+  return <Spinner state={!init ? 'flash' : processing ? 'spin' : 'pulse'} />;
+};

package/src/components/ChatPrompt/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './ChatActions';
+export * from './ChatOptions';
+export * from './ChatPresets';
+export * from './ChatReferences';
+export * from './ChatStatusIndicator';

package/src/components/ChatThread/ChatMessage.tsx

@@ -0,0 +1,282 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type FC, Fragment, type PropsWithChildren } from 'react';
+
+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, 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';
+
+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;
+  tools?: Tool[];
+  onEvent?: (event: ChatEvent) => void;
+  onDelete?: () => void;
+}>;
+
+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 (
+      <MessageItem classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}>
+        <ToolBlock classNames={panelClasses} message={message} tools={tools} />
+      </MessageItem>
+    );
+  }
+
+  return (
+    <>
+      {debug && (
+        <div className={mx('flex justify-end text-subdued', marginClasses)}>
+          <pre className='text-xs'>{JSON.stringify({ created: message.created })}</pre>
+        </div>
+      )}
+
+      {blocks.map((block, idx) => {
+        // TODO(burdon): Filter empty messages.
+        if (block._tag === 'text' && block.text.replaceAll(/\s+/g, '').length === 0) {
+          return null;
+        }
+
+        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 ContentBlockProps = {
+  space?: Space;
+  block: ContentBlock.Any;
+  onEvent?: (event: ChatEvent) => void;
+};
+
+type ContentBlockComponent = FC<ContentBlockProps>;
+
+/**
+ * Components for rendering content blocks.
+ */
+const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', ContentBlockComponent>> = {
+  //
+  // 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 {}
+            }
+
+            // 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 (
+      <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>
+    );
+  },
+
+  //
+  // JSON
+  //
+  ['json' as const]: ({ block, onEvent }) => {
+    invariant(block._tag === 'json');
+
+    // TODO(burdon): Disposition is deprecated.
+    switch (block.disposition) {
+      case 'graph': {
+        return (
+          <div className='flex flex-wrap gap-1'>
+            <Surface
+              role='card'
+              data={{ subject: JSON.parse(block.data ?? '{}') }}
+              limit={1}
+              fallback={<div className='font-mono text-xs text-pre'>{block.data}</div>}
+            />
+            {onEvent && (
+              <IconButton
+                icon='ph--plus--regular'
+                label='Add to graph'
+                onClick={() => onEvent?.({ type: 'add', object: JSON.parse(block.data ?? '{}') })}
+              />
+            )}
+          </div>
+        );
+      }
+
+      default: {
+        return (
+          <ToggleContainer title={block.disposition ?? block._tag}>
+            <Json data={safeParseJson(block.data ?? block)} />
+          </ToggleContainer>
+        );
+      }
+    }
+  },
+
+  //
+  // Fallback
+  //
+  default: ({ block }) => {
+    return (
+      <ToggleContainer title={block._tag}>
+        <Json data={block} />
+      </ToggleContainer>
+    );
+  },
+};
+
+/**
+ * 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 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}>`);