fix: broken stop word input - support multiple stop words (#2762)

web/hooks/useUpdateModelParameters.ts

@@ -34,13 +34,10 @@ export default function useUpdateModelParameters() {
 
   const updateModelParameter = useCallback(
     async (thread: Thread, settings: UpdateModelParameter) => {
-      const params = settings.modelId
+      const toUpdateSettings = processStopWords(settings.params ?? {})
-        ? settings.params
+      const updatedModelParams = settings.modelId
-        : { ...activeModelParams, ...settings.params }
+        ? toUpdateSettings
-
+        : { ...activeModelParams, ...toUpdateSettings }
-      const updatedModelParams: ModelParams = {
-        ...params,
-      }
 
       // update the state
       setThreadModelParams(thread.id, updatedModelParams)
@@ -73,5 +70,13 @@ export default function useUpdateModelParameters() {
     [activeModelParams, selectedModel, setThreadModelParams]
   )
 
+  const processStopWords = (params: ModelParams): ModelParams => {
+    if ('stop' in params && typeof params['stop'] === 'string') {
+      // Input as string but stop words accept an array of strings (space as separator)
+      params['stop'] = (params['stop'] as string).split(' ')
+    }
+    return params
+  }
+
   return { updateModelParameter }
 }

web/utils/componentSettings.ts

@@ -10,12 +10,13 @@ export const getConfigurationsData = (
 
   Object.keys(settings).forEach((key: string) => {
     const componentSetting = presetConfiguration[key]
+    const keySetting = settings[key as keyof typeof settings]
 
     if (!componentSetting) {
       return
     }
     if ('slider' === componentSetting.controllerType) {
-      const value = Number(settings[key as keyof typeof settings])
+      const value = Number(keySetting)
       if ('value' in componentSetting.controllerProps) {
         componentSetting.controllerProps.value = value
         if ('max' in componentSetting.controllerProps) {
@@ -36,14 +37,29 @@ export const getConfigurationsData = (
         }
       }
     } else if ('input' === componentSetting.controllerType) {
-      const value = settings[key as keyof typeof settings] as string
+      const value =
-      const placeholder = settings[key as keyof typeof settings] as string
+        typeof keySetting === 'object' && Array.isArray(keySetting)
+          ? // Support array input with text input
+            // TODO: remove this when we support muti-tag input
+            (keySetting as string[])
+              .filter((e) => e.trim() !== '')
+              .join(' ')
+              .concat(
+                // Keep last space to allow user to add new array element
+                (keySetting as string[])[
+                  (keySetting as string[]).length - 1
+                ] === ''
+                  ? ' '
+                  : ''
+              )
+          : (keySetting as string)
+      const placeholder = keySetting as string
       if ('value' in componentSetting.controllerProps)
         componentSetting.controllerProps.value = value
       if ('placeholder' in componentSetting.controllerProps)
         componentSetting.controllerProps.placeholder = placeholder
     } else if ('checkbox' === componentSetting.controllerType) {
-      const checked = settings[key as keyof typeof settings] as boolean
+      const checked = keySetting as boolean
 
       if ('value' in componentSetting.controllerProps)
         componentSetting.controllerProps.value = checked