@dxos/plugin-automation 0.7.2 → 0.7.3-main.2dd075e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-automation",
-  "version": "0.7.2",
+  "version": "0.7.3-main.2dd075e",
   "description": "Prompt chain plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -47,32 +47,36 @@
     "@effect/schema": "^0.75.5",
     "@preact/signals-core": "^1.6.0",
     "lodash.get": "^4.4.2",
-    "@dxos/app-framework": "0.7.2",
-    "@dxos/async": "0.7.2",
-    "@dxos/chain": "0.7.2",
-    "@dxos/context": "0.7.2",
-    "@dxos/echo-db": "0.7.2",
-    "@dxos/functions": "0.7.2",
-    "@dxos/invariant": "0.7.2",
-    "@dxos/keys": "0.7.2",
-    "@dxos/log": "0.7.2",
-    "@dxos/plugin-client": "0.7.2",
-    "@dxos/plugin-chess": "0.7.2",
-    "@dxos/echo-schema": "0.7.2",
-    "@dxos/plugin-graph": "0.7.2",
-    "@dxos/plugin-deck": "0.7.2",
-    "@dxos/plugin-ipfs": "0.7.2",
-    "@dxos/plugin-inbox": "0.7.2",
-    "@dxos/plugin-markdown": "0.7.2",
-    "@dxos/plugin-script": "0.7.2",
-    "@dxos/plugin-sketch": "0.7.2",
-    "@dxos/plugin-space": "0.7.2",
-    "@dxos/plugin-stack": "0.7.2",
-    "@dxos/react-client": "0.7.2",
-    "@dxos/react-ui-form": "0.7.2",
-    "@dxos/react-ui-editor": "0.7.2",
-    "@dxos/schema": "0.7.2",
-    "@dxos/util": "0.7.2"
+    "@dxos/app-framework": "0.7.3-main.2dd075e",
+    "@dxos/assistant": "0.7.3-main.2dd075e",
+    "@dxos/context": "0.7.3-main.2dd075e",
+    "@dxos/chain": "0.7.3-main.2dd075e",
+    "@dxos/echo-db": "0.7.3-main.2dd075e",
+    "@dxos/async": "0.7.3-main.2dd075e",
+    "@dxos/echo-schema": "0.7.3-main.2dd075e",
+    "@dxos/invariant": "0.7.3-main.2dd075e",
+    "@dxos/live-object": "0.7.3-main.2dd075e",
+    "@dxos/functions": "0.7.3-main.2dd075e",
+    "@dxos/log": "0.7.3-main.2dd075e",
+    "@dxos/plugin-chess": "0.7.3-main.2dd075e",
+    "@dxos/keys": "0.7.3-main.2dd075e",
+    "@dxos/plugin-client": "0.7.3-main.2dd075e",
+    "@dxos/plugin-deck": "0.7.3-main.2dd075e",
+    "@dxos/plugin-inbox": "0.7.3-main.2dd075e",
+    "@dxos/plugin-ipfs": "0.7.3-main.2dd075e",
+    "@dxos/plugin-graph": "0.7.3-main.2dd075e",
+    "@dxos/plugin-markdown": "0.7.3-main.2dd075e",
+    "@dxos/plugin-space": "0.7.3-main.2dd075e",
+    "@dxos/plugin-script": "0.7.3-main.2dd075e",
+    "@dxos/plugin-sketch": "0.7.3-main.2dd075e",
+    "@dxos/plugin-stack": "0.7.3-main.2dd075e",
+    "@dxos/react-ui-form": "0.7.3-main.2dd075e",
+    "@dxos/react-client": "0.7.3-main.2dd075e",
+    "@dxos/react-ui-list": "0.7.3-main.2dd075e",
+    "@dxos/react-ui-editor": "0.7.3-main.2dd075e",
+    "@dxos/react-ui-syntax-highlighter": "0.7.3-main.2dd075e",
+    "@dxos/schema": "0.7.3-main.2dd075e",
+    "@dxos/util": "0.7.3-main.2dd075e"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -82,18 +86,18 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-db": "0.7.2",
-    "@dxos/react-ui": "0.7.2",
-    "@dxos/random": "0.7.2",
-    "@dxos/react-ui-theme": "0.7.2",
-    "@dxos/storybook-utils": "0.7.2"
+    "@dxos/react-ui": "0.7.3-main.2dd075e",
+    "@dxos/random": "0.7.3-main.2dd075e",
+    "@dxos/storybook-utils": "0.7.3-main.2dd075e",
+    "@dxos/react-ui-theme": "0.7.3-main.2dd075e",
+    "@dxos/echo-db": "0.7.3-main.2dd075e"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.2",
-    "@dxos/react-ui-theme": "0.7.2"
+    "@dxos/react-ui": "0.7.3-main.2dd075e",
+    "@dxos/react-ui-theme": "0.7.3-main.2dd075e"
   },
   "publishConfig": {
     "access": "public"

package/src/AutomationPlugin.tsx

@@ -4,17 +4,26 @@
 
 import React from 'react';
 
-import { type PluginDefinition, parseMetadataResolverPlugin, resolvePlugin } from '@dxos/app-framework';
+import { parseMetadataResolverPlugin, type PluginDefinition, resolvePlugin } from '@dxos/app-framework';
 import { FunctionTrigger } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
 import { parseClientPlugin } from '@dxos/plugin-client';
 import { createExtension, toSignal } from '@dxos/plugin-graph';
-import { getTypename, loadObjectReferences, parseId } from '@dxos/react-client/echo';
+import { memoizeQuery } from '@dxos/plugin-space';
+import {
+  getSpace,
+  getTypename,
+  isEchoObject,
+  loadObjectReferences,
+  parseId,
+  SpaceState,
+} from '@dxos/react-client/echo';
+import { translations as formTranslations } from '@dxos/react-ui-form';
 
-import { AutomationPanel } from './components';
+import { AssistantPanel, AutomationPanel } from './components';
 import meta, { AUTOMATION_PLUGIN } from './meta';
 import translations from './translations';
-import { AutomationAction, type AutomationPluginProvides, ChainPromptType, ChainType } from './types';
+import { type AutomationPluginProvides, ChainPromptType, ChainType } from './types';
 
 export const AutomationPlugin = (): PluginDefinition<AutomationPluginProvides> => {
   return {
@@ -30,16 +39,21 @@ export const AutomationPlugin = (): PluginDefinition<AutomationPluginProvides> =
           },
         },
       },
-      translations,
+      translations: [...translations, ...formTranslations],
       echo: {
-        schema: [ChainType, ChainPromptType, FunctionTrigger],
+        system: [ChainType, ChainPromptType, FunctionTrigger],
       },
       complementary: {
         panels: [
           {
             id: 'automation',
             label: ['open automation panel label', { ns: AUTOMATION_PLUGIN }],
-            icon: 'ph--flow-arrow--regular',
+            icon: 'ph--magic-wand--regular',
+          },
+          {
+            id: 'assistant',
+            label: ['open assistant panel label', { ns: AUTOMATION_PLUGIN }],
+            icon: 'ph--atom--regular',
           },
         ],
       },
@@ -62,11 +76,17 @@ export const AutomationPlugin = (): PluginDefinition<AutomationPluginProvides> =
                 }
 
                 const type = 'orphan-settings-for-subject';
-                const icon = 'ph--flow-arrow--regular';
+                const icon = 'ph--magic-wand--regular';
 
                 const [subjectId] = id.split('~');
                 const { spaceId, objectId } = parseId(subjectId);
-                const space = client.spaces.get().find((space) => space.id === spaceId);
+                const spaces = toSignal(
+                  (onChange) => client.spaces.subscribe(() => onChange()).unsubscribe,
+                  () => client.spaces.get(),
+                );
+                const space = spaces?.find(
+                  (space) => space.id === spaceId && space.state.get() === SpaceState.SPACE_READY,
+                );
                 if (!objectId) {
                   // TODO(burdon): Ref SPACE_PLUGIN ns.
                   const label = space
@@ -89,18 +109,7 @@ export const AutomationPlugin = (): PluginDefinition<AutomationPluginProvides> =
                   };
                 }
 
-                const object = toSignal(
-                  (onChange) => {
-                    const timeout = setTimeout(async () => {
-                      await space?.db.query({ id: objectId }).first();
-                      onChange();
-                    });
-
-                    return () => clearTimeout(timeout);
-                  },
-                  () => space?.db.getObjectById(objectId),
-                  subjectId,
-                );
+                const [object] = memoizeQuery(space, { id: objectId });
                 if (!object || !subjectId) {
                   return;
                 }
@@ -122,33 +131,77 @@ export const AutomationPlugin = (): PluginDefinition<AutomationPluginProvides> =
                 };
               },
             }),
+            createExtension({
+              id: `${AUTOMATION_PLUGIN}/assistant-for-subject`,
+              resolver: ({ id }) => {
+                // TODO(Zan): Find util (or make one). Effect schema!!
+                if (!id.endsWith('~assistant')) {
+                  return;
+                }
+
+                const [subjectId] = id.split('~');
+                const { spaceId, objectId } = parseId(subjectId);
+                const spaces = toSignal(
+                  (onChange) => client.spaces.subscribe(() => onChange()).unsubscribe,
+                  () => client.spaces.get(),
+                );
+                const space = spaces?.find(
+                  (space) => space.id === spaceId && space.state.get() === SpaceState.SPACE_READY,
+                );
+                if (!objectId) {
+                  // TODO(wittjosiah): Support assistant for arbitrary subjects.
+                  //   This is to ensure that the assistant panel is not stuck on an old object.
+                  return {
+                    id,
+                    type: 'orphan-automation-for-subject',
+                    data: null,
+                    properties: {
+                      icon: 'ph--atom--regular',
+                      label: ['assistant panel label', { ns: AUTOMATION_PLUGIN }],
+                      object: null,
+                      space,
+                    },
+                  };
+                }
+
+                const [object] = memoizeQuery(space, { id: objectId });
+
+                return {
+                  id,
+                  type: 'orphan-automation-for-subject',
+                  data: null,
+                  properties: {
+                    icon: 'ph--atom--regular',
+                    label: ['assistant panel label', { ns: AUTOMATION_PLUGIN }],
+                    object,
+                  },
+                };
+              },
+            }),
           ];
         },
       },
       surface: {
         component: ({ data, role }) => {
           switch (role) {
-            // case 'article':
-            // return data.object instanceof ChainType ? <ChainArticle chain={data.object} /> : null;
-
-            case 'complementary--automation':
-              return <AutomationPanel />;
+            case 'complementary--assistant':
+              return <AssistantPanel subject={data.subject as any} />;
+            case 'complementary--automation': {
+              const object = data.subject;
+              const space = isEchoObject(object) ? getSpace(object) : undefined;
+              if (space) {
+                invariant(isEchoObject(object));
+                return <AutomationPanel space={space} object={object} />;
+              }
+              break;
+            }
           }
 
           return null;
         },
       },
       intent: {
-        resolver: (intent) => {
-          switch (intent.action) {
-            case AutomationAction.CREATE: {
-              return {
-                // data: create(ChainType, { prompts: [] }),
-                // data: create(FunctionTrigger, { function: '', spec: { type: 'timer', cron: '' } }),
-              };
-            }
-          }
-        },
+        resolver: (intent) => {},
       },
     },
   };

package/src/components/AssistantPanel/AssistantPanel.tsx

@@ -0,0 +1,230 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+/* eslint-disable no-console */
+
+import React, { useEffect, useRef, useState } from 'react';
+
+import { type AIServiceClient, AIServiceClientImpl, ObjectId, type Message } from '@dxos/assistant';
+import type { ReactiveEchoObject } from '@dxos/echo-db';
+import { SpaceId } from '@dxos/keys';
+import { useClient, useConfig } from '@dxos/react-client';
+import { ContextMenu, type ThemedClassName } from '@dxos/react-ui';
+import { Icon, Input, Toolbar, useTranslation } from '@dxos/react-ui';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/react-ui-theme';
+
+import { createSystemInstructions } from './system-instructions';
+import { AUTOMATION_PLUGIN } from '../../meta';
+
+const PROPERTIES_ASSISTANT_KEY = 'dxos.assistant.beta.properties';
+
+export type AssistantPanelProps = ThemedClassName<{
+  subject?: ReactiveEchoObject<any>;
+}>;
+
+export const AssistantPanel = ({ subject, classNames }: AssistantPanelProps) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const config = useConfig();
+  const client = useClient();
+  const aiClient = useRef<AIServiceClient>();
+  const [contextSpaceId, setContextSpaceId] = useState<SpaceId | undefined>();
+  const [threadId, setThreadId] = useState<ObjectId | undefined>();
+  const [history, setHistory] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+
+  useEffect(() => {
+    if (!aiClient.current) {
+      const endpoint = config.values.runtime?.services?.ai?.server;
+      if (!endpoint) {
+        throw new Error('AI service endpoint is not configured');
+      }
+      aiClient.current = new AIServiceClientImpl({
+        endpoint,
+      });
+    }
+
+    queueMicrotask(async () => {
+      const properties = client.spaces.default.properties;
+
+      properties[PROPERTIES_ASSISTANT_KEY] ??= {};
+      properties[PROPERTIES_ASSISTANT_KEY].contextSpaceId ??= SpaceId.random();
+      properties[PROPERTIES_ASSISTANT_KEY].threadId ??= ObjectId.random();
+
+      const contextSpaceId = properties[PROPERTIES_ASSISTANT_KEY].contextSpaceId;
+      const threadId = properties[PROPERTIES_ASSISTANT_KEY].threadId;
+
+      setContextSpaceId(contextSpaceId);
+      setThreadId(threadId);
+
+      const messages = await aiClient.current!.getMessagesInThread(contextSpaceId, threadId);
+      setHistory(messages);
+    });
+  }, []);
+
+  const handleRequest = async (input: string) => {
+    if (input === '') {
+      return;
+    }
+
+    setInput('');
+
+    // TODO(dmaretskyi): Can we call `create(Message, { ... })` here?
+    const userMessage: Message = {
+      id: ObjectId.random(),
+      spaceId: contextSpaceId!,
+      threadId: threadId!,
+      role: 'user',
+      content: [{ type: 'text', text: input }],
+    };
+    await aiClient.current!.insertMessages([userMessage]);
+    setHistory([...history, userMessage]);
+
+    const generationStream = await aiClient.current!.generate({
+      model: '@anthropic/claude-3-5-sonnet-20241022',
+      spaceId: contextSpaceId!,
+      threadId: threadId!,
+      tools: [],
+      systemPrompt: await getSystemPrompt(),
+    });
+
+    const historyBefore = [...history, userMessage];
+    for await (const _event of generationStream) {
+      setHistory([...historyBefore, ...generationStream.accumulatedMessages]);
+    }
+
+    await aiClient.current!.insertMessages(await generationStream.complete());
+  };
+
+  const getSystemPrompt = async () => {
+    return createSystemInstructions({ subject });
+  };
+
+  const clearThread = async () => {
+    const properties = client.spaces.default.properties;
+
+    properties[PROPERTIES_ASSISTANT_KEY] ??= {};
+    // properties[PROPERTIES_ASSISTANT_KEY].contextSpaceId ??= SpaceId.random();
+    properties[PROPERTIES_ASSISTANT_KEY].threadId = ObjectId.random();
+
+    // const contextSpaceId = properties[PROPERTIES_ASSISTANT_KEY].contextSpaceId;
+    const threadId = properties[PROPERTIES_ASSISTANT_KEY].threadId;
+
+    // setContextSpaceId(contextSpaceId);
+    setThreadId(threadId);
+
+    const messages = await aiClient.current!.getMessagesInThread(contextSpaceId!, threadId);
+    setHistory(messages);
+  };
+
+  // TODO(burdon): Factor out with script plugin.
+  return (
+    <div className={mx('flex flex-col h-full overflow-hidden', classNames)}>
+      {history.length > 0 && (
+        <div className='flex flex-col gap-6 h-full p-2 overflow-x-hidden overflow-y-auto'>
+          {history.map((message) => (
+            <MessageItem key={message.id} message={message} />
+          ))}
+        </div>
+      )}
+
+      <Toolbar.Root classNames='p-1'>
+        <Input.Root>
+          <Input.TextInput
+            autoFocus
+            placeholder={t('ask me anything')}
+            value={input}
+            onChange={(ev) => setInput(ev.target.value)}
+            onKeyDown={(ev) => ev.key === 'Enter' && handleRequest(input)}
+          />
+        </Input.Root>
+        <ContextMenu.Root>
+          <ContextMenu.Trigger asChild>
+            <Toolbar.Button onClick={() => handleRequest(input)}>
+              <Icon icon='ph--play--regular' size={4} />
+            </Toolbar.Button>
+          </ContextMenu.Trigger>
+          <ContextMenu.Portal>
+            <ContextMenu.Content classNames='z-[31]'>
+              <ContextMenu.Viewport>
+                <ContextMenu.Item onClick={clearThread}>Clear thread</ContextMenu.Item>
+                <ContextMenu.Item onClick={async () => console.log(await getSystemPrompt())}>
+                  Print instructions to console
+                </ContextMenu.Item>
+              </ContextMenu.Viewport>
+            </ContextMenu.Content>
+          </ContextMenu.Portal>
+        </ContextMenu.Root>
+
+        {/* <Toolbar.Button onClick={() => (state ? handleStop() : handleClear())}>
+          <Icon icon={state ? 'ph--stop--regular' : 'ph--trash--regular'} size={4} />
+        </Toolbar.Button> */}
+      </Toolbar.Root>
+    </div>
+  );
+};
+
+const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message }>) => {
+  const { id: _, role, content } = message;
+  const styleContainer = 'flex flex-col overflow-x-hidden overflow-y-auto rounded-md gap-2 divide-y divide-separator';
+
+  return (
+    <div className={mx('flex', role === 'user' ? 'ml-[1rem] justify-end' : 'mr-[1rem]', classNames)}>
+      {content.map((content, i) => {
+        switch (content.type) {
+          case 'text': {
+            const { cot, message } = parseMessage(content.text);
+            return (
+              <div
+                key={i}
+                role='none'
+                className={mx(
+                  styleContainer,
+                  role === 'user' ? 'bg-primary-400 dark:bg-primary-600' : 'bg-hoverSurface',
+                )}
+              >
+                {cot && <div className='p-2 whitespace-pre-wrap text-xs text-subdued'>{cot}</div>}
+                <div className='p-2 whitespace-pre-wrap'>{message}</div>
+              </div>
+            );
+          }
+
+          case 'tool_use': {
+            return (
+              <div key={i} className={mx(styleContainer, 'text-xs')}>
+                <div>
+                  <span className='p-2 text-primary'>Tool use</span>: {content.name} {content.id}
+                </div>
+                <SyntaxHighlighter language='json'>{content.inputJson}</SyntaxHighlighter>
+              </div>
+            );
+          }
+
+          case 'tool_result': {
+            return (
+              <div key={i} className={mx(styleContainer, 'text-xs', content.isError && 'text-error')}>
+                <div>
+                  <span className='p-2 text-primary'>Tool result</span>: {content.toolUseId}
+                </div>
+                <SyntaxHighlighter language='json'>{content.content}</SyntaxHighlighter>
+              </div>
+            );
+          }
+        }
+
+        return null;
+      })}
+    </div>
+  );
+};
+
+// TODO(burdon): Move to server-side parsing.
+const parseMessage = (text: string): { cot?: string; message: string } => {
+  const regex = /<cot>([\s\S]*?)<\/cot>\s*([\s\S]*)/;
+  const match = text.match(regex);
+  return {
+    cot: match?.[1].trim(),
+    message: match?.[2] ?? text ?? '\u00D8',
+  };
+};

package/src/components/AssistantPanel/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { AssistantPanel } from './AssistantPanel';
+
+export default AssistantPanel;