Skip to content

Commit

Permalink
fix: expand assistant and model settings by default (janhq#2081)
Browse files Browse the repository at this point in the history 
* fix: expand assistant and model settings by default

* fix: add proxy enabled toggle
  • Loading branch information
@louis-jan
louis-jan authored Feb 19, 2024
1 parent 3af0ae1 commit 780f957
Show file tree
Hide file tree
Showing 6 changed files with 76 additions and 50 deletions.
6 changes: 4 additions & 2 deletions web/containers/CardSidebar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ interface Props {
rightAction?: ReactNode
title: string
asChild?: boolean
isShow?: boolean
hideMoreVerticalAction?: boolean
}
export default function CardSidebar({
Expand All @@ -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)
Expand Down Expand Up @@ -67,8 +69,8 @@ export default function CardSidebar({
show && 'rotate-180'
)}
/>
<span className="font-bold">{title}</span>
</button>
<span className="font-bold">{title}</span>
</div>
<div className="flex">
{rightAction && rightAction}
Expand Down
2 changes: 1 addition & 1 deletion web/containers/OpenAiKeyInput/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
17 changes: 17 additions & 0 deletions web/context/FeatureToggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand All @@ -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>('')

Expand All @@ -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) => {
Expand All @@ -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}
Expand Down
6 changes: 3 additions & 3 deletions web/hooks/useDownloadModel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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) => {
Expand Down
84 changes: 42 additions & 42 deletions web/screens/Chat/Sidebar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down Expand Up @@ -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 &&
Expand Down Expand Up @@ -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>
)
Expand Down
11 changes: 9 additions & 2 deletions web/screens/Settings/Advanced/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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 gap-x-2">
<div className="flex-shrink-0 space-y-1.5 w-full">
<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
Expand All @@ -341,6 +347,7 @@ const Advanced = () => {
placeholder={'http://<user>:<password>@<domain or IP>:<port>'}
value={partialProxy}
onChange={onProxyChange}
className="w-2/3"
/>
</div>
</div>
Expand Down

0 comments on commit 780f957

Please sign in to comment.