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

package/src/components/ChatContainer.tsx

@@ -2,36 +2,42 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type FC } from 'react';
+import React from 'react';
 
-import { Capabilities, useCapabilities, useCapability } from '@dxos/app-framework';
-import { type AssociatedArtifact } from '@dxos/artifact';
-import { TranscriptionCapabilities } from '@dxos/plugin-transcription';
+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 { ThreadContainer } from './Thread';
-import { ASSISTANT_PLUGIN } from '../meta';
-import { type AssistantSettingsProps, type AIChatType } from '../types';
+import { Chat } from './Chat';
+import { useChatProcessor, useChatServices } from '../hooks';
+import { meta } from '../meta';
+import { type Assistant } from '../types';
 
 export type ChatContainerProps = {
   role: string;
-  chat: AIChatType;
-  associatedArtifact?: AssociatedArtifact;
+  chat: Assistant.Chat;
+  artifact?: AssociatedArtifact;
 };
 
-// TODO(burdon): Attention.
-export const ChatContainer: FC<ChatContainerProps> = ({ role, chat, associatedArtifact }) => {
-  const transcription = useCapabilities(TranscriptionCapabilities.Transcriber).length > 0;
-  const settings = useCapability(Capabilities.SettingsStore).getStore<AssistantSettingsProps>(ASSISTANT_PLUGIN)?.value;
+export const ChatContainer = ({ role, chat, artifact }: 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) {
+    return null;
+  }
 
+  // TODO(burdon): Add attention attributes.
   return (
-    <StackItem.Content role={role} classNames='container-max-width'>
-      <ThreadContainer
-        chat={chat}
-        settings={settings}
-        transcription={transcription}
-        associatedArtifact={associatedArtifact}
-      />
+    <StackItem.Content classNames='container-max-width'>
+      <Chat.Root chat={chat} processor={processor} artifact={artifact}>
+        <Chat.Thread />
+        <div className='pbe-4 pis-2 pie-2'>
+          <Chat.Prompt classNames='border border-subduedSeparator rounded-md' />
+        </div>
+      </Chat.Root>
     </StackItem.Content>
   );
 };

package/src/components/ChatDialog.tsx

@@ -0,0 +1,64 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useState } from 'react';
+
+import { useCapability, Capabilities } 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 { meta } from '../meta';
+import { type Assistant } from '../types';
+
+export type ChatDialogProps = {
+  chat?: Assistant.Chat;
+};
+
+export const ChatDialog = ({ chat }: ChatDialogProps) => {
+  const { t } = useTranslation(meta.id);
+
+  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 });
+
+  // TODO(burdon): Refocus when open.
+  const [open, setOpen] = useState(true);
+  const [expanded, setExpanded] = useState(false);
+  const handleEvent = useCallback<NonNullable<ChatRootProps['onEvent']>>((event) => {
+    switch (event.type) {
+      case 'submit':
+      case 'thread-open':
+        setOpen(true);
+        setExpanded(true);
+        break;
+      case 'thread-close':
+        setOpen(false);
+        break;
+    }
+  }, []);
+
+  if (!chat || !processor) {
+    return null;
+  }
+
+  return (
+    <Chat.Root chat={chat} processor={processor} onEvent={handleEvent}>
+      <NativeChatDialog.Root open={open} expanded={expanded} onOpenChange={setOpen}>
+        <NativeChatDialog.Header title={t('assistant dialog title')} />
+        <NativeChatDialog.Content>
+          <Chat.Thread />
+        </NativeChatDialog.Content>
+        <NativeChatDialog.Footer>
+          <Chat.Prompt expandable />
+        </NativeChatDialog.Footer>
+      </NativeChatDialog.Root>
+    </Chat.Root>
+  );
+};
+
+export default ChatDialog;

package/src/components/ChatPrompt/ChatActions.tsx

