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

Merge branch 'uiRevision' into dev

Browse source
This commit is contained in:
anovazzi1 2023-03-08 21:49:09 -03:00
commit 1d2a421813
9 changed files with 48 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
langflow/frontend/public/index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>LangFLow</title>
</head>
<body id='body' style="width: 100%; height:100%">
<noscript>You need to enable JavaScript to run this app.</noscript>

11
langflow/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -52,6 +52,9 @@ export default function ParameterComponent({
{title}
<span className="text-red-600">{required ? " *" : ""}</span>
</div>
{left && (type === "str" || type === "bool" || type === "float") ?
<></>
:
<Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
<Handle
type={left ? "target" : "source"}
@ -62,10 +65,7 @@ export default function ParameterComponent({
}
className={classNames(
left ? "-ml-0.5 " : "-mr-0.5 ",
"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800",
left && (type === "str" || type === "bool" || type === "float")
? "hidden"
: ""
"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
)}
style={{
borderColor: color,
@ -73,6 +73,8 @@ export default function ParameterComponent({
}}
></Handle>
</Tooltip>
}
{left === true && type === "str" ? (
<div className="mt-2 w-full">
{data.node.template[name].list ? (
@ -99,6 +101,7 @@ export default function ParameterComponent({
) : (
<InputComponent
disabled={disabled}
password={data.node.template[name].password ?? true}
value={data.node.template[name].value ?? ""}
onChange={(t) => {
data.node.template[name].value = t;

20
langflow/frontend/src/components/chatComponent/index.tsx
View file

@ -5,7 +5,7 @@ import {
PaperAirplaneIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import { useContext, useEffect, useRef, useState } from "react";
import { MouseEventHandler, useContext, useEffect, useRef, useState } from "react";
import { sendAll } from "../../controllers/NodesServices";
import { alertContext } from "../../contexts/alertContext";
import { classNames, nodeColors } from "../../utils";
@ -89,7 +89,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
sendAll({ ...reactFlowInstance.toObject(), message, chatHistory })
.then((r) => {
console.log(r.data);
addChatHistory(r.data.result, false,r.data.thought);
addChatHistory(r.data.result, false, r.data.thought);
setLockChat(false);
})
.catch((error) => {
@ -109,6 +109,10 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
});
}
}
function clearChat() {
setChatHistory([])
updateFlow({ ..._.cloneDeep(flow), chat: []});
}
return (
<>
@ -137,10 +141,18 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
/>
Chat
</div>
<button className="hover:text-blue-500"
onClick={(e) => {
e.stopPropagation()
clearChat();
}}
>
clear
</button>
</div>
<div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 dark:bg-gray-900 p-3 py-5">
{chatHistory.map((c, i) => (
<ChatMessage chat={c} key={i}/>
<ChatMessage chat={c} key={i} />
))}
<div ref={ref}></div>
</div>
@ -154,7 +166,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
}}
type="text"
disabled={lockChat}
value={lockChat?"Thinking...": chatValue}
value={lockChat ? "Thinking..." : chatValue}
onChange={(e) => {
setChatValue(e.target.value);
}}

4
langflow/frontend/src/components/inputComponent/index.tsx
View file

@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { InputComponentType } from "../../types/components";
export default function InputComponent({value, onChange, disabled}: InputComponentType){
export default function InputComponent({value, onChange, disabled, password}: InputComponentType){
const [myValue, setMyValue] = useState(value ?? "");
useEffect(()=> {
if(disabled){
@ -12,7 +12,7 @@ export default function InputComponent({value, onChange, disabled}: InputCompone
return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<input
type="text"
type={password ? "password" : "text"}
value={myValue}
className={"block w-full 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" : "")}
placeholder="Type a text"

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

@ -1,6 +1,7 @@
import { createContext, useEffect, useState, useRef, ReactNode } from "react";
import { FlowType } from "../types/flow";
import { TabsContextType } from "../types/tabs";
import { normalCaseToSnakeCase } from "../utils";
const TabsContextInitialValue: TabsContextType = {
tabIndex: 0,
@ -61,7 +62,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
// create a link element and set its properties
const link = document.createElement("a");
link.href = jsonString;
link.download = `${flows[tabIndex].name}.json`;
link.download = `${normalCaseToSnakeCase(flows[tabIndex].name)}.json`;
// simulate a click on the link element to trigger the download
link.click();
@ -124,7 +125,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
// Create a new flow with a default name if no flow is provided.
let newFlow: FlowType = {
name: flow ? flow.name : "flow" + id,
name: flow ? flow.name : "New Flow " + id,
id: id.toString(),
data,
chat: flow ? flow.chat : [],

1
langflow/frontend/src/contexts/typesContext.tsx
View file

@ -21,6 +21,7 @@ export function TypesProvider({ children }:{children:ReactNode}) {
reactFlowInstance.setNodes(
reactFlowInstance.getNodes().filter((n:Node) => n.id !== idx)
);
reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((ns) => ns.source !== idx && ns.target !== idx));
}
return (
<typesContext.Provider

5
langflow/frontend/src/pages/FlowPage/index.tsx
View file

@ -153,7 +153,11 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
// Specify dependencies for useCallback
[incrementNodeId, reactFlowInstance, setErrorData, setNodes]
);
const onDelete = (mynodes) => {
setEdges(edges.filter((ns) => !nodes.some((n) => ns.source === n.id || ns.target === n.id)));
}
return (
<div className="w-full h-full" ref={reactFlowWrapper}>
@ -174,6 +178,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
connectionLineComponent={ConnectionLineComponent}
onDragOver={onDragOver}
onDrop={onDrop}
onNodesDelete={onDelete}
>
<Background className="dark:bg-gray-900"/>
<Controls className="[&>button]:text-black [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600">

1
langflow/frontend/src/types/components/index.ts
View file

@ -4,6 +4,7 @@ export type InputComponentType = {
value: string;
disabled?: boolean;
onChange: (value: string) => void;
password: boolean;
};
export type ToggleComponentType = {
enabled: boolean;

13
langflow/frontend/src/utils.ts
View file

@ -286,6 +286,18 @@ export function snakeToNormalCase(str: string) {
.join(" ");
}
export function normalCaseToSnakeCase(str:string){
return str
.split(" ")
.map((word, index) => {
if (index === 0) {
return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
return word.toLowerCase();
})
.join("_");
}
export function roundNumber(x:number, decimals:number) {
return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
}
@ -303,7 +315,6 @@ export function isValidConnection(
{ source, target, sourceHandle, targetHandle }:Connection,
reactFlowInstance:ReactFlowInstance
) {
console.log(target)
if (
sourceHandle.split('|')[0] === targetHandle.split("|")[0] ||
sourceHandle.split('|').slice(2).some((t) => t === targetHandle.split("|")[0]) ||