@dxos/plugin-assistant 0.8.4-main.406dc2a → 0.8.4-main.4a85c3132b

package/src/components/Typewriter/Typewriter.stories.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import type * as LanguageModel from '@effect/ai/LanguageModel';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as Layer from 'effect/Layer';
+import * as ManagedRuntime from 'effect/ManagedRuntime';
+import type * as Runtime from 'effect/Runtime';
+import React, { useEffect, useState } from 'react';
+
+import { AiService } from '@dxos/ai';
+import { AiServiceTestingPreset } from '@dxos/ai/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { Typewriter } from './Typewriter';
+
+const meta: Meta<typeof Typewriter> = {
+  title: 'plugins/plugin-assistant/components/Typewriter',
+  component: Typewriter,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Typewriter>;
+
+const sampleText = `# The Future of Artificial Intelligence
+
+Artificial Intelligence (AI) has rapidly evolved from a theoretical concept to a transformative force reshaping industries, economies, and daily life. At its core, AI refers to the development of computer systems capable of performing tasks that typically require human intelligence, such as visual perception, speech recognition, decision-making, and language translation.
+
+## Machine Learning and Neural Networks
+
+The resurgence of AI in recent years is largely driven by advancements in machine learning (ML) and deep learning. Neural networks, inspired by the human brain's architecture, enable computers to learn from vast amounts of data. This has led to breakthroughs in areas like natural language processing (NLP), allowing models like GPT-4 to generate human-like text and code.
+
+## Ethical Considerations
+
+As AI becomes more autonomous, ethical concerns have moved to the forefront. Issues such as algorithmic bias, data privacy, and the potential displacement of jobs are critical topics of debate. Ensuring that AI systems are fair, transparent, and aligned with human values is essential for their sustainable development.
+
+## Conclusion
+
+The journey of AI is just beginning. With responsible innovation and global collaboration, AI has the potential to solve some of humanity's most pressing challenges, from climate change to personalized medicine.
+
+(try selecting some text to see the AI assistant, or wait for the proofreader to find the typo below)
+
+The quick brown fox jumps over teh lazy dog. i think this is cool.
+`;
+
+export const Default: Story = {
+  render: () => {
+    const [runtime, setRuntime] = useState<Runtime.Runtime<LanguageModel.LanguageModel>>();
+    useEffect(() => {
+      let disposed = false;
+      const rt = ManagedRuntime.make(
+        AiService.model('@anthropic/claude-haiku-4-5').pipe(
+          Layer.provide(AiServiceTestingPreset('edge-remote')),
+          Layer.orDie,
+        ),
+      );
+      queueMicrotask(async () => {
+        try {
+          if (disposed) {
+            return;
+          }
+          const runtime = await rt.runtime();
+          if (disposed) {
+            return;
+          }
+          setRuntime(runtime);
+        } catch (error) {
+          console.error('Failed to initialize runtime:', error);
+        }
+      });
+      return () => {
+        disposed = true;
+        void rt.dispose();
+      };
+    }, []);
+
+    if (!runtime) {
+      return <div>...Loading</div>;
+    }
+
+    return <Typewriter initialContent={sampleText} runtime={runtime} />;
+  },
+};

package/src/components/Typewriter/Typewriter.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import type * as LanguageModel from '@effect/ai/LanguageModel';
+import type * as Runtime from 'effect/Runtime';
+import React, { useMemo, useRef } from 'react';
+
+import { DensityProvider, ThemeProvider } from '@dxos/react-ui';
+import { Editor, type EditorController } from '@dxos/react-ui-editor';
+import {
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+} from '@dxos/ui-editor';
+
+import { assistant } from './assistant-extension';
+
+export type TypewriterProps = {
+  initialContent?: string;
+  extensions?: Extension[];
+  runtime: Runtime.Runtime<LanguageModel.LanguageModel>;
+};
+
+export const Typewriter = ({ initialContent = '', extensions = [], runtime }: TypewriterProps) => {
+  const editorRef = useRef<EditorController>(null);
+  const extension = useMemo(
+    () => [
+      createBasicExtensions({ scrollPastEnd: true, search: true }),
+      createThemeExtensions({ syntaxHighlighting: true }),
+      createMarkdownExtensions(),
+      decorateMarkdown(),
+      assistant(runtime),
+      ...extensions,
+    ],
+    [runtime, extensions],
+  );
+
+  return (
+    <ThemeProvider>
+      <DensityProvider density='fine'>
+        <div className='w-full h-full grid overflow-hidden'>
+          <Editor.Root ref={editorRef}>
+            <Editor.Viewport>
+              <Editor.Content initialValue={initialContent} extensions={extension} />
+            </Editor.Viewport>
+          </Editor.Root>
+        </div>
+      </DensityProvider>
+    </ThemeProvider>
+  );
+};

package/src/components/Typewriter/assistant-extension.tsx

@@ -0,0 +1,142 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Diagnostic, linter } from '@codemirror/lint';
+import { type Extension, StateField } from '@codemirror/state';
+import { EditorView, type Tooltip, showTooltip } from '@codemirror/view';
+import * as LanguageModel from '@effect/ai/LanguageModel';
+import * as Effect from 'effect/Effect';
+import * as Runtime from 'effect/Runtime';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { unwrapExit } from '@dxos/effect';
+import { log } from '@dxos/log';
+
+import { AssistantToolbar } from './AssistantToolbar';
+
+export const assistant = (runtime: Runtime.Runtime<LanguageModel.LanguageModel>): Extension[] => {
+  return [
+    assistantState(runtime),
+    assistantLinter(runtime),
+    EditorView.baseTheme({
+      '.cm-tooltip-assistant': {
+        backgroundColor: 'transparent !important',
+        border: 'none !important',
+        padding: '0 !important',
+      },
+    }),
+  ];
+};
+
+//
+// Toolbar State & Tooltip
+//
+
+const assistantState = (runtime: Runtime.Runtime<LanguageModel.LanguageModel>) =>
+  StateField.define<Tooltip | null>({
+    create: () => null,
+    update: (tooltip, tr): Tooltip | null => {
+      if (tr.selection || tr.docChanged) {
+        const { from, to } = tr.state.selection.main;
+        if (from === to) {
+          return null;
+        } // No selection
+
+        // Check if we should show tooltip
+        // We return a tooltip object
+        return {
+          pos: from,
+          above: false,
+          strictSide: true,
+          create: (view) => {
+            const dom = document.createElement('div');
+            dom.classList.add('cm-tooltip-assistant');
+            const root = createRoot(dom);
+
+            root.render(React.createElement(AssistantToolbar, { view, runtime, from, to }));
+
+            return {
+              dom,
+              destroy: () => {
+                // Delay unmount to allow animations if needed, but for now just cleanup
+                setTimeout(() => root.unmount(), 0);
+              },
+            };
+          },
+        };
+      }
+      return tooltip;
+    },
+    provide: (f) => showTooltip.from(f),
+  });
+
+//
+// Linter
+//
+
+const assistantLinter = (runtime: Runtime.Runtime<LanguageModel.LanguageModel>) =>
+  linter(async (view) => {
+    const text = view.state.doc.toString();
+    if (text.length < 10) {
+      return [];
+    }
+
+    // Run proofreading effect
+    const prompt = `Proofread the following text. Identify typos and simple grammar mistakes. Return ONLY a valid JSON array of objects with fields: "original" (string), "replacement" (string), "context" (string, 3-5 words around match). Text: \n\n${text}`;
+
+    // We mocked the model behavior in the story, but here we assume the model returns a string.
+    // In a real implementation we would parse the JSON.
+    // For this refactor, we just wire it up.
+
+    // NOTE: This runs on every doc view update that triggers linter. Linter is debounced by default (750ms).
+
+    try {
+      const result = unwrapExit(
+        await Effect.gen(function* () {
+          const generated = yield* LanguageModel.generateText({ prompt });
+          return generated.text;
+        }).pipe(Runtime.runPromiseExit(runtime)),
+      );
+
+      // Parse result - assuming simpler mock response format for now or we build a robust parser
+      // For the purpose of this task (UX demo), we can assume the mock returns a specific format or we parse it.
+      // Let's assume the mock returns a JSON string.
+
+      let suggestions: any[] = [];
+      try {
+        // Find JSON in response
+        const match = result.match(/\[.*\]/s);
+        if (match) {
+          suggestions = JSON.parse(match[0]);
+        }
+      } catch {}
+
+      const diagnostics: Diagnostic[] = [];
+      for (const s of suggestions) {
+        // Naive finding of position
+        const idx = text.indexOf(s.original);
+        if (idx !== -1) {
+          diagnostics.push({
+            from: idx,
+            to: idx + s.original.length,
+            severity: 'info',
+            message: `Suggestion: ${s.replacement}`,
+            actions: [
+              {
+                name: 'Apply',
+                apply: (view, from, to) => {
+                  view.dispatch({ changes: { from, to, insert: s.replacement } });
+                },
+              },
+            ],
+          });
+        }
+      }
+      return diagnostics;
+    } catch (error) {
+      log.catch(error);
+      return [];
+    }
+  });

