summaryrefslogtreecommitdiff
path: root/extension/react-app/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'extension/react-app/src/pages')
-rw-r--r--extension/react-app/src/pages/gui.tsx10
-rw-r--r--extension/react-app/src/pages/history.tsx6
-rw-r--r--extension/react-app/src/pages/modelconfig.tsx63
-rw-r--r--extension/react-app/src/pages/models.tsx3
-rw-r--r--extension/react-app/src/pages/settings.tsx11
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>
generated by cgit v1.2.3-70-g09d2 (git 2.48.1) at 2025-02-02 03:56:01 +0000