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

style: apply tailwind formatting

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-07-02 10:29:24 -03:00
commit ff254029bf
59 changed files with 371 additions and 339 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/frontend/src/App.tsx
View file

@ -51,7 +51,11 @@ export default function App() {
useEffect(() => { useEffect(() => {
// If there is an error alert open with data, add it to the alertsList // If there is an error alert open with data, add it to the alertsList
if (errorOpen && errorData) { if (errorOpen && errorData) {
if(alertsList.length > 0 && JSON.stringify(alertsList[alertsList.length - 1].data)===JSON.stringify(errorData)){ if (
alertsList.length > 0 &&
JSON.stringify(alertsList[alertsList.length - 1].data) ===
JSON.stringify(errorData)
) {
return; return;
} }
setErrorOpen(false); setErrorOpen(false);
@ -65,7 +69,11 @@ export default function App() {
} }
// If there is a notice alert open with data, add it to the alertsList // If there is a notice alert open with data, add it to the alertsList
else if (noticeOpen && noticeData) { else if (noticeOpen && noticeData) {
if(alertsList.length > 0 && JSON.stringify(alertsList[alertsList.length - 1].data)===JSON.stringify(noticeData)){ if (
alertsList.length > 0 &&
JSON.stringify(alertsList[alertsList.length - 1].data) ===
JSON.stringify(noticeData)
) {
return; return;
} }
setNoticeOpen(false); setNoticeOpen(false);
@ -79,7 +87,11 @@ export default function App() {
} }
// If there is a success alert open with data, add it to the alertsList // If there is a success alert open with data, add it to the alertsList
else if (successOpen && successData) { else if (successOpen && successData) {
if(alertsList.length > 0 && JSON.stringify(alertsList[alertsList.length - 1].data)===JSON.stringify(successData)){ if (
alertsList.length > 0 &&
JSON.stringify(alertsList[alertsList.length - 1].data) ===
JSON.stringify(successData)
) {
return; return;
} }
setSuccessOpen(false); setSuccessOpen(false);
@ -112,7 +124,7 @@ export default function App() {
return ( return (
//need parent component with width and height //need parent component with width and height
<div className="h-full flex flex-col"> <div className="flex h-full flex-col">
<ErrorBoundary <ErrorBoundary
onReset={() => { onReset={() => {
window.localStorage.removeItem("tabsData"); window.localStorage.removeItem("tabsData");
@ -127,7 +139,7 @@ export default function App() {
</ErrorBoundary> </ErrorBoundary>
<div></div> <div></div>
<div <div
className="flex flex-col-reverse fixed bottom-5 left-5" className="fixed bottom-5 left-5 flex flex-col-reverse"
style={{ zIndex: 999 }} style={{ zIndex: 999 }}
> >
{alertsList.map((alert) => ( {alertsList.map((alert) => (

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

@ -101,7 +101,7 @@ export default function ParameterComponent({
<span <span
key={getRandomKeyByssmm()} key={getRandomKeyByssmm()}
className={classNames( className={classNames(
i > 0 ? "items-center flex mt-3" : "items-center flex" i > 0 ? "mt-3 flex items-center" : "flex items-center"
)} )}
> >
<div <div
@ -138,12 +138,12 @@ export default function ParameterComponent({
return ( return (
<div <div
ref={ref} ref={ref}
className="w-full flex flex-wrap justify-between items-center bg-muted mt-1 px-5 py-2" className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
> >
<> <>
<div <div
className={ className={
"text-sm truncate w-full" + "w-full truncate text-sm" +
(left ? "" : " text-end") + (left ? "" : " text-end") +
(info !== "" ? " flex items-center" : "") (info !== "" ? " flex items-center" : "")
} }
@ -153,7 +153,7 @@ export default function ParameterComponent({
<div className=""> <div className="">
{info !== "" && ( {info !== "" && (
<ShadTooltip content={infoHtml.current}> <ShadTooltip content={infoHtml.current}>
<Info className="ml-2 relative bottom-0.5 w-3 h-3" /> <Info className="relative bottom-0.5 ml-2 h-3 w-3" />
</ShadTooltip> </ShadTooltip>
)} )}
</div> </div>
@ -182,7 +182,7 @@ export default function ParameterComponent({
} }
className={classNames( className={classNames(
left ? "-ml-0.5 " : "-mr-0.5 ", left ? "-ml-0.5 " : "-mr-0.5 ",
"w-3 h-3 rounded-full border-2 bg-background" "h-3 w-3 rounded-full border-2 bg-background"
)} )}
style={{ style={{
borderColor: color, borderColor: color,
@ -247,7 +247,7 @@ export default function ParameterComponent({
) : left === true && ) : left === true &&
type === "str" && type === "str" &&
data.node.template[name].options ? ( data.node.template[name].options ? (
<div className="w-full mt-2"> <div className="mt-2 w-full">
<Dropdown <Dropdown
options={data.node.template[name].options} options={data.node.template[name].options}
onSelect={handleOnNewValue} onSelect={handleOnNewValue}

20
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -130,29 +130,29 @@ export default function GenericNode({
) )
} }
> >
<div className="w-5 h-5 relative top-[3px]"> <div className="relative top-[3px] h-5 w-5">
<div <div
className={classNames( className={classNames(
validationStatus && validationStatus.valid validationStatus && validationStatus.valid
? "w-4 h-4 rounded-full bg-status-green opacity-100" ? "h-4 w-4 rounded-full bg-status-green opacity-100"
: "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin", : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
"absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200" "hover: absolute w-4 transition-all duration-200 ease-in-out hover:text-ring"
)} )}
></div> ></div>
<div <div
className={classNames( className={classNames(
validationStatus && !validationStatus.valid validationStatus && !validationStatus.valid
? "w-4 h-4 rounded-full bg-status-red opacity-100" ? "h-4 w-4 rounded-full bg-status-red opacity-100"
: "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin", : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
"absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200" "hover: absolute w-4 transition-all duration-200 ease-in-out hover:text-ring"
)} )}
></div> ></div>
<div <div
className={classNames( className={classNames(
!validationStatus || isBuilding !validationStatus || isBuilding
? "w-4 h-4 rounded-full bg-status-yellow opacity-100" ? "h-4 w-4 rounded-full bg-status-yellow opacity-100"
: "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin", : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
"absolute w-4 hover:text-ring transition-all ease-in-out duration-200" "absolute w-4 transition-all duration-200 ease-in-out hover:text-ring"
)} )}
></div> ></div>
</div> </div>

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

@ -25,14 +25,14 @@ export default function SingleAlert({
> >
{type === "error" ? ( {type === "error" ? (
<div <div
className="flex bg-error-background rounded-md p-3 mb-2 mx-2" className="mx-2 mb-2 flex rounded-md bg-error-background p-3"
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <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>
<div className="ml-3"> <div className="ml-3">
<h3 className="text-sm break-words font-medium text-error-foreground"> <h3 className="break-words text-sm font-medium text-error-foreground">
{dropItem.title} {dropItem.title}
</h3> </h3>
{dropItem.list ? ( {dropItem.list ? (
@ -72,17 +72,17 @@ export default function SingleAlert({
</div> </div>
) : type === "notice" ? ( ) : type === "notice" ? (
<div <div
className="flex rounded-md bg-info-background p-3 mb-2 mx-2" className="mx-2 mb-2 flex rounded-md bg-info-background p-3"
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <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>
<div className="ml-3 flex-1 md:flex md:justify-between"> <div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-info-foreground font-medium"> <p className="text-sm font-medium text-info-foreground">
{dropItem.title} {dropItem.title}
</p> </p>
<p className="mt-3 text-sm md:mt-0 md:ml-6"> <p className="mt-3 text-sm md:ml-6 md:mt-0">
{dropItem.link ? ( {dropItem.link ? (
<Link <Link
to={dropItem.link} to={dropItem.link}
@ -118,7 +118,7 @@ export default function SingleAlert({
</div> </div>
) : ( ) : (
<div <div
className="flex bg-success-background p-3 mb-2 mx-2 rounded-md" className="mx-2 mb-2 flex rounded-md bg-success-background p-3"
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">

10
src/frontend/src/alerts/alertDropDown/index.tsx
View file

@ -24,9 +24,9 @@ export default function AlertDropdown({}: AlertDropdownType) {
return ( return (
<div <div
ref={componentRef} ref={componentRef}
className="z-10 py-3 pb-4 px-2 rounded-md bg-background ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col" className="z-10 flex h-[500px] w-[400px] flex-col overflow-hidden rounded-md bg-background px-2 py-3 pb-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
> >
<div className="flex pl-3 flex-row justify-between text-md font-medium text-foreground"> <div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
Notifications Notifications
<div className="flex gap-3 pr-3 "> <div className="flex gap-3 pr-3 ">
<button <button
@ -36,7 +36,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
setTimeout(clearNotificationList, 100); setTimeout(clearNotificationList, 100);
}} }}
> >
<Trash2 className="w-[1.1rem] h-[1.1rem]" /> <Trash2 className="h-[1.1rem] w-[1.1rem]" />
</button> </button>
<button <button
className="text-foreground hover:text-status-red" className="text-foreground hover:text-status-red"
@ -46,7 +46,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
</button> </button>
</div> </div>
</div> </div>
<div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-high-foreground"> <div className="text-high-foreground mt-3 flex h-full w-full flex-col overflow-y-scroll scrollbar-hide">
{notificationList.length !== 0 ? ( {notificationList.length !== 0 ? (
notificationList.map((alertItem, index) => ( notificationList.map((alertItem, index) => (
<SingleAlert <SingleAlert
@ -56,7 +56,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
/> />
)) ))
) : ( ) : (
<div className="h-full w-full pb-16 text-ring flex justify-center items-center"> <div className="flex h-full w-full items-center justify-center pb-16 text-ring">
No new notifications No new notifications
</div> </div>
)} )}

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

@ -39,7 +39,7 @@ export default function ErrorAlert({
removeAlert(id); removeAlert(id);
}, 500); }, 500);
}} }}
className="rounded-md w-96 mt-6 shadow-xl bg-error-background p-4 cursor-pointer" className="mt-6 w-96 cursor-pointer rounded-md bg-error-background p-4 shadow-xl"
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">

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

@ -36,7 +36,7 @@ export default function NoticeAlert({
setShow(false); setShow(false);
removeAlert(id); removeAlert(id);
}} }}
className="rounded-md w-96 mt-6 shadow-xl bg-info-background p-4" className="mt-6 w-96 rounded-md bg-info-background p-4 shadow-xl"
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
@ -44,7 +44,7 @@ export default function NoticeAlert({
</div> </div>
<div className="ml-3 flex-1 md:flex md:justify-between"> <div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-info-foreground">{title}</p> <p className="text-sm text-info-foreground">{title}</p>
<p className="mt-3 text-sm md:mt-0 md:ml-6"> <p className="mt-3 text-sm md:ml-6 md:mt-0">
{link !== "" ? ( {link !== "" ? (
<Link <Link
to={link} to={link}

2
src/frontend/src/alerts/success/index.tsx
View file

@ -34,7 +34,7 @@ export default function SuccessAlert({
setShow(false); setShow(false);
removeAlert(id); removeAlert(id);
}} }}
className="rounded-md w-96 mt-6 shadow-xl bg-success-background p-4" className="mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl"
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">

12
src/frontend/src/components/CrashErrorComponent/index.tsx
View file

@ -1,11 +1,11 @@
export default function CrashErrorComponent({ error, resetErrorBoundary }) { export default function CrashErrorComponent({ error, resetErrorBoundary }) {
return ( return (
<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-foreground bg-opacity-50 z-50"> <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-foreground bg-opacity-50">
<div className="bg-background max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly"> <div className="flex h-1/3 min-h-fit max-w-4xl flex-col justify-evenly rounded-lg bg-background p-8 text-start shadow-lg">
<h1 className="text-status-red text-3xl mb-4"> <h1 className="mb-4 text-3xl text-status-red">
Oops! An unknown error has occurred. Oops! An unknown error has occurred.
</h1> </h1>
<p className="text-foreground mb-4 text-xl"> <p className="mb-4 text-xl text-foreground">
Please click the 'Reset Application' button to restore the Please click the 'Reset Application' button to restore the
application's state. If the error persists, please create an issue on application's state. If the error persists, please create an issue on
our GitHub page. We apologize for any inconvenience this may have our GitHub page. We apologize for any inconvenience this may have
@ -14,7 +14,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
<div className="flex justify-center"> <div className="flex justify-center">
<button <button
onClick={resetErrorBoundary} onClick={resetErrorBoundary}
className="bg-primary hover:bg-ring text-background font-bold py-2 px-4 rounded mr-4" className="mr-4 rounded bg-primary px-4 py-2 font-bold text-background hover:bg-ring"
> >
Reset Application Reset Application
</button> </button>
@ -22,7 +22,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
href="https://github.com/logspace-ai/langflow/issues/new" href="https://github.com/logspace-ai/langflow/issues/new"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="bg-status-red hover:bg-error-foreground text-background font-bold py-2 px-4 rounded" className="rounded bg-status-red px-4 py-2 font-bold text-background hover:bg-error-foreground"
> >
Create Issue Create Issue
</a> </a>

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

@ -47,7 +47,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
<div className="flex justify-between"> <div className="flex justify-between">
<span className="font-medium">Name</span>{" "} <span className="font-medium">Name</span>{" "}
{isMaxLength && ( {isMaxLength && (
<span className="text-status-red animate-pulse ml-10"> <span className="ml-10 animate-pulse text-status-red">
Character limit reached Character limit reached
</span> </span>
)} )}
@ -71,7 +71,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
onChange={handleDescriptionChange} onChange={handleDescriptionChange}
value={description ?? ""} value={description ?? ""}
placeholder="Flow description" placeholder="Flow description"
className="max-h-[100px] mt-2 font-normal" className="mt-2 max-h-[100px] font-normal"
rows={3} rows={3}
/> />
</Label> </Label>

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

@ -18,10 +18,10 @@ export default function ExtraSidebar() {
<aside <aside
className={` ${ className={` ${
isStackedOpen ? "w-52" : "w-0 " isStackedOpen ? "w-52" : "w-0 "
} flex-shrink-0 flex overflow-hidden flex-col border-r transition-all duration-500`} } flex flex-shrink-0 flex-col overflow-hidden border-r transition-all duration-500`}
> >
<div className="w-52 border overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-background"> <div className="flex h-full w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide">
<div className="flex flex-grow flex-col w-full"> <div className="flex w-full flex-grow flex-col">
{extraNavigation.options ? ( {extraNavigation.options ? (
<div className="p-4"> <div className="p-4">
<nav className="flex-1 space-y-1"> <nav className="flex-1 space-y-1">
@ -34,7 +34,7 @@ export default function ExtraSidebar() {
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "bg-muted text-foreground" ? "bg-muted text-foreground"
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground", : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
"group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md" "group flex w-full items-center rounded-md py-2 pl-2 text-sm font-medium"
)} )}
> >
<item.icon <item.icon
@ -42,7 +42,7 @@ export default function ExtraSidebar() {
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "text-ring" ? "text-ring"
: "text-ring group-hover:text-ring", : "text-ring group-hover:text-ring",
"mr-3 flex-shrink-0 h-6 w-6" "mr-3 h-6 w-6 flex-shrink-0"
)} )}
/> />
{item.name} {item.name}
@ -61,7 +61,7 @@ export default function ExtraSidebar() {
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "bg-muted text-foreground" ? "bg-muted text-foreground"
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground", : "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
"group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-ring" "group flex w-full items-center rounded-md py-2 pl-2 pr-1 text-left text-sm font-medium focus:outline-none focus:ring-1 focus:ring-ring"
)} )}
> >
<item.icon <item.icon
@ -71,8 +71,8 @@ export default function ExtraSidebar() {
<span className="flex-1">{item.name}</span> <span className="flex-1">{item.name}</span>
<svg <svg
className={classNames( className={classNames(
open ? "text-ring rotate-90" : "text-ring", open ? "rotate-90 text-ring" : "text-ring",
"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-ring" "transition-rotate ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-ring"
)} )}
viewBox="0 0 20 20" viewBox="0 0 20 20"
aria-hidden="true" aria-hidden="true"

2
src/frontend/src/components/ReactTooltipComponent/index.tsx
View file

@ -37,7 +37,7 @@ const TooltipReact: FC<TooltipProps> = ({
id={selector} id={selector}
content={content} content={content}
className={classNames( className={classNames(
"!bg-white !text-xs !font-normal !text-foreground !shadow-md !opacity-100 z-[9999]", "z-[9999] !bg-white !text-xs !font-normal !text-foreground !opacity-100 !shadow-md",
className className
)} )}
place={position} place={position}

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

@ -31,20 +31,20 @@ export const CardComponent = ({
<CardTitle className="flex w-full items-center gap-4"> <CardTitle className="flex w-full items-center gap-4">
<span <span
className={ className={
"rounded-full w-7 h-7 flex items-center justify-center text-2xl " + "flex h-7 w-7 items-center justify-center rounded-full text-2xl " +
gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length] gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length]
} }
></span> ></span>
<span className="flex-1 w-full inline-block truncate-doubleline break-words"> <span className="inline-block w-full flex-1 break-words truncate-doubleline">
{flow.name} {flow.name}
</span> </span>
{onDelete && ( {onDelete && (
<button className="flex self-start" onClick={onDelete}> <button className="flex self-start" onClick={onDelete}>
<Trash2 className="w-4 h-4 text-primary opacity-0 group-hover:opacity-100 transition-all" /> <Trash2 className="h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100" />
</button> </button>
)} )}
</CardTitle> </CardTitle>
<CardDescription className="pt-2 pb-2"> <CardDescription className="pb-2 pt-2">
<div className="truncate-doubleline"> <div className="truncate-doubleline">
{flow.description} {flow.description}
{/* {flow.description} */} {/* {flow.description} */}
@ -53,7 +53,7 @@ export const CardComponent = ({
</CardHeader> </CardHeader>
<CardFooter> <CardFooter>
<div className="flex gap-2 w-full justify-between items-end"> <div className="flex w-full items-end justify-between gap-2">
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{/* <Badge variant="secondary">Agent</Badge> {/* <Badge variant="secondary">Agent</Badge>
<Badge variant="secondary"> <Badge variant="secondary">

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

@ -158,7 +158,7 @@ export default function BuildTrigger({
> >
<div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}> <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
<div <div
className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow bg-border cursor-pointer`} className={`${eventClick} align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md`}
onClick={() => { onClick={() => {
handleBuild(flow); handleBuild(flow);
}} }}
@ -166,7 +166,7 @@ export default function BuildTrigger({
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
> >
<button> <button>
<div className="flex gap-3 items-center"> <div className="flex items-center gap-3">
{isBuilding && progress < 1 ? ( {isBuilding && progress < 1 ? (
// Render your loading animation here when isBuilding is true // Render your loading animation here when isBuilding is true
<RadialProgressComponent <RadialProgressComponent
@ -177,7 +177,7 @@ export default function BuildTrigger({
) : isBuilding ? ( ) : 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" /> <Zap className="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1" />
)} )}
</div> </div>
</button> </button>

12
src/frontend/src/components/chatComponent/chatMessage/index.tsx
View file

@ -13,14 +13,14 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
<div className="w-full text-start"> <div className="w-full text-start">
<div <div
style={{ backgroundColor: nodeColors["chat"] }} style={{ backgroundColor: nodeColors["chat"] }}
className=" relative text-start inline-block text-background rounded-xl overflow-hidden w-fit max-w-[280px] text-sm font-normal rounded-tl-none" className=" relative inline-block w-fit max-w-[280px] overflow-hidden rounded-xl rounded-tl-none text-start text-sm font-normal text-background"
> >
{hidden && chat.thought && chat.thought !== "" && ( {hidden && chat.thought && chat.thought !== "" && (
<div <div
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
className="absolute top-2 right-2 cursor-pointer" className="absolute right-2 top-2 cursor-pointer"
> >
<MessageCircle className="w-5 h-5 animate-bounce" /> <MessageCircle className="h-5 w-5 animate-bounce" />
</div> </div>
)} )}
@ -28,7 +28,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
<div <div
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
style={{ backgroundColor: nodeColors["thought"] }} style={{ backgroundColor: nodeColors["thought"] }}
className="text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer" className="inline-block w-full cursor-pointer px-5 pb-3 pt-3 text-start"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(convert.toHtml(chat.thought)), __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
}} }}
@ -36,7 +36,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
)} )}
{chat.thought && chat.thought !== "" && !hidden && <br></br>} {chat.thought && chat.thought !== "" && !hidden && <br></br>}
<div <div
className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8" className="w-full rounded-b-md px-4 pb-3 pr-8 pt-3"
style={{ backgroundColor: nodeColors["chat"] }} style={{ backgroundColor: nodeColors["chat"] }}
> >
{chat.message} {chat.message}
@ -45,7 +45,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
</div> </div>
) : ( ) : (
<div className="w-full text-end"> <div className="w-full text-end">
<div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black bg-input font-normal rounded-tr-none"> <div className="inline-block w-fit max-w-[280px] overflow-hidden rounded-xl rounded-tr-none bg-input p-3 px-5 text-start text-sm font-normal text-black">
{chat.message} {chat.message}
</div> </div>
</div> </div>

6
src/frontend/src/components/chatComponent/chatTrigger/index.tsx
View file

@ -32,14 +32,14 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
> >
<div className="absolute bottom-4 right-3"> <div className="absolute bottom-4 right-3">
<div <div
className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow className="align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3
bg-border cursor-pointer" py-1 shadow-md"
onClick={handleClick} onClick={handleClick}
> >
<button> <button>
<div className="flex gap-3"> <div className="flex gap-3">
<MessagesSquare <MessagesSquare
className="pth-6 w-6 fill-chat-trigger stroke-1 stroke-chat-trigger" className="pth-6 w-6 fill-chat-trigger stroke-chat-trigger stroke-1"
style={{ color: "white" }} style={{ color: "white" }}
strokeWidth={1.5} strokeWidth={1.5}
/> />

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

@ -30,10 +30,10 @@ export default function CodeAreaComponent({
return ( return (
<div <div
className={ className={
disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full" disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
} }
> >
<div className="w-full flex items-center"> <div className="flex w-full items-center">
<span <span
onClick={() => { onClick={() => {
openPopUp( openPopUp(
@ -48,9 +48,9 @@ export default function CodeAreaComponent({
}} }}
className={ className={
editNode editNode
? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring border shadow-sm text-sm bg-transparent sm:text-sm" + ? "form-input block w-full cursor-pointer truncate rounded-md border border-ring bg-transparent pb-0.5 pt-0.5 text-sm text-ring shadow-sm placeholder:text-center sm:text-sm" +
INPUT_STYLE INPUT_STYLE
: "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" + : "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm placeholder:text-muted-foreground sm:text-sm" +
INPUT_STYLE + INPUT_STYLE +
(disabled ? " bg-input" : "") (disabled ? " bg-input" : "")
} }
@ -71,7 +71,7 @@ export default function CodeAreaComponent({
}} }}
> >
{!editNode && ( {!editNode && (
<ExternalLink className="w-6 h-6 hover:text-ring ml-3" /> <ExternalLink className="ml-3 h-6 w-6 hover:text-ring" />
)} )}
</button> </button>
</div> </div>

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

@ -40,13 +40,13 @@ export default function Dropdown({
<Listbox.Button <Listbox.Button
className={ className={
editNode 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" + ? "form-input relative block w-full rounded-md border pb-0.5 pr-8 pt-0.5 shadow-sm placeholder:text-center sm:text-sm" +
INPUT_STYLE INPUT_STYLE
: "placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md shadow-sm sm:text-sm border" + : "w-full rounded-md border py-2 pl-3 pr-10 text-left shadow-sm placeholder:text-muted-foreground focus-visible:outline-none sm:text-sm" +
INPUT_STYLE INPUT_STYLE
} }
> >
<span className="block bg-background truncate w-full"> <span className="block w-full truncate bg-background">
{internalValue} {internalValue}
</span> </span>
<span <span
@ -71,9 +71,9 @@ export default function Dropdown({
<Listbox.Options <Listbox.Options
className={classNames( className={classNames(
editNode editNode
? "z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]" ? "z-10 mt-1 max-h-60 w-[215px] overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
: "nowheel z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ", : "nowheel overflow-y z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
apiModal ? "w-[250px] mb-2" : "absolute" apiModal ? "mb-2 w-[250px]" : "absolute"
)} )}
> >
{options.map((option, id) => ( {options.map((option, id) => (

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

@ -58,9 +58,9 @@ export default function FloatComponent({
value={myValue} value={myValue}
className={ className={
editNode editNode
? "focus:placeholder-transparent text-center placeholder:text-center border block w-full pt-0.5 pb-0.5 form-input rounded-md border-border shadow-sm sm:text-sm placeholder:text-muted-foreground" + ? "form-input block w-full rounded-md border border-border pb-0.5 pt-0.5 text-center shadow-sm placeholder:text-center placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
INPUT_STYLE INPUT_STYLE
: "focus:placeholder-transparent block w-full form-input placeholder:text-muted-foreground bg-background rounded-md border-border shadow-sm ring-offset-input sm:text-sm" + : "form-input block w-full rounded-md border-border bg-background shadow-sm ring-offset-input placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
INPUT_STYLE + INPUT_STYLE +
(disabled ? " bg-input" : "") (disabled ? " bg-input" : "")
} }

18
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -47,20 +47,20 @@ export const MenuBar = ({ flows, tabId }) => {
let current_flow = flows.find((flow) => flow.id === tabId); let current_flow = flows.find((flow) => flow.id === tabId);
return ( return (
<div className="flex gap-2 items-center"> <div className="flex items-center gap-2">
<Link to="/"> <Link to="/">
<ChevronLeft className="w-4" /> <ChevronLeft className="w-4" />
</Link> </Link>
<div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 gap-0.5"> <div className="flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button
className="gap-2 flex items-center max-w-[200px]" className="flex max-w-[200px] items-center gap-2"
variant="primary" variant="primary"
size="sm" size="sm"
> >
<div className="truncate flex-1">{current_flow.name}</div> <div className="flex-1 truncate">{current_flow.name}</div>
<ChevronDown className="w-4 h-4" /> <ChevronDown className="h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-44"> <DropdownMenuContent className="w-44">
@ -71,7 +71,7 @@ export const MenuBar = ({ flows, tabId }) => {
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<Plus className="w-4 h-4 mr-2" /> <Plus className="mr-2 h-4 w-4" />
New New
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
@ -80,7 +80,7 @@ export const MenuBar = ({ flows, tabId }) => {
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<Settings2 className="w-4 h-4 mr-2 " /> <Settings2 className="mr-2 h-4 w-4 " />
Settings Settings
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
@ -89,7 +89,7 @@ export const MenuBar = ({ flows, tabId }) => {
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<Undo className="w-4 h-4 mr-2 " /> <Undo className="mr-2 h-4 w-4 " />
Undo Undo
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
@ -98,7 +98,7 @@ export const MenuBar = ({ flows, tabId }) => {
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<Redo className="w-4 h-4 mr-2 " /> <Redo className="mr-2 h-4 w-4 " />
Redo Redo
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />

30
src/frontend/src/components/headerComponent/index.tsx
View file

@ -36,23 +36,23 @@ export default function Header() {
fetchStars(); fetchStars();
}, []); }, []);
return ( return (
<div className="w-full h-12 flex justify-between items-center border-b bg-muted"> <div className="flex h-12 w-full items-center justify-between border-b bg-muted">
<div className="flex gap-2 justify-start items-center w-96"> <div className="flex w-96 items-center justify-start gap-2">
<Link to="/"> <Link to="/">
<span className="text-2xl ml-4">⛓️</span> <span className="ml-4 text-2xl">⛓️</span>
</Link> </Link>
{flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && ( {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
<MenuBar flows={flows} tabId={tabId} /> <MenuBar flows={flows} tabId={tabId} />
)} )}
</div> </div>
<div className="flex gap-2 items-center"> <div className="flex items-center gap-2">
<Link to="/"> <Link to="/">
<Button <Button
className="gap-2" className="gap-2"
variant={location.pathname === "/" ? "primary" : "secondary"} variant={location.pathname === "/" ? "primary" : "secondary"}
size="sm" size="sm"
> >
<Home className="w-4 h-4" /> <Home className="h-4 w-4" />
<div className="flex-1">{USER_PROJECTS_HEADER}</div> <div className="flex-1">{USER_PROJECTS_HEADER}</div>
</Button> </Button>
</Link> </Link>
@ -64,22 +64,22 @@ export default function Header() {
} }
size="sm" size="sm"
> >
<Users2 className="w-4 h-4" /> <Users2 className="h-4 w-4" />
<div className="flex-1">Community Examples</div> <div className="flex-1">Community Examples</div>
</Button> </Button>
</Link> </Link>
</div> </div>
<div className="flex justify-end px-2 w-96"> <div className="flex w-96 justify-end px-2">
<div className="ml-auto mr-2 flex gap-5 items-center"> <div className="ml-auto mr-2 flex items-center gap-5">
<a <a
href="https://github.com/logspace-ai/langflow" href="https://github.com/logspace-ai/langflow"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors 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 transition-colors 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"
> >
<FaGithub className="h-5 w-5 mr-2" /> <FaGithub className="mr-2 h-5 w-5" />
Star Star
<div className="ml-2 flex text-sm bg-background rounded-md rounded-l-none border px-2 h-9 -mr-px items-center justify-center"> <div className="-mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm">
{stars} {stars}
</div> </div>
</a> </a>
@ -114,7 +114,7 @@ export default function Header() {
)} )}
</button> </button>
<button <button
className="text-muted-foreground hover:text-ring relative" className="relative text-muted-foreground hover:text-ring"
onClick={(event: React.MouseEvent<HTMLElement>) => { onClick={(event: React.MouseEvent<HTMLElement>) => {
setNotificationCenter(false); setNotificationCenter(false);
const { top, left } = ( const { top, left } = (
@ -123,18 +123,18 @@ export default function Header() {
openPopUp( openPopUp(
<> <>
<div <div
className="z-10 absolute" className="absolute z-10"
style={{ top: top + 34, left: left - AlertWidth }} style={{ top: top + 34, left: left - AlertWidth }}
> >
<AlertDropdown /> <AlertDropdown />
</div> </div>
<div className="h-screen w-screen fixed top-0 left-0"></div> <div className="fixed left-0 top-0 h-screen w-screen"></div>
</> </>
); );
}} }}
> >
{notificationCenter && ( {notificationCenter && (
<div className="absolute w-1.5 h-1.5 rounded-full bg-destructive right-[3px]"></div> <div className="absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive"></div>
)} )}
<Bell className="h-5 w-5" aria-hidden="true" /> <Bell className="h-5 w-5" aria-hidden="true" />
</button> </button>

16
src/frontend/src/components/inputComponent/index.tsx
View file

@ -33,7 +33,7 @@ export default function InputComponent({
<div <div
className={ className={
disabled disabled
? "relative pointer-events-none cursor-not-allowed" ? "pointer-events-none relative cursor-not-allowed"
: "relative" : "relative"
} }
> >
@ -46,11 +46,11 @@ export default function InputComponent({
if (disableCopyPaste) setDisableCopyPaste(false); if (disableCopyPaste) setDisableCopyPaste(false);
}} }}
className={classNames( className={classNames(
"block w-full pr-12 form-input rounded-md bg-background border-ring shadow-sm sm:text-sm focus:placeholder-transparent placeholder:text-muted-foreground", "form-input block w-full rounded-md border-ring bg-background pr-12 shadow-sm placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm",
disabled ? " bg-input" : "", disabled ? " bg-input" : "",
password && !pwdVisible && myValue !== "" ? "password" : "", password && !pwdVisible && myValue !== "" ? "password" : "",
editNode editNode
? "border block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm text-center" + ? "form-input block w-full rounded-md border border-ring pb-0.5 pt-0.5 text-center shadow-sm sm:text-sm" +
INPUT_STYLE INPUT_STYLE
: "ring-offset-input" + INPUT_STYLE, : "ring-offset-input" + INPUT_STYLE,
password && editNode ? "pr-8" : "pr-3" password && editNode ? "pr-8" : "pr-3"
@ -65,7 +65,7 @@ export default function InputComponent({
<button <button
className={classNames( className={classNames(
editNode editNode
? "absolute inset-y-0 right-0 pr-2 items-center text-muted-foreground" ? "absolute inset-y-0 right-0 items-center pr-2 text-muted-foreground"
: "absolute inset-y-0 right-0 items-center px-4 text-muted-foreground" : "absolute inset-y-0 right-0 items-center px-4 text-muted-foreground"
)} )}
onClick={() => { onClick={() => {
@ -82,8 +82,8 @@ export default function InputComponent({
stroke="currentColor" stroke="currentColor"
className={classNames( className={classNames(
editNode editNode
? "w-5 h-5 absolute bottom-0.5 right-2" ? "absolute bottom-0.5 right-2 h-5 w-5"
: "w-5 h-5 absolute bottom-2 right-3" : "absolute bottom-2 right-3 h-5 w-5"
)} )}
> >
<path <path
@ -101,8 +101,8 @@ export default function InputComponent({
stroke="currentColor" stroke="currentColor"
className={classNames( className={classNames(
editNode editNode
? "w-5 h-5 absolute bottom-0.5 right-2" ? "absolute bottom-0.5 right-2 h-5 w-5"
: "w-5 h-5 absolute bottom-2 right-3" : "absolute bottom-2 right-3 h-5 w-5"
)} )}
> >
<path <path

12
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -95,17 +95,17 @@ export default function InputFileComponent({
return ( return (
<div <div
className={ className={
disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full" disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
} }
> >
<div className="w-full flex items-center"> <div className="flex w-full items-center">
<span <span
onClick={handleButtonClick} onClick={handleButtonClick}
className={ className={
editNode editNode
? "truncate placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm border" + ? "form-input block w-full truncate rounded-md border border-ring pb-0.5 pt-0.5 text-ring shadow-sm placeholder:text-center sm:text-sm" +
INPUT_STYLE INPUT_STYLE
: "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" + : "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm sm:text-sm" +
INPUT_STYLE + INPUT_STYLE +
(disabled ? " bg-input" : "") (disabled ? " bg-input" : "")
} }
@ -114,10 +114,10 @@ export default function InputFileComponent({
</span> </span>
<button onClick={handleButtonClick}> <button onClick={handleButtonClick}>
{!editNode && !loading && ( {!editNode && !loading && (
<FileSearch2 className="w-6 h-6 hover:text-ring ml-3" /> <FileSearch2 className="ml-3 h-6 w-6 hover:text-ring" />
)} )}
{!editNode && loading && ( {!editNode && loading && (
<span className="loading loading-spinner loading-sm pl-3 h-8 pointer-events-none"></span> <span className="loading loading-spinner loading-sm pointer-events-none h-8 pl-3"></span>
)} )}
</button> </button>
</div> </div>

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

@ -36,15 +36,15 @@ export default function InputListComponent({
} }
> >
{inputList.map((i, idx) => ( {inputList.map((i, idx) => (
<div key={idx} className="w-full flex gap-3"> <div key={idx} className="flex w-full gap-3">
<input <input
type="text" type="text"
value={i} value={i}
className={ className={
editNode editNode
? "border-[1px] truncate cursor-pointer text-center placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm" + ? "form-input block w-full cursor-pointer truncate rounded-md border-[1px] border-ring pb-0.5 pt-0.5 text-center text-ring shadow-sm placeholder:text-center sm:text-sm" +
INPUT_STYLE INPUT_STYLE
: "block w-full form-input bg-background rounded-md border-ring shadow-sm focus:border-ring focus:ring-ring sm:text-sm" + : "form-input block w-full rounded-md border-ring bg-background shadow-sm focus:border-ring focus:ring-ring sm:text-sm" +
(disabled ? " bg-input" : "") + (disabled ? " bg-input" : "") +
"focus:placeholder-transparent" "focus:placeholder-transparent"
} }
@ -70,7 +70,7 @@ export default function InputListComponent({
onChange(inputList); onChange(inputList);
}} }}
> >
<Plus className={"w-4 h-4 hover:text-ring"} /> <Plus className={"h-4 w-4 hover:text-ring"} />
</button> </button>
) : ( ) : (
<button <button
@ -84,7 +84,7 @@ export default function InputListComponent({
onChange(inputList); onChange(inputList);
}} }}
> >
<X className="w-4 h-4 hover:text-status-red" /> <X className="h-4 w-4 hover:text-status-red" />
</button> </button>
)} )}
</div> </div>

6
src/frontend/src/components/intComponent/index.tsx
View file

@ -32,7 +32,7 @@ export default function IntComponent({
<div <div
className={ className={
"w-full " + "w-full " +
(disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full") (disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full")
} }
> >
<input <input
@ -72,9 +72,9 @@ export default function IntComponent({
value={myValue} value={myValue}
className={ className={
editNode editNode
? "focus:placeholder-transparent text-center placeholder:text-center border block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm placeholder:text-muted-foreground" + ? "form-input block w-full rounded-md border pb-0.5 pt-0.5 text-center shadow-sm placeholder:text-center placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
INPUT_STYLE INPUT_STYLE
: "focus:placeholder-transparent block w-full form-input bg-background rounded-md shadow-sm ring-offset-background sm:text-sm placeholder:text-muted-foreground" + : "form-input block w-full rounded-md bg-background shadow-sm ring-offset-background placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
INPUT_STYLE + INPUT_STYLE +
(disabled ? " bg-input" : "") (disabled ? " bg-input" : "")
} }

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

@ -4,10 +4,10 @@ type LoadingComponentProps = {
export default function LoadingComponent({ remSize }: LoadingComponentProps) { export default function LoadingComponent({ remSize }: LoadingComponentProps) {
return ( return (
<div role="status" className="w-min m-auto"> <div role="status" className="m-auto w-min">
<svg <svg
aria-hidden="true" aria-hidden="true"
className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin fill-almost-medium-blue`} className={`w-${remSize} h-${remSize} mr-2 animate-spin fill-almost-medium-blue text-muted`}
viewBox="0 0 100 101" viewBox="0 0 100 101"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -22,7 +22,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
/> />
</svg> </svg>
<br></br> <br></br>
<span className="animate-pulse text-almost-medium-blue text-lg"> <span className="animate-pulse text-lg text-almost-medium-blue">
Loading... Loading...
</span> </span>
</div> </div>

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

@ -28,10 +28,10 @@ export default function PromptAreaComponent({
return ( return (
<div <div
className={ className={
disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full" disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full"
} }
> >
<div className="w-full flex items-center"> <div className="flex w-full items-center">
<span <span
onClick={() => { onClick={() => {
openPopUp( openPopUp(
@ -49,9 +49,9 @@ export default function PromptAreaComponent({
}} }}
className={ className={
editNode editNode
? "cursor-pointer truncate placeholder:text-center text-ring border block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm" + ? "form-input block w-full cursor-pointer truncate rounded-md border border-ring pb-0.5 pt-0.5 text-ring shadow-sm placeholder:text-center sm:text-sm" +
INPUT_STYLE INPUT_STYLE
: "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" + : "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm sm:text-sm" +
(disabled ? " bg-input" : "") (disabled ? " bg-input" : "")
} }
> >
@ -73,7 +73,7 @@ export default function PromptAreaComponent({
); );
}} }}
> >
{!editNode && <ExternalLink className="w-6 h-6 hover:text-ring " />} {!editNode && <ExternalLink className="h-6 w-6 hover:text-ring " />}
</button> </button>
</div> </div>
</div> </div>

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

@ -31,8 +31,8 @@ export default function TextAreaComponent({
<div <div
className={ className={
editNode editNode
? "w-full flex items-center" ? "flex w-full items-center"
: "w-full flex items-center gap-3" : "flex w-full items-center gap-3"
} }
> >
<span <span
@ -52,9 +52,9 @@ export default function TextAreaComponent({
}} }}
className={ className={
editNode editNode
? "truncate cursor-pointer placeholder:text-center text-ring border block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring bg-transparent shadow-sm sm:text-sm" + ? "form-input block w-full cursor-pointer truncate rounded-md border border-ring bg-transparent pb-0.5 pt-0.5 text-ring shadow-sm placeholder:text-center sm:text-sm" +
INPUT_STYLE INPUT_STYLE
: "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" + : "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm sm:text-sm" +
(disabled ? " bg-input" : "") (disabled ? " bg-input" : "")
} }
> >
@ -76,7 +76,7 @@ export default function TextAreaComponent({
); );
}} }}
> >
{!editNode && <ExternalLink className="w-6 h-6 hover:text-ring " />} {!editNode && <ExternalLink className="h-6 w-6 hover:text-ring " />}
</button> </button>
</div> </div>
</div> </div>

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

@ -36,8 +36,8 @@ export default function ToggleComponent({
<span <span
className={classNames( className={classNames(
enabled enabled
? "opacity-0 ease-out duration-100" ? "opacity-0 duration-100 ease-out"
: "opacity-100 ease-in duration-200", : "opacity-100 duration-200 ease-in",
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
)} )}
aria-hidden="true" aria-hidden="true"
@ -45,8 +45,8 @@ export default function ToggleComponent({
<span <span
className={classNames( className={classNames(
enabled enabled
? "opacity-100 ease-in duration-200" ? "opacity-100 duration-200 ease-in"
: "opacity-0 ease-out duration-100", : "opacity-0 duration-100 ease-out",
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
)} )}
aria-hidden="true" aria-hidden="true"

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

@ -8,7 +8,7 @@ const Card = React.forwardRef<
<div <div
ref={ref} ref={ref}
className={cn( className={cn(
"rounded-lg flex flex-col justify-between border bg-card text-card-foreground shadow-sm hover:shadow-lg transition-all", "flex flex-col justify-between rounded-lg border bg-card text-card-foreground shadow-sm transition-all hover:shadow-lg",
className className
)} )}
{...props} {...props}

2
src/frontend/src/components/ui/dropdown-menu.tsx
View file

@ -146,7 +146,7 @@ const DropdownMenuLabel = React.forwardRef<
<DropdownMenuPrimitive.Label <DropdownMenuPrimitive.Label
ref={ref} ref={ref}
className={cn( className={cn(
"px-2 pl-2 py-1.5 text-sm font-semibold", "px-2 py-1.5 pl-2 text-sm font-semibold",
inset && "pl-8", inset && "pl-8",
className className
)} )}

4
src/frontend/src/components/ui/rename-label.tsx
View file

@ -57,7 +57,7 @@ export default function RenameLabel(props) {
ref={inputRef} ref={inputRef}
onInput={resizeInput} onInput={resizeInput}
className={cn( className={cn(
"px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-ring rounded-md", "rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
props.className props.className
)} )}
onBlur={() => { onBlur={() => {
@ -74,7 +74,7 @@ export default function RenameLabel(props) {
) : ( ) : (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span <span
className={cn("px-2 text-left truncate", props.className)} className={cn("truncate px-2 text-left", props.className)}
onDoubleClick={() => { onDoubleClick={() => {
setIsRename(true); setIsRename(true);
setMyValue(props.value); setMyValue(props.value);

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

@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger <TabsPrimitive.Trigger
ref={ref} ref={ref}
className={cn( className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted", "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80",
className className
)} )}
{...props} {...props}

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

@ -275,10 +275,14 @@ export function TabsProvider({ children }: { children: ReactNode }) {
/** /**
* Downloads the current flow as a JSON file * Downloads the current flow as a JSON file
*/ */
function downloadFlow(flow: FlowType,flowName:string,flowDescription?:string) { function downloadFlow(
flow: FlowType,
flowName: string,
flowDescription?: string
) {
// create a data URI with the current flow data // create a data URI with the current flow data
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent( const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
JSON.stringify({...flow, name:flowName, description:flowDescription}) JSON.stringify({ ...flow, name: flowName, description: flowDescription })
)}`; )}`;
// create a link element and set its properties // create a link element and set its properties

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

@ -262,18 +262,18 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger> <DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[850px] sm:max-w-[700px] h-[580px]"> <DialogContent className="h-[580px] sm:max-w-[700px] lg:max-w-[850px]">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Code</span> <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 pl-1 text-primary " aria-hidden="true" />
</DialogTitle> </DialogTitle>
<DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription> <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
</DialogHeader> </DialogHeader>
<Tabs <Tabs
value={activeTab} value={activeTab}
className="w-full h-full overflow-hidden text-center bg-muted rounded-md border" className="h-full w-full overflow-hidden rounded-md border bg-muted text-center"
onValueChange={(value) => { onValueChange={(value) => {
setActiveTab(value); setActiveTab(value);
if (value === "3") { if (value === "3") {
@ -291,7 +291,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</TabsList> </TabsList>
<div className="float-right"> <div className="float-right">
<button <button
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-ring " className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-ring "
onClick={copyToClipboard} onClick={copyToClipboard}
> >
{isCopied ? <Check size={18} /> : <Clipboard size={15} />} {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
@ -303,7 +303,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<TabsContent <TabsContent
value={index.toString()} value={index.toString()}
className="overflow-hidden w-full h-full px-4 pb-4 -mt-1" className="-mt-1 h-full w-full overflow-hidden px-4 pb-4"
key={index} // Remember to add a unique key prop key={index} // Remember to add a unique key prop
> >
{index < 3 ? ( {index < 3 ? (
@ -316,10 +316,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</SyntaxHighlighter> </SyntaxHighlighter>
) : index === 3 ? ( ) : index === 3 ? (
<> <>
<div className="flex w-full h-[400px] mt-2"> <div className="mt-2 flex h-[400px] w-full">
<div <div
className={classNames( className={classNames(
"w-full rounded-lg bg-muted border-[1px] border-gray-200", "w-full rounded-lg border-[1px] border-gray-200 bg-muted",
1 == 1 1 == 1
? "overflow-scroll overflow-x-hidden custom-scroll" ? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden" : "overflow-hidden"
@ -332,14 +332,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
trigger={t["data"]["id"]} trigger={t["data"]["id"]}
open={openAccordion} open={openAccordion}
> >
<div className="flex flex-col gap-5 h-fit"> <div className="flex h-fit flex-col gap-5">
<Table className="table-fixed bg-muted outline-1"> <Table className="table-fixed bg-muted outline-1">
<TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10"> <TableHeader className="h-10 border-gray-200 text-xs font-medium text-gray-500">
<TableRow className="dark:border-b-muted"> <TableRow className="dark:border-b-muted">
<TableHead className="h-7 text-center"> <TableHead className="h-7 text-center">
PARAM PARAM
</TableHead> </TableHead>
<TableHead className="p-0 h-7 text-center"> <TableHead className="h-7 p-0 text-center">
VALUE VALUE
</TableHead> </TableHead>
</TableRow> </TableRow>
@ -373,11 +373,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
key={i} key={i}
className="h-10 dark:border-b-muted" className="h-10 dark:border-b-muted"
> >
<TableCell className="p-0 text-center text-gray-900 text-sm"> <TableCell className="p-0 text-center text-sm text-gray-900">
{n} {n}
</TableCell> </TableCell>
<TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300"> <TableCell className="p-0 text-center text-xs text-gray-900 dark:text-gray-300">
<div className="w-[250px] m-auto"> <div className="m-auto w-[250px]">
{t.data.node.template[n] {t.data.node.template[n]
.type === "str" && .type === "str" &&
!t.data.node.template[n] !t.data.node.template[n]

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

@ -90,7 +90,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
<DialogDescription> <DialogDescription>
{data.node?.description} {data.node?.description}
<div className="flex pt-4"> <div className="flex pt-4">
<Variable className="w-5 h-5 pe-1 text-muted-foreground stroke-2 "></Variable> <Variable className="h-5 w-5 stroke-2 pe-1 text-muted-foreground "></Variable>
<span className="text-sm font-semibold text-primary "> <span className="text-sm font-semibold text-primary ">
Parameters Parameters
</span> </span>
@ -98,25 +98,25 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex w-full max-h-[350px] h-fit"> <div className="flex h-fit max-h-[350px] w-full">
<div <div
className={classNames( className={classNames(
"w-full rounded-lg bg-background border-[1px] border-input", "w-full rounded-lg border-[1px] border-input bg-background",
nodeLength > limitScrollFieldsModal nodeLength > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll" ? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden" : "overflow-hidden"
)} )}
> >
{nodeLength > 0 && ( {nodeLength > 0 && (
<div className="flex flex-col gap-5 h-fit"> <div className="flex h-fit flex-col gap-5">
<Table className="table-fixed bg-muted outline-1"> <Table className="table-fixed bg-muted outline-1">
<TableHeader className="border-input text-ring text-xs font-medium h-10"> <TableHeader className="h-10 border-input text-xs font-medium text-ring">
<TableRow className=""> <TableRow className="">
<TableHead className="h-7 text-center">PARAM</TableHead> <TableHead className="h-7 text-center">PARAM</TableHead>
<TableHead className="p-0 h-7 text-center"> <TableHead className="h-7 p-0 text-center">
VALUE VALUE
</TableHead> </TableHead>
<TableHead className="text-center h-7">SHOW</TableHead> <TableHead className="h-7 text-center">SHOW</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody className="p-0"> <TableBody className="p-0">
@ -135,12 +135,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
) )
.map((n, i) => ( .map((n, i) => (
<TableRow key={i} className="h-10 "> <TableRow key={i} className="h-10 ">
<TableCell className="p-0 text-center text-foreground text-sm"> <TableCell className="p-0 text-center text-sm text-foreground">
{data.node.template[n].name {data.node.template[n].name
? data.node.template[n].name ? data.node.template[n].name
: data.node.template[n].display_name} : data.node.template[n].display_name}
</TableCell> </TableCell>
<TableCell className="p-0 text-center text-foreground text-xs w-[300px] "> <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
{data.node.template[n].type === "str" && {data.node.template[n].type === "str" &&
!data.node.template[n].options ? ( !data.node.template[n].options ? (
<div className="mx-auto"> <div className="mx-auto">

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

@ -36,7 +36,7 @@ export default function ModalField({
return ( return (
<div <div
className={classNames( className={classNames(
"flex flex-row w-full items-center justify-between", "flex w-full flex-row items-center justify-between",
display ? "" : "hidden", display ? "" : "hidden",
Object.keys(data.node.template).filter( Object.keys(data.node.template).filter(
(t) => (t) =>

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

@ -59,8 +59,8 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8 w-[700px]"> <Dialog.Panel className="relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8">
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block"> <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
<button <button
type="button" type="button"
className="rounded-md text-ring hover:text-ring" className="rounded-md text-ring hover:text-ring"
@ -72,11 +72,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
<X className="h-6 w-6" aria-hidden="true" /> <X className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
<div className="h-full w-full flex flex-col justify-center items-center"> <div className="flex h-full w-full flex-col items-center justify-center">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm"> <div className="z-10 flex w-full justify-center pb-4 shadow-sm">
<Icon <Icon
strokeWidth={1.5} strokeWidth={1.5}
className="w-10 mt-4 h-10 p-1 rounded" className="mt-4 h-10 w-10 rounded p-1"
style={{ style={{
color: color:
nodeColors[types[data.type]] ?? nodeColors.unknown, nodeColors[types[data.type]] ?? nodeColors.unknown,
@ -91,11 +91,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
</Dialog.Title> </Dialog.Title>
</div> </div>
</div> </div>
<div className="h-full w-full bg-input p-4 gap-4 flex flex-row justify-center items-center"> <div className="flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4">
<div className="flex w-full h-[445px]"> <div className="flex h-[445px] w-full">
<div <div
className={classNames( className={classNames(
"px-4 sm:p-4 w-full rounded-lg bg-background shadow", "w-full rounded-lg bg-background px-4 shadow sm:p-4",
Object.keys(data.node.template).filter( Object.keys(data.node.template).filter(
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
@ -106,7 +106,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
: "overflow-hidden" : "overflow-hidden"
)} )}
> >
<div className="flex flex-col h-full gap-5"> <div className="flex h-full flex-col gap-5">
{Object.keys(data.node.template) {Object.keys(data.node.template)
.filter( .filter(
(t) => (t) =>
@ -144,7 +144,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
</div> </div>
</div> </div>
</div> </div>
<div className="bg-input w-full pb-3 flex flex-row-reverse px-4"> <div className="flex w-full flex-row-reverse bg-input px-4 pb-3">
<button <button
type="button" type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm" className="inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"

4
src/frontend/src/modals/chatModal/chatInput/index.tsx
View file

@ -53,7 +53,7 @@ export default function ChatInput({
lockChat lockChat
? " bg-input text-foreground " ? " bg-input text-foreground "
: " bg-background text-foreground ", : " bg-background text-foreground ",
"form-input block w-full custom-scroll rounded-md border-ring pr-10 sm:text-sm" + "form-input block w-full rounded-md border-ring pr-10 custom-scroll sm:text-sm" +
INPUT_STYLE INPUT_STYLE
)} )}
placeholder={"Send a message..."} placeholder={"Send a message..."}
@ -62,7 +62,7 @@ export default function ChatInput({
<button disabled={lockChat} onClick={() => sendMessage()}> <button disabled={lockChat} onClick={() => sendMessage()}>
{lockChat ? ( {lockChat ? (
<Lock <Lock
className="h-5 w-5 text-ring animate-pulse" className="h-5 w-5 animate-pulse text-ring"
aria-hidden="true" aria-hidden="true"
/> />
) : ( ) : (

4
src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
View file

@ -48,12 +48,12 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
}; };
return ( return (
<div className="codeblock font-sans text-[16px]"> <div className="codeblock font-sans text-[16px]">
<div className="flex items-center justify-between py-1.5 px-4"> <div className="flex items-center justify-between px-4 py-1.5">
<span className="text-xs lowercase text-background">{language}</span> <span className="text-xs lowercase text-background">{language}</span>
<div className="flex items-center"> <div className="flex items-center">
<button <button
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-background" className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-background"
onClick={copyToClipboard} onClick={copyToClipboard}
> >
{isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />} {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}

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

@ -31,58 +31,58 @@ export default function ChatMessage({
return ( return (
<div <div
className={classNames( className={classNames(
"w-full py-2 pl-2 flex", "flex w-full py-2 pl-2",
chat.isSend ? "bg-background " : "bg-input" chat.isSend ? "bg-background " : "bg-input"
)} )}
> >
<div <div
className={classNames( className={classNames(
"rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center" "my-3 flex h-8 w-8 items-center justify-center overflow-hidden rounded-full"
)} )}
> >
{!chat.isSend && ( {!chat.isSend && (
<div className="relative w-8 h-8"> <div className="relative h-8 w-8">
<img <img
className={ className={
"absolute transition-opacity duration-500 scale-150 " + "absolute scale-150 transition-opacity duration-500 " +
(lockChat ? "opacity-100" : "opacity-0") (lockChat ? "opacity-100" : "opacity-0")
} }
src={lastMessage ? AiIcon : AiIconStill} src={lastMessage ? AiIcon : AiIconStill}
/> />
<img <img
className={ className={
"absolute transition-opacity duration-500 scale-150 " + "absolute scale-150 transition-opacity duration-500 " +
(lockChat ? "opacity-0" : "opacity-100") (lockChat ? "opacity-0" : "opacity-100")
} }
src={AiIconStill} src={AiIconStill}
/> />
</div> </div>
)} )}
{chat.isSend && <User2 className="w-6 h-6 -mb-1 text-primary " />} {chat.isSend && <User2 className="-mb-1 h-6 w-6 text-primary " />}
</div> </div>
{!chat.isSend ? ( {!chat.isSend ? (
<div className="w-full text-start flex items-center"> <div className="flex w-full items-center text-start">
<div className="w-full relative text-start inline-block text-muted-foreground text-sm font-normal"> <div className="relative inline-block w-full text-start text-sm font-normal text-muted-foreground">
{hidden && chat.thought && chat.thought !== "" && ( {hidden && chat.thought && chat.thought !== "" && (
<div <div
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
className="absolute -top-1 -left-2 cursor-pointer" className="absolute -left-2 -top-1 cursor-pointer"
> >
<MessageCircle className="w-5 h-5 animate-bounce " /> <MessageCircle className="h-5 w-5 animate-bounce " />
</div> </div>
)} )}
{chat.thought && chat.thought !== "" && !hidden && ( {chat.thought && chat.thought !== "" && !hidden && (
<div <div
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
className=" text-start inline-block rounded-md text-muted-foreground h-full border border-ring className=" ml-3 inline-block h-full w-[95%] cursor-pointer overflow-scroll rounded-md
bg-muted w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll" border border-ring bg-muted px-2 pb-3 pt-3 text-start text-muted-foreground scrollbar-hide"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(convert.toHtml(chat.thought)), __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
}} }}
></div> ></div>
)} )}
{chat.thought && chat.thought !== "" && !hidden && <br></br>} {chat.thought && chat.thought !== "" && !hidden && <br></br>}
<div className="w-full px-4 pb-3 pt-3 pr-8"> <div className="w-full px-4 pb-3 pr-8 pt-3">
<div className="w-full"> <div className="w-full">
<div className="w-full"> <div className="w-full">
<ReactMarkdown <ReactMarkdown
@ -94,7 +94,7 @@ export default function ChatMessage({
if (children.length) { if (children.length) {
if (children[0] == "▍") { if (children[0] == "▍") {
return ( return (
<span className="animate-pulse cursor-default mt-1"> <span className="mt-1 animate-pulse cursor-default">
▍ ▍
</span> </span>
); );
@ -146,8 +146,8 @@ export default function ChatMessage({
</div> </div>
</div> </div>
) : ( ) : (
<div className="w-full flex items-center"> <div className="flex w-full items-center">
<div className="text-start inline-block px-3 text-muted-foreground "> <div className="inline-block px-3 text-start text-muted-foreground ">
{message.split("\n").map((line, index) => ( {message.split("\n").map((line, index) => (
<span key={index} className="text-muted-foreground "> <span key={index} className="text-muted-foreground ">
{line} {line}

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

@ -26,21 +26,21 @@ export default function FileCard({ fileName, content, fileType }) {
if (fileType === "image") { if (fileType === "image") {
return ( return (
<div <div
className="relative w-1/4 h-1/4" className="relative h-1/4 w-1/4"
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
> >
<img <img
src={`data:image/png;base64,${content}`} src={`data:image/png;base64,${content}`}
alt="generated image" alt="generated image"
className="rounded-lg w-full h-full" className="h-full w-full rounded-lg"
/> />
{isHovered && ( {isHovered && (
<div <div
className={`absolute top-0 right-0 bg-muted text-foreground rounded-bl-lg px-1 text-sm font-bold `} className={`absolute right-0 top-0 rounded-bl-lg bg-muted px-1 text-sm font-bold text-foreground `}
> >
<button className="text-ring py-1 px-2 " onClick={handleDownload}> <button className="px-2 py-1 text-ring " onClick={handleDownload}>
<DownloadCloud className="hover:scale-110 w-5 h-5 text-current" /> <DownloadCloud className="h-5 w-5 text-current hover:scale-110" />
</button> </button>
</div> </div>
)} )}
@ -51,25 +51,25 @@ export default function FileCard({ fileName, content, fileType }) {
return ( return (
<button <button
onClick={handleDownload} onClick={handleDownload}
className="bg-muted shadow rounded w-1/2 text-foreground hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-ring" className="flex w-1/2 items-center justify-between rounded border border-ring bg-muted px-2 py-2 text-foreground shadow hover:drop-shadow-lg"
> >
<div className="flex gap-2 text-current items-center w-full mr-2"> <div className="mr-2 flex w-full items-center gap-2 text-current">
{" "} {" "}
{fileType === "image" ? ( {fileType === "image" ? (
<img <img
src={`data:image/png;base64,${content}`} src={`data:image/png;base64,${content}`}
alt="" alt=""
className="w-8 h-8" className="h-8 w-8"
/> />
) : ( ) : (
<File className="w-8 h-8" /> <File className="h-8 w-8" />
)} )}
<div className="flex flex-col items-start"> <div className="flex flex-col items-start">
{" "} {" "}
<div className="truncate text-sm text-current">{fileName}</div> <div className="truncate text-sm text-current">{fileName}</div>
<div className="truncate text-xs text-ring">{fileType}</div> <div className="truncate text-xs text-ring">{fileType}</div>
</div> </div>
<DownloadCloud className="w-6 h-6 text-current ml-auto" /> <DownloadCloud className="ml-auto h-6 w-6 text-current" />
</div> </div>
</button> </button>
); );

36
src/frontend/src/modals/chatModal/index.tsx
View file

@ -205,21 +205,23 @@ export default function ChatModal({
handleOnClose(event); handleOnClose(event);
}; };
newWs.onerror = (ev) => { newWs.onerror = (ev) => {
getHealth().then((res) => { getHealth()
.then((res) => {
if (res.status === 200) { if (res.status === 200) {
connectWS(); connectWS();
} }
}).catch((err) => { })
.catch((err) => {
setErrorData({ setErrorData({
// message when the backend failed // message when the backend failed
title: "The backend is not responding. Please try again later.", title: "The backend is not responding. Please try again later.",
// possible solution list // possible solution list
list: [ list: [
"Check your internet connection.", "Check your internet connection.",
"Check if the backend is running." "Check if the backend is running.",
], ],
}); });
}) });
}; };
ws.current = newWs; ws.current = newWs;
} catch (error) { } catch (error) {
@ -331,7 +333,7 @@ export default function ChatModal({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-black backdrop-blur-sm bg-opacity-80 transition-opacity" /> <div className="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <div className="fixed inset-0 z-10 overflow-y-auto">
@ -345,24 +347,24 @@ export default function ChatModal({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all w-[690px]"> <Dialog.Panel className=" relative flex h-[95%] w-[690px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl drop-shadow-2xl transition-all">
<div className="relative w-full p-4"> <div className="relative w-full p-4">
<button <button
onClick={() => clearChat()} onClick={() => clearChat()}
className="absolute top-2 right-10 hover:text-status-red text-muted-foreground z-30" className="absolute right-10 top-2 z-30 text-muted-foreground hover:text-status-red"
> >
<Eraser className="w-4 h-4" /> <Eraser className="h-4 w-4" />
</button> </button>
<button <button
onClick={() => setModalOpen(false)} onClick={() => setModalOpen(false)}
className="absolute top-1.5 right-2 hover:text-status-red text-muted-foreground z-30" className="absolute right-2 top-1.5 z-30 text-muted-foreground hover:text-status-red"
> >
<X className="w-5 h-5" /> <X className="h-5 w-5" />
</button> </button>
</div> </div>
<div <div
ref={messagesRef} ref={messagesRef}
className="w-full h-full bg-background border-t flex-col flex items-center overflow-scroll scrollbar-hide" className="flex h-full w-full flex-col items-center overflow-scroll border-t bg-background scrollbar-hide"
> >
{chatHistory.length > 0 ? ( {chatHistory.length > 0 ? (
chatHistory.map((c, i) => ( chatHistory.map((c, i) => (
@ -374,19 +376,19 @@ export default function ChatModal({
/> />
)) ))
) : ( ) : (
<div className="flex flex-col h-full text-center justify-center w-full items-center align-middle"> <div className="flex h-full w-full flex-col items-center justify-center text-center align-middle">
<span> <span>
👋{" "} 👋{" "}
<span className="text-muted-foreground text-lg"> <span className="text-lg text-muted-foreground">
LangFlow Chat LangFlow Chat
</span> </span>
</span> </span>
<br /> <br />
<div className="bg-muted rounded-md w-2/4 px-6 py-8 border border-input"> <div className="w-2/4 rounded-md border border-input bg-muted px-6 py-8">
<span className="text-base text-ring"> <span className="text-base text-ring">
Start a conversation and click the agent’s thoughts{" "} Start a conversation and click the agent’s thoughts{" "}
<span> <span>
<MessagesSquare className="w-5 h-5 inline animate-bounce mx-1 " /> <MessagesSquare className="mx-1 inline h-5 w-5 animate-bounce " />
</span>{" "} </span>{" "}
to inspect the chaining process. to inspect the chaining process.
</span> </span>
@ -395,8 +397,8 @@ export default function ChatModal({
)} )}
<div ref={ref}></div> <div ref={ref}></div>
</div> </div>
<div className="w-full bg-background border-t flex-col flex items-center justify-between p-3"> <div className="flex w-full flex-col items-center justify-between border-t bg-background p-3">
<div className="relative w-full mt-1 rounded-md shadow-sm"> <div className="relative mt-1 w-full rounded-md shadow-sm">
<ChatInput <ChatInput
chatValue={chatValue} chatValue={chatValue}
lockChat={lockChat} lockChat={lockChat}

8
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -48,19 +48,19 @@ export default function CodeAreaModal({
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger> <DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[700px] h-[500px]"> <DialogContent className="h-[500px] lg:max-w-[700px]">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Edit Code</span> <span className="pr-2">Edit Code</span>
<TerminalSquare <TerminalSquare
className="h-6 w-6 text-primary pl-1 " className="h-6 w-6 pl-1 text-primary "
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
<DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription> <DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex h-full w-full mt-2"> <div className="mt-2 flex h-full w-full">
<AceEditor <AceEditor
value={code} value={code}
mode="python" mode="python"
@ -74,7 +74,7 @@ export default function CodeAreaModal({
onChange={(value) => { onChange={(value) => {
setCode(value); setCode(value);
}} }}
className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-ring " className="h-[300px] w-full rounded-lg border-[1px] border-ring custom-scroll "
/> />
</div> </div>

20
src/frontend/src/modals/exportModal/index.tsx
View file

@ -23,7 +23,8 @@ export default function ExportModal() {
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);
const { flows, tabId, updateFlow, downloadFlow,saveFlow } = useContext(TabsContext); const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
useContext(TabsContext);
const [isMaxLength, setIsMaxLength] = useState(false); const [isMaxLength, setIsMaxLength] = useState(false);
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
@ -41,12 +42,12 @@ export default function ExportModal() {
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger asChild></DialogTrigger> <DialogTrigger asChild></DialogTrigger>
<DialogContent className="lg:max-w-[600px] h-[420px] "> <DialogContent className="h-[420px] lg:max-w-[600px] ">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Export</span> <span className="pr-2">Export</span>
<Download <Download
className="h-6 w-6 text-foreground pl-1" className="h-6 w-6 pl-1 text-foreground"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
@ -80,9 +81,18 @@ export default function ExportModal() {
<DialogFooter> <DialogFooter>
<Button <Button
onClick={() => { onClick={() => {
if (checked) downloadFlow(flows.find((f) => f.id === tabId),name,description); if (checked)
downloadFlow(
flows.find((f) => f.id === tabId),
name,
description
);
else else
downloadFlow(removeApiKeys(flows.find((f) => f.id === tabId)),name,description); downloadFlow(
removeApiKeys(flows.find((f) => f.id === tabId)),
name,
description
);
closePopUp(); closePopUp();
}} }}

4
src/frontend/src/modals/flowSettingsModal/index.tsx
View file

@ -48,11 +48,11 @@ export default function FlowSettingsModal() {
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger asChild></DialogTrigger> <DialogTrigger asChild></DialogTrigger>
<DialogContent className="lg:max-w-[600px] h-[390px]"> <DialogContent className="h-[390px] lg:max-w-[600px]">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Settings </span> <span className="pr-2">Settings </span>
<Settings2 className="w-4 h-4 mr-2 " /> <Settings2 className="mr-2 h-4 w-4 " />
</DialogTitle> </DialogTitle>
<DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription> <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader> </DialogHeader>

4
src/frontend/src/modals/genericModal/index.tsx
View file

@ -56,7 +56,7 @@ export default function GenericModal({
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span> <span className="pr-2">{myModalTitle}</span>
<FileText <FileText
className="h-6 w-6 text-primary pl-1 " className="h-6 w-6 pl-1 text-primary "
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
@ -76,7 +76,7 @@ export default function GenericModal({
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex h-full w-full mt-2"> <div className="mt-2 flex h-full w-full">
<Textarea <Textarea
ref={ref} ref={ref}
className="form-input h-[300px] w-full rounded-lg border-ring focus-visible:ring-1" className="form-input h-[300px] w-full rounded-lg border-ring focus-visible:ring-1"

10
src/frontend/src/modals/importModal/buttonBox/index.tsx
View file

@ -77,7 +77,7 @@ export default function ButtonBox({
<button disabled={deactivate} onClick={onClick}> <button disabled={deactivate} onClick={onClick}>
<div <div
className={classNames( className={classNames(
"flex flex-col justify-center items-center rounded-lg text-center shadow border border-ring hover:shadow-lg transform hover:scale-105", "flex transform flex-col items-center justify-center rounded-lg border border-ring text-center shadow hover:scale-105 hover:shadow-lg",
bgColor, bgColor,
height, height,
width, width,
@ -85,18 +85,18 @@ export default function ButtonBox({
)} )}
> >
<div <div
className={`flex items-center justify-center ${bigCircle} bg-background/30 rounded-full mb-1`} className={`flex items-center justify-center ${bigCircle} mb-1 rounded-full bg-background/30`}
> >
<div <div
className={`flex items-center justify-center ${smallCircle} bg-background rounded-full`} className={`flex items-center justify-center ${smallCircle} rounded-full bg-background`}
> >
<div className={textColor}>{icon}</div> <div className={textColor}>{icon}</div>
</div> </div>
</div> </div>
<div className="w-full mt-auto mb-auto"> <div className="mb-auto mt-auto w-full">
<h3 <h3
className={classNames( className={classNames(
"w-full font-semibold break-words text-background truncate-multiline", "w-full break-words font-semibold text-background truncate-multiline",
titleFontSize, titleFontSize,
marginTop marginTop
)} )}

20
src/frontend/src/modals/importModal/index.tsx
View file

@ -68,15 +68,15 @@ export default function ImportModal() {
<DialogContent <DialogContent
className={classNames( className={classNames(
showExamples showExamples
? "lg:max-w-[650px] h-[600px]" ? "h-[600px] lg:max-w-[650px]"
: "lg:max-w-[650px] h-[450px]" : "h-[450px] lg:max-w-[650px]"
)} )}
> >
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
{showExamples && ( {showExamples && (
<> <>
<div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block"> <div className="absolute left-0 top-2 z-50 hidden pl-4 pt-4 sm:block">
<button <button
type="button" type="button"
className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
@ -85,7 +85,7 @@ export default function ImportModal() {
}} }}
> >
<ArrowLeftIcon <ArrowLeftIcon
className="h-5 w-5 text-foreground ml-1" className="ml-1 h-5 w-5 text-foreground"
aria-hidden="true" aria-hidden="true"
/> />
</button> </button>
@ -97,7 +97,7 @@ export default function ImportModal() {
{showExamples ? "Select an example" : "Import"} {showExamples ? "Select an example" : "Import"}
</span> </span>
<ArrowUpTrayIcon <ArrowUpTrayIcon
className="h-5 w-5 text-foreground ml-1" className="ml-1 h-5 w-5 text-foreground"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
@ -108,12 +108,12 @@ export default function ImportModal() {
className={classNames( className={classNames(
"h-full w-full overflow-y-auto scrollbar-hide", "h-full w-full overflow-y-auto scrollbar-hide",
showExamples && !loadingExamples showExamples && !loadingExamples
? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto" ? "start mx-auto flex flex-row flex-wrap items-start justify-center overflow-auto"
: "flex flex-row justify-center items-center" : "flex flex-row items-center justify-center"
)} )}
> >
{!showExamples && ( {!showExamples && (
<div className="flex h-full w-full justify-evenly items-center"> <div className="flex h-full w-full items-center justify-evenly">
<ButtonBox <ButtonBox
size="big" size="big"
bgColor="bg-medium-emerald " bgColor="bg-medium-emerald "
@ -145,7 +145,7 @@ export default function ImportModal() {
</div> </div>
)} )}
{showExamples && loadingExamples && ( {showExamples && loadingExamples && (
<div className="flex align-middle justify-center items-center"> <div className="flex items-center justify-center align-middle">
<LoadingComponent remSize={30} /> <LoadingComponent remSize={30} />
</div> </div>
)} )}
@ -175,7 +175,7 @@ export default function ImportModal() {
</div> </div>
<DialogFooter> <DialogFooter>
<div className="w-full flex items-center justify-center mt-2"> <div className="mt-2 flex w-full items-center justify-center">
<a <a
href="https://github.com/logspace-ai/langflow_examples" href="https://github.com/logspace-ai/langflow_examples"
target="_blank" target="_blank"

14
src/frontend/src/modals/promptModal/index.tsx
View file

@ -58,8 +58,8 @@ export default function PromptAreaModal({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8 w-[700px]"> <Dialog.Panel className="relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8">
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block"> <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
<button <button
type="button" type="button"
className="rounded-md text-ring hover:text-ring" className="rounded-md text-ring hover:text-ring"
@ -71,8 +71,8 @@ export default function PromptAreaModal({
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
<div className="h-full w-full flex flex-col justify-center items-center"> <div className="flex h-full w-full flex-col items-center justify-center">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm"> <div className="z-10 flex w-full justify-center pb-4 shadow-sm">
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10"> <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10">
<DocumentTextIcon <DocumentTextIcon
className="h-6 w-6 text-almost-medium-blue" className="h-6 w-6 text-almost-medium-blue"
@ -88,9 +88,9 @@ export default function PromptAreaModal({
</Dialog.Title> </Dialog.Title>
</div> </div>
</div> </div>
<div className="h-full w-full bg-accent overflow-auto p-4 gap-4 flex flex-row justify-center items-center"> <div className="flex h-full w-full flex-row items-center justify-center gap-4 overflow-auto bg-accent p-4">
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-background shadow"> <div className="h-full w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6">
<textarea <textarea
ref={ref} ref={ref}
className="form-input h-full w-full rounded-lg border-ring" className="form-input h-full w-full rounded-lg border-ring"
@ -103,7 +103,7 @@ export default function PromptAreaModal({
</div> </div>
</div> </div>
</div> </div>
<div className="bg-input w-full pb-3 flex flex-row-reverse px-4"> <div className="flex w-full flex-row-reverse bg-input px-4 pb-3">
<button <button
type="button" type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm" className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"

14
src/frontend/src/modals/textAreaModal/index.tsx
View file

@ -57,8 +57,8 @@ export default function TextAreaModal({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8 w-[700px]"> <Dialog.Panel className="relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8">
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block"> <div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
<button <button
type="button" type="button"
className="rounded-md text-ring hover:text-ring" className="rounded-md text-ring hover:text-ring"
@ -70,8 +70,8 @@ export default function TextAreaModal({
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
<div className="h-full w-full flex flex-col justify-center items-center"> <div className="flex h-full w-full flex-col items-center justify-center">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm"> <div className="z-10 flex w-full justify-center pb-4 shadow-sm">
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10"> <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10">
<ClipboardDocumentListIcon <ClipboardDocumentListIcon
className="h-6 w-6 text-almost-medium-blue" className="h-6 w-6 text-almost-medium-blue"
@ -87,9 +87,9 @@ export default function TextAreaModal({
</Dialog.Title> </Dialog.Title>
</div> </div>
</div> </div>
<div className="h-full w-full bg-input p-4 gap-4 flex flex-row justify-center items-center"> <div className="flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4">
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-background shadow"> <div className="w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6">
<textarea <textarea
ref={ref} ref={ref}
className="form-input h-full w-full rounded-lg border-ring" className="form-input h-full w-full rounded-lg border-ring"
@ -102,7 +102,7 @@ export default function TextAreaModal({
</div> </div>
</div> </div>
</div> </div>
<div className="bg-input w-full pb-3 flex flex-row-reverse px-4"> <div className="flex w-full flex-row-reverse bg-input px-4 pb-3">
<button <button
type="button" type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm" className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"

14
src/frontend/src/pages/CommunityPage/index.tsx
View file

@ -37,9 +37,9 @@ export default function CommunityPage() {
handleExamples(); handleExamples();
}, []); }, []);
return ( return (
<div className="w-full h-full flex overflow-auto flex-col bg-muted px-16"> <div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
<div className="w-full flex justify-between py-12 pb-2 px-6"> <div className="flex w-full justify-between px-6 py-12 pb-2">
<span className="text-2xl flex items-center justify-center gap-2 font-semibold"> <span className="flex items-center justify-center gap-2 text-2xl font-semibold">
<Users2 className="w-6" /> <Users2 className="w-6" />
Community Examples Community Examples
</span> </span>
@ -50,18 +50,18 @@ export default function CommunityPage() {
rel="noreferrer" rel="noreferrer"
> >
<Button variant="primary"> <Button variant="primary">
<GithubIcon className="w-4 mr-2" /> <GithubIcon className="mr-2 w-4" />
Add Your Example Add Your Example
</Button> </Button>
</a> </a>
</div> </div>
</div> </div>
<span className="flex pb-8 px-6 w-[70%] text-muted-foreground"> <span className="flex w-[70%] px-6 pb-8 text-muted-foreground">
Discover and learn from shared examples by the LangFlow community. We Discover and learn from shared examples by the LangFlow community. We
welcome new example contributions that can help our community explore welcome new example contributions that can help our community explore
new and powerful features. new and powerful features.
</span> </span>
<div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4"> <div className="grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
{!loadingExamples && {!loadingExamples &&
examples.map((flow, idx) => ( examples.map((flow, idx) => (
<CardComponent <CardComponent
@ -79,7 +79,7 @@ export default function CommunityPage() {
}); });
}} }}
> >
<GitFork className="w-4 mr-2" /> <GitFork className="mr-2 w-4" />
Fork Example Fork Example
</Button> </Button>
} }

2
src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
View file

@ -12,7 +12,7 @@ export default function DisclosureComponent({
{({ open }) => ( {({ open }) => (
<> <>
<div> <div>
<Disclosure.Button className="select-none bg-muted w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input"> <Disclosure.Button className="-mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2">
<div className="flex gap-4"> <div className="flex gap-4">
<Icon strokeWidth={1.5} size={22} className="text-primary " /> <Icon strokeWidth={1.5} size={22} className="text-primary " />
<span className="flex items-center text-sm text-primary"> <span className="flex items-center text-sm text-primary">

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

@ -348,13 +348,13 @@ export default function Page({ flow }: { flow: FlowType }) {
<div className="flex h-full overflow-hidden"> <div className="flex h-full overflow-hidden">
<ExtraSidebar /> <ExtraSidebar />
{/* Main area */} {/* Main area */}
<main className="flex-1 flex"> <main className="flex flex-1">
{/* Primary column */} {/* Primary column */}
<div className="w-full h-full"> <div className="h-full w-full">
<div className="w-full h-full" ref={reactFlowWrapper}> <div className="h-full w-full" ref={reactFlowWrapper}>
{Object.keys(templates).length > 0 && {Object.keys(templates).length > 0 &&
Object.keys(types).length > 0 ? ( Object.keys(types).length > 0 ? (
<div className="w-full h-full"> <div className="h-full w-full">
<ReactFlow <ReactFlow
nodes={nodes} nodes={nodes}
onMove={() => { onMove={() => {
@ -403,8 +403,8 @@ export default function Page({ flow }: { flow: FlowType }) {
> >
<Background className="" /> <Background className="" />
<Controls <Controls
className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border className="bg-muted fill-foreground stroke-foreground text-primary
fill-foreground bg-muted" [&>button]:border-b-border hover:[&>button]:bg-border"
></Controls> ></Controls>
</ReactFlow> </ReactFlow>
<Chat flow={flow} reactFlowInstance={reactFlowInstance} /> <Chat flow={flow} reactFlowInstance={reactFlowInstance} />

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

@ -60,48 +60,48 @@ export default function ExtraSidebar() {
} }
return ( return (
<div className="w-52 flex flex-col overflow-hidden scrollbar-hide h-full border-r"> <div className="flex h-full w-52 flex-col overflow-hidden border-r scrollbar-hide">
<div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center"> <div className="mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2">
<ShadTooltip content="Import" side="top"> <ShadTooltip content="Import" side="top">
<button <button
className="text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out relative inline-flex items-center rounded-md bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted" className="relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
onClick={() => { onClick={() => {
// openPopUp(<ImportModal />); // openPopUp(<ImportModal />);
uploadFlow(); uploadFlow();
}} }}
> >
<FileUp strokeWidth={1.5} className="w-5 h-5 "></FileUp> <FileUp strokeWidth={1.5} className="h-5 w-5 "></FileUp>
</button> </button>
</ShadTooltip> </ShadTooltip>
<ShadTooltip content="Export" side="top"> <ShadTooltip content="Export" side="top">
<button <button
className={classNames( className={classNames(
"text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out relative inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted rounded-md" "relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
)} )}
onClick={(event) => { onClick={(event) => {
openPopUp(<ExportModal />); openPopUp(<ExportModal />);
}} }}
> >
<FileDown strokeWidth={1.5} className="w-5 h-5 "></FileDown> <FileDown strokeWidth={1.5} className="h-5 w-5 "></FileDown>
</button> </button>
</ShadTooltip> </ShadTooltip>
<ShadTooltip content="Code" side="top"> <ShadTooltip content="Code" side="top">
<button <button
className={classNames( className={classNames(
"text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out relative inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted rounded-md" "relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
)} )}
onClick={(event) => { onClick={(event) => {
openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />); openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
}} }}
> >
<Code2 strokeWidth={1.5} className="w-5 h-5 "></Code2> <Code2 strokeWidth={1.5} className="h-5 w-5 "></Code2>
</button> </button>
</ShadTooltip> </ShadTooltip>
<ShadTooltip content="Save" side="top"> <ShadTooltip content="Save" side="top">
<button <button
className="text-foreground w-full justify-center transition-all shadow-sm duration-500 ease-in-out relative inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted rounded-md" className="relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
onClick={(event) => { onClick={(event) => {
saveFlow(flows.find((f) => f.id === tabId)); saveFlow(flows.find((f) => f.id === tabId));
setSuccessData({ title: "Changes saved successfully" }); setSuccessData({ title: "Changes saved successfully" });
@ -111,14 +111,14 @@ export default function ExtraSidebar() {
<Save <Save
strokeWidth={1.5} strokeWidth={1.5}
className={ className={
"w-5 h-5" + (isPending ? " " : " text-muted-foreground") "h-5 w-5" + (isPending ? " " : " text-muted-foreground")
} }
></Save> ></Save>
</button> </button>
</ShadTooltip> </ShadTooltip>
</div> </div>
<Separator /> <Separator />
<div className="relative mt-2 flex items-center mb-2 mx-auto"> <div className="relative mx-auto mb-2 mt-2 flex items-center">
<input <input
type="text" type="text"
name="search" name="search"
@ -126,14 +126,14 @@ export default function ExtraSidebar() {
placeholder="Search" placeholder="Search"
className={ className={
INPUT_STYLE + INPUT_STYLE +
"w-full border rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" "w-full rounded-md border border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
} }
onChange={(e) => { onChange={(e) => {
handleSearchInput(e.target.value); handleSearchInput(e.target.value);
setSearch(e.target.value); setSearch(e.target.value);
}} }}
/> />
<div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center"> <div className="absolute inset-y-0 right-0 flex items-center py-1.5 pr-3">
{/* ! replace hash color here */} {/* ! replace hash color here */}
<Search size={20} strokeWidth={1.5} className="text-primary" /> <Search size={20} strokeWidth={1.5} className="text-primary" />
</div> </div>
@ -152,7 +152,7 @@ export default function ExtraSidebar() {
Icon: nodeIconsLucide[d] ?? nodeIconsLucide.unknown, Icon: nodeIconsLucide[d] ?? nodeIconsLucide.unknown,
}} }}
> >
<div className="p-2 flex flex-col gap-2"> <div className="flex flex-col gap-2 p-2">
{Object.keys(dataFilter[d]) {Object.keys(dataFilter[d])
.sort() .sort()
.map((t: string, k) => ( .map((t: string, k) => (
@ -164,7 +164,7 @@ export default function ExtraSidebar() {
<div key={k} data-tooltip-id={t}> <div key={k} data-tooltip-id={t}>
<div <div
draggable draggable
className={"cursor-grab border-l-8 rounded-l-md"} className={"cursor-grab rounded-l-md border-l-8"}
style={{ style={{
borderLeftColor: borderLeftColor:
nodeColors[d] ?? nodeColors.unknown, nodeColors[d] ?? nodeColors.unknown,
@ -183,11 +183,11 @@ export default function ExtraSidebar() {
); );
}} }}
> >
<div className="flex w-full justify-between text-sm px-3 py-1 bg-background items-center border-dashed border-ring border-l-0 rounded-md rounded-l-none border"> <div className="flex w-full items-center justify-between rounded-md rounded-l-none border border-l-0 border-dashed border-ring bg-background px-3 py-1 text-sm">
<span className="text-foreground w-full pr-1 truncate text-xs"> <span className="w-full truncate pr-1 text-xs text-foreground">
{data[d][t].display_name} {data[d][t].display_name}
</span> </span>
<Menu className="w-4 h-6 text-ring " /> <Menu className="h-6 w-4 text-ring " />
</div> </div>
</div> </div>
</div> </div>

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

@ -28,23 +28,23 @@ const NodeToolbarComponent = (props) => {
const reactFlowInstance = useReactFlow(); const reactFlowInstance = useReactFlow();
return ( return (
<> <>
<div className="h-10 w-26"> <div className="w-26 h-10">
<span className="isolate inline-flex rounded-md shadow-sm"> <span className="isolate inline-flex rounded-md shadow-sm">
<ShadTooltip content="Delete" side="top"> <ShadTooltip content="Delete" side="top">
<button <button
className="text-foreground transition-all duration-500 ease-in-out shadow-md relative inline-flex items-center rounded-l-md bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10" className="relative inline-flex items-center rounded-l-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
onClick={() => { onClick={() => {
props.deleteNode(props.data.id); props.deleteNode(props.data.id);
}} }}
> >
<Trash2 className="w-4 h-4"></Trash2> <Trash2 className="h-4 w-4"></Trash2>
</button> </button>
</ShadTooltip> </ShadTooltip>
<ShadTooltip content="Duplicate" side="top"> <ShadTooltip content="Duplicate" side="top">
<button <button
className={classNames( className={classNames(
"text-foreground 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-ring hover:bg-muted focus:z-10" "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
)} )}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@ -63,7 +63,7 @@ const NodeToolbarComponent = (props) => {
); );
}} }}
> >
<Copy className="w-4 h-4"></Copy> <Copy className="h-4 w-4"></Copy>
</button> </button>
</ShadTooltip> </ShadTooltip>
@ -77,7 +77,7 @@ const NodeToolbarComponent = (props) => {
> >
<a <a
className={classNames( className={classNames(
"text-foreground 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-ring hover:bg-muted focus:z-10" + "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(props.data.node.documentation === "" (props.data.node.documentation === ""
? " text-muted-foreground" ? " text-muted-foreground"
: " text-foreground") : " text-foreground")
@ -92,14 +92,14 @@ const NodeToolbarComponent = (props) => {
} }
}} }}
> >
<FileText className="w-4 h-4 "></FileText> <FileText className="h-4 w-4 "></FileText>
</a> </a>
</ShadTooltip> </ShadTooltip>
<ShadTooltip content="Edit" side="top"> <ShadTooltip content="Edit" side="top">
<button <button
className={classNames( className={classNames(
"text-foreground 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-ring hover:bg-muted focus:z-10 rounded-r-md" + "relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(nodeLength == 0 (nodeLength == 0
? " text-muted-foreground" ? " text-muted-foreground"
: " text-foreground") : " text-foreground")
@ -112,7 +112,7 @@ const NodeToolbarComponent = (props) => {
props.openPopUp(<EditNodeModal data={props.data} />); props.openPopUp(<EditNodeModal data={props.data} />);
}} }}
> >
<Settings2 className="w-4 h-4 "></Settings2> <Settings2 className="h-4 w-4 "></Settings2>
</button> </button>
</ShadTooltip> </ShadTooltip>

2
src/frontend/src/pages/FlowPage/index.tsx
View file

@ -29,7 +29,7 @@ export default function FlowPage() {
<a <a
target={"_blank"} target={"_blank"}
href="https://logspace.ai/" href="https://logspace.ai/"
className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12" className="absolute bottom-2 left-7 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12"
> >
{version && <div className="mt-1">⛓️ LangFlow v{version}</div>} {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
<div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div> <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>

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

@ -14,9 +14,9 @@ export default function HomePage() {
}, []); }, []);
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<div className="w-full h-full flex overflow-auto flex-col bg-muted px-16"> <div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
<div className="w-full flex justify-between py-12 pb-2 px-6"> <div className="flex w-full justify-between px-6 py-12 pb-2">
<span className="text-2xl flex items-center justify-center gap-2 font-semibold"> <span className="flex items-center justify-center gap-2 text-2xl font-semibold">
<Home className="w-6" /> <Home className="w-6" />
{USER_PROJECTS_HEADER} {USER_PROJECTS_HEADER}
</span> </span>
@ -27,7 +27,7 @@ export default function HomePage() {
downloadFlows(); downloadFlows();
}} }}
> >
<Download className="w-4 mr-2" /> <Download className="mr-2 w-4" />
Download Collection Download Collection
</Button> </Button>
<Button <Button
@ -36,7 +36,7 @@ export default function HomePage() {
uploadFlows(); uploadFlows();
}} }}
> >
<Upload className="w-4 mr-2" /> <Upload className="mr-2 w-4" />
Upload Collection Upload Collection
</Button> </Button>
<Button <Button
@ -47,15 +47,15 @@ export default function HomePage() {
}); });
}} }}
> >
<Plus className="w-4 mr-2" /> <Plus className="mr-2 w-4" />
New Project New Project
</Button> </Button>
</div> </div>
</div> </div>
<span className="flex pb-14 px-6 text-muted-foreground w-[60%]"> <span className="flex w-[60%] px-6 pb-14 text-muted-foreground">
Manage your personal projects. Download or upload your collection. Manage your personal projects. Download or upload your collection.
</span> </span>
<div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4"> <div className="grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
{flows.map((flow, idx) => ( {flows.map((flow, idx) => (
<CardComponent <CardComponent
key={idx} key={idx}
@ -68,7 +68,7 @@ export default function HomePage() {
size="sm" size="sm"
className="whitespace-nowrap " className="whitespace-nowrap "
> >
<ExternalLink className="w-4 mr-2" /> <ExternalLink className="mr-2 w-4" />
Edit Flow Edit Flow
</Button> </Button>
</Link> </Link>

6
src/frontend/src/types/tabs/index.ts
View file

@ -11,7 +11,11 @@ export type TabsContextType = {
addFlow: (flowData?: FlowType, newProject?: boolean) => Promise<String>; addFlow: (flowData?: FlowType, newProject?: boolean) => Promise<String>;
updateFlow: (newFlow: FlowType) => void; updateFlow: (newFlow: FlowType) => void;
incrementNodeId: () => string; incrementNodeId: () => string;
downloadFlow: (flow: FlowType,flowName:string,flowDescription?:string) => void; downloadFlow: (
flow: FlowType,
flowName: string,
flowDescription?: string
) => void;
downloadFlows: () => void; downloadFlows: () => void;
uploadFlows: () => void; uploadFlows: () => void;
uploadFlow: (newFlow?: boolean) => void; uploadFlow: (newFlow?: boolean) => void;