Refactor configuration items to be dimmed instead of disabled and improve autofill error handling

- on configurations, rename 'disable invocation' to 'is dimmed', keep current visuals but enable invocations
- in case [Fragment] show info notification: 'Browser not connected.'. In case of [Fragment] show 'No chatbots added yet.'. (translated)
- translate [Fragment]

├── apps
│   └── editor
│       └── src
│           ├── i18n
│           │   └── translations
│           │       └── views
│           │           └── prompt
│           │               └── handlers
│           │                   ├── handle-autofill.ts
│           │                   ├── handle-make-api-call.ts
│           │                   └── index.ts
│           └── views
│               └── prompt
│                   ├── backend
│                   │   └── message-handlers
│                   │       └── handle-autofill.ts
│                   └── frontend
│                       └── Main
│                           └── MainView
│                               └── MainView.tsx
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── prompt
                        └── Configurations
                            ├── Configurations.module.scss
                            ├── Configurations.stories.tsx
                            ├── Configurations.tsx
                            └── index.ts

Author: robertpiosik

apps/editor/src/i18n/translations/views/prompt/handlers/handle-autofill.ts

@@ -0,0 +1,20 @@
+export const translations = {
+  'views.prompt.handlers.handle-autofill.browser-not-connected': {
+    en: 'Browser not connected.',
+    pl: 'Brak połączenia z przeglądarką.',
+    'zh-cn': '浏览器未连接。',
+    ja: 'ブラウザが接続されていません。',
+    'zh-tw': '瀏覽器未連接。',
+    de: 'Browser nicht verbunden.',
+    es: 'Navegador no conectado.',
+    fr: 'Navigateur non connecté.',
+    'pt-br': 'Navegador não conectado.',
+    ru: 'Браузер не подключен.',
+    ko: '브라우저가 연결되지 않았습니다.',
+    it: 'Browser non connesso.',
+    tr: 'Tarayıcı bağlı değil.',
+    cs: 'Prohlížeč není připojen.',
+    hu: 'A böngésző nincs csatlakoztatva.',
+    bg: 'Браузърът не е свързан.'
+  }
+} as const

apps/editor/src/i18n/translations/views/prompt/handlers/index.ts

@@ -9,6 +9,7 @@ import { translations as utils } from './utils'
 import { translations as handle_template_quick_pick } from './handle-template-quick-pick'
 import { translations as handle_patch_repair } from './handle-patch-repair'
 import { translations as handle_agentic_search } from './handle-agentic-search'
+import { translations as handle_autofill } from './handle-autofill'
 
 export const translations = {
   ...handle_delete_task,
@@ -21,5 +22,6 @@ export const translations = {
   ...utils,
   ...handle_template_quick_pick,
   ...handle_patch_repair,
-  ...handle_agentic_search
+  ...handle_agentic_search,
+  ...handle_autofill
 }

apps/editor/src/views/prompt/backend/message-handlers/handle-autofill.ts

@@ -14,6 +14,7 @@ import { handle_update_last_used_web_configuration } from './handle-update-last-
 import { show_configurations_quick_pick } from '@/utils/show-configurations-quick-pick'
 import { PromptBuilder } from '@/utils/prompt-builder'
 import { t } from '@/i18n'
+import { show_incomplete_setup_warning } from '@/utils/show-missing-configuration-notification'
 
 export const handle_autofill = async (params: {
   prompt_view_provider: PromptViewProvider
@@ -23,6 +24,9 @@ export const handle_autofill = async (params: {
   if (
     !params.prompt_view_provider.websocket_server_instance.is_connected_with_browser()
   ) {
+    vscode.window.showInformationMessage(
+      t('views.prompt.handlers.handle-autofill.browser-not-connected')
+    )
     return
   }
 
@@ -34,6 +38,7 @@ export const handle_autofill = async (params: {
   })
 
   if (!resolution.web_configuration_name) {
+    show_incomplete_setup_warning('web')
     return
   }
   const resolved_web_configuration_name = resolution.web_configuration_name

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

@@ -162,7 +162,7 @@ export const MainView: React.FC<Props> = (props) => {
     (props.target == TARGET.WEB && props.web_prompt_type == 'edit-files') ||
     (props.target == TARGET.API && props.api_prompt_type == 'edit-files')
 
-  const context_is_empty_warning =
+  const is_context_empty =
     show_edit_format_selector && props.selected_files.length == 0
 
   const handle_input_change = (value: string) => {
@@ -353,7 +353,7 @@ export const MainView: React.FC<Props> = (props) => {
             props.target == TARGET.WEB &&
             (!props.is_connected || !props.web_configurations.length)
           }
-          is_action_disabled={context_is_empty_warning}
+          is_action_disabled={is_context_empty}
           value={props.instructions}
           chat_history={props.chat_history}
           on_change={handle_input_change}
@@ -392,7 +392,7 @@ export const MainView: React.FC<Props> = (props) => {
           target={props.target}
           on_target_change={(target) => props.on_target_change(target)}
           active_border_color={
-            context_is_empty_warning
+            is_context_empty
               ? 'yellow'
               : props.target == TARGET.WEB
                 ? props.web_prompt_type == 'edit-files'
@@ -453,7 +453,7 @@ export const MainView: React.FC<Props> = (props) => {
         />
       </div>
 
-      {context_is_empty_warning ? (
+      {is_context_empty ? (
         <UiStatusBar
           placement="bottom"
           theme="warning"
@@ -501,7 +501,7 @@ export const MainView: React.FC<Props> = (props) => {
       {props.target == TARGET.WEB && (
         <UiConfigurations
           configurations={web_configurations}
-          disable_invocation={context_is_empty_warning || !props.is_connected}
+          is_dimmed={is_context_empty || !props.is_connected}
           on_create={(params) => {
             props.on_create_web_configuration(params)
           }}
@@ -542,9 +542,7 @@ export const MainView: React.FC<Props> = (props) => {
       {props.target == TARGET.API && (
         <UiConfigurations
           configurations={api_configurations_ui}
-          disable_invocation={
-            context_is_empty_warning || !props.api_configurations.length
-          }
+          is_dimmed={is_context_empty || !props.api_configurations.length}
           on_configuration_click={props.on_api_configuration_click}
           on_reorder={(reordered) =>
             props.on_api_configurations_reorder(reordered)

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

@@ -32,13 +32,7 @@
       }
     }
 
-    &--disabled-invocation {
-      cursor: default;
-
-      &:hover {
-        background-color: unset;
-      }
-
+    &--dimmed {
       .configurations__item__left__icon,
       .configurations__item__left__text {
         opacity: var(--dimmed-opacity);

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

@@ -26,7 +26,7 @@ export namespace Configurations {
     }) => void
     on_edit: (id: string) => void
     on_delete: (id: string) => void
-    disable_invocation?: boolean
+    is_dimmed?: boolean
     translations: {
       empty: string
       add_new: string
@@ -55,15 +55,10 @@ export const Configurations: React.FC<Configurations.Props> = (props) => {
         className={cn(styles.configurations__item, {
           [styles['configurations__item--highlighted']]:
             active_configuration_id == configuration.id,
-          [styles['configurations__item--disabled-invocation']]:
-            props.disable_invocation
+          [styles['configurations__item--dimmed']]: props.is_dimmed
         })}
-        onClick={
-          props.disable_invocation
-            ? undefined
-            : () => props.on_configuration_click(configuration.id)
-        }
-        role={props.disable_invocation ? undefined : 'button'}
+        onClick={() => props.on_configuration_click(configuration.id)}
+        role="button"
       >
         <div className={styles.configurations__item__left}>
           {!is_dragging_disabled && (