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

Merge branch 'main' into dev

Browse source
This commit is contained in:
Gabriel Almeida 2023-05-22 20:09:21 -03:00
commit 14f27df3ae
8 changed files with 85 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/package-lock.json generated
View file

@ -7370,4 +7370,4 @@
}
}
}
}
}

70
src/frontend/src/components/chatComponent/chatTrigger/index.tsx
View file

@ -1,7 +1,7 @@
import { Transition } from "@headlessui/react";
import {
Bars3CenterLeftIcon,
ChatBubbleBottomCenterTextIcon,
Bars3CenterLeftIcon,
ChatBubbleBottomCenterTextIcon,
} from "@heroicons/react/24/outline";
import { nodeColors } from "../../../utils";
import { PopUpContext } from "../../../contexts/popUpContext";
@ -9,37 +9,37 @@ import { useContext } from "react";
import ChatModal from "../../../modals/chatModal";
export default function ChatTrigger({ open, setOpen }) {
const { openPopUp } = useContext(PopUpContext);
return (
<Transition
show={!open}
appear={true}
enter="transition ease-out duration-300"
enterFrom="translate-y-96"
enterTo="translate-y-0"
leave="transition ease-in duration-300"
leaveFrom="translate-y-0"
leaveTo="translate-y-96"
>
<div className="absolute bottom-4 right-3">
<div
// style={{ backgroundColor: nodeColors["chat"] }}
className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 dark:border-gray-600"
>
<button
onClick={() => {
setOpen(true);
}}
>
<div className="flex gap-3 items-center">
<ChatBubbleBottomCenterTextIcon
className="h-6 w-6 mt-1"
style={{ color: "white" }}
/>
</div>
</button>
</div>
</div>
</Transition>
);
const { openPopUp } = useContext(PopUpContext);
return (
<Transition
show={!open}
appear={true}
enter="transition ease-out duration-300"
enterFrom="translate-y-96"
enterTo="translate-y-0"
leave="transition ease-in duration-300"
leaveFrom="translate-y-0"
leaveTo="translate-y-96"
>
<div className="absolute bottom-4 right-3">
<div
// style={{ backgroundColor: nodeColors["chat"] }}
className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 dark:border-gray-600"
>
<button
onClick={() => {
setOpen(true);
}}
>
<div className="flex gap-3 items-center">
<ChatBubbleBottomCenterTextIcon
className="h-6 w-6 mt-1"
style={{ color: "white" }}
/>
</div>
</button>
</div>
</div>
</Transition>
);
}

2
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -57,7 +57,7 @@ export default function CodeAreaComponent({
);
}}
>
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
</button>
</div>
</div>

2
src/frontend/src/components/promptComponent/index.tsx
View file

@ -58,7 +58,7 @@ export default function PromptAreaComponent({
);
}}
>
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
</button>
</div>
</div>

2
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -25,7 +25,7 @@ export default function TextAreaComponent({ value, onChange, disabled }:TextArea
{myValue !== "" ? myValue : 'Text empty'}
</span>
<button onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
</button>
</div>
</div>

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

@ -92,10 +92,10 @@ export default function ButtonBox({
<div className={textColor}>{icon}</div>
</div>
</div>
<div className="mt-auto mb-auto">
<div className="w-full mt-auto mb-auto">
<h3
className={classNames(
"font-semibold text-white dark:text-white/80",
"w-full font-semibold break-words text-white dark:text-white/80",
titleFontSize,
marginTop
)}

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

@ -30,9 +30,7 @@ import { typesContext } from "../../contexts/typesContext";
import ConnectionLineComponent from "./components/ConnectionLineComponent";
import { FlowType, NodeType } from "../../types/flow";
import { APIClassType } from "../../types/api";
import {
isValidConnection,
} from "../../utils";
import { isValidConnection } from "../../utils";
import useUndoRedo from "./hooks/useUndoRedo";
const nodeTypes = {
@ -43,49 +41,48 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
let { updateFlow, disableCopyPaste, addFlow, getNodeId, paste } =
useContext(TabsContext);
const { types, reactFlowInstance, setReactFlowInstance, templates } =
useContext(typesContext);
useContext(typesContext);
const reactFlowWrapper = useRef(null);
const { undo, redo, canUndo, canRedo, takeSnapshot } = useUndoRedo();
const [position, setPosition] = useState({ x: 0, y: 0 });
const [lastSelection, setLastSelection] =
useState<OnSelectionChangeParams>(null);
useState<OnSelectionChangeParams>(null);
const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
useEffect(() => {
// this effect is used to attach the global event handlers
const onKeyDown = (event: KeyboardEvent) => {
console.log("keydownou", lastCopiedSelection, position)
console.log("keydownou", lastCopiedSelection, position);
if (
(event.ctrlKey || event.metaKey) &&
event.key === "c" &&
lastSelection &&
!disableCopyPaste
) {
event.preventDefault();
setLastCopiedSelection(_.cloneDeep(lastSelection));
}
if (
(event.ctrlKey || event.metaKey) &&
event.key === "v" &&
lastCopiedSelection &&
!disableCopyPaste
) {
event.preventDefault();
let bounds = reactFlowWrapper.current.getBoundingClientRect();
paste(lastCopiedSelection, {
x: position.x - bounds.left,
y: position.y - bounds.top,
});
}
if (
(event.ctrlKey || event.metaKey) &&
event.key === "g" &&
lastSelection
) {
event.preventDefault();
setLastCopiedSelection(_.cloneDeep(lastSelection));
}
if (
(event.ctrlKey || event.metaKey) &&
event.key === "v" &&
lastCopiedSelection &&
!disableCopyPaste
) {
event.preventDefault();
let bounds = reactFlowWrapper.current.getBoundingClientRect();
paste(lastCopiedSelection, {
x: position.x - bounds.left,
y: position.y - bounds.top,
});
}
if (
(event.ctrlKey || event.metaKey) &&
event.key === "g" &&
lastSelection
) {
event.preventDefault();
// addFlow(newFlow, false);
@ -94,21 +91,18 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
const handleMouseMove = (event) => {
setPosition({ x: event.clientX, y: event.clientY });
};
document.addEventListener('keydown', onKeyDown);
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener("keydown", onKeyDown);
document.addEventListener("mousemove", handleMouseMove);
return () => {
document.removeEventListener('keydown', onKeyDown);
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener("keydown", onKeyDown);
document.removeEventListener("mousemove", handleMouseMove);
};
}, [position, lastCopiedSelection, lastSelection]);
const [selectionMenuVisible, setSelectionMenuVisible] = useState(false);
const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
const { setErrorData } = useContext(alertContext);
const [nodes, setNodes, onNodesChange] = useNodesState(
@ -314,10 +308,7 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
}, []);
return (
<div
className="w-full h-full"
ref={reactFlowWrapper}
>
<div className="w-full h-full" ref={reactFlowWrapper}>
{Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? (
<>
<ReactFlow
@ -357,4 +348,4 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
)}
</div>
);
}
}

6
src/frontend/tailwind.config.js
View file

@ -76,6 +76,12 @@ module.exports = {
backgroundColor: "#bbb",
},
},
".dark .theme-attribution .react-flow__attribution": {
backgroundColor: "rgba(255, 255, 255, 0.2)",
},
".dark .theme-attribution .react-flow__attribution a": {
color: "black",
},
});
}),
require("@tailwindcss/typography"),