Formatting
This commit is contained in:
Gabriel Luiz Freitas Almeida
parent
fd7da8720f
commit
39434eadc4
58 changed files with 630 additions and 1027 deletions
|
|
@ -173,8 +173,9 @@ export default function GenericNode({
|
|||
const iconColor = nodeColors[types[data.type]];
|
||||
const iconName =
|
||||
iconElement || (data.node?.flow ? "group_components" : name);
|
||||
const iconClassName = `generic-node-icon ${!showNode ? " absolute inset-x-6 h-12 w-12 " : ""
|
||||
}`;
|
||||
const iconClassName = `generic-node-icon ${
|
||||
!showNode ? " absolute inset-x-6 h-12 w-12 " : ""
|
||||
}`;
|
||||
if (iconElement && isEmoji) {
|
||||
return nodeIconFragment(iconElement);
|
||||
} else {
|
||||
|
|
@ -303,7 +304,7 @@ export default function GenericNode({
|
|||
numberOfHandles={handles}
|
||||
showNode={showNode}
|
||||
openAdvancedModal={false}
|
||||
onCloseAdvancedModal={() => { }}
|
||||
onCloseAdvancedModal={() => {}}
|
||||
selected={selected}
|
||||
></NodeToolbarComponent>
|
||||
</NodeToolbar>
|
||||
|
|
@ -426,33 +427,33 @@ export default function GenericNode({
|
|||
data={data}
|
||||
color={
|
||||
data.node?.template[templateField].input_types &&
|
||||
data.node?.template[templateField].input_types!
|
||||
.length > 0
|
||||
data.node?.template[templateField].input_types!
|
||||
.length > 0
|
||||
? nodeColors[
|
||||
data.node?.template[templateField]
|
||||
.input_types![
|
||||
data.node?.template[templateField]
|
||||
.input_types!.length - 1
|
||||
]
|
||||
] ??
|
||||
nodeColors[
|
||||
types[
|
||||
data.node?.template[templateField]
|
||||
.input_types![
|
||||
data.node?.template[templateField]
|
||||
.input_types!.length - 1
|
||||
]
|
||||
]
|
||||
]
|
||||
data.node?.template[templateField]
|
||||
.input_types![
|
||||
data.node?.template[templateField]
|
||||
.input_types!.length - 1
|
||||
]
|
||||
] ??
|
||||
nodeColors[
|
||||
types[
|
||||
data.node?.template[templateField]
|
||||
.input_types![
|
||||
data.node?.template[templateField]
|
||||
.input_types!.length - 1
|
||||
]
|
||||
]
|
||||
]
|
||||
: nodeColors[
|
||||
data.node?.template[templateField].type!
|
||||
] ??
|
||||
nodeColors[
|
||||
types[
|
||||
data.node?.template[templateField].type!
|
||||
]
|
||||
] ??
|
||||
nodeColors.unknown
|
||||
data.node?.template[templateField].type!
|
||||
] ??
|
||||
nodeColors[
|
||||
types[
|
||||
data.node?.template[templateField].type!
|
||||
]
|
||||
] ??
|
||||
nodeColors.unknown
|
||||
}
|
||||
title={getFieldTitle(
|
||||
data.node?.template!,
|
||||
|
|
@ -496,7 +497,7 @@ export default function GenericNode({
|
|||
color={nodeColors[types[data.type]] ?? nodeColors.unknown}
|
||||
title={
|
||||
data.node?.output_types &&
|
||||
data.node.output_types.length > 0
|
||||
data.node.output_types.length > 0
|
||||
? data.node.output_types.join(" | ")
|
||||
: data.type
|
||||
}
|
||||
|
|
@ -515,59 +516,62 @@ export default function GenericNode({
|
|||
</div>
|
||||
{showNode && (
|
||||
<ShadTooltip
|
||||
content={
|
||||
buildStatus === BuildStatus.BUILDING ? (
|
||||
<span> {STATUS_BUILDING} </span>
|
||||
) : !validationStatus ? (
|
||||
<span className="flex">{STATUS_BUILD}</span>
|
||||
) : (
|
||||
<div className="max-h-100 p-2">
|
||||
<div>
|
||||
{lastRunTime && (
|
||||
<div className="justify-left flex text-muted-foreground font-normal">
|
||||
<div>{RUN_TIMESTAMP_PREFIX}</div>
|
||||
<div className="ml-1 text-status-blue">
|
||||
{lastRunTime}
|
||||
content={
|
||||
buildStatus === BuildStatus.BUILDING ? (
|
||||
<span> {STATUS_BUILDING} </span>
|
||||
) : !validationStatus ? (
|
||||
<span className="flex">{STATUS_BUILD}</span>
|
||||
) : (
|
||||
<div className="max-h-100 p-2">
|
||||
<div>
|
||||
{lastRunTime && (
|
||||
<div className="justify-left flex font-normal text-muted-foreground">
|
||||
<div>{RUN_TIMESTAMP_PREFIX}</div>
|
||||
<div className="ml-1 text-status-blue">
|
||||
{lastRunTime}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="justify-left flex font-normal text-muted-foreground">
|
||||
<div>Duration:</div>
|
||||
<div className="mb-3 ml-1 text-status-blue">
|
||||
{validationStatus?.data.duration}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="justify-left flex text-muted-foreground font-normal">
|
||||
<div>Duration:</div>
|
||||
<div className="ml-1 text-status-blue mb-3">
|
||||
{validationStatus?.data.duration}
|
||||
</div>
|
||||
<hr />
|
||||
<span className="mb-2 mt-2 flex justify-center font-semibold text-muted-foreground">
|
||||
Output
|
||||
</span>
|
||||
<div className="max-h-96 overflow-auto font-normal custom-scroll">
|
||||
{validationString.split("\n").map((line, index) => (
|
||||
<div className="font-normal" key={index}>
|
||||
{line}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<span className="flex justify-center text-muted-foreground mt-2 mb-2 font-semibold">
|
||||
Output
|
||||
</span>
|
||||
<div className="max-h-96 overflow-auto custom-scroll font-normal">
|
||||
{validationString.split("\n").map((line, index) => (
|
||||
<div className="font-normal" key={index}>{line}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
side="bottom"
|
||||
>
|
||||
<Button onClick={() => {
|
||||
if (buildStatus === BuildStatus.BUILDING || isBuilding)
|
||||
return;
|
||||
setValidationStatus(null);
|
||||
buildFlow({ stopNodeId: data.id });
|
||||
}} variant="secondary" className={"group h-9 px-1.5"}>
|
||||
<div>
|
||||
|
||||
<div
|
||||
className="generic-node-status-position flex items-center justify-center"
|
||||
>
|
||||
)
|
||||
}
|
||||
side="bottom"
|
||||
>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (buildStatus === BuildStatus.BUILDING || isBuilding)
|
||||
return;
|
||||
setValidationStatus(null);
|
||||
buildFlow({ stopNodeId: data.id });
|
||||
}}
|
||||
variant="secondary"
|
||||
className={"group h-9 px-1.5"}
|
||||
>
|
||||
<div>
|
||||
<div className="generic-node-status-position flex items-center justify-center">
|
||||
{renderIconStatus(buildStatus, validationStatus)}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</ShadTooltip>
|
||||
</div>
|
||||
</Button>
|
||||
</ShadTooltip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -642,7 +646,7 @@ export default function GenericNode({
|
|||
}}
|
||||
>
|
||||
{(data.node?.description === "" || !data.node?.description) &&
|
||||
nameEditable
|
||||
nameEditable
|
||||
? "Double Click to Edit Description"
|
||||
: data.node?.description}
|
||||
</div>
|
||||
|
|
@ -655,7 +659,7 @@ export default function GenericNode({
|
|||
.map((templateField: string, idx) => (
|
||||
<div key={idx}>
|
||||
{data.node!.template[templateField].show &&
|
||||
!data.node!.template[templateField].advanced ? (
|
||||
!data.node!.template[templateField].advanced ? (
|
||||
<ParameterComponent
|
||||
index={idx.toString()}
|
||||
key={scapedJSONStringfy({
|
||||
|
|
@ -669,30 +673,30 @@ export default function GenericNode({
|
|||
data={data}
|
||||
color={
|
||||
data.node?.template[templateField].input_types &&
|
||||
data.node?.template[templateField].input_types!
|
||||
.length > 0
|
||||
data.node?.template[templateField].input_types!
|
||||
.length > 0
|
||||
? nodeColors[
|
||||
data.node?.template[templateField].input_types![
|
||||
data.node?.template[templateField]
|
||||
.input_types!.length - 1
|
||||
]
|
||||
] ??
|
||||
nodeColors[
|
||||
types[
|
||||
data.node?.template[templateField]
|
||||
.input_types![
|
||||
data.node?.template[templateField]
|
||||
.input_types!.length - 1
|
||||
]
|
||||
]
|
||||
]
|
||||
data.node?.template[templateField].input_types![
|
||||
data.node?.template[templateField]
|
||||
.input_types!.length - 1
|
||||
]
|
||||
] ??
|
||||
nodeColors[
|
||||
types[
|
||||
data.node?.template[templateField]
|
||||
.input_types![
|
||||
data.node?.template[templateField]
|
||||
.input_types!.length - 1
|
||||
]
|
||||
]
|
||||
]
|
||||
: nodeColors[
|
||||
data.node?.template[templateField].type!
|
||||
] ??
|
||||
nodeColors[
|
||||
types[data.node?.template[templateField].type!]
|
||||
] ??
|
||||
nodeColors.unknown
|
||||
data.node?.template[templateField].type!
|
||||
] ??
|
||||
nodeColors[
|
||||
types[data.node?.template[templateField].type!]
|
||||
] ??
|
||||
nodeColors.unknown
|
||||
}
|
||||
title={getFieldTitle(
|
||||
data.node?.template!,
|
||||
|
|
@ -744,9 +748,9 @@ export default function GenericNode({
|
|||
data={data}
|
||||
color={
|
||||
(data.node?.output_types &&
|
||||
data.node.output_types.length > 0
|
||||
data.node.output_types.length > 0
|
||||
? nodeColors[data.node.output_types[0]] ??
|
||||
nodeColors[types[data.node.output_types[0]]]
|
||||
nodeColors[types[data.node.output_types[0]]]
|
||||
: nodeColors[types[data.type]]) ?? nodeColors.unknown
|
||||
}
|
||||
title={
|
||||
|
|
|
|||
|
|
@ -20,7 +20,12 @@ import { Badge } from "../ui/badge";
|
|||
import { Button } from "../ui/button";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
|
||||
|
||||
export default function IOView({ children, open, setOpen, disable }: {
|
||||
export default function IOView({
|
||||
children,
|
||||
open,
|
||||
setOpen,
|
||||
disable,
|
||||
}: {
|
||||
children: JSX.Element;
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,25 @@
|
|||
import { Card, CardContent, CardDescription, CardTitle } from "../ui/card";
|
||||
import useFlowsManagerStore from "../../stores/flowsManagerStore";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import IconComponent from "../genericIconComponent";
|
||||
import { cn } from "../../utils/utils";
|
||||
import useFlowsManagerStore from "../../stores/flowsManagerStore";
|
||||
import { Card, CardContent, CardDescription, CardTitle } from "../ui/card";
|
||||
|
||||
export default function NewFlowCardComponent() {
|
||||
const addFlow = useFlowsManagerStore((state) => state.addFlow);
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<Card onClick={() => {
|
||||
addFlow(true).then((id) => {
|
||||
navigate("/flow/" + id);
|
||||
});
|
||||
}} className="pt-4 w-80 h-64 cursor-pointer bg-background">
|
||||
<CardContent className="w-full h-full">
|
||||
<div className="bg-dotted-spacing-6 bg-dotted-muted-foreground bg-dotted-radius-px rounded-md bg-muted w-full h-full flex flex-col items-center align-middle justify-center">
|
||||
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardDescription className="px-6 pb-4">
|
||||
<CardTitle className="text-primary text-lg">Blank Flow</CardTitle>
|
||||
</CardDescription>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
const addFlow = useFlowsManagerStore((state) => state.addFlow);
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<Card
|
||||
onClick={() => {
|
||||
addFlow(true).then((id) => {
|
||||
navigate("/flow/" + id);
|
||||
});
|
||||
}}
|
||||
className="h-64 w-80 cursor-pointer bg-background pt-4"
|
||||
>
|
||||
<CardContent className="h-full w-full">
|
||||
<div className="flex h-full w-full flex-col items-center justify-center rounded-md bg-muted align-middle bg-dotted-spacing-6 bg-dotted-muted-foreground bg-dotted-radius-px"></div>
|
||||
</CardContent>
|
||||
<CardDescription className="px-6 pb-4">
|
||||
<CardTitle className="text-lg text-primary">Blank Flow</CardTitle>
|
||||
</CardDescription>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import useFlowStore from "../../stores/flowStore";
|
||||
import { ChatType } from "../../types/chat";
|
||||
import IOView from "../IOview";
|
||||
import ChatTrigger from "../ViewTriggers/chat";
|
||||
import { Transition } from "@headlessui/react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import ApiModal from "../../modals/ApiModal";
|
||||
import ShareModal from "../../modals/shareModal";
|
||||
import useFlowStore from "../../stores/flowStore";
|
||||
import useFlowsManagerStore from "../../stores/flowsManagerStore";
|
||||
import { useStoreStore } from "../../stores/storeStore";
|
||||
import { ChatType } from "../../types/chat";
|
||||
import { classNames } from "../../utils/utils";
|
||||
import IOView from "../IOview";
|
||||
import ForwardedIconComponent from "../genericIconComponent";
|
||||
import { Separator } from "../ui/separator";
|
||||
import ShareModal from "../../modals/shareModal";
|
||||
import { useStoreStore } from "../../stores/storeStore";
|
||||
import useFlowsManagerStore from "../../stores/flowsManagerStore";
|
||||
import { classNames } from "../../utils/utils";
|
||||
import ApiModal from "../../modals/ApiModal";
|
||||
|
||||
export default function FlowToolbar({ flow }: ChatType): JSX.Element {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
|
@ -51,7 +50,7 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
|
|||
<button
|
||||
disabled={!hasApiKey || !validApiKey || !hasStore}
|
||||
className={classNames(
|
||||
"relative inline-flex w-full h-full items-center justify-center hover:bg-hover bg-muted hover:bg-background px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-[4px] text-sm font-semibold ",
|
||||
"relative inline-flex h-full w-full items-center justify-center gap-[4px] bg-muted px-5 py-3 text-sm font-semibold text-foreground transition-all duration-500 ease-in-out hover:bg-background hover:bg-hover ",
|
||||
!hasApiKey || !validApiKey || !hasStore
|
||||
? " button-disable text-muted-foreground "
|
||||
: ""
|
||||
|
|
@ -76,67 +75,83 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
|
|||
return (
|
||||
<>
|
||||
<Transition
|
||||
show={true}
|
||||
appear={true}
|
||||
enter="transition ease-out duration-300"
|
||||
enterFrom="translate-y-96"
|
||||
enterTo="translate-y-0"
|
||||
leave="transition ease-in duration-300"
|
||||
leaveFrom="translate-y-0"
|
||||
leaveTo="translate-y-96"
|
||||
show={true}
|
||||
appear={true}
|
||||
enter="transition ease-out duration-300"
|
||||
enterFrom="translate-y-96"
|
||||
enterTo="translate-y-0"
|
||||
leave="transition ease-in duration-300"
|
||||
leaveFrom="translate-y-0"
|
||||
leaveTo="translate-y-96"
|
||||
>
|
||||
<div
|
||||
className={
|
||||
"shadow-round-btn-shadow hover:shadow-round-btn-shadow message-button-position flex items-center justify-center rounded-sm bg-muted shadow-md transition-all gap-7 border"
|
||||
}
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="flex gap-1 text-medium-indigo rounded-sm transition-all w-full h-full">
|
||||
{hasIO ? (
|
||||
<IOView open={open} setOpen={setOpen} disable={!hasIO}>
|
||||
<div className="relative inline-flex w-full items-center justify-center hover:bg-hover transition-all duration-500 ease-in-out px-5 py-3 text-medium-indigo ease-in-out gap-1 text-sm font-semibold transition-all">
|
||||
<ForwardedIconComponent
|
||||
name="Zap"
|
||||
className={"message-button-icon h-5 w-5 transition-all"}
|
||||
/>
|
||||
Run
|
||||
<div
|
||||
className={
|
||||
"shadow-round-btn-shadow hover:shadow-round-btn-shadow message-button-position flex items-center justify-center gap-7 rounded-sm border bg-muted shadow-md transition-all"
|
||||
}
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="flex h-full w-full gap-1 rounded-sm text-medium-indigo transition-all">
|
||||
{hasIO ? (
|
||||
<IOView open={open} setOpen={setOpen} disable={!hasIO}>
|
||||
<div className="relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-medium-indigo transition-all transition-all duration-500 ease-in-out ease-in-out hover:bg-hover">
|
||||
<ForwardedIconComponent
|
||||
name="Zap"
|
||||
className={"message-button-icon h-5 w-5 transition-all"}
|
||||
/>
|
||||
Run
|
||||
</div>
|
||||
</IOView>
|
||||
) : (
|
||||
<div
|
||||
className={`relative inline-flex w-full cursor-not-allowed items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-muted-foreground transition-all duration-500 ease-in-out ease-in-out`}
|
||||
>
|
||||
<ForwardedIconComponent
|
||||
name="Zap"
|
||||
className={
|
||||
"message-button-icon h-5 w-5 fill-muted-foreground stroke-muted-foreground transition-all"
|
||||
}
|
||||
/>
|
||||
Run
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</IOView>
|
||||
) : (
|
||||
<div className={`relative inline-flex w-full items-center justify-center transition-all duration-500 ease-in-out px-5 py-3 text-muted-foreground ease-in-out gap-1 text-sm font-semibold cursor-not-allowed`}>
|
||||
<ForwardedIconComponent
|
||||
name="Zap"
|
||||
className={"message-button-icon h-5 w-5 transition-all fill-muted-foreground stroke-muted-foreground"}
|
||||
/>
|
||||
Run
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Separator orientation="vertical" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 cursor-pointer">
|
||||
{currentFlow && currentFlow.data && (
|
||||
<ApiModal flow={currentFlow}>
|
||||
<div className={classNames("relative inline-flex w-full items-center justify-center hover:bg-hover px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-1 text-sm font-semibold")}>
|
||||
<div>
|
||||
<Separator orientation="vertical" />
|
||||
</div>
|
||||
<div className="flex cursor-pointer items-center gap-2">
|
||||
{currentFlow && currentFlow.data && (
|
||||
<ApiModal flow={currentFlow}>
|
||||
<div
|
||||
className={classNames(
|
||||
"relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-500 ease-in-out hover:bg-hover"
|
||||
)}
|
||||
>
|
||||
<ForwardedIconComponent
|
||||
name="Code2"
|
||||
className={" h-5 w-5"}
|
||||
/>
|
||||
API
|
||||
</div>
|
||||
</ApiModal>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Separator orientation="vertical" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`side-bar-button ${!hasApiKey || !validApiKey || !hasStore ? " cursor-not-allowed" : " cursor-pointer"}`}>{ModalMemo}</div>
|
||||
</ApiModal>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Separator orientation="vertical" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`side-bar-button ${
|
||||
!hasApiKey || !validApiKey || !hasStore
|
||||
? " cursor-not-allowed"
|
||||
: " cursor-pointer"
|
||||
}`}
|
||||
>
|
||||
{ModalMemo}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,18 +9,18 @@ import {
|
|||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Node } from "reactflow";
|
||||
import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
|
||||
import { SAVED_HOVER } from "../../../../constants/constants";
|
||||
import ExportModal from "../../../../modals/exportModal";
|
||||
import FlowSettingsModal from "../../../../modals/flowSettingsModal";
|
||||
import useAlertStore from "../../../../stores/alertStore";
|
||||
import useFlowStore from "../../../../stores/flowStore";
|
||||
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
|
||||
import { useStoreStore } from "../../../../stores/storeStore";
|
||||
import { cn } from "../../../../utils/utils";
|
||||
import ShadTooltip from "../../../ShadTooltipComponent";
|
||||
import IconComponent from "../../../genericIconComponent";
|
||||
import { Button } from "../../../ui/button";
|
||||
import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
|
||||
import ExportModal from "../../../../modals/exportModal";
|
||||
import { useStoreStore } from "../../../../stores/storeStore";
|
||||
|
||||
export const MenuBar = ({
|
||||
removeFunction,
|
||||
|
|
@ -121,12 +121,15 @@ export const MenuBar = ({
|
|||
<IconComponent name="FileUp" className="header-menu-options " />
|
||||
Import
|
||||
</DropdownMenuItem>
|
||||
<ExportModal>
|
||||
<div className="header-menubar-item">
|
||||
<IconComponent name="FileDown" className="header-menu-options" />
|
||||
Export
|
||||
</div>
|
||||
</ExportModal>
|
||||
<ExportModal>
|
||||
<div className="header-menubar-item">
|
||||
<IconComponent
|
||||
name="FileDown"
|
||||
className="header-menu-options"
|
||||
/>
|
||||
Export
|
||||
</div>
|
||||
</ExportModal>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
undo();
|
||||
|
|
@ -141,7 +144,9 @@ export const MenuBar = ({
|
|||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
/>
|
||||
) : (
|
||||
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
|
||||
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
|
||||
Ctrl +{" "}
|
||||
</span>
|
||||
)}
|
||||
<span className="absolute right-2 top-[0.4em]">Z</span>
|
||||
</DropdownMenuItem>
|
||||
|
|
@ -159,7 +164,9 @@ export const MenuBar = ({
|
|||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
/>
|
||||
) : (
|
||||
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
|
||||
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
|
||||
Ctrl +{" "}
|
||||
</span>
|
||||
)}
|
||||
<span className="absolute right-2 top-[0.4em]">Y</span>
|
||||
</DropdownMenuItem>
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ export default function KeypairListComponent({
|
|||
|
||||
{isList && index === ref.current.length - 1 ? (
|
||||
<button
|
||||
disabled={disabled}
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
let newInputList = _.cloneDeep(ref.current);
|
||||
newInputList.push({ "": "" });
|
||||
|
|
|
|||
|
|
@ -1,60 +1,107 @@
|
|||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
/// <reference types="vite-plugin-svgr/client" />
|
||||
//@ts-ignore
|
||||
import { ReactComponent as TransferFiles } from "../../assets/undraw_transfer_files_re_a2a9.svg"
|
||||
import { ReactComponent as TransferFiles } from "../../assets/undraw_transfer_files_re_a2a9.svg";
|
||||
//@ts-ignore
|
||||
import { ReactComponent as BasicPrompt } from "../../assets/undraw_design_components_9vy6.svg"
|
||||
import { ReactComponent as BasicPrompt } from "../../assets/undraw_design_components_9vy6.svg";
|
||||
//@ts-ignore
|
||||
import { ReactComponent as ChatWithHistory } from "../../assets/undraw_mobile_messages_re_yx8w.svg"
|
||||
import { ReactComponent as ChatWithHistory } from "../../assets/undraw_mobile_messages_re_yx8w.svg";
|
||||
//@ts-ignore
|
||||
import { ReactComponent as Assistant } from "../../assets/undraw_team_collaboration_re_ow29.svg"
|
||||
import { ReactComponent as Assistant } from "../../assets/undraw_team_collaboration_re_ow29.svg";
|
||||
//@ts-ignore
|
||||
import { ReactComponent as APIRequest } from "../../assets/undraw_real_time_analytics_re_yliv.svg"
|
||||
import { ReactComponent as APIRequest } from "../../assets/undraw_real_time_analytics_re_yliv.svg";
|
||||
import useFlowsManagerStore from "../../stores/flowsManagerStore";
|
||||
import { FlowType } from "../../types/flow"
|
||||
import { FlowType } from "../../types/flow";
|
||||
import { updateIds } from "../../utils/reactflowUtils";
|
||||
import ShadTooltip from "../ShadTooltipComponent"
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardTitle } from "../ui/card"
|
||||
import { Card, CardContent, CardDescription, CardTitle } from "../ui/card";
|
||||
|
||||
export default function UndrawCardComponent({
|
||||
flow
|
||||
}: { flow: FlowType }) {
|
||||
const addFlow = useFlowsManagerStore((state) => state.addFlow);
|
||||
const navigate = useNavigate();
|
||||
export default function UndrawCardComponent({ flow }: { flow: FlowType }) {
|
||||
const addFlow = useFlowsManagerStore((state) => state.addFlow);
|
||||
const navigate = useNavigate();
|
||||
|
||||
function selectImage() {
|
||||
switch (flow.name) {
|
||||
case "Data Ingestion":
|
||||
return <TransferFiles style={{ width: '80%', height: '80%', preserveAspectRatio: 'xMidYMid meet' }} />
|
||||
case "Basic Prompting":
|
||||
return <BasicPrompt style={{ width: '80%', height: '80%', preserveAspectRatio: 'xMidYMid meet' }} />
|
||||
case "Chat with memory":
|
||||
return <ChatWithHistory style={{ width: '70%', height: '70%', preserveAspectRatio: 'xMidYMid meet' }} />
|
||||
case "API requests":
|
||||
return <APIRequest style={{ width: '70%', height: '70%', preserveAspectRatio: 'xMidYMid meet' }} />
|
||||
case "Assistant":
|
||||
return <Assistant style={{ width: '80%', height: '80%', preserveAspectRatio: 'xMidYMid meet' }} />
|
||||
default:
|
||||
return <TransferFiles style={{ width: '80%', height: '80%', preserveAspectRatio: 'xMidYMid meet' }} />
|
||||
}
|
||||
function selectImage() {
|
||||
switch (flow.name) {
|
||||
case "Data Ingestion":
|
||||
return (
|
||||
<TransferFiles
|
||||
style={{
|
||||
width: "80%",
|
||||
height: "80%",
|
||||
preserveAspectRatio: "xMidYMid meet",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
case "Basic Prompting":
|
||||
return (
|
||||
<BasicPrompt
|
||||
style={{
|
||||
width: "80%",
|
||||
height: "80%",
|
||||
preserveAspectRatio: "xMidYMid meet",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
case "Chat with memory":
|
||||
return (
|
||||
<ChatWithHistory
|
||||
style={{
|
||||
width: "70%",
|
||||
height: "70%",
|
||||
preserveAspectRatio: "xMidYMid meet",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
case "API requests":
|
||||
return (
|
||||
<APIRequest
|
||||
style={{
|
||||
width: "70%",
|
||||
height: "70%",
|
||||
preserveAspectRatio: "xMidYMid meet",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
case "Assistant":
|
||||
return (
|
||||
<Assistant
|
||||
style={{
|
||||
width: "80%",
|
||||
height: "80%",
|
||||
preserveAspectRatio: "xMidYMid meet",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<TransferFiles
|
||||
style={{
|
||||
width: "80%",
|
||||
height: "80%",
|
||||
preserveAspectRatio: "xMidYMid meet",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card onClick={() => {
|
||||
updateIds(flow.data!);
|
||||
addFlow(true, flow).then((id) => {
|
||||
navigate("/flow/" + id);
|
||||
});
|
||||
}} className="pt-4 w-80 h-64 cursor-pointer bg-background">
|
||||
<CardContent className="w-full h-full">
|
||||
<div className="rounded-md p-1 bg-muted w-full h-full flex flex-col items-center align-middle justify-center">
|
||||
{selectImage()}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardDescription className="px-6 pb-4">
|
||||
<CardTitle className="text-primary text-lg">{flow.name}</CardTitle>
|
||||
</CardDescription>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Card
|
||||
onClick={() => {
|
||||
updateIds(flow.data!);
|
||||
addFlow(true, flow).then((id) => {
|
||||
navigate("/flow/" + id);
|
||||
});
|
||||
}}
|
||||
className="h-64 w-80 cursor-pointer bg-background pt-4"
|
||||
>
|
||||
<CardContent className="h-full w-full">
|
||||
<div className="flex h-full w-full flex-col items-center justify-center rounded-md bg-muted p-1 align-middle">
|
||||
{selectImage()}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardDescription className="px-6 pb-4">
|
||||
<CardTitle className="text-lg text-primary">{flow.name}</CardTitle>
|
||||
</CardDescription>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -750,14 +750,14 @@ Vector Store
|
|||
Assistant
|
||||
*/
|
||||
|
||||
export const EXAMPLES_MOCK:FlowType[] = [
|
||||
export const EXAMPLES_MOCK: FlowType[] = [
|
||||
{
|
||||
name: "Working with data",
|
||||
id: "Working with data Description",
|
||||
data: {
|
||||
nodes: [],
|
||||
edges: [],
|
||||
viewport: { zoom: 1, x: 1, y: 1 }
|
||||
viewport: { zoom: 1, x: 1, y: 1 },
|
||||
},
|
||||
description: "This flow represents the first process in our application.",
|
||||
folder: STARTER_FOLDER_NAME,
|
||||
|
|
@ -769,7 +769,7 @@ export const EXAMPLES_MOCK:FlowType[] = [
|
|||
data: {
|
||||
nodes: [],
|
||||
edges: [],
|
||||
viewport: { zoom: 1, x: 1, y: 1 }
|
||||
viewport: { zoom: 1, x: 1, y: 1 },
|
||||
},
|
||||
description: "This flow represents the first process in our application.",
|
||||
folder: STARTER_FOLDER_NAME,
|
||||
|
|
@ -781,7 +781,7 @@ export const EXAMPLES_MOCK:FlowType[] = [
|
|||
data: {
|
||||
nodes: [],
|
||||
edges: [],
|
||||
viewport: { zoom: 1, x: 1, y: 1 }
|
||||
viewport: { zoom: 1, x: 1, y: 1 },
|
||||
},
|
||||
description: "This flow represents the first process in our application.",
|
||||
folder: STARTER_FOLDER_NAME,
|
||||
|
|
@ -793,7 +793,7 @@ export const EXAMPLES_MOCK:FlowType[] = [
|
|||
data: {
|
||||
nodes: [],
|
||||
edges: [],
|
||||
viewport: { zoom: 1, x: 1, y: 1 }
|
||||
viewport: { zoom: 1, x: 1, y: 1 },
|
||||
},
|
||||
description: "This flow represents the first process in our application.",
|
||||
folder: STARTER_FOLDER_NAME,
|
||||
|
|
@ -805,7 +805,7 @@ export const EXAMPLES_MOCK:FlowType[] = [
|
|||
data: {
|
||||
nodes: [],
|
||||
edges: [],
|
||||
viewport: { zoom: 1, x: 1, y: 1 }
|
||||
viewport: { zoom: 1, x: 1, y: 1 },
|
||||
},
|
||||
description: "This flow represents the first process in our application.",
|
||||
folder: STARTER_FOLDER_NAME,
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import ReactFlow, {
|
|||
updateEdge,
|
||||
} from "reactflow";
|
||||
import GenericNode from "../../../../CustomNodes/GenericNode";
|
||||
import FlowToolbar from "../../../../components/chatComponent";
|
||||
import {
|
||||
INVALID_SELECTION_ERROR_ALERT,
|
||||
UPLOAD_ALERT_LIST,
|
||||
|
|
@ -37,7 +38,6 @@ import { getRandomName, isWrappedWithClass } from "../../../../utils/utils";
|
|||
import ConnectionLineComponent from "../ConnectionLineComponent";
|
||||
import SelectionMenu from "../SelectionMenuComponent";
|
||||
import ExtraSidebar from "../extraSidebarComponent";
|
||||
import FlowToolbar from "../../../../components/chatComponent";
|
||||
|
||||
const nodeTypes = {
|
||||
genericNode: GenericNode,
|
||||
|
|
|
|||
|
|
@ -267,7 +267,7 @@ export default function ExtraSidebar(): JSX.Element {
|
|||
<>
|
||||
{index === 0 && (
|
||||
<div className="pt-0.5">
|
||||
<div className="p-2 px-4 font-semibold text-sm" key={index}>
|
||||
<div className="p-2 px-4 text-sm font-semibold" key={index}>
|
||||
Native Components
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -283,7 +283,7 @@ export default function ExtraSidebar(): JSX.Element {
|
|||
{/* BUG ON THIS ICON */}
|
||||
<SparklesIcon
|
||||
strokeWidth={1.5}
|
||||
className="text-primary w-[22px]"
|
||||
className="w-[22px] text-primary"
|
||||
/>
|
||||
|
||||
<span className="components-disclosure-title">
|
||||
|
|
@ -296,7 +296,7 @@ export default function ExtraSidebar(): JSX.Element {
|
|||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div className="p-2 px-4 font-semibold text-sm" key={index}>
|
||||
<div className="p-2 px-4 text-sm font-semibold" key={index}>
|
||||
Legacy Components
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import {
|
|||
import ConfirmationModal from "../../../../modals/ConfirmationModal";
|
||||
import EditNodeModal from "../../../../modals/EditNodeModal";
|
||||
import ShareModal from "../../../../modals/shareModal";
|
||||
import useAlertStore from "../../../../stores/alertStore";
|
||||
import { useDarkStore } from "../../../../stores/darkStore";
|
||||
import useFlowStore from "../../../../stores/flowStore";
|
||||
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
|
||||
|
|
@ -27,7 +28,6 @@ import {
|
|||
updateFlowPosition,
|
||||
} from "../../../../utils/reactflowUtils";
|
||||
import { classNames, cn } from "../../../../utils/utils";
|
||||
import useAlertStore from "../../../../stores/alertStore";
|
||||
|
||||
export default function NodeToolbarComponent({
|
||||
data,
|
||||
|
|
@ -97,8 +97,8 @@ export default function NodeToolbarComponent({
|
|||
(state) => state.setLastCopiedSelection
|
||||
);
|
||||
|
||||
const setSuccessData = useAlertStore(state => state.setSuccessData);
|
||||
const setNoticeData = useAlertStore(state => state.setNoticeData);
|
||||
const setSuccessData = useAlertStore((state) => state.setSuccessData);
|
||||
const setNoticeData = useAlertStore((state) => state.setNoticeData);
|
||||
|
||||
useEffect(() => {
|
||||
setFlowComponent(createFlowComponent(cloneDeep(data), version));
|
||||
|
|
@ -166,10 +166,8 @@ export default function NodeToolbarComponent({
|
|||
{
|
||||
x: 50,
|
||||
y: 10,
|
||||
paneX: nodes.find((node) => node.id === data.id)?.position
|
||||
.x,
|
||||
paneY: nodes.find((node) => node.id === data.id)?.position
|
||||
.y,
|
||||
paneX: nodes.find((node) => node.id === data.id)?.position.x,
|
||||
paneY: nodes.find((node) => node.id === data.id)?.position.y,
|
||||
}
|
||||
);
|
||||
break;
|
||||
|
|
@ -229,7 +227,7 @@ export default function NodeToolbarComponent({
|
|||
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
const hasCode = Object.keys(data.node!.template).includes("code");
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
if (
|
||||
|
|
@ -260,18 +258,17 @@ export default function NodeToolbarComponent({
|
|||
event.preventDefault();
|
||||
setShowconfirmShare((state) => !state);
|
||||
}
|
||||
if (
|
||||
selected &&
|
||||
(event.ctrlKey || event.metaKey) &&
|
||||
event.key === "q"
|
||||
) {
|
||||
if (selected && (event.ctrlKey || event.metaKey) && event.key === "q") {
|
||||
event.preventDefault();
|
||||
if (isMinimal) {
|
||||
setShowState(show => !show)
|
||||
setShowState((show) => !show);
|
||||
setShowNode(data.showNode ?? true ? false : true);
|
||||
return
|
||||
return;
|
||||
}
|
||||
setNoticeData({title: "Minimization are only available for nodes with one handle or fewer."});
|
||||
setNoticeData({
|
||||
title:
|
||||
"Minimization are only available for nodes with one handle or fewer.",
|
||||
});
|
||||
}
|
||||
if (
|
||||
selected &&
|
||||
|
|
@ -281,7 +278,7 @@ export default function NodeToolbarComponent({
|
|||
) {
|
||||
event.preventDefault();
|
||||
if (hasCode) return setOpenModal((state) => !state);
|
||||
setNoticeData({title: `You can not access ${data.id} code`})
|
||||
setNoticeData({ title: `You can not access ${data.id} code` });
|
||||
}
|
||||
if (
|
||||
selected &&
|
||||
|
|
@ -292,11 +289,7 @@ export default function NodeToolbarComponent({
|
|||
event.preventDefault();
|
||||
setShowModalAdvanced((state) => !state);
|
||||
}
|
||||
if (
|
||||
selected &&
|
||||
(event.ctrlKey || event.metaKey) &&
|
||||
event.key === "s"
|
||||
) {
|
||||
if (selected && (event.ctrlKey || event.metaKey) && event.key === "s") {
|
||||
if (isSaved) {
|
||||
event.preventDefault();
|
||||
return setShowOverrideModal((state) => !state);
|
||||
|
|
@ -304,7 +297,7 @@ export default function NodeToolbarComponent({
|
|||
if (hasCode) {
|
||||
event.preventDefault();
|
||||
saveComponent(cloneDeep(data), false);
|
||||
setSuccessData({title: `${data.id} saved successfully`})
|
||||
setSuccessData({ title: `${data.id} saved successfully` });
|
||||
}
|
||||
}
|
||||
if (
|
||||
|
|
@ -317,7 +310,9 @@ export default function NodeToolbarComponent({
|
|||
if (data.node?.documentation) {
|
||||
return openInNewTab(data.node?.documentation);
|
||||
}
|
||||
setNoticeData({title: `${data.id} docs is not available at the moment.`})
|
||||
setNoticeData({
|
||||
title: `${data.id} docs is not available at the moment.`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -349,7 +344,8 @@ export default function NodeToolbarComponent({
|
|||
<ShadTooltip content={"Save"} side="top">
|
||||
<button
|
||||
className={classNames(
|
||||
"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", (hasCode ? " " : " rounded-l-md ")
|
||||
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
|
||||
hasCode ? " " : " rounded-l-md "
|
||||
)}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
|
|
@ -359,10 +355,7 @@ export default function NodeToolbarComponent({
|
|||
saveComponent(cloneDeep(data), false);
|
||||
}}
|
||||
>
|
||||
<IconComponent
|
||||
name="SaveAll"
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<IconComponent name="SaveAll" className="h-4 w-4" />
|
||||
</button>
|
||||
</ShadTooltip>
|
||||
|
||||
|
|
@ -425,28 +418,35 @@ export default function NodeToolbarComponent({
|
|||
<span className="">Edit</span>{" "}
|
||||
{navigator.userAgent.toUpperCase().includes("MAC") ? (
|
||||
<IconComponent
|
||||
name="Command"
|
||||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
></IconComponent>
|
||||
name="Command"
|
||||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
></IconComponent>
|
||||
) : (
|
||||
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
|
||||
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
|
||||
Ctrl +{" "}
|
||||
</span>
|
||||
)}
|
||||
<span className="absolute right-2 top-[0.46em]">E</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
)}
|
||||
)}
|
||||
<SelectItem value={"duplicate"}>
|
||||
<div className="flex" data-testid="save-button-modal">
|
||||
<IconComponent name="Copy" className="relative top-0.5 mr-2 h-4 w-4" />
|
||||
<IconComponent
|
||||
name="Copy"
|
||||
className="relative top-0.5 mr-2 h-4 w-4"
|
||||
/>
|
||||
Duplicate
|
||||
{navigator.userAgent.toUpperCase().includes("MAC") ? (
|
||||
<IconComponent
|
||||
<IconComponent
|
||||
name="Command"
|
||||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
></IconComponent>
|
||||
) : (
|
||||
<span className="absolute right-[1.20rem] top-[0.40em] stroke-2">Ctrl + </span>
|
||||
)}
|
||||
) : (
|
||||
<span className="absolute right-[1.20rem] top-[0.40em] stroke-2">
|
||||
Ctrl +{" "}
|
||||
</span>
|
||||
)}
|
||||
<span className="absolute right-2 top-[0.4em]">D</span>
|
||||
</div>{" "}
|
||||
</SelectItem>
|
||||
|
|
@ -458,13 +458,15 @@ export default function NodeToolbarComponent({
|
|||
/>{" "}
|
||||
<span className="">Copy</span>{" "}
|
||||
{navigator.userAgent.toUpperCase().includes("MAC") ? (
|
||||
<IconComponent
|
||||
<IconComponent
|
||||
name="Command"
|
||||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
></IconComponent>
|
||||
) : (
|
||||
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
|
||||
)}
|
||||
) : (
|
||||
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
|
||||
Ctrl +{" "}
|
||||
</span>
|
||||
)}
|
||||
<span className="absolute right-2 top-[0.4em]">C</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
|
|
@ -481,13 +483,14 @@ export default function NodeToolbarComponent({
|
|||
Share{" "}
|
||||
{navigator.userAgent.toUpperCase().includes("MAC") ? (
|
||||
<IconComponent
|
||||
name="Command"
|
||||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
></IconComponent>
|
||||
name="Command"
|
||||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
></IconComponent>
|
||||
) : (
|
||||
<span className="absolute right-[2.10rem] top-[0.43em] stroke-2">Ctrl</span>
|
||||
<span className="absolute right-[2.10rem] top-[0.43em] stroke-2">
|
||||
Ctrl
|
||||
</span>
|
||||
)}
|
||||
|
||||
<IconComponent
|
||||
name="ArrowBigUp"
|
||||
className="absolute right-[1.09rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
|
|
@ -518,13 +521,15 @@ export default function NodeToolbarComponent({
|
|||
/>{" "}
|
||||
<span className="">Docs</span>{" "}
|
||||
{navigator.userAgent.toUpperCase().includes("MAC") ? (
|
||||
<IconComponent
|
||||
<IconComponent
|
||||
name="Command"
|
||||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
></IconComponent>
|
||||
) : (
|
||||
<span className="absolute right-[2.10rem] top-[0.43em] stroke-2">Ctrl</span>
|
||||
)}
|
||||
) : (
|
||||
<span className="absolute right-[2.10rem] top-[0.43em] stroke-2">
|
||||
Ctrl
|
||||
</span>
|
||||
)}
|
||||
<IconComponent
|
||||
name="ArrowBigUp"
|
||||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
|
|
@ -542,11 +547,13 @@ export default function NodeToolbarComponent({
|
|||
{showNode ? "Minimize" : "Expand"}
|
||||
{navigator.userAgent.toUpperCase().includes("MAC") ? (
|
||||
<IconComponent
|
||||
name="Command"
|
||||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
></IconComponent>
|
||||
name="Command"
|
||||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
></IconComponent>
|
||||
) : (
|
||||
<span className="absolute right-[1.30rem] top-[0.40em] stroke-2">Ctrl + </span>
|
||||
<span className="absolute right-[1.30rem] top-[0.40em] stroke-2">
|
||||
Ctrl +{" "}
|
||||
</span>
|
||||
)}
|
||||
<span className="absolute right-2 top-[0.46em]">Q</span>
|
||||
</div>
|
||||
|
|
@ -562,11 +569,13 @@ export default function NodeToolbarComponent({
|
|||
<span className="">Ungroup</span>{" "}
|
||||
{navigator.userAgent.toUpperCase().includes("MAC") ? (
|
||||
<IconComponent
|
||||
name="Command"
|
||||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
></IconComponent>
|
||||
name="Command"
|
||||
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
|
||||
></IconComponent>
|
||||
) : (
|
||||
<span className="absolute right-[1.30rem] top-[0.40em] stroke-2">Ctrl + </span>
|
||||
<span className="absolute right-[1.30rem] top-[0.40em] stroke-2">
|
||||
Ctrl +{" "}
|
||||
</span>
|
||||
)}
|
||||
<span className="absolute right-2 top-[0.43em]">U</span>
|
||||
</div>
|
||||
|
|
@ -601,12 +610,12 @@ export default function NodeToolbarComponent({
|
|||
index={6}
|
||||
onConfirm={(index, user) => {
|
||||
saveComponent(cloneDeep(data), true);
|
||||
setSuccessData({title: `${data.id} successfully overridden!`})
|
||||
setSuccessData({ title: `${data.id} successfully overridden!` });
|
||||
}}
|
||||
onClose={setShowOverrideModal}
|
||||
onCancel={() => {
|
||||
saveComponent(cloneDeep(data), false)
|
||||
setSuccessData({title: "New node successfully saved!"})
|
||||
saveComponent(cloneDeep(data), false);
|
||||
setSuccessData({ title: "New node successfully saved!" });
|
||||
}}
|
||||
>
|
||||
<ConfirmationModal.Content>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,14 @@ import { Group, ToyBrick } from "lucide-react";
|
|||
import { useEffect, useState } from "react";
|
||||
import { Outlet, useLocation, useNavigate } from "react-router-dom";
|
||||
import DropdownButton from "../../components/DropdownButtonComponent";
|
||||
import NewFlowCardComponent from "../../components/NewFLowCard2";;
|
||||
import ExampleCardComponent from "../../components/exampleComponent";
|
||||
import NewFlowCardComponent from "../../components/NewFLowCard2";
|
||||
import IconComponent from "../../components/genericIconComponent";
|
||||
import PageLayout from "../../components/pageLayout";
|
||||
import SidebarNav from "../../components/sidebarComponent";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import UndrawCardComponent from "../../components/undrawCards";
|
||||
import { CONSOLE_ERROR_MSG } from "../../constants/alerts_constants";
|
||||
import {
|
||||
EXAMPLES_MOCK,
|
||||
MY_COLLECTION_DESC,
|
||||
USER_PROJECTS_HEADER,
|
||||
} from "../../constants/constants";
|
||||
|
|
@ -18,7 +17,6 @@ import BaseModal from "../../modals/baseModal";
|
|||
import useAlertStore from "../../stores/alertStore";
|
||||
import useFlowsManagerStore from "../../stores/flowsManagerStore";
|
||||
import { downloadFlows } from "../../utils/reactflowUtils";
|
||||
import UndrawCardComponent from "../../components/undrawCards";
|
||||
export default function HomePage(): JSX.Element {
|
||||
const addFlow = useFlowsManagerStore((state) => state.addFlow);
|
||||
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
|
||||
|
|
@ -120,9 +118,7 @@ export default function HomePage(): JSX.Element {
|
|||
</div>
|
||||
</div>
|
||||
<BaseModal size="three-cards" open={openModal} setOpen={setOpenModal}>
|
||||
<BaseModal.Header
|
||||
description={"Select a template below"}
|
||||
>
|
||||
<BaseModal.Header description={"Select a template below"}>
|
||||
<span className="pr-2" data-testid="modal-title">
|
||||
Get Started
|
||||
</span>
|
||||
|
|
@ -133,7 +129,7 @@ export default function HomePage(): JSX.Element {
|
|||
/> */}
|
||||
</BaseModal.Header>
|
||||
<BaseModal.Content>
|
||||
<div className=" h-full w-full grid grid-cols-3 gap-3 overflow-auto p-4 custom-scroll">
|
||||
<div className=" grid h-full w-full grid-cols-3 gap-3 overflow-auto p-4 custom-scroll">
|
||||
{examples.map((example, idx) => {
|
||||
return <UndrawCardComponent key={idx} flow={example} />;
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ module.exports = {
|
|||
"beta-foreground": "var(--beta-foreground)",
|
||||
"chat-bot-icon": "var(--chat-bot-icon)",
|
||||
"chat-user-icon": "var(--chat-user-icon)",
|
||||
"ice": "var(--ice)",
|
||||
ice: "var(--ice)",
|
||||
hover: "var(--hover)",
|
||||
white: "var(--white)",
|
||||
border: "hsl(var(--border))",
|
||||
|
|
@ -224,6 +224,6 @@ module.exports = {
|
|||
}),
|
||||
require("@tailwindcss/typography"),
|
||||
require("daisyui"),
|
||||
require('tailwindcss-dotted-background'),
|
||||
require("tailwindcss-dotted-background"),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue