Merge branch 'dev' of https://github.com/logspace-ai/langflow into dev

src/backend/langflow/template/nodes.py

@@ -122,6 +122,7 @@ class MidJourneyPromptChainNode(FrontendNode):
                 advanced=False,
                 multiline=False,
                 name="llm",
+                display_name="LLM",
             ),
             TemplateField(
                 field_type="BaseChatMemory",
@@ -156,6 +157,7 @@ class TimeTravelGuideChainNode(FrontendNode):
                 advanced=False,
                 multiline=False,
                 name="llm",
+                display_name="LLM",
             ),
             TemplateField(
                 field_type="BaseChatMemory",
@@ -210,6 +212,7 @@ class SeriesCharacterChainNode(FrontendNode):
                 advanced=False,
                 multiline=False,
                 name="llm",
+                display_name="LLM",
             ),
         ],
     )
@@ -295,6 +298,7 @@ class JsonAgentNode(FrontendNode):
                 required=True,
                 show=True,
                 name="llm",
+                display_name="LLM",
             ),
         ],
     )
@@ -341,6 +345,7 @@ class InitializeAgentNode(FrontendNode):
                 required=True,
                 show=True,
                 name="llm",
+                display_name="LLM",
                 advanced=False,
             ),
         ],
@@ -376,6 +381,7 @@ class CSVAgentNode(FrontendNode):
                 required=True,
                 show=True,
                 name="llm",
+                display_name="LLM",
             ),
         ],
     )

src/frontend/src/components/toggleComponent/index.tsx

@@ -21,8 +21,8 @@ export default function ToggleComponent({
 					setEnabled(x);
 				}}
 				className={classNames(
-					enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-600",
+					enabled ? 'bg-indigo-600' : 'bg-gray-200',
-					"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out "
+					'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
 				  )}
 			>
 				<span className="sr-only">Use setting</span>
@@ -44,19 +44,6 @@ export default function ToggleComponent({
 						)}
 						aria-hidden="true"
 					>
-						<svg
-							className="h-3 w-3 text-gray-400"
-							fill="none"
-							viewBox="0 0 12 12"
-						>
-							<path
-								d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
-								stroke="currentColor"
-								strokeWidth={2}
-								strokeLinecap="round"
-								strokeLinejoin="round"
-							/>
-						</svg>
 					</span>
 					<span
 						className={classNames(
@@ -67,13 +54,6 @@ export default function ToggleComponent({
 						)}
 						aria-hidden="true"
 					>
-						<svg
-							className="h-3 w-3 text-indigo-600"
-							fill="currentColor"
-							viewBox="0 0 12 12"
-						>
-							<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
-						</svg>
 					</span>
 				</span>
 			</Switch>

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect } from "react";
 import { DocumentDuplicateIcon } from "@heroicons/react/solid";
 import { classNames } from "../../../utils";
 import Tooltip from "../../../components/TooltipComponent";
@@ -30,6 +30,8 @@ export default function ButtonBox({
   let marginTop: string;
   let height: string;
   let width: string;
+  let textHeight: number;
+  let textWidth: number;
   switch (size) {
     case "small":
       bigCircle = "h-12 w-12";
@@ -39,6 +41,8 @@ export default function ButtonBox({
       padding = "p-2 py-3";
       marginTop = "mt-2";
       height = "h-36";
+      textHeight = 70;
+      textWidth = 80;
       width = "w-32";
       break;
     case "medium":
@@ -48,6 +52,8 @@ export default function ButtonBox({
       descriptionFontSize = "text-sm";
       padding = "p-4 py-5";
       marginTop = "mt-3";
+      textHeight = 112;
+      textWidth = 162;
       height = "h-44";
       width = "w-36";
       break;
@@ -72,6 +78,45 @@ export default function ButtonBox({
       width = "w-44";
       break;
   }
+
+  const titleRef = React.useRef<HTMLHeadingElement>(null);
+
+  useEffect(() => {
+    const resizeFont = () => {
+      const titleElement = titleRef.current;
+      if (titleElement) {
+        const containerWidth = titleElement.offsetWidth;
+        const containerHeight = titleElement.offsetHeight;
+
+        const titleComputedStyle = window.getComputedStyle(titleElement);
+        const titleWidth = titleElement.getBoundingClientRect().width;
+
+        const currentFontSize = parseFloat(titleComputedStyle.fontSize);
+
+        const desiredWidth = textWidth - 10; // Subtracting the desired padding
+
+        // Calculate the desired font size based on the adjusted width
+        let desiredFontSize = currentFontSize * (desiredWidth / titleWidth);
+
+        // Adjust the desired font size to fit within the container height, if needed
+        const maxHeight = containerHeight - 10; // Subtracting the desired top padding
+        const maxHeightFontSize = maxHeight * 0.8; // Adjust the scaling factor as needed
+        desiredFontSize = Math.min(desiredFontSize, maxHeightFontSize);
+
+        // Apply the desired font size and padding to the title element
+        titleElement.style.fontSize = `${desiredFontSize}px`;
+        titleElement.style.paddingLeft = "5px";
+        titleElement.style.paddingRight = "5px";
+      }
+    };
+
+    resizeFont();
+    window.addEventListener("resize", resizeFont);
+    return () => {
+      window.removeEventListener("resize", resizeFont);
+    };
+  }, []);
+
   return (
     <button disabled={deactivate} onClick={onClick}>
       <div
@@ -92,18 +137,17 @@ export default function ButtonBox({
             <div className={textColor}>{icon}</div>
           </div>
         </div>
-						<div className="w-full mt-auto mb-auto">
         <h3
+          ref={titleRef}
           className={classNames(
-								"w-full font-semibold break-words text-white dark:text-white/80",
+            " font-semibold text-white dark:text-white/80",
-								titleFontSize,
+
             marginTop
           )}
         >
           {title}
         </h3>
       </div>
-				</div>
     </button>
   );
 }