Merge branch 'dev'

Author: robertpiosik

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="list-flat"
+            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

packages/vscode/package.json

@@ -2,7 +2,7 @@
   "name": "gemini-coder",
   "displayName": "Code Web Chat",
   "description": "AI coding without agents (CWC)",
-  "version": "1.519.0",
+  "version": "1.520.0",
   "scripts": {
     "build": "npx vsce package --no-dependencies",
     "vscode:prepublish": "rimraf out && npm run compile",

packages/vscode/src/commands/apply-chat-response-command/utils/clipboard-parser/parsers/multiple-files-parser.ts

@@ -186,17 +186,23 @@ export const parse_multiple_files = (params: {
             !potential_path.includes(' ') &&
             /[a-zA-Z0-9]/.test(potential_path)
           ) {
-            let is_followed_by_code_block = false
-            for (let j = i + 1; j < lines.length; j++) {
-              const next_line = lines[j].trim()
-              if (next_line.startsWith('```')) {
-                is_followed_by_code_block = true
-                break
+            const before = line.substring(0, match.index!)
+            const after = line.substring(match.index! + match[0].length)
+
+            // Avoid matching file paths that are part of a sentence.
+            if (!(/[a-zA-Z]/.test(before) && /[a-zA-Z]/.test(after))) {
+              let is_followed_by_code_block = false
+              for (let j = i + 1; j < lines.length; j++) {
+                const next_line = lines[j].trim()
+                if (next_line.startsWith('```')) {
+                  is_followed_by_code_block = true
+                  break
+                }
               }
-            }
 
-            if (is_followed_by_code_block) {
-              extracted_filename = potential_path
+              if (is_followed_by_code_block) {
+                extracted_filename = potential_path
+              }
             }
           }
         }

packages/vscode/src/views/settings/frontend/Home/Home.tsx

@@ -275,17 +275,17 @@ export const Home: React.FC<Props> = (props) => {
           on_clear_checks_in_workspace_behavior_change={
             props.on_clear_checks_in_workspace_behavior_change
           }
+          edit_format_instructions={props.edit_format_instructions}
+          on_edit_format_instructions_change={
+            props.on_edit_format_instructions_change
+          }
           on_open_editor_settings={props.on_open_editor_settings}
           on_stuck_change={general_on_stuck_change}
         />
         <PresetsSection
           ref={(el) => (section_refs.current['presets'] = el)}
           gemini_user_id={props.gemini_user_id}
           on_gemini_user_id_change={props.on_gemini_user_id_change}
-          edit_format_instructions={props.edit_format_instructions}
-          on_edit_format_instructions_change={
-            props.on_edit_format_instructions_change
-          }
           on_stuck_change={presets_on_stuck_change}
         />
         <Section