Disable configuration invocation and preview when a validation warning is present

- when showing warning, configuration list items should not be invokable. Keep its actions like pinning, editing, etc. interactive.
- in configurations, when invocation is disabled, should not highlight items on hover
- in web configuration editing, 'preview' should be disabled in conditions that yield warning
- set 'disabled opacity' on label&icon when 'disabled invocation'
- don't highlight last used configuration when 'disabled invocatin'

Author: robertpiosik

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

@@ -447,12 +447,13 @@ export const MainView: React.FC<Props> = (props) => {
             <UiSeparator height={8} />
             <UiConfigurations
               configurations={web_configurations}
-              on_create={(params) =>
+              disable_invocation={!!warning}
+              on_create={(params) => {
                 props.on_create_web_configuration(
                   params?.create_on_top ? 'top' : 'bottom',
                   params?.insertion_index
                 )
-              }
+              }}
               on_configuration_click={(id) => {
                 props.initialize_chats({
                   web_configuration_name: id,
@@ -464,26 +465,26 @@ export const MainView: React.FC<Props> = (props) => {
               on_reorder={(reordered) => {
                 const new_web_configurations = reordered.map((c) => {
                   return props.web_configurations.find(
-                    (p, i) => (p.name ?? `unnamed-${i}`) === c.id
+                    (p, i) => (p.name ?? `unnamed-${i}`) == c.id
                   )!
                 })
                 props.on_web_configurations_reorder(new_web_configurations)
               }}
               on_duplicate={(id) => {
                 const idx = props.web_configurations.findIndex(
-                  (p, i) => (p.name ?? `unnamed-${i}`) === id
+                  (p, i) => (p.name ?? `unnamed-${i}`) == id
                 )
                 props.on_duplicate_web_configuration(idx)
               }}
               on_delete={(id) => {
                 const idx = props.web_configurations.findIndex(
-                  (p, i) => (p.name ?? `unnamed-${i}`) === id
+                  (p, i) => (p.name ?? `unnamed-${i}`) == id
                 )
                 props.on_delete_web_configuration(idx)
               }}
-              on_toggle_pinned={(id) =>
+              on_toggle_pinned={(id) => {
                 props.on_toggle_web_configuration_pinned(id)
-              }
+              }}
               selected_configuration_id={props.selected_web_configuration_name}
               is_collapsed={props.web_configurations_collapsed}
               on_toggle_collapsed={props.on_web_configurations_collapsed_change}
@@ -507,6 +508,7 @@ export const MainView: React.FC<Props> = (props) => {
             <UiSeparator height={8} />
             <UiConfigurations
               configurations={api_configurations_ui}
+              disable_invocation={!!warning}
               on_configuration_click={props.on_api_configuration_click}
               on_reorder={(reordered) =>
                 props.on_api_configurations_reorder(reordered)

apps/editor/src/views/panel/frontend/Panel.tsx

@@ -219,7 +219,10 @@ export const Panel = () => {
     !is_connected ||
     (!has_instructions && web_prompt_type != 'code-at-cursor') ||
     (web_prompt_type == 'code-at-cursor' &&
-      (!currently_open_file_path || !!current_selection))
+      (!currently_open_file_path || !!current_selection)) ||
+    (web_prompt_type != 'code-at-cursor' &&
+      web_prompt_type != 'no-context' &&
+      token_count == 0)
 
   const handle_apply_click = () => {
     post_message(vscode, {
@@ -499,26 +502,13 @@ export const Panel = () => {
               }
               title="Edit Web Configuration"
               header_slot={
-                <UiTextButton
-                  on_click={handle_preview_web_configuration}
-                  disabled={is_preview_disabled}
-                  title={
-                    !is_connected
-                      ? 'Unable to preview when not connected'
-                      : web_prompt_type == 'code-at-cursor' &&
-                          !currently_open_file_path
-                        ? 'Cannot preview in code completion mode without an active editor'
-                        : web_prompt_type == 'code-at-cursor' &&
-                            !!current_selection
-                          ? 'Unable to work with text selection'
-                          : !has_instructions &&
-                              web_prompt_type != 'code-at-cursor'
-                            ? 'Enter instructions to preview'
-                            : ''
-                  }
-                >
-                  Preview
-                </UiTextButton>
+                !is_preview_disabled && (
+                  <UiTextButton
+                    on_click={handle_preview_web_configuration}
+                  >
+                    Preview
+                  </UiTextButton>
+                )
               }
             >
               <EditWebConfigurationForm

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

@@ -24,6 +24,19 @@
       }
     }
 
+    &--disabled-invocation {
+      cursor: default;
+
+      &:hover {
+        background-color: unset;
+      }
+
+      .configurations__item__left__icon,
+      .configurations__item__left__text {
+        opacity: var(--disabled-opacity);
+      }
+    }
+
     &--highlighted {
       background-color: var(--vscode-list-inactiveSelectionBackground);
 

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

@@ -28,6 +28,7 @@ export namespace Configurations {
     on_edit: (id: string) => void
     on_delete: (id: string) => void
     on_duplicate: (id: string) => void
+    disable_invocation?: boolean
     is_collapsed: boolean
     on_toggle_collapsed: (is_collapsed: boolean) => void
     translations: {
@@ -57,10 +58,16 @@ export const Configurations: React.FC<Configurations.Props> = (props) => {
         key={configuration.id}
         className={cn(styles.configurations__item, {
           [styles['configurations__item--highlighted']]:
-            props.selected_configuration_id == configuration.id
+            !props.disable_invocation && props.selected_configuration_id == configuration.id,
+          [styles['configurations__item--disabled-invocation']]:
+            props.disable_invocation
         })}
-        onClick={() => props.on_configuration_click(configuration.id)}
-        role="button"
+        onClick={
+          props.disable_invocation
+            ? undefined
+            : () => props.on_configuration_click(configuration.id)
+        }
+        role={props.disable_invocation ? undefined : 'button'}
       >
         <div className={styles.configurations__item__left}>
           {!is_dragging_disabled && (