Centralize preset and chat submission validation in the backend, removing UI-level disabling and providing explicit user warnings

Author: robertpiosik

packages/ui/src/components/editor/ChatInput/ChatInput.tsx

@@ -75,7 +75,7 @@ export const ChatInput: React.FC<Props> = (props) => {
     }
   }, [props.caret_position_to_set])
 
- useEffect(() => {
+  useEffect(() => {
     if (textarea_ref.current) {
       textarea_ref.current.focus()
     }
@@ -168,7 +168,6 @@ export const ChatInput: React.FC<Props> = (props) => {
     with_control?: boolean
   ) => {
     e.stopPropagation()
-    if (is_submit_disabled) return
     if (with_control || e.ctrlKey || e.metaKey) {
       props.on_submit_with_control()
     } else {
@@ -177,12 +176,6 @@ export const ChatInput: React.FC<Props> = (props) => {
     set_history_index(-1)
   }
 
-  const is_submit_disabled =
-    (!props.is_connected && props.is_web_mode) ||
-    (!props.is_in_code_completions_mode && !props.value.trim()) ||
-    (props.is_in_code_completions_mode &&
-      (props.has_active_selection || !props.has_active_editor))
-
   const get_disabled_title = () => {
     if (props.is_in_code_completions_mode) {
       if (props.has_active_selection) {
@@ -436,7 +429,6 @@ export const ChatInput: React.FC<Props> = (props) => {
                 styles['footer__right__button--secondary']
               ])}
               onClick={(e) => handle_submit(e, true)}
-              disabled={is_submit_disabled}
             >
               {navigator.userAgent.toUpperCase().indexOf('MAC') >= 0 ? (
                 <Icon variant="COMMAND" />
@@ -450,7 +442,6 @@ export const ChatInput: React.FC<Props> = (props) => {
             <button
               className={styles.footer__right__button}
               onClick={handle_submit}
-              disabled={is_submit_disabled}
             >
               <Icon variant="ENTER" />
               <span>{props.translations.use_last_choice}</span>

packages/ui/src/components/editor/Presets/Presets.module.scss

@@ -36,14 +36,6 @@
       }
     }
 
-    &--disabled {
-      cursor: default !important;
-
-      .presets__item__left__text {
-        opacity: 0.7;
-      }
-    }
-
     &--highlighted {
       background-color: var(--vscode-list-inactiveSelectionBackground);
 
@@ -89,6 +81,12 @@
         }
       }
 
+      &__collapse-icon {
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+
       &__text {
         overflow: hidden;
         text-overflow: ellipsis;

packages/ui/src/components/editor/Presets/Presets.tsx

@@ -161,13 +161,10 @@ export const Presets: React.FC<Presets.Props> = (props) => {
           <div
             className={cn(styles.presets__item, {
               [styles['presets__item--ungrouped']]: true,
-              [styles['presets__item--highlighted']]:
-                props.selected_preset_name == 'Ungrouped',
-              [styles['presets__item--disabled']]: get_is_ungrouped_disabled()
+              [styles['presets__item--highlighted']]: props.selected_preset_name == 'Ungrouped'
             })}
             onClick={() => {
-              if (get_is_ungrouped_disabled()) return
-              props.on_group_click('Ungrouped')
+              props.on_group_click('Ungrouped') // disabled check will be handled by the consumer
             }}
             role="button"
             title={get_ungrouped_title()}
@@ -181,6 +178,9 @@ export const Presets: React.FC<Presets.Props> = (props) => {
               >
                 <span className="codicon codicon-gripper" />
               </div>
+              <div className={styles['presets__item__left__collapse-icon']}>
+                <span className={'codicon codicon-dash'} />
+              </div>
               <div className={styles.presets__item__left__text}>Ungrouped</div>
             </div>
           </div>
@@ -307,17 +307,12 @@ export const Presets: React.FC<Presets.Props> = (props) => {
                 key={preset.name}
                 className={cn(styles.presets__item, {
                   [styles['presets__item--highlighted']]:
-                    props.selected_preset_name == preset.name,
-                  [styles['presets__item--disabled']]: preset.chatbot
-                    ? get_is_preset_disabled(preset)
-                    : get_is_group_disabled()
+                    props.selected_preset_name == preset.name
                 })}
                 onClick={() => {
                   if (preset.chatbot) {
-                    if (get_is_preset_disabled(preset)) return
                     props.on_preset_click(preset.name)
                   } else {
-                    if (get_is_group_disabled()) return
                     props.on_group_click(preset.name)
                   }
                 }}
@@ -347,6 +342,28 @@ export const Presets: React.FC<Presets.Props> = (props) => {
                       <Icon variant={chatbot_to_icon[preset.chatbot]} />
                     </div>
                   )}
+                  {!preset.chatbot && (
+                    <div
+                      className={styles['presets__item__left__collapse-icon']}
+                      style={{ cursor: 'pointer' }}
+                      title={
+                        preset.is_collapsed
+                          ? props.translations.expand_group
+                          : props.translations.collapse_group
+                      }
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        props.on_toggle_group_collapsed(preset.name)
+                      }}
+                    >
+                      <span
+                        className={cn('codicon', {
+                          'codicon-chevron-down': preset.is_collapsed,
+                          'codicon-chevron-up': !preset.is_collapsed
+                        })}
+                      />
+                    </div>
+                  )}
                   <div className={styles.presets__item__left__text}>
                     <span>{display_name}</span>
                     <span>{get_subtitle()}</span>
@@ -359,22 +376,6 @@ export const Presets: React.FC<Presets.Props> = (props) => {
                     e.stopPropagation()
                   }}
                 >
-                  {!preset.chatbot && (
-                    <IconButton
-                      codicon_icon={
-                        preset.is_collapsed ? 'chevron-down' : 'chevron-up'
-                      }
-                      title={
-                        preset.is_collapsed
-                          ? props.translations.expand_group
-                          : props.translations.collapse_group
-                      }
-                      on_click={(e) => {
-                        e.stopPropagation()
-                        props.on_toggle_group_collapsed(preset.name)
-                      }}
-                    />
-                  )}
                   {preset.chatbot &&
                     (preset.prompt_prefix || preset.prompt_suffix) && (
                       <IconButton