From e976d60974a7837967d03807605cbf2e7b4f3f9a Mon Sep 17 00:00:00 2001 From: Nate Sesti <33237525+sestinj@users.noreply.github.com> Date: Sat, 23 Sep 2023 13:06:00 -0700 Subject: UI Redesign and fixing many details (#496) * feat: :lipstick: start of major design upgrade * feat: :lipstick: model selection page * feat: :lipstick: use shortcut to add highlighted code as ctx * feat: :lipstick: better display of errors * feat: :lipstick: ui for learning keyboard shortcuts, more details * refactor: :construction: testing slash commands ui * Truncate continue.log * refactor: :construction: refactoring client_session, ui, more * feat: :bug: layout fixes * refactor: :lipstick: ui to enter OpenAI Key * refactor: :truck: rename MaybeProxyOpenAI -> OpenAIFreeTrial * starting help center * removing old shortcut docs * fix: :bug: fix model setting logic to avoid overwrites * feat: :lipstick: tutorial and model descriptions * refactor: :truck: rename unused -> saved * refactor: :truck: rename model roles * feat: :lipstick: edit indicator * refactor: :lipstick: move +, folder icons * feat: :lipstick: tab to clear all context * fix: :bug: context providers ui fixes * fix: :bug: fix lag when stopping step * fix: :bug: don't override system message for models * fix: :bug: fix continue button cursor * feat: :lipstick: title bar * fix: :bug: updates to code highlighting logic and more * fix: :bug: fix renaming of summarize model role * feat: :lipstick: help page and better session title * feat: :lipstick: more help page / ui improvements * feat: :lipstick: set session title * fix: :bug: small fixes for changing sessions * fix: :bug: perfecting the highlighting code and ctx interactions * style: :lipstick: sticky headers for scroll, ollama warming * fix: :bug: fix toggle bug --------- Co-authored-by: Ty Dunn --- .../react-app/src/components/dialogs/FTCDialog.tsx | 72 ++++++++++++ .../src/components/dialogs/KeyboardShortcuts.tsx | 129 +++++++++++++++++++++ 2 files changed, 201 insertions(+) create mode 100644 extension/react-app/src/components/dialogs/FTCDialog.tsx create mode 100644 extension/react-app/src/components/dialogs/KeyboardShortcuts.tsx (limited to 'extension/react-app/src/components/dialogs') diff --git a/extension/react-app/src/components/dialogs/FTCDialog.tsx b/extension/react-app/src/components/dialogs/FTCDialog.tsx new file mode 100644 index 00000000..3ea753bc --- /dev/null +++ b/extension/react-app/src/components/dialogs/FTCDialog.tsx @@ -0,0 +1,72 @@ +import React, { useContext } from "react"; +import styled from "styled-components"; +import { Button, TextInput } from ".."; +import { useNavigate } from "react-router-dom"; +import { GUIClientContext } from "../../App"; +import { useDispatch } from "react-redux"; +import { setShowDialog } from "../../redux/slices/uiStateSlice"; + +const GridDiv = styled.div` + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 8px; + align-items: center; +`; + +function FTCDialog() { + const navigate = useNavigate(); + const [apiKey, setApiKey] = React.useState(""); + const client = useContext(GUIClientContext); + const dispatch = useDispatch(); + + return ( +
+

Free Trial Limit Reached

+

+ You've reached the free trial limit of 250 free inputs with Continue's + OpenAI API key. To keep using Continue, you can either use your own API + key, or use a local LLM. To read more about the options, see our{" "} + + documentation + + . If you're just looking for fastest way to keep going, type '/config' + to open your Continue config file and paste your API key into the + OpenAIFreeTrial object. +

+ + setApiKey(e.target.value)} + /> + + + + +
+ ); +} + +export default FTCDialog; diff --git a/extension/react-app/src/components/dialogs/KeyboardShortcuts.tsx b/extension/react-app/src/components/dialogs/KeyboardShortcuts.tsx new file mode 100644 index 00000000..2a7b735c --- /dev/null +++ b/extension/react-app/src/components/dialogs/KeyboardShortcuts.tsx @@ -0,0 +1,129 @@ +import React from "react"; +import styled from "styled-components"; +import { + defaultBorderRadius, + lightGray, + secondaryDark, + vscForeground, +} from ".."; +import { getPlatform } from "../../util"; + +const GridDiv = styled.div` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-gap: 2rem; + padding: 1rem; + justify-items: center; + align-items: center; + + border-top: 0.5px solid ${lightGray}; +`; + +const KeyDiv = styled.div` + border: 0.5px solid ${lightGray}; + border-radius: ${defaultBorderRadius}; + padding: 4px; + color: ${vscForeground}; + + width: 16px; + height: 16px; + + display: flex; + justify-content: center; + align-items: center; +`; + +interface KeyboardShortcutProps { + mac: string; + windows: string; + description: string; +} + +function KeyboardShortcut(props: KeyboardShortcutProps) { + const shortcut = getPlatform() === "windows" ? props.windows : props.mac; + return ( +
+ + {props.description} + +
+ {shortcut.split(" ").map((key) => { + return {key}; + })} +
+
+ ); +} + +const shortcuts: KeyboardShortcutProps[] = [ + { + mac: "⌘ M", + windows: "⌃ M", + description: "Ask about Highlighted Code", + }, + { + mac: "⌘ ⇧ M", + windows: "⌃ ⇧ M", + description: "Edit Highlighted Code", + }, + { + mac: "⌘ ⇧ ↵", + windows: "⌃ ⇧ ↵", + description: "Accept Diff", + }, + { + mac: "⌘ ⇧ ⌫", + windows: "⌃ ⇧ ⌫", + description: "Reject Diff", + }, + { + mac: "⌘ ⇧ L", + windows: "⌃ ⇧ L", + description: "Quick Text Entry", + }, + { + mac: "⌥ ⌘ M", + windows: "⌥ ⌃ M", + description: "Toggle Auxiliary Bar", + }, + { + mac: "⌘ ⇧ R", + windows: "⌃ ⇧ R", + description: "Debug Terminal", + }, + { + mac: "⌥ ⌘ N", + windows: "⌥ ⌃ N", + description: "New Session", + }, + { + mac: "⌘ ⌫", + windows: "⌃ ⌫", + description: "Stop Active Step", + }, +]; + +function KeyboardShortcutsDialog() { + return ( +
+

Keyboard Shortcuts

+ + {shortcuts.map((shortcut) => { + return ( + + ); + })} + +
+ ); +} + +export default KeyboardShortcutsDialog; -- cgit v1.2.3-70-g09d2