Merge branch 'master' into zamilmajdy/fix-input-on-textarea

autogpt_platform/frontend/src/components/CreditButton.tsx

@@ -1,21 +1,23 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
-import { IconRefresh, IconCoin } from "@/components/ui/icons";
+import { IconRefresh } from "@/components/ui/icons";
 import AutoGPTServerAPI from "@/lib/autogpt-server-api";
 
+const api = new AutoGPTServerAPI();
+
 export default function CreditButton() {
   const [credit, setCredit] = useState<number | null>(null);
-  const api = new AutoGPTServerAPI();
 
-  const fetchCredit = async () => {
+  const fetchCredit = useCallback(async () => {
     const response = await api.getUserCredit();
     setCredit(response.credits);
-  };
+  }, []);
+
   useEffect(() => {
     fetchCredit();
-  }, [api]);
+  }, [fetchCredit]);
 
   return (
     credit !== null && (

autogpt_platform/frontend/src/components/CustomNode.tsx

@@ -392,7 +392,7 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
   };
 
   const handleInputClick = (key: string) => {
-    console.log(`Opening modal for key: ${key}`);
+    console.debug(`Opening modal for key: ${key}`);
     setActiveKey(key);
     const value = getValue(key);
     setInputModalValue(
@@ -427,7 +427,7 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
   };
 
   const deleteNode = useCallback(() => {
-    console.log("Deleting node:", id);
+    console.debug("Deleting node:", id);
 
     // Remove the node
     deleteElements({ nodes: [{ id }] });

autogpt_platform/frontend/src/components/node-input-components.tsx

@@ -9,7 +9,6 @@ import {
   BlockIOStringSubSchema,
   BlockIONumberSubSchema,
   BlockIOBooleanSubSchema,
-  BlockIOCredentialsSubSchema,
 } from "@/lib/autogpt-server-api/types";
 import React, { FC, useCallback, useEffect, useState } from "react";
 import { Button } from "./ui/button";
@@ -313,6 +312,18 @@ const NodeCredentialsInput: FC<{
   );
 };
 
+const InputRef = (value: any): React.RefObject<HTMLInputElement> => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current && value && inputRef.current.value !== value) {
+      inputRef.current.value = value;
+    }
+  }, [value]);
+
+  return inputRef;
+};
+
 const NodeKeyValueInput: FC<{
   selfKey: string;
   schema: BlockIOKVSubSchema;
@@ -416,7 +427,7 @@ const NodeKeyValueInput: FC<{
                 <Input
                   type="text"
                   placeholder="Value"
-                  defaultValue={value ?? ""}
+                  ref={InputRef(value ?? "")}
                   onBlur={(e) =>
                     updateKeyValuePairs(
                       keyValuePairs.toSpliced(index, 1, {
@@ -600,7 +611,9 @@ const NodeStringInput: FC<{
           <Input
             type="text"
             id={selfKey}
-            defaultValue={schema.secret && value ? "********" : value}
+            ref={InputRef(
+              schema.secret && value ? "*".repeat(value.length) : value,
+            )}
             readOnly={schema.secret}
             placeholder={
               schema?.placeholder || `Enter ${beautifyString(displayName)}`
@@ -658,7 +671,6 @@ export const NodeTextBoxInput: FC<{
             schema?.placeholder || `Enter ${beautifyString(displayName)}`
           }
           onChange={(e) => handleInputChange(selfKey, e.target.value)}
-          onBlur={(e) => handleInputChange(selfKey, e.target.value)}
           className="h-full w-full resize-none overflow-hidden border-none bg-transparent text-lg text-black outline-none"
           style={{
             fontSize: "min(1em, 16px)",
@@ -696,7 +708,7 @@ const NodeNumberInput: FC<{
         <Input
           type="number"
           id={selfKey}
-          defaultValue={value}
+          ref={InputRef(value)}
           onBlur={(e) => handleInputChange(selfKey, parseFloat(e.target.value))}
           placeholder={
             schema.placeholder || `Enter ${beautifyString(displayName)}`

autogpt_platform/frontend/src/components/ui/render.tsx

@@ -45,13 +45,15 @@ const VideoRenderer: React.FC<{ videoUrl: string }> = ({ videoUrl }) => {
 
 const ImageRenderer: React.FC<{ imageUrl: string }> = ({ imageUrl }) => (
   <div className="w-full p-2">
-    <img
-      src={imageUrl}
-      alt="Image"
-      className="h-auto max-w-full"
-      width="100%"
-      height="auto"
-    />
+    <picture>
+      <img
+        src={imageUrl}
+        alt="Image"
+        className="h-auto max-w-full"
+        width="100%"
+        height="auto"
+      />
+    </picture>
   </div>
 );
 

autogpt_platform/frontend/src/hooks/useAgentGraph.ts

@@ -747,6 +747,9 @@ export default function useAgentGraph(
       api,
       nodes,
       edges,
+      pathname,
+      router,
+      searchParams,
       savedAgent,
       agentName,
       agentDescription,

autogpt_platform/frontend/src/lib/utils.ts

@@ -26,13 +26,10 @@ export function deepEquals(x: any, y: any): boolean {
     ty = typeof y;
 
   const res =
-    x &&
-    y &&
-    tx === ty &&
-    (tx === "object"
+    x && y && tx === ty && tx === "object"
       ? ok(x).length === ok(y).length &&
         ok(x).every((key) => deepEquals(x[key], y[key]))
-      : x === y);
+      : x === y;
   return res;
 }