package/src/components/Typewriter/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './Typewriter';

package/src/components/index.ts

@@ -2,18 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
-export * from './AssistantSettings';
 export * from './Chat';
-export * from './ChatProgress';
-export * from './PromptSettings';
 export * from './TemplateEditor';
-export * from './Toolbar';
 export * from './Toolbox';
-
-export const BlueprintContainer = lazy(() => import('./BlueprintContainer'));
-export const ChatCompanion = lazy(() => import('./ChatCompanion'));
-export const ChatContainer = lazy(() => import('./ChatContainer'));
-export const ChatDialog = lazy(() => import('./ChatDialog'));
-export const SequenceContainer = lazy(() => import('./SequenceContainer'));

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

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { DEFAULT_EDGE_MODELS, DEFAULT_OLLAMA_MODELS } from '@dxos/ai';
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { Settings } from '@dxos/react-ui-form';
 
 import { meta } from '../../meta';
 import { type Assistant, LLM_PROVIDERS } from '../../types';
@@ -20,25 +20,33 @@ const LLM_PROVIDER_LABELS = {
   lmstudio: 'LM Studio',
 } as const;
 
-export const AssistantSettings = ({ settings }: { settings: Assistant.Settings }) => {
+export type AssistantSettingsComponentProps = {
+  settings: Assistant.Settings;
+  onSettingsChange: (fn: (current: Assistant.Settings) => Assistant.Settings) => void;
+};
+
+export const AssistantSettings = ({ settings, onSettingsChange }: AssistantSettingsComponentProps) => {
   const { t } = useTranslation(meta.id);
 
   return (
-    <ControlPage>
-      <ControlSection title={t('settings title', { ns: meta.id })}>
-        <ControlGroup>
-          <ControlItemInput title={t('settings custom prompts label')}>
+    <Settings.Root>
+      <Settings.Section title={t('settings title', { ns: meta.id })}>
+        <Settings.Group>
+          <Settings.ItemInput title={t('settings custom prompts label')}>
             <Input.Switch
               checked={!!settings.customPrompts}
-              onCheckedChange={(checked) => (settings.customPrompts = checked)}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, customPrompts: checked }))}
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('settings llm provider label')}>
+          <Settings.ItemInput title={t('settings llm provider label')}>
             <Select.Root
               value={settings.llmProvider ?? 'edge'}
               onValueChange={(value) => {
-                settings.llmProvider = value === DEFAULT_VALUE ? undefined : (value as any);
+                onSettingsChange((s) => ({
+                  ...s,
+                  llmProvider: value === DEFAULT_VALUE ? undefined : (value as any),
+                }));
               }}
             >
               <Select.TriggerButton placeholder={t('settings llm provider label')} />
