@dxos/plugin-assistant 0.8.4-main.67995b8 → 0.8.4-main.dedc0f3

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 { meta } from '../../meta';
-import { LLM_PROVIDERS, type Assistant } from '../../types';
+import { type Assistant, LLM_PROVIDERS } from '../../types';
 
 // TODO(burdon): Factor out default Selector.
 const DEFAULT_VALUE = '__default';
@@ -24,82 +24,89 @@ 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>
   );
 };