feat: implement preset setting (close: #57)

ulivz · ulivz · commit f5e28a025d3d · 2025-01-29T01:38:42.000+08:00
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -19,6 +19,7 @@ import {
 
 import { UTIOService } from './services/utio';
 import { store } from './store/create';
+import { SettingStore } from './store/setting';
 import { createTray } from './tray';
 
 const { isProd } = env;
@@ -143,6 +144,19 @@ const initializeApp = async () => {
   app.on('quit', unsubscribe);
 
   logger.info('initializeApp end');
+
+  // Check and update remote presets
+  const settings = SettingStore.getStore();
+  if (
+    settings.presetSource?.type === 'remote' &&
+    settings.presetSource.autoUpdate
+  ) {
+    try {
+      await SettingStore.importPresetFromUrl(settings.presetSource.url!, true);
+    } catch (error) {
+      logger.error('Failed to update preset:', error);
+    }
+  }
 };
 
 /**
@@ -152,6 +166,34 @@ const registerIPCHandlers = () => {
   ipcMain.handle('utio:shareReport', async (_, params) => {
     await UTIOService.getInstance().shareReport(params);
   });
+
+  ipcMain.handle('utio:importPresetFromFile', async (_, yamlContent) => {
+    await SettingStore.importPresetFromText(yamlContent);
+    return SettingStore.getStore();
+  });
+
+  ipcMain.handle('utio:importPresetFromUrl', async (_, url, autoUpdate) => {
+    await SettingStore.importPresetFromUrl(url, autoUpdate);
+    return SettingStore.getStore();
+  });
+
+  ipcMain.handle('utio:updatePresetFromRemote', async () => {
+    const settings = SettingStore.getStore();
+    if (settings.presetSource?.type === 'remote' && settings.presetSource.url) {
+      await SettingStore.importPresetFromUrl(
+        settings.presetSource.url,
+        settings.presetSource.autoUpdate,
+      );
+      return SettingStore.getStore();
+    } else {
+      throw new Error('No remote preset configured');
+    }
+  });
+
+  ipcMain.handle('utio:resetPreset', async () => {
+    SettingStore.resetPreset();
+    return SettingStore.getStore();
+  });
 };
 
 /**
@@ -185,3 +227,5 @@ app
     logger.info('app.whenReady end');
   })
   .catch(console.log);
+
+// ... 保留其他代码 ...
diff --git a/src/main/store/setting.ts b/src/main/store/setting.ts
@@ -3,10 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import ElectronStore from 'electron-store';
+import yaml from 'js-yaml';
+import z from 'zod';
 
 import * as env from '@main/env';
+import { logger } from '@main/logger';
 
 import { LocalStore, VlmProvider } from './types';
+import { validatePreset } from './validate';
 
 export class SettingStore {
   private static instance = new ElectronStore<LocalStore>({
@@ -51,4 +55,58 @@ export class SettingStore {
   public static openInEditor(): void {
     SettingStore.instance.openInEditor();
   }
+
+  public static async importPresetFromUrl(
+    url: string,
+    autoUpdate = false,
+  ): Promise<void> {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch preset: ${response.status}`);
+      }
+
+      const yamlText = await response.text();
+      const preset = yaml.load(yamlText);
+      const validatedPreset = validatePreset(preset);
+
+      SettingStore.setStore({
+        ...validatedPreset,
+        presetSource: {
+          type: 'remote',
+          url,
+          autoUpdate,
+          lastUpdated: Date.now(),
+        },
+      });
+    } catch (error) {
+      logger.error(error);
+      throw new Error(`Failed to import preset: ${error.message}`);
+    }
+  }
+
+  public static async importPresetFromText(yamlText: string): Promise<void> {
+    try {
+      const preset = yaml.load(yamlText);
+      const validatedPreset = validatePreset(preset);
+      console.log('validatedPreset', validatedPreset);
+
+      SettingStore.setStore({
+        ...validatedPreset,
+        presetSource: {
+          type: 'local',
+          lastUpdated: Date.now(),
+        },
+      });
+    } catch (error) {
+      logger.error(error);
+      throw new Error(`Failed to import preset: ${error.message}`);
+    }
+  }
+
+  public static resetPreset(): void {
+    const store = SettingStore.getStore();
+    const { presetSource, ...settings } = store;
+    SettingStore.setStore(settings);
+  }
 }
diff --git a/src/main/store/types.ts b/src/main/store/types.ts
@@ -5,6 +5,7 @@
 import { ComputerUseUserData, Conversation } from '@ui-tars/shared/types/data';
 
 import { SettingStore } from './setting';
+import { LocalStore, PresetSource } from './validate';
 
 export type NextAction =
   | { type: 'key'; text: string }
@@ -57,13 +58,4 @@ export enum VlmProvider {
   vLLM = 'vLLM',
 }
 
-export type LocalStore = {
-  language: 'zh' | 'en';
-  vlmProvider: VlmProvider;
-  vlmBaseUrl: string;
-  vlmApiKey: string;
-  vlmModelName: string;
-  screenshotScale: number; // 0.1 ~ 1.0
-  reportStorageBaseUrl?: string;
-  utioBaseUrl?: string;
-};
+export type { PresetSource, LocalStore };
diff --git a/src/main/store/validate.ts b/src/main/store/validate.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2025 Bytedance, Inc. and its affiliates.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { z } from 'zod';
+
+import { VlmProvider } from './types';
+
+const PresetSourceSchema = z.object({
+  type: z.enum(['local', 'remote']),
+  url: z.string().url().optional(),
+  autoUpdate: z.boolean().optional(),
+  lastUpdated: z.number().optional(),
+});
+
+export const PresetSchema = z.object({
+  // Required fields
+  language: z.enum(['zh', 'en']),
+  vlmProvider: z.nativeEnum(VlmProvider),
+  vlmBaseUrl: z.string().url(),
+  vlmApiKey: z.string().min(1),
+  vlmModelName: z.string().min(1),
+
+  // Optional fields
+  screenshotScale: z.number().min(0.1).max(1).optional().default(1),
+  reportStorageBaseUrl: z.string().url().optional(),
+  utioBaseUrl: z.string().url().optional(),
+  presetSource: PresetSourceSchema.optional(),
+});
+
+export type PresetSource = z.infer<typeof PresetSourceSchema>;
+export type LocalStore = z.infer<typeof PresetSchema>;
+
+export const validatePreset = (data: unknown): LocalStore => {
+  return PresetSchema.parse(data);
+};
diff --git a/src/preload/index.ts b/src/preload/index.ts
@@ -38,6 +38,13 @@ const electronHandler = {
   utio: {
     shareReport: (params: UTIOPayload<'shareReport'>) =>
       ipcRenderer.invoke('utio:shareReport', params),
+    importPresetFromFile: (yamlContent: string) =>
+      ipcRenderer.invoke('utio:importPresetFromFile', yamlContent),
+    importPresetFromUrl: (url: string, autoUpdate: boolean) =>
+      ipcRenderer.invoke('utio:importPresetFromUrl', url, autoUpdate),
+    updatePresetFromRemote: () =>
+      ipcRenderer.invoke('utio:updatePresetFromRemote'),
+    resetPreset: () => ipcRenderer.invoke('utio:resetPreset'),
   },
 };
 
diff --git a/src/renderer/src/pages/settings/PresetImport.tsx b/src/renderer/src/pages/settings/PresetImport.tsx
@@ -0,0 +1,153 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Switch,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+  VStack,
+  useToast,
+} from '@chakra-ui/react';
+import { useRef, useState } from 'react';
+
+interface PresetImportProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function PresetImport({ isOpen, onClose }: PresetImportProps) {
+  const [remoteUrl, setRemoteUrl] = useState('');
+  const [autoUpdate, setAutoUpdate] = useState(true);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const toast = useToast();
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    try {
+      // Use FileReader to read file contents
+      const reader = new FileReader();
+      const yamlText = await new Promise<string>((resolve, reject) => {
+        reader.onload = () => resolve(reader.result as string);
+        reader.onerror = () => reject(reader.error);
+        reader.readAsText(file);
+      });
+
+      // Send text content via IPC
+      await window.electron.utio.importPresetFromFile(yamlText);
+
+      toast({
+        title: 'Preset imported successfully',
+        status: 'success',
+        duration: 2000,
+      });
+      onClose();
+    } catch (error) {
+      toast({
+        title: 'Failed to import preset',
+        description: error.message,
+        status: 'error',
+        duration: 3000,
+      });
+    }
+  };
+
+  const handleRemoteImport = async () => {
+    try {
+      await window.electron.utio.importPresetFromUrl(remoteUrl, autoUpdate);
+      toast({
+        title: 'Preset imported successfully',
+        status: 'success',
+        duration: 2000,
+      });
+      onClose();
+    } catch (error) {
+      toast({
+        title: 'Failed to import preset',
+        description: error.message,
+        status: 'error',
+        duration: 3000,
+      });
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Import Preset</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Tabs>
+            <TabList>
+              <Tab>Local File</Tab>
+              <Tab>Remote URL</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel>
+                <VStack spacing={4}>
+                  <Text>Select a YAML file to import settings preset</Text>
+                  <input
+                    type="file"
+                    accept=".yaml,.yml"
+                    ref={fileInputRef}
+                    style={{ display: 'none' }}
+                    onChange={handleFileChange}
+                  />
+                  <Button onClick={() => fileInputRef.current?.click()}>
+                    Choose File
+                  </Button>
+                </VStack>
+              </TabPanel>
+              <TabPanel>
+                <VStack spacing={4}>
+                  <FormControl>
+                    <FormLabel>Preset URL</FormLabel>
+                    <Input
+                      value={remoteUrl}
+                      onChange={(e) => setRemoteUrl(e.target.value)}
+                      placeholder="https://example.com/preset.yaml"
+                    />
+                  </FormControl>
+                  <FormControl display="flex" alignItems="center">
+                    <FormLabel mb="0">Auto update on startup</FormLabel>
+                    <Switch
+                      isChecked={autoUpdate}
+                      onChange={(e) => setAutoUpdate(e.target.checked)}
+                    />
+                  </FormControl>
+                </VStack>
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="ghost" mr={3} onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="tars-ghost"
+            onClick={handleRemoteImport}
+            isDisabled={!remoteUrl}
+          >
+            Import
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
diff --git a/src/renderer/src/pages/settings/index.tsx b/src/renderer/src/pages/settings/index.tsx
