Enable expandable text items in the response preview, managing scroll position upon toggle

Author: robertpiosik

packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.module.scss

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  padding: var(--padding-4px) 0 var(--padding-12px) 0;
+  padding: var(--padding-4px) 0 var(--padding-8px) 0;
   gap: var(--padding-8px);
 }
 
@@ -42,9 +42,7 @@
 }
 
 .list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--padding-4px);
+  display: block;
 
   > div:first-child {
     margin-top: 0;
@@ -59,15 +57,10 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--padding-8px);
-    border: 1px solid var(--cwc-border-color-dimmed);
-    padding: 0 var(--padding-8px);
-    margin: 0 var(--padding-12px);
-    height: 34px;
-    border-radius: 8px;
-
+    padding: 0 var(--padding-12px);
+    height: var(--list-item-height);
     &:hover {
       background-color: var(--vscode-list-hoverBackground);
-      border-color: var(--cwc-border-color);
 
       .list__file__actions {
         display: flex;
@@ -76,6 +69,10 @@
 
     &--selected {
       background-color: var(--vscode-list-inactiveSelectionBackground);
+
+      &:hover {
+        background-color: var(--vscode-list-inactiveSelectionBackground);
+      }
     }
 
     &__left {

packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, useRef, useState } from 'react'
 import { FileInPreview, ItemInPreview } from '@shared/types/file-in-preview'
 import cn from 'classnames'
 import styles from './ResponsePreview.module.scss'
@@ -25,12 +25,50 @@ type Props = {
 }
 
 export const ResponsePreview: FC<Props> = (props) => {
-  const [last_clicked_file_index, set_last_clicked_file_index] = useState(
-    props.items.findIndex((i) => i.type == 'file')
+  const [last_clicked_file_index, set_last_clicked_file_index] = useState(0)
+  const [expanded_text_items, set_expanded_text_items] = useState<Set<number>>(
+    new Set()
   )
+  const scroll_top_ref = useRef(0)
+  const scrollable_ref = useRef<any>(null)
+
+  const toggle_expanded_text_item = (
+    index: number,
+    element: HTMLDivElement
+  ) => {
+    const scrollable_instance = scrollable_ref.current
+    if (scrollable_instance) {
+      const scroll_container = scrollable_instance.getScrollElement()
+      if (scroll_container) {
+        const scroll_container_rect = scroll_container.getBoundingClientRect()
+        const element_rect = element.getBoundingClientRect()
+
+        if (element_rect.top < scroll_container_rect.top) {
+          // Element's top edge is above the scrollable viewport's top edge.
+          // Restore scroll position to the distance of this top edge to the top.
+          const element_position_in_scrollable_content =
+            scroll_container.scrollTop +
+            element_rect.top -
+            scroll_container_rect.top -
+            4
+          scroll_top_ref.current = element_position_in_scrollable_content
+        }
+      }
+    }
+
+    set_expanded_text_items((prev) => {
+      const new_set = new Set(prev)
+      if (new_set.has(index)) {
+        new_set.delete(index)
+      } else {
+        new_set.add(index)
+      }
+      return new_set
+    })
+  }
 
   const files_in_preview = props.items.filter(
-    (i) => i.type == 'file'
+    (i) => 'file_path' in i
   ) as FileInPreview[]
   const fallback_count = files_in_preview.filter((f) => f.is_fallback).length
 
@@ -45,7 +83,14 @@ export const ResponsePreview: FC<Props> = (props) => {
   }
 
   return (
-    <Scrollable>
+    <Scrollable
+      ref={scrollable_ref}
+      initial_scroll_top={scroll_top_ref.current}
+      scroll_trigger={expanded_text_items.size}
+      on_scroll={(top) => {
+        scroll_top_ref.current = top
+      }}
+    >
       <div className={styles.container}>
         {props.raw_instructions && (
           <div
@@ -71,7 +116,7 @@ export const ResponsePreview: FC<Props> = (props) => {
         )}
         <div className={styles.list}>
           {props.items.map((item, index) => {
-            if (item.type == 'file') {
+            if ('file_path' in item) {
               const file = item
               const last_slash_index = file.file_path.lastIndexOf('/')
               const file_name = file.file_path.substring(last_slash_index + 1)
@@ -138,7 +183,7 @@ export const ResponsePreview: FC<Props> = (props) => {
                       {(file.is_fallback || file.is_replaced) && (
                         <IconButton
                           codicon_icon="sparkle"
-                          title={`Fix the file with Intelligent Update API tool${
+                          title={`Call Intelligent Update API tool${
                             file.diff_fallback_method == 'recount'
                               ? ' (fallback used: git apply with --recount flag)'
                               : file.diff_fallback_method ==
@@ -156,6 +201,18 @@ export const ResponsePreview: FC<Props> = (props) => {
                           }}
                         />
                       )}
+                      <IconButton
+                        codicon_icon="diff-single"
+                        title="Open Changes"
+                        on_click={(e) => {
+                          e.stopPropagation()
+                          set_last_clicked_file_index(index)
+                          props.on_focus_file({
+                            file_path: file.file_path,
+                            workspace_name: file.workspace_name
+                          })
+                        }}
+                      />
                       <IconButton
                         codicon_icon="go-to-file"
                         title="Go To File"
@@ -188,7 +245,16 @@ export const ResponsePreview: FC<Props> = (props) => {
                 </div>
               )
             } else {
-              return <TextItem key={index} content={item.content} />
+              return (
+                <TextItem
+                  key={index}
+                  content={item.content}
+                  is_expanded={expanded_text_items.has(index)}
+                  on_toggle={(element) =>
+                    toggle_expanded_text_item(index, element)
+                  }
+                />
+              )
             }
           })}
         </div>

packages/ui/src/components/editor/panel/ResponsePreview/components/TextItem.module.scss

@@ -17,7 +17,6 @@
   }
 
   code {
-    font-family: monospace;
     font-size: var(--font-size-11px);
     background-color: var(--vscode-textCodeBlock-background);
     padding: 2px 4px;

packages/ui/src/components/editor/panel/ResponsePreview/components/TextItem.tsx

@@ -1,37 +1,38 @@
-import { FC, useState } from 'react'
+import { FC, useRef } from 'react'
 import ReactMarkdown from 'react-markdown'
 import styles from './TextItem.module.scss'
-import { IconButton } from '../../IconButton/IconButton'
+import { IconButton } from '../../IconButton'
 
 type Props = {
   content: string
+  is_expanded: boolean
+  on_toggle: (element: HTMLDivElement) => void
 }
 
-export const TextItem: FC<Props> = ({ content }) => {
-  const [is_hidden, set_is_hidden] = useState(true)
-
-  if (is_hidden) {
-    return (
-      <div className={styles.hidden}>
-        <div className={styles.line} />
-        <IconButton
-          codicon_icon="add"
-          on_click={() => set_is_hidden(false)}
-          title="Show text"
-        />
-        <div className={styles.line} />
-      </div>
-    )
-  }
+export const TextItem: FC<Props> = ({ content, is_expanded, on_toggle }) => {
+  const ref = useRef<HTMLDivElement>(null)
 
   return (
-    <div
-      className={styles.text}
-      onClick={() => {
-        set_is_hidden(true)
-      }}
-    >
-      <ReactMarkdown disallowedElements={['hr']}>{content}</ReactMarkdown>
-    </div>
+    <>
+      {is_expanded ? (
+        <div
+          ref={ref}
+          className={styles.text}
+          onClick={() => ref.current && on_toggle(ref.current)}
+        >
+          <ReactMarkdown disallowedElements={['hr']}>{content}</ReactMarkdown>
+        </div>
+      ) : (
+        <div ref={ref} className={styles.hidden}>
+          <div className={styles.line} />
+          <IconButton
+            codicon_icon="add"
+            on_click={() => ref.current && on_toggle(ref.current)}
+            title="Show text"
+          />
+          <div className={styles.line} />
+        </div>
+      )}
+    </>
   )
 }

packages/ui/src/components/editor/panel/Scrollable/Scrollable.tsx

@@ -16,6 +16,7 @@ type Props = {
   max_height?: string
   initial_scroll_top?: number
   on_scroll?: (top: number) => void
+  scroll_trigger?: number
 }
 
 export const Scrollable = forwardRef<any, Props>((props, ref) => {
@@ -77,7 +78,7 @@ export const Scrollable = forwardRef<any, Props>((props, ref) => {
         scroll_element.scrollTop = props.initial_scroll_top
       })
     }
-  }, [props.initial_scroll_top])
+  }, [props.initial_scroll_top, props.scroll_trigger])
 
   return (
     <div