Merge branch 'dynamic_field' into feature/store

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -26,9 +26,12 @@ import {
   LANGFLOW_SUPPORTED_TYPES,
   TOOLTIP_EMPTY,
 } from "../../../../constants/constants";
+import { alertContext } from "../../../../contexts/alertContext";
 import { FlowsContext } from "../../../../contexts/flowsContext";
 import { typesContext } from "../../../../contexts/typesContext";
+import { postCustomComponentUpdate } from "../../../../controllers/API";
 import { ParameterComponentType } from "../../../../types/components";
+import { NodeDataType } from "../../../../types/flow";
 import {
   convertObjToArray,
   convertValuesToNumbers,
@@ -63,6 +66,7 @@ export default function ParameterComponent({
   const ref = useRef<HTMLDivElement>(null);
   const refHtml = useRef<HTMLDivElement & ReactNode>(null);
   const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
+  const { setErrorData } = useContext(alertContext);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
   const { setTabsState, tabId, flows } = useContext(FlowsContext);
@@ -95,6 +99,25 @@ export default function ParameterComponent({
 
   const { data: myData } = useContext(typesContext);
 
+  const handleUpdateValues = async (name: string, data: NodeDataType) => {
+    const code = data.node?.template["code"]?.value;
+    if (!code) {
+      console.error("Code not found in the template");
+      return;
+    }
+
+    try {
+      const res = await postCustomComponentUpdate(code, name);
+      if (res.status === 200 && data.node?.template) {
+        let clone = cloneDeep(data);
+        clone.node!.template[name] = res.data.template[name];
+        setData(clone);
+      }
+    } catch (err) {
+      setErrorData(err as { title: string; list?: Array<string> });
+    }
+  };
+
   const handleOnNewValue = (
     newValue: string | string[] | boolean | Object[]
   ): void => {
@@ -392,12 +415,25 @@ export default function ParameterComponent({
         ) : left === true &&
           type === "str" &&
           data.node?.template[name].options ? (
-          <div className="mt-2 w-full">
-            <Dropdown
-              options={data.node.template[name].options}
-              onSelect={handleOnNewValue}
-              value={data.node.template[name].value ?? "Choose an option"}
-            ></Dropdown>
+          // TODO: Improve CSS
+          <div className="mt-2 flex w-full items-center">
+            <div className="w-5/6 flex-grow">
+              <Dropdown
+                options={data.node.template[name].options}
+                onSelect={handleOnNewValue}
+                value={data.node.template[name].value ?? "Choose an option"}
+              />
+            </div>
+            {data.node?.template[name].refresh && (
+              <button
+                className="extra-side-bar-buttons ml-2 mt-1 w-1/6"
+                onClick={() => {
+                  handleUpdateValues(name, data);
+                }}
+              >
+                <IconComponent name="RefreshCcw" />
+              </button>
+            )}
           </div>
         ) : left === true && type === "code" ? (
           <div className="mt-2 w-full">

src/frontend/src/controllers/API/index.ts

@@ -360,6 +360,16 @@ export async function postCustomComponent(
   return await api.post(`${BASE_URL_API}custom_component`, { code });
 }
 
+export async function postCustomComponentUpdate(
+  code: string,
+  field: string
+): Promise<AxiosResponse<APIClassType>> {
+  return await api.post(`${BASE_URL_API}custom_component/update`, {
+    code,
+    field,
+  });
+}
+
 export async function onLogin(user: LoginType) {
   try {
     const response = await api.post(

src/frontend/src/utils/styleUtils.ts

@@ -67,6 +67,7 @@ import {
   Pencil,
   Plus,
   Redo,
+  RefreshCcw,
   Rocket,
   Save,
   SaveAll,
@@ -354,4 +355,5 @@ export const nodeIconsLucide: iconsType = {
   Heart,
   Link,
   ToyBrick,
+  RefreshCcw,
 };