refactor(frontend): refactor credentials input with unified CredentialsGroupedView component (#11801)

### Changes 🏗️ - Refactored the credentials input handling in the RunInputDialog to use the shared CredentialsGroupedView component - Moved CredentialsGroupedView from agent library to a shared component location for reuse - Fixed source name handling in edge creation to properly handle tool source names - Improved node output UI by replacing custom expand/collapse with Accordion component - Fixed timing of hardcoded values synchronization with handle IDs to ensure proper loading - Enabled NEW_FLOW_EDITOR and BUILDER_VIEW_SWITCH feature flags by default ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Verified credentials input works in both agent run dialog and builder run dialog - [x] Confirmed node output accordion works correctly - [x] Tested flow editor with tools to ensure source name handling works properly - [x] Verified hardcoded values sync correctly with handle IDs #### For configuration changes: - [x] `.env.default` is updated or already compatible with my changes - [x] `docker-compose.yml` is updated or already compatible with my changes - [x] I have included a list of my configuration changes in the PR description (under **Changes**)
2026-04-08 03:00:28 -04:00 · 2026-01-20 17:50:25 +05:30
parent bc75d70e7d
commit 7756e2d12d
9 changed files with 194 additions and 184 deletions
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsx
@@ -10,6 +10,7 @@ import { useRunInputDialog } from "./useRunInputDialog";
 import { CronSchedulerDialog } from "../CronSchedulerDialog/CronSchedulerDialog";
 import { useTutorialStore } from "@/app/(platform)/build/stores/tutorialStore";
 import { useEffect } from "react";
+import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";

 export const RunInputDialog = ({
  isOpen,
@@ -23,19 +24,17 @@ export const RunInputDialog = ({
  const hasInputs = useGraphStore((state) => state.hasInputs);
  const hasCredentials = useGraphStore((state) => state.hasCredentials);
  const inputSchema = useGraphStore((state) => state.inputSchema);
-  const credentialsSchema = useGraphStore(
-    (state) => state.credentialsInputSchema,
-  );

  const {
-    credentialsUiSchema,
+    credentialFields,
+    requiredCredentials,
    handleManualRun,
    handleInputChange,
    openCronSchedulerDialog,
    setOpenCronSchedulerDialog,
    inputValues,
    credentialValues,
-    handleCredentialChange,
+    handleCredentialFieldChange,
    isExecutingGraph,
  } = useRunInputDialog({ setIsOpen });

@@ -67,7 +66,7 @@ export const RunInputDialog = ({
        <Dialog.Content>
          <div className="space-y-6 p-1" data-id="run-input-dialog-content">
            {/* Credentials Section */}
-            {hasCredentials() && (
+            {hasCredentials() && credentialFields.length > 0 && (
              <div data-id="run-input-credentials-section">
                <div className="mb-4">
                  <Text variant="h4" className="text-gray-900">
@@ -75,16 +74,12 @@ export const RunInputDialog = ({
                  </Text>
                </div>
                <div className="px-2" data-id="run-input-credentials-form">
-                  <FormRenderer
-                    jsonSchema={credentialsSchema as RJSFSchema}
-                    handleChange={(v) => handleCredentialChange(v.formData)}
-                    uiSchema={credentialsUiSchema}
-                    initialValues={{}}
-                    formContext={{
-                      showHandles: false,
-                      size: "large",
-                      showOptionalToggle: false,
-                    }}
+                  <CredentialsGroupedView
+                    credentialFields={credentialFields}
+                    requiredCredentials={requiredCredentials}
+                    inputCredentials={credentialValues}
+                    inputValues={inputValues}
+                    onCredentialChange={handleCredentialFieldChange}
                  />
                </div>
              </div>
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
@@ -7,12 +7,11 @@ import {
  GraphExecutionMeta,
 } from "@/lib/autogpt-server-api";
 import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
-import { useMemo, useState } from "react";
-import { uiSchema } from "../../../FlowEditor/nodes/uiSchema";
-import { isCredentialFieldSchema } from "@/components/renderers/InputRenderer/custom/CredentialField/helpers";
+import { useCallback, useMemo, useState } from "react";
 import { useNodeStore } from "@/app/(platform)/build/stores/nodeStore";
 import { useToast } from "@/components/molecules/Toast/use-toast";
 import { useReactFlow } from "@xyflow/react";
+import type { CredentialField } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers";

 export const useRunInputDialog = ({
  setIsOpen,
@@ -120,27 +119,32 @@ export const useRunInputDialog = ({
      },
    });

-  // We are rendering the credentials field differently compared to other fields.
-  // In the node, we have the field name as "credential" - so our library catches it and renders it differently.
-  // But here we have a different name, something like `Firecrawl credentials`, so here we are telling the library that this field is a credential field type.
+  // Convert credentials schema to credential fields array for CredentialsGroupedView
+  const credentialFields: CredentialField[] = useMemo(() => {
+    if (!credentialsSchema?.properties) return [];
+    return Object.entries(credentialsSchema.properties);
+  }, [credentialsSchema]);

-  const credentialsUiSchema = useMemo(() => {
-    const dynamicUiSchema: any = { ...uiSchema };
+  // Get required credentials as a Set
+  const requiredCredentials = useMemo(() => {
+    return new Set<string>(credentialsSchema?.required || []);
+  }, [credentialsSchema]);

-    if (credentialsSchema?.properties) {
-      Object.keys(credentialsSchema.properties).forEach((fieldName) => {
-        const fieldSchema = credentialsSchema.properties[fieldName];
-        if (isCredentialFieldSchema(fieldSchema)) {
-          dynamicUiSchema[fieldName] = {
-            ...dynamicUiSchema[fieldName],
-            "ui:field": "custom/credential_field",
-          };
+  // Handler for individual credential changes
+  const handleCredentialFieldChange = useCallback(
+    (key: string, value?: CredentialsMetaInput) => {
+      setCredentialValues((prev) => {
+        if (value) {
+          return { ...prev, [key]: value };
+        } else {
+          const next = { ...prev };
+          delete next[key];
+          return next;
        }
      });
-    }
-
-    return dynamicUiSchema;
-  }, [credentialsSchema]);
+    },
+    [],
+  );

  const handleManualRun = async () => {
    // Filter out incomplete credentials (those without a valid id)
@@ -173,12 +177,14 @@ export const useRunInputDialog = ({
  };

  return {
-    credentialsUiSchema,
+    credentialFields,
+    requiredCredentials,
    inputValues,
    credentialValues,
    isExecutingGraph,
    handleInputChange,
    handleCredentialChange,
+    handleCredentialFieldChange,
    handleManualRun,
    openCronSchedulerDialog,
    setOpenCronSchedulerDialog,
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts
@@ -139,14 +139,6 @@ export const useFlow = () => {
      useNodeStore.getState().setNodes([]);
      useNodeStore.getState().clearResolutionState();
      addNodes(customNodes);
-
-      // Sync hardcoded values with handle IDs.
-      // If a key–value field has a key without a value, the backend omits it from hardcoded values.
-      // But if a handleId exists for that key, it causes inconsistency.
-      // This ensures hardcoded values stay in sync with handle IDs.
-      customNodes.forEach((node) => {
-        useNodeStore.getState().syncHardcodedValuesWithHandleIds(node.id);
-      });
    }
  }, [customNodes, addNodes]);

@@ -158,6 +150,14 @@ export const useFlow = () => {
    }
  }, [graph?.links, addLinks]);

+  useEffect(() => {
+    if (customNodes.length > 0 && graph?.links) {
+      customNodes.forEach((node) => {
+        useNodeStore.getState().syncHardcodedValuesWithHandleIds(node.id);
+      });
+    }
+  }, [customNodes, graph?.links]);
+
  // update node execution status in nodes
  useEffect(() => {
    if (
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx
@@ -1,22 +1,21 @@
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/molecules/Accordion/Accordion";
 import { beautifyString, cn } from "@/lib/utils";
-import { CaretDownIcon, CopyIcon, CheckIcon } from "@phosphor-icons/react";
+import { CopyIcon, CheckIcon } from "@phosphor-icons/react";
 import { NodeDataViewer } from "./components/NodeDataViewer/NodeDataViewer";
 import { ContentRenderer } from "./components/ContentRenderer";
 import { useNodeOutput } from "./useNodeOutput";
 import { ViewMoreData } from "./components/ViewMoreData";

 export const NodeDataRenderer = ({ nodeId }: { nodeId: string }) => {
-  const {
-    outputData,
-    isExpanded,
-    setIsExpanded,
-    copiedKey,
-    handleCopy,
-    executionResultId,
-    inputData,
-  } = useNodeOutput(nodeId);
+  const { outputData, copiedKey, handleCopy, executionResultId, inputData } =
+    useNodeOutput(nodeId);

  if (Object.keys(outputData).length === 0) {
    return null;
@@ -25,122 +24,117 @@ export const NodeDataRenderer = ({ nodeId }: { nodeId: string }) => {
  return (
    <div
      data-tutorial-id={`node-output`}
-      className="flex flex-col gap-3 rounded-b-xl border-t border-zinc-200 px-4 py-4"
+      className="rounded-b-xl border-t border-zinc-200 px-4 py-2"
    >
-      <div className="flex items-center justify-between">
-        <Text variant="body-medium" className="!font-semibold text-slate-700">
-          Node Output
-        </Text>
-        <Button
-          variant="ghost"
-          size="small"
-          onClick={() => setIsExpanded(!isExpanded)}
-          className="h-fit min-w-0 p-1 text-slate-600 hover:text-slate-900"
-        >
-          <CaretDownIcon
-            size={16}
-            weight="bold"
-            className={`transition-transform ${isExpanded ? "rotate-180" : ""}`}
-          />
-        </Button>
-      </div>
+      <Accordion type="single" collapsible defaultValue="node-output">
+        <AccordionItem value="node-output" className="border-none">
+          <AccordionTrigger className="py-2 hover:no-underline">
+            <Text
+              variant="body-medium"
+              className="!font-semibold text-slate-700"
+            >
+              Node Output
+            </Text>
+          </AccordionTrigger>
+          <AccordionContent className="pt-2">
+            <div className="flex max-w-[350px] flex-col gap-4">
+              <div className="space-y-2">
+                <Text variant="small-medium">Input</Text>

-      {isExpanded && (
-        <>
-          <div className="flex max-w-[350px] flex-col gap-4">
-            <div className="space-y-2">
-              <Text variant="small-medium">Input</Text>
+                <ContentRenderer value={inputData} shortContent={false} />

-              <ContentRenderer value={inputData} shortContent={false} />
-
-              <div className="mt-1 flex justify-end gap-1">
-                <NodeDataViewer
-                  data={inputData}
-                  pinName="Input"
-                  execId={executionResultId}
-                />
-                <Button
-                  variant="secondary"
-                  size="small"
-                  onClick={() => handleCopy("input", inputData)}
-                  className={cn(
-                    "h-fit min-w-0 gap-1.5 border border-zinc-200 p-2 text-black hover:text-slate-900",
-                    copiedKey === "input" &&
-                      "border-green-400 bg-green-100 hover:border-green-400 hover:bg-green-200",
-                  )}
-                >
-                  {copiedKey === "input" ? (
-                    <CheckIcon size={12} className="text-green-600" />
-                  ) : (
-                    <CopyIcon size={12} />
-                  )}
-                </Button>
+                <div className="mt-1 flex justify-end gap-1">
+                  <NodeDataViewer
+                    data={inputData}
+                    pinName="Input"
+                    execId={executionResultId}
+                  />
+                  <Button
+                    variant="secondary"
+                    size="small"
+                    onClick={() => handleCopy("input", inputData)}
+                    className={cn(
+                      "h-fit min-w-0 gap-1.5 border border-zinc-200 p-2 text-black hover:text-slate-900",
+                      copiedKey === "input" &&
+                        "border-green-400 bg-green-100 hover:border-green-400 hover:bg-green-200",
+                    )}
+                  >
+                    {copiedKey === "input" ? (
+                      <CheckIcon size={12} className="text-green-600" />
+                    ) : (
+                      <CopyIcon size={12} />
+                    )}
+                  </Button>
+                </div>
              </div>
-            </div>

-            {Object.entries(outputData)
-              .slice(0, 2)
-              .map(([key, value]) => (
-                <div key={key} className="flex flex-col gap-2">
-                  <div className="flex items-center gap-2">
-                    <Text
-                      variant="small-medium"
-                      className="!font-semibold text-slate-600"
-                    >
-                      Pin:
-                    </Text>
-                    <Text variant="small" className="text-slate-700">
-                      {beautifyString(key)}
-                    </Text>
-                  </div>
-                  <div className="w-full space-y-2">
-                    <Text
-                      variant="small"
-                      className="!font-semibold text-slate-600"
-                    >
-                      Data:
-                    </Text>
-                    <div className="relative space-y-2">
-                      {value.map((item, index) => (
-                        <div key={index}>
-                          <ContentRenderer value={item} shortContent={true} />
+              {Object.entries(outputData)
+                .slice(0, 2)
+                .map(([key, value]) => (
+                  <div key={key} className="flex flex-col gap-2">
+                    <div className="flex items-center gap-2">
+                      <Text
+                        variant="small-medium"
+                        className="!font-semibold text-slate-600"
+                      >
+                        Pin:
+                      </Text>
+                      <Text variant="small" className="text-slate-700">
+                        {beautifyString(key)}
+                      </Text>
+                    </div>
+                    <div className="w-full space-y-2">
+                      <Text
+                        variant="small"
+                        className="!font-semibold text-slate-600"
+                      >
+                        Data:
+                      </Text>
+                      <div className="relative space-y-2">
+                        {value.map((item, index) => (
+                          <div key={index}>
+                            <ContentRenderer value={item} shortContent={true} />
+                          </div>
+                        ))}
+
+                        <div className="mt-1 flex justify-end gap-1">
+                          <NodeDataViewer
+                            data={value}
+                            pinName={key}
+                            execId={executionResultId}
+                          />
+                          <Button
+                            variant="secondary"
+                            size="small"
+                            onClick={() => handleCopy(key, value)}
+                            className={cn(
+                              "h-fit min-w-0 gap-1.5 border border-zinc-200 p-2 text-black hover:text-slate-900",
+                              copiedKey === key &&
+                                "border-green-400 bg-green-100 hover:border-green-400 hover:bg-green-200",
+                            )}
+                          >
+                            {copiedKey === key ? (
+                              <CheckIcon size={12} className="text-green-600" />
+                            ) : (
+                              <CopyIcon size={12} />
+                            )}
+                          </Button>
                        </div>
-                      ))}
-
-                      <div className="mt-1 flex justify-end gap-1">
-                        <NodeDataViewer
-                          data={value}
-                          pinName={key}
-                          execId={executionResultId}
-                        />
-                        <Button
-                          variant="secondary"
-                          size="small"
-                          onClick={() => handleCopy(key, value)}
-                          className={cn(
-                            "h-fit min-w-0 gap-1.5 border border-zinc-200 p-2 text-black hover:text-slate-900",
-                            copiedKey === key &&
-                              "border-green-400 bg-green-100 hover:border-green-400 hover:bg-green-200",
-                          )}
-                        >
-                          {copiedKey === key ? (
-                            <CheckIcon size={12} className="text-green-600" />
-                          ) : (
-                            <CopyIcon size={12} />
-                          )}
-                        </Button>
                      </div>
                    </div>
                  </div>
-                </div>
-              ))}
-          </div>
+                ))}
+            </div>

-          {Object.keys(outputData).length > 2 && (
-            <ViewMoreData outputData={outputData} execId={executionResultId} />
-          )}
-        </>
-      )}
+            {Object.keys(outputData).length > 2 && (
+              <ViewMoreData
+                outputData={outputData}
+                execId={executionResultId}
+              />
+            )}
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
    </div>
  );
 };
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsx
@@ -4,7 +4,6 @@ import { useShallow } from "zustand/react/shallow";
 import { useState } from "react";

 export const useNodeOutput = (nodeId: string) => {
-  const [isExpanded, setIsExpanded] = useState(true);
  const [copiedKey, setCopiedKey] = useState<string | null>(null);
  const { toast } = useToast();

@@ -37,13 +36,10 @@ export const useNodeOutput = (nodeId: string) => {
    }
  };
  return {
-    outputData: outputData,
-    inputData: inputData,
-    isExpanded: isExpanded,
-    setIsExpanded: setIsExpanded,
-    copiedKey: copiedKey,
-    setCopiedKey: setCopiedKey,
-    handleCopy: handleCopy,
+    outputData,
+    inputData,
+    copiedKey,
+    handleCopy,
    executionResultId: nodeExecutionResult?.node_exec_id,
  };
 };
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/helper.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/helper.ts
@@ -61,12 +61,18 @@ export const convertNodesPlusBlockInfoIntoCustomNodes = (
  return customNode;
 };

+const isToolSourceName = (sourceName: string): boolean =>
+  sourceName.startsWith("tools_^_");
+
+const cleanupSourceName = (sourceName: string): string =>
+  isToolSourceName(sourceName) ? "tools" : sourceName;
+
 export const linkToCustomEdge = (link: Link): CustomEdge => ({
  id: link.id ?? "",
  type: "custom" as const,
  source: link.source_id,
  target: link.sink_id,
-  sourceHandle: link.source_name,
+  sourceHandle: cleanupSourceName(link.source_name),
  targetHandle: link.sink_name,
  data: {
    isStatic: link.is_static,
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
@@ -1,9 +1,9 @@
 import { Input } from "@/components/atoms/Input/Input";
+import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
 import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
 import { useMemo } from "react";
 import { RunAgentInputs } from "../../../RunAgentInputs/RunAgentInputs";
 import { useRunAgentModalContext } from "../../context";
-import { CredentialsGroupedView } from "../CredentialsGroupedView/CredentialsGroupedView";
 import { ModalSection } from "../ModalSection/ModalSection";
 import { WebhookTriggerBanner } from "../WebhookTriggerBanner/WebhookTriggerBanner";

@@ -19,6 +19,8 @@ export function ModalRunSection() {
    setInputValue,
    agentInputFields,
    agentCredentialsInputFields,
+    inputCredentials,
+    setInputCredentialsValue,
  } = useRunAgentModalContext();

  const inputFields = Object.entries(agentInputFields || {});
@@ -102,6 +104,9 @@ export function ModalRunSection() {
          <CredentialsGroupedView
            credentialFields={credentialFields}
            requiredCredentials={requiredCredentials}
+            inputCredentials={inputCredentials}
+            inputValues={inputValues}
+            onCredentialChange={setInputCredentialsValue}
          />
        </ModalSection>
      ) : null}
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/CredentialsGroupedView/CredentialsGroupedView.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/CredentialsGroupedView/CredentialsGroupedView.tsx
@@ -5,30 +5,37 @@ import {
  AccordionItem,
  AccordionTrigger,
 } from "@/components/molecules/Accordion/Accordion";
+import {
+  CredentialsMetaInput,
+  CredentialsType,
+} from "@/lib/autogpt-server-api/types";
 import { CredentialsProvidersContext } from "@/providers/agent-credentials/credentials-provider";
-import { SlidersHorizontal } from "@phosphor-icons/react";
+import { SlidersHorizontalIcon } from "@phosphor-icons/react";
 import { useContext, useEffect, useMemo, useRef } from "react";
-import { useRunAgentModalContext } from "../../context";
 import {
  areSystemCredentialProvidersLoading,
  CredentialField,
  findSavedCredentialByProviderAndType,
  hasMissingRequiredSystemCredentials,
  splitCredentialFieldsBySystem,
-} from "../helpers";
+} from "./helpers";

 type Props = {
  credentialFields: CredentialField[];
  requiredCredentials: Set<string>;
+  inputCredentials: Record<string, CredentialsMetaInput | undefined>;
+  inputValues: Record<string, any>;
+  onCredentialChange: (key: string, value?: CredentialsMetaInput) => void;
 };

 export function CredentialsGroupedView({
  credentialFields,
  requiredCredentials,
+  inputCredentials,
+  inputValues,
+  onCredentialChange,
 }: Props) {
  const allProviders = useContext(CredentialsProvidersContext);
-  const { inputCredentials, setInputCredentialsValue, inputValues } =
-    useRunAgentModalContext();

  const { userCredentialFields, systemCredentialFields } = useMemo(
    () =>
@@ -87,11 +94,11 @@ export function CredentialsGroupedView({
      );

      if (savedCredential) {
-        setInputCredentialsValue(key, {
+        onCredentialChange(key, {
          id: savedCredential.id,
          provider: savedCredential.provider,
-          type: savedCredential.type,
-          title: (savedCredential as { title?: string }).title,
+          type: savedCredential.type as CredentialsType,
+          title: savedCredential.title,
        });
      }
    }
@@ -103,7 +110,7 @@ export function CredentialsGroupedView({
    systemCredentialFields,
    requiredCredentials,
    inputCredentials,
-    setInputCredentialsValue,
+    onCredentialChange,
    isLoadingProviders,
  ]);

@@ -123,7 +130,7 @@ export function CredentialsGroupedView({
                  }
                  selectedCredentials={selectedCred}
                  onSelectCredentials={(value) => {
-                    setInputCredentialsValue(key, value);
+                    onCredentialChange(key, value);
                  }}
                  siblingInputs={inputValues}
                  isOptional={!requiredCredentials.has(key)}
@@ -143,7 +150,8 @@ export function CredentialsGroupedView({
          <AccordionItem value="system-credentials" className="border-none">
            <AccordionTrigger className="py-2 text-sm text-muted-foreground hover:no-underline">
              <div className="flex items-center gap-1">
-                <SlidersHorizontal size={16} weight="bold" /> System credentials
+                <SlidersHorizontalIcon size={16} weight="bold" /> System
+                credentials
                {hasMissingSystemCredentials && (
                  <span className="text-destructive">(missing)</span>
                )}
@@ -163,7 +171,7 @@ export function CredentialsGroupedView({
                        }
                        selectedCredentials={selectedCred}
                        onSelectCredentials={(value) => {
-                          setInputCredentialsValue(key, value);
+                          onCredentialChange(key, value);
                        }}
                        siblingInputs={inputValues}
                        isOptional={!requiredCredentials.has(key)}
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/helpers.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/helpers.ts
@@ -1,5 +1,5 @@
 import { CredentialsProvidersContextType } from "@/providers/agent-credentials/credentials-provider";
-import { getSystemCredentials } from "../../../../../../../../../../../components/contextual/CredentialsInput/helpers";
+import { getSystemCredentials } from "../../helpers";

 export type CredentialField = [string, any];