From dbe3e156d7cae963e188820d5ce617987149138f Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 17 Apr 2023 22:24:28 -0300 Subject: [PATCH 01/12] showing examples name --- .../src/components/loadingComponent/index.tsx | 1 + src/frontend/src/controllers/API/index.ts | 21 +++- src/frontend/src/modals/importModal/index.tsx | 95 ++++++++++++++----- 3 files changed, 90 insertions(+), 27 deletions(-) diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx index 668c1c5a8..6181fd7cc 100644 --- a/src/frontend/src/components/loadingComponent/index.tsx +++ b/src/frontend/src/components/loadingComponent/index.tsx @@ -10,6 +10,7 @@ export default function LoadingComponent({remSize}:LoadingComponentProps){ +

Loading... ) diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 8fa7ff527..490ec2837 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -1,6 +1,7 @@ import { PromptTypeAPI, errorsTypeAPI } from './../../types/api/index'; import { APIObjectType, sendAllProps } from '../../types/api/index'; import axios, { AxiosResponse } from "axios"; +import { FlowType } from '../../types/flow'; export async function getAll():Promise> { return await axios.get(`/all`); @@ -18,4 +19,22 @@ export async function checkCode(code:string):Promise>{ return await axios.post('/validate/prompt',{template}) -} \ No newline at end of file +} + +export async function getExamples(): Promise { + const url = 'https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples'; + const response = await axios.get(url); + + const jsonFiles = response.data.filter((file: any) => { + return file.name.endsWith('.json'); + }); + + const contentsPromises = jsonFiles.map(async (file: any) => { + const contentResponse = await axios.get(file.download_url); + return contentResponse.data; + }); + + const contents = await Promise.all(contentsPromises); + + return contents; + } \ No newline at end of file diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx index c471f3955..5ca65a030 100644 --- a/src/frontend/src/modals/importModal/index.tsx +++ b/src/frontend/src/modals/importModal/index.tsx @@ -3,19 +3,28 @@ import { XMarkIcon, ArrowDownTrayIcon, DocumentDuplicateIcon, - ComputerDesktopIcon, + ComputerDesktopIcon, ArrowUpTrayIcon, } from "@heroicons/react/24/outline"; import { Fragment, useContext, useRef, useState } from "react"; import { PopUpContext } from "../../contexts/popUpContext"; import { TabsContext } from "../../contexts/tabsContext"; import ButtonBox from "./buttonBox"; +import { getExamples } from "../../controllers/API"; +import { error } from "console"; +import { alertContext } from "../../contexts/alertContext"; +import LoadingComponent from "../../components/loadingComponent"; +import { FlowType } from "../../types/flow"; export default function ImportModal() { const [open, setOpen] = useState(true); + const { setErrorData } = useContext(alertContext); const { closePopUp } = useContext(PopUpContext); const ref = useRef(); - const {uploadFlow} = useContext(TabsContext) + const [showExamples, setShowExamples] = useState(false); + const [loadingExamples, setLoadingExamples] = useState(false); + const [examples, setExamples] = useState([]); + const { uploadFlow } = useContext(TabsContext); function setModalOpen(x: boolean) { setOpen(x); if (x === false) { @@ -24,6 +33,22 @@ export default function ImportModal() { }, 300); } } + + function handleExamples() { + setLoadingExamples(true); + getExamples() + .then((result) => { + setLoadingExamples(false); + setExamples(result); + }) + .catch((error) => + setErrorData({ + title: "there was an error loading examples, please try again", + list: [error.message], + }) + ); + } + return (
-
- - } - onClick={() => console.log("sdsds")} - textColor="text-slate-400" - title="Examples" - > - - } - onClick={() => {uploadFlow();setModalOpen(false)}} - textColor="text-blue-500" - title="Local file" - > -
+ {!showExamples && ( +
+ + } + onClick={() =>{ + setShowExamples(true); + handleExamples(); + }} + textColor="text-emerald-400" + title="Examples" + > + + } + onClick={() => { + uploadFlow(); + setModalOpen(false); + }} + textColor="text-blue-500" + title="Local file" + > +
+ )} + {showExamples && loadingExamples && ( +
+ +
+ )} + {showExamples && !loadingExamples && ( +
+ {examples.map((example, index) => { + return
{example.name}
; + })} +
+ )}
- From 1049275715ea21b1dce34990dd6ab60a92ec72e0 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 17 Apr 2023 23:18:45 -0300 Subject: [PATCH 02/12] set back button and high of the example element --- .../modals/importModal/buttonBox/index.tsx | 68 +++++++++++++++++-- src/frontend/src/modals/importModal/index.tsx | 59 +++++++++++++--- 2 files changed, 111 insertions(+), 16 deletions(-) diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx index 3645a31b9..2bd124bd7 100644 --- a/src/frontend/src/modals/importModal/buttonBox/index.tsx +++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx @@ -9,7 +9,8 @@ export default function ButtonBox({ icon, bgColor, textColor, - deactivate + deactivate, + size }: { onClick: () => void; title: string; @@ -18,27 +19,80 @@ export default function ButtonBox({ bgColor: string; textColor: string; deactivate?:boolean; + size:"small"|"medium"|"big"; }) { + let bigCircle:string; + let smallCircle:string; + let titleFontSize:string; + let descriptionFontSize:string; + let padding:string; + let marginTop:string; + let height:string; + let widht:string; + switch(size){ + case "small": + bigCircle="h-12 w-12"; + smallCircle ="h-8 w-8"; + titleFontSize="text-sm"; + descriptionFontSize="text-xs"; + padding="p-2"; + marginTop="mt-2"; + height="h-36"; + widht="w-28"; + break; + case "medium": + bigCircle="h-16 w-16"; + smallCircle ="h-12 w-12"; + titleFontSize="text-base"; + descriptionFontSize="text-sm"; + padding="p-4"; + marginTop="mt-3"; + height="h-44"; + widht="w-36"; + break; + case "big": + bigCircle="h-20 w-20"; + smallCircle ="h-16 w-16"; + titleFontSize="text-lg"; + descriptionFontSize="text-sm"; + padding="p-8"; + marginTop="mt-6"; + height="h-56"; + widht="w-44"; + break; + default: + bigCircle="h-20 w-20"; + smallCircle ="h-16 w-16"; + titleFontSize="text-lg"; + descriptionFontSize="text-sm"; + padding="p-8"; + marginTop="mt-6"; + height="h-56"; + widht="w-44"; + break; + } return ( + {showExamples && ( +
+ +
+ )}
@@ -110,16 +127,24 @@ export default function ImportModal() {
-
+
{!showExamples && (
} - onClick={() =>{ + onClick={() => { setShowExamples(true); handleExamples(); }} @@ -127,6 +152,7 @@ export default function ImportModal() { title="Examples" >
)} - {showExamples && !loadingExamples && ( -
- {examples.map((example, index) => { - return
{example.name}
; - })} -
- )} + {showExamples && + !loadingExamples && + examples.map((example, index) => { + return ( +
+ {" "} + + } + onClick={() => { + console.log("click"); + }} + textColor="text-slate-400" + title={example.name} + > +
+ ); + })}
From b3d5221ac202bdb59388cdbaaf9a28459ab018dc Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 18 Apr 2023 15:10:58 -0300 Subject: [PATCH 03/12] added new tailwind dependencies --- src/frontend/package-lock.json | 9 +++++++++ src/frontend/package.json | 3 ++- src/frontend/tailwind.config.js | 2 +- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index df61239c5..35d27c5f4 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -14,6 +14,7 @@ "@heroicons/react": "^2.0.15", "@mui/material": "^5.11.9", "@tailwindcss/forms": "^0.5.3", + "@tailwindcss/line-clamp": "^0.4.4", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -3930,6 +3931,14 @@ "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1" } }, + "node_modules/@tailwindcss/line-clamp": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz", + "integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==", + "peerDependencies": { + "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1" + } + }, "node_modules/@testing-library/dom": { "version": "8.20.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz", diff --git a/src/frontend/package.json b/src/frontend/package.json index b669569e3..6eba117fc 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -9,6 +9,7 @@ "@heroicons/react": "^2.0.15", "@mui/material": "^5.11.9", "@tailwindcss/forms": "^0.5.3", + "@tailwindcss/line-clamp": "^0.4.4", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -60,4 +61,4 @@ ] }, "proxy": "http://backend:7860" -} \ No newline at end of file +} diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js index 045f9992b..29ede0d1d 100644 --- a/src/frontend/tailwind.config.js +++ b/src/frontend/tailwind.config.js @@ -40,6 +40,6 @@ module.exports = { } } ) - }) + }),require('@tailwindcss/line-clamp') ], } From 4f72d54cb16dcfdc577d83b4173fc37051ebaa0f Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 18 Apr 2023 15:11:35 -0300 Subject: [PATCH 04/12] update types and improve tooltip component --- .../src/components/TooltipComponent/index.tsx | 5 +++-- src/frontend/src/types/components/index.ts | 14 ++++++++++++++ src/frontend/src/types/tabs/index.ts | 2 +- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/components/TooltipComponent/index.tsx b/src/frontend/src/components/TooltipComponent/index.tsx index a111d047b..65c8d0e5f 100644 --- a/src/frontend/src/components/TooltipComponent/index.tsx +++ b/src/frontend/src/components/TooltipComponent/index.tsx @@ -1,6 +1,7 @@ import { ReactElement } from "react"; import { LightTooltip } from "../LightTooltipComponent"; +import { TooltipComponentType } from "../../types/components"; -export default function Tooltip({ children, title }:{children:ReactElement,title:string}) { - return {children}; +export default function Tooltip({ children, title,placement }:TooltipComponentType) { + return {children}; } diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 9ba96d8c0..d7448083e 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -65,3 +65,17 @@ export type FloatComponentType = { disabled?: boolean; onChange: (value: string) => void; }; + +export type TooltipComponentType={children:ReactElement,title:string,placement?: + | 'bottom-end' + | 'bottom-start' + | 'bottom' + | 'left-end' + | 'left-start' + | 'left' + | 'right-end' + | 'right-start' + | 'right' + | 'top-end' + | 'top-start' + | 'top';} \ No newline at end of file diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts index 625073fb3..6bb452b31 100644 --- a/src/frontend/src/types/tabs/index.ts +++ b/src/frontend/src/types/tabs/index.ts @@ -6,7 +6,7 @@ export type TabsContextType = { setTabIndex: (index: number) => void; flows: Array; removeFlow: (id: string) => void; - addFlow: (flowData?: any) => void; + addFlow: (flowData?: FlowType) => void; updateFlow: (newFlow: FlowType) => void; incrementNodeId: () => number; downloadFlow: (flow:FlowType) => void; From a923cdeccb71f23481819d490f2b82d83838a465 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 18 Apr 2023 15:12:10 -0300 Subject: [PATCH 05/12] improve example ui --- .../modals/importModal/buttonBox/index.tsx | 122 ++++++++++-------- src/frontend/src/modals/importModal/index.tsx | 7 +- 2 files changed, 75 insertions(+), 54 deletions(-) diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx index 2bd124bd7..e9d59b751 100644 --- a/src/frontend/src/modals/importModal/buttonBox/index.tsx +++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx @@ -1,6 +1,7 @@ import React, { ReactNode } from "react"; import { DocumentDuplicateIcon } from "@heroicons/react/solid"; import { classNames } from "../../../utils"; +import Tooltip from "../../../components/TooltipComponent"; export default function ButtonBox({ onClick, @@ -10,7 +11,7 @@ export default function ButtonBox({ bgColor, textColor, deactivate, - size + size, }: { onClick: () => void; title: string; @@ -18,57 +19,57 @@ export default function ButtonBox({ icon: ReactNode; bgColor: string; textColor: string; - deactivate?:boolean; - size:"small"|"medium"|"big"; + deactivate?: boolean; + size: "small" | "medium" | "big"; }) { - let bigCircle:string; - let smallCircle:string; - let titleFontSize:string; - let descriptionFontSize:string; - let padding:string; - let marginTop:string; - let height:string; - let widht:string; - switch(size){ + let bigCircle: string; + let smallCircle: string; + let titleFontSize: string; + let descriptionFontSize: string; + let padding: string; + let marginTop: string; + let height: string; + let widht: string; + switch (size) { case "small": - bigCircle="h-12 w-12"; - smallCircle ="h-8 w-8"; - titleFontSize="text-sm"; - descriptionFontSize="text-xs"; - padding="p-2"; - marginTop="mt-2"; - height="h-36"; - widht="w-28"; + bigCircle = "h-12 w-12"; + smallCircle = "h-8 w-8"; + titleFontSize = "text-sm"; + descriptionFontSize = "text-xs"; + padding = "p-2"; + marginTop = "mt-2"; + height = "h-36"; + widht = "w-28"; break; case "medium": - bigCircle="h-16 w-16"; - smallCircle ="h-12 w-12"; - titleFontSize="text-base"; - descriptionFontSize="text-sm"; - padding="p-4"; - marginTop="mt-3"; - height="h-44"; - widht="w-36"; + bigCircle = "h-16 w-16"; + smallCircle = "h-12 w-12"; + titleFontSize = "text-base"; + descriptionFontSize = "text-sm"; + padding = "p-4"; + marginTop = "mt-3"; + height = "h-44"; + widht = "w-36"; break; case "big": - bigCircle="h-20 w-20"; - smallCircle ="h-16 w-16"; - titleFontSize="text-lg"; - descriptionFontSize="text-sm"; - padding="p-8"; - marginTop="mt-6"; - height="h-56"; - widht="w-44"; + bigCircle = "h-20 w-20"; + smallCircle = "h-16 w-16"; + titleFontSize = "text-lg"; + descriptionFontSize = "text-sm"; + padding = "p-8"; + marginTop = "mt-6"; + height = "h-56"; + widht = "w-44"; break; default: - bigCircle="h-20 w-20"; - smallCircle ="h-16 w-16"; - titleFontSize="text-lg"; - descriptionFontSize="text-sm"; - padding="p-8"; - marginTop="mt-6"; - height="h-56"; - widht="w-44"; + bigCircle = "h-20 w-20"; + smallCircle = "h-16 w-16"; + titleFontSize = "text-lg"; + descriptionFontSize = "text-sm"; + padding = "p-8"; + marginTop = "mt-6"; + height = "h-56"; + widht = "w-44"; break; } return ( @@ -82,17 +83,36 @@ export default function ButtonBox({ )} >
-
-
-
- {icon} -
+
+
+
{icon}
-

{title}

+

+ {title} +

{title}
-
{deactivate? "Coming soon":description}
+ +
+ {deactivate ? "Coming soon" : description} +
+
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx index df39875c8..eec06add1 100644 --- a/src/frontend/src/modals/importModal/index.tsx +++ b/src/frontend/src/modals/importModal/index.tsx @@ -26,7 +26,7 @@ export default function ImportModal() { const [showExamples, setShowExamples] = useState(false); const [loadingExamples, setLoadingExamples] = useState(false); const [examples, setExamples] = useState([]); - const { uploadFlow } = useContext(TabsContext); + const { uploadFlow, addFlow } = useContext(TabsContext); function setModalOpen(x: boolean) { setOpen(x); if (x === false) { @@ -181,12 +181,13 @@ export default function ImportModal() { } onClick={() => { - console.log("click"); + addFlow(example) + setModalOpen(false) }} textColor="text-slate-400" title={example.name} From d28d73a37ee04448d6e9eb809068e6124f3931e4 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 18 Apr 2023 15:14:08 -0300 Subject: [PATCH 06/12] update add flow function to show import flow name --- src/frontend/src/contexts/tabsContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index a11f0339d..97e62e5e2 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -144,7 +144,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { // Create a new flow with a default name if no flow is provided. let newFlow: FlowType = { description, - name: "New Flow", + name: flow?.name??"New Flow", id: id.toString(), data, chat: flow ? flow.chat : [], From a583a1187624192c7b30f14efe3e61a8bed23e2f Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 18 Apr 2023 15:19:35 -0300 Subject: [PATCH 07/12] improve tabs behavior --- .../src/pages/FlowPage/components/tabComponent/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx index ca21a0a43..a8d098c32 100644 --- a/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx @@ -18,7 +18,8 @@ export default function TabComponent({ selected, flow, onClick }:{flow:FlowType, className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-gray-600 -ml-px" onClick={onClick} > - {flow.name} + {flow.name} +
From 26db1f4e1bffcd91708e4f624b24fb2819150e5f Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 19 Apr 2023 22:11:18 -0300 Subject: [PATCH 10/12] added github logo with link to repo --- src/frontend/src/modals/importModal/index.tsx | 54 +++++++++++++------ 1 file changed, 38 insertions(+), 16 deletions(-) diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx index f185fb775..b2a65052c 100644 --- a/src/frontend/src/modals/importModal/index.tsx +++ b/src/frontend/src/modals/importModal/index.tsx @@ -51,7 +51,6 @@ export default function ImportModal() { ); } - return (
{showExamples && ( -
- -
+ <> +
+ +
+ + )}
@@ -181,13 +201,15 @@ export default function ImportModal() { } onClick={() => { - addFlow(example) - setModalOpen(false) + addFlow(example); + setModalOpen(false); }} textColor="text-emerald-400" title={example.name} From 53b8f48f969b1b88262c0a36cd2d7b9ef13c021d Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 19 Apr 2023 22:13:31 -0300 Subject: [PATCH 11/12] change text on examples page --- src/frontend/src/modals/importModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx index b2a65052c..3d22b0ee7 100644 --- a/src/frontend/src/modals/importModal/index.tsx +++ b/src/frontend/src/modals/importModal/index.tsx @@ -143,7 +143,7 @@ export default function ImportModal() { as="h3" className="text-lg font-medium dark:text-white leading-10 text-gray-900" > - Import from + {showExamples ?"Select an example":"Import from"}
From a15d605cc82f56e27e876f426210f873c84b892c Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 24 Apr 2023 19:03:20 -0300 Subject: [PATCH 12/12] update styles --- .../modals/importModal/buttonBox/index.tsx | 64 +++++++++---------- .../components/tabsManagerComponent/index.tsx | 8 +-- 2 files changed, 36 insertions(+), 36 deletions(-) diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx index e9d59b751..b0757cdae 100644 --- a/src/frontend/src/modals/importModal/buttonBox/index.tsx +++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx @@ -39,7 +39,7 @@ export default function ButtonBox({ padding = "p-2"; marginTop = "mt-2"; height = "h-36"; - widht = "w-28"; + widht = "w-32"; break; case "medium": bigCircle = "h-16 w-16"; @@ -74,48 +74,48 @@ export default function ButtonBox({ } return ( ); } diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx index 71c964cbe..6d7a4d844 100644 --- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx @@ -60,18 +60,18 @@ export default function TabsManagerComponent() { /> ) } - className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-400 hover:text-gray-500" + className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500" > Import