diff options
Diffstat (limited to 'extension/react-app/src')
-rw-r--r-- | extension/react-app/src/components/Layout.tsx | 48 | ||||
-rw-r--r-- | extension/react-app/src/components/ModelSelect.tsx | 113 |
2 files changed, 137 insertions, 24 deletions
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; |