Preview (#541)

* Strong typing (#533)

* refactor: :recycle: get rid of continuedev.src.continuedev structure

* refactor: :recycle: switching back to server folder

* feat: :sparkles: make config.py imports shorter

* feat: :bookmark: publish as pre-release vscode extension

* refactor: :recycle: refactor and add more completion params to ui

* build: :building_construction: download from preview S3

* fix: :bug: fix paths

* fix: :green_heart: package:pre-release

* ci: :green_heart: more time for tests

* fix: :green_heart: fix build scripts

* fix: :bug: fix import in run.py

* fix: :bookmark: update version to try again

* ci: 💚 Update package.json version [skip ci]

* refactor: :fire: don't check for old extensions version

* fix: :bug: small bug fixes

* fix: :bug: fix config.py import paths

* ci: 💚 Update package.json version [skip ci]

* ci: :green_heart: platform-specific builds test #1

* feat: :green_heart: ship with binary

* fix: :green_heart: fix copy statement to include.exe for windows

* fix: :green_heart: cd extension before packaging

* chore: :loud_sound: count tokens generated

* fix: :green_heart: remove npm_config_arch

* fix: :green_heart: publish as pre-release!

* chore: :bookmark: update version

* perf: :green_heart: hardcode distro paths

* fix: :bug: fix yaml syntax error

* chore: :bookmark: update version

* fix: :green_heart: update permissions and version

* feat: :bug: kill old server if needed

* feat: :lipstick: update marketplace icon for pre-release

* ci: 💚 Update package.json version [skip ci]

* feat: :sparkles: auto-reload for config.py

* feat: :wrench: update default config.py imports

* feat: :sparkles: codelens in config.py

* feat: :sparkles: select model param count from UI

* ci: 💚 Update package.json version [skip ci]

* feat: :sparkles: more model options, ollama error handling

* perf: :zap: don't show server loading immediately

* fix: :bug: fixing small UI details

* ci: 💚 Update package.json version [skip ci]

* feat: :rocket: headers param on LLM class

* fix: :bug: fix headers for openai.;y

* feat: :sparkles: highlight code on cmd+shift+L

* ci: 💚 Update package.json version [skip ci]

* feat: :lipstick: sticky top bar in gui.tsx

* fix: :loud_sound: websocket logging and horizontal scrollbar

* ci: 💚 Update package.json version [skip ci]

* feat: :sparkles: allow AzureOpenAI Service through GGML

* ci: 💚 Update package.json version [skip ci]

* fix: :bug: fix automigration

* ci: 💚 Update package.json version [skip ci]

* ci: :green_heart: upload binaries in ci, download apple silicon

* chore: :fire: remove notes

* fix: :green_heart: use curl to download binary

* fix: :green_heart: set permissions on apple silicon binary

* fix: :green_heart: testing

* fix: :green_heart: cleanup file

* fix: :green_heart: fix preview.yaml

* fix: :green_heart: only upload once per binary

* fix: :green_heart: install rosetta

* ci: :green_heart: download binary after tests

* ci: 💚 Update package.json version [skip ci]

* ci: :green_heart: prepare ci for merge to main

---------

Co-authored-by: GitHub Action <action@github.com>

5 files changed, 61 insertions, 32 deletions

diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index b8199c19..637896c6 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { TextInput, defaultBorderRadius, lightGray } from "../components";
+import { Input, defaultBorderRadius, lightGray, vscBackground } from "../components";
 import { FullState } from "../../../schema/FullState";
 import {
   useEffect,
@@ -58,7 +58,7 @@ const TopGuiDiv = styled.div`
   }
 `;
 
-const TitleTextInput = styled(TextInput)`
+const TitleTextInput = styled(Input)`
   border: none;
   outline: none;
 
@@ -109,6 +109,10 @@ const GUIHeaderDiv = styled.div`
   padding-left: 8px;
   padding-right: 8px;
   border-bottom: 0.5px solid ${lightGray};
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background-color: ${vscBackground};
 `;
 
 interface GUIProps {
@@ -480,7 +484,7 @@ function GUI(props: GUIProps) {
   useEffect(() => {
     const timeout = setTimeout(() => {
       setShowLoading(true);
-    }, 10000);
+    }, 15_000);
 
     return () => {
       clearTimeout(timeout);
diff --git a/extension/react-app/src/pages/history.tsx b/extension/react-app/src/pages/history.tsx
index 63024e36..7c76cb53 100644
--- a/extension/react-app/src/pages/history.tsx
+++ b/extension/react-app/src/pages/history.tsx
@@ -17,6 +17,9 @@ const Tr = styled.tr`
   }
 
   overflow-wrap: anywhere;
+
+  border-bottom: 1px solid ${secondaryDark};
+  border-top: 1px solid ${secondaryDark};
 `;
 
 const parseDate = (date: string): Date => {
@@ -44,7 +47,6 @@ const TdDiv = styled.div`
   padding-right: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  border-bottom: 1px solid ${secondaryDark};
 `;
 
 function lastPartOfPath(path: string): string {
@@ -155,7 +157,7 @@ function History() {
       )}
 
       <div>
-        <table className="w-full">
+        <table className="w-full border-spacing-0 border-collapse">
           <tbody>
             {filteredAndSortedSessions.map((session, index) => {
               const prevDate =
diff --git a/extension/react-app/src/pages/modelconfig.tsx b/extension/react-app/src/pages/modelconfig.tsx
index 97e2d76c..00d9d9bf 100644
--- a/extension/react-app/src/pages/modelconfig.tsx
+++ b/extension/react-app/src/pages/modelconfig.tsx
@@ -3,7 +3,7 @@ import ModelCard from "../components/ModelCard";
 import styled from "styled-components";
 import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 import {
-  TextInput,
+  Input,
   defaultBorderRadius,
   lightGray,
   vscBackground,
@@ -22,6 +22,7 @@ import { RootStore } from "../redux/store";
 import StyledMarkdownPreview from "../components/StyledMarkdownPreview";
 import { getFontSize } from "../util";
 import { FormProvider, useForm } from "react-hook-form";
+import _ from "lodash";
 
 const GridDiv = styled.div`
   display: grid;
@@ -151,22 +152,28 @@ function ModelConfig() {
             <>
               <h3 className="mb-2">Enter required parameters</h3>
 
-              {modelInfo?.collectInputFor?.map((d) => {
-                return (
-                  <div>
-                    <label htmlFor={d.key}>{d.key}</label>
-                    <TextInput
-                      id={d.key}
-                      className="border-2 border-gray-200 rounded-md p-2 m-2"
-                      placeholder={d.key}
-                      defaultValue={d.defaultValue}
-                      {...formMethods.register(d.key, {
-                        required: true,
-                      })}
-                    />
-                  </div>
-                );
-              })}
+              {modelInfo?.collectInputFor
+                ?.filter((d) => d.required)
+                .map((d) => {
+                  return (
+                    <div>
+                      <label htmlFor={d.key}>{d.key}</label>
+                      <Input
+                        type={d.inputType}
+                        id={d.key}
+                        className="border-2 border-gray-200 rounded-md p-2 m-2"
+                        placeholder={d.key}
+                        defaultValue={d.defaultValue}
+                        min={d.min}
+                        max={d.max}
+                        step={d.step}
+                        {...formMethods.register(d.key, {
+                          required: true,
+                        })}
+                      />
+                    </div>
+                  );
+                })}
             </>
           )}
 
@@ -182,11 +189,15 @@ function ModelConfig() {
                 return (
                   <div>
                     <label htmlFor={d.key}>{d.key}</label>
-                    <TextInput
+                    <Input
+                      type={d.inputType}
                       id={d.key}
                       className="border-2 border-gray-200 rounded-md p-2 m-2"
                       placeholder={d.key}
                       defaultValue={d.defaultValue}
+                      min={d.min}
+                      max={d.max}
+                      step={d.step}
                       {...formMethods.register(d.key, {
                         required: false,
                       })}
@@ -209,19 +220,29 @@ function ModelConfig() {
                 tags={pkg.tags}
                 refUrl={pkg.refUrl}
                 icon={pkg.icon || modelInfo.icon}
-                onClick={(e) => {
+                dimensions={pkg.dimensions}
+                onClick={(e, dimensionChoices) => {
                   if (disableModelCards()) return;
                   const formParams: any = {};
                   for (const d of modelInfo.collectInputFor || []) {
                     formParams[d.key] =
                       d.inputType === "text"
                         ? formMethods.watch(d.key)
-                        : parseInt(formMethods.watch(d.key));
+                        : parseFloat(formMethods.watch(d.key));
                   }
 
                   client?.addModelForRole("*", modelInfo.class, {
                     ...pkg.params,
                     ...modelInfo.params,
+                    ..._.merge(
+                      {},
+                      ...(pkg.dimensions?.map((dimension, i) => {
+                        if (!dimensionChoices?.[i]) return {};
+                        return {
+                          ...dimension.options[dimensionChoices[i]],
+                        };
+                      }) || [])
+                    ),
                     ...formParams,
                   });
                   navigate("/");
@@ -239,7 +260,7 @@ function ModelConfig() {
                 formParams[d.key] =
                   d.inputType === "text"
                     ? formMethods.watch(d.key)
-                    : parseInt(formMethods.watch(d.key));
+                    : parseFloat(formMethods.watch(d.key));
               }
 
               client?.addModelForRole("*", modelInfo.class, {
diff --git a/extension/react-app/src/pages/models.tsx b/extension/react-app/src/pages/models.tsx
index a9a97a13..75c76d67 100644
--- a/extension/react-app/src/pages/models.tsx
+++ b/extension/react-app/src/pages/models.tsx
@@ -51,9 +51,6 @@ function Models() {
             icon={modelInfo.icon}
             refUrl={`https://continue.dev/docs/reference/Models/${modelInfo.class.toLowerCase()}`}
             onClick={(e) => {
-              if ((e.target as any).closest("a")) {
-                return;
-              }
               navigate(`/modelconfig/${name}`);
             }}
           />
diff --git a/extension/react-app/src/pages/settings.tsx b/extension/react-app/src/pages/settings.tsx
index cb269d7b..060a5b75 100644
--- a/extension/react-app/src/pages/settings.tsx
+++ b/extension/react-app/src/pages/settings.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { GUIClientContext } from "../App";
 import { useDispatch, useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
@@ -113,6 +113,13 @@ function Settings() {
     navigate("/");
   };
 
+  useEffect(() => {
+    if (!config) return;
+
+    formMethods.setValue("system_message", config.system_message);
+    formMethods.setValue("temperature", config.temperature);
+  }, [config]);
+
   return (
     <FormProvider {...formMethods}>
       <div className="overflow-scroll">
@@ -145,7 +152,6 @@ function Settings() {
               <TextArea
                 placeholder="Enter a system message (e.g. 'Always respond in German')"
                 {...formMethods.register("system_message")}
-                defaultValue={config.system_message}
               />
 
               <Hr />
@@ -164,7 +170,6 @@ function Settings() {
                   min="0"
                   max="1"
                   step="0.01"
-                  defaultValue={config.temperature}
                   {...formMethods.register("temperature")}
                 />
                 <p>1</p>