Skip to content

Commit

Permalink
codeblock action button makeover
Browse files Browse the repository at this point in the history
RomneyDa committed Jan 23, 2025

Verified

This commit was signed with the committer’s verified signature.
yndajas Ynda Jas
1 parent 92e6b54 commit c8b47ea
Showing 2 changed files with 27 additions and 56 deletions.
7 changes: 3 additions & 4 deletions gui/src/components/gui/CopyIconButton.tsx
Original file line number Diff line number Diff line change
@@ -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,20 +7,22 @@ interface CopyIconButtonProps {
tabIndex?: number;
checkIconClassName?: string;
clipboardIconClassName?: string;
tooltipPlacement?: "top" | "bottom";
}

export function CopyIconButton({
text,
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}
76 changes: 24 additions & 52 deletions gui/src/components/markdown/StepContainerPreActionButtons.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}

0 comments on commit c8b47ea

Please sign in to comment.