fix: expand assistant and model settings by default (#2081)

* fix: expand assistant and model settings by default

* fix: add proxy enabled toggle

web/containers/CardSidebar/index.tsx

@@ -22,6 +22,7 @@ interface Props {
   rightAction?: ReactNode
   title: string
   asChild?: boolean
+  isShow?: boolean
   hideMoreVerticalAction?: boolean
 }
 export default function CardSidebar({
@@ -30,8 +31,9 @@ export default function CardSidebar({
   asChild,
   rightAction,
   hideMoreVerticalAction,
+  isShow,
 }: Props) {
-  const [show, setShow] = useState(false)
+  const [show, setShow] = useState(isShow ?? false)
   const [more, setMore] = useState(false)
   const [menu, setMenu] = useState<HTMLDivElement | null>(null)
   const [toggle, setToggle] = useState<HTMLDivElement | null>(null)
@@ -67,8 +69,8 @@ export default function CardSidebar({
                 show && 'rotate-180'
               )}
             />
-          </button>
             <span className="font-bold">{title}</span>
+          </button>
         </div>
         <div className="flex">
           {rightAction && rightAction}

web/containers/OpenAiKeyInput/index.tsx

@@ -30,7 +30,7 @@ const OpenAiKeyInput: React.FC = () => {
   }
 
   return (
-    <div className="mt-4">
+    <div className="my-4">
       <label
         id="thread-title"
         className="mb-2 inline-block font-bold text-gray-600 dark:text-gray-300"

web/context/FeatureToggle.tsx

@@ -4,18 +4,22 @@ interface FeatureToggleContextType {
   experimentalFeature: boolean
   ignoreSSL: boolean
   proxy: string
+  proxyEnabled: boolean
   setExperimentalFeature: (on: boolean) => void
   setIgnoreSSL: (on: boolean) => void
   setProxy: (value: string) => void
+  setProxyEnabled: (on: boolean) => void
 }
 
 const initialContext: FeatureToggleContextType = {
   experimentalFeature: false,
   ignoreSSL: false,
   proxy: '',
+  proxyEnabled: false,
   setExperimentalFeature: () => {},
   setIgnoreSSL: () => {},
   setProxy: () => {},
+  setProxyEnabled: () => {},
 }
 
 export const FeatureToggleContext =
@@ -29,8 +33,11 @@ export default function FeatureToggleWrapper({
   const EXPERIMENTAL_FEATURE = 'experimentalFeature'
   const IGNORE_SSL = 'ignoreSSLFeature'
   const HTTPS_PROXY_FEATURE = 'httpsProxyFeature'
+  const PROXY_FEATURE_ENABLED = 'proxyFeatureEnabled'
+
   const [experimentalFeature, directSetExperimentalFeature] =
     useState<boolean>(false)
+  const [proxyEnabled, directSetProxyEnabled] = useState<boolean>(false)
   const [ignoreSSL, directSetIgnoreSSL] = useState<boolean>(false)
   const [proxy, directSetProxy] = useState<string>('')
 
@@ -40,6 +47,9 @@ export default function FeatureToggleWrapper({
     )
     directSetIgnoreSSL(localStorage.getItem(IGNORE_SSL) === 'true')
     directSetProxy(localStorage.getItem(HTTPS_PROXY_FEATURE) ?? '')
+    directSetProxyEnabled(
+      localStorage.getItem(PROXY_FEATURE_ENABLED) === 'true'
+    )
   }, [])
 
   const setExperimentalFeature = (on: boolean) => {
@@ -57,15 +67,22 @@ export default function FeatureToggleWrapper({
     directSetProxy(proxy)
   }
 
+  const setProxyEnabled = (on: boolean) => {
+    localStorage.setItem(PROXY_FEATURE_ENABLED, on ? 'true' : 'false')
+    directSetProxyEnabled(on)
+  }
+
   return (
     <FeatureToggleContext.Provider
       value={{
         experimentalFeature,
         ignoreSSL,
         proxy,
+        proxyEnabled,
         setExperimentalFeature,
         setIgnoreSSL,
         setProxy,
+        setProxyEnabled,
       }}
     >
       {children}

web/hooks/useDownloadModel.ts

@@ -20,7 +20,7 @@ import { extensionManager } from '@/extension/ExtensionManager'
 import { addDownloadingModelAtom } from '@/helpers/atoms/Model.atom'
 
 export default function useDownloadModel() {
-  const { ignoreSSL, proxy } = useContext(FeatureToggleContext)
+  const { ignoreSSL, proxy, proxyEnabled } = useContext(FeatureToggleContext)
   const setDownloadState = useSetAtom(setDownloadStateAtom)
   const addDownloadingModel = useSetAtom(addDownloadingModelAtom)
 
@@ -64,9 +64,9 @@ export default function useDownloadModel() {
 
       addDownloadingModel(model)
 
-      await localDownloadModel(model, ignoreSSL, proxy)
+      await localDownloadModel(model, ignoreSSL, proxyEnabled ? proxy : '')
     },
-    [ignoreSSL, proxy, addDownloadingModel, setDownloadState]
+    [ignoreSSL, proxy, proxyEnabled, addDownloadingModel, setDownloadState]
   )
 
   const abortModelDownload = useCallback(async (model: Model) => {

web/screens/Chat/Sidebar/index.tsx

@@ -116,7 +116,7 @@ const Sidebar: React.FC = () => {
           </div>
         </div>
 
-        <CardSidebar title="Assistant">
+        <CardSidebar title="Assistant" isShow={true}>
           <div className="flex flex-col space-y-4 p-2">
             <div className="flex items-center space-x-2">
               <LogoMark width={24} height={24} />
@@ -152,6 +152,47 @@ const Sidebar: React.FC = () => {
           </div>
         </CardSidebar>
 
+        <CardSidebar title="Model" isShow={true}>
+          <div className="px-2 pt-4">
+            <DropdownListSidebar />
+
+            {componentDataRuntimeSetting.length > 0 && (
+              <div className="mt-6">
+                <CardSidebar title="Inference Parameters" asChild>
+                  <div className="px-2 py-4">
+                    <ModelSetting componentData={componentDataRuntimeSetting} />
+                  </div>
+                </CardSidebar>
+              </div>
+            )}
+
+            {componentDataEngineSetting.filter(
+              (x) => x.name === 'prompt_template'
+            ).length !== 0 && (
+              <div className="mt-4">
+                <CardSidebar title="Model Parameters" asChild>
+                  <div className="px-2 py-4">
+                    <SettingComponentBuilder
+                      componentData={componentDataEngineSetting}
+                      selector={(x: any) => x.name === 'prompt_template'}
+                    />
+                  </div>
+                </CardSidebar>
+              </div>
+            )}
+
+            {componentDataEngineSetting.length > 0 && (
+              <div className="my-4">
+                <CardSidebar title="Engine Parameters" asChild>
+                  <div className="px-2 py-4">
+                    <EngineSetting componentData={componentDataEngineSetting} />
+                  </div>
+                </CardSidebar>
+              </div>
+            )}
+          </div>
+        </CardSidebar>
+
         {experimentalFeature && (
           <div>
             {activeThread?.assistants[0]?.tools &&
@@ -312,47 +353,6 @@ const Sidebar: React.FC = () => {
               )}
           </div>
         )}
-
-        <CardSidebar title="Model">
-          <div className="px-2 pt-4">
-            <DropdownListSidebar />
-
-            {componentDataRuntimeSetting.length > 0 && (
-              <div className="mt-6">
-                <CardSidebar title="Inference Parameters" asChild>
-                  <div className="px-2 py-4">
-                    <ModelSetting componentData={componentDataRuntimeSetting} />
-                  </div>
-                </CardSidebar>
-              </div>
-            )}
-
-            {componentDataEngineSetting.filter(
-              (x) => x.name === 'prompt_template'
-            ).length !== 0 && (
-              <div className="mt-4">
-                <CardSidebar title="Model Parameters" asChild>
-                  <div className="px-2 py-4">
-                    <SettingComponentBuilder
-                      componentData={componentDataEngineSetting}
-                      selector={(x: any) => x.name === 'prompt_template'}
-                    />
-                  </div>
-                </CardSidebar>
-              </div>
-            )}
-
-            {componentDataEngineSetting.length > 0 && (
-              <div className="my-4">
-                <CardSidebar title="Engine Parameters" asChild>
-                  <div className="px-2 py-4">
-                    <EngineSetting componentData={componentDataEngineSetting} />
-                  </div>
-                </CardSidebar>
-              </div>
-            )}
-          </div>
-        </CardSidebar>
       </div>
     </div>
   )

web/screens/Settings/Advanced/index.tsx

@@ -56,6 +56,8 @@ const Advanced = () => {
     setIgnoreSSL,
     proxy,
     setProxy,
+    proxyEnabled,
+    setProxyEnabled,
   } = useContext(FeatureToggleContext)
   const [partialProxy, setPartialProxy] = useState<string>(proxy)
   const [gpuEnabled, setGpuEnabled] = useState<boolean>(false)
@@ -329,9 +331,13 @@ const Advanced = () => {
       <DataFolder />
       {/* Proxy */}
       <div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
-        <div className="flex-shrink-0 space-y-1.5">
+        <div className="flex-shrink-0 space-y-1.5 w-full">
-          <div className="flex gap-x-2">
+          <div className="flex gap-x-2 justify-between w-full">
             <h6 className="text-sm font-semibold capitalize">HTTPS Proxy</h6>
+            <Switch
+              checked={proxyEnabled}
+              onCheckedChange={(_) => setProxyEnabled(!proxyEnabled)}
+            />
           </div>
           <p className="leading-relaxed">
             Specify the HTTPS proxy or leave blank (proxy auto-configuration and
@@ -341,6 +347,7 @@ const Advanced = () => {
             placeholder={'http://<user>:<password>@<domain or IP>:<port>'}
             value={partialProxy}
             onChange={onProxyChange}
+            className="w-2/3"
           />
         </div>
       </div>