From c8b47ea7ad26338a2e9d3c52289030ea3c252964 Mon Sep 17 00:00:00 2001
From: Dallin Romney <dallinromney@gmail.com>
Date: Wed, 22 Jan 2025 17:43:01 -0800
Subject: [PATCH] codeblock action button makeover

---
 gui/src/components/gui/CopyIconButton.tsx     |  7 +-
 .../StepContainerPreActionButtons.tsx         | 76 ++++++-------------
 2 files changed, 27 insertions(+), 56 deletions(-)

diff --git a/gui/src/components/gui/CopyIconButton.tsx b/gui/src/components/gui/CopyIconButton.tsx
index 5600420269..c2fcfd3229 100644
--- a/gui/src/components/gui/CopyIconButton.tsx
+++ b/gui/src/components/gui/CopyIconButton.tsx
@@ -1,7 +1,4 @@
 import { CheckIcon, ClipboardIcon } from "@heroicons/react/24/outline";
-import { useContext, useState } from "react";
-import { IdeMessengerContext } from "../../context/IdeMessenger";
-import { isJetBrains } from "../../util";
 import HeaderButtonWithToolTip from "./HeaderButtonWithToolTip";
 import useCopy from "../../hooks/useCopy";
 
@@ -10,6 +7,7 @@ interface CopyIconButtonProps {
   tabIndex?: number;
   checkIconClassName?: string;
   clipboardIconClassName?: string;
+  tooltipPlacement?: "top" | "bottom";
 }
 
 export function CopyIconButton({
@@ -17,13 +15,14 @@ export function CopyIconButton({
   tabIndex,
   checkIconClassName = "h-4 w-4 text-green-400",
   clipboardIconClassName = "h-4 w-4 text-gray-400",
+  tooltipPlacement = "bottom",
 }: CopyIconButtonProps) {
   const { copyText, copied } = useCopy(text);
 
   return (
     <>
       <HeaderButtonWithToolTip
-        tooltipPlacement="top"
+        tooltipPlacement={tooltipPlacement}
         tabIndex={tabIndex}
         text={copied ? "Copied" : "Copy"}
         onClick={copyText}
diff --git a/gui/src/components/markdown/StepContainerPreActionButtons.tsx b/gui/src/components/markdown/StepContainerPreActionButtons.tsx
index 4ecce83154..641e17c133 100644
--- a/gui/src/components/markdown/StepContainerPreActionButtons.tsx
+++ b/gui/src/components/markdown/StepContainerPreActionButtons.tsx
@@ -1,5 +1,4 @@
 import { useContext, useRef, useState } from "react";
-import styled from "styled-components";
 import {
   CommandLineIcon,
   PlayIcon,
@@ -19,36 +18,6 @@ import {
   selectUIConfig,
 } from "../../redux/slices/configSlice";
 
-const TopDiv = styled.div`
-  outline: 0.5px solid rgba(153, 153, 152);
-  outline-offset: -0.5px;
-  border-radius: ${defaultBorderRadius};
-  margin-bottom: 8px;
-  background-color: ${vscEditorBackground};
-`;
-
-const HoverDiv = styled.div`
-  position: sticky;
-  top: 0;
-  left: 100%;
-  height: 0;
-  width: 0;
-  overflow: visible;
-  z-index: 100;
-`;
-
-const InnerHoverDiv = styled.div<{ isBottomToolbarPosition: boolean }>`
-  position: absolute;
-  ${(props) => (props.isBottomToolbarPosition ? "bottom: 3px;" : "top: -11px;")}
-  right: 10px;
-  display: flex;
-  padding: 1px 2px;
-  gap: 4px;
-  border: 0.5px solid #8888;
-  border-radius: ${defaultBorderRadius};
-  background-color: ${vscEditorBackground};
-`;
-
 interface StepContainerPreActionButtonsProps {
   language: string | null;
   codeBlockContent: string;
@@ -69,9 +38,12 @@ export default function StepContainerPreActionButtons({
   const nextCodeBlockIndex = useAppSelector(
     (state) => state.session.codeBlockApplyStates.curIndex,
   );
-
+  const isStreaming = useAppSelector((state) => state.session.isStreaming);
   const isBottomToolbarPosition =
     uiConfig?.codeBlockToolbarPosition == "bottom";
+
+  const toolTipPlacement = isBottomToolbarPosition ? "top" : "bottom";
+
   const shouldRunTerminalCmd =
     !isJetBrains() && isTerminalCodeBlock(language, codeBlockContent);
   const isNextCodeBlock = nextCodeBlockIndex === codeBlockIndex;
@@ -107,31 +79,27 @@ export default function StepContainerPreActionButtons({
     !isNextCodeBlock,
   );
 
-  if (!hovering) {
-    return (
-      <TopDiv
-        tabIndex={-1}
-        onMouseEnter={() => setHovering(true)}
-        onMouseLeave={() => setHovering(false)}
-      >
-        {children}
-      </TopDiv>
-    );
-  }
-
   return (
-    <TopDiv
+    <div
       tabIndex={-1}
       onMouseEnter={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}
+      className="bg-vsc-editor-background border-vsc-input-border relative rounded-md border-[1px] border-solid"
     >
-      <HoverDiv>
-        <InnerHoverDiv isBottomToolbarPosition={isBottomToolbarPosition}>
+      <div className="h-full w-full overflow-hidden rounded-md">{children}</div>
+      {hovering && !isStreaming && (
+        <div
+          className="bg-vsc-editor-background border-0.5 border-vsc-input-border z-100 absolute right-3 z-50 flex -translate-y-1/2 gap-1.5 rounded-md border border-solid px-1 py-0.5"
+          style={{
+            top: !isBottomToolbarPosition ? 0 : "100%",
+          }}
+        >
           {shouldRunTerminalCmd && (
             <HeaderButtonWithToolTip
               text="Run in terminal"
               style={{ backgroundColor: vscEditorBackground }}
               onClick={onClickRunTerminal}
+              tooltipPlacement={toolTipPlacement}
             >
               <CommandLineIcon className="h-4 w-4 text-gray-400" />
             </HeaderButtonWithToolTip>
@@ -140,6 +108,7 @@ export default function StepContainerPreActionButtons({
             text="Apply"
             style={{ backgroundColor: vscEditorBackground }}
             onClick={onClickApply}
+            tooltipPlacement={toolTipPlacement}
           >
             <PlayIcon className="h-4 w-4 text-gray-400" />
           </HeaderButtonWithToolTip>
@@ -149,13 +118,16 @@ export default function StepContainerPreActionButtons({
             onClick={() =>
               ideMessenger.post("insertAtCursor", { text: codeBlockContent })
             }
+            tooltipPlacement={toolTipPlacement}
           >
             <ArrowLeftEndOnRectangleIcon className="h-4 w-4 text-gray-400" />
           </HeaderButtonWithToolTip>
-          <CopyIconButton text={codeBlockContent} />
-        </InnerHoverDiv>
-      </HoverDiv>
-      {children}
-    </TopDiv>
+          <CopyIconButton
+            text={codeBlockContent}
+            tooltipPlacement={toolTipPlacement}
+          />
+        </div>
+      )}
+    </div>
   );
 }