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

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";
 
@@ -14,3 +14,8 @@ 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/types/api/index.ts

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