Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: move mode toggle out of settings #469

Merged
merged 5 commits into from
May 8, 2023
Merged

fix: move mode toggle out of settings #469

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
70f307f
fix: move mode toggle out of settings
Jshen123 May 7, 2023
a15821f
update switch ui
Jshen123 May 8, 2023
7f82b9c
adjust opacity to indicate disabled
Jshen123 May 8, 2023
118569a
increase opacity
Jshen123 May 8, 2023
d50570d
🐛 Re-add state unchecked
asim-shrestha May 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 38 additions & 11 deletions src/components/ChatWindow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
TASK_STATUS_EXECUTING,
TASK_STATUS_COMPLETED,
TASK_STATUS_FINAL,
AUTOMATIC_MODE,
PAUSE_MODE,
} from "../types/agentTypes";
import clsx from "clsx";
Expand Down Expand Up @@ -57,10 +58,12 @@ const ChatWindow = ({
}: ChatWindowProps) => {
const [t] = useTranslation();
const [hasUserScrolled, setHasUserScrolled] = useState(false);

const scrollRef = useRef<HTMLDivElement>(null);
const isAgentPaused = useAgentStore.use.isAgentPaused();
const agentMode = useAgentStore.use.agentMode();
const agent = useAgentStore.use.agent();
const updateAgentMode = useAgentStore.use.updateAgentMode();
const isWebSearchEnabled = useAgentStore.use.isWebSearchEnabled();
const setIsWebSearchEnabled = useAgentStore.use.setIsWebSearchEnabled();

Expand Down Expand Up @@ -93,6 +96,10 @@ const ChatWindow = ({
}
};

const handleUpdateAgentMode = (value: boolean) => {
updateAgentMode(value ? PAUSE_MODE : AUTOMATIC_MODE);
};

return (
<div
className={
Expand Down Expand Up @@ -167,22 +174,42 @@ const ChatWindow = ({
)}
</div>
{displaySettings && (
<>
<div className="flex items-center justify-center">
<div className="m-1 flex items-center gap-2 rounded-lg border-[2px] border-white/20 bg-zinc-700 px-2 py-1">
<p className="font-mono text-sm">Web search</p>
<Switch
value={isWebSearchEnabled}
onChange={handleChangeWebSearch}
/>
</div>
</div>
</>
<div className="flex flex-col items-center justify-center md:flex-row">
<SwitchContainer label="Web Search">
<Switch
disabled={agent !== null}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't be disabled

value={isWebSearchEnabled}
onChange={handleChangeWebSearch}
/>
</SwitchContainer>
<SwitchContainer label={PAUSE_MODE}>
<Switch
disabled={agent !== null}
value={agentMode === PAUSE_MODE}
onChange={handleUpdateAgentMode}
/>
</SwitchContainer>
</div>
)}
</div>
);
};

const SwitchContainer = ({
label,
children,
}: {
label: string;
children: React.ReactNode;
}) => {
return (
<div className="m-1 flex w-36 items-center justify-center gap-2 rounded-lg border-[2px] border-white/20 bg-zinc-700 px-2 py-1">
<p className="font-mono text-sm">{label}</p>
{children}
</div>
);
};

const ExampleAgentButton = ({
name,
children,
Expand Down
32 changes: 0 additions & 32 deletions src/components/SettingsDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
FaExclamationCircle,
FaSyncAlt,
FaCoins,
FaTachometerAlt,
} from "react-icons/fa";
import Dialog from "./Dialog";
import Input from "./Input";
Expand All @@ -16,8 +15,6 @@ import Accordion from "./Accordion";
import type { ModelSettings, SettingModel } from "../utils/types";
import LanguageCombobox from "./LanguageCombobox";
import clsx from "clsx";
import { AUTOMATIC_MODE, PAUSE_MODE } from "../types/agentTypes";
import { useAgentStore } from "./stores";
import { useTranslation } from "next-i18next";

export const SettingsDialog: React.FC<{
Expand All @@ -29,9 +26,6 @@ export const SettingsDialog: React.FC<{
...customSettings.settings,
});
const [t] = useTranslation();
const agent = useAgentStore.use.agent();
const agentMode = useAgentStore.use.agentMode();
const updateAgentMode = useAgentStore.use.updateAgentMode();

useEffect(() => {
setSettings(customSettings.settings);
Expand Down Expand Up @@ -244,32 +238,6 @@ export const SettingsDialog: React.FC<{
attributes={{ options: GPT_MODEL_NAMES }}
disabled={disabled}
/>
<Input
left={
<>
<FaTachometerAlt />
<span className="ml-2">{`${t("LABEL_MODE", {
ns: "settings",
})}`}</span>
</>
}
value={agentMode}
disabled={agent !== null}
onChange={() => null}
setValue={updateAgentMode as (agentMode: string) => void}
type="combobox"
toolTipProperties={{
message: `${t("AUTOMATIC_MODE", { ns: "settings" })} ${t(
"AUTOMATIC_MODE_DESCRIPTION",
{ ns: "settings" }
)} \n\n${t("PAUSE_MODE", { ns: "settings" })}: ${t(
"PAUSE_MODE_DESCRIPTION",
{ ns: "settings" }
)}`,
disabled: false,
}}
attributes={{ options: [AUTOMATIC_MODE, PAUSE_MODE] }}
/>
<Accordion
child={advancedSettings}
name={t("ADVANCED_SETTINGS", { ns: "settings" })}
Expand Down
12 changes: 7 additions & 5 deletions src/components/Switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import React, { useEffect, useState } from "react";

interface SwitchProps {
value: boolean;
disabled?: boolean;
onChange: (checked: boolean) => void;
}

const Switch = ({ value, onChange }: SwitchProps) => {
const Switch = ({ value, disabled = false, onChange }: SwitchProps) => {
const [checked, setChecked] = useState(false);

// Due to SSR, we should only change the internal state after the initial render
Expand All @@ -23,11 +24,12 @@ const Switch = ({ value, onChange }: SwitchProps) => {
<SwitchPrimitive.Root
className={clsx(
"group",
"radix-state-checked:bg-sky-600",
"radix-state-unchecked:bg-zinc-500 dark:radix-state-unchecked:bg-zinc-800",
"relative inline-flex h-4 w-7 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out",
"focus:outline-none focus-visible:ring focus-visible:ring-sky-500 focus-visible:ring-opacity-75"
"radix-state-checked:bg-sky-600 dark:radix-state-unchecked:bg-zinc-800",
"relative inline-flex h-4 w-7 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out",
"focus:outline-none focus-visible:ring focus-visible:ring-sky-500 focus-visible:ring-opacity-75",
disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer "
)}
disabled={disabled}
onCheckedChange={handleChange}
checked={checked}
>
Expand Down