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>

1 files changed, 72 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;