@dxos/plugin-assistant 0.8.3-staging.0fa589b → 0.8.4-main.1da679c

package/src/components/Thread/ThreadMessage.tsx

@@ -1,234 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type FC, 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 { invariant } from '@dxos/invariant';
-import { type Space } from '@dxos/react-client/echo';
-import { Button, Icon, IconButton, type ThemedClassName } from '@dxos/react-ui';
-import {
-  MarkdownViewer,
-  ToggleContainer as NativeToggleContainer,
-  type ToggleContainerProps,
-} from '@dxos/react-ui-components';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
-import { safeParseJson } from '@dxos/util';
-
-import { ToolBlock, isToolMessage } from './ToolInvocations';
-import { ToolboxContainer } from '../Toolbox';
-
-const panelClassNames = 'flex flex-col w-full px-2 bg-activeSurface rounded-md';
-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 }>>) => {
-  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-md', userClassNames] : 'w-full')}>{children}</div>
-    </div>
-  );
-};
-
-export type ThreadMessageProps = ThemedClassName<{
-  space?: Space;
-  message: Message;
-  debug?: boolean;
-  tools?: Tool[];
-  onPrompt?: (text: string) => void;
-  onDelete?: (id: string) => void;
-  onAddToGraph?: (object: Obj.Any) => void;
-}>;
-
-export const ThreadMessage: FC<ThreadMessageProps> = ({
-  classNames,
-  space,
-  message,
-  tools,
-  onPrompt,
-  onAddToGraph,
-}) => {
-  const { role, content = [] } = message;
-
-  // TODO(burdon): Restructure types to make check unnecessary.
-  if (isToolMessage(message)) {
-    return (
-      <MessageContainer classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}>
-        <ToolBlock space={space} classNames={panelClassNames} message={message} tools={tools} />
-      </MessageContainer>
-    );
-  }
-
-  return content.map((block, idx) => {
-    // TODO(burdon): Filter empty messages.
-    if (block.type === 'text' && block.text.replaceAll(/\s+/g, '').length === 0) {
-      return null;
-    }
-
-    const Component = components[block.type] ?? components.default;
-
-    return (
-      <MessageContainer
-        key={idx}
-        classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}
-        user={block.type === 'text' && role === 'user'}
-      >
-        <Component space={space} block={block} onPrompt={onPrompt} onAddToGraph={onAddToGraph} />
-      </MessageContainer>
-    );
-  });
-};
-
-type BlockComponent = FC<{
-  space?: Space;
-  block: MessageContentBlock;
-  onPrompt?: (text: string) => void;
-  onAddToGraph?: (object: Obj.Any) => void;
-}>;
-
-const components: Record<string, BlockComponent> = {
-  //
-  // 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} />;
-    }
-
-    // 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 ml-2 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, block, onPrompt, onAddToGraph }) => {
-    invariant(block.type === 'json');
-
-    switch (block.disposition) {
-      case 'tool_list': {
-        return (
-          <ToggleContainer title={titles[block.disposition]} defaultOpen={true}>
-            <ToolboxContainer space={space} 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-2xl 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 ?? '{}') }}
-              limit={1}
-              fallback={<div className='font-mono text-xs text-pre'>{block.json}</div>}
-            />
-            {onAddToGraph && (
-              <IconButton
-                icon='ph--plus--regular'
-                label='Add to graph'
-                onClick={() => onAddToGraph?.(JSON.parse(block.json ?? '{}'))}
-              />
-            )}
-          </div>
-        );
-      }
-
-      default: {
-        const title = block.disposition ? titles[block.disposition] : undefined;
-        return (
-          <ToggleContainer title={title ?? 'JSON'}>
-            <Json data={safeParseJson(block.json ?? block)} classNames='!p-1 text-xs' />
-          </ToggleContainer>
-        );
-      }
-    }
-  },
-
-  //
-  // Default
-  //
-  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'}>
-        <Json data={block} classNames='!p-1 text-xs' />
-      </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'];

package/src/components/Thread/ToolInvocations.tsx

