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

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

@@ -4,20 +4,55 @@
 
 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 { 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 { DataType, type ContentBlock } from '@dxos/schema';
-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 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(),
@@ -26,88 +61,187 @@ const createMessage = (role: DataType.ActorRole, blocks: ContentBlock.Any[]): Da
   });
 };
 
-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 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),
+          },
+        ]),
+      ]),
+    );
+  }),
+
+  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'],
+          },
+        ]),
+      ]),
+    );
+  }),
+
+  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,
+          ),
+        ]),
+      ]),
+    );
+  }),
+
+  Effect.gen(function* () {
+    const { queue } = yield* ContextQueueService;
+    yield* Effect.promise(() =>
+      queue.append([
+        createMessage('assistant', [
+          {
+            _tag: 'text',
+            text: faker.lorem.paragraphs(1),
+          },
+          {
+            _tag: 'toolkit',
+          },
+        ]),
+      ]),
+    );
+  }),
+
+  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.',
+          },
+        ]),
+      ]),
+    );
+  }),
+
+  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'),
+          },
+        ]),
+      ]),
+    );
+  }),
+
+  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,
   },
@@ -117,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<DataType.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

@@ -20,7 +20,7 @@ export type ChatThreadProps = ThemedClassName<
     identity?: Identity;
     messages?: DataType.Message[];
     collapse?: boolean;
