style: apply tailwind formatting
This commit is contained in:
Gabriel Luiz Freitas Almeida
parent
032c616c00
commit
ff254029bf
59 changed files with 371 additions and 339 deletions
|
|
@ -51,7 +51,11 @@ export default function App() {
|
|||
useEffect(() => {
|
||||
// If there is an error alert open with data, add it to the alertsList
|
||||
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;
|
||||
}
|
||||
setErrorOpen(false);
|
||||
|
|
@ -65,7 +69,11 @@ export default function App() {
|
|||
}
|
||||
// If there is a notice alert open with data, add it to the alertsList
|
||||
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;
|
||||
}
|
||||
setNoticeOpen(false);
|
||||
|
|
@ -79,7 +87,11 @@ export default function App() {
|
|||
}
|
||||
// If there is a success alert open with data, add it to the alertsList
|
||||
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;
|
||||
}
|
||||
setSuccessOpen(false);
|
||||
|
|
@ -112,7 +124,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");
|
||||
|
|
@ -127,7 +139,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) => (
|
||||
|
|
@ -161,4 +173,4 @@ export default function App() {
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -101,7 +101,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
|
||||
|
|
@ -138,12 +138,12 @@ 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" +
|
||||
"w-full truncate text-sm" +
|
||||
(left ? "" : " text-end") +
|
||||
(info !== "" ? " flex items-center" : "")
|
||||
}
|
||||
|
|
@ -153,7 +153,7 @@ export default function ParameterComponent({
|
|||
<div className="">
|
||||
{info !== "" && (
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -182,7 +182,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,
|
||||
|
|
@ -247,7 +247,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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
className={classNames(
|
||||
validationStatus && validationStatus.valid
|
||||
? "w-4 h-4 rounded-full bg-status-green 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-green 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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@ 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>
|
||||
)}
|
||||
|
||||
|
|
@ -28,7 +28,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
|
|||
<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: DOMPurify.sanitize(convert.toHtml(chat.thought)),
|
||||
}}
|
||||
|
|
@ -36,7 +36,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}
|
||||
|
|
@ -45,7 +45,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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -30,10 +30,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(
|
||||
|
|
@ -48,9 +48,9 @@ export default function CodeAreaComponent({
|
|||
}}
|
||||
className={
|
||||
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
|
||||
: "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 +
|
||||
(disabled ? " bg-input" : "")
|
||||
}
|
||||
|
|
@ -71,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>
|
||||
|
|
|
|||
|
|
@ -40,13 +40,13 @@ export default function Dropdown({
|
|||
<Listbox.Button
|
||||
className={
|
||||
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
|
||||
: "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
|
||||
}
|
||||
>
|
||||
<span className="block bg-background truncate w-full">
|
||||
<span className="block w-full truncate bg-background">
|
||||
{internalValue}
|
||||
</span>
|
||||
<span
|
||||
|
|
@ -71,9 +71,9 @@ export default function Dropdown({
|
|||
<Listbox.Options
|
||||
className={classNames(
|
||||
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]"
|
||||
: "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 ",
|
||||
apiModal ? "w-[250px] mb-2" : "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 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 ? "mb-2 w-[250px]" : "absolute"
|
||||
)}
|
||||
>
|
||||
{options.map((option, id) => (
|
||||
|
|
|
|||
|
|
@ -58,9 +58,9 @@ export default function FloatComponent({
|
|||
value={myValue}
|
||||
className={
|
||||
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
|
||||
: "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 +
|
||||
(disabled ? " bg-input" : "")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
>
|
||||
|
|
@ -46,11 +46,11 @@ export default function InputComponent({
|
|||
if (disableCopyPaste) setDisableCopyPaste(false);
|
||||
}}
|
||||
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" : "",
|
||||
password && !pwdVisible && myValue !== "" ? "password" : "",
|
||||
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
|
||||
: "ring-offset-input" + INPUT_STYLE,
|
||||
password && editNode ? "pr-8" : "pr-3"
|
||||
|
|
@ -65,7 +65,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={() => {
|
||||
|
|
@ -82,8 +82,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
|
||||
|
|
@ -101,8 +101,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
|
||||
|
|
|
|||
|
|
@ -95,17 +95,17 @@ 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">
|
||||
<div className="flex w-full items-center">
|
||||
<span
|
||||
onClick={handleButtonClick}
|
||||
className={
|
||||
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
|
||||
: "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 +
|
||||
(disabled ? " bg-input" : "")
|
||||
}
|
||||
|
|
@ -114,10 +114,10 @@ export default function InputFileComponent({
|
|||
</span>
|
||||
<button onClick={handleButtonClick}>
|
||||
{!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 && (
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -36,15 +36,15 @@ export default function InputListComponent({
|
|||
}
|
||||
>
|
||||
{inputList.map((i, idx) => (
|
||||
<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
|
||||
? "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
|
||||
: "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" : "") +
|
||||
"focus:placeholder-transparent"
|
||||
}
|
||||
|
|
@ -70,7 +70,7 @@ export default function InputListComponent({
|
|||
onChange(inputList);
|
||||
}}
|
||||
>
|
||||
<Plus className={"w-4 h-4 hover:text-ring"} />
|
||||
<Plus className={"h-4 w-4 hover:text-ring"} />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
|
|
@ -84,7 +84,7 @@ export default function InputListComponent({
|
|||
onChange(inputList);
|
||||
}}
|
||||
>
|
||||
<X className="w-4 h-4 hover:text-status-red" />
|
||||
<X className="h-4 w-4 hover:text-status-red" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,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
|
||||
|
|
@ -72,9 +72,9 @@ export default function IntComponent({
|
|||
value={myValue}
|
||||
className={
|
||||
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
|
||||
: "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 +
|
||||
(disabled ? " bg-input" : "")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -28,10 +28,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">
|
||||
<div className="flex w-full items-center">
|
||||
<span
|
||||
onClick={() => {
|
||||
openPopUp(
|
||||
|
|
@ -49,9 +49,9 @@ export default function PromptAreaComponent({
|
|||
}}
|
||||
className={
|
||||
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
|
||||
: "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" : "")
|
||||
}
|
||||
>
|
||||
|
|
@ -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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,8 +31,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
|
||||
|
|
@ -52,9 +52,9 @@ export default function TextAreaComponent({
|
|||
}}
|
||||
className={
|
||||
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
|
||||
: "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" : "")
|
||||
}
|
||||
>
|
||||
|
|
@ -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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -275,10 +275,14 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
|||
/**
|
||||
* 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
|
||||
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
|
||||
|
|
|
|||
|
|
@ -262,18 +262,18 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
|
|||
return (
|
||||
<Dialog open={true} onOpenChange={setModalOpen}>
|
||||
<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>
|
||||
<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
|
||||
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) => {
|
||||
setActiveTab(value);
|
||||
if (value === "3") {
|
||||
|
|
@ -291,7 +291,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} />}
|
||||
|
|
@ -303,7 +303,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"
|
||||
key={index} // Remember to add a unique key prop
|
||||
>
|
||||
{index < 3 ? (
|
||||
|
|
@ -316,10 +316,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
|
|||
</SyntaxHighlighter>
|
||||
) : index === 3 ? (
|
||||
<>
|
||||
<div className="flex w-full h-[400px] mt-2">
|
||||
<div className="mt-2 flex h-[400px] w-full">
|
||||
<div
|
||||
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
|
||||
? "overflow-scroll overflow-x-hidden custom-scroll"
|
||||
: "overflow-hidden"
|
||||
|
|
@ -332,14 +332,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
|
|||
trigger={t["data"]["id"]}
|
||||
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">
|
||||
<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">
|
||||
<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>
|
||||
</TableRow>
|
||||
|
|
@ -373,11 +373,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
|
|||
key={i}
|
||||
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}
|
||||
</TableCell>
|
||||
<TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300">
|
||||
<div className="w-[250px] m-auto">
|
||||
<TableCell className="p-0 text-center text-xs text-gray-900 dark:text-gray-300">
|
||||
<div className="m-auto w-[250px]">
|
||||
{t.data.node.template[n]
|
||||
.type === "str" &&
|
||||
!t.data.node.template[n]
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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) =>
|
||||
|
|
|
|||
|
|
@ -59,8 +59,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"
|
||||
|
|
@ -72,11 +72,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,
|
||||
|
|
@ -91,11 +91,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) !== "_" &&
|
||||
|
|
@ -106,7 +106,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) =>
|
||||
|
|
@ -144,7 +144,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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -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} />}
|
||||
|
|
|
|||
|
|
@ -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: DOMPurify.sanitize(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 ">
|
||||
{message.split("\n").map((line, index) => (
|
||||
<span key={index} className="text-muted-foreground ">
|
||||
{line}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -205,25 +205,27 @@ export default function ChatModal({
|
|||
handleOnClose(event);
|
||||
};
|
||||
newWs.onerror = (ev) => {
|
||||
getHealth().then((res) => {
|
||||
if (res.status === 200) {
|
||||
connectWS();
|
||||
}
|
||||
}).catch((err) => {
|
||||
setErrorData({
|
||||
// message when the backend failed
|
||||
title: "The backend is not responding. Please try again later.",
|
||||
// possible solution list
|
||||
list: [
|
||||
"Check your internet connection.",
|
||||
"Check if the backend is running."
|
||||
],
|
||||
getHealth()
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
connectWS();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
setErrorData({
|
||||
// message when the backend failed
|
||||
title: "The backend is not responding. Please try again later.",
|
||||
// possible solution list
|
||||
list: [
|
||||
"Check your internet connection.",
|
||||
"Check if the backend is running.",
|
||||
],
|
||||
});
|
||||
});
|
||||
})
|
||||
};
|
||||
ws.current = newWs;
|
||||
} catch (error) {
|
||||
connectWS();
|
||||
connectWS();
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
|
@ -331,7 +333,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">
|
||||
|
|
@ -345,24 +347,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) => (
|
||||
|
|
@ -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 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>
|
||||
|
|
@ -395,8 +397,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}
|
||||
|
|
|
|||
|
|
@ -48,19 +48,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"
|
||||
|
|
@ -74,7 +74,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>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@ export default function ExportModal() {
|
|||
const { closePopUp } = useContext(PopUpContext);
|
||||
const ref = useRef();
|
||||
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);
|
||||
function setModalOpen(x: boolean) {
|
||||
setOpen(x);
|
||||
|
|
@ -41,12 +42,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>
|
||||
|
|
@ -80,9 +81,18 @@ export default function ExportModal() {
|
|||
<DialogFooter>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (checked) downloadFlow(flows.find((f) => f.id === tabId),name,description);
|
||||
if (checked)
|
||||
downloadFlow(
|
||||
flows.find((f) => f.id === tabId),
|
||||
name,
|
||||
description
|
||||
);
|
||||
else
|
||||
downloadFlow(removeApiKeys(flows.find((f) => f.id === tabId)),name,description);
|
||||
downloadFlow(
|
||||
removeApiKeys(flows.find((f) => f.id === tabId)),
|
||||
name,
|
||||
description
|
||||
);
|
||||
|
||||
closePopUp();
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,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>
|
||||
|
|
@ -76,7 +76,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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -58,8 +58,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"
|
||||
|
|
@ -71,8 +71,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"
|
||||
|
|
@ -88,9 +88,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"
|
||||
|
|
@ -103,7 +103,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"
|
||||
|
|
|
|||
|
|
@ -57,8 +57,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"
|
||||
|
|
@ -70,8 +70,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"
|
||||
|
|
@ -87,9 +87,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"
|
||||
|
|
@ -102,7 +102,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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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 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 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 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 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,14 +111,14 @@ 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"
|
||||
|
|
@ -126,14 +126,14 @@ export default function ExtraSidebar() {
|
|||
placeholder="Search"
|
||||
className={
|
||||
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) => {
|
||||
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>
|
||||
|
|
@ -152,7 +152,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 +164,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 +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">
|
||||
<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-background 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>
|
||||
|
|
|
|||
|
|
@ -28,23 +28,23 @@ 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 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>
|
||||
|
||||
<ShadTooltip content="Duplicate" side="top">
|
||||
<button
|
||||
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) => {
|
||||
event.preventDefault();
|
||||
|
|
@ -63,7 +63,7 @@ const NodeToolbarComponent = (props) => {
|
|||
);
|
||||
}}
|
||||
>
|
||||
<Copy className="w-4 h-4"></Copy>
|
||||
<Copy className="h-4 w-4"></Copy>
|
||||
</button>
|
||||
</ShadTooltip>
|
||||
|
||||
|
|
@ -77,7 +77,7 @@ const NodeToolbarComponent = (props) => {
|
|||
>
|
||||
<a
|
||||
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 === ""
|
||||
? " text-muted-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>
|
||||
</ShadTooltip>
|
||||
|
||||
<ShadTooltip content="Edit" side="top">
|
||||
<button
|
||||
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
|
||||
? " text-muted-foreground"
|
||||
: " text-foreground")
|
||||
|
|
@ -112,7 +112,7 @@ const NodeToolbarComponent = (props) => {
|
|||
props.openPopUp(<EditNodeModal data={props.data} />);
|
||||
}}
|
||||
>
|
||||
<Settings2 className="w-4 h-4 "></Settings2>
|
||||
<Settings2 className="h-4 w-4 "></Settings2>
|
||||
</button>
|
||||
</ShadTooltip>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,11 @@ export type TabsContextType = {
|
|||
addFlow: (flowData?: FlowType, newProject?: boolean) => Promise<String>;
|
||||
updateFlow: (newFlow: FlowType) => void;
|
||||
incrementNodeId: () => string;
|
||||
downloadFlow: (flow: FlowType,flowName:string,flowDescription?:string) => void;
|
||||
downloadFlow: (
|
||||
flow: FlowType,
|
||||
flowName: string,
|
||||
flowDescription?: string
|
||||
) => void;
|
||||
downloadFlows: () => void;
|
||||
uploadFlows: () => void;
|
||||
uploadFlow: (newFlow?: boolean) => void;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue