@dxos/plugin-assistant 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/src/components/TemplateContainer.tsx

@@ -2,17 +2,92 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import { Match, type Schema as S } from 'effect';
+import React, { type ChangeEvent, useCallback } from 'react';
 
+import { debounce } from '@dxos/async';
+import { Input, Select, Toolbar, useTranslation } from '@dxos/react-ui';
 import { StackItem } from '@dxos/react-ui-stack';
 
 import { TemplateEditor } from './TemplateEditor';
-import { type TemplateType } from '../types';
+import { ASSISTANT_PLUGIN } from '../meta';
+import { TemplateKinds, type TemplateKindSchema, type TemplateType } from '../types';
 
-// TODO(burdon): Attention.
 export const TemplateContainer = ({ template, role }: { template: TemplateType; role: string }) => {
+  const { t } = useTranslation(ASSISTANT_PLUGIN);
+
+  const handleKindChange = useCallback(
+    (value: string) => {
+      const kind = Match.type<string>().pipe(
+        Match.withReturnType<S.Schema.Type<typeof TemplateKindSchema>>(),
+        Match.when('always', () => ({ include: 'always' })),
+        Match.when('schema-matching', () => ({ include: 'schema-matching', typename: '' })),
+        Match.when('automatically', () => ({ include: 'automatically', description: '' })),
+        Match.orElse(() => ({ include: 'manual' })),
+      )(value);
+
+      template.kind = kind;
+    },
+    [template],
+  );
+
+  const handleTypenameChange = useCallback(
+    debounce((event: ChangeEvent<HTMLInputElement>) => {
+      if (template.kind.include === 'schema-matching') {
+        template.kind.typename = event.target.value;
+      }
+    }, 300),
+    [template.kind.include],
+  );
+
+  const handleDescriptionChange = useCallback(
+    debounce((event: ChangeEvent<HTMLInputElement>) => {
+      if (template.kind.include === 'automatically') {
+        template.kind.description = event.target.value;
+      }
+    }, 300),
+    [template.kind.include],
+  );
+
   return (
-    <StackItem.Content toolbar={false} role={role} classNames='mli-auto w-full max-w-[50rem]'>
+    <StackItem.Content role={role} toolbar classNames='container-max-width'>
+      {/* TODO(wittjosiah): Move this toolbar into c11y sidebar. */}
+      <Toolbar.Root>
+        <Select.Root value={template.kind.include} onValueChange={handleKindChange}>
+          <Toolbar.Button asChild>
+            <Select.TriggerButton />
+          </Toolbar.Button>
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {TemplateKinds.map((kind) => (
+                  <Select.Option key={kind} value={kind}>
+                    {kind}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+        {template.kind.include === 'schema-matching' && (
+          <Input.Root>
+            <Input.TextInput
+              placeholder={t('typename placeholder')}
+              defaultValue={template.kind.typename}
+              onChange={handleTypenameChange}
+            />
+          </Input.Root>
+        )}
+        {template.kind.include === 'automatically' && (
+          <Input.Root>
+            <Input.TextInput
+              placeholder={t('description placeholder')}
+              defaultValue={template.kind.description}
+              onChange={handleDescriptionChange}
+            />
+          </Input.Root>
+        )}
+      </Toolbar.Root>
       <TemplateEditor template={template} />
     </StackItem.Content>
   );

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

@@ -34,11 +34,11 @@ const TEMPLATE = [
   '',
 ].join('\n');
 
-const Render = ({ text }: TemplateEditorProps & { text: string }) => {
+const DefaultStory = ({ text }: TemplateEditorProps & { text: string }) => {
   const client = useClient();
   const [template] = useState(() => {
     const space = client.spaces.default;
-    return space.db.add(create(TemplateType, { source: text }));
+    return space.db.add(create(TemplateType, { source: text, kind: { include: 'manual' } }));
   });
 
   return (
@@ -48,10 +48,10 @@ const Render = ({ text }: TemplateEditorProps & { text: string }) => {
   );
 };
 
-const meta: Meta<typeof Render> = {
+const meta: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-automation/TemplateEditor',
   component: TemplateEditor,
-  render: Render,
+  render: DefaultStory,
   decorators: [
     withClientProvider({
       createIdentity: true,
@@ -68,7 +68,7 @@ const meta: Meta<typeof Render> = {
 
 export default meta;
 
-type Story = Meta<typeof Render>;
+type Story = Meta<typeof DefaultStory>;
 
 export const Default: Story = {
   args: {

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

@@ -26,11 +26,11 @@ const TEMPLATE = [
   '{{input}}',
 ].join('\n');
 
-const Render = () => {
+const DefaultStory = () => {
   const client = useClient();
   const [template] = useState(() => {
     const space = client.spaces.default;
-    return space.db.add(create(TemplateType, { source: TEMPLATE }));
+    return space.db.add(create(TemplateType, { source: TEMPLATE, kind: { include: 'manual' } }));
   });
 
   return (
@@ -43,7 +43,7 @@ const Render = () => {
 const meta: Meta<typeof TemplateForm> = {
   title: 'plugins/plugin-automation/TemplateForm',
   component: TemplateForm,
-  render: Render,
+  render: DefaultStory,
   decorators: [
     withClientProvider({
       createIdentity: true,

package/src/components/Thread/Thread.stories.tsx

@@ -20,7 +20,7 @@ import translations from '../../translations';
 
 faker.seed(1);
 
-const Render = ({ messages: _messages, ...props }: ThreadProps) => {
+const DefaultStory = ({ messages: _messages, ...props }: ThreadProps) => {
   const [processing, setProcessing] = useState(false);
   const [messages, setMessages] = useState<Message[]>(_messages ?? []);
   useEffect(() => {
@@ -70,7 +70,7 @@ const Render = ({ messages: _messages, ...props }: ThreadProps) => {
 
 const meta: Meta<ThreadProps> = {
   title: 'plugins/plugin-automation/Thread',
-  render: Render,
+  render: DefaultStory,
   component: Thread,
   decorators: [
     withSignals,
@@ -207,6 +207,6 @@ export const Incremental: Story = {
       return () => clearInterval(interval);
     }, []);
 
-    return <Render messages={messages} collapse />;
+    return <DefaultStory messages={messages} collapse />;
   },
 };

package/src/components/Thread/Thread.tsx

@@ -15,6 +15,13 @@ import { keyToFallback } from '@dxos/util';
 import { ThreadMessage, type ThreadMessageProps } from './ThreadMessage';
 import { messageReducer } from './reducer';
 import { PromptBar, type PromptBarProps } from '../Prompt';
+import type { ReferenceData, ReferencesProvider } from '../Prompt/references';
+
+export interface ContextProvider {
+  query({ query }: { query: string }): Promise<ReferenceData[]>;
+
+  resolveMetadata({ uri }: { uri: string }): Promise<ReferenceData | null>;
+}
 
 export type ThreadProps = ThemedClassName<{
   space?: Space;
@@ -22,6 +29,7 @@ export type ThreadProps = ThemedClassName<{
   collapse?: boolean;
   transcription?: boolean;
   onOpenChange?: (open: boolean) => void;
+  contextProvider?: ContextProvider;
 }> &
   Pick<PromptBarProps, 'processing' | 'error' | 'onSubmit' | 'onSuggest' | 'onCancel'> &
   Pick<ThreadMessageProps, 'debug' | 'tools' | 'onPrompt' | 'onDelete'>;
@@ -40,6 +48,7 @@ export const Thread = ({
   onSubmit,
   onCancel,
   onOpenChange,
+  contextProvider,
   ...props
 }: ThreadProps) => {
   const scroller = useRef<ScrollController>(null);
@@ -68,6 +77,17 @@ export const Thread = ({
     }
   }, [messages, collapse]);
 
+  const references = useMemo<ReferencesProvider | undefined>(() => {
+    if (!contextProvider) {
+      return undefined;
+    }
+
+    return {
+      getReferences: async ({ query }: { query: string }) => contextProvider.query({ query }),
+      resolveReference: async ({ uri }: { uri: string }) => contextProvider.resolveMetadata({ uri }),
+    };
+  }, [contextProvider]);
+
   return (
     <div role='none' className={mx('flex flex-col grow overflow-hidden', classNames)}>
       <ScrollContainer ref={scroller} fade>
@@ -90,6 +110,7 @@ export const Thread = ({
           onSubmit={handleSubmit}
           onCancel={onCancel}
           onOpenChange={onOpenChange}
+          references={references}
         />
       )}
     </div>

package/src/components/Thread/ThreadContainer.stories.tsx

@@ -21,7 +21,6 @@ import { Message, type Tool } from '@dxos/artifact';
 import { genericTools, localServiceEndpoints, type IsObject } from '@dxos/artifact-testing';
 import { AIServiceEdgeClient } from '@dxos/assistant';
 import { createStatic, ObjectId } from '@dxos/echo-schema';
-import { EdgeHttpClient } from '@dxos/edge-client';
 import { invariant } from '@dxos/invariant';
 import { DXN, QueueSubspaceTags, SpaceId } from '@dxos/keys';
 import { ChessPlugin } from '@dxos/plugin-chess';
@@ -31,9 +30,8 @@ import { InboxPlugin } from '@dxos/plugin-inbox';
 import { MapPlugin } from '@dxos/plugin-map';
 import { SpacePlugin } from '@dxos/plugin-space';
 import { TablePlugin } from '@dxos/plugin-table';
-import { useSpace } from '@dxos/react-client/echo';
+import { useQueue, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { useQueue } from '@dxos/react-edge-client';
 import { IconButton, Input, Toolbar } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
@@ -51,16 +49,12 @@ type RenderProps = {
 } & Pick<ThreadProps, 'debug'>;
 
 // TODO(burdon): Use ChatContainer.
-const Render = ({ items: _items, prompts = [], ...props }: RenderProps) => {
+const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) => {
   const space = useSpace();
   const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
-  const tools = useMemo<Tool[]>(
-    () => [...genericTools, ...artifactDefinitions.flatMap((definition) => definition.tools)],
-    [genericTools, artifactDefinitions],
-  );
+  const tools = useMemo<Tool[]>(() => [...genericTools], []);
 
   const [aiClient] = useState(() => new AIServiceEdgeClient({ endpoint: endpoints.ai }));
-  const [edgeClient] = useState(() => new EdgeHttpClient(endpoints.edge));
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   // TODO(burdon): Replace with useChatProcessor.
@@ -73,6 +67,7 @@ const Render = ({ items: _items, prompts = [], ...props }: RenderProps) => {
     return new ChatProcessor(
       aiClient,
       tools,
+      artifactDefinitions,
       {
         space,
         dispatch,
@@ -82,8 +77,8 @@ const Render = ({ items: _items, prompts = [], ...props }: RenderProps) => {
   }, [aiClient, tools, space, dispatch, artifactDefinitions]);
 
   // Queue.
-  const [queueDxn, setQueueDxn] = useState(() => randomQueueDxn());
-  const queue = useQueue<Message>(edgeClient, DXN.tryParse(queueDxn));
+  const [queueDxn, setQueueDxn] = useState<string>(() => randomQueueDxn());
+  const queue = useQueue<Message>(DXN.tryParse(queueDxn));
 
   useEffect(() => {
     if (queue?.items.length === 0 && !queue.isLoading && prompts.length > 0) {
@@ -209,9 +204,9 @@ const Render = ({ items: _items, prompts = [], ...props }: RenderProps) => {
 const randomQueueDxn = () =>
   new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, SpaceId.random(), ObjectId.random()]).toString();
 
-const meta: Meta<typeof Render> = {
+const meta: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-automation/ThreadContainer',
-  render: Render,
+  render: DefaultStory,
   decorators: [
     withSignals,
     withClientProvider({
@@ -247,7 +242,7 @@ const meta: Meta<typeof Render> = {
 
 export default meta;
 
-type Story = StoryObj<typeof Render>;
+type Story = StoryObj<typeof DefaultStory>;
 
 export const Default: Story = {
   args: {

package/src/components/Thread/ThreadContainer.tsx

@@ -2,20 +2,23 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type FC, useCallback } from 'react';
+import React, { useCallback, type FC } from 'react';
 
+import { type AssociatedArtifact } from '@dxos/artifact';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { getSpace } from '@dxos/react-client/echo';
 import { type ThemedClassName } from '@dxos/react-ui';
 
 import { Thread, type ThreadProps } from './Thread';
-import { useChatProcessor, useMessageQueue } from '../../hooks';
+import { useChatProcessor, useContextProvider, useMessageQueue } from '../../hooks';
 import { type AIChatType, type AssistantSettingsProps } from '../../types';
 
 export type ThreadContainerProps = {
   chat?: AIChatType;
   settings?: AssistantSettingsProps;
+  part?: 'deck' | 'dialog';
+  associatedArtifact?: AssociatedArtifact;
 } & Pick<ThreadProps, 'debug' | 'transcription' | 'onOpenChange'>;
 
 // TODO(burdon): Since this only wraps Thread, just separate out hook?
@@ -23,12 +26,14 @@ export const ThreadContainer: FC<ThemedClassName<ThreadContainerProps>> = ({
   classNames,
   chat,
   settings,
+  part,
+  associatedArtifact,
   onOpenChange,
   ...props
 }) => {
-  // Push up capabilities hooks out of components.
   const space = getSpace(chat);
-  const processor = useChatProcessor(space, settings);
+  const contextProvider = useContextProvider(space);
+  const processor = useChatProcessor({ chat, space, settings, part, associatedArtifact });
   const messageQueue = useMessageQueue(chat);
   const messages = [...(messageQueue?.items ?? []), ...processor.messages.value];
 
@@ -73,6 +78,7 @@ export const ThreadContainer: FC<ThemedClassName<ThreadContainerProps>> = ({
       onCancel={handleCancel}
       onPrompt={handleSubmit}
       onOpenChange={onOpenChange}
+      contextProvider={contextProvider}
       {...props}
     />
   );

package/src/components/Thread/ThreadMessage.tsx

@@ -7,7 +7,7 @@ import React, { type PropsWithChildren, type FC } from 'react';
 import { type MessageContentBlock, type Message, type ToolType } from '@dxos/artifact';
 import { invariant } from '@dxos/invariant';
 import { type Space } from '@dxos/react-client/echo';
-import { Button, ButtonGroup, Icon, IconButton, type ThemedClassName } from '@dxos/react-ui';
+import { Button, Icon, IconButton, type ThemedClassName } from '@dxos/react-ui';
 import {
   MarkdownViewer,
   ToggleContainer as NativeToggleContainer,
@@ -21,7 +21,7 @@ import { ToolBlock, isToolMessage } from './ToolInvocations';
 import { ToolboxContainer } from '../Toolbox';
 
 const panelClassNames = 'flex flex-col w-full px-2 bg-groupSurface rounded-md';
-const userClassNames = 'bg-[--user-fill]';
+const userClassNames = 'bg-[--user-fill] text-inverse';
 
 const ToggleContainer = (props: ToggleContainerProps) => {
   return <NativeToggleContainer {...props} classNames={mx(panelClassNames, props.classNames)} />;
@@ -54,7 +54,7 @@ export const ThreadMessage: FC<ThreadMessageProps> = ({ classNames, space, messa
   // TODO(burdon): Restructure types to make check unnecessary.
   if (isToolMessage(message)) {
     return (
-      <MessageContainer classNames={classNames}>
+      <MessageContainer classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}>
         <ToolBlock space={space} classNames={panelClassNames} message={message} tools={tools} />
       </MessageContainer>
     );
@@ -69,7 +69,11 @@ export const ThreadMessage: FC<ThreadMessageProps> = ({ classNames, space, messa
     const Component = components[block.type] ?? components.default;
 
     return (
-      <MessageContainer key={idx} classNames={classNames} user={block.type === 'text' && role === 'user'}>
+      <MessageContainer
+        key={idx}
+        classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}
+        user={block.type === 'text' && role === 'user'}
+      >
         <Component space={space} block={block} onPrompt={onPrompt} />
       </MessageContainer>
     );
@@ -87,7 +91,7 @@ const components: Record<string, BlockComponent> = {
     // const [open, setOpen] = useState(block.disposition === 'cot' && block.pending);
     const title = block.disposition ? titles[block.disposition] : undefined;
     if (!title) {
-      return <MarkdownViewer content={block.text} />;
+      return <MarkdownViewer classNames='[&>p]:animate-[fadeIn_0.5s]' content={block.text} />;
     }
 
     // TOOD(burdon): Store last time user opened/closed COT.
@@ -140,13 +144,17 @@ const components: Record<string, BlockComponent> = {
       case 'select': {
         const { options = [] }: { options: string[] } = safeParseJson(block.json ?? '{}') ?? ({} as any);
         return (
-          <ButtonGroup>
-            {options.map((option) => (
-              <Button key={option} onClick={() => onPrompt?.(option)}>
+          <div className='flex flex-wrap gap-1'>
+            {options.map((option, idx) => (
+              <Button
+                classNames={'animate-[fadeIn_0.5s] rounded-2xl text-sm'}
+                key={option}
+                onClick={() => onPrompt?.(option)}
+              >
                 {option}
               </Button>
             ))}
-          </ButtonGroup>
+          </div>
         );
       }
 

package/src/components/Toolbox/Toolbox.stories.tsx

@@ -20,7 +20,7 @@ import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
 import { Toolbox, type ToolboxProps } from './Toolbox';
 import translations from '../../translations';
 
-const Render = (props: ToolboxProps) => {
+const DefaultStory = (props: ToolboxProps) => {
   const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
   return (
     <Toolbox
@@ -34,7 +34,7 @@ const Render = (props: ToolboxProps) => {
 const meta: Meta<typeof Toolbox> = {
   title: 'plugins/plugin-automation/Toolbox',
   component: Toolbox,
-  render: Render,
+  render: DefaultStory,
   decorators: [
     withSignals,
     withPluginManager({

package/src/hooks/index.ts

@@ -9,3 +9,4 @@ export * from './useLocalTriggerManager';
 export * from './useMessageQueue';
 export * from './useServices';
 export * from './useTextInputEvents';
+export * from './useContextProvider';