@dxos/plugin-assistant 0.8.4-main.9735255 → 0.8.4-main.9be5663bfe

package/src/{components → containers/ChatCompanion}/ChatCompanion.tsx

@@ -5,63 +5,43 @@
 import * as Array from 'effect/Array';
 import * as Function from 'effect/Function';
 import * as Option from 'effect/Option';
-import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/react';
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { Chat } from '@dxos/assistant-toolkit';
 import { Blueprint } from '@dxos/blueprints';
 import { getSpace } from '@dxos/client/echo';
 import { Filter, Obj, Ref } from '@dxos/echo';
-import { SpaceOperation } from '@dxos/plugin-space/types';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { useQuery } from '@dxos/react-client/echo';
 import { useAsyncEffect } from '@dxos/react-ui';
 
-import { ChatContainer, type ChatEvent } from '../components';
-import { useBlueprintRegistry, useContextBinder } from '../hooks';
-import { Assistant, AssistantOperation } from '../types';
+import { type ChatEvent } from '#components';
+import { useBlueprintRegistry, useContextBinder } from '#hooks';
+import { AssistantOperation } from '#operations';
 
-export type ChatCompanionProps = {
-  role?: string;
-  data: {
-    subject: Assistant.Chat | 'assistant-chat';
-    companionTo: Obj.Unknown;
-  };
-};
+import ChatContainer from '../ChatContainer';
+
+export type ChatCompanionProps = AppSurface.ArticleProps<Chat.Chat, {}, Obj.Unknown>;
 
 export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
-  ({ role, data }: ChatCompanionProps, forwardedRef) => {
+  ({ role, subject: chat, companionTo, attendableId }, forwardedRef) => {
     const { invokePromise } = useOperationInvoker();
     const blueprintRegistry = useBlueprintRegistry();
-    const companionTo = data.companionTo;
-
     const space = getSpace(companionTo);
-    const [chat, setChat] = useState(data.subject === 'assistant-chat' ? undefined : data.subject);
-    useEffect(() => {
-      setChat(data.subject === 'assistant-chat' ? undefined : data.subject);
-    }, [data.subject]);
-
-    const chatQueue = space && chat ? space.queues.get(chat.queue.dxn) : undefined;
-    const binder = useContextBinder(chatQueue);
+    const feedTarget = chat?.feed.target;
+    const binder = useContextBinder(space, feedTarget);
 
-    // Initialize companion chat if it doesn't exist, but don't add it to the space immediately.
-    useAsyncEffect(async () => {
-      if (!space || chat) {
-        return;
-      }
-
-      const { data } = await invokePromise(AssistantOperation.CreateChat, { db: space.db });
-      setChat(data?.object);
-    }, [chat, space]);
-
-    // Add chat to space when user submits the first message.
+    // Persist chat on first submit.
     const handleEvent = useCallback(
       async (event: ChatEvent) => {
-        const chatInSpace = !!getSpace(chat);
-        if (chatInSpace || !chat || !space) {
+        if (!space || !chat) {
           return;
         }
 
-        if (event.type === 'submit') {
+        if (event.type === 'submit' && !getSpace(chat)) {
           await invokePromise(SpaceOperation.AddObject, {
             object: chat,
             target: space.db,
@@ -69,7 +49,7 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
           });
           await invokePromise(SpaceOperation.AddRelation, {
             db: space.db,
-            schema: Assistant.CompanionTo,
+            schema: Chat.CompanionTo,
             source: chat,
             target: companionTo,
           });
@@ -82,7 +62,7 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
       [chat, space, companionTo, invokePromise],
     );
 
-    const metadata = useCapabilities(Common.Capability.Metadata);
+    const metadata = useCapabilities(AppCapabilities.Metadata);
     const blueprintKeys = useMemo(
       () =>
         Function.pipe(
@@ -125,7 +105,7 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
           continue;
         }
 
-        space.db.add(Obj.clone(blueprint));
+        space.db.add(Obj.clone(blueprint, { deep: true }));
       }
     }, [space, blueprintRegistry, blueprintKeys]);
 
@@ -149,9 +129,10 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
 
     return (
       <ChatContainer
-        role={role}
+        role={role ?? 'article'}
         space={space}
         subject={chat}
+        attendableId={attendableId}
         companionTo={companionTo}
         onEvent={handleEvent}
         ref={forwardedRef}
@@ -159,5 +140,3 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
     );
   },
 );
-
-export default ChatCompanion;

package/src/containers/ChatCompanion/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { ChatCompanion as default } from './ChatCompanion';

package/src/containers/ChatContainer/ChatContainer.tsx

@@ -0,0 +1,95 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { forwardRef, useEffect, useRef } from 'react';
+
+import { Capabilities } from '@dxos/app-framework';
+import { useAtomCapability, useCapability } from '@dxos/app-framework/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type Space, getSpace } from '@dxos/client/echo';
+import { Feed, type Obj } from '@dxos/echo';
+import { Panel } from '@dxos/react-ui';
+import { getParentId } from '@dxos/react-ui-attention';
+
+import { Chat as ChatComponent, type ChatRootProps } from '#components';
+import { useBlueprintRegistry, useChatProcessor, useChatServices, useOnline, usePresets } from '#hooks';
+import { AssistantCapabilities, type ChatType } from '#types';
+
+export type ChatContainerProps = (
+  | AppSurface.ObjectArticleProps<ChatType.Chat | undefined>
+  | AppSurface.ObjectSectionProps<ChatType.Chat | undefined>
+) & {
+  space?: Space;
+  companionTo?: Obj.Unknown;
+} & Pick<ChatRootProps, 'onEvent'>;
+
+export const ChatContainer = forwardRef<HTMLDivElement, ChatContainerProps>((props, forwardedRef) => {
+  const { role, attendableId, subject: chat, space: spaceProp, companionTo, onEvent } = props;
+  const parentId = attendableId ? getParentId(attendableId) : undefined;
+  const space = spaceProp ?? getSpace(chat);
+  const settings = useAtomCapability(AssistantCapabilities.Settings);
+  const runtime = useChatServices({ id: space?.id });
+  const [online, setOnline] = useOnline();
+  const { preset, ...chatProps } = usePresets(online);
+  const blueprintRegistry = useBlueprintRegistry();
+  const processor = useChatProcessor({
+    space,
+    chat,
+    preset,
+    runtime,
+    blueprintRegistry,
+    settings,
+  });
+
+  const registry = useCapability(Capabilities.AtomRegistry);
+  const stateAtom = useCapability(AssistantCapabilities.State);
+  const pendingSubmitted = useRef(false);
+  useEffect(() => {
+    if (!processor || !attendableId || pendingSubmitted.current) {
+      return;
+    }
+
+    const state = registry.get(stateAtom);
+    const pendingPrompt = state.pendingPrompts[attendableId];
+    if (pendingPrompt) {
+      pendingSubmitted.current = true;
+      registry.update(stateAtom, (current) => {
+        const { [attendableId]: _, ...rest } = current.pendingPrompts;
+        return { ...current, pendingPrompts: rest };
+      });
+      void processor.request({ message: pendingPrompt });
+    }
+  }, [processor, attendableId, registry, stateAtom]);
+
+  const feedTarget = chat?.feed.target;
+  const queue = space && feedTarget ? space.queues.get(Feed.getQueueDxn(feedTarget)!) : undefined;
+
+  if (!processor) {
+    return null;
+  }
+
+  return (
+    <ChatComponent.Root db={space?.db} chat={chat} queue={queue} processor={processor} onEvent={onEvent}>
+      <Panel.Root role={role} ref={forwardedRef}>
+        <Panel.Toolbar className='bg-toolbar-surface'>
+          <ChatComponent.Toolbar classNames='dx-document' attendableId={attendableId} companionTo={companionTo} />
+        </Panel.Toolbar>
+        <Panel.Content>
+          <ChatComponent.Viewport>
+            <ChatComponent.Thread />
+            <div role='none' className='dx-document p-4'>
+              <ChatComponent.Prompt
+                {...chatProps}
+                outline
+                preset={preset?.id}
+                online={online}
+                onOnlineChange={setOnline}
+              />
+            </div>
+          </ChatComponent.Viewport>
+        </Panel.Content>
+      </Panel.Root>
+    </ChatComponent.Root>
+  );
+});

package/src/containers/ChatContainer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { ChatContainer as default } from './ChatContainer';

package/src/{components → containers/ChatDialog}/ChatDialog.tsx

@@ -4,19 +4,19 @@
 
 import React, { useCallback, useState } from 'react';
 
-import { useAtomCapability } from '@dxos/app-framework/react';
+import { useAtomCapability } from '@dxos/app-framework/ui';
+import { type Chat as ChatTypes } from '@dxos/assistant-toolkit';
 import { Obj } from '@dxos/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { ChatDialog as NaturalChatDialog } from '@dxos/react-ui-chat';
 
-import { useBlueprintRegistry, useChatProcessor, useChatServices, useOnline, usePresets } from '../hooks';
-import { meta } from '../meta';
-import { type Assistant, AssistantCapabilities } from '../types';
-
-import { Chat, type ChatRootProps } from './Chat';
+import { Chat, type ChatRootProps } from '#components';
+import { useBlueprintRegistry, useChatProcessor, useChatServices, useOnline, usePresets } from '#hooks';
+import { meta } from '#meta';
+import { AssistantCapabilities } from '#types';
 
 export type ChatDialogProps = {
-  chat?: Assistant.Chat;
+  chat?: ChatTypes.Chat;
 };
 
 export const ChatDialog = ({ chat }: ChatDialogProps) => {
@@ -24,14 +24,14 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
 
   const db = chat && Obj.getDatabase(chat);
   const settings = useAtomCapability(AssistantCapabilities.Settings);
-  const services = useChatServices({ id: db?.spaceId, chat });
+  const runtime = useChatServices({ id: db?.spaceId });
   const [online, setOnline] = useOnline();
   const { preset, ...chatProps } = usePresets(online);
   const blueprintRegistry = useBlueprintRegistry();
   const processor = useChatProcessor({
     chat,
     preset,
-    services,
+    runtime,
     blueprintRegistry,
     settings,
   });
@@ -59,7 +59,7 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
   return (
     <Chat.Root chat={chat} processor={processor} onEvent={handleEvent}>
       <NaturalChatDialog.Root open={open} expanded={expanded} onOpenChange={setOpen}>
-        <NaturalChatDialog.Header title={t('assistant dialog title')} />
+        <NaturalChatDialog.Header title={t('assistant-dialog.title')} />
         <NaturalChatDialog.Content>
           <Chat.Thread />
         </NaturalChatDialog.Content>
@@ -70,5 +70,3 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
     </Chat.Root>
   );
 };
-
-export default ChatDialog;

package/src/containers/ChatDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { ChatDialog as default } from './ChatDialog';

package/src/containers/PromptArticle/PromptArticle.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { AgentPrompt } from '@dxos/assistant-toolkit';
+import { type Prompt } from '@dxos/blueprints';
+import { Obj } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { Operation } from '@dxos/operation';
+import { useComputeRuntimeCallback } from '@dxos/plugin-automation/hooks';
+import { Panel, Toolbar, useTranslation } from '@dxos/react-ui';
+import { useAttention } from '@dxos/react-ui-attention';
+
+import { TemplateEditor } from '#components';
+import { meta } from '#meta';
+
+export type PromptArticleProps = AppSurface.ObjectArticleProps<Prompt.Prompt>;
+
+export const PromptArticle = ({ role, attendableId, subject }: PromptArticleProps) => {
+  const { t } = useTranslation(meta.id);
+  const { hasAttention } = useAttention(attendableId);
+  const db = Obj.getDatabase(subject);
+
+  const inputData = useMemo<Operation.Definition.Input<typeof AgentPrompt> | undefined>(
+    () =>
+      subject && db
+        ? {
+            prompt: db.makeRef(Obj.getDXN(subject)),
+            input: {},
+          }
+        : undefined,
+    [subject, db],
+  );
+
+  const handleRun = useComputeRuntimeCallback(
+    db?.spaceId,
+    () => {
+      invariant(inputData);
+      return Operation.invoke(AgentPrompt, inputData);
+    },
+    [inputData],
+  );
+
+  return (
+    <Panel.Root role={role} className='dx-document'>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root disabled={!hasAttention} onClick={handleRun}>
+          <Toolbar.IconButton iconOnly icon='ph--play--regular' label={t('run-prompt.label')} onClick={handleRun} />
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <TemplateEditor id={subject.id} template={subject.instructions} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};

package/src/containers/PromptArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { PromptArticle as default } from './PromptArticle';

package/src/containers/PromptList/PromptList.stories.tsx

@@ -0,0 +1,129 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { SERVICES_CONFIG } from '@dxos/ai/testing';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Prompt } from '@dxos/blueprints';
+import { Filter } from '@dxos/echo';
+import { AutomationPlugin } from '@dxos/plugin-automation';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { Markdown } from '@dxos/plugin-markdown/types';
+import { corePlugins } from '@dxos/plugin-testing';
+import { Config } from '@dxos/react-client';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { Panel } from '@dxos/react-ui';
+import { Loading, withLayout } from '@dxos/react-ui/testing';
+import { Organization } from '@dxos/types';
+
+import { AssistantPlugin } from '../../AssistantPlugin';
+import { translations } from '../../translations';
+import { TracePanel } from '../TracePanel';
+import { PromptList } from './PromptList';
+
+// TODO(burdon): Factor out (see assistant-stories)
+export const config = {
+  remote: new Config({
+    runtime: {
+      services: SERVICES_CONFIG.REMOTE,
+    },
+  }),
+  persistent: new Config({
+    runtime: {
+      client: {
+        storage: {
+          persistent: true,
+        },
+      },
+      services: SERVICES_CONFIG.REMOTE,
+    },
+  }),
+  local: new Config({
+    runtime: {
+      services: SERVICES_CONFIG.LOCAL,
+    },
+  }),
+};
+
+const DefaultStory = () => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  const [subject] = useQuery(space?.db, Filter.type(Organization.Organization));
+  if (!subject) {
+    return <Loading data={{ space: !!space, subject: !!subject }} />;
+  }
+
+  return (
+    <Panel.Root>
+      <Panel.Toolbar className='flex p-1 items-center'>
+        <PromptList subject={subject} role='toolbar-input' />
+      </Panel.Toolbar>
+      <Panel.Content>
+        <TracePanel space={space} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-assistant/containers/PromptList',
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'column' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Prompt.Prompt, Organization.Organization, Markdown.Document],
+          config: config.remote,
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              const space = yield* Effect.promise(() => client.spaces.create());
+              yield* Effect.promise(() => space.waitUntilReady());
+              space.db.add(
+                Organization.make({
+                  name: 'DXOS',
+                }),
+              );
+              space.db.add(
+                Prompt.make({
+                  name: 'Summarize',
+                  instructions: 'Create a new markdown document that is a summary of the selected object.',
+                }),
+              );
+              space.db.add(
+                Prompt.make({
+                  name: 'Analyze',
+                  instructions: 'Analyze the selected content.',
+                }),
+              );
+              space.db.add(
+                Prompt.make({
+                  name: 'Translate',
+                  instructions: 'Translate the selected content to Spanish.',
+                }),
+              );
+            }),
+        }),
+
+        AssistantPlugin(),
+        AutomationPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/PromptList/PromptList.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { DatabaseBlueprint, MarkdownBlueprint, WebSearchBlueprint } from '@dxos/assistant-toolkit';
+import { Prompt } from '@dxos/blueprints';
+import { Filter, Obj, Ref } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { IconButton } from '@dxos/react-ui';
+
+import { AssistantOperation } from '#operations';
+
+export type PromptListProps = AppSurface.ObjectSectionProps<Obj.Unknown>;
+
+export const PromptList = ({ subject }: PromptListProps) => {
+  const { invokePromise } = useOperationInvoker();
+  const db = Obj.getDatabase(subject);
+  const prompts = useQuery(db, Filter.type(Prompt.Prompt));
+  if (!db) {
+    return null;
+  }
+
+  return (
+    <div role='none' className='flex gap-2'>
+      {prompts.map((prompt, i) => (
+        <div key={i}>
+          <IconButton
+            icon='ph--magic-wand--regular'
+            label={Obj.getLabel(prompt) ?? Obj.getDXN(prompt).toString()}
+            onClick={() => {
+              void invokePromise(AssistantOperation.RunPromptInNewChat, {
+                db,
+                prompt: Ref.make(prompt),
+                objects: [subject],
+                // TODO(burdon): Concifgure from Prompt object.
+                blueprints: [DatabaseBlueprint.key, WebSearchBlueprint.key, MarkdownBlueprint.key],
+                background: true,
+              });
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/containers/PromptList/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { PromptList as default } from './PromptList';