@dxos/plugin-assistant 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/src/components/ToolBlock/ToolBlock.tsx

@@ -6,7 +6,7 @@ import type * as Tool from '@effect/ai/Tool';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useTranslation } from '@dxos/react-ui';
-import { NumericTabs, TextCrawl, ToggleContainer, type ToggleContainerRootProps } from '@dxos/react-ui-components';
+import { NumericTabs, TextCrawl, TogglePanel, type TogglePanelRootProps } from '@dxos/react-ui-components';
 import { Json } from '@dxos/react-ui-syntax-highlighter';
 import { type ContentBlock, type Message } from '@dxos/types';
 import { type XmlWidgetProps } from '@dxos/ui-editor';
@@ -25,12 +25,12 @@ export type ToolBlockProps = XmlWidgetProps<{
 export const ToolBlock = ({ view, blocks = [] }: ToolBlockProps) => {
   const { t } = useTranslation(meta.id);
 
-  const items = useMemo<ToolContainerProps['items']>(() => {
+  const items = useMemo<ToolPanelProps['items']>(() => {
     let lastToolCall: { tool: Tool.Any | undefined; block: ContentBlock.ToolCall } | undefined;
     // TODO(burdon): Get from context?
     const tools: Tool.Any[] = []; //processor.conversation.toolkit?.tools ?? [];
     return blocks
-      .filter((block) => block._tag === 'toolCall' || block._tag === 'toolResult' || block._tag === 'summary')
+      .filter((block) => block._tag === 'toolCall' || block._tag === 'toolResult' || block._tag === 'stats')
       .map((block) => {
         switch (block._tag) {
           case 'toolCall': {
@@ -70,13 +70,13 @@ export const ToolBlock = ({ view, blocks = [] }: ToolBlockProps) => {
             };
           }
 
-          case 'summary': {
+          case 'stats': {
             if (!lastToolCall) {
               return null;
             }
 
             return {
-              title: t('summary label'),
+              title: t('stats label'),
               content: block,
             };
           }
@@ -96,16 +96,16 @@ export const ToolBlock = ({ view, blocks = [] }: ToolBlockProps) => {
     return null;
   }
 
-  return <ToolContainer items={items} onChangeOpen={handleChangeOpen} />;
+  return <ToolPanel items={items} onChangeOpen={handleChangeOpen} />;
 };
 
 ToolBlock.displayName = 'ToolBlock';
 
-type ToolContainerProps = {
+type ToolPanelProps = {
   items: { title: string; content: any }[];
-} & Pick<ToggleContainerRootProps, 'onChangeOpen'>;
+} & Pick<TogglePanelRootProps, 'onChangeOpen'>;
 
-export const ToolContainer = ({ items, onChangeOpen }: ToolContainerProps) => {
+export const ToolPanel = ({ items, onChangeOpen }: ToolPanelProps) => {
   const tabsRef = useRef<HTMLDivElement>(null);
   const [selected, setSelected] = useState(0);
   const [open, setOpen] = useState(false);
@@ -122,11 +122,11 @@ export const ToolContainer = ({ items, onChangeOpen }: ToolContainerProps) => {
   }, []);
 
   return (
-    <ToggleContainer.Root classNames='mbs-2 is-full rounded-sm' open={open} onChangeOpen={setOpen}>
-      <ToggleContainer.Header classNames='text-sm text-placeholder'>
+    <TogglePanel.Root classNames='mt-2 w-full rounded-xs' open={open} onChangeOpen={setOpen}>
+      <TogglePanel.Header classNames='text-sm text-placeholder'>
         <TextCrawl key='status-roll' lines={items.map((item) => item.title)} autoAdvance greedy />
-      </ToggleContainer.Header>
-      <ToggleContainer.Content classNames='grid grid-cols-[32px_1fr]'>
+      </TogglePanel.Header>
+      <TogglePanel.Content classNames='grid grid-cols-[32px_1fr]'>
         <NumericTabs ref={tabsRef} classNames='p-1' length={items.length} selected={selected} onSelect={handleSelect} />
         <Json
           data={items[selected]?.content}
@@ -137,7 +137,7 @@ export const ToolContainer = ({ items, onChangeOpen }: ToolContainerProps) => {
             maxStringLen: 128,
           }}
         />
-      </ToggleContainer.Content>
-    </ToggleContainer.Root>
+      </TogglePanel.Content>
+    </TogglePanel.Root>
   );
 };

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

@@ -20,15 +20,15 @@ import { translations } from '../../translations';
 import { Toolbox, type ToolboxProps } from './Toolbox';
 
 const DefaultStory = (props: ToolboxProps) => {
-  return <Toolbox {...props} classNames='is-[30rem] bs-[15rem] rounded-sm border border-separator plb-1' />;
+  return <Toolbox {...props} classNames='h-[15rem] w-[30rem] py-1 rounded-xs border border-separator' />;
 };
 
 const meta = {
-  title: 'plugins/plugin-assistant/Toolbox',
+  title: 'plugins/plugin-assistant/components/Toolbox',
   component: Toolbox as any,
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withPluginManager({
       plugins: [
         ...corePlugins(),

package/src/components/Toolbox/Toolbox.tsx

@@ -9,10 +9,9 @@ import { type Database, type Ref } from '@dxos/echo';
 import { Function } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { Filter, useQuery } from '@dxos/react-client/echo';
-import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { ScrollArea, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
 import { type AiChatProcessor } from '../../processor';
 import { ServiceType } from '../../types';
 
@@ -25,62 +24,64 @@ export type ToolboxProps = ThemedClassName<{
 }>;
 
 export const Toolbox = ({ classNames, functions, services, blueprints, activeBlueprints }: ToolboxProps) => {
-  const { t } = useTranslation(meta.id);
-
   return (
-    <div className={mx('flex flex-col overflow-y-auto box-content', classNames)}>
-      {blueprints && blueprints.length > 0 && (
-        <Section
-          title='Blueprints'
-          items={blueprints.map(({ name, description, tools }) => ({
-            name,
-            description,
-            subitems: tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
-          }))}
-        />
-      )}
-
-      {activeBlueprints && activeBlueprints.length > 0 && (
-        <Section
-          title='Blueprints'
-          items={activeBlueprints.map(({ target }) => ({
-            name: target?.name ?? '',
-            description: target?.description ?? '',
-            subitems: target?.tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
-          }))}
-        />
-      )}
-
-      {services && services.length > 0 && (
-        <Section
-          title='Services'
-          items={services.map(({ service: { serviceId, name, description } }) => ({
-            name: name ?? serviceId,
-            description,
-            // subitems: tools.map(({ name, description }) => ({ name: `∙ ${name}`, description })),
-          }))}
-        />
-      )}
-
-      {functions && functions.length > 0 && (
-        <Section title='Functions' items={functions.map(({ name, description }) => ({ name, description }))} />
-      )}
-    </div>
+    <ScrollArea.Root thin orientation='vertical'>
+      <ScrollArea.Viewport classNames={classNames}>
+        {blueprints && blueprints.length > 0 && (
+          <Section
+            title='Blueprints'
+            items={blueprints.map(({ name, description, tools }) => ({
+              name,
+              description,
+              subitems: tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
+            }))}
+          />
+        )}
+
+        {activeBlueprints && activeBlueprints.length > 0 && (
+          <Section
+            title='Blueprints'
+            items={activeBlueprints.map(({ target }) => ({
+              name: target?.name ?? '',
+              description: target?.description ?? '',
+              subitems: target?.tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
+            }))}
+          />
+        )}
+
+        {services && services.length > 0 && (
+          <Section
+            title='Services'
+            items={services.map(({ service: { serviceId, name, description } }) => ({
+              name: name ?? serviceId,
+              description,
+              // subitems: tools.map(({ name, description }) => ({ name: `∙ ${name}`, description })),
+            }))}
+          />
+        )}
+
+        {functions && functions.length > 0 && (
+          <Section title='Functions' items={functions.map(({ name, description }) => ({ name, description }))} />
+        )}
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
   );
 };
 
-const Section: FC<{
+type SectionProps = {
   title: string;
   items: { name: string; description?: string; subitems?: { name: string; description?: string }[] }[];
   striped?: boolean;
-}> = ({ title, items, striped }) => {
+};
+
+const Section = ({ title, items, striped }: SectionProps) => {
   const stripeClassNames = 'odd:bg-neutral-50 dark:odd:bg-neutral-800';
   const gridClassNames = 'grid grid-cols-[8rem_1fr]';
-  const subGridClassNames = mx('col-span-full grid grid-cols-subgrid text-xs pli-2', striped && stripeClassNames);
+  const subGridClassNames = mx('col-span-full grid grid-cols-subgrid text-xs px-2', striped && stripeClassNames);
 
   return (
     <div>
-      <h1 className='pli-2 text-sm'>{title}</h1>
+      <h1 className='px-2 text-sm'>{title}</h1>
       <div className={gridClassNames}>
         {items.map(({ name, description, subitems }, i) => (
           <Fragment key={i}>
@@ -103,12 +104,12 @@ const Section: FC<{
   );
 };
 
-export type ToolboxContainerProps = ThemedClassName<{
+export type ToolboxPanelProps = ThemedClassName<{
   db?: Database.Database;
   processor?: AiChatProcessor;
 }>;
 
-export const ToolboxContainer = ({ classNames, db, processor }: ToolboxContainerProps) => {
+export const ToolboxPanel = ({ classNames, db, processor }: ToolboxPanelProps) => {
   // Registered services.
   const services = useQuery(db, Filter.type(ServiceType));
   const [serviceTools, setServiceTools] = useState<{ service: ServiceType }[]>([]);

package/src/components/Typewriter/AssistantToolbar.tsx

@@ -12,12 +12,12 @@ import { runInRuntime } from '@dxos/effect';
 import { log } from '@dxos/log';
 import { Button, Icon, Input, ThemeProvider } from '@dxos/react-ui';
 
-export interface AssistantToolbarProps {
+export type AssistantToolbarProps = {
   view: EditorView;
   from: number;
   to: number;
   runtime: Runtime.Runtime<LanguageModel.LanguageModel>;
-}
+};
 
 export const AssistantToolbar = ({ view, from, to, runtime }: AssistantToolbarProps) => {
   const [isProcessing, setIsProcessing] = useState(false);
@@ -99,7 +99,7 @@ export const AssistantToolbar = ({ view, from, to, runtime }: AssistantToolbarPr
           </Input.Root>
           <Button
             variant='ghost'
-            classNames='p-1 min-bs-0 bs-6 is-6 rounded-full'
+            classNames='p-1 min-h-0 h-6 w-6 rounded-full'
             onClick={handleEditWithPrompt}
             disabled={!customPrompt || isProcessing}
           >

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

@@ -11,15 +11,14 @@ 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/Typewriter',
+  title: 'plugins/plugin-assistant/components/Typewriter',
   component: Typewriter,
-  parameters: {
-    layout: 'centered',
-  },
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 };
 
 export default meta;
@@ -49,7 +48,7 @@ The quick brown fox jumps over teh lazy dog. i think this is cool.
 
 export const Default: Story = {
   render: () => {
-    const [rtEffect, setRtEffect] = useState<Runtime.Runtime<LanguageModel.LanguageModel>>();
+    const [runtime, setRuntime] = useState<Runtime.Runtime<LanguageModel.LanguageModel>>();
     useEffect(() => {
       let disposed = false;
       const rt = ManagedRuntime.make(
@@ -59,10 +58,18 @@ export const Default: Story = {
         ),
       );
       queueMicrotask(async () => {
-        if (disposed) return;
-        const x = await rt.runtime();
-        if (disposed) return;
-        setRtEffect(x);
+        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;
@@ -70,14 +77,10 @@ export const Default: Story = {
       };
     }, []);
 
-    if (!rtEffect) {
+    if (!runtime) {
       return <div>...Loading</div>;
     }
 
-    return (
-      <div className='w-[800px] p-4'>
-        <Typewriter initialContent={sampleText} runtime={rtEffect} />
-      </div>
-    );
+    return <Typewriter initialContent={sampleText} runtime={runtime} />;
   },
 };

package/src/components/Typewriter/Typewriter.tsx

@@ -41,7 +41,7 @@ export const Typewriter = ({ initialContent = '', extensions = [], runtime }: Ty
   return (
     <ThemeProvider>
       <DensityProvider density='fine'>
-        <div className='is-full bs-full grid overflow-hidden'>
+        <div className='w-full h-full grid overflow-hidden'>
           <Editor.Root ref={editorRef}>
             <Editor.Viewport>
               <Editor.Content initialValue={initialContent} extensions={extension} />

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

@@ -111,9 +111,7 @@ const assistantLinter = (runtime: Runtime.Runtime<LanguageModel.LanguageModel>)
         if (match) {
           suggestions = JSON.parse(match[0]);
         }
-      } catch (e) {
-        // failed to parse
-      }
+      } catch {}
 
       const diagnostics: Diagnostic[] = [];
       for (const s of suggestions) {
@@ -137,8 +135,8 @@ const assistantLinter = (runtime: Runtime.Runtime<LanguageModel.LanguageModel>)
         }
       }
       return diagnostics;
-    } catch (e) {
-      log.error('Proofreading failed', { error: e });
+    } catch (error) {
+      log.catch(error);
       return [];
     }
   });

package/src/components/index.ts

@@ -2,15 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
-export * from './AssistantSettings';
 export * from './Chat';
 export * from './TemplateEditor';
 export * from './Toolbox';
-
-export const BlueprintArticle = lazy(() => import('./BlueprintArticle'));
-export const ChatCompanion = lazy(() => import('./ChatCompanion'));
-export const ChatContainer = lazy(() => import('./ChatContainer'));
-export const ChatDialog = lazy(() => import('./ChatDialog'));
-export const PromptArticle = lazy(() => import('./PromptArticle'));

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';
@@ -29,17 +29,17 @@ export const AssistantSettings = ({ settings, onSettingsChange }: AssistantSetti
   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) => 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) => {
@@ -64,9 +64,9 @@ export const AssistantSettings = ({ settings, onSettingsChange }: AssistantSetti
                 </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) => {
@@ -88,9 +88,9 @@ export const AssistantSettings = ({ settings, onSettingsChange }: AssistantSetti
                 </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) => {
@@ -112,9 +112,9 @@ export const AssistantSettings = ({ settings, onSettingsChange }: AssistantSetti
                 </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,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { type Blueprint } from '@dxos/blueprints';
+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, attendableId, subject }: BlueprintArticleProps) => {
+  const { hasAttention } = useAttention(attendableId);
+
+  return (
+    <Panel.Root role={role} classNames='dx-document'>
+      <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;