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 <ty@tydunn.com>

2 files changed, 201 insertions, 0 deletions

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 (
+    <div className="p-4">
+      <h3>Free Trial Limit Reached</h3>
+      <p>
+        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{" "}
+        <a
+          href="https://continue.dev/docs/customization/models"
+          target="_blank"
+        >
+          documentation
+        </a>
+        . 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.
+      </p>
+
+      <TextInput
+        type="text"
+        placeholder="Enter your OpenAI API key"
+        value={apiKey}
+        onChange={(e) => setApiKey(e.target.value)}
+      />
+      <GridDiv>
+        <Button
+          onClick={() => {
+            navigate("/models");
+          }}
+        >
+          Select model
+        </Button>
+        <Button
+          disabled={!apiKey}
+          onClick={() => {
+            client?.addModelForRole("*", "OpenAI", {
+              model: "gpt-4",
+              api_key: apiKey,
+              title: "GPT-4",
+            });
+            dispatch(setShowDialog(false));
+          }}
+        >
+          Use my API key
+        </Button>
+      </GridDiv>
+    </div>
+  );
+}
+
+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 (
+    <div className="flex justify-between w-full items-center">
+      <span
+        style={{
+          color: vscForeground,
+        }}
+      >
+        {props.description}
+      </span>
+      <div className="flex gap-2 float-right">
+        {shortcut.split(" ").map((key) => {
+          return <KeyDiv>{key}</KeyDiv>;
+        })}
+      </div>
+    </div>
+  );
+}
+
+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 (
+    <div className="p-2">
+      <h3 className="my-3 mx-auto text-center">Keyboard Shortcuts</h3>
+      <GridDiv>
+        {shortcuts.map((shortcut) => {
+          return (
+            <KeyboardShortcut
+              mac={shortcut.mac}
+              windows={shortcut.windows}
+              description={shortcut.description}
+            />
+          );
+        })}
+      </GridDiv>
+    </div>
+  );
+}
+
+export default KeyboardShortcutsDialog;