@@ -56,13 +64,13 @@ export const AssistantSettings = ({ settings }: { settings: Assistant.Settings }
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('settings edge llm model label')}>
+          <Settings.ItemInput title={t('settings edge llm model label')}>
             <Select.Root
               value={settings.edgeModel ?? DEFAULT_VALUE}
               onValueChange={(value) => {
-                settings.edgeModel = value === DEFAULT_VALUE ? undefined : value;
+                onSettingsChange((s) => ({ ...s, edgeModel: value === DEFAULT_VALUE ? undefined : value }));
               }}
             >
               <Select.TriggerButton placeholder={t('settings default llm model label')} />
@@ -80,13 +88,13 @@ export const AssistantSettings = ({ settings }: { settings: Assistant.Settings }
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
+          </Settings.ItemInput>
 
-          <ControlItemInput title={t('settings ollama llm model label')}>
+          <Settings.ItemInput title={t('settings ollama llm model label')}>
             <Select.Root
               value={settings.ollamaModel ?? DEFAULT_VALUE}
               onValueChange={(value) => {
-                settings.ollamaModel = value === DEFAULT_VALUE ? undefined : value;
+                onSettingsChange((s) => ({ ...s, ollamaModel: value === DEFAULT_VALUE ? undefined : value }));
               }}
             >
               <Select.TriggerButton placeholder={t('settings default llm model label')} />
@@ -104,9 +112,9 @@ export const AssistantSettings = ({ settings }: { settings: Assistant.Settings }
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
-        </ControlGroup>
-      </ControlSection>
-    </ControlPage>
+          </Settings.ItemInput>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
   );
 };

