Merge branch 'main' into docs-telemetry-and-contributing

src/backend/base/langflow/components/agents/__init__.py

@@ -1,4 +1,3 @@
-from .agent import AgentComponent
 from .crewai import CrewAIAgentComponent
 from .csv import CSVAgentComponent
 from .hierarchical_crew import HierarchicalCrewComponent
@@ -27,5 +26,4 @@
     "VectorStoreAgentComponent",
     "VectorStoreRouterAgentComponent",
     "XMLAgentComponent",
-    "AgentComponent",
 ]

src/backend/base/langflow/components/models/openai.py

@@ -10,7 +10,6 @@
 from langflow.field_typing.range_spec import RangeSpec
 from langflow.inputs import BoolInput, DictInput, DropdownInput, FloatInput, IntInput, SecretStrInput, StrInput
 from langflow.inputs.inputs import HandleInput
-from langflow.io import Output
 
 
 class OpenAIModelComponent(LCModelComponent):
@@ -82,10 +81,6 @@ class OpenAIModelComponent(LCModelComponent):
             input_types=["OutputParser"],
         ),
     ]
-    outputs = [
-        Output(display_name="Text", name="text_output", method="text_response"),
-        Output(display_name="Language Model", name="model_output", method="build_model"),
-    ]
 
     def build_model(self) -> LanguageModel:  # type: ignore[type-var]
         # self.output_schema is a list of dictionaries

src/backend/base/langflow/custom/custom_component/component.py

@@ -369,8 +369,6 @@ def _set_output_return_type(self, output: Output) -> None:
 
     def _set_output_required_inputs(self) -> None:
         for output in self.outputs:
-            if output.required_inputs:
-                continue
             if not output.method:
                 continue
             method = getattr(self, output.method, None)

src/backend/tests/unit/custom/custom_component/test_component.py

@@ -1,5 +1,5 @@
 import pytest
-from langflow.components.agents import AgentComponent, CrewAIAgentComponent, ToolCallingAgentComponent
+from langflow.components.agents import CrewAIAgentComponent, ToolCallingAgentComponent
 from langflow.components.helpers import SequentialTaskComponent
 from langflow.components.inputs import ChatInput
 from langflow.components.models import OpenAIModelComponent
@@ -32,44 +32,33 @@ def _assert_all_outputs_have_different_required_inputs(outputs: list[Output]):
     return True
 
 
-def test_set_required_inputs_chat_input():
+def test_set_required_inputs():
     chatinput = ChatInput()
+
     assert all(_output_required_inputs_are_in_inputs(output, chatinput._inputs) for output in chatinput.outputs)
     assert _assert_all_outputs_have_different_required_inputs(chatinput.outputs)
 
 
-def test_set_required_inputs_chat_output():
+def test_set_required_inputs_various_components():
+    chatinput = ChatInput()
     chatoutput = ChatOutput()
-    assert all(_output_required_inputs_are_in_inputs(output, chatoutput._inputs) for output in chatoutput.outputs)
-    assert _assert_all_outputs_have_different_required_inputs(chatoutput.outputs)
-
-
-def test_set_required_inputs_openai_component():
+    task = SequentialTaskComponent()
+    tool_calling_agent = ToolCallingAgentComponent()
     openai_component = OpenAIModelComponent()
-    assert all(
-        _output_required_inputs_are_in_inputs(output, openai_component._inputs) for output in openai_component.outputs
-    )
-    assert _assert_all_outputs_have_different_required_inputs(openai_component.outputs)
-
 
-def test_set_required_inputs_tool_calling_agent_component():
-    tool_calling_agent_component = ToolCallingAgentComponent()
+    assert all(_output_required_inputs_are_in_inputs(output, chatinput._inputs) for output in chatinput.outputs)
+    assert all(_output_required_inputs_are_in_inputs(output, chatoutput._inputs) for output in chatoutput.outputs)
+    assert all(_output_required_inputs_are_in_inputs(output, task._inputs) for output in task.outputs)
     assert all(
-        _output_required_inputs_are_in_inputs(output, tool_calling_agent_component._inputs)
-        for output in tool_calling_agent_component.outputs
+        _output_required_inputs_are_in_inputs(output, tool_calling_agent._inputs)
+        for output in tool_calling_agent.outputs
     )
