Implement support for rendering text items in ResponsePreview using Markdown and add collapse/expand functionality for long text content

Author: robertpiosik

packages/ui/package.json

@@ -27,6 +27,7 @@
     "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-markdown": "^10.1.0",
     "react-sortablejs": "^6.1.4",
     "react-textarea-autosize": "^8.5.9",
     "simplebar-react": "^3.3.1",

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

@@ -46,16 +46,6 @@
 .list {
   display: block;
 
-  &__text {
-    color: var(--vscode-descriptionForeground);
-    font-size: var(--font-size-12px);
-    margin: var(--padding-6px) var(--padding-12px);
-    background: var(--vscode-list-hoverBackground);
-    padding: var(--padding-5px) var(--padding-7px);
-    border-radius: var(--border-radius-8px);
-    word-wrap: break-word;
-  }
-
   > div:first-child {
     margin-top: 0;
   }

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

@@ -138,7 +138,8 @@ export const WithText = () => (
       ...base_files,
       {
         type: 'text',
-        content: 'Another text item explaining something.'
+        content:
+          'Another text item explaining something with **markdown**.\n\n*   List item 1\n*   List item 2\n\n`some code here`'
       },
       ...files_using_fallbacks
     ]}

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

@@ -4,6 +4,7 @@ import cn from 'classnames'
 import styles from './ResponsePreview.module.scss'
 import { Checkbox } from '../../common/Checkbox'
 import { IconButton } from '../IconButton/IconButton'
+import { TextItem } from './components'
 
 type Props = {
   items: ItemInPreview[]
@@ -177,11 +178,7 @@ export const ResponsePreview: FC<Props> = (props) => {
               </div>
             )
           } else {
-            return (
-              <div key={index} className={styles.list__text}>
-                {item.content}
-              </div>
-            )
+            return <TextItem key={index} content={item.content} />
           }
         })}
       </div>

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

@@ -0,0 +1,48 @@
+.text {
+  color: var(--vscode-descriptionForeground);
+  font-size: var(--font-size-12px);
+  margin: var(--padding-6px) var(--padding-12px);
+  background: var(--vscode-list-hoverBackground);
+  padding: var(--padding-5px) var(--padding-7px);
+  border-radius: var(--border-radius-8px);
+  word-wrap: break-word;
+
+  > * {
+    margin: 0;
+  }
+  > * + * {
+    margin-top: 0.5em;
+  }
+  ul,
+  ol {
+    padding-left: 20px;
+  }
+  code {
+    background-color: var(--vscode-textCodeBlock-background);
+    padding: 2px 4px;
+    border-radius: 3px;
+  }
+
+  &--collapsed {
+    max-height: 50px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  &--overflowing {
+    cursor: pointer;
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 20px;
+      background: linear-gradient(
+        to bottom,
+        transparent,
+        var(--vscode-list-hoverBackground)
+      );
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+import { FC, useEffect, useRef, useState } from 'react'
+import cn from 'classnames'
+import ReactMarkdown from 'react-markdown'
+import styles from './TextItem.module.scss'
+
+type Props = {
+  content: string
+}
+
+export const TextItem: FC<Props> = ({ content }) => {
+  const [is_expanded, set_is_expanded] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const [is_overflowing, set_is_overflowing] = useState(false)
+
+  useEffect(() => {
+    if (ref.current && !is_expanded) {
+      set_is_overflowing(ref.current.scrollHeight > ref.current.clientHeight)
+    } else {
+      set_is_overflowing(false)
+    }
+  }, [content, is_expanded])
+
+  return (
+    <div
+      ref={ref}
+      className={cn(styles.text, {
+        [styles['text--collapsed']]: !is_expanded,
+        [styles['text--overflowing']]: !is_expanded && is_overflowing
+      })}
+      onClick={is_overflowing ? () => set_is_expanded(true) : undefined}
+    >
+      <ReactMarkdown>{content}</ReactMarkdown>
+    </div>
+  )
+}

packages/ui/src/components/editor/panel/ResponsePreview/components/index.ts

@@ -0,0 +1 @@
+export * from './TextItem'

packages/vscode/package.json

@@ -2,7 +2,7 @@
   "name": "gemini-coder",
   "displayName": "Code Web Chat",
   "description": "Blazing fast AI pair programming for production-grade code. Select context as you go for game-changing accuracy and speed. (CWC)",
-  "version": "1.503.0",
+  "version": "1.504.0",
   "scripts": {
     "build": "npx vsce package --no-dependencies",
     "vscode:prepublish": "rimraf out && npm run compile",