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

Allow editing of LLM settings from workspace settings #2865

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+110 −46
Open

Allow editing of LLM settings from workspace settings #2865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e0c5681
wip change workspace llm settings
shatfield4 Dec 17, 2024
e5da4c6
Merge branch 'master' into 2834-bug-generic-openai-llm-provider-can-n…
shatfield4 Dec 17, 2024
786d76f
allow editing of workspace llm and agent config inside workspace sett…
shatfield4 Dec 17, 2024
054f3c6
lint + put back deleted comment
shatfield4 Dec 17, 2024
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
78 changes: 55 additions & 23 deletions frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@
import { createPortal } from "react-dom";
import ModalWrapper from "@/components/ModalWrapper";
import { useModal } from "@/hooks/useModal";
import { X } from "@phosphor-icons/react";
import { X, Gear } from "@phosphor-icons/react";
import System from "@/models/system";
import showToast from "@/utils/toast";
import { useEffect, useState } from "react";

export default function WorkspaceLLM({
export default function AgentLLMItem({
llm,
availableLLMs,
settings,
Expand All @@ -17,18 +18,31 @@ export default function WorkspaceLLM({
}) {
const { isOpen, openModal, closeModal } = useModal();
const { name, value, logo, description } = llm;
const [currentSettings, setCurrentSettings] = useState(settings);

useEffect(() => {
async function getSettings() {
if (isOpen) {
const _settings = await System.keys();
setCurrentSettings(_settings ?? {});
}
}
getSettings();
}, [isOpen]);

function handleProviderSelection() {
// Determine if provider needs additional setup because its minimum required keys are
// not yet set in settings.
const requiresAdditionalSetup = (llm.requiredConfig || []).some(
(key) => !settings[key]
);
if (requiresAdditionalSetup) {
openModal();
return;
if (!checked) {
const requiresAdditionalSetup = (llm.requiredConfig || []).some(
(key) => !currentSettings[key]
);
if (requiresAdditionalSetup) {
openModal();
return;
}
onClick(value);
}
onClick(value);
}

return (
Expand All @@ -47,16 +61,30 @@ export default function WorkspaceLLM({
readOnly={true}
formNoValidate={true}
/>
<div className="flex gap-x-4 items-center">
<img
src={logo}
alt={`${name} logo`}
className="w-10 h-10 rounded-md"
/>
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
<div className="mt-1 text-xs text-white/60">{description}</div>
<div className="flex gap-x-4 items-center justify-between">
<div className="flex gap-x-4 items-center">
<img
src={logo}
alt={`${name} logo`}
className="w-10 h-10 rounded-md"
/>
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
<div className="mt-1 text-xs text-white/60">{description}</div>
</div>
</div>
{checked && value !== "none" && (
<button
onClick={(e) => {
e.preventDefault();
openModal();
}}
className="p-2 text-white/60 hover:text-white hover:bg-theme-bg-hover rounded-md transition-all duration-300"
title="Edit Settings"
>
<Gear size={20} weight="bold" />
</button>
)}
</div>
</div>
<SetupProvider
Expand All @@ -65,6 +93,7 @@ export default function WorkspaceLLM({
provider={value}
closeModal={closeModal}
postSubmit={onClick}
settings={currentSettings}
/>
</>
);
Expand All @@ -76,6 +105,7 @@ function SetupProvider({
provider,
closeModal,
postSubmit,
settings,
}) {
if (!isOpen) return null;
const LLMOption = availableLLMs.find((llm) => llm.value === provider);
Expand Down Expand Up @@ -107,7 +137,7 @@ function SetupProvider({
<div className="relative p-6 border-b rounded-t border-theme-modal-border">
<div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Setup {LLMOption.name}
{LLMOption.name} Settings
</h3>
</div>
<button
Expand All @@ -120,12 +150,14 @@ function SetupProvider({
</div>
<form id="provider-form" onSubmit={handleUpdate}>
<div className="px-7 py-6">
<div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<div className="space-y-6 max-h-[60vh] overflow-y-auto p-1">
<p className="text-sm text-white/60">
To use {LLMOption.name} as this workspace's LLM you need to
set it up first.
To use {LLMOption.name} as this workspace's agent LLM you need
to set it up first.
</p>
<div>{LLMOption.options({ credentialsOnly: true })}</div>
<div>
{LLMOption.options(settings, { credentialsOnly: true })}
</div>
</div>
</div>
<div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border px-7 pb-6">
Expand Down
4 changes: 2 additions & 2 deletions ...c/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/ChatModelSelection/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function ChatModelSelection({
if (loading) {
return (
<div>
<div className="flex flex-col">
<div className="flex flex-col mt-6">
<label htmlFor="name" className="block input-label">
{t("chat.model.title")}
</label>
Expand All @@ -40,7 +40,7 @@ export default function ChatModelSelection({

return (
<div>
<div className="flex flex-col">
<div className="flex flex-col mt-6">
<label htmlFor="name" className="block input-label">
{t("chat.model.title")}
</label>
Expand Down
74 changes: 53 additions & 21 deletions ...src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@
import { createPortal } from "react-dom";
import ModalWrapper from "@/components/ModalWrapper";
import { useModal } from "@/hooks/useModal";
import { X } from "@phosphor-icons/react";
import { X, Gear } from "@phosphor-icons/react";
import System from "@/models/system";
import showToast from "@/utils/toast";
import { useEffect, useState } from "react";

export default function WorkspaceLLM({
llm,
Expand All @@ -17,18 +18,31 @@ export default function WorkspaceLLM({
}) {
const { isOpen, openModal, closeModal } = useModal();
const { name, value, logo, description } = llm;
const [currentSettings, setCurrentSettings] = useState(settings);

useEffect(() => {
async function getSettings() {
if (isOpen) {
const _settings = await System.keys();
setCurrentSettings(_settings ?? {});
}
}
getSettings();
}, [isOpen]);

function handleProviderSelection() {
// Determine if provider needs additional setup because its minimum required keys are
// not yet set in settings.
const requiresAdditionalSetup = (llm.requiredConfig || []).some(
(key) => !settings[key]
);
if (requiresAdditionalSetup) {
openModal();
return;
if (!checked) {
const requiresAdditionalSetup = (llm.requiredConfig || []).some(
(key) => !currentSettings[key]
);
if (requiresAdditionalSetup) {
openModal();
return;
}
onClick(value);
}
onClick(value);
}

return (
Expand All @@ -47,16 +61,30 @@ export default function WorkspaceLLM({
readOnly={true}
formNoValidate={true}
/>
<div className="flex gap-x-4 items-center">
<img
src={logo}
alt={`${name} logo`}
className="w-10 h-10 rounded-md"
/>
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
<div className="mt-1 text-xs text-white/60">{description}</div>
<div className="flex gap-x-4 items-center justify-between">
<div className="flex gap-x-4 items-center">
<img
src={logo}
alt={`${name} logo`}
className="w-10 h-10 rounded-md"
/>
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
<div className="mt-1 text-xs text-white/60">{description}</div>
</div>
</div>
{checked && (
<button
onClick={(e) => {
e.preventDefault();
openModal();
}}
className="p-2 text-white/60 hover:text-white hover:bg-theme-bg-hover rounded-md transition-all duration-300"
title="Edit Settings"
>
<Gear size={20} weight="bold" />
</button>
)}
</div>
</div>
<SetupProvider
Expand All @@ -65,6 +93,7 @@ export default function WorkspaceLLM({
provider={value}
closeModal={closeModal}
postSubmit={onClick}
settings={currentSettings}
/>
</>
);
Expand All @@ -76,6 +105,7 @@ function SetupProvider({
provider,
closeModal,
postSubmit,
settings,
}) {
if (!isOpen) return null;
const LLMOption = availableLLMs.find((llm) => llm.value === provider);
Expand Down Expand Up @@ -107,7 +137,7 @@ function SetupProvider({
<div className="relative p-6 border-b rounded-t border-theme-modal-border">
<div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Setup {LLMOption.name}
{LLMOption.name} Settings
</h3>
</div>
<button
Expand All @@ -120,12 +150,14 @@ function SetupProvider({
</div>
<form id="provider-form" onSubmit={handleUpdate}>
<div className="px-7 py-6">
<div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<div className="space-y-6 max-h-[60vh] overflow-y-auto p-1">
<p className="text-sm text-white/60">
To use {LLMOption.name} as this workspace's LLM you need to
set it up first.
</p>
<div>{LLMOption.options({ credentialsOnly: true })}</div>
<div>
{LLMOption.options(settings, { credentialsOnly: true })}
</div>
</div>
</div>
<div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border px-7 pb-6">
Expand All @@ -141,7 +173,7 @@ function SetupProvider({
form="provider-form"
className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
>
Save {LLMOption.name} settings
Save settings
</button>
</div>
</form>
Expand Down