@dxos/plugin-assistant 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/src/components/Typewriter/AssistantToolbar.tsx

@@ -0,0 +1,161 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import * as LanguageModel from '@effect/ai/LanguageModel';
+import * as Effect from 'effect/Effect';
+import type * as Runtime from 'effect/Runtime';
+import React, { useState } from 'react';
+
+import { runInRuntime } from '@dxos/effect';
+import { log } from '@dxos/log';
+import { Button, Icon, Input, ThemeProvider } from '@dxos/react-ui';
+
+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);
+  const [showPromptInput, setShowPromptInput] = useState(false);
+  const [customPrompt, setCustomPrompt] = useState('');
+
+  const runEffect = async (text: string, prompt: string) => {
+    setIsProcessing(true);
+    try {
+      const newText = await runInRuntime(
+        runtime,
+        Effect.gen(function* () {
+          // Construct meaningful system prompt context
+          const response = yield* LanguageModel.generateText({
+            prompt: `${prompt}:\n"${text}"`,
+          });
+          return response.text;
+        }),
+      );
+
+      // Apply change - check if selection is still valid/same?
+      // For simple demo, we just apply to the passed from/to, but ideally we check current selection.
+      // We can just rely on from/to passed as props, assuming the toolbar unmounts if selection changes.
+      view.dispatch({
+        changes: { from, to, insert: newText },
+      });
+    } catch (e) {
+      log.error('Assistant action failed', { error: e });
+    } finally {
+      setIsProcessing(false);
+      setShowPromptInput(false);
+    }
+  };
+
+  const currentText = view.state.sliceDoc(from, to);
+
+  const handleRegenerate = () => {
+    void runEffect(
+      currentText,
+      'You are a typewriting agent. Agent only outputs the result; one version; no explanation or formatting. Re-write the following text to be more clear and concise, keep the same meaning.',
+    );
+  };
+
+  const handleCasual = () => handleChangeTone('casual');
+  const handleFormal = () => handleChangeTone('formal');
+
+  const handleChangeTone = (tone: 'formal' | 'casual') => {
+    void runEffect(
+      currentText,
+      `You are a typewriting agent. Agent only outputs the result; one version; no explanation or formatting. Rewrite the following text to be more ${tone}`,
+    );
+  };
+
+  const handleEditWithPrompt = () => {
+    if (!customPrompt) return;
+    void runEffect(currentText, customPrompt);
+  };
+
+  return (
+    <ThemeProvider>
+      {showPromptInput ? (
+        <div
+          className='flex items-center gap-2 p-1 bg-white/90 dark:bg-neutral-800/90 backdrop-blur-md rounded-full shadow-xl border border-neutral-200 dark:border-neutral-700 animate-in fade-in zoom-in-95 duration-150 mt-2'
+          onMouseDown={(e) => e.preventDefault()}
+        >
+          <Input.Root>
+            <Input.TextInput
+              placeholder='Instruction...'
+              value={customPrompt}
+              onChange={(e) => setCustomPrompt(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleEditWithPrompt();
+                if (e.key === 'Escape') setShowPromptInput(false);
+                e.stopPropagation();
+              }}
+              autoFocus
+              classNames='border-none bg-transparent focus-visible:ring-0 p-1 text-sm min-w-[200px]'
+            />
+          </Input.Root>
+          <Button
+            variant='ghost'
+            classNames='p-1 min-h-0 h-6 w-6 rounded-full'
+            onClick={handleEditWithPrompt}
+            disabled={!customPrompt || isProcessing}
+          >
+            <Icon icon='ph--arrows-clockwise--regular' classNames={isProcessing ? 'animate-spin' : ''} />
+          </Button>
+        </div>
+      ) : (
+        <div
+          className='flex items-center gap-1 p-1 bg-white/50 dark:bg-neutral-800/50 backdrop-blur-md rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700 animate-in fade-in zoom-in-95 duration-150 mt-2'
+          onMouseDown={(e) => e.preventDefault()}
+        >
+          <div className='flex items-center gap-1'>
+            <Button
+              variant='ghost'
+              classNames='flex flex-col items-center gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
+              onClick={handleCasual}
+              disabled={isProcessing}
+            >
+              <Icon icon='ph--caret-left--regular' />
+              <span className='text-[10px] leading-none text-neutral-500 font-medium'>Casual</span>
+            </Button>
+
+            <Button
+              variant='ghost'
+              classNames='flex flex-col items-center gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
+              onClick={handleRegenerate}
+              disabled={isProcessing}
+            >
+              <Icon icon='ph--arrows-clockwise--regular' classNames={isProcessing ? 'animate-spin' : ''} />
+              <span className='text-[10px] leading-none text-neutral-500 font-medium'>Different</span>
+            </Button>
+
+            <Button
+              variant='ghost'
+              classNames='flex flex-col gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
+              onClick={handleFormal}
+              disabled={isProcessing}
+            >
+              <Icon icon='ph--caret-right--regular' />
+              <span className='text-[10px] leading-none text-neutral-500 font-medium'>Formal</span>
+            </Button>
+          </div>
+
+          <div className='w-px h-8 bg-neutral-200 dark:bg-neutral-700 mx-1' />
+
+          <Button
+            variant='ghost'
+            classNames='flex flex-col gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
+            onClick={() => setShowPromptInput(true)}
+            disabled={isProcessing}
+          >
+            <Icon icon='ph--keyboard--regular' />
+            <span className='text-[10px] leading-none text-neutral-500 font-medium'>Instruct</span>
+          </Button>
+        </div>
+      )}
+    </ThemeProvider>
+  );
+};

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,50 @@
+//
+// 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 { 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>
+      <Editor.Root ref={editorRef}>
+        <Editor.Viewport>
+          <Editor.Content initialValue={initialContent} extensions={extension} />
+        </Editor.Viewport>
+      </Editor.Root>
+    </ThemeProvider>
+  );
+};

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

@@ -0,0 +1,141 @@
+//
+// 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 { createElement } 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(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,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';
@@ -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,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;