From e0c56812b053f078eeddf3d29dad90d93206bdd7 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 16 Dec 2024 18:16:40 -0800
Subject: [PATCH 1/3] wip change workspace llm settings

---
 .../WorkspaceLLMItem/index.jsx                | 70 +++++++++++++------
 1 file changed, 50 insertions(+), 20 deletions(-)

diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
index a8017b2ec5e..bc428fbbd1b 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
@@ -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,
@@ -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 (
@@ -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
@@ -65,6 +93,7 @@ export default function WorkspaceLLM({
         provider={value}
         closeModal={closeModal}
         postSubmit={onClick}
+        settings={currentSettings}
       />
     </>
   );
@@ -76,6 +105,7 @@ function SetupProvider({
   provider,
   closeModal,
   postSubmit,
+  settings,
 }) {
   if (!isOpen) return null;
   const LLMOption = availableLLMs.find((llm) => llm.value === provider);
@@ -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
@@ -120,7 +150,7 @@ 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.
@@ -141,7 +171,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>

From 786d76f302459936da34cb69fb8a42573cdb75ba Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 17 Dec 2024 11:02:35 -0800
Subject: [PATCH 2/3] allow editing of workspace llm and agent config inside
 workspace settings

---
 .../AgentLLMSelection/AgentLLMItem/index.jsx  | 80 +++++++++++++------
 .../ChatModelSelection/index.jsx              |  4 +-
 .../WorkspaceLLMItem/index.jsx                |  4 +-
 3 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
index 10bb03473c3..bb919f4d0c9 100644
--- a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
@@ -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,
@@ -17,18 +18,29 @@ 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 (
@@ -47,16 +59,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
@@ -65,6 +91,7 @@ export default function WorkspaceLLM({
         provider={value}
         closeModal={closeModal}
         postSubmit={onClick}
+        settings={currentSettings}
       />
     </>
   );
@@ -76,6 +103,7 @@ function SetupProvider({
   provider,
   closeModal,
   postSubmit,
+  settings,
 }) {
   if (!isOpen) return null;
   const LLMOption = availableLLMs.find((llm) => llm.value === provider);
@@ -107,7 +135,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
@@ -120,12 +148,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
+                  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">
@@ -150,4 +180,4 @@ function SetupProvider({
     </ModalWrapper>,
     document.getElementById("workspace-agent-settings-container")
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/ChatModelSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/ChatModelSelection/index.jsx
index 7e139829d22..9c794a15ea1 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/ChatModelSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/ChatModelSelection/index.jsx
@@ -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>
@@ -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>
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
index bc428fbbd1b..ee123556c07 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
@@ -155,7 +155,9 @@ function SetupProvider({
                   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">

From 054f3c6e0f7a30221b22778fb6598cdfa5362223 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 17 Dec 2024 11:07:58 -0800
Subject: [PATCH 3/3] lint + put back deleted comment

---
 .../AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
index bb919f4d0c9..02be032dc70 100644
--- a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
@@ -31,6 +31,8 @@ export default function AgentLLMItem({
   }, [isOpen]);
 
   function handleProviderSelection() {
+    // Determine if provider needs additional setup because its minimum required keys are
+    // not yet set in settings.
     if (!checked) {
       const requiresAdditionalSetup = (llm.requiredConfig || []).some(
         (key) => !currentSettings[key]
@@ -150,8 +152,8 @@ function SetupProvider({
             <div className="px-7 py-6">
               <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 agent 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(settings, { credentialsOnly: true })}
@@ -180,4 +182,4 @@ function SetupProvider({
     </ModalWrapper>,
     document.getElementById("workspace-agent-settings-container")
   );
-}
\ No newline at end of file
+}