@@ -0,0 +1,71 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { meta } from '../../meta';
+import { type ChatEvent } from '../Chat';
+
+export type ChatActionsProps = ThemedClassName<
+  PropsWithChildren<{
+    microphone?: boolean;
+    recording?: boolean;
+    processing?: boolean;
+    onEvent?: (event: ChatEvent) => void;
+  }>
+>;
+
+export const ChatActions = ({ classNames, children, microphone, recording, processing, onEvent }: ChatActionsProps) => {
+  const { t } = useTranslation(meta.id);
+
+  return (
+    <div className={mx('flex items-center mie-1', classNames)}>
+      {children}
+
+      {(processing && (
+        <IconButton
+          disabled={!processing}
+          classNames='px-1.5'
+          variant='ghost'
+          size={5}
+          icon='ph--x--regular'
+          iconOnly
+          label={t('button cancel processing')}
+          onClick={() => onEvent?.({ type: 'cancel' })}
+        />
+      )) || (
+        <IconButton
+          disabled
+          classNames='px-1.5'
+          variant='ghost'
+          size={5}
+          icon='ph--arrow-down--regular'
+          iconOnly
+          label={t('button scroll down')}
+          onClick={() => onEvent?.({ type: 'scroll-to-bottom' })}
+        />
+      )}
+
+      {microphone && (
+        <IconButton
+          disabled={!processing}
+          classNames={mx('px-1.5', recording && 'bg-primary-500')}
+          variant='ghost'
+          size={5}
+          icon='ph--microphone--regular'
+          iconOnly
+          noTooltip
+          label={t('button microphone')}
+          onMouseDown={() => onEvent?.({ type: 'record-start' })}
+          onMouseUp={() => onEvent?.({ type: 'record-stop' })}
+          onTouchStart={() => onEvent?.({ type: 'record-start' })}
+          onTouchEnd={() => onEvent?.({ type: 'record-stop' })}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/ChatPrompt/ChatOptionsMenu.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { type Blueprint } from '@dxos/blueprints';
+import { DropdownMenu, IconButton, Input, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '../../meta';
+
+export type ChatOptionsMenuProps = {
+  blueprintRegistry?: Blueprint.Registry;
+  blueprints?: Blueprint.Blueprint[];
+  onChange?: (key: string, active: boolean) => void;
+};
+
+export const ChatOptionsMenu = ({ blueprintRegistry, blueprints, onChange }: ChatOptionsMenuProps) => {
+  const { t } = useTranslation(meta.id);
+  const blueprintOptions = useMemo(
+    () => blueprintRegistry?.query().map((blueprint) => ({ key: blueprint.key, label: blueprint.name })),
+    [blueprintRegistry],
+  );
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild disabled={!blueprintOptions?.length}>
+        <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>
+            {blueprintOptions?.map((option) => (
+              <DropdownMenu.Item key={option.key}>
+                <Input.Root>
+                  <Input.Checkbox
+                    checked={!!blueprints?.find((blueprint) => blueprint.key === option.key)}
+                    onCheckedChange={(checked) => onChange?.(option.key, !!checked)}
+                  />
+                  {/* TODO(burdon): Remove need for custom margin. */}
+                  {/* TODO(burdon): Clicking on label doesn't toggle checkbox. */}
+                  <Input.Label classNames='m-0'>{option.label}</Input.Label>
+                </Input.Root>
+              </DropdownMenu.Item>
+            ))}
+          </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,53 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { type ContextBinder } 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;
+}>;
+
+export const ChatReferences = ({ classNames, space, context, onUpdate }: ChatReferencesProps) => {
+  const { t: _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 }));
+  }, [context]);
+
+  const handleSearch = useCallback<NonNullable<TagPickerOptions['onSearch']>>(
+    (text, ids) => {
+      // 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()));
+    },
+    [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 './ChatOptionsMenu';
+export * from './ChatPresets';
+export * from './ChatReferences';
+export * from './ChatStatusIndicator';

package/src/components/ChatThread/ChatMessage.tsx

@@ -0,0 +1,268 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { Fragment, type FC, type PropsWithChildren } from 'react';
+
+import { type Tool } from '@dxos/ai';
+import { Surface } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
+import { type Space } from '@dxos/react-client/echo';
+import { Button, Icon, IconButton, useTranslation, type ThemedClassName } 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 { Json, ToolBlock, isToolMessage } from './ToolBlock';
+import { type ChatProcessor } from '../../hooks';
+import { meta } from '../../meta';
+import { type ChatEvent } from '../Chat';
+import { ToolboxContainer } from '../Toolbox';
+
+export type ChatMessageProps = ThemedClassName<{
+  debug?: boolean;
+  space?: Space;
+  message: DataType.Message;
+  // TODO(burdon): Move to context.
+  processor?: ChatProcessor;
+  tools?: Tool[];
+  onEvent?: (event: ChatEvent) => void;
+}>;
+
+export const ChatMessage = ({ classNames, debug, space, message, processor, tools, onEvent }: ChatMessageProps) => {
+  const { t } = useTranslation(meta.id);
+  const {
+    sender: { role },
+    blocks,
+  } = message;
+
+  // TODO(burdon): Restructure types to make check unnecessary.
+  if (isToolMessage(message)) {
+    return (
+      <MessageContainer classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}>
+        <ToolBlock classNames={panelClasses} message={message} tools={tools} />
+      </MessageContainer>
+    );
+  }
+
+  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: BlockComponent = 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>
+            {debug && (
+              <div className={mx('flex justify-end text-subdued', marginClasses)}>
+                <pre className='text-xs'>{JSON.stringify({ block: block._tag })}</pre>
+              </div>
+            )}
+          </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>
+    </>
+  );
+};
+
+type BlockComponentProps = {
+  space?: Space;
+  block: ContentBlock.Any;
+  /** @deprecated Replace with context */
+  processor?: ChatProcessor;
+  onEvent?: (event: ChatEvent) => void;
+};
+
+type BlockComponent = FC<BlockComponentProps>;
+
+const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', BlockComponent>> = {
+  //
+  // Text
+  //
+  ['text' as const]: ({ 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} />;
+    }
+
+    // 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]);
+
+    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']}
+        />
+      </ToggleContainer>
+    );
+  },
+
+  //
+  // JSON
+  //
+  ['json' as const]: ({ space, processor, block, onEvent }) => {
+    invariant(block._tag === 'json');
+
+    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'>
+            <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: {
+        const title = block.disposition ? titles[block.disposition] : undefined;
+        return (
+          <ToggleContainer title={title ?? 'JSON'}>
+            <Json data={safeParseJson(block.data ?? block)} />
+          </ToggleContainer>
+        );
+      }
+    }
+  },
+
+  //
+  // Default
+  //
+  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'}>
+        <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 }>>) => {
+  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)} />;
+};