summaryrefslogtreecommitdiff
path: root/extension/react-app
diff options
context:
space:
mode:
Diffstat (limited to 'extension/react-app')
-rw-r--r--extension/react-app/package-lock.json27
-rw-r--r--extension/react-app/package.json1
-rw-r--r--extension/react-app/src/components/ComboBox.tsx36
-rw-r--r--extension/react-app/src/components/HeaderButtonWithText.tsx4
-rw-r--r--extension/react-app/src/components/PillButton.tsx27
-rw-r--r--extension/react-app/src/components/StepContainer.tsx12
-rw-r--r--extension/react-app/src/components/UserInputContainer.tsx6
-rw-r--r--extension/react-app/src/hooks/ContinueGUIClientProtocol.ts2
-rw-r--r--extension/react-app/src/hooks/useContinueGUIProtocol.ts4
-rw-r--r--extension/react-app/src/main.tsx4
-rw-r--r--extension/react-app/src/tabs/gui.tsx24
11 files changed, 107 insertions, 40 deletions
diff --git a/extension/react-app/package-lock.json b/extension/react-app/package-lock.json
index 85b8633b..fb13dffd 100644
--- a/extension/react-app/package-lock.json
+++ b/extension/react-app/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@styled-icons/heroicons-outline": "^10.47.0",
+ "@styled-icons/heroicons-solid": "^10.47.0",
"@types/vscode-webview": "^1.57.1",
"downshift": "^7.6.0",
"posthog-js": "^1.58.0",
@@ -691,6 +692,23 @@
"styled-components": "*"
}
},
+ "node_modules/@styled-icons/heroicons-solid": {
+ "version": "10.47.0",
+ "resolved": "https://registry.npmjs.org/@styled-icons/heroicons-solid/-/heroicons-solid-10.47.0.tgz",
+ "integrity": "sha512-j+tJx2NzLG2tc91IXJVwKNjsI/osxmak+wmLfnfBsB+49srpxMYjuLPMtl9ZY/xgbNsWO36O+/N5Zf5bkgiKcQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.20.7",
+ "@styled-icons/styled-icon": "^10.7.0"
+ },
+ "funding": {
+ "type": "GitHub",
+ "url": "https://github.com/sponsors/jacobwgillespie"
+ },
+ "peerDependencies": {
+ "react": "*",
+ "styled-components": "*"
+ }
+ },
"node_modules/@styled-icons/styled-icon": {
"version": "10.7.0",
"resolved": "https://registry.npmjs.org/@styled-icons/styled-icon/-/styled-icon-10.7.0.tgz",
@@ -3937,6 +3955,15 @@
"@styled-icons/styled-icon": "^10.7.0"
}
},
+ "@styled-icons/heroicons-solid": {
+ "version": "10.47.0",
+ "resolved": "https://registry.npmjs.org/@styled-icons/heroicons-solid/-/heroicons-solid-10.47.0.tgz",
+ "integrity": "sha512-j+tJx2NzLG2tc91IXJVwKNjsI/osxmak+wmLfnfBsB+49srpxMYjuLPMtl9ZY/xgbNsWO36O+/N5Zf5bkgiKcQ==",
+ "requires": {
+ "@babel/runtime": "^7.20.7",
+ "@styled-icons/styled-icon": "^10.7.0"
+ }
+ },
"@styled-icons/styled-icon": {
"version": "10.7.0",
"resolved": "https://registry.npmjs.org/@styled-icons/styled-icon/-/styled-icon-10.7.0.tgz",
diff --git a/extension/react-app/package.json b/extension/react-app/package.json
index e46fdc8c..12701906 100644
--- a/extension/react-app/package.json
+++ b/extension/react-app/package.json
@@ -10,6 +10,7 @@
},
"dependencies": {
"@styled-icons/heroicons-outline": "^10.47.0",
+ "@styled-icons/heroicons-solid": "^10.47.0",
"@types/vscode-webview": "^1.57.1",
"downshift": "^7.6.0",
"posthog-js": "^1.58.0",
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>
generated by cgit v1.2.3-70-g09d2 (git 2.48.1) at 2025-02-02 22:08:10 +0000