Refactor prompt field placeholder rendering and relocate context empty warning to main view

- the placeholder text doesn't wrap around close button, tabs the same way as the actual value
- 'context is empty' should not be integrated with 'attaching...' but shown as a separate status bar above the prompt field
- placeholder should be placed in a mirrored container so that it doesn't interfere with the cursor placement

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       └── Main
│                           └── MainView
│                               ├── MainView.tsx
│                               └── components
│                                   ├── BrowserConnectionStatus
│                                   │   └── BrowserConnectionStatus.tsx
│                                   └── PromptAttachments
│                                       └── PromptAttachments.tsx
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── common
                        └── prompts
                            └── PromptField
                                ├── PromptField.module.scss
                                └── PromptField.tsx

Author: robertpiosik

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

@@ -5,6 +5,7 @@ import { PromptAttachments } from './components/PromptAttachments'
 import { Separator as UiSeparator } from '@ui/components/editor/prompt/Separator'
 import { WebConfiguration } from '@shared/types/web-configuration'
 import { Responses as UiResponses } from '@ui/components/editor/prompt/Responses'
+import { StatusBar as UiStatusBar } from '@ui/components/editor/prompt/StatusBar'
 import { ResponseHistoryItem } from '@shared/types/response-history-item'
 import { EditFormat } from '@shared/types/edit-format'
 import { TARGET, Target } from '@shared/types/mode'
@@ -260,6 +261,17 @@ export const MainView: React.FC<Props> = (props) => {
           }}
         />
 
+        {context_is_empty_warning && (
+          <>
+            <UiStatusBar
+              theme="warning"
+              icon="codicon-warning"
+              label={t('common.context-is-empty')}
+            />
+            <UiSeparator height={4} />
+          </>
+        )}
+
         <UiSeparator height={2} />
 
         {props.response_history.length > 0 && (
@@ -342,8 +354,8 @@ export const MainView: React.FC<Props> = (props) => {
                   ? 'blue'
                   : 'purple'
                 : props.api_prompt_type == 'edit-files'
-                ? 'blue'
-                : 'purple'
+                  ? 'blue'
+                  : 'purple'
             }
             on_paste_image={props.on_paste_image}
             on_open_image={props.on_open_image}
@@ -403,13 +415,10 @@ export const MainView: React.FC<Props> = (props) => {
                 ? 'blue'
                 : 'purple'
               : props.api_prompt_type == 'edit-files'
-              ? 'blue'
-              : 'purple'
+                ? 'blue'
+                : 'purple'
           }
           translations={{
-            warning: context_is_empty_warning
-              ? t('common.context-is-empty')
-              : undefined,
             attaching_file: t('selected-files.attaching-file'),
             attaching_files: t('selected-files.attaching-files')
           }}

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

@@ -7,46 +7,31 @@ type Props = {
   files_count?: number
   theme?: 'default' | 'warning' | 'success' | 'error' | 'blue' | 'purple'
   translations: {
-    warning?: string
     attaching_file: string
     attaching_files: string
   }
 }
 
 export const PromptAttachments: React.FC<Props> = (props) => {
-  if (!props.translations.warning && props.files_count === undefined) {
-    return null
-  }
+  
 
   const attaching_files_label = (
     props.files_count == 1
       ? props.translations.attaching_file
       : props.translations.attaching_files
-  ).replace('{count}', String(props.files_count))
+  ).replace('{count}', String(props.files_count || 0))
 
   return (
-    <>
-      {props.translations.warning && (
-        <StatusBar
-          placement="bottom"
-          theme="warning"
-          icon="codicon-warning"
-          label={props.translations.warning}
-        />
-      )}
-      {props.files_count !== undefined && (
-        <StatusBar
-          placement="bottom"
-          theme={props.theme ?? 'default'}
-          icon="codicon-attach"
-          label={attaching_files_label}
-          description={
-            (props.token_count ?? 0) > 0
-              ? display_token_count(props.token_count ?? 0)
-              : undefined
-          }
-        />
-      )}
-    </>
+    <StatusBar
+      placement="bottom"
+      theme={props.theme ?? 'default'}
+      icon="codicon-attach"
+      label={attaching_files_label}
+      description={
+        (props.token_count ?? 0) > 0
+          ? display_token_count(props.token_count ?? 0)
+          : undefined
+      }
+    />
   )
 }

packages/ui/src/components/editor/common/prompts/PromptField/PromptField.module.scss

@@ -43,6 +43,16 @@
   position: relative;
 }
 
+.placeholder-mirror {
+  position: absolute;
+    width: 100%;
+}
+
+.placeholder-text {
+  padding: var(--padding);
+  color: var(--vscode-input-placeholderForeground);
+}
+
 .top-right {
   float: right;
   display: flex;
@@ -102,19 +112,6 @@
     outline: none;
   }
 
-  &--empty::before {
-    content: attr(data-placeholder);
-    position: absolute;
-    color: var(--vscode-input-placeholderForeground);
-    pointer-events: none;
-    padding-right: 7px;
-  }
-
-  &--empty::selection,
-  &--empty *::selection {
-    background-color: transparent;
-  }
-
   & [data-type='ghost-text']::before {
     content: '\200B';
   }

packages/ui/src/components/editor/common/prompts/PromptField/PromptField.tsx

@@ -873,6 +873,43 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
         onClick={() => input_ref.current?.focus()}
       >
         <div className={styles['input-wrapper']}>
+          {!props.value && (
+            <div className={styles['placeholder-mirror']}>
+              <div className={styles['top-right']} style={{ visibility: 'hidden' }}>
+                {has_content && props.prompt_token_count > 250 && (
+                  <div className={styles['top-right__prompt-token-count']}>
+                    {display_token_count(props.prompt_token_count)}
+                  </div>
+                )}
+                {props.tabs_count > 1 && (
+                  <div
+                    className={cn(
+                      styles['top-right__clear-button'],
+                      'codicon',
+                      'codicon-close-small'
+                    )}
+                  />
+                )}
+              </div>
+              {props.tabs_count > 1 ? (
+                <div className={styles.tabs} style={{ visibility: 'hidden' }}>
+                  {tab_items.map((item) => (
+                    <div key={item.id} className={styles.tabs__tab} />
+                  ))}
+                  <div
+                    className={cn(styles.tabs__tab, styles['tabs__tab--new'])}
+                  />
+                </div>
+              ) : props.tabs_count === 1 ? (
+                <div className={styles.tabs} style={{ visibility: 'hidden' }}>
+                  <div
+                    className={cn(styles.tabs__tab, styles['tabs__tab--new'])}
+                  />
+                </div>
+              ) : null}
+              <div className={styles['placeholder-text']}>{placeholder}</div>
+            </div>
+          )}
           <div className={styles['top-right']}>
             {has_content && props.prompt_token_count > 250 && (
               <div className={styles['top-right__prompt-token-count']}>
@@ -990,7 +1027,6 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
             className={cn(styles.input, {
               [styles['input--empty']]: !props.value
             })}
-            data-placeholder={placeholder}
           />
         </div>