diff --git a/src/backend/langflow/template/nodes.py b/src/backend/langflow/template/nodes.py
index a4d3fa1cf..9fad19508 100644
--- a/src/backend/langflow/template/nodes.py
+++ b/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",
),
],
)
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index 102512ab3..eed5bc278 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -21,9 +21,9 @@ export default function ToggleComponent({
setEnabled(x);
}}
className={classNames(
- enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-600",
- "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 "
- )}
+ 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 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
+ )}
>
Use setting
-
-
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 5e3038d8a..2e8978597 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -1,109 +1,153 @@
-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";
export default function ButtonBox({
- onClick,
- title,
- description,
- icon,
- bgColor,
- textColor,
- deactivate,
- size,
+ onClick,
+ title,
+ description,
+ icon,
+ bgColor,
+ textColor,
+ deactivate,
+ size,
}: {
- onClick: () => void;
- title: string;
- description: string;
- icon: ReactNode;
- bgColor: string;
- textColor: string;
- deactivate?: boolean;
- size: "small" | "medium" | "big";
+ onClick: () => void;
+ title: string;
+ description: string;
+ icon: ReactNode;
+ bgColor: string;
+ textColor: string;
+ deactivate?: boolean;
+ size: "small" | "medium" | "big";
}) {
- let bigCircle: string;
- let smallCircle: string;
- let titleFontSize: string;
- let descriptionFontSize: string;
- let padding: string;
- let marginTop: string;
- let height: string;
- let width: string;
- switch (size) {
- case "small":
- bigCircle = "h-12 w-12";
- smallCircle = "h-8 w-8";
- titleFontSize = "text-sm";
- descriptionFontSize = "text-xs";
- padding = "p-2 py-3";
- marginTop = "mt-2";
- height = "h-36";
- width = "w-32";
- break;
- case "medium":
- bigCircle = "h-16 w-16";
- smallCircle = "h-12 w-12";
- titleFontSize = "text-base";
- descriptionFontSize = "text-sm";
- padding = "p-4 py-5";
- marginTop = "mt-3";
- height = "h-44";
- width = "w-36";
- break;
- case "big":
- bigCircle = "h-20 w-20";
- smallCircle = "h-16 w-16";
- titleFontSize = "text-lg";
- descriptionFontSize = "text-sm";
- padding = "p-8 py-10";
- marginTop = "mt-6";
- height = "h-56";
- width = "w-44";
- break;
- default:
- bigCircle = "h-20 w-20";
- smallCircle = "h-16 w-16";
- titleFontSize = "text-lg";
- descriptionFontSize = "text-sm";
- padding = "p-8 py-10";
- marginTop = "mt-6";
- height = "h-56";
- width = "w-44";
- break;
- }
- return (
-
- );
+ let bigCircle: string;
+ let smallCircle: string;
+ let titleFontSize: string;
+ let descriptionFontSize: string;
+ let padding: string;
+ let marginTop: string;
+ let height: string;
+ let width: string;
+ let textHeight: number;
+ let textWidth: number;
+ switch (size) {
+ case "small":
+ bigCircle = "h-12 w-12";
+ smallCircle = "h-8 w-8";
+ titleFontSize = "text-sm";
+ descriptionFontSize = "text-xs";
+ padding = "p-2 py-3";
+ marginTop = "mt-2";
+ height = "h-36";
+ textHeight = 70;
+ textWidth = 80;
+ width = "w-32";
+ break;
+ case "medium":
+ bigCircle = "h-16 w-16";
+ smallCircle = "h-12 w-12";
+ titleFontSize = "text-base";
+ descriptionFontSize = "text-sm";
+ padding = "p-4 py-5";
+ marginTop = "mt-3";
+ textHeight = 112;
+ textWidth = 162;
+ height = "h-44";
+ width = "w-36";
+ break;
+ case "big":
+ bigCircle = "h-20 w-20";
+ smallCircle = "h-16 w-16";
+ titleFontSize = "text-lg";
+ descriptionFontSize = "text-sm";
+ padding = "p-8 py-10";
+ marginTop = "mt-6";
+ height = "h-56";
+ width = "w-44";
+ break;
+ default:
+ bigCircle = "h-20 w-20";
+ smallCircle = "h-16 w-16";
+ titleFontSize = "text-lg";
+ descriptionFontSize = "text-sm";
+ padding = "p-8 py-10";
+ marginTop = "mt-6";
+ height = "h-56";
+ width = "w-44";
+ break;
+ }
+
+ const titleRef = React.useRef(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 (
+
+ );
}