Lift completed tasks expansion state to PromptField and collapse it on input

- typing anything should collapse 'completed tasks'

└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── common
                        └── prompts
                            ├── PromptField
                            │   ├── PromptField.module.scss
                            │   ├── PromptField.stories.tsx
                            │   ├── PromptField.tsx
                            │   ├── components
                            │   │   ├── CompletedTasks
                            │   │   │   ├── CompletedTasks.module.scss
                            │   │   │   ├── CompletedTasks.tsx
                            │   │   │   └── index.ts
                            │   │   ├── Footer
                            │   │   │   ├── Footer.module.scss
                            │   │   │   ├── Footer.tsx
                            │   │   │   └── index.ts
                            │   │   └── Tabs
                            │   │       ├── Tabs.module.scss
                            │   │       ├── Tabs.tsx
                            │   │       └── index.ts
                            │   ├── hooks
                            │   │   ├── use-drag-drop.ts
                            │   │   ├── use-dropdown.ts
                            │   │   ├── use-ghost-text.ts
                            │   │   ├── use-handlers
                            │   │   │   ├── handle-copy.ts
                            │   │   │   ├── handle-cut.ts
                            │   │   │   ├── handle-input-change.ts
                            │   │   │   ├── handle-input-click.ts
                            │   │   │   ├── handle-key-down.ts
                            │   │   │   ├── handle-paste.ts
                            │   │   │   ├── handle-submit.ts
                            │   │   │   ├── index.ts
                            │   │   │   ├── types.ts
                            │   │   │   ├── use-handlers.ts
                            │   │   │   └── utils.ts
                            │   │   └── use-keyboard-shortcuts.ts
                            │   └── index.ts
                            ├── Template
                            │   ├── Template.module.scss
                            │   ├── Template.tsx
                            │   └── index.ts
                            └── shared
                                └── symbols
                                    ├── caret.ts
                                    ├── get-highlighted-text.tsx
                                    ├── index.ts
                                    ├── position-mapping.ts
                                    ├── prompt-symbols.module.scss
                                    ├── reconstruct-raw-value.ts
                                    └── use-symbol-deletion.ts

Author: robertpiosik

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

@@ -136,6 +136,8 @@ export const PromptField: React.FC<PromptField.Props> = (props) => {
   const [is_text_selecting, set_is_text_selecting] = useState(false)
   const [is_focused, set_is_focused] = useState(false)
   const [is_checkbox_hovered, set_is_checkbox_hovered] = useState(false)
+  const [is_completed_tasks_expanded, set_is_completed_tasks_expanded] =
+    useState(false)
 
   const container_inner_ref = useRef<HTMLDivElement>(null)
   const tabs_ref = useRef<TabsRef>(null)
@@ -405,6 +407,7 @@ export const PromptField: React.FC<PromptField.Props> = (props) => {
                 onInput={(e) => {
                   set_should_show_ghost_text(true)
                   handle_input_change(e)
+                  set_is_completed_tasks_expanded(false)
                 }}
                 onKeyDown={(e) => {
                   if (
@@ -463,6 +466,8 @@ export const PromptField: React.FC<PromptField.Props> = (props) => {
               completed_task: props.translations.completed_task,
               clear_session: props.translations.clear_session
             }}
+            is_expanded={is_completed_tasks_expanded}
+            set_is_expanded={set_is_completed_tasks_expanded}
           />
         </div>
 

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

@@ -38,7 +38,7 @@ export const CompletedTask: React.FC<TaskProps> = ({
   )
 }
 
-type CompletedTasksProps = {
+type Props = {
   tasks: string[]
   selected_files?: string[]
   is_web_target?: boolean
@@ -48,17 +48,19 @@ type CompletedTasksProps = {
     completed_task: string
     clear_session: string
   }
+  is_expanded: boolean
+  set_is_expanded: (is_expanded: boolean) => void
 }
 
-export const CompletedTasks: React.FC<CompletedTasksProps> = ({
+export const CompletedTasks: React.FC<Props> = ({
   tasks,
   selected_files,
   is_web_target,
   on_clear_completed_tasks,
-  translations
+  translations,
+  is_expanded,
+  set_is_expanded
 }) => {
-  const [is_expanded, set_is_expanded] = useState(false)
-
   if (tasks.length === 0) {
     return null
   }