@dxos/plugin-assistant 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

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

@@ -4,115 +4,244 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { Effect, Layer } from 'effect';
+import React, { useEffect, useMemo } from 'react';
 
-import { Message } from '@dxos/ai';
 import { Obj } from '@dxos/echo';
+import { ContextQueueService, DatabaseService } from '@dxos/functions';
 import { faker } from '@dxos/random';
+import { useQueue, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { ColumnContainer, withLayout, withTheme } from '@dxos/storybook-utils';
+import { type ContentBlock, DataType } from '@dxos/schema';
+import { ColumnContainer, render, withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { ChatThread } from './ChatThread';
 import { translations } from '../../translations';
 
+import { renderObjectLink } from './ChatMessage';
+import { ChatThread, type ChatThreadProps } from './ChatThread';
+
 faker.seed(1);
 
-const TEST_MESSAGES: Message[] = [
-  Obj.make(Message, {
-    role: 'user',
-    content: [
-      {
-        type: 'text',
-        text: faker.lorem.sentence(5),
-      },
-    ],
+const StoryContainer = ({ delay = 0, ...props }: ChatThreadProps & { delay?: number }) => {
+  const space = useSpace();
+  const queueDxn = useMemo(() => space?.queues.create().dxn, [space]);
+  const queue = useQueue<DataType.Message>(queueDxn);
+  useEffect(() => {
+    if (!space || !queue) {
+      return;
+    }
+
+    void Effect.runPromise(
+      Effect.gen(function* () {
+        for (const step of MESSAGES) {
+          yield* step;
+          yield* Effect.sleep(delay);
+        }
+
+        return queue;
+      }).pipe(Effect.provide(Layer.mergeAll(DatabaseService.layer(space.db), ContextQueueService.layer(queue)))),
+    );
+  }, [space, queue]);
+
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <ChatThread {...props} space={space} messages={queue?.objects ?? []} onEvent={(event) => console.log(event)} />
+  );
+};
+
+const createMessage = (role: DataType.ActorRole, blocks: ContentBlock.Any[]): DataType.Message => {
+  return Obj.make(DataType.Message, {
+    created: new Date().toISOString(),
+    sender: { role },
+    blocks,
+  });
+};
+
+const MESSAGES: Effect.Effect<void, never, DatabaseService | ContextQueueService>[] = [
+  Effect.gen(function* () {
+    const { queue } = yield* ContextQueueService;
+    yield* Effect.promise(() =>
+      queue.append([
+        createMessage('user', [
+          {
+            _tag: 'text',
+            text: faker.lorem.sentence(5),
+          },
+        ]),
+      ]),
+    );
   }),
-  Obj.make(Message, {
-    role: 'assistant',
-    content: [
-      {
-        type: 'text',
-        disposition: 'cot',
-        text: Array.from({ length: faker.number.int({ min: 3, max: 5 }) })
-          .map((_, idx) => `${idx + 1}. ${faker.lorem.paragraph()}`)
-          .join('\n'),
-      },
-      {
-        type: 'text',
-        text: Array.from({ length: faker.number.int({ min: 2, max: 5 }) })
-          .map(() => faker.lorem.paragraphs())
-          .join('\n\n'),
-      },
-      {
-        type: 'tool_use',
-        id: '1234',
-        name: 'search',
-        input: {},
-      },
-    ],
+
+  Effect.gen(function* () {
+    const { queue } = yield* ContextQueueService;
+    yield* Effect.promise(() =>
+      queue.append([
+        createMessage('assistant', [
+          {
+            _tag: 'suggest',
+            text: 'Search...',
+          },
+          {
+            _tag: 'suggest',
+            text: faker.lorem.paragraphs(1),
+          },
+        ]),
+        createMessage('assistant', [
+          {
+            _tag: 'text',
+            text: 'Select an option:',
+          },
+          {
+            _tag: 'select',
+            options: ['Option 1', 'Option 2', 'Option 3'],
+          },
+        ]),
+      ]),
+    );
   }),
-  Obj.make(Message, {
-    role: 'user',
-    content: [
-      {
-        type: 'tool_result',
-        toolUseId: '1234',
-        content: 'This is a tool result.',
-      },
-    ],
+
+  Effect.gen(function* () {
+    const { queue } = yield* ContextQueueService;
+    const { db } = yield* DatabaseService;
+    const obj1 = db.add(Obj.make(DataType.Organization, { name: 'DXOS' }));
+    const obj2 = db.add(Obj.make(DataType.Person, { fullName: 'Alice' }));
+    const obj3 = db.add(Obj.make(DataType.Person, { fullName: 'Bob' }));
+    const obj4 = db.add(Obj.make(DataType.Person, { fullName: 'Charlie' }));
+    yield* Effect.promise(() =>
+      queue.append([
+        createMessage('assistant', [
+          // Inline tag.
+          {
+            _tag: 'text',
+            text: [faker.lorem.paragraph(), renderObjectLink(obj1), faker.lorem.paragraph()].join(' '),
+          },
+          // Inline cards.
+          ...[obj2, obj3, obj4].map(
+            (obj) =>
+              ({
+                _tag: 'text',
+                text: renderObjectLink(obj),
+              }) satisfies ContentBlock.Text,
+          ),
+        ]),
+      ]),
+    );
   }),
-  Obj.make(Message, {
-    role: 'assistant',
-    content: [
-      {
-        type: 'tool_use',
-        id: '4567',
-        name: 'create',
-        input: {},
-      },
-    ],
+
+  Effect.gen(function* () {
+    const { queue } = yield* ContextQueueService;
+    yield* Effect.promise(() =>
+      queue.append([
+        createMessage('assistant', [
+          {
+            _tag: 'text',
+            text: faker.lorem.paragraphs(1),
+          },
+          {
+            _tag: 'toolkit',
+          },
+        ]),
+      ]),
+    );
   }),
-  Obj.make(Message, {
-    role: 'user',
-    content: [
-      {
-        type: 'tool_result',
-        toolUseId: '4567',
-        content: 'This is a tool result.',
-      },
-    ],
+
+  Effect.gen(function* () {
+    const { queue } = yield* ContextQueueService;
+    yield* Effect.promise(() =>
+      queue.append([
+        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: 'toolCall',
+            toolCallId: '1234',
+            name: 'search',
+            input: {},
+          },
+        ]),
+        createMessage('user', [
+          {
+            _tag: 'toolResult',
+            toolCallId: '1234',
+            name: 'search',
+            result: 'This is a tool result.',
+          },
+        ]),
+      ]),
+    );
   }),
-  Obj.make(Message, {
-    role: 'assistant',
-    content: [
-      {
-        type: 'text',
-        text: faker.lorem.paragraphs(1),
-      },
-    ],
+
+  Effect.gen(function* () {
+    const { queue } = yield* ContextQueueService;
+    yield* Effect.promise(() =>
+      queue.append([
+        createMessage('assistant', [
+          {
+            _tag: 'toolCall',
+            toolCallId: '4567',
+            name: 'create',
+            input: {},
+          },
+        ]),
+        createMessage('user', [
+          {
+            _tag: 'toolResult',
+            toolCallId: '4567',
+            name: 'create',
+            result: 'This is a tool result.',
+          },
+        ]),
+        createMessage('assistant', [
+          {
+            _tag: 'text',
+            text: Array.from({ length: faker.number.int({ min: 2, max: 3 }) })
+              .map(() => faker.lorem.paragraphs())
+              .join('\n\n'),
+          },
+        ]),
+      ]),
+    );
   }),
-  Obj.make(Message, {
-    role: 'assistant',
-    content: [
-      {
-        type: 'json',
-        disposition: 'suggest',
-        json: JSON.stringify({ text: 'Search...' }),
-      },
-      {
-        type: 'json',
-        disposition: 'suggest',
-        json: JSON.stringify({ text: faker.lorem.paragraphs(1) }),
-      },
-    ],
+
+  Effect.gen(function* () {
+    const { queue } = yield* ContextQueueService;
+    yield* Effect.promise(() =>
+      queue.append([
+        createMessage('assistant', [
+          {
+            _tag: 'text',
+            text: faker.lorem.paragraphs(2),
+          },
+        ]),
+      ]),
+    );
   }),
 ];
 
 const meta = {
   title: 'plugins/plugin-assistant/ChatThread',
   component: ChatThread,
-  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout({ Container: ColumnContainer })],
+  render: render(StoryContainer),
+  decorators: [
+    withClientProvider({
+      createIdentity: true,
+      types: [DataType.Organization, DataType.Person],
+    }),
+    withTheme,
+    withLayout({
+      Container: ColumnContainer,
+      classNames: 'is-[40rem]',
+    }),
+  ],
   parameters: {
     translations,
   },
@@ -122,27 +251,10 @@ 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<Message[]>([]);
-    useEffect(() => {
-      let i = 0;
-      const interval = setInterval(() => {
-        setMessages((messages) => [...messages, TEST_MESSAGES[i++]]);
-        if (i >= TEST_MESSAGES.length) {
-          clearInterval(interval);
-        }
-      }, 2_000);
+export const Default = {} satisfies Story;
 
-      return () => clearInterval(interval);
-    }, []);
-
-    return <ChatThread messages={messages} collapse />;
+export const Delayed = {
+  args: {
+    delay: 2_000,
   },
 } satisfies Story;

package/src/components/ChatThread/ChatThread.tsx

@@ -4,31 +4,27 @@
 
 import React, { type CSSProperties, forwardRef, useMemo } from 'react';
 
-import { type Message } from '@dxos/ai';
 import { PublicKey } from '@dxos/keys';
-import { type Space } from '@dxos/react-client/echo';
 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';
-import { type ChatProcessor } from '../../hooks';
 
-export type ChatThreadProps = ThemedClassName<{
-  identity?: Identity;
-  space?: Space;
-  // TODO(burdon): Replace with context.
-  processor?: ChatProcessor;
-  messages?: Message[];
-  collapse?: boolean;
-}> &
-  Pick<ChatMessageProps, 'debug' | 'tools' | 'onPrompt' | 'onDelete' | 'onAddToGraph'>;
+export type ChatThreadProps = ThemedClassName<
+  {
+    identity?: Identity;
+    messages?: DataType.Message[];
+    collapse?: boolean;
+  } & Pick<ChatMessageProps, 'debug' | 'space' | 'tools' | 'onEvent'>
+>;
 
 export const ChatThread = forwardRef<ScrollController, ChatThreadProps>(
-  ({ classNames, identity, space, processor, messages, collapse = true, ...props }, forwardedRef) => {
+  ({ classNames, identity, messages, collapse = true, ...props }, forwardedRef) => {
     const userHue = useMemo(() => {
       return identity?.profile?.data?.hue || keyToFallback(identity?.identityKey ?? PublicKey.random()).hue;
     }, [identity]);
@@ -36,7 +32,7 @@ export const ChatThread = forwardRef<ScrollController, ChatThreadProps>(
     // 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: Message[]; current?: Message }>(messageReducer, {
+        return (messages ?? []).reduce<{ messages: DataType.Message[]; current?: DataType.Message }>(messageReducer, {
           messages: [],
         });
       } else {
@@ -48,18 +44,11 @@ export const ChatThread = forwardRef<ScrollController, ChatThreadProps>(
       <ScrollContainer ref={forwardedRef} classNames={classNames} fade>
         <div
           role='none'
-          className={mx(filteredMessages.length > 0 && 'pbs-6 pbe-6')}
+          className={mx('flex flex-col gap-2', filteredMessages.length > 0 && 'pbs-4 pbe-4')}
           style={{ '--user-fill': `var(--dx-${userHue}Fill)` } as CSSProperties}
         >
           {filteredMessages.map((message) => (
-            <ChatMessage
-              key={message.id}
-              classNames='px-4 pbe-4'
-              space={space}
-              processor={processor}
-              message={message}
-              {...props}
-            />
+            <ChatMessage key={message.id} message={message} {...props} />
           ))}
         </div>
       </ScrollContainer>

package/src/components/ChatThread/Link.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type Space } from '@dxos/client/echo';
+import { Obj, Ref } from '@dxos/echo';
+import { type DXN } from '@dxos/keys';
+import { mx } from '@dxos/react-ui-theme';
+
+import { useResolvedRef } from '../../hooks';
+
+export type ObjectLinkProps = {
+  space: Space;
+  dxn: DXN;
+};
+
+// TODO(burdon): Factor out.
+export const ObjectLink = ({ space, dxn }: ObjectLinkProps) => {
+  const object = useResolvedRef(space, Ref.fromDXN(dxn));
+  const title = Obj.getLabel(object) ?? object?.id ?? dxn.toString();
+
+  return (
+    <a
+      // href={dxn.toString()}
+      title={title}
+      className={mx(
+        // TODO(burdon): Use style for tags.
+        'inline-flex items-center max-w-[16rem] px-1.5 overflow-hidden',
+        'border border-separator rounded whitespace-nowrap text-ellipsis text-primary-500 hover:text-primary-500 hover:border-primary-500 cursor-pointer',
+      )}
+      target='_blank'
+      rel='noopener noreferrer'
+    >
+      <span className='truncate'>{title}</span>
+    </a>
+  );
+};

package/src/components/ChatThread/ToolBlock.tsx

@@ -4,64 +4,78 @@
 
 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 { type AgentStatus, type Tool } from '@dxos/ai';
+import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { NumericTabs, StatusRoll, ToggleContainer } from '@dxos/react-ui-components';
 import { type JsonProps, Json as NativeJson } from '@dxos/react-ui-syntax-highlighter';
+import { type DataType } from '@dxos/schema';
 import { isNonNullable, isNotFalsy } from '@dxos/util';
 
-export const isToolMessage = (message: Message) => {
-  return message.content.some((block) => block.type === 'tool_use' || block.type === 'tool_result');
+import { meta } from '../../meta';
+
+export const isToolMessage = (message: DataType.Message) => {
+  return message.blocks.some((block) => block._tag === 'toolCall' || block._tag === 'toolResult');
 };
 
 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 type ToolBlockProps = ThemedClassName<{
-  message: Message;
+  message: DataType.Message;
   tools?: Tool[];
 }>;
 
 export const ToolBlock: FC<ToolBlockProps> = ({ classNames, message, tools }) => {
-  const { content = [] } = message;
+  const { t } = useTranslation(meta.id);
+  const { blocks = [] } = message;
+
+  const getToolCaption = (tool?: Tool, status?: AgentStatus) => {
+    if (!tool) {
+      return t('calling tool label');
+    }
+
+    return status?.message ?? tool.caption ?? [t('calling label') + getToolName(tool)].join(' ');
+  };
 
   let request: { tool: Tool | undefined; block: any } | undefined;
-  const blocks = content.filter((block) => block.type === 'tool_use' || block.type === 'tool_result');
-  const items = blocks
+  const toolBlocks = blocks.filter((block) => block._tag === 'toolCall' || block._tag === 'toolResult');
+  const items = toolBlocks
     .map((block) => {
-      switch (block.type) {
-        case 'tool_use': {
+      switch (block._tag) {
+        case 'toolCall': {
           // TODO(burdon): Skip these updates?
-          if (block.pending && request?.block.id === block.id) {
+          if (block.pending && request?.block.toolCallId === block.toolCallId) {
             return null;
           }
 
           request = { tool: tools?.find((tool) => tool.name === block.name), block };
-          return { title: getToolCaption(request.tool, block.currentStatus), block };
+          return {
+            title: getToolCaption(request.tool, request.block.status),
+            block,
+          };
         }
 
-        case 'tool_result': {
-          if (!request) {
-            log.warn('unexpected message', { block });
-            return { title: 'Error', block };
+        case 'toolResult': {
+          if (!request || block.error) {
+            return {
+              title: t('error label'),
+              block,
+            };
           }
 
-          return { title: `${getToolCaption(request.tool, undefined)} (Success)`, block };
+          return {
+            title: getToolCaption(request.tool, request.block.status),
+            block,
+          };
         }
 
         default: {
           request = undefined;
-          return { title: 'Error', block };
+          return {
+            title: t('error label'),
+            block,
+          };
         }
       }
     })

package/src/components/ChatThread/reducer.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Message } from '@dxos/ai';
+import { type DataType } from '@dxos/schema';
 
 // TODO(burdon): Move to util?
 type Reducer<R, I> = (acc: R, value: I) => R;
@@ -11,24 +11,24 @@ 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> = (
+export const messageReducer: Reducer<{ messages: DataType.Message[]; current?: DataType.Message }, DataType.Message> = (
   { current, messages },
   message,
 ) => {
   let i = 0;
-  for (const block of message.content) {
-    switch (block.type) {
-      case 'tool_use':
-      case 'tool_result': {
+  for (const block of message.blocks) {
+    switch (block._tag) {
+      case 'toolCall':
+      case 'toolResult': {
         if (current) {
-          current.content.push(block);
+          current.blocks.push(block);
         } else {
           current = {
+            ...message,
             id: [message.id, i].join('_'),
-            role: message.role,
-            content: [block],
-          } as any;
-          messages.push(current as any);
+            blocks: [block],
+          };
+          messages.push(current);
         }
         break;
       }
@@ -37,10 +37,10 @@ export const messageReducer: Reducer<{ messages: Message[]; current?: Message },
       default: {
         current = undefined;
         messages.push({
+          ...message,
           id: [message.id, i].join('_'),
-          role: message.role,
-          content: [block],
-        } as any);
+          blocks: [block],
+        });
         break;
       }
     }