Release 0.0.53

added colors to toolkits and wrappers

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 @@ def validate_function(cls, v):
 
 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 @@
     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 PromptValidationResponse(input_variables=input_variables)
+        return validate_prompt(prompt.template)
     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"