@dxos/plugin-assistant 0.8.3 → 0.8.4-main.5acf9ea

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)} />;
+};

package/src/components/ChatThread/ChatThread.stories.tsx

@@ -0,0 +1,143 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react-vite';
+import React, { useEffect, useState } from 'react';
+
+import { Obj } from '@dxos/echo';
+import { faker } from '@dxos/random';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { DataType, type ContentBlock } from '@dxos/schema';
+import { ColumnContainer, withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { ChatThread } from './ChatThread';
+import { translations } from '../../translations';
+
+faker.seed(1);
+
+const createMessage = (role: DataType.ActorRole, blocks: ContentBlock.Any[]): DataType.Message => {
+  return Obj.make(DataType.Message, {
+    created: new Date().toISOString(),
+    sender: { role },
+    blocks,
+  });
+};
+
+const TEST_MESSAGES: DataType.Message[] = [
+  createMessage('user', [
+    {
+      _tag: 'text',
+      text: faker.lorem.sentence(5),
+    } satisfies ContentBlock.Text,
+  ]),
+
+  createMessage('assistant', [
+    {
+      _tag: 'text',
+      disposition: 'cot',
+      text: Array.from({ length: faker.number.int({ min: 3, max: 5 }) })
+        .map((_, idx) => `${idx + 1}. ${faker.lorem.paragraph()}`)
+        .join('\n'),
+    },
+    {
+      _tag: 'text',
+      text: Array.from({ length: faker.number.int({ min: 2, max: 5 }) })
+        .map(() => faker.lorem.paragraphs())
+        .join('\n\n'),
+    },
+    {
+      _tag: 'toolCall',
+      toolCallId: '1234',
+      name: 'search',
+      input: {},
+    } satisfies ContentBlock.ToolCall,
+  ]),
+
+  createMessage('user', [
+    {
+      _tag: 'toolResult',
+      toolCallId: '1234',
+      name: 'search',
+      result: 'This is a tool result.',
+    } satisfies ContentBlock.ToolResult,
+  ]),
+
+  createMessage('assistant', [
+    {
+      _tag: 'toolCall',
+      toolCallId: '4567',
+      name: 'create',
+      input: {},
+    } satisfies ContentBlock.ToolCall,
+  ]),
+
+  createMessage('user', [
+    {
+      _tag: 'toolResult',
+      toolCallId: '4567',
+      name: 'create',
+      result: 'This is a tool result.',
+    } satisfies ContentBlock.ToolResult,
+  ]),
+
+  createMessage('assistant', [
+    {
+      _tag: 'text',
+      text: faker.lorem.paragraphs(1),
+    } satisfies ContentBlock.Text,
+  ]),
+
+  createMessage('assistant', [
+    {
+      _tag: 'json',
+      disposition: 'suggest',
+      data: JSON.stringify({ text: 'Search...' }),
+    },
+    {
+      _tag: 'json',
+      disposition: 'suggest',
+      data: JSON.stringify({ text: faker.lorem.paragraphs(1) }),
+    } satisfies ContentBlock.Json,
+  ]),
+];
+
+const meta = {
+  title: 'plugins/plugin-assistant/ChatThread',
+  component: ChatThread,
+  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout({ Container: ColumnContainer })],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof ChatThread>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {
+    messages: TEST_MESSAGES,
+  },
+} satisfies Story;
+
+export const Incremental = {
+  render: () => {
+    const [messages, setMessages] = useState<DataType.Message[]>([]);
+    useEffect(() => {
+      let i = 0;
+      const interval = setInterval(() => {
+        setMessages((messages) => [...messages, TEST_MESSAGES[i++]]);
+        if (i >= TEST_MESSAGES.length) {
+          clearInterval(interval);
+        }
+      }, 2_000);
+
+      return () => clearInterval(interval);
+    }, []);
+
+    return <ChatThread messages={messages} collapse />;
+  },
+} satisfies Story;

package/src/components/ChatThread/ChatThread.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type CSSProperties, forwardRef, useMemo } from 'react';
+
+import { PublicKey } from '@dxos/keys';
+import { type Identity } from '@dxos/react-client/halo';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { ScrollContainer, type ScrollController } from '@dxos/react-ui-components';
+import { mx } from '@dxos/react-ui-theme';
+import { type DataType } from '@dxos/schema';
+import { keyToFallback } from '@dxos/util';
+
+import { ChatMessage, type ChatMessageProps } from './ChatMessage';
+import { messageReducer } from './reducer';
+
+export type ChatThreadProps = ThemedClassName<
+  {
+    identity?: Identity;
+    messages?: DataType.Message[];
+    collapse?: boolean;
+  } & Pick<ChatMessageProps, 'debug' | 'space' | 'processor' | 'tools' | 'onEvent'>
+>;
+
+export const ChatThread = forwardRef<ScrollController, ChatThreadProps>(
+  ({ classNames, identity, messages, collapse = true, ...props }, forwardedRef) => {
+    const userHue = useMemo(() => {
+      return identity?.profile?.data?.hue || keyToFallback(identity?.identityKey ?? PublicKey.random()).hue;
+    }, [identity]);
+
+    // TODO(dmaretskyi): This needs to be a separate type: `id` is not a valid ObjectId, this needs to accommodate messageId for deletion.
+    const { messages: filteredMessages = [] } = useMemo(() => {
+      if (collapse) {
+        return (messages ?? []).reduce<{ messages: DataType.Message[]; current?: DataType.Message }>(messageReducer, {
+          messages: [],
+        });
+      } else {
+        return { messages: messages ?? [] };
+      }
+    }, [messages, collapse]);
+
+    return (
+      <ScrollContainer ref={forwardedRef} classNames={classNames} fade>
+        <div
+          role='none'
+          className={mx(filteredMessages.length > 0 && 'pbs-4 pbe-4')}
+          style={{ '--user-fill': `var(--dx-${userHue}Fill)` } as CSSProperties}
+        >
+          {filteredMessages.map((message) => (
+            <ChatMessage key={message.id} message={message} {...props} />
+          ))}
+        </div>
+      </ScrollContainer>
+    );
+  },
+);