jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Lucas Oliveira 2023-05-11 23:41:33 -03:00
commit a80bf37be4
13 changed files with 473 additions and 675 deletions
Download patch file Download diff file Expand all files Collapse all files

888
poetry.lock generated
View file

File diff suppressed because it is too large Load diff

4
pyproject.toml
View file

@ -1,6 +1,6 @@
[tool.poetry] [tool.poetry]
name = "langflow" name = "langflow"
version = "0.0.68" version = "0.0.69"
description = "A Python package with a built-in web application" description = "A Python package with a built-in web application"
authors = ["Logspace <contact@logspace.ai>"] authors = ["Logspace <contact@logspace.ai>"]
maintainers = [ maintainers = [
@ -29,7 +29,7 @@ google-search-results = "^2.4.1"
google-api-python-client = "^2.79.0" google-api-python-client = "^2.79.0"
typer = "^0.7.0" typer = "^0.7.0"
gunicorn = "^20.1.0" gunicorn = "^20.1.0"
langchain = "~0.0.150" langchain = "^0.0.166"
openai = "^0.27.2" openai = "^0.27.2"
types-pyyaml = "^6.0.12.8" types-pyyaml = "^6.0.12.8"
dill = "^0.3.6" dill = "^0.3.6"

10
src/frontend/src/components/floatComponent/index.tsx
View file

@ -1,5 +1,6 @@
import { useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { FloatComponentType } from "../../types/components"; import { FloatComponentType } from "../../types/components";
import { TabsContext } from "../../contexts/tabsContext";
export default function FloatComponent({ export default function FloatComponent({
value, value,
@ -13,6 +14,7 @@ export default function FloatComponent({
onChange(""); onChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
const {setDisableCP} = useContext(TabsContext)
return ( return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}> <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<input <input
@ -27,6 +29,12 @@ export default function FloatComponent({
setMyValue(e.target.value); setMyValue(e.target.value);
onChange(e.target.value); onChange(e.target.value);
}} }}
onBlur={() => {
setDisableCP(false)
}}
onFocus={() => {
setDisableCP(true)
}}
/> />
</div> </div>
); );

160
src/frontend/src/components/inputComponent/index.tsx
View file

@ -1,6 +1,7 @@
import { useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { InputComponentType } from "../../types/components"; import { InputComponentType } from "../../types/components";
import { classNames } from "../../utils"; import { classNames } from "../../utils";
import { TabsContext } from "../../contexts/tabsContext";
export default function InputComponent({ export default function InputComponent({
value, value,
@ -8,79 +9,86 @@ export default function InputComponent({
disabled, disabled,
password, password,
}: InputComponentType) { }: InputComponentType) {
const [myValue, setMyValue] = useState(value ?? ""); const [myValue, setMyValue] = useState(value ?? "");
const [pwdVisible, setPwdVisible] = useState(false); const [pwdVisible, setPwdVisible] = useState(false);
useEffect(() => { const {setDisableCP} = useContext(TabsContext)
if (disabled) { useEffect(() => {
setMyValue(""); if (disabled) {
onChange(""); setMyValue("");
} onChange("");
}, [disabled, onChange]); }
return ( }, [disabled, onChange]);
<div return (
className={ <div
disabled className={
? "relative pointer-events-none cursor-not-allowed" disabled
: "relative" ? "relative pointer-events-none cursor-not-allowed"
} : "relative"
> }
<input >
value={myValue} <input
className={classNames( value={myValue}
"block w-full pr-12 form-input dark:text-gray-300 dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm", onBlur={() => {
disabled ? " bg-gray-200 dark:bg-gray-700" : "", setDisableCP(false)
password && !pwdVisible && myValue!=="" ? "password" : "" }}
)} onFocus={() => {
placeholder="Type a text" setDisableCP(true)
onChange={(e) => { }}
setMyValue(e.target.value); className={classNames(
onChange(e.target.value); "block w-full pr-12 form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
}} disabled ? " bg-gray-200 dark:bg-gray-700" : "",
/> password && !pwdVisible && myValue !== "" ? "password" : ""
<button )}
className="absolute inset-y-0 right-0 items-center px-4 text-gray-600 dark:text-gray-300" placeholder="Type a text"
onClick={() => { onChange={(e) => {
setPwdVisible(!pwdVisible); setMyValue(e.target.value);
}} onChange(e.target.value);
> }}
{password && />
(pwdVisible ? ( <button
<svg className="absolute inset-y-0 right-0 items-center px-4 text-gray-600"
xmlns="http://www.w3.org/2000/svg" onClick={() => {
fill="none" setPwdVisible(!pwdVisible);
viewBox="0 0 24 24" }}
strokeWidth={1.5} >
stroke="currentColor" {password &&
className="w-5 h-5" (pwdVisible ? (
> <svg
<path xmlns="http://www.w3.org/2000/svg"
strokeLinecap="round" fill="none"
strokeLinejoin="round" viewBox="0 0 24 24"
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" strokeWidth={1.5}
/> stroke="currentColor"
</svg> className="w-5 h-5"
) : ( >
<svg <path
xmlns="http://www.w3.org/2000/svg" strokeLinecap="round"
fill="none" strokeLinejoin="round"
viewBox="0 0 24 24" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
strokeWidth={1.5} />
stroke="currentColor" </svg>
className="w-5 h-5" ) : (
> <svg
<path xmlns="http://www.w3.org/2000/svg"
strokeLinecap="round" fill="none"
strokeLinejoin="round" viewBox="0 0 24 24"
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" strokeWidth={1.5}
/> stroke="currentColor"
<path className="w-5 h-5"
strokeLinecap="round" >
strokeLinejoin="round" <path
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" strokeLinecap="round"
/> strokeLinejoin="round"
</svg> d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
))} />
</button> <path
</div> strokeLinecap="round"
); strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
))}
</button>
</div>
);
} }

10
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -1,6 +1,7 @@
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { InputListComponentType } from "../../types/components"; import { InputListComponentType } from "../../types/components";
import { TabsContext } from "../../contexts/tabsContext";
var _ = require("lodash"); var _ = require("lodash");
@ -16,6 +17,7 @@ export default function InputListComponent({
onChange([""]); onChange([""]);
} }
}, [disabled, onChange]); }, [disabled, onChange]);
const {setDisableCP} = useContext(TabsContext)
return ( return (
<div <div
className={ className={
@ -41,6 +43,12 @@ export default function InputListComponent({
}); });
onChange(inputList); onChange(inputList);
}} }}
onBlur={() => {
setDisableCP(false)
}}
onFocus={() => {
setDisableCP(true)
}}
/> />
{idx === inputList.length - 1 ? ( {idx === inputList.length - 1 ? (
<button <button

11
src/frontend/src/components/intComponent/index.tsx
View file

@ -1,5 +1,6 @@
import { useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { FloatComponentType } from "../../types/components"; import { FloatComponentType } from "../../types/components";
import { TabsContext } from "../../contexts/tabsContext";
export default function IntComponent({ export default function IntComponent({
value, value,
@ -13,6 +14,7 @@ export default function IntComponent({
onChange(""); onChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
const {setDisableCP} =useContext(TabsContext)
return ( return (
<div <div
className={ className={
@ -43,7 +45,14 @@ export default function IntComponent({
setMyValue(e.target.value); setMyValue(e.target.value);
onChange(e.target.value); onChange(e.target.value);
}} }}
onBlur={() => {
setDisableCP(false)
}}
onFocus={() => {
setDisableCP(true)
}}
/> />
</div> </div>
); );
} }

5
src/frontend/src/contexts/tabsContext.tsx
View file

@ -26,6 +26,8 @@ const TabsContextInitialValue: TabsContextType = {
downloadFlow: (flow: FlowType) => {}, downloadFlow: (flow: FlowType) => {},
uploadFlow: () => {}, uploadFlow: () => {},
hardReset: () => {}, hardReset: () => {},
disableCP:false,
setDisableCP:(state:boolean)=>{},
}; };
export const TabsContext = createContext<TabsContextType>( export const TabsContext = createContext<TabsContextType>(
@ -212,10 +214,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
return newFlows; return newFlows;
}); });
} }
const [disableCP, setDisableCP] = useState(false);
return ( return (
<TabsContext.Provider <TabsContext.Provider
value={{ value={{
disableCP,
setDisableCP,
save, save,
hardReset, hardReset,
tabIndex, tabIndex,

23
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -14,7 +14,7 @@ import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
export default function ApiModal({flowName}) { export default function ApiModal({ flowName }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
@ -49,24 +49,23 @@ export default function ApiModal({flowName}) {
API_URL = "${window.location.protocol}//${window.location.host}/predict" API_URL = "${window.location.protocol}//${window.location.host}/predict"
def predict(message): def predict(message):
with open("${flowName}.json:, "r") as f: with open("${flowName}.json", "r") as f:
json_data = json.load(f) json_data = json.load(f)
payload['exported_flow'] = json_data payload = {'exported_flow': json_data, 'message': message}
payload['message'] = message
response = requests.post(API_URL, json=payload) response = requests.post(API_URL, json=payload)
return response.json() # JSON {"result": "Response"} return response.json() # JSON {"result": "Response"}
print(predict("Your message"))`; print(predict("Your message"))`;
const tabs = [ const tabs = [
{ {
name: "Python", name: "Python",
mode: "python", mode: "python",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
code: pythonCode, code: pythonCode,
}, },
] ]
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}> <Transition.Root show={open} appear={true} as={Fragment}>
<Dialog <Dialog

20
src/frontend/src/modals/exportModal/index.tsx
View file

@ -16,7 +16,7 @@ export default function ExportModal() {
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);
const { flows, tabIndex, updateFlow, downloadFlow } = useContext(TabsContext); const { flows, tabIndex, updateFlow, downloadFlow,setDisableCP } = useContext(TabsContext);
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
@ -113,6 +113,12 @@ export default function ExportModal() {
placeholder="File name" placeholder="File name"
id="name" id="name"
className="focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500 text-gray-900 dark:text-gray-100" className="focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500 text-gray-900 dark:text-gray-100"
onBlur={() => {
setDisableCP(false);
}}
onFocus={() => {
setDisableCP(true);
}}
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
@ -127,6 +133,12 @@ export default function ExportModal() {
</span> </span>
</label> </label>
<textarea <textarea
onBlur={() => {
setDisableCP(false);
}}
onFocus={() => {
setDisableCP(true);
}}
name="description" name="description"
id="description" id="description"
onChange={(event) => { onChange={(event) => {
@ -151,6 +163,12 @@ export default function ExportModal() {
id="checkbox" id="checkbox"
type="checkbox" type="checkbox"
className="h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500" className="h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500"
onBlur={() => {
setDisableCP(false);
}}
onFocus={() => {
setDisableCP(true);
}}
/> />
<span className="ml-2 font-medium text-gray-700 dark:text-white"> <span className="ml-2 font-medium text-gray-700 dark:text-white">
Save with my API keys Save with my API keys

2
src/frontend/src/modals/importModal/buttonBox/index.tsx
View file

@ -74,7 +74,6 @@ export default function ButtonBox({
} }
return ( return (
<button disabled={deactivate} onClick={onClick}> <button disabled={deactivate} onClick={onClick}>
<Tooltip title={description} placement="bottom">
<div <div
className={classNames( className={classNames(
"flex flex-col justify-center items-center rounded-lg text-center shadow border border-gray-300 dark:border-gray-800 hover:shadow-lg transform hover:scale-105", "flex flex-col justify-center items-center rounded-lg text-center shadow border border-gray-300 dark:border-gray-800 hover:shadow-lg transform hover:scale-105",
@ -105,7 +104,6 @@ export default function ButtonBox({
</h3> </h3>
</div> </div>
</div> </div>
</Tooltip>
</button> </button>
); );
} }

6
src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
View file

@ -14,7 +14,7 @@ export default function TabComponent({
selected: boolean; selected: boolean;
onClick: () => void; onClick: () => void;
}) { }) {
const { removeFlow, updateFlow, flows } = useContext(TabsContext); const { removeFlow, updateFlow, flows, setDisableCP } = useContext(TabsContext);
const [isRename, setIsRename] = useState(false); const [isRename, setIsRename] = useState(false);
const [value, setValue] = useState(""); const [value, setValue] = useState("");
return ( return (
@ -40,11 +40,15 @@ export default function TabComponent({
<div className="bg-white dark:text-white dark:bg-gray-700/60 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1 rounded-t-xl -ml-px"> <div className="bg-white dark:text-white dark:bg-gray-700/60 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1 rounded-t-xl -ml-px">
{isRename ? ( {isRename ? (
<input <input
onFocus={() => {
setDisableCP(true);
}}
autoFocus autoFocus
className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md w-28" className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md w-28"
onBlur={() => { onBlur={() => {
setIsRename(false); setIsRename(false);
if (value !== "") { if (value !== "") {
setDisableCP(false);
let newFlow = _.cloneDeep(flow); let newFlow = _.cloneDeep(flow);
newFlow.name = value; newFlow.name = value;
updateFlow(newFlow); updateFlow(newFlow);

6
src/frontend/src/pages/FlowPage/index.tsx
View file

@ -37,7 +37,7 @@ const nodeTypes = {
var _ = require("lodash"); var _ = require("lodash");
export default function FlowPage({ flow }: { flow: FlowType }) { export default function FlowPage({ flow }: { flow: FlowType }) {
let { updateFlow, incrementNodeId } = let { updateFlow, incrementNodeId, disableCP} =
useContext(TabsContext); useContext(TabsContext);
const { types, reactFlowInstance, setReactFlowInstance, templates } = const { types, reactFlowInstance, setReactFlowInstance, templates } =
useContext(typesContext); useContext(typesContext);
@ -46,11 +46,11 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
const { undo, redo, canUndo, canRedo, takeSnapshot } = useUndoRedo(); const { undo, redo, canUndo, canRedo, takeSnapshot } = useUndoRedo();
const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => { const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
if ((event.ctrlKey || event.metaKey) && (event.key === 'c') && lastSelection) { if ((event.ctrlKey || event.metaKey) && (event.key === 'c') && lastSelection && !disableCP) {
event.preventDefault(); event.preventDefault();
setLastCopiedSelection(lastSelection); setLastCopiedSelection(lastSelection);
} }
if ((event.ctrlKey || event.metaKey) && (event.key === 'v') && lastCopiedSelection) { if ((event.ctrlKey || event.metaKey) && (event.key === 'v') && lastCopiedSelection && !disableCP) {
event.preventDefault(); event.preventDefault();
paste(); paste();
} }

3
src/frontend/src/types/tabs/index.ts
View file

@ -12,6 +12,9 @@ export type TabsContextType = {
downloadFlow: (flow: FlowType) => void; downloadFlow: (flow: FlowType) => void;
uploadFlow: () => void; uploadFlow: () => void;
hardReset: () => void; hardReset: () => void;
//disable CopyPaste
disableCP: boolean;
setDisableCP: (value: boolean) => void;
}; };
export type LangFlowState = { export type LangFlowState = {