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

Colors fixed

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-17 16:28:40 -03:00
commit 799f044aaf
8 changed files with 123 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

11
space_flow/src/CustomNodes/ChatInputNode/index.tsx
View file

@ -1,4 +1,4 @@
import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
import { Bars3CenterLeftIcon, ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
import Input from "../../components/inputComponent";
import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
import { Handle, Position } from "reactflow";
@ -6,7 +6,7 @@ import Tooltip from "../../components/TooltipComponent";
export default function ChatInputNode({ data }) {
return (
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-blue-600">
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors['chat']}}>
<Tooltip title="Prefix: str">
<Handle
type="source"
@ -25,11 +25,12 @@ export default function ChatInputNode({ data }) {
position={Position.Right}
id={'str|str|'+data.id}
isValidConnection={(connection) => isValidConnection(data,connection)}
className="-mr-1 bg-transparent border-solid border-l-8 border-l-blue-600 border-y-transparent border-y-8 border-r-0 rounded-none"
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{borderLeftColor: nodeColors['chat']}}
></Handle>
</Tooltip>
<div className="flex gap-3 text-lg font-medium text-white items-center">
<ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1" />
<div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors['chat']}}>
<Bars3CenterLeftIcon className="h-8 w-8 mt-1" />
Input
</div>
</div>

13
space_flow/src/CustomNodes/ChatOutputNode/index.tsx
View file

@ -1,25 +1,26 @@
import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
import { Bars3CenterLeftIcon, ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
import { Handle, Position } from "reactflow";
import Input from "../../components/inputComponent";
import { isValidConnection, snakeToNormalCase } from "../../utils";
import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
import Tooltip from "../../components/TooltipComponent";
export default function ChatOutputNode({ data }) {
return (
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-blue-600">
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors['chat']}}>
<Tooltip title="Message: str">
<Handle
type="source"
isValidConnection={(connection) => isValidConnection(data,connection)}
position={Position.Left}
id={"str|output|"+data.id}
className="ml-1 bg-transparent border-solid border-l-8 border-l-white border-y-transparent border-y-8 border-r-0 rounded-none"
className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{borderLeftColor: nodeColors['chat']}}
></Handle>
</Tooltip>
<div className="flex gap-3 text-lg font-medium text-white items-center">
<div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors['chat']}}>
Output
<ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1" />
<Bars3CenterLeftIcon className="h-8 w-8 mt-1" />
</div>
</div>
);

