hover icons for description

3 files changed, 42 insertions, 19 deletions

diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
new file mode 100644
index 00000000..d70a3d70
--- /dev/null
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+
+import { HeaderButton } from ".";
+
+interface HeaderButtonWithTextProps {
+  text: string;
+  onClick?: (e: any) => void;
+  children: React.ReactNode;
+}
+
+const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
+  const [hover, setHover] = useState(false);
+  return (
+    <HeaderButton
+      style={{ padding: "3px" }}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      onClick={props.onClick}
+    >
+      <span hidden={!hover}>{props.text}</span>
+      {props.children}
+    </HeaderButton>
+  );
+};
+
+export default HeaderButtonWithText;
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index b0116e92..480f517f 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -21,9 +21,7 @@ import {
 } from "@styled-icons/heroicons-outline";
 import { HistoryNode } from "../../../schema/HistoryNode";
 import ReactMarkdown from "react-markdown";
-import ContinueButton from "./ContinueButton";
-import InputAndButton from "./InputAndButton";
-import ToggleErrorDiv from "./ToggleErrorDiv";
+import HeaderButtonWithText from "./HeaderButtonWithText";
 
 interface StepContainerProps {
   historyNode: HistoryNode;
@@ -152,23 +150,25 @@ function StepContainer(props: StepContainerProps) {
             </HeaderButton> */}
 
             <>
-              <HeaderButton
+              <HeaderButtonWithText
                 onClick={(e) => {
                   e.stopPropagation();
                   props.onDelete();
                 }}
+                text="Delete"
               >
                 <XMark size="1.6em" onClick={props.onDelete} />
-              </HeaderButton>
+              </HeaderButtonWithText>
               {props.historyNode.observation?.error ? (
-                <HeaderButton
+                <HeaderButtonWithText
+                  text="Retry"
                   onClick={(e) => {
                     e.stopPropagation();
                     props.onRetry();
                   }}
                 >
                   <ArrowPath size="1.6em" onClick={props.onRetry} />
-                </HeaderButton>
+                </HeaderButtonWithText>
               ) : (
                 <></>
               )}
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index 05795cdf..279d052b 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -14,12 +14,12 @@ import StepContainer from "../components/StepContainer";
 import useContinueGUIProtocol from "../hooks/useWebsocket";
 import {
   BookOpen,
-  ChatBubbleOvalLeft,
   ChatBubbleOvalLeftEllipsis,
   Trash,
 } from "@styled-icons/heroicons-outline";
 import ComboBox from "../components/ComboBox";
 import TextDialog from "../components/TextDialog";
+import HeaderButtonWithText from "../components/HeaderButtonWithText";
 
 const TopGUIDiv = styled.div`
   overflow: hidden;
@@ -366,30 +366,27 @@ function GUI(props: GUIProps) {
       </TopGUIDiv>
       <Footer>
         <a href="https://continue.dev/docs" className="no-underline">
-          <HeaderButton style={{ padding: "3px" }}>
-            Continue Docs
+          <HeaderButtonWithText text="Continue Docs">
             <BookOpen size="1.6em" />
-          </HeaderButton>
+          </HeaderButtonWithText>
         </a>
-        <HeaderButton
-          style={{ padding: "3px" }}
+        <HeaderButtonWithText
           onClick={() => {
             // Set dialog open
             setShowFeedbackDialog(true);
           }}
+          text="Feedback"
         >
-          Feedback
           <ChatBubbleOvalLeftEllipsis size="1.6em" />
-        </HeaderButton>
-        <HeaderButton
+        </HeaderButtonWithText>
+        <HeaderButtonWithText
           onClick={() => {
             client?.sendClear();
           }}
-          style={{ padding: "3px" }}
+          text="Clear History"
         >
-          Clear History
           <Trash size="1.6em" />
-        </HeaderButton>
+        </HeaderButtonWithText>
       </Footer>
     </>
   );