@dxos/plugin-assistant 0.8.3 → 0.8.4-main.1c7ec43d41

package/src/components/Chat/Chat.tsx

@@ -0,0 +1,270 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import * as Array from 'effect/Array';
+import * as Option from 'effect/Option';
+import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Event } from '@dxos/async';
+import { Filter, Obj } from '@dxos/echo';
+import { type Queue, useQuery } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { type MarkdownStreamController } from '@dxos/react-ui-markdown';
+import { Menu, MenuRootProps } from '@dxos/react-ui-menu';
+import { Message } from '@dxos/types';
+import { composable, composableProps } from '@dxos/ui-theme';
+
+import { useChatKeymapExtensions, useChatToolbarActions, useDebug } from '#hooks';
+
+import {
+  ChatStatus,
+  ChatPrompt as NaturalChatPrompt,
+  type ChatPromptProps as NaturalChatPromptProps,
+} from '../ChatPrompt';
+import { ChatThread as NaturalChatThread, type ChatThreadProps as NaturalChatThreadProps } from '../ChatThread';
+import { ChatContextProvider, type ChatContextValue, type ChatRequestTiming, useChatContext } from './context';
+import { type ChatEvent } from './events';
+
+export { useChatContext };
+
+//
+// Root
+//
+
+type ChatRootProps = PropsWithChildren<
+  Pick<ChatContextValue, 'db' | 'chat' | 'processor'> & {
+    feed?: Queue;
+    onEvent?: (event: ChatEvent) => void;
+  }
+>;
+
+const ChatRoot = ({ children, chat, feed, processor, onEvent, ...props }: ChatRootProps) => {
+  const [debug, setDebug] = useState(false);
+  const streaming = useAtomValue(processor.streaming);
+  const active = useAtomValue(processor.active);
+  const requestTiming = useRequestTiming({ active });
+  const lastPrompt = useRef<string | undefined>(undefined);
+  const db = props.db ?? (chat && Obj.getDatabase(chat));
+
+  const feedMessages = useQuery(feed, Filter.type(Message.Message));
+  const pendingMessages = useAtomValue(processor.messages);
+  const messages = useMemo(
+    () => Array.dedupeWith([...feedMessages, ...pendingMessages], ({ id: a }, { id: b }) => a === b),
+    [feedMessages, pendingMessages],
+  );
+
+  const dump = useDebug({ processor });
+
+  const event = useMemo(() => new Event<ChatEvent>(), []);
+  useEffect(() => {
+    return event.on((ev) => {
+      switch (ev.type) {
+        case 'toggle-debug': {
+          setDebug((debug) => {
+            if (debug) {
+              return false;
+            } else {
+              void dump();
+              return true;
+            }
+          });
+          break;
+        }
+
+        case 'submit': {
+          const text = ev.text.trim();
+          if (!streaming && text.length) {
+            lastPrompt.current = ev.text;
+            void processor.request({ message: text });
+          }
+          break;
+        }
+
+        case 'retry': {
+          if (!streaming) {
+            void processor.retry();
+          }
+          break;
+        }
+
+        case 'cancel': {
+          if (streaming) {
+            void processor.cancel();
+            if (lastPrompt.current) {
+              event.emit({ type: 'update-prompt', text: lastPrompt.current });
+            }
+          }
+          break;
+        }
+      }
+
+      onEvent?.(ev);
+    });
+  }, [event, dump, processor, streaming, onEvent]);
+
+  return (
+    <ChatContextProvider
+      debug={debug}
+      event={event}
+      db={db}
+      chat={chat}
+      messages={messages}
+      processor={processor}
+      requestTiming={requestTiming}
+      {...props}
+    >
+      {children}
+    </ChatContextProvider>
+  );
+};
+
+ChatRoot.displayName = 'Chat.Root';
+
+const useRequestTiming = ({ active }: { active: boolean }) => {
+  const [requestTiming, setRequestTiming] = useState<ChatRequestTiming | null>(null);
+  useEffect(() => {
+    if (active) {
+      setRequestTiming({ startedAt: Date.now(), endedAt: null });
+    } else {
+      setRequestTiming((prev) => (prev && prev.endedAt == null ? { ...prev, endedAt: Date.now() } : prev));
+    }
+  }, [active]);
+
+  return requestTiming;
+};
+
+//
+// Toolbar
+//
+
+const CHAT_TOOLBAR_NAME = 'Chat.Toolbar';
+
+type ChatToolbarProps = Pick<MenuRootProps, 'attendableId'> & {
+  companionTo?: Obj.Unknown;
+};
+
+const ChatToolbar = composable<HTMLDivElement, ChatToolbarProps>(
+  ({ attendableId, companionTo, ...props }, forwardedRef) => {
+    const { chat } = useChatContext(CHAT_TOOLBAR_NAME);
+    const menuActions = useChatToolbarActions({ chat, companionTo });
+
+    return (
+      <Menu.Root {...menuActions} attendableId={attendableId}>
+        <Menu.Toolbar {...composableProps(props)} ref={forwardedRef} />
+      </Menu.Root>
+    );
+  },
+);
+
+ChatToolbar.displayName = CHAT_TOOLBAR_NAME;
+
+//
+// Content
+//
+
+const CHAT_CONTENT_NAME = 'Chat.Content';
+
+type ChatContentProps = {};
+
+const ChatContent = composable<HTMLDivElement, ChatContentProps>(({ children, ...props }, forwardedRef) => {
+  return (
+    <div {...composableProps(props, { classNames: 'dx-expander flex flex-col' })} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
+
+ChatContent.displayName = CHAT_CONTENT_NAME;
+
+//
+// Thread
+//
+
+const CHAT_THREAD_NAME = 'Chat.Thread';
+
+type ChatThreadProps = Omit<NaturalChatThreadProps, 'identity' | 'messages' | 'tools'>;
+
+const ChatThread = ({ viewType, debug: debugProp, ...props }: ChatThreadProps) => {
+  const { debug, event, messages, processor } = useChatContext(CHAT_THREAD_NAME);
+  const debugView = viewType === 'debug';
+  const identity = useIdentity();
+  const error = useAtomValue(processor.error).pipe(Option.getOrUndefined);
+  const extensions = useChatKeymapExtensions({ event });
+
+  const controllerRef = useRef<MarkdownStreamController | null>(null);
+  useEffect(() => {
+    return event.on((event) => {
+      switch (event.type) {
+        case 'submit':
+        case 'scroll-to-bottom':
+          controllerRef.current?.scrollToBottom();
+          break;
+        case 'nav-previous':
+          controllerRef.current?.navigatePrevious();
+          break;
+        case 'nav-next':
+          controllerRef.current?.navigateNext();
+          break;
+      }
+    });
+  }, [event]);
+
+  const handleEvent = useCallback<NonNullable<NaturalChatThreadProps['onEvent']>>(
+    (ev) => {
+      event.emit(ev);
+    },
+    [event],
+  );
+
+  if (!identity) {
+    return null;
+  }
+
+  return (
+    <NaturalChatThread
+      {...props}
+      identity={identity}
+      messages={messages}
+      error={error}
+      debug={debugProp ?? (debug || debugView)}
+      viewType={viewType}
+      extensions={extensions}
+      onEvent={handleEvent}
+      ref={controllerRef}
+    />
+  );
+};
+
+ChatThread.displayName = CHAT_THREAD_NAME;
+
+//
+// Prompt
+//
+
+const CHAT_PROMPT_NAME = 'Chat.Prompt';
+
+type ChatPromptProps = Omit<NaturalChatPromptProps, 'chat' | 'db' | 'processor' | 'event'>;
+
+const ChatPrompt = (props: ChatPromptProps) => {
+  const { chat, db, processor, event } = useChatContext(CHAT_PROMPT_NAME);
+  return <NaturalChatPrompt {...props} chat={chat} db={db} processor={processor} event={event} />;
+};
+
+ChatPrompt.displayName = CHAT_PROMPT_NAME;
+
+//
+// Chat
+//
+
+export const Chat = {
+  Root: ChatRoot,
+  Toolbar: ChatToolbar,
+  Content: ChatContent,
+  Prompt: ChatPrompt,
+  Status: ChatStatus,
+  Thread: ChatThread,
+};
+
+export type { ChatRootProps, ChatToolbarProps, ChatContentProps, ChatPromptProps, ChatThreadProps, ChatEvent };

package/src/components/Chat/context.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+
+import { type Chat as ChatModule } from '@dxos/assistant-toolkit';
+import { type Event } from '@dxos/async';
+import { type Database } from '@dxos/echo';
+import { type Message } from '@dxos/types';
+
+import { type AiChatProcessor } from '../../processor';
+import { type ChatEvent } from './events';
+
+/**
+ * Wall-clock timestamps for the most-recent (or in-flight) request, lifted out of
+ * `ChatStreamStatus` so the elapsed value survives across re-mounts triggered when wire's
+ * drip queue toggles `wireDrainingEffect` (which removes/restores the footer block widget).
+ * `endedAt` is `null` while the request is still active.
+ */
+export type ChatRequestTiming = {
+  startedAt: number;
+  endedAt: number | null;
+};
+
+export type ChatContextValue = {
+  debug?: boolean;
+  event: Event<ChatEvent>;
+  db?: Database.Database;
+  chat?: ChatModule.Chat;
+  messages: Message.Message[];
+  processor: AiChatProcessor;
+  requestTiming: ChatRequestTiming | null;
+};
+
+// Internal: not re-exported from `Chat/index.ts`. Accessed by sibling components in this
+// package (e.g. `ChatStreamStatus`) without dragging in `Chat.tsx`'s heavy transitive
+// imports (transcription, etc.).
+export const [ChatContextProvider, useChatContext] = createContext<ChatContextValue>('Chat');

package/src/components/Chat/events.ts

@@ -0,0 +1,63 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Obj } from '@dxos/echo';
+
+/**
+ * The main `ChatRoot` manages the `ChatContextValue` which contains an `event` property that subcomponents
+ * can subscribe to and submit events. Unhandled events are passed to the external `onEvent` callback.
+ */
+export type ChatEvent =
+  | {
+      type: 'toggle-debug';
+    }
+  //
+  // Thread
+  //
+  | {
+      type: 'submit';
+      text: string;
+    }
+  | {
+      type: 'retry';
+    }
+  | {
+      type: 'cancel';
+    }
+  | {
+      type: 'delete';
+      id: string;
+    }
+  | {
+      type: 'add';
+      object: Obj.Unknown;
+    }
+  //
+  // UX
+  //
+  | {
+      type: 'update-prompt';
+      text: string;
+    }
+  | {
+      type: 'scroll-to-bottom';
+    }
+  | {
+      type: 'nav-previous';
+    }
+  | {
+      type: 'nav-next';
+    }
+  | {
+      type: 'thread-open';
+    }
+  | {
+      type: 'thread-close';
+    }
+  | {
+      type: 'record-start';
+    }
+  | {
+      type: 'record-stop';
+    };

package/src/components/Chat/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './events';
+
+export * from './Chat';

package/src/components/ChatPrompt/ChatActions.tsx

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

package/src/components/ChatPrompt/ChatMcpErrors.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useCallback } from 'react';
+
+import { Message, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+
+import { type AiChatProcessor } from '../../processor';
+
+export type ChatMcpErrorsProps = ThemedClassName<{
+  processor: AiChatProcessor;
+}>;
+
+/**
+ * Inline banner that lists MCP servers that failed to connect during the most recent request.
+ * The chat itself keeps working without these servers — this just lets the user see what was dropped.
+ */
+export const ChatMcpErrors = ({ classNames, processor }: ChatMcpErrorsProps) => {
+  const { t } = useTranslation(meta.id);
+  const errors = useAtomValue(processor.mcpErrors);
+
+  const handleDismiss = useCallback(() => {
+    processor.dismissMcpErrors();
+  }, [processor]);
+
+  if (errors.length === 0) {
+    return null;
+  }
+
+  return (
+    <Message.Root classNames={['m-1', classNames]} valence='warning'>
+      <Message.Title onClose={handleDismiss}>{t('mcp-server-error.label')}</Message.Title>
+      <Message.Content asChild>
+        <ul className='flex flex-col gap-0.5 text-sm'>
+          {errors.map((error) => (
+            <li key={`${error.url}::${error.protocol}`} className='truncate'>
+              <span className='font-mono'>{error.url}</span>
+              {' — '}
+              <span>{error.message}</span>
+            </li>
+          ))}
+        </ul>
+      </Message.Content>
+    </Message.Root>
+  );
+};

package/src/components/ChatPrompt/ChatOptions.stories.tsx

@@ -0,0 +1,136 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { useState } from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Chat } from '@dxos/assistant-toolkit';
+import { capabilities } from '@dxos/assistant-toolkit/testing';
+import { Feed, Filter, Ref } from '@dxos/echo';
+import { ChessPlugin } from '@dxos/plugin-chess';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { MapPlugin } from '@dxos/plugin-map';
+import { TablePlugin } from '@dxos/plugin-table';
+import { corePlugins } from '@dxos/plugin-testing';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { Loading, withTheme } from '@dxos/react-ui/testing';
+import { Organization, Person } from '@dxos/types';
+
+import { useBlueprintRegistry, useContextBinder } from '#hooks';
+import { translations } from '#translations';
+
+import { ChatOptions, ObjectsPanel, type ChatOptionsProps } from './ChatOptions';
+
+const presets = [
+  {
+    id: 'edge-claude-sonnet',
+    label: 'Edge/Claude Sonnet',
+  },
+  {
+    id: 'edge-gpt-4o',
+    label: 'Edge/GPT-4o',
+  },
+  {
+    id: 'ollama-llama3',
+    label: 'Ollama/Llama 3',
+  },
+];
+
+type DefaultStoryProps = Pick<ChatOptionsProps, 'presets'>;
+
+const DefaultStory = ({ presets }: DefaultStoryProps) => {
+  const [space] = useSpaces();
+  const [feed] = useQuery(space?.db, Filter.type(Feed.Feed));
+  const [chat] = useQuery(space?.db, Filter.type(Chat.Chat));
+  const blueprintRegistry = useBlueprintRegistry();
+  const binder = useContextBinder(space, feed);
+  const [preset, setPreset] = useState(presets?.[0]?.id);
+  if (!space || !binder || !chat) {
+    return <Loading />;
+  }
+
+  return (
+    <ChatOptions
+      chat={chat}
+      db={space.db}
+      context={binder}
+      blueprintRegistry={blueprintRegistry}
+      presets={presets}
+      preset={preset}
+      onPresetChange={setPreset}
+    />
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-assistant/components/ChatOptions',
+  component: ChatOptions as any,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Chat.Chat, Feed.Feed, Organization.Organization, Person.Person],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* initializeIdentity(client);
+              const [space] = client.spaces.get();
+              yield* Effect.promise(() => space.waitUntilReady());
+
+              // Populate space with sample objects.
+              for (let idx = 0; idx < 8; idx++) {
+                space.db.add(Organization.make({ name: `Org ${idx + 1}` }));
+                space.db.add(Person.make({ fullName: `Person ${idx + 1}` }));
+              }
+
+              // Create the chat feed used by the context binder.
+              const feed = space.db.add(Feed.make());
+              space.db.add(Chat.make({ name: 'Test chat', feed: Ref.make(feed) }));
+              yield* Effect.promise(() => space.db.flush({ indexes: true }));
+            }),
+        }),
+        ChessPlugin(),
+        MapPlugin(),
+        TablePlugin(),
+      ],
+      capabilities,
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    presets,
+  },
+};
+
+export const _ObjectsPanel: Story = {
+  render: () => {
+    const [space] = useSpaces();
+    const [feed] = useQuery(space?.db, Filter.type(Feed.Feed));
+    const binder = useContextBinder(space, feed);
+    if (!space || !binder) {
+      return <Loading />;
+    }
+
+    return (
+      <div className='grid w-[300px] h-[300px] border border-separator'>
+        <ObjectsPanel db={space.db} context={binder} />
+      </div>
+    );
+  },
+};