refactor

gui/src/components/markdown/PreWithToolbar.tsx

@@ -26,6 +26,53 @@ function childrenToText(children: any): string {
     : childToText(children);
 }
 
+interface CollapseButtonProps {
+  collapsed: boolean;
+  onClick: () => void;
+  position: "top" | "bottom";
+}
+
+const CollapseButton: React.FC<CollapseButtonProps> = ({
+  collapsed,
+  onClick,
+  position,
+}) => {
+  const topStyle = position === "top" ? { top: "-9px" } : { bottom: "-10px" };
+
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        position: "absolute",
+        left: collapsed ? "-11px" : "-2px",
+        backgroundColor: "transparent",
+        color: "lightgray",
+        cursor: "pointer",
+        fontSize: "12px",
+        fontWeight: "600",
+        border: "none",
+        ...topStyle,
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="currentColor"
+      >
+        {collapsed ? (
+          <path d="M6.999,0v16h2.002V0H6.999z M12.172,9H10V7h2.172l-1.586-1.586L12,4l4,4l-4,4l-1.414-1.414L12.172,9z" />
+        ) : position === "top" ? (
+          <path d="M0,6.999v2.002h16V6.999H0z M9,12.172V10H7v2.172l-1.586-1.586L4,12l4,4l4-4l-1.414-1.414L9,12.172z" />
+        ) : (
+          <path d="M0,6.999v2.002h16V6.999H0z M7,3.828V6h2V3.828l1.586,1.586L12,4L8,0L4,4l1.414,1.414L7,3.828z" />
+        )}
+      </svg>
+    </button>
+  );
+};
+
 function PreWithToolbar(props: {
   children: any;
   language: string | undefined;
@@ -34,6 +81,7 @@ function PreWithToolbar(props: {
   const toolbarBottom = uiConfig?.codeBlockToolbarPosition == "bottom";
 
   const [hovering, setHovering] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
 
   const [rawCodeBlock, setRawCodeBlock] = useState("");
   const [isCreateFile, setIsCreateFile] = useState(false);
@@ -69,29 +117,51 @@ function PreWithToolbar(props: {
     }
   }, [props.children]);
 
+  const toggleCollapse = () => {
+    setCollapsed(!collapsed);
+  };
+
   return isCreateFile ? (
     <FileCreateChip rawCodeBlock={rawCodeBlock}></FileCreateChip>
   ) : (
     <div
-      style={{ padding: "0px" }}
+      style={{ paddingLeft: "0px", position: "relative" }}
       className="relative"
       onMouseEnter={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}
     >
-      {!toolbarBottom && hovering && (
-        <CodeBlockToolBar
-          text={rawCodeBlock}
-          bottom={toolbarBottom}
-          language={props.language}
-        ></CodeBlockToolBar>
-      )}
-      {props.children}
-      {toolbarBottom && hovering && (
-        <CodeBlockToolBar
-          text={rawCodeBlock}
-          bottom={toolbarBottom}
-          language={props.language}
-        ></CodeBlockToolBar>
+      <CollapseButton
+        collapsed={collapsed}
+        onClick={toggleCollapse}
+        position="top"
+      />
+
+      {!collapsed && (
+        <>
+          {!toolbarBottom && hovering && (
+            <CodeBlockToolBar
+              text={rawCodeBlock}
+              bottom={toolbarBottom}
+              language={props.language}
+            />
+          )}
+
+          {props.children}
+
+          {toolbarBottom && hovering && (
+            <CodeBlockToolBar
+              text={rawCodeBlock}
+              bottom={toolbarBottom}
+              language={props.language}
+            />
+          )}
+
+          <CollapseButton
+            collapsed={collapsed}
+            onClick={toggleCollapse}
+            position="bottom"
+          />
+        </>
       )}
     </div>
   );