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

formatting branch

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-29 19:58:34 -03:00
commit e95dd524a8
24 changed files with 134 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -229,26 +229,25 @@ export default function ParameterComponent({
</div>
) : left === true && type === "code" ? (
<div className="mt-2 w-full">
<CodeAreaComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
<CodeAreaComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>
) : left === true && type === "file" ? (
<div className="mt-2 w-full">
<InputFileComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue}
fileTypes={data.node.template[name].fileTypes}
suffixes={data.node.template[name].suffixes}
onFileChange={(t: string) => {
data.node.template[name].file_path = t;
save();
}}
></InputFileComponent>
<InputFileComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue}
fileTypes={data.node.template[name].fileTypes}
suffixes={data.node.template[name].suffixes}
onFileChange={(t: string) => {
data.node.template[name].file_path = t;
save();
}}
></InputFileComponent>
</div>
) : left === true && type === "int" ? (
<div className="mt-2 w-full">
@ -261,13 +260,12 @@ export default function ParameterComponent({
</div>
) : left === true && type === "prompt" ? (
<div className="mt-2 w-full">
<PromptAreaComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
<PromptAreaComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>
) : (
<></>
)}

25
src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
View file

@ -29,10 +29,7 @@ export default function SingleAlert({
key={dropItem.id}
>
<div className="flex-shrink-0">
<XCircle
className="h-5 w-5 text-status-red"
aria-hidden="true"
/>
<XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
</div>
<div className="ml-3">
<h3 className="text-sm break-words font-medium text-error-foreground">
@ -65,7 +62,10 @@ export default function SingleAlert({
className="inline-flex rounded-md p-1.5 text-status-red"
>
<span className="sr-only">Dismiss</span>
<X className="h-4 w-4 text-error-foreground" aria-hidden="true" />
<X
className="h-4 w-4 text-error-foreground"
aria-hidden="true"
/>
</button>
</div>
</div>
@ -76,10 +76,7 @@ export default function SingleAlert({
key={dropItem.id}
>
<div className="flex-shrink-0">
<Info
className="h-5 w-5 text-status-blue "
aria-hidden="true"
/>
<Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-info-foreground font-medium">
@ -111,7 +108,10 @@ export default function SingleAlert({
className="inline-flex rounded-md p-1.5 text-info-foreground"
>
<span className="sr-only">Dismiss</span>
<X className="h-4 w-4 text-info-foreground" aria-hidden="true" />
<X
className="h-4 w-4 text-info-foreground"
aria-hidden="true"
/>
</button>
</div>
</div>
@ -145,7 +145,10 @@ export default function SingleAlert({
className="inline-flex rounded-md p-1.5 text-status-green"
>
<span className="sr-only">Dismiss</span>
<X className="h-4 w-4 text-success-foreground" aria-hidden="true" />
<X
className="h-4 w-4 text-success-foreground"
aria-hidden="true"
/>
</button>
</div>
</div>

5
src/frontend/src/alerts/error/index.tsx
View file

@ -43,10 +43,7 @@ export default function ErrorAlert({
>
<div className="flex">
<div className="flex-shrink-0">
<XCircle
className="h-5 w-5 text-status-red"
aria-hidden="true"
/>
<XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-error-foreground">

5
src/frontend/src/alerts/notice/index.tsx
View file

@ -40,10 +40,7 @@ export default function NoticeAlert({
>
<div className="flex">
<div className="flex-shrink-0">
<Info
className="h-5 w-5 text-status-blue "
aria-hidden="true"
/>
<Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-info-foreground">{title}</p>

4
src/frontend/src/components/ExtraSidebarComponent/index.tsx
View file

@ -71,9 +71,7 @@ export default function ExtraSidebar() {
<span className="flex-1">{item.name}</span>
<svg
className={classNames(
open
? "text-ring rotate-90"
: "text-ring",
open ? "text-ring rotate-90" : "text-ring",
"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-ring"
)}
viewBox="0 0 20 20"

4
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
View file

@ -170,12 +170,12 @@ export default function BuildTrigger({
{isBuilding && progress < 1 ? (
// Render your loading animation here when isBuilding is true
<RadialProgressComponent
// ! confirm below works
// ! confirm below works
color={"text-build-trigger"}
value={progress}
></RadialProgressComponent>
) : isBuilding ? (
<Loading strokeWidth={1.5} className="stroke-build-trigger"/>
<Loading strokeWidth={1.5} className="stroke-build-trigger" />
) : (
<Zap className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
)}

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

@ -36,11 +36,13 @@ export default function Dropdown({
editNode
? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1" +
INPUT_STYLE
: "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm bg-background" +
: "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm bg-background" +
INPUT_STYLE
}
>
<span className="block bg-background truncate w-full">{internalValue}</span>
<span className="block bg-background truncate w-full">
{internalValue}
</span>
<span
className={
"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
@ -72,9 +74,7 @@ export default function Dropdown({
key={id}
className={({ active }) =>
classNames(
active
? " bg-accent"
: "",
active ? " bg-accent" : "",
editNode
? "relative cursor-default select-none py-0.5 pl-3 pr-12"
: "relative cursor-default select-none py-2 pl-3 pr-9"

4
src/frontend/src/components/loadingComponent/index.tsx
View file

@ -22,7 +22,9 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
/>
</svg>
<br></br>
<span className="animate-pulse text-almost-medium-blue text-lg">Loading...</span>
<span className="animate-pulse text-almost-medium-blue text-lg">
Loading...
</span>
</div>
);
}

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

@ -73,9 +73,7 @@ export default function PromptAreaComponent({
);
}}
>
{!editNode && (
<ExternalLink className="w-6 h-6 hover:text-ring " />
)}
{!editNode && <ExternalLink className="w-6 h-6 hover:text-ring " />}
</button>
</div>
</div>

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

@ -76,9 +76,7 @@ export default function TextAreaComponent({
);
}}
>
{!editNode && (
<ExternalLink className="w-6 h-6 hover:text-ring " />
)}
{!editNode && <ExternalLink className="w-6 h-6 hover:text-ring " />}
</button>
</div>
</div>

4
src/frontend/src/components/toggleComponent/index.tsx
View file

@ -30,9 +30,7 @@ export default function ToggleComponent({
className={classNames(
enabled ? "translate-x-5" : "translate-x-0",
"pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out",
disabled
? "bg-input "
: "bg-background"
disabled ? "bg-input " : "bg-background"
)}
>
<span

2
src/frontend/src/components/ui/switch.tsx
View file

@ -25,4 +25,4 @@ const Switch = React.forwardRef<
));
Switch.displayName = SwitchPrimitives.Root.displayName;
export { Switch };
export { Switch };

7
src/frontend/src/constants.tsx
View file

@ -150,8 +150,6 @@ export const EXPORT_CODE_DIALOG =
export const INPUT_STYLE =
"focus:tw-ring-none focus-visible:outline-none focus:ring-ring bg-background focus:outline-none";
/**
* The base text for subtitle of code dialog
* @constant
@ -170,9 +168,8 @@ export const NAV_DISPLAY_STYLE =
* The base text for subtitle of code dialog
* @constant
*/
export const BUTTON_DIV_STYLE =
" flex gap-2 ";
" focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
export const BUTTON_DIV_STYLE = " flex gap-2 ";
(" focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ");
/**
* Default description for the flow

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

@ -192,26 +192,28 @@ export function TabsProvider({ children }: { children: ReactNode }) {
}
function processFlowEdges(flow) {
if(!flow.data || !flow.data.edges) return;
if (!flow.data || !flow.data.edges) return;
flow.data.edges.forEach((edge) => {
edge.className = "";
edge.style = { stroke: "#555555" };
});
}
function updateDisplay_name(node:NodeType,template:APIClassType) {
node.data.node.display_name = template["display_name"]?template["display_name"]:node.data.type;
function updateDisplay_name(node: NodeType, template: APIClassType) {
node.data.node.display_name = template["display_name"]
? template["display_name"]
: node.data.type;
}
function processFlowNodes(flow) {
if(!flow.data || !flow.data.nodes) return;
flow.data.nodes.forEach((node:NodeType) => {
if (!flow.data || !flow.data.nodes) return;
flow.data.nodes.forEach((node: NodeType) => {
const template = templates[node.data.type];
if (!template) {
setErrorData({ title: `Unknown node type: ${node.data.type}` });
return;
}
if (Object.keys(template["template"]).length > 0) {
updateDisplay_name(node,template);
updateDisplay_name(node, template);
updateNodeBaseClasses(node, template);
updateNodeEdges(flow, node, template);
updateNodeDescription(node, template);
@ -220,11 +222,15 @@ export function TabsProvider({ children }: { children: ReactNode }) {
});
}
function updateNodeBaseClasses(node:NodeType,template:APIClassType) {
function updateNodeBaseClasses(node: NodeType, template: APIClassType) {
node.data.node.base_classes = template["base_classes"];
}
function updateNodeEdges(flow:FlowType, node:NodeType,template:APIClassType) {
function updateNodeEdges(
flow: FlowType,
node: NodeType,
template: APIClassType
) {
flow.data.edges.forEach((edge) => {
if (edge.source === node.id) {
edge.sourceHandle = edge.sourceHandle
@ -236,11 +242,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
});
}
function updateNodeDescription(node:NodeType,template:APIClassType) {
function updateNodeDescription(node: NodeType, template: APIClassType) {
node.data.node.description = template["description"];
}
function updateNodeTemplate(node:NodeType,template:APIClassType) {
function updateNodeTemplate(node: NodeType, template: APIClassType) {
node.data.node.template = updateTemplate(
template["template"] as unknown as APITemplateType,
node.data.node.template as APITemplateType

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

@ -87,10 +87,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Code</span>
<Code2
className="h-6 w-6 text-primary pl-1 "
aria-hidden="true"
/>
<Code2 className="h-6 w-6 text-primary pl-1 " aria-hidden="true" />
</DialogTitle>
<DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
</DialogHeader>
@ -103,7 +100,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<div className="flex items-center justify-between px-2">
<TabsList>
{tabs.map((tab, index) => (
<TabsTrigger key={index} value={index.toString()}>{tab.name}</TabsTrigger>
<TabsTrigger key={index} value={index.toString()}>
{tab.name}
</TabsTrigger>
))}
</TabsList>
<div className="float-right">

2
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -79,7 +79,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
}
return (
<Dialog open={true} onOpenChange={setModalOpen} >
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger asChild></DialogTrigger>
<DialogContent className="lg:max-w-[700px] ">
<DialogHeader>

2
src/frontend/src/modals/NodeModal/index.tsx
View file

@ -76,7 +76,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
<div className="h-full w-full flex flex-col justify-center items-center">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
<Icon
strokeWidth={1.5}
strokeWidth={1.5}
className="w-10 mt-4 h-10 p-1 rounded"
style={{
color:

8
src/frontend/src/modals/chatModal/chatMessage/index.tsx
View file

@ -32,9 +32,7 @@ export default function ChatMessage({
<div
className={classNames(
"w-full py-2 pl-2 flex",
chat.isSend
? "bg-background "
: "bg-input"
chat.isSend ? "bg-background " : "bg-input"
)}
>
<div
@ -60,9 +58,7 @@ export default function ChatMessage({
/>
</div>
)}
{chat.isSend && (
<User2 className="w-6 h-6 -mb-1 text-primary " />
)}
{chat.isSend && <User2 className="w-6 h-6 -mb-1 text-primary " />}
</div>
{!chat.isSend ? (
<div className="w-full text-start flex items-center">

5
src/frontend/src/modals/chatModal/fileComponent/index.tsx
View file

@ -39,10 +39,7 @@ export default function FileCard({ fileName, content, fileType }) {
<div
className={`absolute top-0 right-0 bg-muted text-foreground rounded-bl-lg px-1 text-sm font-bold `}
>
<button
className="text-ring py-1 px-2 "
onClick={handleDownload}
>
<button className="text-ring py-1 px-2 " onClick={handleDownload}>
<DownloadCloud className="hover:scale-110 w-5 h-5 text-current" />
</button>
</div>

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

@ -402,8 +402,10 @@ export default function Page({ flow }: { flow: FlowType }) {
maxZoom={8}
>
<Background className="" />
<Controls className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border
fill-foreground bg-muted"></Controls>
<Controls
className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border
fill-foreground bg-muted"
></Controls>
</ReactFlow>
<Chat flow={flow} reactFlowInstance={reactFlowInstance} />
</div>

4
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -109,7 +109,7 @@ export default function ExtraSidebar() {
disabled={!isPending}
>
<Save
strokeWidth={1.5}
strokeWidth={1.5}
className={
"w-5 h-5" + (isPending ? " " : " text-muted-foreground")
}
@ -134,7 +134,7 @@ export default function ExtraSidebar() {
}}
/>
<div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
{/* ! replace hash color here */}
{/* ! replace hash color here */}
<Search size={20} strokeWidth={1.5} className="text-primary" />
</div>
</div>

1
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -83,7 +83,6 @@ const NodeToolbarComponent = (props) => {
</ShadTooltip>
)}
{/* <Menu as="div" className="relative inline-block text-left z-100">
<button className="text-gray-700 transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
<div>

10
src/frontend/src/pages/MainPage/index.tsx
View file

@ -9,10 +9,10 @@ import { BUTTON_DIV_STYLE } from "../../constants";
export default function HomePage() {
const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
useContext(TabsContext);
useEffect(() => {
setTabId("");
}, []);
const navigate = useNavigate();
useEffect(() => {
setTabId("");
}, []);
const navigate = useNavigate();
return (
<div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
<div className="w-full flex justify-between py-12 pb-2 px-6">
@ -20,7 +20,7 @@ export default function HomePage() {
<Home className="w-6" />
{USER_PROJECTS_HEADER}
</span>
<div className={`${ BUTTON_DIV_STYLE }`}>
<div className={`${BUTTON_DIV_STYLE}`}>
<Button
variant="primary"
onClick={() => {

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

@ -6,7 +6,12 @@ import plugin from "tailwindcss/plugin";
// ! Check if removing the other module.exports made sense
module.exports = {
darkMode: ["class"],
content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./index.html", "./src/**/*.{js,ts,tsx,jsx}"],
content: [
"app/**/*.{ts,tsx}",
"components/**/*.{ts,tsx}",
"./index.html",
"./src/**/*.{js,ts,tsx,jsx}",
],
important: true,
theme: {
container: {
@ -18,45 +23,44 @@ module.exports = {
},
extend: {
colors: {
'almost-dark-gray': "var(--almost-dark-gray)",
'almost-light-blue': "var(--almost-light-blue)",
'almost-medium-blue': "var(--almost-medium-blue)",
'almost-medium-gray': "var(--almost-medium-gray)",
'almost-medium-green': "var(--almost-medium-green)",
'almost-medium-red': "var(--almost-medium-red)",
'btn-shadow': "var(--round-btn-shadow)",
'build-trigger': "var(--build-trigger)",
'chat-trigger': "var(--chat-trigger)",
'blur-shared': "var(--blur-shared)",
'dark-blue': "var(--dark-blue)",
'dark-gray': "var(--dark-gray)",
'dark-red': "var(--dark-red)",
'error-background': "var(--error-background)",
'error-foreground': "var(--error-foreground)",
'high-dark-gray': "var(--high-dark-gray)",
'high-indigo': "var(--high-indigo)",
'high-light-gray': "var(--high-light-gray)",
'info-background': "var(--info-background)",
'info-foreground': "var(--info-foreground)",
'light-blue': "var(--light-blue)",
'light-gray': "var(--light-gray)",
'light-slate': "var(--light-slate)",
'medium-blue': "var(--medium-blue)",
'status-blue': "var(--status-blue)",
'medium-dark-gray': "var(--medium-dark-gray)",
'medium-dark-green': "var(--medium-dark-green)",
'medium-dark-red': "var(--medium-dark-red)",
'medium-emerald': "var(--medium-emerald)",
'medium-gray': "var(--medium-gray)",
'medium-high-indigo': "var(--medium-high-indigo)",
'medium-indigo': "var(--medium-indigo)",
'medium-low-gray': "var(--medium-low-gray)",
'status-green': "var(--status-green)",
'status-red': "var(--status-red)",
'status-yellow': "var(--status-yellow)",
'success-background': "var(--success-background)",
'success-foreground': "var(--success-foreground)",
"almost-dark-gray": "var(--almost-dark-gray)",
"almost-light-blue": "var(--almost-light-blue)",
"almost-medium-blue": "var(--almost-medium-blue)",
"almost-medium-gray": "var(--almost-medium-gray)",
"almost-medium-green": "var(--almost-medium-green)",
"almost-medium-red": "var(--almost-medium-red)",
"btn-shadow": "var(--round-btn-shadow)",
"build-trigger": "var(--build-trigger)",
"chat-trigger": "var(--chat-trigger)",
"blur-shared": "var(--blur-shared)",
"dark-blue": "var(--dark-blue)",
"dark-gray": "var(--dark-gray)",
"dark-red": "var(--dark-red)",
"error-background": "var(--error-background)",
"error-foreground": "var(--error-foreground)",
"high-dark-gray": "var(--high-dark-gray)",
"high-indigo": "var(--high-indigo)",
"high-light-gray": "var(--high-light-gray)",
"info-background": "var(--info-background)",
"info-foreground": "var(--info-foreground)",
"light-blue": "var(--light-blue)",
"light-gray": "var(--light-gray)",
"light-slate": "var(--light-slate)",
"medium-blue": "var(--medium-blue)",
"status-blue": "var(--status-blue)",
"medium-dark-gray": "var(--medium-dark-gray)",
"medium-dark-green": "var(--medium-dark-green)",
"medium-dark-red": "var(--medium-dark-red)",
"medium-emerald": "var(--medium-emerald)",
"medium-gray": "var(--medium-gray)",
"medium-high-indigo": "var(--medium-high-indigo)",
"medium-indigo": "var(--medium-indigo)",
"medium-low-gray": "var(--medium-low-gray)",
"status-green": "var(--status-green)",
"status-red": "var(--status-red)",
"status-yellow": "var(--status-yellow)",
"success-background": "var(--success-background)",
"success-foreground": "var(--success-foreground)",
white: "var(--white)",
border: "hsl(var(--border))",