-    assert _assert_all_outputs_have_different_required_inputs(tool_calling_agent_component.outputs)
-
-
-def test_set_required_inputs_agent_component():
-    agent_component = AgentComponent()
     assert all(
-        _output_required_inputs_are_in_inputs(output, agent_component._inputs) for output in agent_component.outputs
+        _output_required_inputs_are_in_inputs(output, openai_component._inputs) for output in openai_component.outputs
     )
-    assert _assert_all_outputs_have_different_required_inputs(agent_component.outputs)
 
-
-def test_set_required_inputs_sequential_task_component():
-    task = SequentialTaskComponent()
-    assert all(_output_required_inputs_are_in_inputs(output, task._inputs) for output in task.outputs)
+    assert _assert_all_outputs_have_different_required_inputs(chatinput.outputs)
+    assert _assert_all_outputs_have_different_required_inputs(chatoutput.outputs)
     assert _assert_all_outputs_have_different_required_inputs(task.outputs)
+    assert _assert_all_outputs_have_different_required_inputs(tool_calling_agent.outputs)
+    assert _assert_all_outputs_have_different_required_inputs(openai_component.outputs)

src/frontend/src/App.css

@@ -194,3 +194,6 @@ body {
   border-radius: 20% !important;
 }
 
+code {
+  font-family: var(--font-mono)s !important;
+}

src/frontend/src/components/cardComponent/index.tsx

@@ -1,9 +1,6 @@
-import { ENABLE_NEW_IO_MODAL } from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
 import { useState } from "react";
 import { Control } from "react-hook-form";
-import IOModalOld from "../../modals/IOModal";
-import IOModalNew from "../../modals/IOModal/newModal";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { FlowType } from "../../types/flow";
@@ -24,7 +21,6 @@ import { FormControl, FormField } from "../ui/form";
 import Loading from "../ui/loading";
 import useDragStart from "./hooks/use-on-drag-start";
 import { convertTestName } from "./utils/convert-test-name";
