Restore browser extension message component and position below web configurations

- restore name and styling of what's now called 'BrowserExtensionNotice' [Commit]

├── apps
│   └── editor
│       └── src
│           ├── commands
│           │   ├── code-at-cursor-command
│           │   │   └── utils
│           │   │       ├── get-code-at-cursor-config.ts
│           │   │       └── perform-code-at-cursor.ts
│           │   └── generate-commit-message-commands
│           │       ├── actions
│           │       │   └── run-generate-action.ts
│           │       └── utils
│           │           └── get-commit-message-config.ts
│           ├── features
│           │   └── search-files
│           │       └── search-modes
│           │           └── perform-intelligent-search-mode.ts
│           ├── i18n
│           │   └── translations
│           │       └── common.ts
│           ├── utils
│           │   ├── ascii-tree
│           │   │   ├── ascii-tree.ts
│           │   │   ├── index.ts
│           │   │   └── utils.ts
│           │   └── show-no-configurations-warning.ts
│           └── views
│               ├── prompt
│               │   ├── backend
│               │   │   └── message-handlers
│               │   │       ├── handle-at-sign-quick-pick
│               │   │       │   └── handle-at-sign-quick-pick.ts
│               │   │       ├── handle-autofill.ts
│               │   │       └── utils
│               │   │           └── intelligent-update-utils.ts
│               │   └── frontend
│               │       ├── Main
│               │       │   └── MainView
│               │       │       └── MainView.tsx
│               │       └── Prompt.tsx
│               └── settings
│                   └── helpers
│                       └── open-settings.ts
└── packages
    └── ui
        └── src
            ├── components
            │   └── editor
            │       ├── common
            │       │   └── TextButton
            │       │       └── TextButton.tsx
            │       └── prompt
            │           └── BrowserExtensionMessage
            │               ├── BrowserExtensionMessage.module.scss
            │               ├── BrowserExtensionMessage.stories.tsx
            │               ├── BrowserExtensionMessage.tsx
            │               └── index.ts
            └── styles
                └── foundation
                    └── _colors.scss

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.module.scss

@@ -16,16 +16,3 @@
     margin: 0 10px;
   }
 }
-
-.notices {
-  display: flex;
-  flex-direction: column;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
-  overflow: hidden;
-  margin: 0 20px;
-
-  :global([data-modern-ui='true']) & {
-    margin: 0 18px;
-  }
-}

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

@@ -10,7 +10,7 @@ import { EditFormat } from '@shared/types/edit-format'
 import { TARGET, Target } from '@shared/types/mode'
 import { ApiPromptType, WebPromptType } from '@shared/types/prompt-types'
 import { Scrollable as UiScrollable } from '@ui/components/editor/common/Scrollable'
-import { BrowserExtensionNotice as UiBrowserExtensionNotice } from '@ui/components/editor/prompt/BrowserExtensionNotice'
+import { BrowserExtensionMessage as UiBrowserExtensionMessage } from '@ui/components/editor/prompt/BrowserExtensionMessage'
 import { ApiConfiguration } from '@/views/prompt/types/messages'
 import { use_last_choice_tooltip } from './hooks/use-last-choice-tooltip'
 import { Header } from './components/Header'
