Release 0.0.53

added colors to toolkits and wrappers

poetry.lock

@@ -220,14 +220,14 @@ files = [
 
 [[package]]
 name = "beautifulsoup4"
-version = "4.12.0"
+version = "4.12.1"
 description = "Screen-scraping library"
 category = "main"
 optional = false
 python-versions = ">=3.6.0"
 files = [
-    {file = "beautifulsoup4-4.12.0-py3-none-any.whl", hash = "sha256:2130a5ad7f513200fae61a17abb5e338ca980fa28c439c0571014bc0217e9591"},
+    {file = "beautifulsoup4-4.12.1-py3-none-any.whl", hash = "sha256:e44795bb4f156d94abb5fbc56efff871c1045bfef72e9efe77558db9f9616ac3"},
-    {file = "beautifulsoup4-4.12.0.tar.gz", hash = "sha256:c5fceeaec29d09c84970e47c65f2f0efe57872f7cff494c9691a26ec0ff13234"},
+    {file = "beautifulsoup4-4.12.1.tar.gz", hash = "sha256:c7bdbfb20a0dbe09518b96a809d93351b2e2bcb8046c0809466fa6632a10c257"},
 ]
 
 [package.dependencies]
@@ -542,29 +542,30 @@ dev = ["flake8", "hypothesis", "ipython", "mypy (>=0.710)", "portray", "pytest (
 
 [[package]]
 name = "debugpy"
-version = "1.6.6"
+version = "1.6.7"
 description = "An implementation of the Debug Adapter Protocol for Python"
 category = "dev"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "debugpy-1.6.6-cp310-cp310-macosx_11_0_x86_64.whl", hash = "sha256:0ea1011e94416e90fb3598cc3ef5e08b0a4dd6ce6b9b33ccd436c1dffc8cd664"},
+    {file = "debugpy-1.6.7-cp310-cp310-macosx_11_0_x86_64.whl", hash = "sha256:b3e7ac809b991006ad7f857f016fa92014445085711ef111fdc3f74f66144096"},
-    {file = "debugpy-1.6.6-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:dff595686178b0e75580c24d316aa45a8f4d56e2418063865c114eef651a982e"},
+    {file = "debugpy-1.6.7-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:e3876611d114a18aafef6383695dfc3f1217c98a9168c1aaf1a02b01ec7d8d1e"},
-    {file = "debugpy-1.6.6-cp310-cp310-win32.whl", hash = "sha256:87755e173fcf2ec45f584bb9d61aa7686bb665d861b81faa366d59808bbd3494"},
+    {file = "debugpy-1.6.7-cp310-cp310-win32.whl", hash = "sha256:33edb4afa85c098c24cc361d72ba7c21bb92f501104514d4ffec1fb36e09c01a"},
-    {file = "debugpy-1.6.6-cp310-cp310-win_amd64.whl", hash = "sha256:72687b62a54d9d9e3fb85e7a37ea67f0e803aaa31be700e61d2f3742a5683917"},
+    {file = "debugpy-1.6.7-cp310-cp310-win_amd64.whl", hash = "sha256:ed6d5413474e209ba50b1a75b2d9eecf64d41e6e4501977991cdc755dc83ab0f"},
-    {file = "debugpy-1.6.6-cp37-cp37m-macosx_10_15_x86_64.whl", hash = "sha256:78739f77c58048ec006e2b3eb2e0cd5a06d5f48c915e2fc7911a337354508110"},
+    {file = "debugpy-1.6.7-cp37-cp37m-macosx_10_15_x86_64.whl", hash = "sha256:38ed626353e7c63f4b11efad659be04c23de2b0d15efff77b60e4740ea685d07"},
-    {file = "debugpy-1.6.6-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:23c29e40e39ad7d869d408ded414f6d46d82f8a93b5857ac3ac1e915893139ca"},
+    {file = "debugpy-1.6.7-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:279d64c408c60431c8ee832dfd9ace7c396984fd7341fa3116aee414e7dcd88d"},
-    {file = "debugpy-1.6.6-cp37-cp37m-win32.whl", hash = "sha256:7aa7e103610e5867d19a7d069e02e72eb2b3045b124d051cfd1538f1d8832d1b"},
+    {file = "debugpy-1.6.7-cp37-cp37m-win32.whl", hash = "sha256:dbe04e7568aa69361a5b4c47b4493d5680bfa3a911d1e105fbea1b1f23f3eb45"},
-    {file = "debugpy-1.6.6-cp37-cp37m-win_amd64.whl", hash = "sha256:f6383c29e796203a0bba74a250615ad262c4279d398e89d895a69d3069498305"},
+    {file = "debugpy-1.6.7-cp37-cp37m-win_amd64.whl", hash = "sha256:f90a2d4ad9a035cee7331c06a4cf2245e38bd7c89554fe3b616d90ab8aab89cc"},
-    {file = "debugpy-1.6.6-cp38-cp38-macosx_10_15_x86_64.whl", hash = "sha256:23363e6d2a04d726bbc1400bd4e9898d54419b36b2cdf7020e3e215e1dcd0f8e"},
+    {file = "debugpy-1.6.7-cp38-cp38-macosx_10_15_x86_64.whl", hash = "sha256:5224eabbbeddcf1943d4e2821876f3e5d7d383f27390b82da5d9558fd4eb30a9"},
-    {file = "debugpy-1.6.6-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9b5d1b13d7c7bf5d7cf700e33c0b8ddb7baf030fcf502f76fc061ddd9405d16c"},
+    {file = "debugpy-1.6.7-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:bae1123dff5bfe548ba1683eb972329ba6d646c3a80e6b4c06cd1b1dd0205e9b"},
-    {file = "debugpy-1.6.6-cp38-cp38-win32.whl", hash = "sha256:70ab53918fd907a3ade01909b3ed783287ede362c80c75f41e79596d5ccacd32"},
+    {file = "debugpy-1.6.7-cp38-cp38-win32.whl", hash = "sha256:9cd10cf338e0907fdcf9eac9087faa30f150ef5445af5a545d307055141dd7a4"},
-    {file = "debugpy-1.6.6-cp38-cp38-win_amd64.whl", hash = "sha256:c05349890804d846eca32ce0623ab66c06f8800db881af7a876dc073ac1c2225"},
+    {file = "debugpy-1.6.7-cp38-cp38-win_amd64.whl", hash = "sha256:aaf6da50377ff4056c8ed470da24632b42e4087bc826845daad7af211e00faad"},
-    {file = "debugpy-1.6.6-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a771739902b1ae22a120dbbb6bd91b2cae6696c0e318b5007c5348519a4211c6"},
+    {file = "debugpy-1.6.7-cp39-cp39-macosx_11_0_x86_64.whl", hash = "sha256:0679b7e1e3523bd7d7869447ec67b59728675aadfc038550a63a362b63029d2c"},
-    {file = "debugpy-1.6.6-cp39-cp39-win32.whl", hash = "sha256:549ae0cb2d34fc09d1675f9b01942499751d174381b6082279cf19cdb3c47cbe"},
+    {file = "debugpy-1.6.7-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:de86029696e1b3b4d0d49076b9eba606c226e33ae312a57a46dca14ff370894d"},
-    {file = "debugpy-1.6.6-cp39-cp39-win_amd64.whl", hash = "sha256:de4a045fbf388e120bb6ec66501458d3134f4729faed26ff95de52a754abddb1"},
+    {file = "debugpy-1.6.7-cp39-cp39-win32.whl", hash = "sha256:d71b31117779d9a90b745720c0eab54ae1da76d5b38c8026c654f4a066b0130a"},
-    {file = "debugpy-1.6.6-py2.py3-none-any.whl", hash = "sha256:be596b44448aac14eb3614248c91586e2bc1728e020e82ef3197189aae556115"},
+    {file = "debugpy-1.6.7-cp39-cp39-win_amd64.whl", hash = "sha256:c0ff93ae90a03b06d85b2c529eca51ab15457868a377c4cc40a23ab0e4e552a3"},
-    {file = "debugpy-1.6.6.zip", hash = "sha256:b9c2130e1c632540fbf9c2c88341493797ddf58016e7cba02e311de9b0a96b67"},
+    {file = "debugpy-1.6.7-py2.py3-none-any.whl", hash = "sha256:53f7a456bc50706a0eaabecf2d3ce44c4d5010e46dfc65b6b81a518b42866267"},
+    {file = "debugpy-1.6.7.zip", hash = "sha256:c4c2f0810fa25323abfdfa36cbbbb24e5c3b1a42cb762782de64439c575d67f2"},
 ]
 
 [[package]]
