diff options
| -rw-r--r-- | extension/react-app/src/components/HeaderButtonWithText.tsx | 26 | ||||
| -rw-r--r-- | extension/react-app/src/components/StepContainer.tsx | 14 | ||||
| -rw-r--r-- | extension/react-app/src/tabs/gui.tsx | 21 |
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> </> ); |