summaryrefslogtreecommitdiff
path: root/extension/react-app
diff options
context:
space:
mode:
Diffstat (limited to 'extension/react-app')
-rw-r--r--extension/react-app/src/components/ComboBox.tsx3
-rw-r--r--extension/react-app/src/components/DebugPanel.tsx85
-rw-r--r--extension/react-app/src/components/HeaderButtonWithText.tsx26
-rw-r--r--extension/react-app/src/components/StepContainer.tsx16
-rw-r--r--extension/react-app/src/index.css3
-rw-r--r--extension/react-app/src/tabs/gui.tsx200
6 files changed, 164 insertions, 169 deletions
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index ace0605e..2b140567 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -113,6 +113,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
(event.nativeEvent as any).preventDownshiftDefault = true;
if (props.onEnter) props.onEnter(event);
setInputValue("");
+ } else if (event.key === "Tab" && items.length > 0) {
+ setInputValue(items[0].name);
+ event.preventDefault();
}
},
ref: ref as any,
diff --git a/extension/react-app/src/components/DebugPanel.tsx b/extension/react-app/src/components/DebugPanel.tsx
index 11ec2fe2..30f38779 100644
--- a/extension/react-app/src/components/DebugPanel.tsx
+++ b/extension/react-app/src/components/DebugPanel.tsx
@@ -17,39 +17,15 @@ interface DebugPanelProps {
}[];
}
-const GradientContainer = styled.div`
- // Uncomment to get gradient border
- /* background: linear-gradient(
- 101.79deg,
- #12887a 0%,
- #87245c 37.64%,
- #e12637 65.98%,
- #ffb215 110.45%
- ); */
- /* padding: 10px; */
- background-color: ${secondaryDark};
- margin: 0;
- height: 100%;
- /* border: 1px solid white; */
- border-radius: ${defaultBorderRadius};
-`;
-
-const MainDiv = styled.div`
- height: 100%;
- border-radius: ${defaultBorderRadius};
- scrollbar-base-color: transparent;
- background-color: ${vscBackground};
-`;
-
const TabBar = styled.div<{ numTabs: number }>`
display: grid;
grid-template-columns: repeat(${(props) => props.numTabs}, 1fr);
`;
const TabsAndBodyDiv = styled.div`
- display: grid;
- grid-template-rows: auto 1fr;
height: 100%;
+ border-radius: ${defaultBorderRadius};
+ scrollbar-base-color: transparent;
`;
function DebugPanel(props: DebugPanelProps) {
@@ -76,42 +52,43 @@ function DebugPanel(props: DebugPanelProps) {
const [currentTab, setCurrentTab] = useState(0);
return (
- <GradientContainer>
- <MainDiv>
- <TabsAndBodyDiv>
- {props.tabs.length > 1 && (
- <TabBar numTabs={props.tabs.length}>
- {props.tabs.map((tab, index) => {
- return (
- <div
- key={index}
- className={`p-2 cursor-pointer text-center ${
- index === currentTab
- ? "bg-secondary-dark"
- : "bg-vsc-background"
- }`}
- onClick={() => setCurrentTab(index)}
- >
- {tab.title}
- </div>
- );
- })}
- </TabBar>
- )}
+ <TabsAndBodyDiv>
+ {props.tabs.length > 1 && (
+ <TabBar numTabs={props.tabs.length}>
{props.tabs.map((tab, index) => {
return (
<div
key={index}
- hidden={index !== currentTab}
- style={{ scrollbarGutter: "stable both-edges" }}
+ className={`p-2 cursor-pointer text-center ${
+ index === currentTab
+ ? "bg-secondary-dark"
+ : "bg-vsc-background"
+ }`}
+ onClick={() => setCurrentTab(index)}
>
- {tab.element}
+ {tab.title}
</div>
);
})}
- </TabsAndBodyDiv>
- </MainDiv>
- </GradientContainer>
+ </TabBar>
+ )}
+ {props.tabs.map((tab, index) => {
+ return (
+ <div
+ key={index}
+ hidden={index !== currentTab}
+ style={{
+ scrollbarGutter: "stable both-edges",
+ minHeight: "100%",
+ display: "grid",
+ gridTemplateRows: "1fr auto",
+ }}
+ >
+ {tab.element}
+ </div>
+ );
+ })}
+ </TabsAndBodyDiv>
);
}
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 48f970d7..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>
) : (
<></>
)}
@@ -193,7 +193,7 @@ function StepContainer(props: StepContainerProps) {
) : (
<ReactMarkdown
key={1}
- className="overflow-scroll"
+ className="overflow-x-scroll"
components={
{
// pre: ({ node, ...props }) => {
diff --git a/extension/react-app/src/index.css b/extension/react-app/src/index.css
index 20599d30..32a92d0e 100644
--- a/extension/react-app/src/index.css
+++ b/extension/react-app/src/index.css
@@ -21,7 +21,7 @@
html,
body,
#root {
- height: calc(100%);
+ height: 100%;
}
body {
@@ -31,4 +31,5 @@ body {
font-family: "Mona Sans", "Arial", sans-serif;
padding: 0px;
margin: 0px;
+ height: 100%;
}
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index 5316f42b..279d052b 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -14,25 +14,18 @@ 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 MainDiv = styled.div`
- display: grid;
- grid-template-rows: 1fr auto;
+const TopGUIDiv = styled.div`
+ overflow: hidden;
`;
-let TopGUIDiv = styled.div`
- display: grid;
- grid-template-columns: 1fr;
- background-color: ${vscBackground};
-`;
-
-let UserInputQueueItem = styled.div`
+const UserInputQueueItem = styled.div`
border-radius: ${defaultBorderRadius};
color: gray;
padding: 8px;
@@ -40,7 +33,7 @@ let UserInputQueueItem = styled.div`
text-align: center;
`;
-const TopBar = styled.div`
+const Footer = styled.footer`
display: flex;
flex-direction: row;
gap: 8px;
@@ -303,103 +296,98 @@ function GUI(props: GUIProps) {
setShowFeedbackDialog(false);
}}
></TextDialog>
- <MainDiv>
- <TopGUIDiv
- ref={topGuiDivRef}
- onKeyDown={(e) => {
- if (e.key === "Enter" && e.ctrlKey) {
- onMainTextInput();
- }
- }}
- >
- {typeof client === "undefined" && (
- <>
- <Loader></Loader>
- <p style={{ textAlign: "center" }}>
- Trying to reconnect with server...
- </p>
- </>
- )}
- {history?.timeline.map((node: HistoryNode, index: number) => {
- return (
- <StepContainer
- key={index}
- onUserInput={(input: string) => {
- onStepUserInput(input, index);
- }}
- inFuture={index > history?.current_index}
- historyNode={node}
- onRefinement={(input: string) => {
- client?.sendRefinementInput(input, index);
- }}
- onReverse={() => {
- client?.reverseToIndex(index);
- }}
- onRetry={() => {
- client?.retryAtIndex(index);
- setWaitingForSteps(true);
- }}
- onDelete={() => {
- client?.deleteAtIndex(index);
- }}
- />
- );
- })}
- {waitingForSteps && <Loader></Loader>}
- <div>
- {userInputQueue.map((input) => {
- return <UserInputQueueItem>{input}</UserInputQueueItem>;
- })}
- </div>
-
- <ComboBox
- disabled={
- history?.timeline.length
- ? history.timeline[history.current_index].step.name ===
- "Waiting for user confirmation"
- : false
- }
- ref={mainTextInputRef}
- onEnter={(e) => {
- onMainTextInput();
- e.stopPropagation();
- e.preventDefault();
- }}
- onInputValueChange={() => {}}
- items={availableSlashCommands}
- />
- <ContinueButton onClick={onMainTextInput} />
-
- <TopBar>
- <a href="https://continue.dev/docs" className="no-underline">
- <HeaderButton style={{ padding: "3px" }}>
- Continue Docs
- <BookOpen size="1.6em" />
- </HeaderButton>
- </a>
- <HeaderButton
- style={{ padding: "3px" }}
- onClick={() => {
- // Set dialog open
- setShowFeedbackDialog(true);
+ <TopGUIDiv
+ ref={topGuiDivRef}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && e.ctrlKey) {
+ onMainTextInput();
+ }
+ }}
+ >
+ {typeof client === "undefined" && (
+ <>
+ <Loader></Loader>
+ <p style={{ textAlign: "center" }}>
+ Trying to reconnect with server...
+ </p>
+ </>
+ )}
+ {history?.timeline.map((node: HistoryNode, index: number) => {
+ return (
+ <StepContainer
+ key={index}
+ onUserInput={(input: string) => {
+ onStepUserInput(input, index);
+ }}
+ inFuture={index > history?.current_index}
+ historyNode={node}
+ onRefinement={(input: string) => {
+ client?.sendRefinementInput(input, index);
+ }}
+ onReverse={() => {
+ client?.reverseToIndex(index);
}}
- >
- Feedback
- <ChatBubbleOvalLeftEllipsis size="1.6em" />
- </HeaderButton>
- <HeaderButton
- onClick={() => {
- client?.sendClear();
+ onRetry={() => {
+ client?.retryAtIndex(index);
+ setWaitingForSteps(true);
}}
- style={{ padding: "3px" }}
- >
- Clear History
- <Trash size="1.6em" />
- </HeaderButton>
- </TopBar>
- </TopGUIDiv>
- </MainDiv>
+ onDelete={() => {
+ client?.deleteAtIndex(index);
+ }}
+ />
+ );
+ })}
+ {waitingForSteps && <Loader></Loader>}
+
+ <div>
+ {userInputQueue.map((input) => {
+ return <UserInputQueueItem>{input}</UserInputQueueItem>;
+ })}
+ </div>
+
+ <ComboBox
+ disabled={
+ history?.timeline.length
+ ? history.timeline[history.current_index].step.name ===
+ "Waiting for user confirmation"
+ : false
+ }
+ ref={mainTextInputRef}
+ onEnter={(e) => {
+ onMainTextInput();
+ e.stopPropagation();
+ e.preventDefault();
+ }}
+ onInputValueChange={() => {}}
+ items={availableSlashCommands}
+ />
+ <ContinueButton onClick={onMainTextInput} />
+ </TopGUIDiv>
+ <Footer>
+ <a href="https://continue.dev/docs" className="no-underline">
+ <HeaderButtonWithText text="Continue Docs">
+ <BookOpen size="1.6em" />
+ </HeaderButtonWithText>
+ </a>
+ <HeaderButtonWithText
+ onClick={() => {
+ // Set dialog open
+ setShowFeedbackDialog(true);
+ }}
+ text="Feedback"
+ >
+ <ChatBubbleOvalLeftEllipsis size="1.6em" />
+ </HeaderButtonWithText>
+ <HeaderButtonWithText
+ onClick={() => {
+ client?.sendClear();
+ }}
+ text="Clear History"
+ >
+ <Trash size="1.6em" />
+ </HeaderButtonWithText>
+ </Footer>
</>
);
}
generated by cgit v1.2.3-70-g09d2 (git 2.48.1) at 2025-10-31 08:50:39 +0000