fix: not able to update model setting in local api (#2687)

Signed-off-by: James <[email protected]> Co-authored-by: James <[email protected]>
janhq · Apr 11, 2024 · 3deaa8f · 3deaa8f
1 parent 02c49e7
commit 3deaa8f
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 104 deletions.
diff --git a/web/containers/Checkbox/index.tsx b/web/containers/Checkbox/index.tsx
@@ -14,7 14,7 @@ import { InfoIcon } from 'lucide-react'
 type Props = {
  name: string
  title: string
- enabled?: boolean
  disabled?: boolean
  description: string
  checked: boolean
  onValueChanged?: (e: string | number | boolean) => void
@@ -23,7 23,7 @@ type Props = {
 const Checkbox: React.FC<Props> = ({
  title,
  checked,
- enabled = true,
  disabled = false,
  description,
  onValueChanged,
 }) => {
@@ -52,7 52,7 @@ const Checkbox: React.FC<Props> = ({
  <Switch
  checked={checked}
  onCheckedChange={onCheckedChange}
- disabled={!enabled}
  disabled={disabled}
  />
  </div>
  )

diff --git a/web/containers/ModelConfigInput/index.tsx b/web/containers/ModelConfigInput/index.tsx
@@ -11,7 11,7 @@ import { InfoIcon } from 'lucide-react'
 
 type Props = {
  title: string
- enabled?: boolean
  disabled?: boolean
  name: string
  description: string
  placeholder: string
@@ -21,7 21,7 @@ type Props = {
 
 const ModelConfigInput: React.FC<Props> = ({
  title,
- enabled = true,
  disabled = false,
  value,
  description,
  placeholder,
@@ -48,7 48,7 @@ const ModelConfigInput: React.FC<Props> = ({
  placeholder={placeholder}
  onChange={(e) => onValueChanged?.(e.target.value)}
  value={value}
- disabled={!enabled}
  disabled={disabled}
  />
  </div>
 )

diff --git a/web/containers/SliderRightPanel/index.tsx b/web/containers/SliderRightPanel/index.tsx
@@ -17,7 17,7 @@ import { useClickOutside } from '@/hooks/useClickOutside'
 type Props = {
  name: string
  title: string
- enabled: boolean
  disabled: boolean
  description: string
  min: number
  max: number
@@ -28,7 28,7 @@ type Props = {
 
 const SliderRightPanel: React.FC<Props> = ({
  title,
- enabled,
  disabled,
  min,
  max,
  step,
@@ -65,7 65,7 @@ const SliderRightPanel: React.FC<Props> = ({
  min={min}
  max={max}
  step={step}
- disabled={!enabled}
  disabled={disabled}
  />
  <div className="relative mt-2 flex items-center justify-between text-gray-400">
  <p className="text-sm">{min}</p>
@@ -80,7 80,7 @@ const SliderRightPanel: React.FC<Props> = ({
  min={min}
  max={max}
  value={String(value)}
- disabled={!enabled}
  disabled={disabled}
  onBlur={(e) => {
  if (Number(e.target.value) > Number(max)) {
  onValueChanged?.(Number(max))

diff --git a/web/screens/Chat/EngineSetting/index.tsx b/web/screens/Chat/EngineSetting/index.tsx
@@ -1,54 1,23 @@
-import { useCallback } from 'react'
-
 import { SettingComponentProps } from '@janhq/core/.'
 
-import { useAtomValue, useSetAtom } from 'jotai'
-
-import { useActiveModel } from '@/hooks/useActiveModel'
-import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
-
 import SettingComponentBuilder from '../../Chat/ModelSetting/SettingComponent'
 
-import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
-import {
- activeThreadAtom,
- engineParamsUpdateAtom,
-} from '@/helpers/atoms/Thread.atom'
-
 type Props = {
  componentData: SettingComponentProps[]
  onValueChanged: (key: string, value: string | number | boolean) => void
  disabled?: boolean
 }
 
-const EngineSetting: React.FC<Props> = ({ componentData }) => {
- const isLocalServerRunning = useAtomValue(serverEnabledAtom)
- const activeThread = useAtomValue(activeThreadAtom)
-
- const { stopModel } = useActiveModel()
- const { updateModelParameter } = useUpdateModelParameters()
-
- const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)
-
- const onValueChanged = useCallback(
- (key: string, value: string | number | boolean) => {
- if (!activeThread) return
-
- setEngineParamsUpdate(true)
- stopModel()
-
- updateModelParameter(activeThread, {
- params: { [key]: value },
- })
- },
- [activeThread, setEngineParamsUpdate, stopModel, updateModelParameter]
- )
-
- return (
- <SettingComponentBuilder
- componentProps={componentData}
- enabled={!isLocalServerRunning}
- onValueUpdated={onValueChanged}
- />
- )
-}
 const EngineSetting: React.FC<Props> = ({
  componentData,
  onValueChanged,
  disabled = false,
 }) => (
  <SettingComponentBuilder
  componentProps={componentData}
  disabled={disabled}
  onValueUpdated={onValueChanged}
  />
 )
 
 export default EngineSetting
diff --git a/web/screens/Chat/ModelSetting/SettingComponent.tsx b/web/screens/Chat/ModelSetting/SettingComponent.tsx
@@ -11,13 11,13 @@ import SliderRightPanel from '@/containers/SliderRightPanel'
 
 type Props = {
  componentProps: SettingComponentProps[]
- enabled?: boolean
  disabled?: boolean
  onValueUpdated: (key: string, value: string | number | boolean) => void
 }
 
 const SettingComponent: React.FC<Props> = ({
  componentProps,
- enabled = true,
  disabled = false,
  onValueUpdated,
 }) => {
  const components = componentProps.map((data) => {
@@ -35,7 35,7 @@ const SettingComponent: React.FC<Props> = ({
  step={step}
  value={value}
  name={data.key}
- enabled={enabled}
  disabled={disabled}
  onValueChanged={(value) => onValueUpdated(data.key, value)}
  />
  )
@@ -47,7 47,7 @@ const SettingComponent: React.FC<Props> = ({
  return (
  <ModelConfigInput
  title={data.title}
- enabled={enabled}
  disabled={disabled}
  key={data.key}
  name={data.key}
  description={data.description}
@@ -63,7 63,7 @@ const SettingComponent: React.FC<Props> = ({
  return (
  <Checkbox
  key={data.key}
- enabled={enabled}
  disabled={disabled}
  name={data.key}
  description={data.description}
  title={data.title}

diff --git a/web/screens/Chat/ModelSetting/index.tsx b/web/screens/Chat/ModelSetting/index.tsx
@@ -1,49 1,25 @@
-import React, { useCallback } from 'react'
 import React from 'react'
 
 import { SettingComponentProps } from '@janhq/core/.'
 
-import { useAtomValue } from 'jotai'
-
-import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
-
 import SettingComponentBuilder from './SettingComponent'
 
-import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
-import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
-
 type Props = {
  componentProps: SettingComponentProps[]
  onValueChanged: (key: string, value: string | number | boolean) => void
  disabled?: boolean
 }
 
-const ModelSetting: React.FC<Props> = ({ componentProps }) => {
- const isLocalServerRunning = useAtomValue(serverEnabledAtom)
- const activeThread = useAtomValue(activeThreadAtom)
- const { updateModelParameter } = useUpdateModelParameters()
-
- const onValueChanged = useCallback(
- (key: string, value: string | number | boolean) => {
- if (!activeThread) return
-
- if (key === 'stop' && typeof value === 'string') {
- updateModelParameter(activeThread, {
- params: { [key]: [value] },
- })
- } else {
- updateModelParameter(activeThread, {
- params: { [key]: value },
- })
- }
- },
- [activeThread, updateModelParameter]
- )
-
- return (
- <SettingComponentBuilder
- enabled={!isLocalServerRunning}
- componentProps={componentProps}
- onValueUpdated={onValueChanged}
- />
- )
-}
 const ModelSetting: React.FC<Props> = ({
  componentProps,
  onValueChanged,
  disabled = false,
 }) => (
  <SettingComponentBuilder
  disabled={!disabled}
  componentProps={componentProps}
  onValueUpdated={onValueChanged}
  />
 )
 
 export default React.memo(ModelSetting)
diff --git a/web/screens/Chat/Sidebar/index.tsx b/web/screens/Chat/Sidebar/index.tsx
@@ -2,7 2,7 @@ import React, { useCallback, useMemo } from 'react'
 
 import { Input, Textarea } from '@janhq/uikit'
 
-import { atom, useAtomValue } from 'jotai'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
 
 import { twMerge } from 'tailwind-merge'
 
@@ -13,8 13,11 @@ import DropdownListSidebar, {
  selectedModelAtom,
 } from '@/containers/DropdownListSidebar'
 
 import { useActiveModel } from '@/hooks/useActiveModel'
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
 
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
 import { toRuntimeParams, toSettingParams } from '@/utils/modelParam'
 
@@ -27,6 30,7 @@ import PromptTemplateSetting from './PromptTemplateSetting'
 
 import {
  activeThreadAtom,
  engineParamsUpdateAtom,
  getActiveThreadModelParamsAtom,
 } from '@/helpers/atoms/Thread.atom'
 
@@ -39,6 43,10 @@ const Sidebar: React.FC = () => {
  const selectedModel = useAtomValue(selectedModelAtom)
  const { updateThreadMetadata } = useCreateNewThread()
 
  const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)
  const { stopModel } = useActiveModel()
  const { updateModelParameter } = useUpdateModelParameters()
 
  const modelSettings = useMemo(() => {
  const modelRuntimeParams = toRuntimeParams(activeModelParams)
 
@@ -96,6 104,22 @@ const Sidebar: React.FC = () => {
  [activeThread, updateThreadMetadata]
  )
 
  const onValueChanged = useCallback(
  (key: string, value: string | number | boolean) => {
  if (!activeThread) {
  return
  }
 
  setEngineParamsUpdate(true)
  stopModel()
 
  updateModelParameter(activeThread, {
  params: { [key]: value },
  })
  },
  [activeThread, setEngineParamsUpdate, stopModel, updateModelParameter]
  )
 
  return (
  <div
  className={twMerge(
@@ -170,7 194,10 @@ const Sidebar: React.FC = () => {
  {modelSettings.length > 0 && (
  <CardSidebar title="Inference Parameters" asChild>
  <div className="px-2 py-4">
- <ModelSetting componentProps={modelSettings} />
  <ModelSetting
  componentProps={modelSettings}
  onValueChanged={onValueChanged}
  />
  </div>
  </CardSidebar>
  )}
@@ -188,7 215,10 @@ const Sidebar: React.FC = () => {
  {engineSettings.length > 0 && (
  <CardSidebar title="Engine Parameters" asChild>
  <div className="px-2 py-4">
- <EngineSetting componentData={engineSettings} />
  <EngineSetting
  componentData={engineSettings}
  onValueChanged={onValueChanged}
  />
  </div>
  </CardSidebar>
  )}