Implement a context selection modal that appears when the find-relevant-files mode is active and token count is zero

- set this [Fragment] only once
- current behavior: when changing prompt type to 'find relevant files' we're showing a temporary modal. Expected behavior: the shown modal is non-dismissable for as long as there are some tokens in the context.
- current behavior: when changing prompt type to 'find relevant files' we're showing a temporary modal that auto-closes after 3 seconds. Expected behavior: the modal is shown as long as token count is 0.
- modal without footer looks like this:
- [Fragment] should show 'close' button and be backround-click dismissable

Author: robertpiosik

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

@@ -81,6 +81,7 @@ type Props = {
   on_tab_delete: (index: number) => void
   missing_web_configuration?: boolean
   voice_input_push_to_talk: boolean
+  token_count: number
 }
 
 export const Main: React.FC<Props> = (props) => {
@@ -102,7 +103,6 @@ export const Main: React.FC<Props> = (props) => {
     useState<string[]>()
   const [find_relevant_files_history, set_find_relevant_files_history] =
     useState<string[]>()
-  const [token_count, set_token_count] = useState<number>(0)
   const [chat_edit_format, set_chat_edit_format] = useState<EditFormat>()
   const [api_edit_format, set_api_edit_format] = useState<EditFormat>()
   const [caret_position_to_set, set_caret_position_to_set] = useState<
@@ -138,9 +138,6 @@ export const Main: React.FC<Props> = (props) => {
           set_code_completions_history(message.code_at_cursor || [])
           set_find_relevant_files_history(message.find_relevant_files || [])
           break
-        case 'TOKEN_COUNT_UPDATED':
-          set_token_count(message.token_count)
-          break
         case 'WEB_CONFIGURATION_CREATED':
           props.on_web_configuration_edit(message.web_configuration)
           break
@@ -671,7 +668,7 @@ export const Main: React.FC<Props> = (props) => {
       on_quick_action_click={handle_quick_action_click}
       current_selection={props.current_selection}
       chat_history={current_history || []}
-      token_count={token_count}
+        token_count={props.token_count}
       web_prompt_type={props.web_prompt_type}
       api_prompt_type={props.api_prompt_type}
       context_size_warning_threshold={props.context_size_warning_threshold}

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

@@ -82,7 +82,8 @@ export const Panel = () => {
     handle_tab_change,
     handle_new_tab,
     handle_tab_delete,
-    voice_input_push_to_talk
+    voice_input_push_to_talk,
+    token_count
   } = use_panel(vscode)
 
   const {
@@ -148,27 +149,14 @@ export const Panel = () => {
   const { viewing_donations, set_viewing_donations, ...donations_state } =
     use_latest_donations()
 
-  const prev_active_prompt_type = useRef(
-    mode == MODE.WEB ? web_prompt_type : api_prompt_type
-  )
+  const active_prompt_type = mode == MODE.WEB ? web_prompt_type : api_prompt_type
+  const [is_find_files_modal_dismissed, set_is_find_files_modal_dismissed] = useState(false)
 
   useEffect(() => {
-    const active_prompt_type =
-      mode == MODE.WEB ? web_prompt_type : api_prompt_type
-
-    if (
-      active_prompt_type == 'find-relevant-files' &&
-      prev_active_prompt_type.current != 'find-relevant-files' &&
-      prev_active_prompt_type.current !== undefined
-    ) {
-      set_auto_closing_modal_data({
-        title:
-          'Context temporarily cleared, make rough selection on the file tree',
-        type: 'info'
-      })
+    if (active_prompt_type !== 'find-relevant-files' || token_count > 0) {
+      set_is_find_files_modal_dismissed(false)
     }
-    prev_active_prompt_type.current = active_prompt_type
-  }, [web_prompt_type, api_prompt_type, mode])
+  }, [active_prompt_type, token_count])
 
   if (
     ask_about_context_instructions === undefined ||
@@ -426,6 +414,7 @@ export const Panel = () => {
                 on_new_tab={handle_new_tab}
                 on_tab_delete={handle_tab_delete}
                 voice_input_push_to_talk={voice_input_push_to_talk}
+                token_count={token_count}
               />
             </div>
             <div
@@ -813,6 +802,24 @@ export const Panel = () => {
           </div>
         )}
 
+        {active_prompt_type == 'find-relevant-files' && token_count == 0 && !is_find_files_modal_dismissed && (
+          <div className={styles.slot}>
+            <UiModal
+              title="Make rough context selection"
+              icon="info"
+              on_background_click={() => set_is_find_files_modal_dismissed(true)}
+              footer_slot={
+                <UiButton
+                  is_secondary
+                  on_click={() => set_is_find_files_modal_dismissed(true)}
+                >
+                  Close
+                </UiButton>
+              }
+            />
+          </div>
+        )}
+
         {auto_closing_modal_data && (
           <div className={styles.slot}>
             <UiAutoClosingModal

apps/editor/src/views/panel/frontend/hooks/panel/use-panel.ts

@@ -28,6 +28,7 @@ export const use_panel = (vscode: any) => {
   const [chat_input_focus_key, set_chat_input_focus_key] = useState(0)
   const [chat_input_focus_and_select_key, set_chat_input_focus_and_select_key] =
     useState(0)
+  const [token_count, set_token_count] = useState<number>(0)
 
   const {
     ask_about_context_instructions,
@@ -156,6 +157,8 @@ export const use_panel = (vscode: any) => {
         set_active_view('home')
       } else if (message.command == 'VOICE_INPUT_PUSH_TO_TALK') {
         set_voice_input_push_to_talk(message.enabled)
+      } else if (message.command == 'TOKEN_COUNT_UPDATED') {
+        set_token_count(message.token_count)
       }
     }
     window.addEventListener('message', handle_message)
@@ -292,6 +295,7 @@ export const use_panel = (vscode: any) => {
     handle_tab_change,
     handle_new_tab,
     handle_tab_delete,
-    voice_input_push_to_talk
+    voice_input_push_to_talk,
+    token_count
   }
 }

packages/ui/src/components/editor/panel/modals/Modal/Modal.module.scss

@@ -54,6 +54,10 @@
   &--with-icon {
     padding-top: 6px;
   }
+
+  &--without-content {
+    padding-bottom: 16px;
+  }
 }
 
 .scrollable {

packages/ui/src/components/editor/panel/modals/Modal/Modal.tsx

@@ -66,7 +66,8 @@ export const Modal: React.FC<Props> = (props) => {
         {props.title && (
           <div
             className={cn(styles.title, {
-              [styles['title--with-icon']]: !!props.icon
+              [styles['title--with-icon']]: !!props.icon,
+              [styles['title--without-content']]: !props.content_slot
             })}
           >
             {props.title}