summaryrefslogtreecommitdiff
path: root/extension/react-app/src/components
diff options
context:
space:
mode:
authorNate Sesti <sestinj@gmail.com>2023-09-24 01:00:42 -0700
committerNate Sesti <sestinj@gmail.com>2023-09-24 01:00:42 -0700
commitf9a84bd2d65b3142cbcfcdd8e1e9394c9d4b458e (patch)
treebf986f4dfbf89881ca2a1d0d925ae846d0b9c5c0 /extension/react-app/src/components
parent2cc90f0eedee7056ca03cef946d734b365ab33f4 (diff)
downloadsncontinue-f9a84bd2d65b3142cbcfcdd8e1e9394c9d4b458e.tar.gz
sncontinue-f9a84bd2d65b3142cbcfcdd8e1e9394c9d4b458e.tar.bz2
sncontinue-f9a84bd2d65b3142cbcfcdd8e1e9394c9d4b458e.zip
feat: :lipstick: more ui improvements
Diffstat (limited to 'extension/react-app/src/components')
-rw-r--r--extension/react-app/src/components/HeaderButtonWithText.tsx8
-rw-r--r--extension/react-app/src/components/Layout.tsx6
-rw-r--r--extension/react-app/src/components/PillButton.tsx1
-rw-r--r--extension/react-app/src/components/Suggestions.tsx30
-rw-r--r--extension/react-app/src/components/UserInputContainer.tsx35
-rw-r--r--extension/react-app/src/components/index.ts2
6 files changed, 57 insertions, 25 deletions
diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
index ca359250..84e6118c 100644
--- a/extension/react-app/src/components/HeaderButtonWithText.tsx
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -13,7 +13,10 @@ interface HeaderButtonWithTextProps {
onKeyDown?: (e: any) => void;
}
-const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
+const HeaderButtonWithText = React.forwardRef<
+ HTMLButtonElement,
+ HeaderButtonWithTextProps
+>((props: HeaderButtonWithTextProps, ref) => {
const [hover, setHover] = useState(false);
const tooltipPortalDiv = document.getElementById("tooltip-portal-div");
@@ -35,6 +38,7 @@ const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
onClick={props.onClick}
onKeyDown={props.onKeyDown}
className={props.className}
+ ref={ref}
>
{props.children}
</HeaderButton>
@@ -47,6 +51,6 @@ const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
)}
</>
);
-};
+});
export default HeaderButtonWithText;
diff --git a/extension/react-app/src/components/Layout.tsx b/extension/react-app/src/components/Layout.tsx
index 9ec2e671..6dbd348f 100644
--- a/extension/react-app/src/components/Layout.tsx
+++ b/extension/react-app/src/components/Layout.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
import { defaultBorderRadius, secondaryDark, vscForeground } from ".";
import { Outlet } from "react-router-dom";
import TextDialog from "./TextDialog";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect } from "react";
import { GUIClientContext } from "../App";
import { useDispatch, useSelector } from "react-redux";
import { RootStore } from "../redux/store";
@@ -12,8 +12,6 @@ import {
setShowDialog,
} from "../redux/slices/uiStateSlice";
import {
- PlusIcon,
- FolderIcon,
SparklesIcon,
Cog6ToothIcon,
QuestionMarkCircleIcon,
@@ -22,6 +20,7 @@ import HeaderButtonWithText from "./HeaderButtonWithText";
import { useNavigate, useLocation } from "react-router-dom";
import ModelSelect from "./ModelSelect";
import ProgressBar from "./ProgressBar";
+import { temporarilyClearSession } from "../redux/slices/serverStateReducer";
// #region Styled Components
const FOOTER_HEIGHT = "1.8em";
@@ -112,6 +111,7 @@ const Layout = () => {
event.code === "KeyN" &&
timeline.filter((n) => !n.step.hide).length > 0
) {
+ dispatch(temporarilyClearSession(false));
client?.loadSession(undefined);
}
if ((event.metaKey || event.ctrlKey) && event.code === "KeyC") {
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index 4b602619..4e13428d 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -196,6 +196,7 @@ const PillButton = (props: PillButtonProps) => {
<>
<CircleDiv
data-tooltip-id={`circle-div-${props.item.description.name}`}
+ className="z-10"
>
<ExclamationTriangleIcon
style={{ margin: "auto" }}
diff --git a/extension/react-app/src/components/Suggestions.tsx b/extension/react-app/src/components/Suggestions.tsx
index 1709288c..c9d30de6 100644
--- a/extension/react-app/src/components/Suggestions.tsx
+++ b/extension/react-app/src/components/Suggestions.tsx
@@ -91,16 +91,20 @@ function SuggestionsDiv(props: SuggestionsDivProps) {
const stageDescriptions = [
<p>Ask a question</p>,
- <ol>
- <li>Highlight code in the editor</li>
- <li>Press cmd+M to select the code</li>
- <li>Ask a question</li>
- </ol>,
- <ol>
- <li>Highlight code in the editor</li>
- <li>Press cmd+shift+M to select the code</li>
- <li>Request and edit</li>
- </ol>,
+ <p>
+ 1. Highlight code in the editor
+ <br />
+ 2. Press cmd+M to select the code
+ <br />
+ 3. Ask a question
+ </p>,
+ <p>
+ 1. Highlight code in the editor
+ <br />
+ 2. Press cmd+shift+M to select the code
+ <br />
+ 3. Request an edit
+ </p>,
];
const suggestionsStages: any[][] = [
@@ -178,7 +182,7 @@ function SuggestionsArea(props: { onClick: (textInput: string) => void }) {
const inputs = timeline.filter(
(node) => !node.step.hide && node.step.name === "User Input"
);
- return inputs.length - numTutorialInputs === 0;
+ return inputs.length - numTutorialInputs <= 0;
}, [timeline, numTutorialInputs]);
return (
@@ -187,9 +191,9 @@ function SuggestionsArea(props: { onClick: (textInput: string) => void }) {
<TutorialDiv>
<div className="flex">
<SparklesIcon width="1.3em" height="1.3em" color="yellow" />
- <b className="ml-1">Tutorial</b>
+ <b className="ml-1">Tutorial ({stage + 1}/3)</b>
</div>
- <p style={{ color: lightGray }}>
+ <p style={{ color: vscForeground, paddingLeft: "4px" }}>
{stage < suggestionsStages.length &&
suggestionsStages[stage][0]?.title}
</p>
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index 76a3c615..15f1752f 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -103,7 +103,7 @@ const StyledDiv = styled.div<{ editing: boolean }>`
z-index: 1;
overflow: hidden;
display: grid;
- grid-template-columns: auto 1fr;
+ grid-template-columns: 1fr auto;
outline: ${(props) => (props.editing ? `1px solid ${lightGray}` : "none")};
cursor: text;
@@ -114,7 +114,7 @@ const DeleteButtonDiv = styled.div`
top: 8px;
right: 8px;
background-color: ${secondaryDark};
- box-shadow: 2px 2px 10px ${secondaryDark};
+ box-shadow: 4px 4px 10px ${secondaryDark};
border-radius: ${defaultBorderRadius};
`;
@@ -123,6 +123,7 @@ const GridDiv = styled.div`
grid-template-columns: auto 1fr;
grid-gap: 8px;
align-items: center;
+ width: 100%;
`;
function stringWithEllipsis(str: string, maxLen: number) {
@@ -165,7 +166,7 @@ const UserInputContainer = (props: UserInputContainerProps) => {
divRef.current.innerText = prevContent;
divRef.current.blur();
}
- }, [divRef.current]);
+ }, [divRef.current, prevContent]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
@@ -190,6 +191,10 @@ const UserInputContainer = (props: UserInputContainerProps) => {
divRef.current?.blur();
};
+ const [divTextContent, setDivTextContent] = useState("");
+
+ const checkButtonRef = useRef<HTMLButtonElement>(null);
+
return (
<GradientBorder
loading={props.active}
@@ -243,12 +248,13 @@ const UserInputContainer = (props: UserInputContainerProps) => {
padding: "8px",
paddingTop: "4px",
paddingBottom: "4px",
+ width: "100%",
}}
>
<div
ref={divRef}
- onBlur={() => {
- onBlur();
+ onBlur={(e) => {
+ if (e.relatedTarget !== checkButtonRef.current) onBlur();
}}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
@@ -256,6 +262,9 @@ const UserInputContainer = (props: UserInputContainerProps) => {
doneEditing(e);
}
}}
+ onInput={(e) => {
+ setDivTextContent((e.target as any).innerText);
+ }}
contentEditable={true}
suppressContentEditableWarning={true}
className="mr-6 ml-1 cursor-text w-full py-2 flex items-center content-center outline-none"
@@ -271,10 +280,24 @@ const UserInputContainer = (props: UserInputContainerProps) => {
<HeaderButtonWithText
onClick={(e) => {
doneEditing(e);
+ e.stopPropagation();
}}
text="Done"
+ disabled={
+ divTextContent === "" || divTextContent === prevContent
+ }
+ ref={checkButtonRef}
>
- <CheckIcon width="1.4em" height="1.4em" />
+ <CheckIcon
+ width="1.4em"
+ height="1.4em"
+ color={
+ divTextContent === "" ||
+ divTextContent === prevContent
+ ? lightGray
+ : vscForeground
+ }
+ />
</HeaderButtonWithText>
) : (
<>
diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts
index 6f5a2f37..510740f8 100644
--- a/extension/react-app/src/components/index.ts
+++ b/extension/react-app/src/components/index.ts
@@ -178,7 +178,7 @@ export const HeaderButton = styled.button<{ inverted: boolean | undefined }>`
border: none;
border-radius: ${defaultBorderRadius};
- cursor: pointer;
+ cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
&:hover {
background-color: ${({ inverted }) =>
generated by cgit v1.2.3-70-g09d2 (git 2.48.1) at 2025-03-08 18:38:53 +0000