@@ -755,14 +756,14 @@ grpcio-gcp = ["grpcio-gcp (>=0.2.2,<1.0dev)"]
 
 [[package]]
 name = "google-api-python-client"
-version = "2.83.0"
+version = "2.84.0"
 description = "Google API Client Library for Python"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "google-api-python-client-2.83.0.tar.gz", hash = "sha256:d07509f1b2d2b2427363b454db996f7a15e1751a48cfcaf28427050560dd51cf"},
+    {file = "google-api-python-client-2.84.0.tar.gz", hash = "sha256:c398fd6f9ead0be23aade3b2704c72c5146df0e3352d8ff9101286077e1b010a"},
-    {file = "google_api_python_client-2.83.0-py2.py3-none-any.whl", hash = "sha256:afa7fe2a5d77e8f136cdb8f40a120dd6660c2292f791c1b22734dfe786bd1dac"},
+    {file = "google_api_python_client-2.84.0-py2.py3-none-any.whl", hash = "sha256:83041bb895863225ecdd9c59dd58565fa48c57c2f10fe06f7c08da7c42c53abc"},
 ]
 
 [package.dependencies]
@@ -774,14 +775,14 @@ uritemplate = ">=3.0.1,<5"
 
 [[package]]
 name = "google-auth"
-version = "2.17.1"
+version = "2.17.2"
 description = "Google Authentication Library"
 category = "main"
 optional = false
 python-versions = ">=2.7,!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*,!=3.4.*,!=3.5.*"
 files = [
-    {file = "google-auth-2.17.1.tar.gz", hash = "sha256:8f379b46bad381ad2a0b989dfb0c13ad28d3c2a79f27348213f8946a1d15d55a"},
+    {file = "google-auth-2.17.2.tar.gz", hash = "sha256:295c80ebb95eac74003c07a696cf3ef6b414e9230ae8894f3843f8215fd2aa56"},
-    {file = "google_auth-2.17.1-py2.py3-none-any.whl", hash = "sha256:357ff22a75b4c0f6093470f21816a825d2adee398177569824e37b6c10069e19"},
+    {file = "google_auth-2.17.2-py2.py3-none-any.whl", hash = "sha256:544536a43d44dff0f64222e4d027d124989fcb9c10979687e589e1694fba9c94"},
 ]
 
 [package.dependencies]

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow"
-version = "0.0.52"
+version = "0.0.53"
 description = "A Python package with a built-in web application"
 authors = ["Logspace <contact@logspace.ai>"]
 maintainers = [

src/backend/langflow/api/base.py

@@ -1,3 +1,4 @@
+from langflow.graph.utils import extract_input_variables_from_prompt
 from pydantic import BaseModel, validator
 
 
@@ -25,3 +26,12 @@ class CodeValidationResponse(BaseModel):
 
 class PromptValidationResponse(BaseModel):
     input_variables: list
+
+
+def validate_prompt(template: str):
+    input_variables = extract_input_variables_from_prompt(template)
+    if invalid := [variable for variable in input_variables if " " in variable]:
+        raise ValueError(
+            f"Invalid input variables: {invalid}. Please remove spaces from input variables"
+        )
+    return PromptValidationResponse(input_variables=input_variables)

src/backend/langflow/api/validate.py

@@ -5,6 +5,7 @@ from langflow.api.base import (
     CodeValidationResponse,
     Prompt,
     PromptValidationResponse,
+    validate_prompt,
 )
 from langflow.graph.utils import extract_input_variables_from_prompt
 from langflow.utils.logger import logger
@@ -29,8 +30,7 @@ def post_validate_code(code: Code):
 @router.post("/prompt", status_code=200, response_model=PromptValidationResponse)
 def post_validate_prompt(prompt: Prompt):
     try:
-        input_variables = extract_input_variables_from_prompt(prompt.template)
+        return validate_prompt(prompt.template)
-        return PromptValidationResponse(input_variables=input_variables)
     except Exception as e:
         logger.exception(e)
-        return HTTPException(status_code=500, detail=str(e))
+        raise HTTPException(status_code=500, detail=str(e)) from e

src/backend/langflow/template/nodes.py

@@ -253,13 +253,22 @@ class PromptFrontendNode(FrontendNode):
     def format_field(field: TemplateField, name: Optional[str] = None) -> None:
         # if field.field_type  == "StringPromptTemplate"
         # change it to str
+        PROMPT_FIELDS = [
+            "template",
+            "suffix",
+            "prefix",
+            "examples",
+        ]
         if field.field_type == "StringPromptTemplate" and "Message" in str(name):
-            field.field_type = "str"
+            field.field_type = "prompt"
             field.multiline = True
             field.value = HUMAN_PROMPT if "Human" in field.name else SYSTEM_PROMPT
         if field.name == "template" and field.value == "":
             field.value = DEFAULT_PROMPT
 
+        if field.name in PROMPT_FIELDS:
+            field.field_type = "prompt"
+
         if (
             "Union" in field.field_type
             and "BaseMessagePromptTemplate" in field.field_type

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -14,6 +14,7 @@ import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import InputFileComponent from "../../../../components/inputFileComponent";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import IntComponent from "../../../../components/intComponent";
+import PromptAreaComponent from "../../../../components/promptComponent";
 
 export default function ParameterComponent({
 	left,
@@ -63,6 +64,7 @@ export default function ParameterComponent({
 					type === "bool" ||
 					type === "float" ||
 					type === "code" ||
+					type === "prompt" ||
 					type === "file" ||
 					type === "int") ? (
 					<></>
@@ -187,9 +189,16 @@ export default function ParameterComponent({
 							save();
 						}}
 					/>
-				) : (
+				) : left === true && type === "prompt" ? (
-					<></>
+					<PromptAreaComponent
-				)}
+						disabled={disabled}
+						value={data.node.template[name].value ?? ""}
+						onChange={(t: string) => {
+							data.node.template[name].value = t;
+							save();
+						}}
+					/>
+				):(<></>)}
 			</>
 		</div>
 	);

src/frontend/src/components/promptComponent/index.tsx

@@ -0,0 +1,35 @@
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+import { useContext, useEffect, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
+import CodeAreaModal from "../../modals/codeAreaModal";
+import TextAreaModal from "../../modals/textAreaModal";
+import { TextAreaComponentType } from "../../types/components";
+import PromptAreaModal from "../../modals/promptModal";
+
+export default function PromptAreaComponent({ value, onChange, disabled }:TextAreaComponentType) {
+  const [myValue, setMyValue] = useState(value);
+  const { openPopUp } = useContext(PopUpContext);
+  useEffect(() => {
+    if (disabled) {
+      setMyValue("");
+      onChange("");
+    }
+  }, [disabled, onChange]);
+  return (
+    <div className={disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"}>
+      <div className="w-full flex items-center gap-3">
+        <span
+          className={
+            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            (disabled ? " bg-gray-200" : "")
+          }
+        >
+            {myValue !== "" ? myValue : 'Text empty'}
+        </span>
+        <button onClick={()=>{openPopUp(<PromptAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+        </button>
+      </div>
+    </div>
+  );
+}

src/frontend/src/controllers/API/index.ts

@@ -1,4 +1,4 @@
-import { errorsTypeAPI } from './../../types/api/index';
+import { PromptTypeAPI, errorsTypeAPI } from './../../types/api/index';
 import { APIObjectType, sendAllProps } from '../../types/api/index';
 import axios, { AxiosResponse } from "axios";
 
@@ -13,4 +13,9 @@ export async function sendAll(data:sendAllProps) {
 export async function checkCode(code:string):Promise<AxiosResponse<errorsTypeAPI>>{
 
     return await axios.post('/validate/code',{code})
+}
+
+export async function checkPrompt(template:string):Promise<AxiosResponse<PromptTypeAPI>>{
+
+    return await axios.post('/validate/prompt',{template})
 }

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -96,7 +96,6 @@ export default function CodeAreaModal({
 									<div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
 										<div className="flex h-full w-full">
 											<div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
-												{/* need to insert code editor */}
 												<AceEditor
 													value={code}
 													mode="python"

src/frontend/src/modals/promptModal/index.tsx

@@ -0,0 +1,153 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { XMarkIcon, DocumentTextIcon } from "@heroicons/react/24/outline";
+import { Fragment, useContext, useRef, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { darkContext } from "../../contexts/darkContext";
+import { checkPrompt } from "../../controllers/API";
+import { alertContext } from "../../contexts/alertContext";
+export default function PromptAreaModal({
+	value,
+	setValue,
+}: {
+	setValue: (value: string) => void;
+	value: string;
+}) {
+	const [open, setOpen] = useState(true);
+	const [myValue, setMyValue] = useState(value);
+	const { dark } = useContext(darkContext);
+	const { setErrorData, setSuccessData } = useContext(alertContext);
+	const { closePopUp } = useContext(PopUpContext);
+	const ref = useRef();
+	function setModalOpen(x: boolean) {
+		setOpen(x);
+		if (x === false) {
+			setTimeout(() => {
+				closePopUp();
+			}, 300);
+		}
+	}
+	return (
+		<Transition.Root show={open} appear={true} as={Fragment}>
+			<Dialog
+				as="div"
+				className="relative z-10"
+				onClose={setModalOpen}
+				initialFocus={ref}
+			>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0"
+				>
+					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+				</Transition.Child>
+
+				<div className="fixed inset-0 z-10 overflow-y-auto">
+					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+							enterTo="opacity-100 translate-y-0 sm:scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+						>
+							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+									<button
+										type="button"
+										className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+										onClick={() => {
+											setModalOpen(false);
+										}}
+									>
+										<span className="sr-only">Close</span>
+										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
+									</button>
+								</div>
+								<div className="h-full w-full flex flex-col justify-center items-center">
+									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+											<DocumentTextIcon
+												className="h-6 w-6 text-blue-600"
+												aria-hidden="true"
+											/>
+										</div>
+										<div className="mt-4 text-center sm:ml-4 sm:text-left">
+											<Dialog.Title
+												as="h3"
+												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+											>
+												Edit Prompt
+											</Dialog.Title>
+										</div>
+									</div>
+									<div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+										<div className="flex h-full w-full">
+											<div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
+												<textarea
+													ref={ref}
+													className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+													value={myValue}
+													onChange={(e) => {
+														setMyValue(e.target.value);
+														setValue(e.target.value);
+													}}
+												/>
+											</div>
+										</div>
+									</div>
+									<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+										<button
+											type="button"
+											className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+											onClick={() => {
+												checkPrompt(myValue)
+													.then((apiReturn) => {
+														console.log(apiReturn);
+														if (apiReturn.data) {
+															let inputVariables =
+																apiReturn.data.input_variables;
+															if (inputVariables.length === 0) {
+																setErrorData({
+																	title:
+																		"The template you are attempting to use does not contain any variables for data entry.",
+																});
+															} else {
+																setSuccessData({
+																	title: "Prompt is ready",
+																});
+																setModalOpen(false);
+																setValue(myValue);
+															}
+														} else {
+															setErrorData({
+																title: "Something went wrong, please try again",
+															});
+														}
+													})
+													.catch((error) => {
+														return setErrorData({
+															title:
+																"There is something wrong with this prompt, please review it",
+														list:[error.response.data.detail]});
+													});
+											}}
+										>
+											Check & Save
+										</button>
+									</div>
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
+}

src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx

@@ -50,7 +50,7 @@ export default function TabComponent({ selected, flow, onClick }:{flow:FlowType,
 						) : (
 							<div className="flex items-center gap-2">
 								<span
-									className="text-left truncate"
+									className="text-left w-32 truncate"
 									onDoubleClick={() => {
 										setIsRename(true);
 										setValue(flow.name);

src/frontend/src/types/api/index.ts

@@ -16,4 +16,5 @@ export type sendAllProps={
 
     chatHistory:{message:string,isSend:boolean}[],
 };
-export type errorsTypeAPI={function:{errors:Array<string>},imports:{errors:Array<string>}}
+export type errorsTypeAPI={function:{errors:Array<string>},imports:{errors:Array<string>}}
+export type PromptTypeAPI = {input_variables:Array<string>}

src/frontend/src/utils.ts

@@ -76,6 +76,8 @@ export const nodeColors: {[char: string]: string} = {
   chat: "#454173",
   thought:"#272541",
   docloaders:"#FF9135",
+  toolkits:"#DB2C2C",
+  wrappers:"#E6277A",
   unknown:"#9CA3AF"
 };