chore: enable / disable proxy configrations (#5050)

* chore: enable / disable proxy configrations

* Update web-app/src/routes/settings/https-proxy.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update web-app/src/lib/completion.ts

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

core/src/browser/extensions/engines/AIEngine.ts

@@ -31,17 +31,16 @@ export abstract class AIEngine extends BaseExtension {
   /**
    * Loads the model.
    */
-  async loadModel(model: Model): Promise<any> {
-    if (model.engine.toString() !== this.provider) return Promise.resolve()
+  async loadModel(model: Partial<Model>): Promise<any> {
+    if (model?.engine?.toString() !== this.provider) return Promise.resolve()
     events.emit(ModelEvent.OnModelReady, model)
     return Promise.resolve()
   }
   /**
    * Stops the model.
    */
-  async unloadModel(model?: Model): Promise<any> {
-    if (model?.engine && model.engine.toString() !== this.provider)
-      return Promise.resolve()
+  async unloadModel(model?: Partial<Model>): Promise<any> {
+    if (model?.engine && model.engine.toString() !== this.provider) return Promise.resolve()
     events.emit(ModelEvent.OnModelStopped, model ?? {})
     return Promise.resolve()
   }

extensions/inference-cortex-extension/src/index.ts

@@ -180,10 +180,14 @@ export default class JanInferenceCortexExtension extends LocalOAIEngine {
   }
 
   override async loadModel(
-    model: Model & { file_path?: string }
+    model: Partial<Model> & {
+      id: string
+      settings?: object
+      file_path?: string
+    }
   ): Promise<void> {
     // Cortex will handle these settings
-    const { llama_model_path, mmproj, ...settings } = model.settings
+    const { llama_model_path, mmproj, ...settings } = model.settings ?? {}
     model.settings = settings
 
     const controller = new AbortController()

web-app/src/hooks/useChat.ts

@@ -78,7 +78,7 @@ export const useChat = () => {
       try {
         if (selectedModel?.id) {
           updateLoadingModel(true)
-          await startModel(provider.provider, selectedModel.id).catch(
+          await startModel(provider, selectedModel.id).catch(
             console.error
           )
           updateLoadingModel(false)

web-app/src/lib/completion.ts

@@ -153,12 +153,23 @@ export const sendCompletion = async (
  * @returns
  */
 export const startModel = async (
-  provider: string,
+  provider: ProviderObject,
   model: string
 ): Promise<void> => {
-  const providerObj = EngineManager.instance().get(normalizeProvider(provider))
-  const modelObj = ModelManager.instance().get(model)
-  if (providerObj && modelObj) return providerObj?.loadModel(modelObj)
+  const providerObj = EngineManager.instance().get(
+    normalizeProvider(provider.provider)
+  )
+  const modelObj = provider.models.find((m) => m.id === model)
+  if (providerObj && modelObj)
+    return providerObj?.loadModel({
+      id: modelObj.id,
+      settings: Object.fromEntries(
+        Object.entries(modelObj.settings ?? {}).map(([key, value]) => [
+          key,
+          value.controller_props?.value, // assuming each setting is { value: ... }
+        ])
+      ),
+    })
 }
 
 /**

web-app/src/routes/settings/https-proxy.tsx

@@ -7,7 +7,7 @@ import { Switch } from '@/components/ui/switch'
 import { useTranslation } from 'react-i18next'
 import { Input } from '@/components/ui/input'
 import { EyeOff, Eye } from 'lucide-react'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useProxyConfig } from '@/hooks/useProxyConfig'
 import { configurePullOptions } from '@/services/models'
 
@@ -42,13 +42,36 @@ function HTTPSProxy() {
     setProxyUrl,
   } = useProxyConfig()
 
-  useEffect(() => {
-    if (proxyUrl && !proxyEnabled) {
-      setProxyEnabled(true)
-    } else if (!proxyUrl && proxyEnabled) {
-      setProxyEnabled(false)
-    }
-  }, [proxyEnabled, proxyUrl, setProxyEnabled])
+  const toggleProxy = useCallback(
+    (checked: boolean) => {
+      setProxyEnabled(checked)
+      configurePullOptions({
+        proxyUrl,
+        proxyEnabled: checked,
+        proxyUsername,
+        proxyPassword,
+        proxyIgnoreSSL,
+        verifyProxySSL,
+        verifyProxyHostSSL,
+        verifyPeerSSL,
+        verifyHostSSL,
+        noProxy,
+      })
+    },
+    [
+      noProxy,
+      proxyEnabled,
+      proxyIgnoreSSL,
+      proxyPassword,
+      proxyUrl,
+      proxyUsername,
+      setProxyEnabled,
+      verifyHostSSL,
+      verifyPeerSSL,
+      verifyProxyHostSSL,
+      verifyProxySSL,
+    ]
+  )
 
   useEffect(() => {
     const handler = setTimeout(() => {
@@ -89,7 +112,19 @@ function HTTPSProxy() {
         <div className="p-4 w-full h-[calc(100%-32px)] overflow-y-auto">
           <div className="flex flex-col justify-between gap-4 gap-y-3 w-full">
             {/* Proxy Configuration */}
-            <Card title="Proxy Configuration">
+            <Card
+              header={
+                <div className="flex items-center justify-between">
+                  <h1 className="text-main-view-fg font-medium text-base mb-2">
+                    Proxy
+                  </h1>
+                  <Switch
+                    checked={proxyEnabled}
+                    onCheckedChange={toggleProxy}
+                  />
+                </div>
+              }
+            >
               <CardItem
                 title="Proxy URL"
                 className="block"