From e2a066d7f26790a007b9acf74088b3e935504882 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 5 Jul 2023 16:30:46 -0300 Subject: [PATCH 01/39] Added checks to see if the chat can open --- .../chatComponent/chatTrigger/index.tsx | 51 ++++++++++++++----- .../src/components/chatComponent/index.tsx | 21 +++++++- src/frontend/src/constants.tsx | 14 ++++- 3 files changed, 68 insertions(+), 18 deletions(-) diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx index 116b03916..c46a720b2 100644 --- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx +++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx @@ -3,18 +3,30 @@ import { MessagesSquare } from "lucide-react"; import { alertContext } from "../../../contexts/alertContext"; import { useContext } from "react"; -import ShadTooltip from "../../ShadTooltipComponent"; +import { + CHAT_CANNOT_OPEN_DESCRIPTION, + CHAT_CANNOT_OPEN_TITLE, + FLOW_NOT_BUILT_DESCRIPTION, + FLOW_NOT_BUILT_TITLE, +} from "../../../constants"; -export default function ChatTrigger({ open, setOpen, isBuilt }) { +export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) { const { setErrorData } = useContext(alertContext); function handleClick() { if (isBuilt) { - setOpen(true); + if (canOpen) { + setOpen(true); + } else { + setErrorData({ + title: CHAT_CANNOT_OPEN_TITLE, + list: [CHAT_CANNOT_OPEN_DESCRIPTION], + }); + } } else { setErrorData({ - title: "Flow not built", - list: ["Please build the flow before chatting"], + title: FLOW_NOT_BUILT_TITLE, + list: [FLOW_NOT_BUILT_DESCRIPTION], }); } } @@ -30,15 +42,26 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) { leaveFrom="translate-y-0" leaveTo="translate-y-96" > - + ); } diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index 3c01e9c8b..9130be694 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/src/frontend/src/components/chatComponent/index.tsx @@ -13,6 +13,7 @@ import * as _ from "lodash"; export default function Chat({ flow }: ChatType) { const [open, setOpen] = useState(false); const [isBuilt, setIsBuilt] = useState(false); + const [canOpen, setCanOpen] = useState(false); const { tabsState } = useContext(TabsContext); useEffect(() => { @@ -58,6 +59,17 @@ export default function Chat({ flow }: ChatType) { ) { setIsBuilt(false); } + if ( + tabsState && + tabsState[flow.id] && + tabsState[flow.id].formKeysData && + tabsState[flow.id].formKeysData.input_keys && + Object.keys(tabsState[flow.id].formKeysData.input_keys).length > 0 + ) { + setCanOpen(true); + } else { + setCanOpen(false); + } prevNodesRef.current = currentNodes; }, [tabsState]); @@ -71,10 +83,15 @@ export default function Chat({ flow }: ChatType) { setIsBuilt={setIsBuilt} isBuilt={isBuilt} /> - {isBuilt && ( + {isBuilt && canOpen && ( )} - + ); diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx index b26789b06..d48bcdf2e 100644 --- a/src/frontend/src/constants.tsx +++ b/src/frontend/src/constants.tsx @@ -50,6 +50,15 @@ export const CODE_PROMPT_DIALOG_SUBTITLE = export const PROMPT_DIALOG_SUBTITLE = "Create your prompt. Prompts can help guide the behavior of a Language Model."; +export const CHAT_CANNOT_OPEN_TITLE = "Chat Cannot Open"; + +export const CHAT_CANNOT_OPEN_DESCRIPTION = "This is not a chat flow."; + +export const FLOW_NOT_BUILT_TITLE = "Flow not built"; + +export const FLOW_NOT_BUILT_DESCRIPTION = + "Please build the flow before chatting."; + /** * The base text for subtitle of Text Dialog * @constant @@ -180,7 +189,7 @@ export const EXPORT_CODE_DIALOG = export const COLUMN_DIV_STYLE = " w-full h-full flex overflow-auto flex-col bg-muted px-16 "; - export const NAV_DISPLAY_STYLE = +export const NAV_DISPLAY_STYLE = " w-full flex justify-between py-12 pb-2 px-6 "; /** @@ -210,7 +219,8 @@ export const DESCRIPTIONS: string[] = [ "Conversational Cartography Unlocked.", "Design, Develop, Dialogize.", ]; -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 "; /** * The base text for subtitle of code dialog From 87061316b31a6544b5335f17425d2b3df67a4c08 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 5 Jul 2023 16:36:28 -0300 Subject: [PATCH 02/39] formatted code --- .../components/parameterComponent/index.tsx | 7 +- .../ExtraSidebarComponent/index.tsx | 6 +- .../components/ShadTooltipComponent/index.tsx | 11 +- .../src/components/cardComponent/index.tsx | 46 ++-- .../chatComponent/buildTrigger/index.tsx | 13 +- .../components/codeAreaComponent/index.tsx | 10 +- .../components/dropdownComponent/index.tsx | 4 +- .../src/components/headerComponent/index.tsx | 4 +- .../components/inputFileComponent/index.tsx | 5 +- .../components/textAreaComponent/index.tsx | 16 +- src/frontend/src/components/ui/badge.tsx | 10 +- src/frontend/src/components/ui/dialog.tsx | 2 +- src/frontend/src/components/ui/switch.tsx | 2 +- src/frontend/src/contexts/tabsContext.tsx | 6 +- src/frontend/src/modals/ApiModal/index.tsx | 47 ++-- .../src/modals/codeAreaModal/index.tsx | 4 +- src/frontend/src/modals/exportModal/index.tsx | 4 +- .../src/modals/formModal/chatInput/index.tsx | 15 +- .../modals/formModal/chatMessage/index.tsx | 236 +++++++++--------- src/frontend/src/modals/importModal/index.tsx | 5 +- .../src/modals/textAreaModal/index.tsx | 2 +- .../extraSidebarComponent/index.tsx | 2 +- src/frontend/src/types/tabs/index.ts | 6 +- src/frontend/src/utils.ts | 117 ++++----- 24 files changed, 313 insertions(+), 267 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 7adfeb2d1..56c65354d 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -101,7 +101,7 @@ export default function ParameterComponent({ refHtml.current = groupedObj.map((item, i) => { const Icon: any = nodeIconsLucide[item.family]; - + return ( {" "} - {item.type == "" ? '' : ' - '} + {item.type == "" ? "" : " - "} {item.type.split(", ").length > 2 ? item.type.split(", ").map((el, i) => ( diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx index 7efef4ec0..5273b7147 100644 --- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx +++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx @@ -42,7 +42,7 @@ export default function ExtraSidebar() { item.href.split("/")[2] === current[4] ? "text-ring" : "text-ring group-hover:text-accent-foreground", - "mr-3 flex-shrink-0 h-6 w-6" + "mr-3 h-6 w-6 flex-shrink-0" )} /> {item.name} @@ -71,8 +71,8 @@ export default function ExtraSidebar() { {item.name} {onDelete && ( - + - - - - Are you sure absolutely sure? - - This action cannot be undone. Are you sure you want to permanently - delete this file from our servers? - - - - - - - + + + + + + Are you sure absolutely sure? + + This action cannot be undone. Are you sure you want to + permanently delete this file from our servers? + + + + + + + )} diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx index 0482262eb..7abb29224 100644 --- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx +++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx @@ -76,6 +76,7 @@ export default function BuildTrigger({ const eventSource = new EventSource(apiUrl); eventSource.onmessage = (event) => { + console.log(event); // If the event is parseable, return if (!event.data) { return; @@ -96,10 +97,9 @@ export default function BuildTrigger({ [flowId]: { ...old[flowId], formKeysData: parsedData, - - } + }, }; - }) + }); } else { // Otherwise, process the data const isValid = processStreamResult(parsedData); @@ -168,7 +168,7 @@ export default function BuildTrigger({ leaveFrom="translate-y-0" leaveTo="translate-y-96" > -
+
{ @@ -189,7 +189,10 @@ export default function BuildTrigger({ ) : isBuilding ? ( ) : ( - + )}
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index 75f5497a2..00578a25a 100644 --- a/src/frontend/src/components/codeAreaComponent/index.tsx +++ b/src/frontend/src/components/codeAreaComponent/index.tsx @@ -53,7 +53,8 @@ export default function CodeAreaComponent({ className={ editNode ? "input-edit-node input-dialog " - : "input-primary input-dialog " + (disabled ? "input-disable" : "") + : "input-dialog input-primary " + + (disabled ? "input-disable" : "") } > {myValue !== "" ? myValue : "Type something..."} @@ -62,7 +63,7 @@ export default function CodeAreaComponent({ onClick={() => { openPopUp( { @@ -74,7 +75,10 @@ export default function CodeAreaComponent({ }} > {!editNode && ( - + )}
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx index 67447a21f..b275f83f7 100644 --- a/src/frontend/src/components/dropdownComponent/index.tsx +++ b/src/frontend/src/components/dropdownComponent/index.tsx @@ -39,8 +39,8 @@ export default function Dropdown({ diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index 342054b10..f60f65f61 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -75,7 +75,7 @@ export default function Header() { href="https://github.com/logspace-ai/langflow" target="_blank" rel="noreferrer" - className="inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md" + className="inline-flex h-9 items-center justify-center rounded-md border border-input px-3 pr-0 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" > Star @@ -114,7 +114,7 @@ export default function Header() { )}
diff --git a/src/frontend/src/components/ui/badge.tsx b/src/frontend/src/components/ui/badge.tsx index 1516bf273..36c44ac4d 100644 --- a/src/frontend/src/components/ui/badge.tsx +++ b/src/frontend/src/components/ui/badge.tsx @@ -9,8 +9,7 @@ const badgeVariants = cva( variant: { default: "bg-primary hover:bg-primary/80 border-transparent text-primary-foreground", - gray: - "bg-border hover:bg-border/80 text-secondary-foreground", + gray: "bg-border hover:bg-border/80 text-secondary-foreground", secondary: "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground", destructive: @@ -21,7 +20,7 @@ const badgeVariants = cva( sm: "h-4 text-xs", md: "h-5 text-sm", lg: "h-6 text-base", - } + }, }, defaultVariants: { variant: "default", @@ -35,7 +34,10 @@ export interface BadgeProps function Badge({ className, variant, size, ...props }: BadgeProps) { return ( -
+
); } diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx index f17576064..a02379087 100644 --- a/src/frontend/src/components/ui/dialog.tsx +++ b/src/frontend/src/components/ui/dialog.tsx @@ -44,7 +44,7 @@ const DialogContent = React.forwardRef< diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index bd1269a9f..2de15ca68 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -285,7 +285,11 @@ export function TabsProvider({ children }: { children: ReactNode }) { // create a link element and set its properties const link = document.createElement("a"); link.href = jsonString; - link.download = `${flowName && flowName != "" ? flowName : flows.find((f) => f.id === tabId).name}.json`; + link.download = `${ + flowName && flowName != "" + ? flowName + : flows.find((f) => f.id === tabId).name + }.json`; // simulate a click on the link element to trigger the download link.click(); diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index d069763ff..b37f6fe40 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -104,11 +104,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) { useEffect(() => { if (closeEdit !== "") { tweak.current = getTweak; - if(tweak.current.length > 0){ + if (tweak.current.length > 0) { setActiveTab("3"); openAccordions(); - } - else{ + } else { startTweaks(); } } else { @@ -250,25 +249,25 @@ export default function ApiModal({ flow }: { flow: FlowType }) { function openAccordions() { let accordionsToOpen = []; - tweak.current.forEach((el) => { - Object.keys(el).forEach((key) => { - if (Object.keys(el[key]).length > 0) { - accordionsToOpen.push(key); - setOpenAccordion(accordionsToOpen); - } - }); + tweak.current.forEach((el) => { + Object.keys(el).forEach((key) => { + if (Object.keys(el[key]).length > 0) { + accordionsToOpen.push(key); + setOpenAccordion(accordionsToOpen); + } }); + }); } return ( - + Code @@ -277,7 +276,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { { setActiveTab(value); if (value === "3") { @@ -296,7 +295,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { {Number(activeTab) < 3 && (