diff options
Diffstat (limited to 'extension/react-app/src')
9 files changed, 79 insertions, 40 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) => { diff --git a/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts b/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts index 96ea7ab3..f123bb2b 100644 --- a/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts +++ b/extension/react-app/src/hooks/ContinueGUIClientProtocol.ts @@ -22,6 +22,8 @@ abstract class AbstractContinueGUIClientProtocol { abstract deleteAtIndex(index: number): void; abstract deleteContextAtIndices(indices: number[]): void; + + abstract toggleAddingHighlightedCode(): void; } export default AbstractContinueGUIClientProtocol; diff --git a/extension/react-app/src/hooks/useContinueGUIProtocol.ts b/extension/react-app/src/hooks/useContinueGUIProtocol.ts index e950387c..49f200ae 100644 --- a/extension/react-app/src/hooks/useContinueGUIProtocol.ts +++ b/extension/react-app/src/hooks/useContinueGUIProtocol.ts @@ -74,6 +74,10 @@ class ContinueGUIClientProtocol extends AbstractContinueGUIClientProtocol { deleteContextAtIndices(indices: number[]) { this.messenger.send("delete_context_at_indices", { indices }); } + + toggleAddingHighlightedCode(): void { + this.messenger.send("toggle_adding_highlighted_code", {}); + } } export default ContinueGUIClientProtocol; diff --git a/extension/react-app/src/main.tsx b/extension/react-app/src/main.tsx index 1b94dc82..0b02575c 100644 --- a/extension/react-app/src/main.tsx +++ b/extension/react-app/src/main.tsx @@ -8,6 +8,10 @@ import { PostHogProvider } from "posthog-js/react"; posthog.init("phc_JS6XFROuNbhJtVCEdTSYk6gl5ArRrTNMpCcguAXlSPs", { api_host: "https://app.posthog.com", + session_recording: { + // WARNING: Only enable this if you understand the security implications + recordCrossOriginIframes: true, + } as any, }); ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx index bbf0b126..e5320c6a 100644 --- a/extension/react-app/src/tabs/gui.tsx +++ b/extension/react-app/src/tabs/gui.tsx @@ -71,6 +71,7 @@ function GUI(props: GUIProps) { const [waitingForSteps, setWaitingForSteps] = useState(false); const [userInputQueue, setUserInputQueue] = useState<string[]>([]); const [highlightedRanges, setHighlightedRanges] = useState([]); + const [addingHighlightedCode, setAddingHighlightedCode] = useState(false); const [availableSlashCommands, setAvailableSlashCommands] = useState< { name: string; description: string }[] >([]); @@ -157,6 +158,7 @@ function GUI(props: GUIProps) { setHistory(state.history); setHighlightedRanges(state.highlighted_ranges); setUserInputQueue(state.user_input_queue); + setAddingHighlightedCode(state.adding_highlighted_code); setAvailableSlashCommands( state.slash_commands.map((c: any) => { return { @@ -293,14 +295,16 @@ function GUI(props: GUIProps) { )} {history?.timeline.map((node: HistoryNode, index: number) => { return node.step.name === "User Input" ? ( - <UserInputContainer - onDelete={() => { - client?.deleteAtIndex(index); - }} - historyNode={node} - > - {node.step.description as string} - </UserInputContainer> + node.step.hide || ( + <UserInputContainer + onDelete={() => { + client?.deleteAtIndex(index); + }} + historyNode={node} + > + {node.step.description as string} + </UserInputContainer> + ) ) : ( <StepContainer isLast={index === history.timeline.length - 1} @@ -361,6 +365,10 @@ function GUI(props: GUIProps) { onTogglePin={() => { setPinned((prev: boolean) => !prev); }} + onToggleAddContext={() => { + client?.toggleAddingHighlightedCode(); + }} + addingHighlightedCode={addingHighlightedCode} /> <ContinueButton onClick={onMainTextInput} /> </TopGUIDiv> |