@@ -1,106 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
-
-import { type AgentStatus, type Message, type Tool } from '@dxos/ai';
-import { log } from '@dxos/log';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { NumericTabs, StatusRoll, ToggleContainer } from '@dxos/react-ui-components';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
-import { isNonNullable, isNotFalsy } from '@dxos/util';
-
-import { type ThreadMessageProps } from './ThreadMessage';
-
-export const isToolMessage = (message: Message) => {
-  return message.content.some((block) => block.type === 'tool_use' || block.type === 'tool_result');
-};
-
-const getToolName = (tool: Tool) => {
-  return tool.namespace && tool.function ? `${tool.namespace}:${tool.function}` : tool.name.split('_').pop();
-};
-
-const getToolCaption = (tool: Tool | undefined, status: AgentStatus | undefined) => {
-  if (!tool) {
-    return 'Calling tool...';
-  }
-
-  return status?.message ?? tool.caption ?? `Calling ${getToolName(tool)}...`;
-};
-
-export const ToolBlock: FC<ThemedClassName<ThreadMessageProps>> = ({ classNames, message, tools }) => {
-  const { content = [] } = message;
-
-  let request: { tool: Tool | undefined; block: any } | undefined;
-  const blocks = content.filter((block) => block.type === 'tool_use' || block.type === 'tool_result');
-  const items = blocks
-    .map((block) => {
-      switch (block.type) {
-        case 'tool_use': {
-          // TODO(burdon): Skip these updates?
-          if (block.pending && request?.block.id === block.id) {
-            return null;
-          }
-
-          log.info('tool_use', { tool: request?.tool, status: block.currentStatus });
-
-          request = { tool: tools?.find((tool) => tool.name === block.name), block };
-          return { title: getToolCaption(request.tool, block.currentStatus), block };
-        }
-
-        case 'tool_result': {
-          if (!request) {
-            log.warn('unexpected message', { block });
-            return { title: 'Error', block };
-          }
-
-          return { title: `${getToolCaption(request.tool, undefined)} (Success)`, block };
-        }
-
-        default: {
-          request = undefined;
-          return { title: 'Error', block };
-        }
-      }
-    })
-    .filter(isNonNullable);
-
-  return <ToolContainer classNames={classNames} items={items} />;
-};
-
-export const ToolContainer: FC<ThemedClassName<{ items: { title: string; block: any }[] }>> = ({
-  classNames,
-  items,
-}) => {
-  const tabsRef = useRef<HTMLDivElement>(null);
-  const [selected, setSelected] = useState(0);
-  const [open, setOpen] = useState(false);
-  useEffect(() => {
-    if (open) {
-      tabsRef.current?.focus();
-    }
-  }, [open]);
-
-  const handleSelect = (index: number) => {
-    if (index === selected) {
-      setOpen(false);
-    } else {
-      setSelected(index);
-    }
-  };
-
-  const title = useMemo(() => {
-    const lines = items.map((item) => item.title).filter(isNotFalsy);
-    return <StatusRoll key='status-roll' lines={lines} duration={1_000} autoAdvance />;
-  }, [items]);
-
-  return (
-    <ToggleContainer classNames={['flex flex-col', classNames]} title={title} open={open} onChangeOpen={setOpen}>
-      <div className='grid grid-cols-[32px_1fr]'>
-        <NumericTabs ref={tabsRef} length={items.length} selected={selected} onSelect={handleSelect} />
-        <Json data={items[selected].block} classNames='!p-1 text-xs' />
-      </div>
-    </ToggleContainer>
-  );
-};

package/src/components/Thread/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './Thread';
-export * from './ThreadContainer';

package/src/components/Thread/reducer.ts

