@dxos/plugin-assistant 0.8.3 → 0.8.4-main.1f223c7

package/src/components/AssistantSettings/AssistantSettings.tsx

@@ -6,10 +6,10 @@ import React from 'react';
 
 import { DEFAULT_EDGE_MODELS, DEFAULT_OLLAMA_MODELS } from '@dxos/ai';
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
-import { ASSISTANT_PLUGIN } from '../../meta';
-import { LLM_PROVIDERS, type AssistantSettingsProps } from '../../types';
+import { meta } from '../../meta';
+import { type Assistant, LLM_PROVIDERS } from '../../types';
 
 // TODO(burdon): Factor out default Selector.
 const DEFAULT_VALUE = '__default';
@@ -20,86 +20,93 @@ const LLM_PROVIDER_LABELS = {
   lmstudio: 'LM Studio',
 } as const;
 
-export const AssistantSettings = ({ settings }: { settings: AssistantSettingsProps }) => {
-  const { t } = useTranslation(ASSISTANT_PLUGIN);
+export const AssistantSettings = ({ settings }: { settings: Assistant.Settings }) => {
+  const { t } = useTranslation(meta.id);
 
   return (
-    <DeprecatedFormContainer>
-      <DeprecatedFormInput label={t('settings custom prompts label')}>
-        <Input.Switch
-          checked={!!settings.customPrompts}
-          onCheckedChange={(checked) => (settings.customPrompts = checked)}
-        />
-      </DeprecatedFormInput>
+    <ControlPage>
+      <ControlSection title={t('settings title', { ns: meta.id })}>
+        <ControlGroup>
+          <ControlItemInput title={t('settings custom prompts label')}>
+            <Input.Switch
+              checked={!!settings.customPrompts}
+              onCheckedChange={(checked) => (settings.customPrompts = checked)}
+            />
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings llm provider label')}>
-        <Select.Root
-          value={settings.llmProvider ?? 'edge'}
-          onValueChange={(value) => {
-            settings.llmProvider = value === DEFAULT_VALUE ? undefined : (value as any);
-          }}
-        >
-          <Select.TriggerButton placeholder={t('settings llm provider label')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                <Select.Option value={DEFAULT_VALUE}>{t('settings default label')}</Select.Option>
-                {LLM_PROVIDERS.map((model) => (
-                  <Select.Option key={model} value={model}>
-                    {LLM_PROVIDER_LABELS[model]}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings llm provider label')}>
+            <Select.Root
+              value={settings.llmProvider ?? 'edge'}
+              onValueChange={(value) => {
+                settings.llmProvider = value === DEFAULT_VALUE ? undefined : (value as any);
+              }}
+            >
+              <Select.TriggerButton placeholder={t('settings llm provider label')} />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    <Select.Option value={DEFAULT_VALUE}>{t('settings default label')}</Select.Option>
+                    {LLM_PROVIDERS.map((model) => (
+                      <Select.Option key={model} value={model}>
+                        {LLM_PROVIDER_LABELS[model]}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings edge llm model label')}>
-        <Select.Root
-          value={settings.edgeModel ?? DEFAULT_VALUE}
-          onValueChange={(value) => {
-            settings.edgeModel = value === DEFAULT_VALUE ? undefined : value;
-          }}
-        >
-          <Select.TriggerButton placeholder={t('settings default llm model label')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                <Select.Option value={DEFAULT_VALUE}>{t('settings default label')}</Select.Option>
-                {DEFAULT_EDGE_MODELS.map((model) => (
-                  <Select.Option key={model} value={model}>
-                    {model}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
+          <ControlItemInput title={t('settings edge llm model label')}>
+            <Select.Root
+              value={settings.edgeModel ?? DEFAULT_VALUE}
+              onValueChange={(value) => {
+                settings.edgeModel = value === DEFAULT_VALUE ? undefined : value;
+              }}
+            >
+              <Select.TriggerButton placeholder={t('settings default llm model label')} />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    <Select.Option value={DEFAULT_VALUE}>{t('settings default label')}</Select.Option>
+                    {DEFAULT_EDGE_MODELS.map((model) => (
+                      <Select.Option key={model} value={model}>
+                        {model}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
 
-      <DeprecatedFormInput label={t('settings ollama llm model label')}>
-        <Select.Root
-          value={settings.ollamaModel ?? DEFAULT_VALUE}
-          onValueChange={(value) => {
-            settings.ollamaModel = value === DEFAULT_VALUE ? undefined : value;
-          }}
-        >
-          <Select.TriggerButton placeholder={t('settings default llm model label')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                <Select.Option value={DEFAULT_VALUE}>{t('settings default label')}</Select.Option>
-                {DEFAULT_OLLAMA_MODELS.map((model) => (
-                  <Select.Option key={model} value={model}>
-                    {model}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
-    </DeprecatedFormContainer>
+          <ControlItemInput title={t('settings ollama llm model label')}>
+            <Select.Root
+              value={settings.ollamaModel ?? DEFAULT_VALUE}
+              onValueChange={(value) => {
+                settings.ollamaModel = value === DEFAULT_VALUE ? undefined : value;
+              }}
+            >
+              <Select.TriggerButton placeholder={t('settings default llm model label')} />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    <Select.Option value={DEFAULT_VALUE}>{t('settings default label')}</Select.Option>
+                    {DEFAULT_OLLAMA_MODELS.map((model) => (
+                      <Select.Option key={model} value={model}>
+                        {model}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
+        </ControlGroup>
+      </ControlSection>
+    </ControlPage>
   );
 };

package/src/components/BlueprintContainer.tsx

@@ -2,145 +2,21 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-import JSON5 from 'json5';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React from 'react';
 
-import { ToolRegistry } from '@dxos/ai';
-import { useCapability } from '@dxos/app-framework';
-import {
-  type Blueprint,
-  type BlueprintDefinition,
-  BlueprintMachine,
-  createLocalSearchTool,
-  createExaTool,
-  createGraphWriterTool,
-} from '@dxos/assistant';
-import { getSpace } from '@dxos/client/echo';
-import { DXN, Key } from '@dxos/echo';
-import { Toolbar, useTranslation } from '@dxos/react-ui';
-import { getSelectionSet, useSelectionManager } from '@dxos/react-ui-attention';
-import { StackItem, type StackItemContentProps } from '@dxos/react-ui-stack';
+import { type Blueprint } from '@dxos/blueprints';
+import { StackItem } from '@dxos/react-ui-stack';
 
-import { BlueprintEditor } from './BlueprintEditor';
-import { AssistantCapabilities } from '../capabilities';
-import { meta } from '../meta';
-import { QueueLogger } from '../queue-logger';
+import { TemplateEditor } from './TemplateEditor';
 
-// TODO(burdon): Move to config.
-export const EXA_API_KEY = '9c7e17ff-0c85-4cd5-827a-8b489f139e03';
-
-// TODO(burdon): Validate.
-const parseBlueprint = (text: string): BlueprintDefinition | undefined => {
-  try {
-    const json = JSON5.parse(text);
-    const { steps } = json;
-    return { steps };
-  } catch (error) {
-    // Ignore.
-  }
+export type BlueprintContainerProps = {
+  blueprint: Blueprint.Blueprint;
 };
 
-export const BlueprintContainer = ({
-  role,
-  blueprint,
-}: Pick<StackItemContentProps, 'role'> & { blueprint: Blueprint }) => {
-  const { t } = useTranslation(meta.id);
-  const aiClient = useCapability(AssistantCapabilities.AiClient);
-  const selectionManager = useSelectionManager();
-  const [definition, setDefinition] = useState<BlueprintDefinition>();
-  useEffect(() => {
-    setDefinition({
-      steps: blueprint.steps.map(({ instructions, tools }) => ({ instructions, tools })),
-    });
-  }, [blueprint]);
-
-  const editorRef = useRef<EditorView | undefined>(undefined);
-
-  // TODO(burdon): Factor out.
-  const toolRegistry = useMemo(() => {
-    const space = getSpace(blueprint);
-    if (!space) {
-      return;
-    }
-
-    // TODO(burdon): How should the queue be created?
-    const queue = space.queues.create();
-
-    return new ToolRegistry([
-      createExaTool({ apiKey: EXA_API_KEY }),
-      createLocalSearchTool(space.db, queue),
-      createGraphWriterTool({
-        db: space.db,
-        queue,
-        schema: [], // TODO(burdon): Get schema from client/blueprint?
-        onDone: async (objects) => {
-          await queue.append(objects);
-        },
-      }),
-    ]);
-  }, [blueprint]);
-
-  const formatAndSave = useCallback((): BlueprintDefinition | undefined => {
-    if (!blueprint) {
-      return;
-    }
-
-    const text = editorRef.current?.state.doc.toString();
-    if (!text) {
-      return;
-    }
-
-    const definition = parseBlueprint(text);
-    if (!definition) {
-      return;
-    }
-
-    setDefinition(definition);
-    const formatted = JSON.stringify(definition, null, 2);
-    editorRef.current?.dispatch({
-      changes: { from: 0, to: text.length, insert: formatted },
-    });
-
-    blueprint.steps.length = 0;
-    for (const step of definition.steps) {
-      blueprint.steps.push({
-        id: Key.ObjectId.random(),
-        instructions: step.instructions,
-        tools: step.tools,
-      });
-    }
-
-    return blueprint;
-  }, [blueprint]);
-
-  // TODO(burdon): Save raw blueprint separately from parsed blueprint? (like Script).
-  const handleSave = useCallback(() => formatAndSave(), [formatAndSave]);
-
-  const handleRun = useCallback(async () => {
-    if (!aiClient?.value || !toolRegistry) {
-      return;
-    }
-
-    formatAndSave();
-
-    // Get input from selection.
-    const input = Array.from(getSelectionSet(selectionManager)).map((id) => DXN.fromLocalObjectId(id));
-    if (!input.length) {
-      return;
-    }
-
-    const machine = new BlueprintMachine(toolRegistry, blueprint).setLogger(new QueueLogger(blueprint));
-    await machine.runToCompletion({ aiClient: aiClient.value, input });
-  }, [aiClient.value, blueprint, formatAndSave, selectionManager, toolRegistry]);
-
+export const BlueprintContainer = ({ blueprint }: BlueprintContainerProps) => {
   return (
-    <StackItem.Content role={role} toolbar>
-      <Toolbar.Root>
-        <Toolbar.Button onClick={handleSave}>{t('button save')}</Toolbar.Button>
-        <Toolbar.Button onClick={handleRun}>{t('button run')}</Toolbar.Button>
-      </Toolbar.Root>
-      {definition && <BlueprintEditor ref={editorRef} blueprint={definition} />}
+    <StackItem.Content classNames='container-max-width'>
+      <TemplateEditor id={blueprint.id} template={blueprint.instructions} />
     </StackItem.Content>
   );
 };