-  } & Pick<ChatMessageProps, 'debug' | 'space' | 'processor' | 'tools' | 'onEvent'>
+  } & Pick<ChatMessageProps, 'debug' | 'space' | 'tools' | 'onEvent'>
 >;
 
 export const ChatThread = forwardRef<ScrollController, ChatThreadProps>(
@@ -44,7 +44,7 @@ export const ChatThread = forwardRef<ScrollController, ChatThreadProps>(
       <ScrollContainer ref={forwardedRef} classNames={classNames} fade>
         <div
           role='none'
-          className={mx(filteredMessages.length > 0 && 'pbs-4 pbe-4')}
+          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) => (

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

@@ -5,13 +5,14 @@
 import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
 
 import { type AgentStatus, type Tool } from '@dxos/ai';
-import { log } from '@dxos/log';
-import { type ThemedClassName } from '@dxos/react-ui';
+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';
 
+import { meta } from '../../meta';
+
 export const isToolMessage = (message: DataType.Message) => {
   return message.blocks.some((block) => block._tag === 'toolCall' || block._tag === 'toolResult');
 };
@@ -20,22 +21,23 @@ 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: DataType.Message;
   tools?: Tool[];
 }>;
 
 export const ToolBlock: FC<ToolBlockProps> = ({ classNames, message, tools }) => {
+  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 toolBlocks = blocks.filter((block) => block._tag === 'toolCall' || block._tag === 'toolResult');
   const items = toolBlocks
@@ -49,19 +51,21 @@ export const ToolBlock: FC<ToolBlockProps> = ({ classNames, message, tools }) =>
 
           request = { tool: tools?.find((tool) => tool.name === block.name), block };
           return {
-            title: getToolCaption(request.tool, undefined), // block.status), // TODO(burdon): Get status?
+            title: getToolCaption(request.tool, request.block.status),
             block,
           };
         }
 
         case 'toolResult': {
-          if (!request) {
-            log.warn('unexpected message', { block });
-            return { title: 'Error', block };
+          if (!request || block.error) {
+            return {
+              title: t('error label'),
+              block,
+            };
           }
 
           return {
-            title: `${getToolCaption(request.tool, undefined)} (Success)`,
+            title: getToolCaption(request.tool, request.block.status),
             block,
           };
         }
@@ -69,7 +73,7 @@ export const ToolBlock: FC<ToolBlockProps> = ({ classNames, message, tools }) =>
         default: {
           request = undefined;
           return {
-            title: 'Error',
+            title: t('error label'),
             block,
           };
         }

package/src/components/SequenceContainer.tsx

@@ -14,9 +14,10 @@ import { Toolbar, useTranslation } from '@dxos/react-ui';
 import { useSelectionManager } from '@dxos/react-ui-attention';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { SequenceEditor } from './SequenceEditor';
 import { meta } from '../meta';
 
+import { SequenceEditor } from './SequenceEditor';
+
 // TODO(burdon): Move to config.
 export const EXA_API_KEY = '9c7e17ff-0c85-4cd5-827a-8b489f139e03';
 

package/src/components/SequenceEditor/SequenceEditor.stories.tsx

@@ -4,14 +4,15 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { SequenceEditor } from './SequenceEditor';
 import { RESEARCH_SEQUENCE_DEFINITION } from '../../testing';
 import { translations } from '../../translations';
 
+import { SequenceEditor } from './SequenceEditor';
+
 const meta: Meta<typeof SequenceEditor> = {
   title: 'plugins/plugin-assistant/SequenceEditor',
   component: SequenceEditor,

package/src/components/SequenceEditor/SequenceEditor.tsx

@@ -6,7 +6,7 @@ import React, { forwardRef, useImperativeHandle } from 'react';
 
 import { SequenceDefinition } from '@dxos/conductor';
 import { Type } from '@dxos/echo';
-import { useThemeContext, type ThemedClassName } from '@dxos/react-ui';
+import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
 import {
   type EditorView,
   createBasicExtensions,

package/src/components/TemplateEditor/TemplateEditor.stories.tsx

@@ -8,15 +8,16 @@ import { type Meta } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { createSystemPrompt } from '@dxos/assistant';
-import { Template } from '@dxos/blueprints';
+import { Blueprint, Template } from '@dxos/blueprints';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { ColumnContainer, withLayout, withTheme } from '@dxos/storybook-utils';
 import { trim } from '@dxos/util';
 
-import { TemplateEditor, type TemplateEditorProps } from './TemplateEditor';
 import { translations } from '../../translations';
 
+import { TemplateEditor, type TemplateEditorProps } from './TemplateEditor';
+
 const TEMPLATE = trim`
   {{! System Prompt }}
   
@@ -35,12 +36,18 @@ const TEMPLATE = trim`
 
 const DefaultStory = ({ source }: TemplateEditorProps & { source: string }) => {
   const client = useClient();
-  const [template] = useState(() => {
+  const [blueprint] = useState(() => {
     const space = client.spaces.default;
-    return space.db.add(Template.make({ source }));
+    return space.db.add(
+      Blueprint.make({
+        key: 'example.com/blueprint/test',
+        name: 'Test',
+        instructions: Template.make({ source }),
+      }),
+    );
   });
 
-  return <TemplateEditor template={template} />;
+  return <TemplateEditor id={blueprint.id} template={blueprint.instructions} />;
 };
 
 const meta: Meta<typeof DefaultStory> = {

package/src/components/TemplateEditor/TemplateEditor.tsx

@@ -8,9 +8,8 @@ import { handlebarsLanguage } from '@xiechao/codemirror-lang-handlebars';
 import React from 'react';
 
 import { type Template } from '@dxos/blueprints';
-import { invariant } from '@dxos/invariant';
 import { createDocAccessor } from '@dxos/react-client/echo';
-import { useThemeContext, useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { type ThemedClassName, useThemeContext, useTranslation } from '@dxos/react-ui';
 import {
   createBasicExtensions,
   createDataExtensions,
@@ -18,6 +17,7 @@ import {
   useTextEditor,
 } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
+import { isNotFalsy } from '@dxos/util';
 
 import { meta } from '../../meta';
 
@@ -30,21 +30,23 @@ handlebarsLanguage.configure({
 });
 
 export type TemplateEditorProps = ThemedClassName<{
+  id: string;
   template: Template.Template;
 }>;
 
-export const TemplateEditor = ({ classNames, template }: TemplateEditorProps) => {
+export const TemplateEditor = ({ id, classNames, template }: TemplateEditorProps) => {
   const { t } = useTranslation(meta.id);
   const { themeMode } = useThemeContext();
   const { parentRef } = useTextEditor(() => {
-    invariant(template.source.target);
+    const text = template.source?.target;
     return {
-      initialValue: template.source.target.content,
+      initialValue: text?.content ?? '',
       extensions: [
-        createDataExtensions({
-          id: template.id,
-          text: createDocAccessor(template.source.target, ['content']),
-        }),
+        text &&
+          createDataExtensions({
+            id,
+            text: createDocAccessor(text, ['content']),
+          }),
         createBasicExtensions({
           bracketMatching: false,
           lineNumbers: true,
@@ -58,11 +60,12 @@ export const TemplateEditor = ({ classNames, template }: TemplateEditorProps) =>
 
         // https://github.com/xiechao/lang-handlebars
         new LanguageSupport(handlebarsLanguage, syntaxHighlighting(handlebarsHighlightStyle)),
-      ],
+        // createMarkdownExtensions({}),
+      ].filter(isNotFalsy),
     };
-  }, [themeMode, template]);
+  }, [themeMode, template.source?.target]);
 
-  return <div ref={parentRef} className={mx('h-full', classNames)} />;
+  return <div ref={parentRef} className={mx('h-full overflow-hidden', classNames)} />;
 };
 
 /**