Refactor Separator component to use inline styles, update UI spacing, and remove the collapsible Options section from the web configuration form

- make the prop accepted separator height flexible (number)
- disable collapsing 'options'

Author: robertpiosik

apps/editor/src/views/panel/frontend/Main/MainView/MainView.tsx

@@ -442,7 +442,7 @@ export const MainView: React.FC<Props> = (props) => {
 
         {props.mode == MODE.WEB && (
           <>
-            <UiSeparator height={8} />
+            <UiSeparator height={6} />
             <UiConfigurations
               configurations={web_configurations}
               disable_invocation={!!warning || !props.is_connected}
@@ -497,7 +497,7 @@ export const MainView: React.FC<Props> = (props) => {
 
         {props.mode == MODE.API && (
           <>
-            <UiSeparator height={8} />
+            <UiSeparator height={6} />
             <UiConfigurations
               configurations={api_configurations_ui}
               disable_invocation={!!warning}

apps/editor/src/views/shared/components/EditWebConfigurationForm/EditWebConfigurationForm.tsx

@@ -49,9 +49,6 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
   const [is_sampling_collapsed, set_is_sampling_collapsed] = useState(
     props.web_configuration.temperature === undefined && props.web_configuration.top_p === undefined
   )
-  const [is_options_collapsed, set_is_options_collapsed] = useState(
-    (props.web_configuration.options || []).length == 0
-  )
 
   const chatbot_config = chatbot ? CHATBOTS[chatbot] : undefined
   const models = useMemo(() => chatbot_config?.models || {}, [chatbot_config])
@@ -384,10 +381,6 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
           Object.keys(chatbot_config?.supported_options || {}).length > 0 && (
             <UiFieldset
               label="Options"
-              is_collapsed={is_options_collapsed}
-              on_toggle_collapsed={() =>
-                set_is_options_collapsed(!is_options_collapsed)
-              }
             >
               <div className={styles.options}>
                 {Object.entries(chatbot_config!.supported_options!).map(

packages/ui/src/components/editor/panel/Separator/Separator.module.scss

@@ -1,31 +1,3 @@
 .separator {
   flex-shrink: 0;
-
-  &--4 {
-    height: 4px;
-  }
-
-  &--8 {
-    height: 8px;
-  }
-
-  &--12 {
-    height: 12px;
-  }
-
-  &--14 {
-    height: 14px;
-  }
-
-  &--16 {
-    height: 16px;
-  }
-
-  &--10 {
-    height: 10px;
-  }
-
-  &--24 {
-    height: 24px;
-  }
 }

packages/ui/src/components/editor/panel/Separator/Separator.tsx

@@ -1,16 +1,16 @@
 import styles from './Separator.module.scss'
-import cn from 'classnames'
 
 export namespace Separator {
   export type Props = {
-    height: 4 | 8 | 10 | 12 | 14 | 16 | 24
+    height: number
   }
 }
 
 export const Separator: React.FC<Separator.Props> = (props) => {
   return (
     <div
-      className={cn(styles.separator, styles[`separator--${props.height}`])}
+      className={styles.separator}
+      style={{ height: `${props.height}px` }}
     />
   )
 }