Implement tab reordering functionality in the prompt field

- tabs: allow reordering through react-sortable
- tabs: dont show a dot when there is just a single tab

Author: robertpiosik

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

@@ -80,6 +80,7 @@ type Props = {
   on_tab_change: (index: number) => void
   on_new_tab: () => void
   on_tab_delete: (index: number) => void
+  on_tabs_reorder: (new_order: number[]) => void
   missing_web_configuration?: boolean
   voice_input_push_to_talk: boolean
   token_count: number
@@ -730,6 +731,7 @@ export const Main: React.FC<Props> = (props) => {
       on_tab_change={props.on_tab_change}
       on_new_tab={props.on_new_tab}
       on_tab_delete={props.on_tab_delete}
+      on_tabs_reorder={props.on_tabs_reorder}
       voice_input_push_to_talk={props.voice_input_push_to_talk}
     />
   )

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

@@ -123,6 +123,7 @@ type Props = {
   on_tab_change: (index: number) => void
   on_new_tab: () => void
   on_tab_delete: (index: number) => void
+  on_tabs_reorder: (new_order: number[]) => void
   voice_input_push_to_talk: boolean
 }
 
@@ -425,6 +426,7 @@ export const MainView: React.FC<Props> = (props) => {
             on_tab_change={props.on_tab_change}
             on_new_tab={props.on_new_tab}
             on_tab_delete={props.on_tab_delete}
+            on_tabs_reorder={props.on_tabs_reorder}
             warning={warning}
             voice_input_push_to_talk={props.voice_input_push_to_talk}
             translations={{

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

@@ -79,6 +79,7 @@ export const Panel = () => {
     handle_tab_change,
     handle_new_tab,
     handle_tab_delete,
+    handle_tabs_reorder,
     voice_input_push_to_talk,
     token_count
   } = use_panel(vscode)
@@ -416,6 +417,7 @@ export const Panel = () => {
                 on_tab_change={handle_tab_change}
                 on_new_tab={handle_new_tab}
                 on_tab_delete={handle_tab_delete}
+                on_tabs_reorder={handle_tabs_reorder}
                 voice_input_push_to_talk={voice_input_push_to_talk}
                 token_count={token_count}
               />

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

@@ -196,6 +196,49 @@ export const use_instructions = (
     }
   }
 
+  const handle_tabs_reorder = (new_order: number[]) => {
+    const prompt_type = (
+      mode == MODE.WEB ? web_prompt_type : api_prompt_type
+    ) as any
+    const update = (
+      state: InstructionsState | undefined,
+      setter: React.Dispatch<
+        React.SetStateAction<InstructionsState | undefined>
+      >
+    ) => {
+      if (!state) return
+
+      const new_instructions = new_order.map((i) => state.instructions[i])
+      const new_active_index = new_order.indexOf(state.active_index)
+
+      const new_state = {
+        instructions: new_instructions,
+        active_index: new_active_index >= 0 ? new_active_index : 0
+      }
+      setter(new_state)
+      post_message(vscode, {
+        command: 'SAVE_INSTRUCTIONS',
+        instruction: new_state,
+        prompt_type
+      })
+    }
+
+    if (prompt_type == 'ask-about-files') {
+      update(ask_about_context_instructions, set_ask_about_context_instructions)
+    } else if (prompt_type == 'edit-files') {
+      update(edit_files_instructions, set_edit_files_instructions)
+    } else if (prompt_type == 'without-files') {
+      update(no_context_instructions, set_no_context_instructions)
+    } else if (prompt_type == 'code-at-cursor') {
+      update(code_at_cursor_instructions, set_code_at_cursor_instructions)
+    } else if (prompt_type == 'find-relevant-files') {
+      update(
+        find_relevant_files_instructions,
+        set_find_relevant_files_instructions
+      )
+    }
+  }
+
   useEffect(() => {
     const handle_message = (event: MessageEvent<BackendMessage>) => {
       const message = event.data
@@ -222,6 +265,7 @@ export const use_instructions = (
     handle_instructions_change,
     handle_tab_change,
     handle_new_tab,
-    handle_tab_delete
+    handle_tab_delete,
+    handle_tabs_reorder
   }
 }

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

@@ -36,7 +36,8 @@ export const use_panel = (vscode: any) => {
     handle_instructions_change,
     handle_tab_change,
     handle_new_tab,
-    handle_tab_delete
+    handle_tab_delete,
+    handle_tabs_reorder
   } = use_instructions(vscode, mode, web_prompt_type, api_prompt_type)
 
   const [context_size_warning_threshold, set_context_size_warning_threshold] =
@@ -301,6 +302,7 @@ export const use_panel = (vscode: any) => {
     handle_tab_change,
     handle_new_tab,
     handle_tab_delete,
+    handle_tabs_reorder,
     voice_input_push_to_talk,
     token_count
   }

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

@@ -108,6 +108,10 @@
   letter-spacing: normal;
   min-height: 48px;
 
+  .tabs {
+    display: none;
+  }
+
   &:focus {
     outline: none;
   }

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

@@ -1,4 +1,5 @@
 import { useRef, useEffect, useMemo, useState, useCallback } from 'react'
+import { ReactSortable } from 'react-sortablejs'
 import styles from './PromptField.module.scss'
 import cn from 'classnames'
 import { Icon } from '../../../common/Icon'
@@ -76,6 +77,7 @@ export type PromptFieldProps = {
   on_tab_change: (index: number) => void
   on_new_tab: () => void
   on_tab_delete: (index: number) => void
+  on_tabs_reorder?: (new_order: number[]) => void
   warning?: string
   voice_input_push_to_talk?: boolean
   translations: {
@@ -107,6 +109,23 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
     'at' | 'hash' | 'curly' | null
   >(null)
 
+  const [tab_items, set_tab_items] = useState<{ id: string }[]>([])
+
+  useEffect(() => {
+    set_tab_items((prev) => {
+      if (prev.length === props.tabs_count) return prev
+      if (prev.length < props.tabs_count) {
+        return [
+          ...prev,
+          ...Array.from({ length: props.tabs_count - prev.length }).map(() => ({
+            id: Math.random().toString(36).substring(7)
+          }))
+        ]
+      }
+      return prev.slice(0, props.tabs_count)
+    })
+  }, [props.tabs_count])
+
   const invocation_button_ref = useRef<HTMLButtonElement>(null)
   const chevron_button_ref = useRef<HTMLButtonElement>(null)
   const disconnected_chevron_button_ref = useRef<HTMLButtonElement>(null)
@@ -359,6 +378,70 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
         onClick={() => input_ref.current?.focus()}
       >
         <div className={styles['input-wrapper']}>
+          {props.tabs_count > 1 ? (
+            <ReactSortable
+              list={tab_items}
+              setList={(new_list) => {
+                const has_changed = new_list.some(
+                  (item, i) => item.id !== tab_items[i]?.id
+                )
+                if (has_changed) {
+                  const new_order = new_list.map((item) =>
+                    tab_items.findIndex((t) => t.id === item.id)
+                  )
+                  set_tab_items(new_list)
+                  props.on_tabs_reorder?.(new_order)
+                }
+              }}
+              className={styles.tabs}
+              style={{
+                position: 'relative',
+                zIndex: 2,
+                margin: '7px 1px 0 5px'
+              }}
+              animation={150}
+              filter={`.${styles['tabs__tab--new']}`}
+            >
+              {tab_items.map((item, i) => (
+                <div
+                  key={item.id}
+                  className={cn(styles.tabs__tab, {
+                    [styles['tabs__tab--active']]: i === props.active_tab_index
+                  })}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    props.on_tab_change(i)
+                  }}
+                >
+                  <div className={styles['tabs__tab-icon']} />
+                </div>
+              ))}
+              <div
+                className={cn(styles.tabs__tab, styles['tabs__tab--new'])}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  props.on_new_tab()
+                }}
+              />
+            </ReactSortable>
+          ) : props.tabs_count === 1 ? (
+            <div
+              className={styles.tabs}
+              style={{
+                position: 'relative',
+                zIndex: 2,
+                margin: '7px 1px 0 5px'
+              }}
+            >
+              <div
+                className={cn(styles.tabs__tab, styles['tabs__tab--new'])}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  props.on_new_tab()
+                }}
+              />
+            </div>
+          ) : null}
           <div
             ref={input_ref}
             contentEditable={true}