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]
name = "langflow"
version = "0.0.68"
version = "0.0.69"
description = "A Python package with a built-in web application"
authors = ["Logspace <contact@logspace.ai>"]
maintainers = [
@ -29,7 +29,7 @@ google-search-results = "^2.4.1"
google-api-python-client = "^2.79.0"
typer = "^0.7.0"
gunicorn = "^20.1.0"
langchain = "~0.0.150"
langchain = "^0.0.166"
openai = "^0.27.2"
types-pyyaml = "^6.0.12.8"
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 { TabsContext } from "../../contexts/tabsContext";
export default function FloatComponent({
value,
@ -13,6 +14,7 @@ export default function FloatComponent({
onChange("");
}
}, [disabled, onChange]);
const {setDisableCP} = useContext(TabsContext)
return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<input
@ -27,6 +29,12 @@ export default function FloatComponent({
setMyValue(e.target.value);
onChange(e.target.value);
}}
onBlur={() => {
setDisableCP(false)
}}
onFocus={() => {
setDisableCP(true)
}}
/>
</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 { classNames } from "../../utils";
import { TabsContext } from "../../contexts/tabsContext";
export default function InputComponent({
value,
@ -8,79 +9,86 @@ export default function InputComponent({
disabled,
password,
}: InputComponentType) {
const [myValue, setMyValue] = useState(value ?? "");
const [pwdVisible, setPwdVisible] = useState(false);
useEffect(() => {
if (disabled) {
setMyValue("");
onChange("");
}
}, [disabled, onChange]);
return (
<div
className={
disabled
? "relative pointer-events-none cursor-not-allowed"
: "relative"
}
>
<input
value={myValue}
className={classNames(
"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",
disabled ? " bg-gray-200 dark:bg-gray-700" : "",
password && !pwdVisible && myValue!=="" ? "password" : ""
)}
placeholder="Type a text"
onChange={(e) => {
setMyValue(e.target.value);
onChange(e.target.value);
}}
/>
<button
className="absolute inset-y-0 right-0 items-center px-4 text-gray-600 dark:text-gray-300"
onClick={() => {
setPwdVisible(!pwdVisible);
}}
>
{password &&
(pwdVisible ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-5 h-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
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"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-5 h-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
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"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
))}
</button>
</div>
);
const [myValue, setMyValue] = useState(value ?? "");
const [pwdVisible, setPwdVisible] = useState(false);
const {setDisableCP} = useContext(TabsContext)
useEffect(() => {
if (disabled) {
setMyValue("");
onChange("");
}
}, [disabled, onChange]);
return (
<div
className={
disabled
? "relative pointer-events-none cursor-not-allowed"
: "relative"
}
>
<input
value={myValue}
onBlur={() => {
setDisableCP(false)
}}
onFocus={() => {
setDisableCP(true)
}}
className={classNames(
"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" : ""
)}
placeholder="Type a text"
onChange={(e) => {
setMyValue(e.target.value);
onChange(e.target.value);
}}
/>
<button
className="absolute inset-y-0 right-0 items-center px-4 text-gray-600"
onClick={() => {
setPwdVisible(!pwdVisible);
}}
>
{password &&
(pwdVisible ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-5 h-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
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"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-5 h-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
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"
/>
<path
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 { useEffect, useState } from "react";
import { useContext, useEffect, useState } from "react";
import { InputListComponentType } from "../../types/components";
import { TabsContext } from "../../contexts/tabsContext";
var _ = require("lodash");
@ -16,6 +17,7 @@ export default function InputListComponent({
onChange([""]);
}
}, [disabled, onChange]);
const {setDisableCP} = useContext(TabsContext)
return (
<div
className={
@ -41,6 +43,12 @@ export default function InputListComponent({
});
onChange(inputList);
}}
onBlur={() => {
setDisableCP(false)
}}
onFocus={() => {
setDisableCP(true)
}}
/>
{idx === inputList.length - 1 ? (
<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 { TabsContext } from "../../contexts/tabsContext";
export default function IntComponent({
value,
@ -13,6 +14,7 @@ export default function IntComponent({
onChange("");
}
}, [disabled, onChange]);
const {setDisableCP} =useContext(TabsContext)
return (
<div
className={
@ -43,7 +45,14 @@ export default function IntComponent({
setMyValue(e.target.value);
onChange(e.target.value);
}}
onBlur={() => {
setDisableCP(false)
}}
onFocus={() => {
setDisableCP(true)
}}
/>
</div>
);
}

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

@ -26,6 +26,8 @@ const TabsContextInitialValue: TabsContextType = {
downloadFlow: (flow: FlowType) => {},
uploadFlow: () => {},
hardReset: () => {},
disableCP:false,
setDisableCP:(state:boolean)=>{},
};
export const TabsContext = createContext<TabsContextType>(
@ -212,10 +214,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
return newFlows;
});
}
const [disableCP, setDisableCP] = useState(false);
return (
<TabsContext.Provider
value={{
disableCP,
setDisableCP,
save,
hardReset,
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 { dark } = useContext(darkContext);
const { closePopUp } = useContext(PopUpContext);
@ -49,24 +49,23 @@ export default function ApiModal({flowName}) {
API_URL = "${window.location.protocol}//${window.location.host}/predict"
def predict(message):
with open("${flowName}.json:, "r") as f:
with open("${flowName}.json", "r") as f:
json_data = json.load(f)
payload['exported_flow'] = json_data
payload['message'] = message
payload = {'exported_flow': json_data, 'message': message}
response = requests.post(API_URL, json=payload)
return response.json() # JSON {"result": "Response"}
print(predict("Your message"))`;
const tabs = [
{
name: "Python",
mode: "python",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
code: pythonCode,
},
const tabs = [
{
name: "Python",
mode: "python",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
code: pythonCode,
},
]
]
return (
<Transition.Root show={open} appear={true} as={Fragment}>
<Dialog

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

@ -16,7 +16,7 @@ export default function ExportModal() {
const { closePopUp } = useContext(PopUpContext);
const ref = useRef();
const { setErrorData } = useContext(alertContext);
const { flows, tabIndex, updateFlow, downloadFlow } = useContext(TabsContext);
const { flows, tabIndex, updateFlow, downloadFlow,setDisableCP } = useContext(TabsContext);
function setModalOpen(x: boolean) {
setOpen(x);
if (x === false) {
@ -113,6 +113,12 @@ export default function ExportModal() {
placeholder="File 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"
onBlur={() => {
setDisableCP(false);
}}
onFocus={() => {
setDisableCP(true);
}}
/>
</div>
<div className="w-full">
@ -127,6 +133,12 @@ export default function ExportModal() {
</span>
</label>
<textarea
onBlur={() => {
setDisableCP(false);
}}
onFocus={() => {
setDisableCP(true);
}}
name="description"
id="description"
onChange={(event) => {
@ -151,6 +163,12 @@ export default function ExportModal() {
id="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"
onBlur={() => {
setDisableCP(false);
}}
onFocus={() => {
setDisableCP(true);
}}
/>
<span className="ml-2 font-medium text-gray-700 dark:text-white">
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 (
<button disabled={deactivate} onClick={onClick}>
<Tooltip title={description} placement="bottom">
<div
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",
@ -105,7 +104,6 @@ export default function ButtonBox({
</h3>
</div>
</div>
</Tooltip>
</button>
);
}

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

@ -14,7 +14,7 @@ export default function TabComponent({
selected: boolean;
onClick: () => void;
}) {
const { removeFlow, updateFlow, flows } = useContext(TabsContext);
const { removeFlow, updateFlow, flows, setDisableCP } = useContext(TabsContext);
const [isRename, setIsRename] = useState(false);
const [value, setValue] = useState("");
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">
{isRename ? (
<input
onFocus={() => {
setDisableCP(true);
}}
autoFocus
className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md w-28"
onBlur={() => {
setIsRename(false);
if (value !== "") {
setDisableCP(false);
let newFlow = _.cloneDeep(flow);
newFlow.name = value;
updateFlow(newFlow);

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

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

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

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