@@ -1,52 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Message } from '@dxos/ai';
-
-// TODO(burdon): Move to util?
-type Reducer<R, I> = (acc: R, value: I) => R;
-
-/**
- * Reducer that collapses related message blocks into single messages.
- * For example, combines tool request/response pairs into a single message.
- */
-export const messageReducer: Reducer<{ messages: Message[]; current?: Message }, Message> = (
-  { current, messages },
-  message,
-) => {
-  let i = 0;
-  for (const block of message.content) {
-    switch (block.type) {
-      case 'tool_use':
-      case 'tool_result': {
-        if (current) {
-          current.content.push(block);
-        } else {
-          current = {
-            id: [message.id, i].join('_'),
-            role: message.role,
-            content: [block],
-          } as any;
-          messages.push(current as any);
-        }
-        break;
-      }
-
-      case 'text':
-      default: {
-        current = undefined;
-        messages.push({
-          id: [message.id, i].join('_'),
-          role: message.role,
-          content: [block],
-        } as any);
-        break;
-      }
-    }
-
-    i++;
-  }
-
-  return { current, messages };
-};

package/src/hooks/processor.test.ts

@@ -1,15 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { describe, it } from 'vitest';
-
-import { ChatProcessor } from './processor';
-
-describe('ChatProcessor', () => {
-  it('should be instantiable', ({ expect }) => {
-    const client = {} as any; // TODO(burdon): Create mock.
-    const processor = new ChatProcessor(client);
-    expect(processor).toBeDefined();
-  });
-});

package/src/hooks/processor.ts

