feat: add proxy enable settings

aws-samples · Jan 24, 2025 · f67eb0c · f67eb0c
1 parent e00dddb
commit f67eb0c
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 20 deletions.
diff --git a/react-native/src/api/open-api.ts b/react-native/src/api/open-api.ts
@@ -3,7 +3,7 @@ import {
   getApiUrl,
   getDeepSeekApiKey,
   getOpenAIApiKey,
-  getServerProxyEnabled,
+  getOpenAIProxyEnabled,
   getTextModel,
 } from '../storage/StorageUtils.ts';
 import {
@@ -260,7 +260,7 @@ function getApiURL(): string {
   if (getTextModel().modelId.includes('deepseek')) {
     return 'https://api.deepseek.com/chat/completions';
   } else {
-    if (getServerProxyEnabled()) {
+    if (getOpenAIProxyEnabled()) {
       return (isDev ? 'http://localhost:8080' : getApiUrl()) + '/api/gpt';
     } else {
       return 'https://api.openai.com/v1/chat/completions';

diff --git a/react-native/src/settings/SettingsScreen.tsx b/react-native/src/settings/SettingsScreen.tsx
@@ -27,6 +27,7 @@ import {
   getModelUsage,
   getOllamaApiUrl,
   getOpenAIApiKey,
+  getOpenAIProxyEnabled,
   getRegion,
   getTextModel,
   isNewStabilityImageModel,
@@ -37,6 +38,7 @@ import {
   saveKeys,
   saveOllamaApiURL,
   saveOpenAIApiKey,
+  saveOpenAIProxyEnabled,
   saveRegion,
   saveTextModel,
 } from '../storage/StorageUtils.ts';
@@ -73,6 +75,9 @@ function SettingsScreen(): React.JSX.Element {
   const [ollamaApiUrl, setOllamaApiUrl] = useState(getOllamaApiUrl);
   const [deepSeekApiKey, setDeepSeekApiKey] = useState(getDeepSeekApiKey);
   const [openAIApiKey, setOpenAIApiKey] = useState(getOpenAIApiKey);
+  const [openAIProxyEnabled, setOpenAIProxyEnabled] = useState(
+    getOpenAIProxyEnabled
+  );
   const [region, setRegion] = useState(getRegion);
   const [imageSize, setImageSize] = useState(getImageSize);
   const [hapticEnabled, setHapticEnabled] = useState(getHapticEnabled);
@@ -238,6 +243,11 @@ function SettingsScreen(): React.JSX.Element {
     value: size,
   }));
 
+  const toggleOpenAIProxy = (value: boolean) => {
+    setOpenAIProxyEnabled(value);
+    saveOpenAIProxyEnabled(value);
+  };
+
   return (
     <SafeAreaView style={styles.safeArea}>
       <ScrollView style={styles.container}>
@@ -277,20 +287,32 @@ function SettingsScreen(): React.JSX.Element {
           onChangeText={setOllamaApiUrl}
           placeholder="Enter Ollama API URL"
         />
-        <CustomTextInput
-          label="OpenAI API Key"
-          value={openAIApiKey}
-          onChangeText={setOpenAIApiKey}
-          placeholder="Enter OpenAI API Key"
-          secureTextEntry={true}
-        />
         <CustomTextInput
           label="DeepSeek API Key"
           value={deepSeekApiKey}
           onChangeText={setDeepSeekApiKey}
           placeholder="Enter Deep Seek API Key"
           secureTextEntry={true}
         />
+        <View style={styles.apiKeyContainer}>
+          <View style={styles.apiKeyInputContainer}>
+            <CustomTextInput
+              label="OpenAI API Key"
+              value={openAIApiKey}
+              onChangeText={setOpenAIApiKey}
+              placeholder="Enter OpenAI API Key"
+              secureTextEntry={true}
+            />
+          </View>
+          <View
+            style={[styles.proxyContainer, isMac && styles.proxyMacContainer]}>
+            <Text style={styles.proxyLabel}>Proxy</Text>
+            <Switch
+              value={openAIProxyEnabled}
+              onValueChange={toggleOpenAIProxy}
+            />
+          </View>
+        </View>
         <Text style={[styles.label, styles.middleLabel]}>Select Model</Text>
         <CustomDropdown
           label="Text Model"
@@ -489,6 +511,27 @@ const styles = StyleSheet.create({
     marginVertical: 10,
     paddingBottom: 60,
   },
+  apiKeyContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  apiKeyInputContainer: {
+    flex: 1,
+    marginRight: 10,
+  },
+  proxyContainer: {
+    marginBottom: 12,
+  },
+  proxyMacContainer: {
+    marginTop: 10,
+  },
+  proxyLabel: {
+    fontSize: 12,
+    color: 'black',
+    fontWeight: '500',
+    marginBottom: 6,
+  },
 });
 
 export default SettingsScreen;
diff --git a/react-native/src/storage/StorageUtils.ts b/react-native/src/storage/StorageUtils.ts
@@ -53,7 +53,7 @@ const modelUsageKey = keyPrefix + 'modelUsageKey';
 const systemPromptsKey = keyPrefix + 'systemPromptsKey';
 const currentSystemPromptKey = keyPrefix + 'currentSystemPromptKey';
 const currentPromptIdKey = keyPrefix + 'currentPromptIdKey';
-const serverProxyEnabledKey = keyPrefix + 'serverProxyEnabledKey';
+const openAIProxyEnabledKey = keyPrefix + 'openAIProxyEnabledKey';
 
 let currentApiUrl: string | undefined;
 let currentApiKey: string | undefined;
@@ -64,7 +64,7 @@ let currentRegion: string | undefined;
 let currentImageModel: Model | undefined;
 let currentTextModel: Model | undefined;
 let currentSystemPrompts: SystemPrompt[] | undefined;
-let currentServerProxyEnabled: boolean | undefined;
+let currentOpenAIProxyEnabled: boolean | undefined;
 
 export function saveMessages(
   sessionId: number,
@@ -376,17 +376,17 @@ export function savePromptId(promptId: number) {
   storage.set(currentPromptIdKey, promptId);
 }
 
-export function saveServerProxyEnabled(enabled: boolean) {
-  currentServerProxyEnabled = enabled;
-  storage.set(serverProxyEnabledKey, enabled);
+export function saveOpenAIProxyEnabled(enabled: boolean) {
+  currentOpenAIProxyEnabled = enabled;
+  storage.set(openAIProxyEnabledKey, enabled);
 }
 
-export function getServerProxyEnabled() {
-  if (currentServerProxyEnabled !== undefined) {
-    return currentServerProxyEnabled;
+export function getOpenAIProxyEnabled() {
+  if (currentOpenAIProxyEnabled !== undefined) {
+    return currentOpenAIProxyEnabled;
   } else {
-    currentServerProxyEnabled =
-      storage.getBoolean(serverProxyEnabledKey) ?? false;
-    return currentServerProxyEnabled;
+    currentOpenAIProxyEnabled =
+      storage.getBoolean(openAIProxyEnabledKey) ?? true;
+    return currentOpenAIProxyEnabled;
   }
 }