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

formatting code

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-30 20:24:19 -03:00
commit 5916a76d0d
59 changed files with 325 additions and 329 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/backend/langflow/graph/edge/base.py
View file

@ -27,11 +27,7 @@ class Edge:
# Get what type of input the target node is expecting
self.matched_type = next(
(
output
for output in self.source_types
if output in self.target_reqs
),
(output for output in self.source_types if output in self.target_reqs),
None,
)
no_matched_type = self.matched_type is None

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

@ -103,7 +103,7 @@ export default function App() {
return (
//need parent component with width and height
<div className="h-full flex flex-col">
<div className="flex h-full flex-col">
<ErrorBoundary
onReset={() => {
window.localStorage.removeItem("tabsData");
@ -118,7 +118,7 @@ export default function App() {
</ErrorBoundary>
<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 }}
>
{alertsList.map((alert) => (

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

@ -86,7 +86,7 @@ export default function ParameterComponent({
<span
key={getRandomKeyByssmm()}
className={classNames(
i > 0 ? "items-center flex mt-3" : "items-center flex"
i > 0 ? "mt-3 flex items-center" : "flex items-center"
)}
>
<div
@ -123,10 +123,10 @@ export default function ParameterComponent({
return (
<div
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 className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
<div className={"w-full truncate text-sm " + (left ? "" : "text-end")}>
{title}
<span className="text-destructive">{required ? " *" : ""}</span>
</div>
@ -155,7 +155,7 @@ export default function ParameterComponent({
}
className={classNames(
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={{
borderColor: color,
@ -220,7 +220,7 @@ export default function ParameterComponent({
) : left === true &&
type === "str" &&
data.node.template[name].options ? (
<div className="w-full mt-2">
<div className="mt-2 w-full">
<Dropdown
options={data.node.template[name].options}
onSelect={handleOnNewValue}

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

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

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

@ -25,14 +25,14 @@ export default function SingleAlert({
>
{type === "error" ? (
<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}
>
<div className="flex-shrink-0">
<XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
</div>
<div className="ml-3">
<h3 className="text-sm break-words font-medium text-error-foreground">
<h3 className="break-words text-sm font-medium text-error-foreground">
{dropItem.title}
</h3>
{dropItem.list ? (
@ -72,17 +72,17 @@ export default function SingleAlert({
</div>
) : type === "notice" ? (
<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}
>
<div className="flex-shrink-0">
<Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-info-foreground font-medium">
<p className="text-sm font-medium text-info-foreground">
{dropItem.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">
{dropItem.link ? (
<Link
to={dropItem.link}
@ -118,7 +118,7 @@ export default function SingleAlert({
</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}
>
<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 (
<div
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
<div className="flex gap-3 pr-3 ">
<button
@ -36,7 +36,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
setTimeout(clearNotificationList, 100);
}}
>
<Trash2 className="w-[1.1rem] h-[1.1rem]" />
<Trash2 className="h-[1.1rem] w-[1.1rem]" />
</button>
<button
className="text-foreground hover:text-status-red"
@ -46,7 +46,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
</button>
</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.map((alertItem, index) => (
<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
</div>
)}

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

@ -39,7 +39,7 @@ export default function ErrorAlert({
removeAlert(id);
}, 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-shrink-0">

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

@ -36,7 +36,7 @@ export default function NoticeAlert({
setShow(false);
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-shrink-0">
@ -44,7 +44,7 @@ export default function NoticeAlert({
</div>
<div className="ml-3 flex-1 md:flex md:justify-between">
<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
to={link}

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

@ -34,7 +34,7 @@ export default function SuccessAlert({
setShow(false);
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-shrink-0">

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

@ -1,11 +1,11 @@
export default function CrashErrorComponent({ error, resetErrorBoundary }) {
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="bg-background max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly">
<h1 className="text-status-red text-3xl mb-4">
<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="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="mb-4 text-3xl text-status-red">
Oops! An unknown error has occurred.
</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
application's state. If the error persists, please create an issue on
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">
<button
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
</button>
@ -22,7 +22,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
href="https://github.com/logspace-ai/langflow/issues/new"
target="_blank"
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
</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">
<span className="font-medium">Name</span>{" "}
{isMaxLength && (
<span className="text-status-red animate-pulse ml-10">
<span className="ml-10 animate-pulse text-status-red">
Character limit reached
</span>
)}
@ -71,7 +71,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
onChange={handleDescriptionChange}
value={description ?? ""}
placeholder="Flow description"
className="max-h-[100px] mt-2 font-normal"
className="mt-2 max-h-[100px] font-normal"
rows={3}
/>
</Label>

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

@ -18,10 +18,10 @@ export default function ExtraSidebar() {
<aside
className={` ${
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 flex-grow flex-col w-full">
<div className="flex h-full w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide">
<div className="flex w-full flex-grow flex-col">
{extraNavigation.options ? (
<div className="p-4">
<nav className="flex-1 space-y-1">
@ -34,7 +34,7 @@ export default function ExtraSidebar() {
item.href.split("/")[2] === current[4]
? "bg-muted 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
@ -42,7 +42,7 @@ export default function ExtraSidebar() {
item.href.split("/")[2] === current[4]
? "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}
@ -61,7 +61,7 @@ export default function ExtraSidebar() {
item.href.split("/")[2] === current[4]
? "bg-muted 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
@ -71,8 +71,8 @@ export default function ExtraSidebar() {
<span className="flex-1">{item.name}</span>
<svg
className={classNames(
open ? "text-ring rotate-90" : "text-ring",
"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-ring"
open ? "rotate-90 text-ring" : "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"
aria-hidden="true"

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

@ -37,7 +37,7 @@ const TooltipReact: FC<TooltipProps> = ({
id={selector}
content={content}
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
)}
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">
<span
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]
}
></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}
</span>
{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>
)}
</CardTitle>
<CardDescription className="pt-2 pb-2">
<CardDescription className="pb-2 pt-2">
<div className="truncate-doubleline">
{flow.description}
{/* {flow.description} */}
@ -53,7 +53,7 @@ export const CardComponent = ({
</CardHeader>
<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">
{/* <Badge variant="secondary">Agent</Badge>
<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={`${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={() => {
handleBuild(flow);
}}
@ -166,7 +166,7 @@ export default function BuildTrigger({
onMouseLeave={handleMouseLeave}
>
<button>
<div className="flex gap-3 items-center">
<div className="flex items-center gap-3">
{isBuilding && progress < 1 ? (
// Render your loading animation here when isBuilding is true
<RadialProgressComponent
@ -177,7 +177,7 @@ export default function BuildTrigger({
) : isBuilding ? (
<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>
</button>

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

@ -13,21 +13,21 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
<div className="w-full text-start">
<div
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 !== "" && (
<div
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>
)}
{chat.thought && chat.thought !== "" && !hidden && (
<div
onClick={() => setHidden((prev) => !prev)}
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={{
__html: convert.toHtml(chat.thought),
}}
@ -35,7 +35,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
)}
{chat.thought && chat.thought !== "" && !hidden && <br></br>}
<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"] }}
>
{chat.message}
@ -44,7 +44,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
</div>
) : (
<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}
</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="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="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={handleClick}
>
<button>
<div className="flex gap-3">
<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" }}
strokeWidth={1.5}
/>

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

@ -3,7 +3,12 @@ import { PopUpContext } from "../../contexts/popUpContext";
import CodeAreaModal from "../../modals/codeAreaModal";
import TextAreaModal from "../../modals/textAreaModal";
import { TextAreaComponentType } from "../../types/components";
import { INPUT_DIALOG, INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
import {
INPUT_DIALOG,
INPUT_DISABLE,
INPUT_EDIT_NODE,
INPUT_STYLE,
} from "../../constants";
import { ExternalLink } from "lucide-react";
export default function CodeAreaComponent({
@ -28,10 +33,10 @@ export default function CodeAreaComponent({
return (
<div
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
onClick={() => {
openPopUp(
@ -46,11 +51,8 @@ export default function CodeAreaComponent({
}}
className={
editNode
? INPUT_EDIT_NODE +
INPUT_DIALOG
:
INPUT_STYLE + INPUT_DIALOG +
(disabled ? INPUT_DISABLE : "")
? INPUT_EDIT_NODE + INPUT_DIALOG
: INPUT_STYLE + INPUT_DIALOG + (disabled ? INPUT_DISABLE : "")
}
>
{myValue !== "" ? myValue : "Type something..."}
@ -69,7 +71,7 @@ export default function CodeAreaComponent({
}}
>
{!editNode && (
<ExternalLink className="w-6 h-6 hover:text-ring ml-3" />
<ExternalLink className="ml-3 h-6 w-6 hover:text-ring" />
)}
</button>
</div>

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

@ -34,13 +34,11 @@ export default function Dropdown({
<Listbox.Button
className={
editNode
? "relative pr-8 border-1" + INPUT_EDIT_NODE
: "py-2 pl-3 pr-10 text-left" +
INPUT_STYLE
? "border-1 relative pr-8" + INPUT_EDIT_NODE
: "py-2 pl-3 pr-10 text-left" + INPUT_STYLE
}
>
<span className="block bg-background truncate w-full">
<span className="block w-full truncate bg-background">
{internalValue}
</span>
<span
@ -65,8 +63,8 @@ export default function Dropdown({
<Listbox.Options
className={
editNode
? "absolute 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]"
: "nowheel absolute 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 "
? "absolute 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 overflow-y absolute 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 "
}
>
{options.map((option, id) => (

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

@ -57,8 +57,7 @@ export default function FloatComponent({
className={
editNode
? INPUT_EDIT_NODE
: INPUT_STYLE +
(disabled ? INPUT_DISABLE : "")
: INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
}
placeholder={
editNode ? "Number 0 to 1" : "Type a number from zero to one"

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);
return (
<div className="flex gap-2 items-center">
<div className="flex items-center gap-2">
<Link to="/">
<ChevronLeft className="w-4" />
</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>
<DropdownMenuTrigger asChild>
<Button
className="gap-2 flex items-center max-w-[200px]"
className="flex max-w-[200px] items-center gap-2"
variant="primary"
size="sm"
>
<div className="truncate flex-1">{current_flow.name}</div>
<ChevronDown className="w-4 h-4" />
<div className="flex-1 truncate">{current_flow.name}</div>
<ChevronDown className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-44">
@ -71,7 +71,7 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Plus className="w-4 h-4 mr-2" />
<Plus className="mr-2 h-4 w-4" />
New
</DropdownMenuItem>
<DropdownMenuItem
@ -80,7 +80,7 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Settings2 className="w-4 h-4 mr-2 " />
<Settings2 className="mr-2 h-4 w-4 " />
Settings
</DropdownMenuItem>
<DropdownMenuItem
@ -89,7 +89,7 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Undo className="w-4 h-4 mr-2 " />
<Undo className="mr-2 h-4 w-4 " />
Undo
</DropdownMenuItem>
<DropdownMenuItem
@ -98,7 +98,7 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Redo className="w-4 h-4 mr-2 " />
<Redo className="mr-2 h-4 w-4 " />
Redo
</DropdownMenuItem>
<DropdownMenuSeparator />

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

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

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

@ -33,7 +33,7 @@ export default function InputComponent({
<div
className={
disabled
? "relative pointer-events-none cursor-not-allowed"
? "pointer-events-none relative cursor-not-allowed"
: "relative"
}
>
@ -49,9 +49,7 @@ export default function InputComponent({
" pr-12 ",
disabled ? INPUT_DISABLE : "",
password && !pwdVisible && myValue !== "" ? "password" : "",
editNode
? INPUT_EDIT_NODE
: INPUT_STYLE,
editNode ? INPUT_EDIT_NODE : INPUT_STYLE,
password && editNode ? "pr-8" : "pr-3"
)}
placeholder={password && editNode ? "Key" : "Type something..."}
@ -64,7 +62,7 @@ export default function InputComponent({
<button
className={classNames(
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"
)}
onClick={() => {
@ -81,8 +79,8 @@ export default function InputComponent({
stroke="currentColor"
className={classNames(
editNode
? "w-5 h-5 absolute bottom-0.5 right-2"
: "w-5 h-5 absolute bottom-2 right-3"
? "absolute bottom-0.5 right-2 h-5 w-5"
: "absolute bottom-2 right-3 h-5 w-5"
)}
>
<path
@ -100,8 +98,8 @@ export default function InputComponent({
stroke="currentColor"
className={classNames(
editNode
? "w-5 h-5 absolute bottom-0.5 right-2"
: "w-5 h-5 absolute bottom-2 right-3"
? "absolute bottom-0.5 right-2 h-5 w-5"
: "absolute bottom-2 right-3 h-5 w-5"
)}
>
<path

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

@ -95,29 +95,26 @@ export default function InputFileComponent({
return (
<div
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 gap-2">
<div className="flex w-full items-center gap-2">
<span
onClick={handleButtonClick}
className={
editNode
? INPUT_EDIT_NODE +
INPUT_STYLE
:
INPUT_STYLE +
(disabled ? INPUT_DISABLE : "")
? INPUT_EDIT_NODE + INPUT_STYLE
: INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
}
>
{myValue !== "" ? myValue : "No file"}
</span>
<button onClick={handleButtonClick}>
{!editNode && !loading && (
<FileSearch2 className="w-6 h-6 hover:text-ring" />
<FileSearch2 className="h-6 w-6 hover:text-ring" />
)}
{!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>
</div>

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

@ -28,14 +28,15 @@ export default function InputListComponent({
>
{inputList.map((i, idx) => {
return (
<div key={idx} className="w-full flex gap-3">
<div key={idx} className="flex w-full gap-3">
<input
type="text"
value={i}
className={editNode
? INPUT_EDIT_NODE
: INPUT_STYLE +
(disabled ? INPUT_DISABLE : "")}
className={
editNode
? INPUT_EDIT_NODE
: INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
}
placeholder="Type something..."
onChange={(e) => {
setInputList((old) => {
@ -44,7 +45,8 @@ export default function InputListComponent({
return newInputList;
});
onChange(inputList);
} } />
}}
/>
{idx === inputList.length - 1 ? (
<button
onClick={() => {
@ -54,9 +56,9 @@ export default function InputListComponent({
return newInputList;
});
onChange(inputList);
} }
}}
>
<Plus className={"w-4 h-4 hover:text-ring"} />
<Plus className={"h-4 w-4 hover:text-ring"} />
</button>
) : (
<button
@ -67,9 +69,9 @@ export default function InputListComponent({
return newInputList;
});
onChange(inputList);
} }
}}
>
<X className="w-4 h-4 hover:text-status-red" />
<X className="h-4 w-4 hover:text-status-red" />
</button>
)}
</div>

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

@ -30,7 +30,7 @@ export default function IntComponent({
<div
className={
"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
@ -71,9 +71,7 @@ export default function IntComponent({
className={
editNode
? INPUT_EDIT_NODE
:
INPUT_STYLE +
(disabled ? INPUT_DISABLE : "")
: INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
}
placeholder={editNode ? "Integer number" : "Type an integer number"}
onChange={(e) => {

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

@ -4,10 +4,10 @@ type LoadingComponentProps = {
export default function LoadingComponent({ remSize }: LoadingComponentProps) {
return (
<div role="status" className="w-min m-auto">
<div role="status" className="m-auto w-min">
<svg
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"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -22,7 +22,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
/>
</svg>
<br></br>
<span className="animate-pulse text-almost-medium-blue text-lg">
<span className="animate-pulse text-lg text-almost-medium-blue">
Loading...
</span>
</div>

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

@ -3,7 +3,12 @@ import { PopUpContext } from "../../contexts/popUpContext";
import { TextAreaComponentType } from "../../types/components";
import GenericModal from "../../modals/genericModal";
import { TypeModal } from "../../utils";
import { INPUT_DIALOG, INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
import {
INPUT_DIALOG,
INPUT_DISABLE,
INPUT_EDIT_NODE,
INPUT_STYLE,
} from "../../constants";
import { ExternalLink } from "lucide-react";
export default function PromptAreaComponent({
@ -28,10 +33,10 @@ export default function PromptAreaComponent({
return (
<div
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 gap-3">
<div className="flex w-full items-center gap-3">
<span
onClick={() => {
openPopUp(
@ -50,8 +55,7 @@ export default function PromptAreaComponent({
className={
editNode
? INPUT_EDIT_NODE + INPUT_DIALOG
:
(disabled ? INPUT_DISABLE : "") + INPUT_STYLE + INPUT_DIALOG
: (disabled ? INPUT_DISABLE : "") + INPUT_STYLE + INPUT_DIALOG
}
>
{myValue !== "" ? myValue : "Type your prompt here"}
@ -72,7 +76,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>
</div>
</div>

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

@ -3,7 +3,12 @@ import { PopUpContext } from "../../contexts/popUpContext";
import { TextAreaComponentType } from "../../types/components";
import GenericModal from "../../modals/genericModal";
import { TypeModal } from "../../utils";
import { INPUT_DIALOG, INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
import {
INPUT_DIALOG,
INPUT_DISABLE,
INPUT_EDIT_NODE,
INPUT_STYLE,
} from "../../constants";
import { ExternalLink } from "lucide-react";
export default function TextAreaComponent({
@ -31,8 +36,8 @@ export default function TextAreaComponent({
<div
className={
editNode
? "w-full flex items-center"
: "w-full flex items-center gap-3"
? "flex w-full items-center"
: "flex w-full items-center gap-3"
}
>
<span
@ -53,8 +58,7 @@ export default function TextAreaComponent({
className={
editNode
? INPUT_EDIT_NODE + INPUT_DIALOG
: INPUT_DIALOG + "px-3 py-2" +
(disabled ? INPUT_DISABLE : "")
: INPUT_DIALOG + "px-3 py-2" + (disabled ? INPUT_DISABLE : "")
}
>
{myValue !== "" ? myValue : "Type something..."}
@ -75,7 +79,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>
</div>
</div>

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

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

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

@ -8,7 +8,7 @@ const Card = React.forwardRef<
<div
ref={ref}
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
)}
{...props}

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

@ -146,7 +146,7 @@ const DropdownMenuLabel = React.forwardRef<
<DropdownMenuPrimitive.Label
ref={ref}
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",
className
)}

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

@ -57,7 +57,7 @@ export default function RenameLabel(props) {
ref={inputRef}
onInput={resizeInput}
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
)}
onBlur={() => {
@ -74,7 +74,7 @@ export default function RenameLabel(props) {
) : (
<div className="flex items-center gap-2">
<span
className={cn("px-2 text-left truncate", props.className)}
className={cn("truncate px-2 text-left", props.className)}
onDoubleClick={() => {
setIsRename(true);
setMyValue(props.value);

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

@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger
ref={ref}
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
)}
{...props}

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

@ -154,7 +154,7 @@ export const INPUT_DIALOG = " text-ring cursor-pointer bg-transparent";
* @constant
*/
export const INPUT_STYLE =
" px-3 bg-background focus:tw-ring-none focus-visible:outline-none focus:ring-ring focus:outline-none rounded-md block w-full truncate form-input border-ring shadow-sm sm:text-sm focus:placeholder-transparent placeholder:text-muted-foreground ";
" bg-background block border-ring focus:outline-none focus:placeholder-transparent focus:ring-ring focus:tw-ring-none focus:visible:outline-none form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full ";
/**
* The base input on edit node

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

@ -83,18 +83,18 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[580px]">
<DialogContent className="h-[580px] sm:max-w-[600px] lg:max-w-[800px]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Code</span>
<Code2 className="h-6 w-6 text-primary pl-1 " aria-hidden="true" />
<Code2 className="h-6 w-6 pl-1 text-primary " aria-hidden="true" />
</DialogTitle>
<DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
</DialogHeader>
<Tabs
defaultValue={"0"}
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) => setActiveTab(value)}
>
<div className="flex items-center justify-between px-2">
@ -107,7 +107,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</TabsList>
<div className="float-right">
<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}
>
{isCopied ? <Check size={18} /> : <Clipboard size={15} />}
@ -119,7 +119,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{tabs.map((tab, index) => (
<TabsContent
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"
>
<SyntaxHighlighter
className="h-[400px] w-full overflow-auto"

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

@ -90,7 +90,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
<DialogDescription>
{data.node?.description}
<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 ">
Parameters
</span>
@ -98,25 +98,25 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
</DialogDescription>
</DialogHeader>
<div className="flex w-full max-h-[350px] h-fit">
<div className="flex h-fit max-h-[350px] w-full">
<div
className={classNames(
"w-full rounded-lg bg-background border-[1px] border-input",
"w-full rounded-lg border-[1px] border-input bg-background",
nodeLength > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden"
)}
>
{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">
<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="">
<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
</TableHead>
<TableHead className="text-center h-7">SHOW</TableHead>
<TableHead className="h-7 text-center">SHOW</TableHead>
</TableRow>
</TableHeader>
<TableBody className="p-0">
@ -135,12 +135,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
)
.map((n, i) => (
<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].display_name}
</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].options ? (
<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 (
<div
className={classNames(
"flex flex-row w-full items-center justify-between",
"flex w-full flex-row items-center justify-between",
display ? "" : "hidden",
Object.keys(data.node.template).filter(
(t) =>

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

@ -60,8 +60,8 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
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]">
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<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=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
<button
type="button"
className="rounded-md text-ring hover:text-ring"
@ -73,11 +73,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
<X className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="h-full w-full flex flex-col justify-center items-center">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
<div className="flex h-full w-full flex-col items-center justify-center">
<div className="z-10 flex w-full justify-center pb-4 shadow-sm">
<Icon
strokeWidth={1.5}
className="w-10 mt-4 h-10 p-1 rounded"
className="mt-4 h-10 w-10 rounded p-1"
style={{
color:
nodeColors[types[data.type]] ?? nodeColors.unknown,
@ -92,11 +92,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
</Dialog.Title>
</div>
</div>
<div className="h-full w-full bg-input p-4 gap-4 flex flex-row justify-center items-center">
<div className="flex w-full h-[445px]">
<div className="flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4">
<div className="flex h-[445px] w-full">
<div
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(
(t) =>
t.charAt(0) !== "_" &&
@ -107,7 +107,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
: "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)
.filter(
(t) =>
@ -145,7 +145,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
</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
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"

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

@ -53,7 +53,7 @@ export default function ChatInput({
lockChat
? " bg-input 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
)}
placeholder={"Send a message..."}
@ -62,7 +62,7 @@ export default function ChatInput({
<button disabled={lockChat} onClick={() => sendMessage()}>
{lockChat ? (
<Lock
className="h-5 w-5 text-ring animate-pulse"
className="h-5 w-5 animate-pulse text-ring"
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 (
<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>
<div className="flex items-center">
<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}
>
{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 (
<div
className={classNames(
"w-full py-2 pl-2 flex",
"flex w-full py-2 pl-2",
chat.isSend ? "bg-background " : "bg-input"
)}
>
<div
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 && (
<div className="relative w-8 h-8">
<div className="relative h-8 w-8">
<img
className={
"absolute transition-opacity duration-500 scale-150 " +
"absolute scale-150 transition-opacity duration-500 " +
(lockChat ? "opacity-100" : "opacity-0")
}
src={lastMessage ? AiIcon : AiIconStill}
/>
<img
className={
"absolute transition-opacity duration-500 scale-150 " +
"absolute scale-150 transition-opacity duration-500 " +
(lockChat ? "opacity-0" : "opacity-100")
}
src={AiIconStill}
/>
</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>
{!chat.isSend ? (
<div className="w-full text-start flex items-center">
<div className="w-full relative text-start inline-block text-muted-foreground text-sm font-normal">
<div className="flex w-full items-center text-start">
<div className="relative inline-block w-full text-start text-sm font-normal text-muted-foreground">
{hidden && chat.thought && chat.thought !== "" && (
<div
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>
)}
{chat.thought && chat.thought !== "" && !hidden && (
<div
onClick={() => setHidden((prev) => !prev)}
className=" text-start inline-block rounded-md text-muted-foreground h-full border border-ring
bg-muted w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
className=" ml-3 inline-block h-full w-[95%] cursor-pointer overflow-scroll rounded-md
border border-ring bg-muted px-2 pb-3 pt-3 text-start text-muted-foreground scrollbar-hide"
dangerouslySetInnerHTML={{
__html: convert.toHtml(chat.thought),
}}
></div>
)}
{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">
<ReactMarkdown
@ -94,7 +94,7 @@ export default function ChatMessage({
if (children.length) {
if (children[0] == "▍") {
return (
<span className="animate-pulse cursor-default mt-1">
<span className="mt-1 animate-pulse cursor-default">
▍
</span>
);
@ -146,8 +146,8 @@ export default function ChatMessage({
</div>
</div>
) : (
<div className="w-full flex items-center">
<div className="text-start inline-block px-3 text-muted-foreground ">
<div className="flex w-full items-center">
<div className="inline-block px-3 text-start text-muted-foreground ">
<span
className="text-muted-foreground "
dangerouslySetInnerHTML={{

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") {
return (
<div
className="relative w-1/4 h-1/4"
className="relative h-1/4 w-1/4"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<img
src={`data:image/png;base64,${content}`}
alt="generated image"
className="rounded-lg w-full h-full"
className="h-full w-full rounded-lg"
/>
{isHovered && (
<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}>
<DownloadCloud className="hover:scale-110 w-5 h-5 text-current" />
<button className="px-2 py-1 text-ring " onClick={handleDownload}>
<DownloadCloud className="h-5 w-5 text-current hover:scale-110" />
</button>
</div>
)}
@ -51,25 +51,25 @@ export default function FileCard({ fileName, content, fileType }) {
return (
<button
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" ? (
<img
src={`data:image/png;base64,${content}`}
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="truncate text-sm text-current">{fileName}</div>
<div className="truncate text-xs text-ring">{fileType}</div>
</div>
<DownloadCloud className="w-6 h-6 text-current ml-auto" />
<DownloadCloud className="ml-auto h-6 w-6 text-current" />
</div>
</button>
);

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

@ -330,7 +330,7 @@ export default function ChatModal({
leaveFrom="opacity-100"
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>
<div className="fixed inset-0 z-10 overflow-y-auto">
@ -344,24 +344,24 @@ export default function ChatModal({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
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">
<button
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
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>
</div>
<div
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.map((c, i) => (
@ -373,19 +373,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 className="text-muted-foreground text-lg">
<span className="text-lg text-muted-foreground">
LangFlow Chat
</span>
</span>
<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">
Start a conversation and click the agent’s thoughts{" "}
<span>
<MessagesSquare className="w-5 h-5 inline animate-bounce mx-1 " />
<MessagesSquare className="mx-1 inline h-5 w-5 animate-bounce " />
</span>{" "}
to inspect the chaining process.
</span>
@ -394,8 +394,8 @@ export default function ChatModal({
)}
<div ref={ref}></div>
</div>
<div className="w-full bg-background border-t flex-col flex items-center justify-between p-3">
<div className="relative w-full mt-1 rounded-md shadow-sm">
<div className="flex w-full flex-col items-center justify-between border-t bg-background p-3">
<div className="relative mt-1 w-full rounded-md shadow-sm">
<ChatInput
chatValue={chatValue}
lockChat={lockChat}

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

@ -47,19 +47,19 @@ export default function CodeAreaModal({
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[700px] h-[500px]">
<DialogContent className="h-[500px] lg:max-w-[700px]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Edit Code</span>
<TerminalSquare
className="h-6 w-6 text-primary pl-1 "
className="h-6 w-6 pl-1 text-primary "
aria-hidden="true"
/>
</DialogTitle>
<DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader>
<div className="flex h-full w-full mt-2">
<div className="mt-2 flex h-full w-full">
<AceEditor
value={code}
mode="python"
@ -73,7 +73,7 @@ export default function CodeAreaModal({
onChange={(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>

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

@ -41,12 +41,12 @@ export default function ExportModal() {
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger asChild></DialogTrigger>
<DialogContent className="lg:max-w-[600px] h-[420px] ">
<DialogContent className="h-[420px] lg:max-w-[600px] ">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Export</span>
<Download
className="h-6 w-6 text-foreground pl-1"
className="h-6 w-6 pl-1 text-foreground"
aria-hidden="true"
/>
</DialogTitle>

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

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

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

@ -55,7 +55,7 @@ export default function GenericModal({
<DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span>
<FileText
className="h-6 w-6 text-primary pl-1 "
className="h-6 w-6 pl-1 text-primary "
aria-hidden="true"
/>
</DialogTitle>
@ -75,7 +75,7 @@ export default function GenericModal({
</DialogDescription>
</DialogHeader>
<div className="flex h-full w-full mt-2">
<div className="mt-2 flex h-full w-full">
<Textarea
ref={ref}
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}>
<div
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,
height,
width,
@ -85,18 +85,18 @@ export default function ButtonBox({
)}
>
<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
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>
</div>
<div className="w-full mt-auto mb-auto">
<div className="mb-auto mt-auto w-full">
<h3
className={classNames(
"w-full font-semibold break-words text-background truncate-multiline",
"w-full break-words font-semibold text-background truncate-multiline",
titleFontSize,
marginTop
)}

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

@ -68,15 +68,15 @@ export default function ImportModal() {
<DialogContent
className={classNames(
showExamples
? "lg:max-w-[650px] h-[600px]"
: "lg:max-w-[650px] h-[450px]"
? "h-[600px] lg:max-w-[650px]"
: "h-[450px] lg:max-w-[650px]"
)}
>
<DialogHeader>
<DialogTitle className="flex items-center">
{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
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"
@ -85,7 +85,7 @@ export default function ImportModal() {
}}
>
<ArrowLeftIcon
className="h-5 w-5 text-foreground ml-1"
className="ml-1 h-5 w-5 text-foreground"
aria-hidden="true"
/>
</button>
@ -97,7 +97,7 @@ export default function ImportModal() {
{showExamples ? "Select an example" : "Import"}
</span>
<ArrowUpTrayIcon
className="h-5 w-5 text-foreground ml-1"
className="ml-1 h-5 w-5 text-foreground"
aria-hidden="true"
/>
</DialogTitle>
@ -108,12 +108,12 @@ export default function ImportModal() {
className={classNames(
"h-full w-full overflow-y-auto scrollbar-hide",
showExamples && !loadingExamples
? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
: "flex flex-row justify-center items-center"
? "start mx-auto flex flex-row flex-wrap items-start justify-center overflow-auto"
: "flex flex-row items-center justify-center"
)}
>
{!showExamples && (
<div className="flex h-full w-full justify-evenly items-center">
<div className="flex h-full w-full items-center justify-evenly">
<ButtonBox
size="big"
bgColor="bg-medium-emerald "
@ -145,7 +145,7 @@ export default function ImportModal() {
</div>
)}
{showExamples && loadingExamples && (
<div className="flex align-middle justify-center items-center">
<div className="flex items-center justify-center align-middle">
<LoadingComponent remSize={30} />
</div>
)}
@ -175,7 +175,7 @@ export default function ImportModal() {
</div>
<DialogFooter>
<div className="w-full flex items-center justify-center mt-2">
<div className="mt-2 flex w-full items-center justify-center">
<a
href="https://github.com/logspace-ai/langflow_examples"
target="_blank"

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

@ -57,8 +57,8 @@ export default function PromptAreaModal({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
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]">
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<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=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
<button
type="button"
className="rounded-md text-ring hover:text-ring"
@ -70,8 +70,8 @@ export default function PromptAreaModal({
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="h-full w-full flex flex-col justify-center items-center">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
<div className="flex h-full w-full flex-col items-center justify-center">
<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">
<DocumentTextIcon
className="h-6 w-6 text-almost-medium-blue"
@ -87,9 +87,9 @@ export default function PromptAreaModal({
</Dialog.Title>
</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="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
ref={ref}
className="form-input h-full w-full rounded-lg border-ring"
@ -102,7 +102,7 @@ export default function PromptAreaModal({
</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
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"

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

@ -56,8 +56,8 @@ export default function TextAreaModal({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
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]">
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<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=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
<button
type="button"
className="rounded-md text-ring hover:text-ring"
@ -69,8 +69,8 @@ export default function TextAreaModal({
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="h-full w-full flex flex-col justify-center items-center">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
<div className="flex h-full w-full flex-col items-center justify-center">
<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">
<ClipboardDocumentListIcon
className="h-6 w-6 text-almost-medium-blue"
@ -86,9 +86,9 @@ export default function TextAreaModal({
</Dialog.Title>
</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="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
ref={ref}
className="form-input h-full w-full rounded-lg border-ring"
@ -101,7 +101,7 @@ export default function TextAreaModal({
</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
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"

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

@ -37,9 +37,9 @@ export default function CommunityPage() {
handleExamples();
}, []);
return (
<div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
<div className="w-full flex justify-between py-12 pb-2 px-6">
<span className="text-2xl flex items-center justify-center gap-2 font-semibold">
<div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
<div className="flex w-full justify-between px-6 py-12 pb-2">
<span className="flex items-center justify-center gap-2 text-2xl font-semibold">
<Users2 className="w-6" />
Community Examples
</span>
@ -50,18 +50,18 @@ export default function CommunityPage() {
rel="noreferrer"
>
<Button variant="primary">
<GithubIcon className="w-4 mr-2" />
<GithubIcon className="mr-2 w-4" />
Add Your Example
</Button>
</a>
</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
welcome new example contributions that can help our community explore
new and powerful features.
</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 &&
examples.map((flow, idx) => (
<CardComponent
@ -79,7 +79,7 @@ export default function CommunityPage() {
});
}}
>
<GitFork className="w-4 mr-2" />
<GitFork className="mr-2 w-4" />
Fork Example
</Button>
}

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

@ -12,7 +12,7 @@ export default function DisclosureComponent({
{({ open }) => (
<>
<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">
<Icon strokeWidth={1.5} size={22} className="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">
<ExtraSidebar />
{/* Main area */}
<main className="flex-1 flex">
<main className="flex flex-1">
{/* Primary column */}
<div className="w-full h-full">
<div className="w-full h-full" ref={reactFlowWrapper}>
<div className="h-full w-full">
<div className="h-full w-full" ref={reactFlowWrapper}>
{Object.keys(templates).length > 0 &&
Object.keys(types).length > 0 ? (
<div className="w-full h-full">
<div className="h-full w-full">
<ReactFlow
nodes={nodes}
onMove={() => {
@ -403,8 +403,8 @@ export default function Page({ flow }: { flow: FlowType }) {
>
<Background className="" />
<Controls
className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border
fill-foreground bg-muted"
className="bg-muted fill-foreground stroke-foreground text-primary
[&>button]:border-b-border hover:[&>button]:bg-border"
></Controls>
</ReactFlow>
<Chat flow={flow} reactFlowInstance={reactFlowInstance} />

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

@ -60,48 +60,48 @@ export default function ExtraSidebar() {
}
return (
<div className="w-52 flex flex-col overflow-hidden scrollbar-hide h-full border-r">
<div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
<div className="flex h-full w-52 flex-col overflow-hidden border-r scrollbar-hide">
<div className="mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2">
<ShadTooltip delayDuration={1000} content="Import" side="top">
<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={() => {
// openPopUp(<ImportModal />);
uploadFlow();
}}
>
<FileUp strokeWidth={1.5} className="w-5 h-5 "></FileUp>
<FileUp strokeWidth={1.5} className="h-5 w-5 "></FileUp>
</button>
</ShadTooltip>
<ShadTooltip delayDuration={1000} content="Export" side="top">
<button
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) => {
openPopUp(<ExportModal />);
}}
>
<FileDown strokeWidth={1.5} className="w-5 h-5 "></FileDown>
<FileDown strokeWidth={1.5} className="h-5 w-5 "></FileDown>
</button>
</ShadTooltip>
<ShadTooltip delayDuration={1000} content="Code" side="top">
<button
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) => {
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>
</ShadTooltip>
<ShadTooltip delayDuration={1000} content="Save" side="top">
<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) => {
saveFlow(flows.find((f) => f.id === tabId));
setSuccessData({ title: "Changes saved successfully" });
@ -111,28 +111,26 @@ export default function ExtraSidebar() {
<Save
strokeWidth={1.5}
className={
"w-5 h-5" + (isPending ? " " : " text-muted-foreground")
"h-5 w-5" + (isPending ? " " : " text-muted-foreground")
}
></Save>
</button>
</ShadTooltip>
</div>
<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
type="text"
name="search"
id="search"
placeholder="Search"
className={
INPUT_SEARCH
}
className={INPUT_SEARCH}
onChange={(e) => {
handleSearchInput(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 */}
<Search size={20} strokeWidth={1.5} className="text-primary" />
</div>
@ -151,7 +149,7 @@ export default function ExtraSidebar() {
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])
.sort()
.map((t: string, k) => (
@ -164,7 +162,7 @@ export default function ExtraSidebar() {
<div key={k} data-tooltip-id={t}>
<div
draggable
className={"cursor-grab border-l-8 rounded-l-md"}
className={"cursor-grab rounded-l-md border-l-8"}
style={{
borderLeftColor:
nodeColors[d] ?? nodeColors.unknown,
@ -183,11 +181,11 @@ export default function ExtraSidebar() {
);
}}
>
<div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-ring border-l-0 rounded-md rounded-l-none border">
<span className="text-foreground w-full pr-1 truncate text-xs">
<div className="flex w-full items-center justify-between rounded-md rounded-l-none border border-l-0 border-dashed border-ring bg-white px-3 py-1 text-sm">
<span className="w-full truncate pr-1 text-xs text-foreground">
{data[d][t].display_name}
</span>
<Menu className="w-4 h-6 text-ring " />
<Menu className="h-6 w-4 text-ring " />
</div>
</div>
</div>

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

@ -28,16 +28,16 @@ const NodeToolbarComponent = (props) => {
const reactFlowInstance = useReactFlow();
return (
<>
<div className="h-10 w-26">
<div className="w-26 h-10">
<span className="isolate inline-flex rounded-md shadow-sm">
<ShadTooltip delayDuration={1000} content="Delete" side="top">
<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={() => {
props.deleteNode(props.data.id);
}}
>
<Trash2 className="w-4 h-4 "></Trash2>
<Trash2 className="h-4 w-4 "></Trash2>
</button>
</ShadTooltip>
@ -45,8 +45,8 @@ const NodeToolbarComponent = (props) => {
<button
className={classNames(
nodeLength > 0
? "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"
: "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 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"
: "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"
)}
onClick={(event) => {
event.preventDefault();
@ -65,20 +65,20 @@ const NodeToolbarComponent = (props) => {
);
}}
>
<Copy className="w-4 h-4 "></Copy>
<Copy className="h-4 w-4 "></Copy>
</button>
</ShadTooltip>
{nodeLength > 0 && (
<ShadTooltip delayDuration={1000} content="Edit" side="top">
<button
className="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"
className="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"
onClick={(event) => {
event.preventDefault();
props.openPopUp(<EditNodeModal data={props.data} />);
}}
>
<Settings2 className="w-4 h-4 "></Settings2>
<Settings2 className="h-4 w-4 "></Settings2>
</button>
</ShadTooltip>
)}

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

@ -29,7 +29,7 @@ export default function FlowPage() {
<a
target={"_blank"}
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>}
<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();
return (
<div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
<div className="w-full flex justify-between py-12 pb-2 px-6">
<span className="text-2xl flex items-center justify-center gap-2 font-semibold">
<div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
<div className="flex w-full justify-between px-6 py-12 pb-2">
<span className="flex items-center justify-center gap-2 text-2xl font-semibold">
<Home className="w-6" />
{USER_PROJECTS_HEADER}
</span>
@ -27,7 +27,7 @@ export default function HomePage() {
downloadFlows();
}}
>
<Download className="w-4 mr-2" />
<Download className="mr-2 w-4" />
Download Collection
</Button>
<Button
@ -36,7 +36,7 @@ export default function HomePage() {
uploadFlows();
}}
>
<Upload className="w-4 mr-2" />
<Upload className="mr-2 w-4" />
Upload Collection
</Button>
<Button
@ -47,15 +47,15 @@ export default function HomePage() {
});
}}
>
<Plus className="w-4 mr-2" />
<Plus className="mr-2 w-4" />
New Project
</Button>
</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.
</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) => (
<CardComponent
key={idx}
@ -68,7 +68,7 @@ export default function HomePage() {
size="sm"
className="whitespace-nowrap "
>
<ExternalLink className="w-4 mr-2" />
<ExternalLink className="mr-2 w-4" />
Edit Flow
</Button>
</Link>