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, 11 insertions, 32 deletions

diff --git a/extension/react-app/src/components/ModelSelect.tsx b/extension/react-app/src/components/ModelSelect.tsx
index 0b1829f1..29d9250e 100644
--- a/extension/react-app/src/components/ModelSelect.tsx
+++ b/extension/react-app/src/components/ModelSelect.tsx
@@ -10,8 +10,9 @@ import { useContext } from "react";
 import { GUIClientContext } from "../App";
 import { RootStore } from "../redux/store";
 import { useDispatch, useSelector } from "react-redux";
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { ArrowLeftIcon, PlusIcon } from "@heroicons/react/24/outline";
 import { setDialogMessage, setShowDialog } from "../redux/slices/uiStateSlice";
+import { useNavigate } from "react-router-dom";
 
 const MODEL_INFO: { title: string; class: string; args: any }[] = [
   {
@@ -83,7 +84,7 @@ const MODEL_INFO: { title: string; class: string; args: any }[] = [
   },
   {
     title: "GPT-4 limited free trial",
-    class: "MaybeProxyOpenAI",
+    class: "OpenAIFreeTrial",
     args: {
       model: "gpt-4",
     },
@@ -159,10 +160,12 @@ function ModelSelect(props: {}) {
   const defaultModel = useSelector(
     (state: RootStore) => (state.serverState.config as any)?.models?.default
   );
-  const unusedModels = useSelector(
-    (state: RootStore) => (state.serverState.config as any)?.models?.unused
+  const savedModels = useSelector(
+    (state: RootStore) => (state.serverState.config as any)?.models?.saved
   );
 
+  const navigate = useNavigate();
+
   return (
     <GridDiv>
       <Select
@@ -173,7 +176,7 @@ function ModelSelect(props: {}) {
         defaultValue={0}
         onChange={(e) => {
           const value = JSON.parse(e.target.value);
-          if (value.t === "unused") {
+          if (value.t === "saved") {
             client?.setModelForRoleFromIndex("*", value.idx);
           }
         }}
@@ -188,11 +191,11 @@ function ModelSelect(props: {}) {
             {modelSelectTitle(defaultModel)}
           </option>
         )}
-        {unusedModels?.map((model: any, idx: number) => {
+        {savedModels?.map((model: any, idx: number) => {
           return (
             <option
               value={JSON.stringify({
-                t: "unused",
+                t: "saved",
                 idx,
               })}
             >
@@ -206,31 +209,7 @@ function ModelSelect(props: {}) {
         width="1.3em"
         height="1.3em"
         onClick={() => {
-          dispatch(
-            setDialogMessage(
-              <div>
-                <div className="text-lg font-bold p-2">
-                  Setup a new model provider
-                </div>
-                <br />
-                {MODEL_INFO.map((model, idx) => {
-                  return (
-                    <NewProviderDiv
-                      onClick={() => {
-                        const model = MODEL_INFO[idx];
-                        client?.addModelForRole("*", model.class, model.args);
-                        dispatch(setShowDialog(false));
-                      }}
-                    >
-                      {model.title}
-                    </NewProviderDiv>
-                  );
-                })}
-                <br />
-              </div>
-            )
-          );
-          dispatch(setShowDialog(true));
+          navigate("/models");
         }}
       />
     </GridDiv>