diff options
Diffstat (limited to 'extension/react-app/src/components')
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 }) => |