diff options
Diffstat (limited to 'extension/react-app/src/components')
5 files changed, 53 insertions, 32 deletions
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx index 3e1f3e16..81b148b9 100644 --- a/extension/react-app/src/components/ComboBox.tsx +++ b/extension/react-app/src/components/ComboBox.tsx @@ -11,7 +11,12 @@ import CodeBlock from "./CodeBlock"; import { RangeInFile } from "../../../src/client"; import PillButton from "./PillButton"; import HeaderButtonWithText from "./HeaderButtonWithText"; -import { Trash, LockClosed, LockOpen } from "@styled-icons/heroicons-outline"; +import { + Trash, + LockClosed, + LockOpen, + Plus, +} from "@styled-icons/heroicons-outline"; // #region styled components const mainInputFontSize = 16; @@ -50,7 +55,7 @@ const MainTextInput = styled.textarea` } `; -const UlMaxHeight = 200; +const UlMaxHeight = 400; const Ul = styled.ul<{ hidden: boolean; showAbove: boolean; @@ -100,6 +105,8 @@ interface ComboBoxProps { highlightedCodeSections: (RangeInFile & { contents: string })[]; deleteContextItems: (indices: number[]) => void; onTogglePin: () => void; + onToggleAddContext: () => void; + addingHighlightedCode: boolean; } const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { @@ -188,6 +195,11 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { ) { // Prevent Downshift's default 'Enter' behavior. (event.nativeEvent as any).preventDownshiftDefault = true; + + // cmd+enter to /edit + if (event.metaKey) { + event.currentTarget.value = `/edit ${event.currentTarget.value}`; + } if (props.onEnter) props.onEnter(event); setInputValue(""); const value = event.currentTarget.value; @@ -249,6 +261,19 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { </Ul> </div> <div className="px-2 flex gap-2 items-center flex-wrap"> + {highlightedCodeSections.length === 0 && ( + <HeaderButtonWithText + text={ + props.addingHighlightedCode ? "Adding Context" : "Add Context" + } + onClick={() => { + props.onToggleAddContext(); + }} + inverted={props.addingHighlightedCode} + > + <Plus size="1.6em" /> + </HeaderButtonWithText> + )} {highlightedCodeSections.length > 0 && ( <> <HeaderButtonWithText @@ -304,10 +329,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { /> ))} - <span className="text-trueGray-400 ml-auto mr-4 text-xs"> - Highlight code to include as context.{" "} - {highlightedCodeSections.length === 0 && - "Otherwise using entire currently open file."} + <span className="text-trueGray-400 ml-auto mr-4 text-xs text-right"> + Highlight code to include as context. Currently open file included by + default. {highlightedCodeSections.length === 0 && ""} </span> </div> <ContextDropdown diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx index 3ddac93c..72a653c5 100644 --- a/extension/react-app/src/components/HeaderButtonWithText.tsx +++ b/extension/react-app/src/components/HeaderButtonWithText.tsx @@ -8,15 +8,17 @@ interface HeaderButtonWithTextProps { children: React.ReactNode; disabled?: boolean; inverted?: boolean; + active?: boolean; } const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => { const [hover, setHover] = useState(false); + const paddingLeft = (props.disabled ? (props.active ? "3px" : "1px"): (hover ? "4px" : "1px")); return ( <HeaderButton inverted={props.inverted} disabled={props.disabled} - style={{ padding: "1px", paddingLeft: hover ? "4px" : "1px" }} + style={{ padding: (props.active ? "3px" : "1px"), paddingLeft, borderRadius: (props.active ? "50%" : undefined) }} onMouseEnter={() => { if (!props.disabled) { setHover(true); diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx index 2352c3ad..5a02c6b2 100644 --- a/extension/react-app/src/components/PillButton.tsx +++ b/extension/react-app/src/components/PillButton.tsx @@ -15,6 +15,8 @@ const Button = styled.button` background-color: white; color: black; } + + cursor: pointer; `; interface PillButtonProps { @@ -39,26 +41,13 @@ const PillButton = (props: PillButtonProps) => { props.onHover(false); } }} + onClick={() => { + if (props.onDelete) { + props.onDelete(); + } + }} > - <div - style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: "4px" }} - > - <span - style={{ - cursor: "pointer", - color: "red", - borderRight: "1px solid black", - paddingRight: "4px", - }} - onClick={() => { - props.onDelete?.(); - props.onHover?.(false); - }} - > - <XMark style={{ padding: "0px" }} size="1.2em" strokeWidth="2px" /> - </span> - <span>{props.title}</span> - </div> + {props.title} </Button> ); }; diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index 35d34976..2aed2e72 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -10,9 +10,10 @@ import { import { ChevronDown, ChevronRight, - XMark, ArrowPath, + XMark, } from "@styled-icons/heroicons-outline"; +import { Stop } from "@styled-icons/heroicons-solid"; import { HistoryNode } from "../../../schema/HistoryNode"; import ReactMarkdown from "react-markdown"; import HeaderButtonWithText from "./HeaderButtonWithText"; @@ -207,9 +208,14 @@ function StepContainer(props: StepContainerProps) { e.stopPropagation(); props.onDelete(); }} - text="Delete" + text={props.historyNode.active ? "Stop" : "Delete"} + active={props.historyNode.active} > - <XMark size="1.6em" onClick={props.onDelete} /> + {props.historyNode.active ? ( + <Stop size="1.2em" onClick={props.onDelete} /> + ) : ( + <XMark size="1.6em" onClick={props.onDelete} /> + )} </HeaderButtonWithText> {props.historyNode.observation?.error ? ( <HeaderButtonWithText diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx index 44fdba38..28437d35 100644 --- a/extension/react-app/src/components/UserInputContainer.tsx +++ b/extension/react-app/src/components/UserInputContainer.tsx @@ -15,7 +15,7 @@ interface UserInputContainerProps { } const StyledDiv = styled.div` - background-color: rgb(50 50 50); + background-color: rgb(45 45 45); padding: 8px; padding-left: 16px; padding-right: 16px; @@ -28,8 +28,8 @@ const StyledDiv = styled.div` const UserInputContainer = (props: UserInputContainerProps) => { return ( - <StyledDiv hidden={props.historyNode.step.hide as any}> - {props.children} + <StyledDiv> + <b>{props.children}</b> <div style={{ marginLeft: "auto" }}> <HeaderButtonWithText onClick={(e) => { |