@@ -364,72 +364,70 @@ export const MainView: React.FC<Props> = (props) => {
             />
           </div>
 
-          <div className={styles['notices']}>
-            <UiPromptNotice
-              warning={
-                context_is_empty_warning
-                  ? t('common.context-is-empty')
-                  : undefined
-              }
-              token_count={props.selected_files_token_count}
-              files_count={
-                context_is_empty_warning
-                  ? undefined
-                  : props.selected_files.length
-              }
-              translations={{
-                attaching_files: t('selected-files.attaching-files')
-              }}
-            />
-            {props.target == TARGET.WEB && !props.is_connected && (
-              <UiBrowserExtensionNotice />
-            )}
-          </div>
+          <UiPromptNotice
+            warning={
+              context_is_empty_warning
+                ? t('common.context-is-empty')
+                : undefined
+            }
+            token_count={props.selected_files_token_count}
+            files_count={
+              context_is_empty_warning ? undefined : props.selected_files.length
+            }
+            translations={{
+              attaching_files: t('selected-files.attaching-files')
+            }}
+          />
 
           <UiSeparator height={6} />
 
-          {props.target == TARGET.WEB && props.is_connected && (
-            <UiConfigurations
-              configurations={web_configurations}
-              disable_invocation={
-                context_is_empty_warning || !props.is_connected
-              }
-              on_create={(params) => {
-                props.on_create_web_configuration(params)
-              }}
-              on_configuration_click={(id) => {
-                props.initialize_chats({
-                  web_configuration_name: id,
-                  show_quick_pick: false
-                })
-              }}
-              on_edit={(id) => props.on_web_configuration_edit(id)}
-              on_reorder={(reordered) => {
-                const new_web_configurations = reordered.map((c) => {
-                  return props.web_configurations.find(
-                    (p, i) => (p.name ?? `unnamed-${i}`) == c.id
-                  )!
-                })
-                props.on_web_configurations_reorder(new_web_configurations)
-              }}
-              on_delete={(id) => {
-                props.on_delete_web_configuration(id)
-              }}
-              on_toggle_pinned={(id) => {
-                props.on_toggle_web_configuration_pinned(id)
-              }}
-              selected_configuration_id={props.selected_web_configuration_name}
-              translations={{
-                empty: t('configurations.empty'),
-                add_new: t('action.add-new'),
-                pin: t('action.pin'),
-                unpin: t('action.unpin'),
-                insert: t('action.insert-configuration'),
-                edit: t('action.edit'),
-                delete: t('action.delete')
-              }}
-            />
-          )}
+          {props.target == TARGET.WEB &&
+            (props.is_connected ? (
+              <UiConfigurations
+                configurations={web_configurations}
+                disable_invocation={
+                  context_is_empty_warning || !props.is_connected
+                }
+                on_create={(params) => {
+                  props.on_create_web_configuration(params)
+                }}
+                on_configuration_click={(id) => {
+                  props.initialize_chats({
+                    web_configuration_name: id,
+                    show_quick_pick: false
+                  })
+                }}
+                on_edit={(id) => props.on_web_configuration_edit(id)}
+                on_reorder={(reordered) => {
+                  const new_web_configurations = reordered.map((c) => {
+                    return props.web_configurations.find(
+                      (p, i) => (p.name ?? `unnamed-${i}`) == c.id
+                    )!
+                  })
+                  props.on_web_configurations_reorder(new_web_configurations)
+                }}
+                on_delete={(id) => {
+                  props.on_delete_web_configuration(id)
+                }}
+                on_toggle_pinned={(id) => {
+                  props.on_toggle_web_configuration_pinned(id)
+                }}
+                selected_configuration_id={
+                  props.selected_web_configuration_name
+                }
+                translations={{
+                  empty: t('configurations.empty'),
+                  add_new: t('action.add-new'),
+                  pin: t('action.pin'),
+                  unpin: t('action.unpin'),
+                  insert: t('action.insert-configuration'),
+                  edit: t('action.edit'),
+                  delete: t('action.delete')
+                }}
+              />
+            ) : (
+              <UiBrowserExtensionMessage />
+            ))}
 
           {props.target == TARGET.API && (
             <UiConfigurations

…otice/BrowserExtensionNotice.module.scss …sage/BrowserExtensionMessage.module.scsspackages/ui/src/components/editor/prompt/BrowserExtensionNotice/BrowserExtensionNotice.module.scss renamed to packages/ui/src/components/editor/prompt/BrowserExtensionMessage/BrowserExtensionMessage.module.scss packages/ui/src/components/editor/prompt/BrowserExtensionNotice/BrowserExtensionNotice.module.scss renamed to packages/ui/src/components/editor/prompt/BrowserExtensionMessage/BrowserExtensionMessage.module.scss

@@ -3,10 +3,16 @@
   padding: 4px 7px;
   background: linear-gradient(
     135deg,
-    var(--cwc-bg-blue) 0%,
-    var(--cwc-bg-green) 100%
+    rgba(255, 0, 221, 0.1) 0%,
+    rgba(37, 94, 209, 0.1) 100%
   );
-  color: var(--cwc-text-color);
+  color: var(--vscode-inputOption-activeForeground);
+  border-radius: 6px;
+  margin: 0 20px;
+
+  :global([data-modern-ui='true']) & {
+    margin: 0 18px;
+  }
 }
 
 .heading {

packages/ui/src/components/editor/prompt/BrowserExtensionMessage/BrowserExtensionMessage.stories.tsx

@@ -0,0 +1,7 @@
+import { BrowserExtensionMessage } from './BrowserExtensionMessage'
+
+export default {
+  component: BrowserExtensionMessage
+}
+
+export const Primary = () => <BrowserExtensionMessage />

…tensionNotice/BrowserExtensionNotice.tsx …nsionMessage/BrowserExtensionMessage.tsxpackages/ui/src/components/editor/prompt/BrowserExtensionNotice/BrowserExtensionNotice.tsx renamed to packages/ui/src/components/editor/prompt/BrowserExtensionMessage/BrowserExtensionMessage.tsx packages/ui/src/components/editor/prompt/BrowserExtensionNotice/BrowserExtensionNotice.tsx renamed to packages/ui/src/components/editor/prompt/BrowserExtensionMessage/BrowserExtensionMessage.tsx

@@ -1,7 +1,7 @@
 import { use_compacting } from '@shared/hooks/use-compacting'
-import styles from './BrowserExtensionNotice.module.scss'
+import styles from './BrowserExtensionMessage.module.scss'
 
-export const BrowserExtensionNotice: React.FC = () => {
+export const BrowserExtensionMessage: React.FC = () => {
   const { container_ref, compact_step } = use_compacting()
 
   return (

packages/ui/src/components/editor/prompt/BrowserExtensionMessage/index.ts

@@ -0,0 +1 @@
+export * from './BrowserExtensionMessage'

packages/ui/src/components/editor/prompt/BrowserExtensionNotice/BrowserExtensionNotice.stories.tsx

@@ -4,6 +4,13 @@
   align-items: center;
   height: var(--height);
   padding: 0 8px 0 5px;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  margin: 0 20px;
+
+  :global([data-modern-ui='true']) & {
+    margin: 0 18px;
+  }
 }
 
 .warning {