@dxos/plugin-assistant 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5

package/src/components/AssistantSettings/AssistantSettings.stories.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+import { AssistantSettings } from './AssistantSettings';
+
+const meta = {
+  title: 'plugins/plugin-assistant/components/AssistantSettings',
+  tags: ['settings'],
+  component: AssistantSettings,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof AssistantSettings>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    settings: {
+      customPrompts: false,
+      llmProvider: 'edge',
+    },
+  },
+};

package/src/components/AssistantSettings/AssistantSettings.tsx

@@ -5,11 +5,12 @@
 import React from 'react';
 
 import { DEFAULT_EDGE_MODELS, DEFAULT_OLLAMA_MODELS } from '@dxos/ai';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { Settings as SettingsForm } from '@dxos/react-ui-form';
 
-import { meta } from '../../meta';
-import { type Assistant, LLM_PROVIDERS } 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 +21,112 @@ const LLM_PROVIDER_LABELS = {
   lmstudio: 'LM Studio',
 } as const;
 
-export const AssistantSettings = ({ settings }: { settings: Assistant.Settings }) => {
+export type AssistantSettingsProps = AppSurface.SettingsArticleProps<Assistant.Settings>;
+
+export const AssistantSettings = ({ settings, onSettingsChange }: AssistantSettingsProps) => {
   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>
+    <SettingsForm.Viewport>
+      <SettingsForm.Section title={t('settings.title', { ns: meta.id })}>
+        <SettingsForm.Item
+          title={t('settings.custom-prompts.label')}
+          description={t('settings.custom-prompts.description')}
+        >
+          <Input.Switch
+            disabled={!onSettingsChange}
+            checked={!!settings.customPrompts}
+            onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, customPrompts: checked }))}
+          />
+        </SettingsForm.Item>
 
-      <DeprecatedFormInput label={t('settings llm provider label')}>
-        <Select.Root
-          value={settings.llmProvider ?? 'edge'}
-          onValueChange={(value) => {
-            settings.llmProvider = value === DEFAULT_VALUE ? undefined : (value as any);
-          }}
+        <SettingsForm.Item
+          title={t('settings.llm-provider.label')}
+          description={t('settings.llm-provider.description')}
         >
-          <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>
+          <Select.Root
+            disabled={!onSettingsChange}
+            value={settings.llmProvider ?? 'edge'}
+            onValueChange={(value) => {
+              onSettingsChange?.((s) => ({
+                ...s,
+                llmProvider: value === DEFAULT_VALUE ? undefined : (value as any),
+              }));
+            }}
+          >
+            <Select.TriggerButton disabled={!onSettingsChange} 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>
+        </SettingsForm.Item>
 
-      <DeprecatedFormInput label={t('settings edge llm model label')}>
-        <Select.Root
-          value={settings.edgeModel ?? DEFAULT_VALUE}
-          onValueChange={(value) => {
-            settings.edgeModel = value === DEFAULT_VALUE ? undefined : value;
-          }}
+        <SettingsForm.Item
+          title={t('settings.edge-llm-model.label')}
+          description={t('settings.edge-llm-model.description')}
         >
-          <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>
+          <Select.Root
+            disabled={!onSettingsChange}
+            value={settings.edgeModel ?? DEFAULT_VALUE}
+            onValueChange={(value) => {
+              onSettingsChange?.((s) => ({ ...s, edgeModel: value === DEFAULT_VALUE ? undefined : value }));
+            }}
+          >
+            <Select.TriggerButton disabled={!onSettingsChange} 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>
+        </SettingsForm.Item>
 
-      <DeprecatedFormInput label={t('settings ollama llm model label')}>
-        <Select.Root
-          value={settings.ollamaModel ?? DEFAULT_VALUE}
-          onValueChange={(value) => {
-            settings.ollamaModel = value === DEFAULT_VALUE ? undefined : value;
-          }}
+        <SettingsForm.Item
+          title={t('settings.ollama-llm-model.label')}
+          description={t('settings.ollama-llm-model.description')}
         >
-          <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>
+          <Select.Root
+            disabled={!onSettingsChange}
+            value={settings.ollamaModel ?? DEFAULT_VALUE}
+            onValueChange={(value) => {
+              onSettingsChange?.((s) => ({ ...s, ollamaModel: value === DEFAULT_VALUE ? undefined : value }));
+            }}
+          >
+            <Select.TriggerButton disabled={!onSettingsChange} 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>
+        </SettingsForm.Item>
+      </SettingsForm.Section>
+    </SettingsForm.Viewport>
   );
 };

package/src/components/AssistantSettings/index.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-export * from './AssistantSettings';
+export { AssistantSettings as default } from './AssistantSettings';