From 044b7caa6b26a5d78ae52faa0ae675abc8c4e161 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Sat, 26 Aug 2023 10:10:06 -0700
Subject: feat: :sparkles: select model from dropdown

---
 extension/react-app/src/components/Layout.tsx      |  48 ++++-----
 extension/react-app/src/components/ModelSelect.tsx | 113 +++++++++++++++++++++
 2 files changed, 137 insertions(+), 24 deletions(-)
 create mode 100644 extension/react-app/src/components/ModelSelect.tsx

(limited to 'extension')

diff --git a/extension/react-app/src/components/Layout.tsx b/extension/react-app/src/components/Layout.tsx
index c0f0929b..897fd683 100644
--- a/extension/react-app/src/components/Layout.tsx
+++ b/extension/react-app/src/components/Layout.tsx
@@ -22,6 +22,7 @@ import {
 } from "@heroicons/react/24/outline";
 import HeaderButtonWithText from "./HeaderButtonWithText";
 import { useNavigate } from "react-router-dom";
+import ModelSelect from "./ModelSelect";
 
 // #region Styled Components
 
@@ -138,30 +139,29 @@ const Layout = () => {
           {bottomMessage}
         </BottomMessageDiv>
         <Footer>
-          <SparklesIcon
-            visibility={
-              localStorage.getItem("hideFeature") === "true"
-                ? "hidden"
-                : "visible"
-            }
-            className="mr-auto cursor-pointer"
-            onClick={() => {
-              localStorage.setItem("hideFeature", "true");
-            }}
-            onMouseEnter={() => {
-              dispatch(
-                setBottomMessage(
-                  "🎁 New Feature: Use ⌘⇧R automatically debug errors in the terminal"
-                )
-              );
-            }}
-            onMouseLeave={() => {
-              dispatch(setBottomMessage(undefined));
-            }}
-            width="1.3em"
-            height="1.3em"
-            color="yellow"
-          />
+          {localStorage.getItem("hideFeature") === "true" || (
+            <SparklesIcon
+              className="mr-auto cursor-pointer"
+              onClick={() => {
+                localStorage.setItem("hideFeature", "true");
+              }}
+              onMouseEnter={() => {
+                dispatch(
+                  setBottomMessage(
+                    "🎁 New Feature: Use ⌘⇧R automatically debug errors in the terminal (you can click the sparkle icon to make it go away)"
+                  )
+                );
+              }}
+              onMouseLeave={() => {
+                dispatch(setBottomMessage(undefined));
+              }}
+              width="1.3em"
+              height="1.3em"
+              color="yellow"
+            />
+          )}
+
+          <ModelSelect />
           <HeaderButtonWithText
             onClick={() => {
               client?.loadSession(undefined);
diff --git a/extension/react-app/src/components/ModelSelect.tsx b/extension/react-app/src/components/ModelSelect.tsx
new file mode 100644
index 00000000..49788143
--- /dev/null
+++ b/extension/react-app/src/components/ModelSelect.tsx
@@ -0,0 +1,113 @@
+import styled from "styled-components";
+import {
+  defaultBorderRadius,
+  secondaryDark,
+  vscBackground,
+  vscForeground,
+} from ".";
+import { useContext, useEffect } from "react";
+import { GUIClientContext } from "../App";
+import { RootStore } from "../redux/store";
+import { useSelector } from "react-redux";
+
+const MODEL_INFO: { title: string; class: string; args: any }[] = [
+  {
+    title: "gpt-4",
+    class: "MaybeProxyOpenAI",
+    args: {
+      model: "gpt-4",
+      api_key: "",
+    },
+  },
+  {
+    title: "gpt-3.5-turbo",
+    class: "MaybeProxyOpenAI",
+    args: {
+      model: "gpt-3.5-turbo",
+      api_key: "",
+    },
+  },
+  {
+    title: "claude-2",
+    class: "AnthropicLLM",
+    args: {
+      model: "claude-2",
+      api_key: "<ANTHROPIC_API_KEY>",
+    },
+  },
+  {
+    title: "GGML",
+    class: "GGML",
+    args: {},
+  },
+  {
+    title: "Ollama",
+    class: "Ollama",
+    args: {
+      model: "codellama",
+    },
+  },
+  {
+    title: "Replicate",
+    class: "ReplicateLLM",
+    args: {
+      model:
+        "replicate/llama-2-70b-chat:58d078176e02c219e11eb4da5a02a7830a283b14cf8f94537af893ccff5ee781",
+      api_key: "<REPLICATE_API_KEY>",
+    },
+  },
+  {
+    title: "TogetherAI",
+    class: "TogetherLLM",
+    args: {
+      model: "gpt-4",
+      api_key: "<TOGETHER_API_KEY>",
+    },
+  },
+];
+
+const Select = styled.select`
+  border: none;
+  width: fit-content;
+  background-color: ${secondaryDark};
+  color: ${vscForeground};
+  border-radius: ${defaultBorderRadius};
+  padding: 6px;
+  /* box-shadow: 0px 0px 1px 0px ${vscForeground}; */
+  max-height: 35vh;
+  overflow: scroll;
+  cursor: pointer;
+  margin-right: auto;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+function ModelSelect(props: {}) {
+  const client = useContext(GUIClientContext);
+  const defaultModel = useSelector(
+    (state: RootStore) =>
+      (state.serverState.config as any)?.models?.default?.class_name
+  );
+
+  return (
+    <Select
+      defaultValue={0}
+      onChange={(e) => {
+        const model = MODEL_INFO[parseInt(e.target.value)];
+        client?.setModelForRole("*", model.class, model.args);
+      }}
+    >
+      {MODEL_INFO.map((model, idx) => {
+        return (
+          <option selected={defaultModel === model.class} value={idx}>
+            {model.title}
+          </option>
+        );
+      })}
+    </Select>
+  );
+}
+
+export default ModelSelect;
-- 
cgit v1.2.3-70-g09d2