From 03aa183f42ded94ca1f752138f3b2d4f792d1bc9 Mon Sep 17 00:00:00 2001 From: Yashwanth S C Date: Wed, 16 Oct 2024 19:51:44 +0530 Subject: [PATCH 1/6] Update settings-form.tsx --- .../src/components/form/settings-form.tsx | 95 ++++++++++++++----- 1 file changed, 72 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/form/settings-form.tsx b/frontend/src/components/form/settings-form.tsx index ab5cf6bfdbbc..4146fb5483dc 100644 --- a/frontend/src/components/form/settings-form.tsx +++ b/frontend/src/components/form/settings-form.tsx @@ -1,19 +1,19 @@ +import { ModalBackdrop } from "#/components/modals/modal-backdrop"; +import { ModelSelector } from "#/components/modals/settings/ModelSelector"; +import { clientAction } from "#/routes/settings"; +import { Settings } from "#/services/settings"; +import { extractModelAndProvider } from "#/utils/extractModelAndProvider"; +import { organizeModelsAndProviders } from "#/utils/organizeModelsAndProviders"; import { Autocomplete, AutocompleteItem, Input, Switch, } from "@nextui-org/react"; -import React from "react"; -import clsx from "clsx"; import { useFetcher, useLocation, useNavigate } from "@remix-run/react"; -import { organizeModelsAndProviders } from "#/utils/organizeModelsAndProviders"; -import { ModelSelector } from "#/components/modals/settings/ModelSelector"; -import { Settings } from "#/services/settings"; -import { ModalBackdrop } from "#/components/modals/modal-backdrop"; +import clsx from "clsx"; +import React from "react"; import ModalButton from "../buttons/ModalButton"; -import { clientAction } from "#/routes/settings"; -import { extractModelAndProvider } from "#/utils/extractModelAndProvider"; import { DangerModal } from "../modals/confirmation-modals/danger-modal"; interface SettingsFormProps { @@ -79,6 +79,12 @@ export function SettingsForm({ React.useState(false); const [confirmEndSessionModalOpen, setConfirmEndSessionModalOpen] = React.useState(false); + const [showWarningModal, setShowWarningModal] = React.useState(false); +const [hasEnteredKey, setHasEnteredKey] = React.useState(!!settings.LLM_API_KEY); + +React.useEffect(() => { + setHasEnteredKey(!!settings.LLM_API_KEY); +}, [settings.LLM_API_KEY]); const submitForm = (formData: FormData) => { if (location.pathname === "/app") formData.set("end-session", "true"); @@ -106,7 +112,31 @@ export function SettingsForm({ submitForm(formData); } }; + const handleCloseClick = () => { + console.log("Close clicked, hasEnteredKey:", hasEnteredKey); + if (!hasEnteredKey) { + console.log("Showing warning modal"); + setShowWarningModal(true); + } else { + console.log("Closing settings"); + onClose(); + } + }; + const handleWarningConfirm = () => { + setShowWarningModal(false); + onClose(); + }; + + const handleWarningCancel = () => { + setShowWarningModal(false); + }; + + const handleApiKeyChange = (event: React.ChangeEvent) => { + const newValue = !!event.target.value; + console.log("API key changed, new value:", newValue); + setHasEnteredKey(newValue); + }; return (
+ isDisabled={disabled} + id="api-key" + name="api-key" + aria-label="API Key" + type="password" + defaultValue={settings.LLM_API_KEY} + onChange={handleApiKeyChange} + classNames={{ + inputWrapper: "bg-[#27272A] rounded-md text-sm px-3 py-[10px]", + }} + />

Don't know your API key?{" "} + text="Close" + className="bg-[#737373] w-full" + onClick={handleCloseClick} + />

)} + {showWarningModal && ( + + + + )} ); } From a3aa4941a3d8de529b364b7dc5e51baf24adef6f Mon Sep 17 00:00:00 2001 From: Yashwanth S C Date: Thu, 17 Oct 2024 20:31:26 +0530 Subject: [PATCH 2/6] Update settings-form.tsx --- .../src/components/form/settings-form.tsx | 73 +++++++++---------- 1 file changed, 34 insertions(+), 39 deletions(-) diff --git a/frontend/src/components/form/settings-form.tsx b/frontend/src/components/form/settings-form.tsx index 4146fb5483dc..5f83cab18c0a 100644 --- a/frontend/src/components/form/settings-form.tsx +++ b/frontend/src/components/form/settings-form.tsx @@ -1,18 +1,18 @@ -import { ModalBackdrop } from "#/components/modals/modal-backdrop"; -import { ModelSelector } from "#/components/modals/settings/ModelSelector"; -import { clientAction } from "#/routes/settings"; -import { Settings } from "#/services/settings"; -import { extractModelAndProvider } from "#/utils/extractModelAndProvider"; -import { organizeModelsAndProviders } from "#/utils/organizeModelsAndProviders"; +import React from "react"; +import { useLocation, useNavigate, useFetcher } from "@remix-run/react"; import { Autocomplete, AutocompleteItem, Input, Switch, } from "@nextui-org/react"; -import { useFetcher, useLocation, useNavigate } from "@remix-run/react"; import clsx from "clsx"; -import React from "react"; +import { ModalBackdrop } from "#/components/modals/modal-backdrop"; +import { ModelSelector } from "#/components/modals/settings/ModelSelector"; +import { clientAction } from "#/routes/settings"; +import { Settings } from "#/services/settings"; +import { extractModelAndProvider } from "#/utils/extractModelAndProvider"; +import { organizeModelsAndProviders } from "#/utils/organizeModelsAndProviders"; import ModalButton from "../buttons/ModalButton"; import { DangerModal } from "../modals/confirmation-modals/danger-modal"; @@ -44,7 +44,7 @@ export function SettingsForm({ navigate("/"); onClose(); } - }, [fetcher.data]); + }, [fetcher.data, navigate, onClose]); // Figure out if the advanced options should be enabled by default const advancedAlreadyInUse = React.useMemo(() => { @@ -73,18 +73,15 @@ export function SettingsForm({ return false; }, [settings, models]); - const [showAdvancedOptions, setShowAdvancedOptions] = - React.useState(advancedAlreadyInUse); - const [confirmResetDefaultsModalOpen, setConfirmResetDefaultsModalOpen] = - React.useState(false); - const [confirmEndSessionModalOpen, setConfirmEndSessionModalOpen] = - React.useState(false); - const [showWarningModal, setShowWarningModal] = React.useState(false); -const [hasEnteredKey, setHasEnteredKey] = React.useState(!!settings.LLM_API_KEY); + const [showAdvancedOptions, setShowAdvancedOptions] = React.useState(advancedAlreadyInUse); + const [confirmResetDefaultsModalOpen, setConfirmResetDefaultsModalOpen] = React.useState(false); + const [confirmEndSessionModalOpen, setConfirmEndSessionModalOpen] = React.useState(false); + const [showWarningModal, setShowWarningModal] = React.useState(false); + const [hasEnteredKey, setHasEnteredKey] = React.useState(!!settings.LLM_API_KEY); -React.useEffect(() => { - setHasEnteredKey(!!settings.LLM_API_KEY); -}, [settings.LLM_API_KEY]); + React.useEffect(() => { + setHasEnteredKey(!!settings.LLM_API_KEY); + }, [settings.LLM_API_KEY]); const submitForm = (formData: FormData) => { if (location.pathname === "/app") formData.set("end-session", "true"); @@ -112,13 +109,11 @@ React.useEffect(() => { submitForm(formData); } }; + const handleCloseClick = () => { - console.log("Close clicked, hasEnteredKey:", hasEnteredKey); if (!hasEnteredKey) { - console.log("Showing warning modal"); setShowWarningModal(true); } else { - console.log("Closing settings"); onClose(); } }; @@ -134,9 +129,9 @@ React.useEffect(() => { const handleApiKeyChange = (event: React.ChangeEvent) => { const newValue = !!event.target.value; - console.log("API key changed, new value:", newValue); setHasEnteredKey(newValue); }; + return (
{ API Key + isDisabled={disabled} + id="api-key" + name="api-key" + aria-label="API Key" + type="password" + defaultValue={settings.LLM_API_KEY} + onChange={handleApiKeyChange} + classNames={{ + inputWrapper: "bg-[#27272A] rounded-md text-sm px-3 py-[10px]", + }} + />

Don't know your API key?{" "} { className="bg-[#4465DB] w-full" /> + text="Close" + className="bg-[#737373] w-full" + onClick={handleCloseClick} + />

Date: Fri, 18 Oct 2024 09:21:16 +0530 Subject: [PATCH 3/6] solved eslint issues --- .../src/components/form/settings-form.tsx | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/form/settings-form.tsx b/frontend/src/components/form/settings-form.tsx index 5f83cab18c0a..6993b5bff635 100644 --- a/frontend/src/components/form/settings-form.tsx +++ b/frontend/src/components/form/settings-form.tsx @@ -46,12 +46,11 @@ export function SettingsForm({ } }, [fetcher.data, navigate, onClose]); - // Figure out if the advanced options should be enabled by default const advancedAlreadyInUse = React.useMemo(() => { if (models.length > 0) { const organizedModels = organizeModelsAndProviders(models); const { provider, model } = extractModelAndProvider( - settings.LLM_MODEL || "", + settings.LLM_MODEL || "" ); const isKnownModel = provider in organizedModels && @@ -73,11 +72,17 @@ export function SettingsForm({ return false; }, [settings, models]); - const [showAdvancedOptions, setShowAdvancedOptions] = React.useState(advancedAlreadyInUse); - const [confirmResetDefaultsModalOpen, setConfirmResetDefaultsModalOpen] = React.useState(false); - const [confirmEndSessionModalOpen, setConfirmEndSessionModalOpen] = React.useState(false); + const [showAdvancedOptions, setShowAdvancedOptions] = React.useState( + advancedAlreadyInUse + ); + const [confirmResetDefaultsModalOpen, setConfirmResetDefaultsModalOpen] = + React.useState(false); + const [confirmEndSessionModalOpen, setConfirmEndSessionModalOpen] = + React.useState(false); const [showWarningModal, setShowWarningModal] = React.useState(false); - const [hasEnteredKey, setHasEnteredKey] = React.useState(!!settings.LLM_API_KEY); + const [hasEnteredKey, setHasEnteredKey] = React.useState( + !!settings.LLM_API_KEY + ); React.useEffect(() => { setHasEnteredKey(!!settings.LLM_API_KEY); @@ -151,11 +156,11 @@ export function SettingsForm({ classNames={{ thumb: clsx( "bg-[#5D5D5D] w-3 h-3 z-0", - "group-data-[selected=true]:bg-white", + "group-data-[selected=true]:bg-white" ), wrapper: clsx( "border border-[#D4D4D4] bg-white px-[6px] w-12 h-6", - "group-data-[selected=true]:border-transparent group-data-[selected=true]:bg-[#4465DB]", + "group-data-[selected=true]:border-transparent group-data-[selected=true]:bg-[#4465DB]" ), label: "text-[#A3A3A3] text-xs", }} @@ -325,11 +330,11 @@ export function SettingsForm({ classNames={{ thumb: clsx( "bg-[#5D5D5D] w-3 h-3", - "group-data-[selected=true]:bg-white", + "group-data-[selected=true]:bg-white" ), wrapper: clsx( "border border-[#D4D4D4] bg-white px-[6px] w-12 h-6", - "group-data-[selected=true]:border-transparent group-data-[selected=true]:bg-[#4465DB]", + "group-data-[selected=true]:border-transparent group-data-[selected=true]:bg-[#4465DB]" ), label: "text-[#A3A3A3] text-xs", }} From b8e4e2ee792a3d08d0c7faf7c6f936e5d4ebeaa8 Mon Sep 17 00:00:00 2001 From: Yashwanth S C Date: Fri, 18 Oct 2024 09:41:51 +0530 Subject: [PATCH 4/6] Update settings-form.tsx --- .../src/components/form/settings-form.tsx | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/form/settings-form.tsx b/frontend/src/components/form/settings-form.tsx index 6993b5bff635..b5ac270a859e 100644 --- a/frontend/src/components/form/settings-form.tsx +++ b/frontend/src/components/form/settings-form.tsx @@ -1,12 +1,12 @@ +import clsx from "clsx"; import React from "react"; -import { useLocation, useNavigate, useFetcher } from "@remix-run/react"; import { Autocomplete, AutocompleteItem, Input, Switch, } from "@nextui-org/react"; -import clsx from "clsx"; +import { useFetcher, useLocation, useNavigate } from "@remix-run/react"; import { ModalBackdrop } from "#/components/modals/modal-backdrop"; import { ModelSelector } from "#/components/modals/settings/ModelSelector"; import { clientAction } from "#/routes/settings"; @@ -44,13 +44,14 @@ export function SettingsForm({ navigate("/"); onClose(); } - }, [fetcher.data, navigate, onClose]); + }, [fetcher.data]); + // Figure out if the advanced options should be enabled by default const advancedAlreadyInUse = React.useMemo(() => { if (models.length > 0) { const organizedModels = organizeModelsAndProviders(models); const { provider, model } = extractModelAndProvider( - settings.LLM_MODEL || "" + settings.LLM_MODEL || "", ); const isKnownModel = provider in organizedModels && @@ -72,16 +73,15 @@ export function SettingsForm({ return false; }, [settings, models]); - const [showAdvancedOptions, setShowAdvancedOptions] = React.useState( - advancedAlreadyInUse - ); + const [showAdvancedOptions, setShowAdvancedOptions] = + React.useState(advancedAlreadyInUse); const [confirmResetDefaultsModalOpen, setConfirmResetDefaultsModalOpen] = React.useState(false); const [confirmEndSessionModalOpen, setConfirmEndSessionModalOpen] = React.useState(false); const [showWarningModal, setShowWarningModal] = React.useState(false); const [hasEnteredKey, setHasEnteredKey] = React.useState( - !!settings.LLM_API_KEY + !!settings.LLM_API_KEY, ); React.useEffect(() => { @@ -114,11 +114,13 @@ export function SettingsForm({ submitForm(formData); } }; - const handleCloseClick = () => { + console.log("Close clicked, hasEnteredKey:", hasEnteredKey); if (!hasEnteredKey) { + console.log("Showing warning modal"); setShowWarningModal(true); } else { + console.log("Closing settings"); onClose(); } }; @@ -134,9 +136,9 @@ export function SettingsForm({ const handleApiKeyChange = (event: React.ChangeEvent) => { const newValue = !!event.target.value; + console.log("API key changed, new value:", newValue); setHasEnteredKey(newValue); }; - return (
Date: Fri, 18 Oct 2024 18:40:01 +0530 Subject: [PATCH 5/6] Update settings-form.tsx --- .../src/components/form/settings-form.tsx | 32 +++++++------------ 1 file changed, 11 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/form/settings-form.tsx b/frontend/src/components/form/settings-form.tsx index b5ac270a859e..15f5fcd6170e 100644 --- a/frontend/src/components/form/settings-form.tsx +++ b/frontend/src/components/form/settings-form.tsx @@ -44,9 +44,8 @@ export function SettingsForm({ navigate("/"); onClose(); } - }, [fetcher.data]); + }, [fetcher.data, navigate, onClose]); - // Figure out if the advanced options should be enabled by default const advancedAlreadyInUse = React.useMemo(() => { if (models.length > 0) { const organizedModels = organizeModelsAndProviders(models); @@ -80,13 +79,6 @@ export function SettingsForm({ const [confirmEndSessionModalOpen, setConfirmEndSessionModalOpen] = React.useState(false); const [showWarningModal, setShowWarningModal] = React.useState(false); - const [hasEnteredKey, setHasEnteredKey] = React.useState( - !!settings.LLM_API_KEY, - ); - - React.useEffect(() => { - setHasEnteredKey(!!settings.LLM_API_KEY); - }, [settings.LLM_API_KEY]); const submitForm = (formData: FormData) => { if (location.pathname === "/app") formData.set("end-session", "true"); @@ -106,21 +98,25 @@ export function SettingsForm({ const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); + const formData = new FormData(event.currentTarget); + const apiKey = formData.get("api-key"); - if (location.pathname === "/app") { + if (!apiKey) { + setShowWarningModal(true); + } else if (location.pathname === "/app") { setConfirmEndSessionModalOpen(true); } else { - const formData = new FormData(event.currentTarget); submitForm(formData); } }; + const handleCloseClick = () => { - console.log("Close clicked, hasEnteredKey:", hasEnteredKey); - if (!hasEnteredKey) { - console.log("Showing warning modal"); + const formData = new FormData(formRef.current ?? undefined); + const apiKey = formData.get("api-key"); + + if (!apiKey) { setShowWarningModal(true); } else { - console.log("Closing settings"); onClose(); } }; @@ -134,11 +130,6 @@ export function SettingsForm({ setShowWarningModal(false); }; - const handleApiKeyChange = (event: React.ChangeEvent) => { - const newValue = !!event.target.value; - console.log("API key changed, new value:", newValue); - setHasEnteredKey(newValue); - }; return (
Date: Mon, 21 Oct 2024 15:08:55 +0530 Subject: [PATCH 6/6] Update settings-form.tsx --- frontend/src/components/form/settings-form.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/form/settings-form.tsx b/frontend/src/components/form/settings-form.tsx index 15f5fcd6170e..8945efb70e73 100644 --- a/frontend/src/components/form/settings-form.tsx +++ b/frontend/src/components/form/settings-form.tsx @@ -1,5 +1,3 @@ -import clsx from "clsx"; -import React from "react"; import { Autocomplete, AutocompleteItem, @@ -7,6 +5,8 @@ import { Switch, } from "@nextui-org/react"; import { useFetcher, useLocation, useNavigate } from "@remix-run/react"; +import clsx from "clsx"; +import React from "react"; import { ModalBackdrop } from "#/components/modals/modal-backdrop"; import { ModelSelector } from "#/components/modals/settings/ModelSelector"; import { clientAction } from "#/routes/settings"; @@ -123,6 +123,9 @@ export function SettingsForm({ const handleWarningConfirm = () => { setShowWarningModal(false); + const formData = new FormData(formRef.current ?? undefined); + formData.set("api-key", ""); // Set null value for API key + submitForm(formData); onClose(); };