@@ -1,238 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Signal, batch, computed, signal } from '@preact/signals-core';
-
-import {
-  DEFAULT_EDGE_MODEL,
-  type ExecutableTool,
-  type AiServiceClient,
-  type GenerateRequest,
-  type Message,
-  type MessageContentBlock,
-  type ToolUseContentBlock,
-} from '@dxos/ai';
-import { type PromiseIntentDispatcher } from '@dxos/app-framework';
-import { type ArtifactDefinition } from '@dxos/artifact';
-import { AISession, type ArtifactDiffResolver } from '@dxos/assistant';
-import { invariant } from '@dxos/invariant';
-import { log } from '@dxos/log';
-import { Filter, getVersion, type Space } from '@dxos/react-client/echo';
-
-// TODO(burdon): Factor out.
-declare global {
-  interface ToolContextExtensions {
-    space?: Space;
-    dispatch?: PromiseIntentDispatcher;
-  }
-}
-
-type RequestOptions = {
-  history?: Message[];
-  onComplete?: (messages: Message[]) => void;
-};
-
-export type ChatProcessorOptions = Pick<GenerateRequest, 'model' | 'systemPrompt'>;
-
-const defaultOptions: ChatProcessorOptions = {
-  model: DEFAULT_EDGE_MODEL,
-  systemPrompt: 'you are a helpful assistant',
-};
-
-/**
- * Handles interactions with the AI service.
- * Maintains a queue of messages and handles streaming responses from the AI service.
- * Executes tools based on AI responses.
- * Supports cancellation of in-progress requests.
- */
-export class ChatProcessor {
-  /** Pending messages (incl. the current user request). */
-  private readonly _pending: Signal<Message[]> = signal([]);
-
-  /** Current streaming block (from the AI service). */
-  private readonly _block: Signal<MessageContentBlock | undefined> = signal(undefined);
-
-  /** Current streaming response. */
-  private _session: AISession | undefined;
-
-  /**
-   * Streaming state.
-   * @reactive
-   */
-  public readonly streaming: Signal<boolean> = computed(() => this._block.value !== undefined);
-
-  /**
-   * Last error.
-   * @reactive
-   */
-  public readonly error: Signal<Error | undefined> = signal(undefined);
-
-  /**
-   * Array of Messages (incl. the current message being streamed).
-   * @reactive
-   */
-  public readonly messages: Signal<Message[]> = computed(() => {
-    const messages = [...this._pending.value];
-    if (this._block.value) {
-      const current = messages.pop();
-      invariant(current);
-      const { content, ...rest } = current;
-      const message = { ...rest, content: [...content, this._block.value] };
-      messages.push(message);
-    }
-
-    return messages;
-  });
-
-  constructor(
-    private readonly _ai: AiServiceClient,
-    private _tools?: ExecutableTool[],
-    private _artifacts?: ArtifactDefinition[],
-    private readonly _extensions?: ToolContextExtensions,
-    private readonly _options: ChatProcessorOptions = defaultOptions,
-  ) {}
-
-  get tools() {
-    return this._tools;
-  }
-
-  /**
-   * Update tools.
-   */
-  setTools(tools: ExecutableTool[]): void {
-    this._tools = tools;
-  }
-
-  /**
-   * Make GPT request.
-   */
-  async request(message: string, options: RequestOptions = {}): Promise<Message[]> {
-    this._session = new AISession({ operationModel: 'configured' });
-
-    // Message complete.
-    this._session.message.on((message) => {
-      batch(() => {
-        this._pending.value = [...this._pending.value, message];
-        this._block.value = undefined;
-      });
-    });
-
-    // Streaming update (happens before message complete).
-    this._session.update.on((block) => {
-      batch(() => {
-        this._block.value = block;
-      });
-    });
-
-    this._session.userMessage.on((message) => {
-      this._pending.value = [...this._pending.value, message];
-    });
-
-    this._session.toolStatusReport.on(({ message, status }) => {
-      const msg = this._pending.peek().find((m) => m.id === message.id);
-      const toolUse = msg?.content.find((block) => block.type === 'tool_use');
-      if (!toolUse) {
-        return;
-      }
-
-      const block = msg?.content.find(
-        (block): block is ToolUseContentBlock => block.type === 'tool_use' && block.id === toolUse.id,
-      );
-      if (block) {
-        this._pending.value = this._pending.value.map((m) => {
-          if (m.id === message.id) {
-            return {
-              ...m,
-              content: m.content.map((b) =>
-                b.type === 'tool_use' && b.id === toolUse.id ? { ...b, currentStatus: status } : b,
-              ),
-            };
-          }
-          return m;
-        });
-      } else {
-        log.warn('no block for status report');
-      }
-    });
-
-    try {
-      const messages = await this._session.run({
-        client: this._ai,
-        history: options.history ?? [],
-        artifacts: this._artifacts ?? [],
-        requiredArtifactIds: this._artifacts?.map((artifact) => artifact.id) ?? [],
-        tools: this._tools ?? [],
-        prompt: message,
-        systemPrompt: this._options.systemPrompt,
-        extensions: this._extensions,
-        artifactDiffResolver: this._artifactDiffResolver,
-        generationOptions: {
-          model: this._options.model,
-        },
-      });
-
-      log('completed', { messages });
-      options.onComplete?.(this._pending.value);
-    } catch (err) {
-      log.catch(err);
-      if (err instanceof Error && err.message.includes('Overloaded')) {
-        this.error.value = new AiServiceOverloadedError('AI service overloaded', { cause: err });
-      } else {
-        this.error.value = new Error('AI service error', { cause: err });
-      }
-    } finally {
-      this._session = undefined;
-    }
-
-    return this._reset();
-  }
-
-  /**
-   * Cancel pending requests.
-   * @returns Pending requests (incl. the request message).
-   */
-  async cancel(): Promise<Message[]> {
-    log.info('cancelling...');
-    this._session?.abort();
-    return this._reset();
-  }
-
-  private async _reset(): Promise<Message[]> {
-    const messages = this._pending.value;
-    batch(() => {
-      this._pending.value = [];
-      this._block.value = undefined;
-    });
-
-    return messages;
-  }
-
-  private _artifactDiffResolver: ArtifactDiffResolver = async (artifacts) => {
-    const space = this._extensions?.space;
-    if (!space) {
-      return new Map();
-    }
-    const versions = new Map();
-    await Promise.all(
-      artifacts.map(async (artifact) => {
-        const {
-          objects: [object],
-        } = await space.db.query(Filter.ids(artifact.id)).run();
-        if (!object) {
-          return;
-        }
-        versions.set(artifact.id, {
-          version: getVersion(object),
-          diff: `Current state: ${JSON.stringify(object)}`,
-        });
-      }),
-    );
-    return versions;
-  };
-}
-
-// TODO(wittjosiah): Move to ai-service-client.
-export class AiServiceOverloadedError extends Error {
-  code = 'AI_SERVICE_OVERLOADED';
-}