summaryrefslogtreecommitdiff
path: root/extension/react-app
diff options
context:
space:
mode:
Diffstat (limited to 'extension/react-app')
-rw-r--r--extension/react-app/src/components/EditableDiv.tsx6
-rw-r--r--extension/react-app/src/components/ModelSettings.tsx5
-rw-r--r--extension/react-app/src/components/PillButton.tsx6
-rw-r--r--extension/react-app/src/components/StepContainer.tsx12
-rw-r--r--extension/react-app/src/components/StyledMarkdownPreview.tsx8
-rw-r--r--extension/react-app/src/components/Suggestions.tsx7
-rw-r--r--extension/react-app/src/components/TimelineItem.tsx11
-rw-r--r--extension/react-app/src/components/UserInputContainer.tsx11
-rw-r--r--extension/react-app/src/components/index.ts20
-rw-r--r--extension/react-app/src/pages/gui.tsx2
-rw-r--r--extension/react-app/src/pages/settings.tsx24
-rw-r--r--extension/react-app/src/util/index.ts5
12 files changed, 89 insertions, 28 deletions
diff --git a/extension/react-app/src/components/EditableDiv.tsx b/extension/react-app/src/components/EditableDiv.tsx
index a86bd692..1c295843 100644
--- a/extension/react-app/src/components/EditableDiv.tsx
+++ b/extension/react-app/src/components/EditableDiv.tsx
@@ -5,12 +5,13 @@ import {
secondaryDark,
vscForeground,
} from ".";
+import { getFontSize } from "../util";
-const Div = styled.div`
+const Div = styled.div<{ fontSize?: number }>`
resize: none;
padding: 8px;
- font-size: 13px;
+ font-size: ${(props) => props.fontSize || getFontSize()}px;
font-family: inherit;
border-radius: ${defaultBorderRadius};
margin: 8px auto;
@@ -45,6 +46,7 @@ interface EditableDivProps {
function EditableDiv(props: EditableDivProps) {
return (
<Div
+ fontSize={getFontSize()}
suppressContentEditableWarning={true}
contentEditable={true}
onChange={(e) => {
diff --git a/extension/react-app/src/components/ModelSettings.tsx b/extension/react-app/src/components/ModelSettings.tsx
index 06516687..ac5a344b 100644
--- a/extension/react-app/src/components/ModelSettings.tsx
+++ b/extension/react-app/src/components/ModelSettings.tsx
@@ -10,6 +10,7 @@ import {
} from ".";
import { useState } from "react";
import { useFormContext } from "react-hook-form";
+import { getFontSize } from "../util";
const Div = styled.div<{ dashed: boolean }>`
border: 1px ${(props) => (props.dashed ? "dashed" : "solid")} ${lightGray};
@@ -56,7 +57,7 @@ function ModelSettings(props: { llm: any | undefined; role: string }) {
<form>
{typeof modelOptions.api_key !== undefined && (
<>
- <Label>API Key</Label>
+ <Label fontSize={getFontSize()}>API Key</Label>
<TextInput
type="text"
defaultValue={props.llm.api_key}
@@ -67,7 +68,7 @@ function ModelSettings(props: { llm: any | undefined; role: string }) {
)}
{modelOptions.model && (
<>
- <Label>Model</Label>
+ <Label fontSize={getFontSize()}>Model</Label>
<TextInput
type="text"
defaultValue={props.llm.model}
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index 4e13428d..fb685a82 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -17,8 +17,9 @@ import { GUIClientContext } from "../App";
import { useDispatch } from "react-redux";
import { setBottomMessage } from "../redux/slices/uiStateSlice";
import { ContextItem } from "../../../schema/FullState";
+import { getFontSize } from "../util";
-const Button = styled.button`
+const Button = styled.button<{ fontSize?: number }>`
border: none;
color: ${vscForeground};
background-color: ${secondaryDark};
@@ -27,7 +28,7 @@ const Button = styled.button`
padding-left: 8px;
padding-right: 8px;
overflow: hidden;
- font-size: 13px;
+ font-size: ${(props) => props.fontSize || getFontSize()}px;
cursor: pointer;
`;
@@ -120,6 +121,7 @@ const PillButton = (props: PillButtonProps) => {
return (
<div style={{ position: "relative" }}>
<StyledButton
+ fontSize={getFontSize()}
borderColor={props.editing ? (warning ? "red" : undefined) : undefined}
onMouseEnter={() => {
setIsHovered(true);
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 61529227..e7264c5d 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -5,6 +5,7 @@ import { ArrowPathIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { HistoryNode } from "../../../schema/HistoryNode";
import HeaderButtonWithText from "./HeaderButtonWithText";
import StyledMarkdownPreview from "./StyledMarkdownPreview";
+import { getFontSize } from "../util";
interface StepContainerProps {
historyNode: HistoryNode;
@@ -41,12 +42,12 @@ const ButtonsDiv = styled.div`
height: 0;
`;
-const ContentDiv = styled.div<{ isUserInput: boolean }>`
+const ContentDiv = styled.div<{ isUserInput: boolean; fontSize?: number }>`
padding: 2px;
padding-right: 0px;
background-color: ${(props) =>
props.isUserInput ? secondaryDark : vscBackground};
- font-size: 13px;
+ font-size: ${(props) => props.fontSize || getFontSize()}px;
border-radius: ${defaultBorderRadius};
overflow: hidden;
`;
@@ -122,8 +123,13 @@ function StepContainer(props: StepContainerProps) {
</ButtonsDiv>
)}
- <ContentDiv hidden={!props.open} isUserInput={isUserInput}>
+ <ContentDiv
+ hidden={!props.open}
+ isUserInput={isUserInput}
+ fontSize={getFontSize()}
+ >
<StyledMarkdownPreview
+ fontSize={getFontSize()}
source={props.historyNode.step.description || ""}
wrapperElement={{
"data-color-mode": "dark",
diff --git a/extension/react-app/src/components/StyledMarkdownPreview.tsx b/extension/react-app/src/components/StyledMarkdownPreview.tsx
index f77360b2..78d4234c 100644
--- a/extension/react-app/src/components/StyledMarkdownPreview.tsx
+++ b/extension/react-app/src/components/StyledMarkdownPreview.tsx
@@ -7,8 +7,12 @@ import {
vscForeground,
} from ".";
import MarkdownPreview from "@uiw/react-markdown-preview";
+import { getFontSize } from "../util";
-const StyledMarkdownPreview = styled(MarkdownPreview)<{ light?: boolean }>`
+const StyledMarkdownPreview = styled(MarkdownPreview)<{
+ light?: boolean;
+ fontSize?: number;
+}>`
pre {
background-color: ${(props) =>
props.light ? vscBackground : secondaryDark};
@@ -34,7 +38,7 @@ const StyledMarkdownPreview = styled(MarkdownPreview)<{ light?: boolean }>`
background-color: ${(props) => (props.light ? "transparent" : vscBackground)};
font-family: "Lexend", sans-serif;
- font-size: 13px;
+ font-size: ${(props) => props.fontSize || getFontSize()}px;
padding: 8px;
color: ${vscForeground};
`;
diff --git a/extension/react-app/src/components/Suggestions.tsx b/extension/react-app/src/components/Suggestions.tsx
index c9d30de6..f0ee3bc0 100644
--- a/extension/react-app/src/components/Suggestions.tsx
+++ b/extension/react-app/src/components/Suggestions.tsx
@@ -15,6 +15,7 @@ import {
import { useSelector } from "react-redux";
import { RootStore } from "../redux/store";
import HeaderButtonWithText from "./HeaderButtonWithText";
+import { getFontSize } from "../util";
const Div = styled.div<{ isDisabled: boolean }>`
border-radius: ${defaultBorderRadius};
@@ -35,8 +36,8 @@ const Div = styled.div<{ isDisabled: boolean }>`
}
`;
-const P = styled.p`
- font-size: 13px;
+const P = styled.p<{ fontSize: number }>`
+ font-size: ${(props) => props.fontSize}px;
margin: 0;
`;
@@ -66,7 +67,7 @@ function SuggestionsDiv(props: SuggestionsDivProps) {
onMouseLeave={() => setIsHovered(false)}
isDisabled={props.disabled}
>
- <P>{props.description}</P>
+ <P fontSize={getFontSize()}>{props.description}</P>
<PaperAirplaneIcon
width="1.6em"
height="1.6em"
diff --git a/extension/react-app/src/components/TimelineItem.tsx b/extension/react-app/src/components/TimelineItem.tsx
index 78568890..f54788eb 100644
--- a/extension/react-app/src/components/TimelineItem.tsx
+++ b/extension/react-app/src/components/TimelineItem.tsx
@@ -1,7 +1,8 @@
import React from "react";
-import { lightGray, secondaryDark, vscBackground } from ".";
+import { lightGray, vscBackground } from ".";
import styled from "styled-components";
-import { ChatBubbleOvalLeftIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { ChatBubbleOvalLeftIcon } from "@heroicons/react/24/outline";
+import { getFontSize } from "../util";
const CollapseButton = styled.div`
background-color: ${vscBackground};
@@ -14,14 +15,14 @@ const CollapseButton = styled.div`
cursor: pointer;
`;
-const CollapsedDiv = styled.div`
+const CollapsedDiv = styled.div<{ fontSize?: number }>`
margin-top: 8px;
margin-bottom: 8px;
margin-left: 8px;
display: flex;
align-items: center;
gap: 4px;
- font-size: 13px;
+ font-size: ${(props) => props.fontSize || getFontSize()}px;
min-height: 16px;
`;
@@ -37,7 +38,7 @@ function TimelineItem(props: TimelineItemProps) {
return props.open ? (
props.children
) : (
- <CollapsedDiv>
+ <CollapsedDiv fontSize={getFontSize()}>
<CollapseButton
onClick={() => {
props.onToggle();
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index 15f1752f..11671526 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -24,7 +24,11 @@ import {
} from "@heroicons/react/24/outline";
import { HistoryNode } from "../../../schema/HistoryNode";
import { GUIClientContext } from "../App";
-import { getMetaKeyLabel, isMetaEquivalentKeyPressed } from "../util";
+import {
+ getFontSize,
+ getMetaKeyLabel,
+ isMetaEquivalentKeyPressed,
+} from "../util";
import { RootStore } from "../redux/store";
import { useSelector } from "react-redux";
@@ -91,8 +95,8 @@ const GradientBorder = styled.div<{
background-size: 200% 200%;
`;
-const StyledDiv = styled.div<{ editing: boolean }>`
- font-size: 13px;
+const StyledDiv = styled.div<{ editing: boolean; fontSize?: number }>`
+ font-size: ${(props) => props.fontSize || getFontSize()}px;
font-family: inherit;
border-radius: ${defaultBorderRadius};
height: auto;
@@ -204,6 +208,7 @@ const UserInputContainer = (props: UserInputContainerProps) => {
borderRadius={defaultBorderRadius}
>
<StyledDiv
+ fontSize={getFontSize()}
editing={isEditing}
onMouseEnter={() => {
setIsHovered(true);
diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts
index 510740f8..1c27527c 100644
--- a/extension/react-app/src/components/index.ts
+++ b/extension/react-app/src/components/index.ts
@@ -1,5 +1,6 @@
import { Tooltip } from "react-tooltip";
import styled, { keyframes } from "styled-components";
+import { getFontSize } from "../util";
export const defaultBorderRadius = "5px";
export const lightGray = "#646464";
@@ -107,6 +108,21 @@ export const TextInput = styled.input.attrs({ type: "text" })`
}
`;
+export const NumberInput = styled.input.attrs({ type: "number" })`
+ padding: 8px 12px;
+ margin: 8px 4px;
+ box-sizing: border-box;
+ border-radius: ${defaultBorderRadius};
+ outline: 1px solid ${lightGray};
+ border: none;
+ background-color: ${vscBackground};
+ color: ${vscForeground};
+
+ &:focus {
+ background: ${secondaryDark};
+ }
+`;
+
export const Select = styled.select`
padding: 8px 12px;
margin: 8px 0;
@@ -118,8 +134,8 @@ export const Select = styled.select`
color: ${vscForeground};
`;
-export const Label = styled.label`
- font-size: 13px;
+export const Label = styled.label<{ fontSize?: number }>`
+ font-size: ${(props) => props.fontSize || getFontSize()}px;
`;
const spin = keyframes`
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index f6a09bbc..576abd40 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -279,7 +279,7 @@ function GUI(props: GUIProps) {
}
// cmd+enter to /edit
- if (isMetaEquivalentKeyPressed(event)) {
+ if (event && isMetaEquivalentKeyPressed(event)) {
input = `/edit ${input}`;
}
(mainTextInputRef.current as any).setInputValue("");
diff --git a/extension/react-app/src/pages/settings.tsx b/extension/react-app/src/pages/settings.tsx
index 4bd51163..cb269d7b 100644
--- a/extension/react-app/src/pages/settings.tsx
+++ b/extension/react-app/src/pages/settings.tsx
@@ -6,18 +6,18 @@ import { useNavigate } from "react-router-dom";
import { ContinueConfig } from "../../../schema/ContinueConfig";
import {
Button,
+ NumberInput,
TextArea,
lightGray,
secondaryDark,
vscBackground,
} from "../components";
import styled from "styled-components";
-import { ArrowLeftIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
import Loader from "../components/Loader";
import InfoHover from "../components/InfoHover";
import { FormProvider, useForm } from "react-hook-form";
-import { setDialogMessage, setShowDialog } from "../redux/slices/uiStateSlice";
-import KeyboardShortcutsDialog from "../components/dialogs/KeyboardShortcuts";
+import { getFontSize } from "../util";
const Hr = styled.hr`
border: 0.5px solid ${lightGray};
@@ -219,6 +219,24 @@ function Settings() {
)}
</form>
+ <hr />
+
+ <div className="px-2">
+ <h3>Appearance</h3>
+
+ <p>Font Size</p>
+ <NumberInput
+ type="number"
+ min="8"
+ max="48"
+ step="1"
+ defaultValue={getFontSize()}
+ onChange={(e) => {
+ localStorage.setItem("fontSize", e.target.value);
+ }}
+ />
+ </div>
+
<div className="flex gap-2 justify-end px-4">
<CancelButton
onClick={() => {
diff --git a/extension/react-app/src/util/index.ts b/extension/react-app/src/util/index.ts
index c4168e13..fd74044d 100644
--- a/extension/react-app/src/util/index.ts
+++ b/extension/react-app/src/util/index.ts
@@ -41,3 +41,8 @@ export function getMetaKeyLabel(): string {
return "⌘";
}
}
+
+export function getFontSize(): number {
+ const fontSize = localStorage.getItem("fontSize");
+ return fontSize ? parseInt(fontSize) : 13;
+}
generated by cgit v1.2.3-70-g09d2 (git 2.48.1) at 2025-02-04 08:33:18 +0000