70
space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -6,6 +6,8 @@ import {
snakeToNormalCase,
} from "../../../../utils";
import { useEffect, useRef, useState } from "react";
import Input from "../../../../components/inputComponent";
import ToggleComponent from "../../../../components/toggleComponent";
export default function ParameterComponent({
left,
@ -14,41 +16,69 @@ export default function ParameterComponent({
tooltipTitle,
title,
color,
type,
name = "",
}) {
const ref = useRef(null);
const updateNodeInternals = useUpdateNodeInternals();
const [position, setPosition] = useState(0);
useEffect(() => {
if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
setPosition(ref.current.offsetTop + (ref.current.clientHeight / 2));
setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
updateNodeInternals(data.id);
}
}, [data.id, ref, updateNodeInternals]);
useEffect(() => {
updateNodeInternals(data.id);
}, [data.id, position, updateNodeInternals])
}, [data.id, position, updateNodeInternals]);
const [enabled, setEnabled] = useState(data.node.template[name]?.value ?? false);
return (
<div ref={ref} className="w-full bg-gray-50 mt-1 px-5 py-2">
<>
<div className="text-sm truncate">{title}</div>
<Tooltip title={tooltipTitle}>
<Handle
type={left ? "source" : "target"}
position={left ? Position.Left : Position.Right}
id={id}
isValidConnection={(connection) =>
isValidConnection(data, connection)
}
className={(left ? "-ml-0.5 " : "-mr-0.5 ") +"w-3 h-3 rounded-full border-2 bg-white"}
style={{
borderColor: color,
top: position,
<div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 mt-1 px-5 py-2">
<>
<div className="text-sm truncate">{title}</div>
<Tooltip title={tooltipTitle}>
<Handle
type={left ? "source" : "target"}
position={left ? Position.Left : Position.Right}
id={id}
isValidConnection={(connection) =>
isValidConnection(data, connection)
}
className={
(left ? "-ml-0.5 " : "-mr-0.5 ") +
"w-3 h-3 rounded-full border-2 bg-white"
}
style={{
borderColor: color,
top: position,
}}
></Handle>
</Tooltip>
{left === true && type === "str" ? (
<div className="mt-2 w-full">
<Input
onChange={(t) => {
data.node.template[name].value = t;
}}
></Handle>
</Tooltip>
</>
/>
</div>
) : left === true && type === "bool" ? (
<div className="mt-2">
<ToggleComponent
enabled={enabled}
setEnabled={(t) => {
data.node.template[name].value = t;
setEnabled(t);
}}
/>
</div>
) : (
<></>
)}
</>
</div>
);
}

17
space_flow/src/CustomNodes/GenericNode/index.tsx
View file

@ -1,19 +1,11 @@
import {
ArrowUpRightIcon,
TrashIcon,
PlayIcon,
} from "@heroicons/react/24/outline";
import { Handle, Position } from "reactflow";
import Dropdown from "../../components/dropdownComponent";
import Input from "../../components/inputComponent";
import {
isValidConnection,
nodeColors,
nodeIcons,
snakeToNormalCase,
} from "../../utils";
import Tooltip from "../../components/TooltipComponent";
import { useEffect, useRef, useState } from "react";
import ParameterComponent from "./components/parameterComponent";
export default function GenericNode({ data }) {
@ -24,8 +16,8 @@ export default function GenericNode({ data }) {
<div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">
<div className="w-full flex items-center truncate gap-4 text-lg">
<Icon
className="w-10 h-10 p-1 text-white rounded"
style={{ background: nodeColors[data.type] }}
className="w-10 h-10 p-1 rounded"
style={{ color: nodeColors[data.type] }}
/>
<div className="truncate">{data.name}</div>
</div>
@ -34,7 +26,7 @@ export default function GenericNode({ data }) {
</button>
</div>
<div className="w-full h-full py-5 pointer-events-none">
<div className="w-full h-full py-5">
<div className="w-full text-gray-500 px-5 text-sm">
{data.node.description}
</div>
@ -61,6 +53,7 @@ export default function GenericNode({ data }) {
snakeToNormalCase(t) +
(data.node.template[t].required ? " (required)" : "")
}
name={t}
tooltipTitle={
"Type: " +
data.node.template[t].type +
@ -69,6 +62,7 @@ export default function GenericNode({ data }) {
}
id={data.node.template[t].type + "|" + t + "|" + data.id}
left={true}
type={data.node.template[t].type}
/>
) : (
<></>
@ -82,6 +76,7 @@ export default function GenericNode({ data }) {
title={data.name + " | " + data.node.base_class}
tooltipTitle={"Type: str"}
id={data.name + "|" + data.node.base_class + "|" + data.id}
type={'str'}
left={false}
/>
</>

11
space_flow/src/components/chatComponent/index.tsx
View file

@ -1,5 +1,6 @@
import { Transition } from "@headlessui/react";
import {
Bars3CenterLeftIcon,
ChatBubbleBottomCenterTextIcon,
PaperAirplaneIcon,
XMarkIcon,
@ -7,6 +8,7 @@ import {
import { useContext, useEffect, useRef, useState } from "react";
import { sendAll } from "../../controllers/NodesServices";
import { alertContext } from "../../contexts/alertContext";
import { nodeColors } from "../../utils";
const _ = require("lodash");
@ -26,7 +28,8 @@ export default function Chat({ reactFlowInstance }) {
ref.current.scrollIntoView({behavior: 'smooth'});
}, [chatHistory])
function validateNodes(){
if(reactFlowInstance.getNodes().some((n) => (n.data.node && Object.keys(n.data.node.template).some((t: any) => (n.data.node.template[t].required && !reactFlowInstance.getEdges().some((e) => (e.sourceHandle.split('|')[1] === t && e.sourceHandle.split('|')[2] === n.id))))))){
console.log(reactFlowInstance.getNodes());
if(reactFlowInstance.getNodes().some((n) => (n.data.node && Object.keys(n.data.node.template).some((t: any) => ((n.data.node.template[t].required && n.data.node.template[t].value === "") && (n.data.node.template[t].required && !reactFlowInstance.getEdges().some((e) => (e.sourceHandle.split('|')[1] === t && e.sourceHandle.split('|')[2] === n.id)))))))){
return false;
}
return true;
@ -55,7 +58,7 @@ export default function Chat({ reactFlowInstance }) {
<div className="border h-full rounded-xl rounded-b-none bg-white shadow">
<div className="flex justify-between items-center px-5 py-3 border-b">
<div className="flex gap-3 text-xl font-medium items-center">
<ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1 text-blue-600" />
<Bars3CenterLeftIcon className="h-8 w-8 mt-1" style={{color: nodeColors['chat']}} />
Chat
</div>
<button
@ -77,7 +80,7 @@ export default function Chat({ reactFlowInstance }) {
</div>
) : (
<div className="w-full text-end">
<div className="text-start inline-block bg-blue-600 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tr-none">
<div style={{color: nodeColors['chat']}} className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tr-none">
{c.message}
</div>
</div>
@ -154,7 +157,7 @@ export default function Chat({ reactFlowInstance }) {
}}
>
<div className="flex gap-3 text-lg font-medium items-center">
<ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1 text-blue-600" />
<Bars3CenterLeftIcon className="h-8 w-8 mt-1" style={{color: nodeColors['chat']}}/>
Chat
</div>
</button>

3
space_flow/src/components/toggleComponent/index.tsx
View file

@ -1,10 +1,11 @@
import { Switch } from "@headlessui/react";
import { classNames } from "../../utils";
import { useState } from "react";
export default function ToggleComponent({enabled, setEnabled}){
return (<Switch
checked={enabled}
onChange={setEnabled}
onChange={(x) => {setEnabled(x);}}
className={classNames(
enabled ? 'bg-indigo-600' : 'bg-gray-200',
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'

61
space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -14,7 +14,7 @@ export default function ExtraSidebar() {
});
console.log(acc);
return acc;
}, {str: 'elements', bool: 'elements'});
}, {str: 'advanced', bool: 'advanced', chatOutput: 'chat', chatInput: 'chat'});
useEffect(() => {
getAll().then((d) => {
@ -62,36 +62,17 @@ export default function ExtraSidebar() {
</DisclosureComponent>
))}
<DisclosureComponent
button={{ title: nodeNames['elements'], Icon: nodeIcons['elements'] }}
button={{ title: nodeNames['chat'], Icon: nodeIcons['chat'] }}
>
<div className="p-2 flex flex-col gap-2">
<div>
<div
draggable
className={" cursor-grab border-l-8 rounded-l-md"}
style={{ borderLeftColor: nodeColors['elements'] }}
style={{ borderLeftColor: nodeColors['chat'] }}
onDragStart={(event) =>
onDragStart(event, {
type: 'elements',
name: 'str',
types,
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black w-36 truncate">String</span>
<Bars2Icon className="w-6 h-6 text-gray-400" />
</div>
</div>
</div>
<div>
<div
draggable
className={" cursor-grab border-l-8 rounded-l-md"}
style={{ borderLeftColor: nodeColors['elements'] }}
onDragStart={(event) =>
onDragStart(event, {
type: 'elements',
type: 'chat',
name: 'chatInput',
types,
})
@ -107,10 +88,10 @@ export default function ExtraSidebar() {
<div
draggable
className={" cursor-grab border-l-8 rounded-l-md"}
style={{ borderLeftColor: nodeColors['elements'] }}
style={{ borderLeftColor: nodeColors['chat'] }}
onDragStart={(event) =>
onDragStart(event, {
type: 'elements',
type: 'chat',
name: 'chatOutput',
types,
})
@ -122,14 +103,39 @@ export default function ExtraSidebar() {
</div>
</div>
</div>
</div>
</DisclosureComponent>
<DisclosureComponent
button={{ title: nodeNames['advanced'], Icon: nodeIcons['advanced'] }}
>
<div className="p-2 flex flex-col gap-2">
<div>
<div
draggable
className={" cursor-grab border-l-8 rounded-l-md"}
style={{ borderLeftColor: nodeColors['elements'] }}
style={{ borderLeftColor: nodeColors['advanced'] }}
onDragStart={(event) =>
onDragStart(event, {
type: 'elements',
type: 'advanced',
name: 'str',
types,
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black w-36 truncate">String</span>
<Bars2Icon className="w-6 h-6 text-gray-400" />
</div>
</div>
</div>
<div>
<div
draggable
className={" cursor-grab border-l-8 rounded-l-md"}
style={{ borderLeftColor: nodeColors['advanced'] }}
onDragStart={(event) =>
onDragStart(event, {
type: 'advanced',
name: 'bool',
types,
})
@ -143,6 +149,7 @@ export default function ExtraSidebar() {
</div>
</div>
</DisclosureComponent>
</div>
);
}

17
space_flow/src/utils.ts
View file

@ -6,6 +6,7 @@ import {
CommandLineIcon,
WrenchScrewdriverIcon,
ComputerDesktopIcon,
Bars3CenterLeftIcon,
} from "@heroicons/react/24/outline";
import { Edge, Node } from "reactflow";
@ -96,13 +97,14 @@ export const borderLColors = {
} */
export const nodeColors = {
prompts: "#7C7C7C",
llms: "#35ADAE",
chains: "#FFDC35",
prompts: "#4367BF",
llms: "#6344BE",
chains: "#FE7500",
agents: "#903BBE",
tools: "#FF3434",
memories: "#FF9135",
elements: "#6344BE",
advanced: "#000000",
chat: "#2563EB",
};
export const nodeNames = {
@ -112,7 +114,9 @@ export const nodeNames = {
agents: "Agents",
tools: "Tools",
memories: "Memories",
elements: "Elements",
advanced: "Advanced",
chat: "Chat",
};
export const nodeIcons = {
@ -122,7 +126,8 @@ export const nodeIcons = {
llms: LightBulbIcon,
prompts: CommandLineIcon,
tools: WrenchScrewdriverIcon,
elements: ComputerDesktopIcon,
advanced: ComputerDesktopIcon,
chat: Bars3CenterLeftIcon,
};
export const bgColors = {