Merge pull request #6467 from continuedev/nate/diff-ui-edit

don't expand edit tool codeblocks by default

Author: sestinj

gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/CollapsibleContainer.tsx

@@ -0,0 +1,55 @@
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { useState } from "react";
+
+interface CollapsibleContainerProps {
+  children: React.ReactNode;
+  maxHeight?: string;
+  className?: string;
+  collapsible?: boolean;
+}
+
+export function CollapsibleContainer({
+  children,
+  maxHeight = "max-h-40",
+  className = "",
+  collapsible = false,
+}: CollapsibleContainerProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // If not collapsible, just render children without any collapsible behavior
+  if (!collapsible) {
+    return <div className={className}>{children}</div>;
+  }
+
+  return (
+    <div className={`relative ${className}`}>
+      <div className={`overflow-hidden ${isExpanded ? "" : maxHeight}`}>
+        {children}
+      </div>
+
+      {!isExpanded && (
+        <div className="from-editor absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t to-transparent">
+          <div
+            onClick={() => setIsExpanded(true)}
+            className="group flex h-full cursor-pointer items-end justify-center pb-2"
+          >
+            <span title="Expand to show full content">
+              <ChevronDownIcon className="text-lightgray group-hover:text-foreground h-4 w-4" />
+            </span>
+          </div>
+        </div>
+      )}
+
+      {isExpanded && (
+        <div
+          onClick={() => setIsExpanded(false)}
+          className="group mt-2 flex cursor-pointer justify-center"
+        >
+          <span title="Collapse to compact view">
+            <ChevronDownIcon className="text-lightgray group-hover:text-foreground h-4 w-4 rotate-180" />
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx

@@ -13,6 +13,7 @@ import { getFontSize } from "../../../util";
 import Spinner from "../../gui/Spinner";
 import { isTerminalCodeBlock } from "../utils";
 import { ApplyActions } from "./ApplyActions";
+import { CollapsibleContainer } from "./CollapsibleContainer";
 import { CopyButton } from "./CopyButton";
 import { CreateFileButton } from "./CreateFileButton";
 import { FileInfo } from "./FileInfo";
@@ -32,6 +33,7 @@ export interface StepContainerPreToolbarProps {
   children: any;
   expanded?: boolean;
   disableManualApply?: boolean;
+  collapsible?: boolean;
 }
 
 export function StepContainerPreToolbar({
@@ -47,6 +49,7 @@ export function StepContainerPreToolbar({
   children,
   expanded,
   disableManualApply,
+  collapsible,
 }: StepContainerPreToolbarProps) {
   const ideMessenger = useContext(IdeMessengerContext);
   const history = useAppSelector((state) => state.session.history);
@@ -298,9 +301,10 @@ export function StepContainerPreToolbar({
           {renderActionButtons()}
         </div>
       </div>
-
       {isExpanded && (
-        <div className="overflow-hidden overflow-y-auto">{children}</div>
+        <CollapsibleContainer collapsible={collapsible}>
+          {children}
+        </CollapsibleContainer>
       )}
     </div>
   );

gui/src/components/StyledMarkdownPreview/index.tsx

@@ -127,6 +127,7 @@ interface StyledMarkdownPreviewProps {
   disableManualApply?: boolean;
   toolCallId?: string;
   expandCodeblocks?: boolean;
+  collapsible?: boolean;
 }
 
 const HLJS_LANGUAGE_CLASSNAME_PREFIX = "language-";
@@ -305,6 +306,7 @@ const StyledMarkdownPreview = memo(function StyledMarkdownPreview(
               forceToolCallId={props.toolCallId}
               expanded={props.expandCodeblocks}
               disableManualApply={props.disableManualApply}
+              collapsible={props.collapsible}
             >
               <SyntaxHighlightedPre {...preProps} />
             </StepContainerPreToolbar>

gui/src/pages/gui/ToolCallDiv/EditFile.tsx

@@ -18,12 +18,13 @@ export function EditFile(props: EditToolCallProps) {
 
   return (
     <StyledMarkdownPreview
-      expandCodeblocks={props.expandCodeblocks ?? false}
+      expandCodeblocks={false}
       isRenderingInStepContainer
       disableManualApply
       source={src}
       toolCallId={props.toolCallId}
       itemIndex={props.historyIndex}
+      collapsible={true}
     />
   );
 }