-const IOModal = ENABLE_NEW_IO_MODAL ? IOModalNew : IOModalOld;
 
 export default function CollectionCardComponent({
   data,

src/frontend/src/components/codeTabsComponent/ChatCodeTabComponent.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { useDarkStore } from "../../stores/darkStore";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
@@ -50,7 +50,7 @@ export default function SimplifiedCodeTabComponent({
       </div>
       <SyntaxHighlighter
         language={language.toLowerCase()}
-        style={oneDark}
+        style={tomorrow}
         className="!mt-0 h-full w-full overflow-scroll !rounded-b-md !rounded-t-none border border-border text-left !custom-scroll"
       >
         {code}

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -1,7 +1,11 @@
+import ShadTooltip from "@/components/shadTooltipComponent";
 import { useTweaksStore } from "@/stores/tweaksStore";
 import { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import {
+  oneDark,
+  tomorrow,
+} from "react-syntax-highlighter/dist/cjs/styles/prism";
 import {
   Tabs,
   TabsContent,
@@ -58,7 +62,7 @@ export default function CodeTabsComponent({
     >
       <div className="api-modal-tablist-div">
         {tabs.length > 0 && tabs[0].name !== "" ? (
-          <TabsList>
+          <TabsList className="mt-[-1px] border-b">
             {tabs.map((tab, index) => (
               <TabsTrigger
                 className={
@@ -74,71 +78,81 @@ export default function CodeTabsComponent({
         ) : (
           <div></div>
         )}
-
-        <div className="float-right mx-2 mb-1 mt-2 flex items-center gap-4">
-          {nodes.length > 0 &&
-            tabs.find((tab) => tab.name.toLowerCase() === "tweaks") &&
-            tabs[activeTab].hasTweaks && (
-              <div className="flex gap-2">
-                <Switch
-                  style={{
-                    transform: `scaleX(${0.7}) scaleY(${0.7})`,
-                  }}
-                  id="tweaks-switch"
-                  onCheckedChange={setActiveTweaks}
-                  checked={activeTweaks}
-                  autoFocus={false}
-                />
-                <Label
-                  className={cn(
-                    "relative right-1 top-[4px] text-xs font-medium text-muted-foreground",
-                    activeTweaks ? "text-primary" : "",
-                  )}
-                  htmlFor="tweaks-switch"
-                >
-                  Tweaks
-                </Label>
-              </div>
-            )}
-
-          {tabs[activeTab].name.toLowerCase !== "tweaks" && (
-            <>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="text-muted-foreground"
-                onClick={copyToClipboard}
-                data-testid="btn-copy-code"
-              >
-                {isCopied ? (
-                  <IconComponent name="Check" className="h-4 w-4" />
-                ) : (
-                  <IconComponent name="Copy" className="h-4 w-4" />
-                )}
-              </Button>
-            </>
-          )}
-        </div>
       </div>
 
       {tabs.map((tab, idx) => (
         <TabsContent
           value={idx.toString()}
-          className="api-modal-tabs-content overflow-hidden"
+          className="api-modal-tabs-content overflow-hidden dark"
           key={idx} // Remember to add a unique key prop
         >
           {tab.name.toLowerCase() !== "tweaks" ? (
-            <div className="flex h-full w-full flex-col">
+            <div className="mt-2 flex h-full w-full flex-col">
               {tab.description && (
                 <div
                   className="mb-2 w-full text-left text-sm"
                   dangerouslySetInnerHTML={{ __html: tab.description }}
                 ></div>
               )}
+              <div className="flex w-full items-center justify-end gap-4 rounded-t-md border border-b-0 border-input bg-secondary px-4 py-2">
+                {nodes.length > 0 &&
+                  tabs.find((tab) => tab.name.toLowerCase() === "tweaks") &&
+                  tabs[activeTab].hasTweaks && (
+                    <div className="flex items-center gap-2">
+                      <ShadTooltip content="Makes temporary adjustments managed in 'Tweaks'">
+                        <div className="flex items-center gap-2">
+                          <Label
+                            className={"text-xs font-medium text-white"}
+                            htmlFor="tweaks-switch"
+                          >
+                            Enable Tweaks
+                          </Label>
+                          <IconComponent
+                            name="info"
+                            className="h-3.5 w-3.5 text-placeholder-foreground"
+                          />
+                        </div>
+                      </ShadTooltip>
+                      <Switch
+                        style={{
+                          transform: `scaleX(${0.85}) scaleY(${0.85})`,
+                        }}
+                        id="tweaks-switch"
+                        onCheckedChange={setActiveTweaks}
+                        checked={activeTweaks}
+                        autoFocus={false}
+                      />
+                      <span className="text-lg text-accent">|</span>
+                    </div>
+                  )}
+
+                {tabs[activeTab].name.toLowerCase !== "tweaks" && (
+                  <>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={copyToClipboard}
+                      data-testid="btn-copy-code"
+                    >
+                      {isCopied ? (
+                        <IconComponent
+                          name="Check"
+                          className="h-4 w-4 text-muted-foreground"
+                        />
+                      ) : (
+                        <IconComponent
+                          name="Copy"
+                          className="h-4 w-4 text-muted-foreground"
+                        />
+                      )}
+                    </Button>
+                  </>
+                )}
+              </div>
               <SyntaxHighlighter
                 language={tab.language}
                 style={oneDark}
-                className="mt-0 h-full overflow-auto rounded-sm text-left custom-scroll"
+                className="!my-0 h-full overflow-auto rounded-sm !rounded-t-none border border-t-0 border-input bg-code-block text-left custom-scroll"
               >
                 {tab.code}
               </SyntaxHighlighter>

src/frontend/src/components/flowToolbarComponent/index.tsx

@@ -1,21 +1,18 @@
 import ShadTooltip from "@/components/shadTooltipComponent";
-import { ENABLE_API, ENABLE_NEW_IO_MODAL } from "@/customization/feature-flags";
+import { ENABLE_API } from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
+import IOModal from "@/modals/IOModal/newModal";
 import { useEffect, useMemo, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { Panel } from "reactflow";
 import ApiModal from "../../modals/apiModal";
-import IOModalOld from "../../modals/IOModal";
-import IOModalNew from "../../modals/IOModal/newModal";
 import ShareModal from "../../modals/shareModal";
 import useFlowStore from "../../stores/flowStore";
 import { useShortcutsStore } from "../../stores/shortcuts";
 import { useStoreStore } from "../../stores/storeStore";
 import { classNames, isThereModal } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 
-const IOModal = ENABLE_NEW_IO_MODAL ? IOModalNew : IOModalOld;
-
 export default function FlowToolbar(): JSX.Element {
   const preventDefault = true;
   const [open, setOpen] = useState<boolean>(false);
@@ -79,7 +76,7 @@ export default function FlowToolbar(): JSX.Element {
           <button
             disabled={!hasApiKey || !validApiKey || !hasStore}
             className={classNames(
-              "share-button",
+              "relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-accent",
               !hasApiKey || !validApiKey || !hasStore
                 ? "text-muted-foreground"
                 : "",
@@ -93,13 +90,13 @@ export default function FlowToolbar(): JSX.Element {
               <ForwardedIconComponent
                 name="Share2"
                 className={classNames(
-                  "-m-0.5 -ml-1 h-4 w-4",
+                  "h-4 w-4",
                   !hasApiKey || !validApiKey || !hasStore
                     ? "extra-side-bar-save-disable"
                     : "",
                 )}
               />
-              Share
+              <span className="hidden md:block">Share</span>
             </>
           </button>
         </ShadTooltip>
@@ -134,26 +131,26 @@ export default function FlowToolbar(): JSX.Element {
                 >
                   <div
                     data-testid="playground-btn-flow-io"
-                    className="relative inline-flex w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold transition-all duration-500 ease-in-out hover:bg-accent"
+                    className="relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold transition-all duration-500 ease-in-out hover:bg-accent"
                   >
                     <ForwardedIconComponent
                       name="Play"
                       className={"h-4 w-4 transition-all"}
                     />
-                    Playground
+                    <span className="hidden md:block">Playground</span>
                   </div>
                 </IOModal>
               ) : (
                 <ShadTooltip content="Add a Chat Input or Chat Output to use the playground">
                   <div
-                    className={`relative inline-flex w-full cursor-not-allowed items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-muted-foreground transition-all duration-150 ease-in-out`}
+                    className={`relative inline-flex h-8 w-full cursor-not-allowed items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-muted-foreground transition-all duration-150 ease-in-out`}
                     data-testid="playground-btn-flow"
                   >
                     <ForwardedIconComponent
                       name="BotMessageSquareIcon"
                       className={"h-5 w-5 transition-all"}
                     />
-                    Playground
+                    <span className="hidden md:block">Playground</span>
                   </div>
                 </ShadTooltip>
               )}
@@ -169,14 +166,14 @@ export default function FlowToolbar(): JSX.Element {
                     >
                       <div
                         className={classNames(
-                          "relative inline-flex w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-accent",
+                          "relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-accent",
                         )}
                       >
                         <ForwardedIconComponent
                           name="Code2"
                           className={"h-4 w-4"}
                         />
-                        API
+                        <span className="hidden md:block">API</span>
                       </div>
                     </ApiModal>
                   )}