package/src/containers/AssistantSettings/index.ts

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

package/src/containers/BlueprintArticle/BlueprintArticle.tsx

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { type Blueprint } from '@dxos/blueprints';
+import { Obj } from '@dxos/echo';
+import { Panel, Toolbar } from '@dxos/react-ui';
+import { useAttention } from '@dxos/react-ui-attention';
+
+import { TemplateEditor } from '../../components';
+
+export type BlueprintArticleProps = SurfaceComponentProps<Blueprint.Blueprint>;
+
+export const BlueprintArticle = ({ role, subject }: BlueprintArticleProps) => {
+  const { hasAttention } = useAttention(Obj.getDXN(subject).toString());
+
+  return (
+    <Panel.Root role={role} classNames='dx-article'>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root disabled={!hasAttention} />
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <TemplateEditor id={subject.id} template={subject.instructions} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};

package/src/containers/BlueprintArticle/index.ts

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

package/src/containers/ChatCompanion/ChatCompanion.tsx

@@ -0,0 +1,225 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Array from 'effect/Array';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useAtomCapability, useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { Chat } from '@dxos/assistant-toolkit';
+import { Blueprint } from '@dxos/blueprints';
+import { getSpace } from '@dxos/client/echo';
+import { DXN, Filter, Obj, Query, Ref } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space/types';
+import { useQuery } from '@dxos/react-client/echo';
+import { useAsyncEffect } from '@dxos/react-ui';
+
+import { type ChatEvent } from '../../components';
+import { useBlueprintRegistry, useContextBinder } from '../../hooks';
+import { Assistant, AssistantCapabilities, AssistantOperation } from '../../types';
+import ChatContainer from '../ChatContainer';
+
+export type ChatCompanionProps = {
+  role?: string;
+  data: {
+    subject: Chat.Chat | 'assistant-chat';
+    companionTo: Obj.Unknown;
+  };
+};
+
+export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
+  ({ role, data }: ChatCompanionProps, 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);
+
+    // Watch the state atom directly to detect when plus button clears the chat selection.
+    const state = useAtomCapability(AssistantCapabilities.State);
+    const companionToId = Obj.getDXN(companionTo).toString();
+    const currentChatState = state?.currentChat[companionToId];
+
+    // Track if initial setup has been done (to distinguish initial mount from plus button click).
+    // Reset when companionTo changes.
+    const initialSetupDoneRef = useRef(false);
+    const prevCompanionToIdRef = useRef(companionToId);
+    if (prevCompanionToIdRef.current !== companionToId) {
+      initialSetupDoneRef.current = false;
+      prevCompanionToIdRef.current = companionToId;
+    }
+
+    // Sync local chat state with the state atom.
+    // When currentChatState is undefined (plus button clicked), reset local chat.
+    // When data.subject is a Chat object, use it directly.
+    // When currentChatState is a different chat, fetch and set it.
+    useEffect(() => {
+      // If state says no chat selected AND current chat is persisted, reset local state (handles plus button click).
+      // Don't reset in-memory chats - they're expected to have currentChatState === undefined.
+      if (!currentChatState && chat && getSpace(chat)) {
+        setChat(undefined);
+      } else if (data.subject !== 'assistant-chat') {
+        // If data.subject is a Chat object (resolved from graph), use it.
+        setChat(data.subject);
+      } else if (currentChatState && space) {
+        // currentChatState is set but graph couldn't resolve it - fetch manually.
+        const currentChatDxnStr = chat ? Obj.getDXN(chat).toString() : undefined;
+        if (currentChatState !== currentChatDxnStr) {
+          // Parse DXN and fetch the chat object from the database.
+          const parsedDxn = DXN.tryParse(currentChatState);
+          if (parsedDxn) {
+            const chatRef = space.db.makeRef(parsedDxn);
+            const resolvedChat = chatRef?.target;
+            if (Obj.instanceOf(Assistant.Chat, resolvedChat)) {
+              setChat(resolvedChat);
+            }
+          }
+        }
+      }
+    }, [currentChatState, data.subject, space, chat]);
+
+    const chatQueue = space && chat ? space.queues.get(chat.queue.dxn) : undefined;
+    const binder = useContextBinder(chatQueue);
+
+    // Initialize companion chat if it doesn't exist, but don't add it to the space immediately.
+    useAsyncEffect(async () => {
+      if (!space || chat) {
+        return;
+      }
+
+      // Only query for existing chats on initial mount, not when plus button is clicked.
+      if (!initialSetupDoneRef.current) {
+        // Query for existing companion chats linked to this object.
+        const existingChats = await space.db
+          .query(Query.select(Filter.id(companionTo.id)).targetOf(Chat.CompanionTo).source())
+          .run();
+
+        initialSetupDoneRef.current = true;
+
+        // Use existing chat if found on initial mount.
+        if (existingChats.length > 0) {
+          const existingChat = existingChats.at(-1) as Assistant.Chat;
+          setChat(existingChat);
+          await invokePromise(AssistantOperation.SetCurrentChat, { companionTo, chat: existingChat });
+          return;
+        }
+      }
+
+      // Create chat in-memory only - it will be added to space on first message.
+      const { data: createResult } = await invokePromise(AssistantOperation.CreateChat, {
+        db: space.db,
+        addToSpace: false,
+      });
+      setChat(createResult?.object);
+    }, [chat, space, companionTo, invokePromise]);
+
+    // Add chat to space and create relation when user submits the first message.
+    const handleEvent = useCallback(
+      async (event: ChatEvent) => {
+        if (!chat || !space) {
+          return;
+        }
+
+        // If chat is not in space yet, persist it on first submit.
+        if (event.type === 'submit' && !getSpace(chat)) {
+          await invokePromise(SpaceOperation.AddObject, {
+            object: chat,
+            target: space.db,
+            hidden: true,
+          });
+          await invokePromise(SpaceOperation.AddRelation, {
+            db: space.db,
+            schema: Chat.CompanionTo,
+            source: chat,
+            target: companionTo,
+          });
+          await invokePromise(AssistantOperation.SetCurrentChat, {
+            companionTo,
+            chat,
+          });
+        }
+      },
+      [chat, space, companionTo, invokePromise],
+    );
+
+    const metadata = useCapabilities(AppCapabilities.Metadata);
+    const blueprintKeys = useMemo(
+      () =>
+        Function.pipe(
+          metadata,
+          Array.findFirst(
+            (
+              capability,
+            ): capability is {
+              id: string;
+              metadata: { blueprints?: string[] };
+            } => capability.id === Obj.getTypename(companionTo),
+          ),
+          Option.flatMap((c) => Option.fromNullable(c.metadata.blueprints)),
+          Option.getOrElse(() => [] as string[]),
+        ),
+      [metadata, companionTo],
+    );
+    const existingBlueprints = useQuery(space?.db, Filter.type(Blueprint.Blueprint));
+    const pluginBlueprints = useMemo(
+      () => existingBlueprints.filter((blueprint) => blueprintKeys.includes(blueprint.key)),
+      [existingBlueprints, blueprintKeys],
+    );
+
+    // Initialize related blueprints that are not already in the space.
+    useAsyncEffect(async () => {
+      if (!space) {
+        return;
+      }
+
+      // NOTE: This must be run instead of using the useQuery result to avoid duplicates.
+      const existingBlueprints = await space.db.query(Filter.type(Blueprint.Blueprint)).run();
+      for (const key of blueprintKeys) {
+        const existingBlueprint = existingBlueprints.find((blueprint) => blueprint.key === key);
+        if (existingBlueprint) {
+          continue;
+        }
+
+        const blueprint = blueprintRegistry.getByKey(key);
+        if (!blueprint) {
+          continue;
+        }
+
+        space.db.add(Obj.clone(blueprint, { deep: true }));
+      }
+    }, [space, blueprintRegistry, blueprintKeys]);
+
+    useAsyncEffect(async () => {
+      if (!binder?.isOpen) {
+        return;
+      }
+
+      if (pluginBlueprints.length > 0) {
+        await binder.bind({
+          blueprints: pluginBlueprints.map((blueprint) => Ref.make(blueprint)),
+        });
+      }
+
+      if (Obj.instanceOf(Blueprint.Blueprint, companionTo)) {
+        await binder.bind({ blueprints: [Ref.make(companionTo)] });
+      } else {
+        await binder.bind({ objects: [Ref.make(companionTo)] });
+      }
+    }, [binder, companionTo, blueprintKeys]);
+
+    return (
+      <ChatContainer
+        role={role}
+        space={space}
+        subject={chat}
+        companionTo={companionTo}
+        onEvent={handleEvent}
+        ref={forwardedRef}
+      />
+    );
+  },
+);