From c46b1f67f3d54ab20e5d5d4cbfb9a26c5cc4506a Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 22 May 2023 23:29:12 -0300 Subject: [PATCH 1/3] new toogle using tailwindUI --- .../src/components/toggleComponent/index.tsx | 26 +++---------------- 1 file changed, 3 insertions(+), 23 deletions(-) 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 From e3656f7998be7ec8b7a6a6d3c04ff400cffd51f4 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 22 May 2023 23:41:07 -0300 Subject: [PATCH 2/3] update display_name of llm to LLM --- src/backend/langflow/template/nodes.py | 6 ++++++ 1 file changed, 6 insertions(+) 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", ), ], ) From 3a7644dd2c687b91bff6d0dee56155c1dd89f71d Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 23 May 2023 01:06:49 -0300 Subject: [PATCH 3/3] updating font size of import card based on title --- .../modals/importModal/buttonBox/index.tsx | 55 +++++++++++++++++-- 1 file changed, 50 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx index 51e091e3a..68193f39d 100644 --- a/src/frontend/src/modals/importModal/buttonBox/index.tsx +++ b/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,46 @@ export default function ButtonBox({ 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 ( );