= ({
18 | setMediaAct,
19 | media,
20 | currentNum,
21 | }) => {
22 | const paginate = (newDirection: number) => {
23 | const cur = (currentNum + newDirection + media.length) % media.length;
24 | if (setMediaAct) {
25 | setMediaAct(media[cur]);
26 | }
27 | };
28 |
29 | const imageSize = {
30 | width: "100%", // Adjust the width as needed
31 | height: "100%", // Adjust the height as needed
32 | };
33 |
34 | if (media.length === 0)
35 | return No images found, let's start generating 🪄
;
36 | const item = media.at(currentNum);
37 | if (!item) return null;
38 | return (
39 |
47 | {
56 | window.open(item.imageUrl);
57 | }}
58 | >
59 | {isImageFormat(item.imageUrl) ? (
60 |
67 | ) : (
68 |
79 | )}
80 |
81 |
82 | }
88 | onClick={() => paginate(-1)}
89 | position="absolute"
90 | left="0"
91 | zIndex="2"
92 | />
93 | }
99 | onClick={() => paginate(1)}
100 | position="absolute"
101 | right="0"
102 | zIndex="2"
103 | />
104 |
105 | );
106 | };
107 |
108 | export default Carousel;
109 |
--------------------------------------------------------------------------------
/ui/src/components/CopyShareLinkMenuItem.tsx:
--------------------------------------------------------------------------------
1 | import { HStack, MenuItem, Spinner, useToast } from "@chakra-ui/react";
2 | import { IconLink } from "@tabler/icons-react";
3 | import { useContext, useState } from "react";
4 | import { WorkspaceContext } from "../WorkspaceContext";
5 | import { copySharelink } from "./copySharelink";
6 | import { Workflow } from "../types/dbTypes";
7 |
8 | export default function CopyShareLinkMenuItem({
9 | curFlow,
10 | }: {
11 | curFlow: Workflow;
12 | }) {
13 | const { session } = useContext(WorkspaceContext);
14 | const toast = useToast();
15 | const [loading, setloading] = useState(false);
16 |
17 | return (
18 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/ui/src/components/CustomMenu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react";
2 | import { Box, useOutsideClick } from "@chakra-ui/react";
3 |
4 | type Props = {
5 | menuButton: React.ReactElement;
6 | options: React.ReactElement;
7 | isOpen: boolean;
8 | onClose: () => void;
9 | };
10 | export default function CustomMenu({
11 | options,
12 | menuButton,
13 | isOpen,
14 | onClose,
15 | }: Props) {
16 | const ref = useRef(null);
17 | useOutsideClick({
18 | ref: ref,
19 | handler: () => onClose(),
20 | });
21 |
22 | return (
23 |
24 | {menuButton}
25 | {isOpen && (
26 |
34 | {options}
35 |
36 | )}
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/ui/src/components/CustomSelector.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from "react";
2 | import { Box, Button, Card } from "@chakra-ui/react";
3 | import { IconChevronDown } from "@tabler/icons-react";
4 |
5 | export interface CustomSelectorOption {
6 | label: string;
7 | value: T;
8 | icon?: React.ReactElement;
9 | }
10 |
11 | type Props = {
12 | options: CustomSelectorOption[];
13 | value: T;
14 | onChange: (value: T) => void;
15 | };
16 | export default function CustomSelector({
17 | options,
18 | value,
19 | onChange,
20 | }: Props) {
21 | const [isOpen, setIsOpen] = useState(false);
22 | const ref = useRef(null);
23 | const selectedOption = options.find((option) => option.value === value);
24 |
25 | useEffect(() => {
26 | const handleClickOutside = (event: any) => {
27 | if (ref.current && !ref.current.contains(event.target)) {
28 | setIsOpen(false);
29 | }
30 | };
31 | document.addEventListener("mousedown", handleClickOutside);
32 | return () => {
33 | document.removeEventListener("mousedown", handleClickOutside);
34 | };
35 | }, [ref]);
36 |
37 | const toggleDropdown = () => setIsOpen(!isOpen);
38 |
39 | return (
40 |
41 | }
44 | leftIcon={selectedOption?.icon}
45 | >
46 | {selectedOption?.label}
47 |
48 | {isOpen && (
49 |
59 | {options.map((option) => (
60 |
73 | ))}
74 |
75 | )}
76 |
77 | );
78 | }
79 |
--------------------------------------------------------------------------------
/ui/src/components/DeleteConfirm.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Button,
3 | Popover,
4 | PopoverTrigger,
5 | PopoverContent,
6 | PopoverCloseButton,
7 | PopoverArrow,
8 | PopoverBody,
9 | Text,
10 | IconButton,
11 | Tooltip,
12 | Box,
13 | } from "@chakra-ui/react";
14 | import { IconTrash } from "@tabler/icons-react";
15 |
16 | type Props = {
17 | promptMessage: string;
18 | isDisabled?: boolean;
19 | variant?: string;
20 | tooltipText?: string;
21 | onDelete: () => void;
22 | };
23 |
24 | export default function DeleteConfirm(props: Props) {
25 | const {
26 | promptMessage = "Are you sure you want to delete this?",
27 | variant = "ghost",
28 | onDelete,
29 | isDisabled = false,
30 | tooltipText,
31 | } = props;
32 |
33 | return (
34 |
35 | {({ onClose }) => (
36 | <>
37 |
38 |
39 |
40 | }
44 | isDisabled={isDisabled}
45 | variant={variant}
46 | />
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | {promptMessage}
55 |
56 |
66 |
67 |
68 |
69 | )}
70 |
71 | );
72 | }
73 |
--------------------------------------------------------------------------------
/ui/src/components/Draggable.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | useState,
3 | useCallback,
4 | MouseEvent,
5 | useRef,
6 | PropsWithChildren,
7 | } from "react";
8 |
9 | const POSITION = { x: 0, y: 0 };
10 |
11 | interface Props {
12 | onDragEnd: (position: { x: number; y: number }) => void;
13 | dragIconId: string;
14 | }
15 |
16 | export default function Draggable({
17 | children,
18 | onDragEnd,
19 | dragIconId,
20 | }: PropsWithChildren) {
21 | const originRef = useRef(POSITION);
22 | const isDraggingRef = useRef(false);
23 | const [translation, setTranslation] = useState(POSITION);
24 |
25 | const handleMouseDown = (e: MouseEvent) => {
26 | if (
27 | !(e.target instanceof Element) ||
28 | !(e.target.parentNode instanceof Element)
29 | ) {
30 | return;
31 | }
32 | if ([e.target?.id, e.target?.parentNode?.id].includes(dragIconId)) {
33 | originRef.current = {
34 | x: e.clientX,
35 | y: e.clientY,
36 | };
37 | isDraggingRef.current = true;
38 | window.addEventListener("mousemove", handleMouseMove);
39 | window.addEventListener("mouseup", handleMouseUp);
40 | const bodyEle = document.getElementsByTagName("body")[0];
41 | bodyEle.style.userSelect = "none";
42 | }
43 | };
44 |
45 | const handleMouseMove = useCallback((e: globalThis.MouseEvent) => {
46 | const translation = {
47 | x: e.clientX - originRef.current.x,
48 | y: e.clientY - originRef.current.y,
49 | };
50 |
51 | setTranslation(translation);
52 | }, []);
53 |
54 | const handleMouseUp = useCallback(() => {
55 | setTranslation((state) => {
56 | setTimeout(() => {
57 | onDragEnd(state);
58 | }, 0);
59 | return POSITION;
60 | });
61 | isDraggingRef.current = false;
62 | const bodyEle = document.getElementsByTagName("body")[0];
63 | bodyEle.style.userSelect = "auto";
64 | window.removeEventListener("mousemove", handleMouseMove);
65 | window.removeEventListener("mouseup", handleMouseUp);
66 | }, [onDragEnd, handleMouseMove]);
67 |
68 | const styles = {
69 | transform: `translate(${translation.x}px, ${translation.y}px)`,
70 | zIndex: isDraggingRef.current ? 1000 : 1,
71 | };
72 |
73 | return (
74 |
75 | {children}
76 |
77 | );
78 | }
79 |
--------------------------------------------------------------------------------
/ui/src/components/EditFolderName.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Button,
3 | Modal,
4 | ModalOverlay,
5 | ModalContent,
6 | ModalHeader,
7 | ModalCloseButton,
8 | ModalBody,
9 | ModalFooter,
10 | FormControl,
11 | FormLabel,
12 | FormErrorMessage,
13 | Input,
14 | } from "@chakra-ui/react";
15 | import { useContext, ChangeEvent, useState } from "react";
16 | import { foldersTable } from "../db-tables/WorkspaceDB";
17 | import { RecentFilesContext } from "../WorkspaceContext";
18 | import { Folder } from "../types/dbTypes";
19 |
20 | type Props = {
21 | folder: Folder;
22 | onclose: () => void;
23 | };
24 |
25 | export default function EditFolderNameModal({ folder, onclose }: Props) {
26 | // const { curFlowID } = useContext(WorkspaceContext);
27 | const [editName, setEditName] = useState(folder.name);
28 | const [submitError, setSubmitError] = useState("");
29 | const { onRefreshFilesList } = useContext(RecentFilesContext);
30 | const handleChange = (event: ChangeEvent) => {
31 | setEditName(event.target.value);
32 | submitError && setSubmitError("");
33 | };
34 |
35 | const onSubmit = async () => {
36 | const trimEditName = editName.trim();
37 | setEditName(trimEditName);
38 | if (trimEditName === folder.name) return onclose();
39 | const uniqName = await foldersTable?.generateUniqueName(
40 | trimEditName,
41 | folder.parentFolderID ?? "",
42 | );
43 | if (uniqName !== trimEditName) {
44 | setSubmitError(
45 | "The name is duplicated, please modify it and submit again.",
46 | );
47 | } else {
48 | await foldersTable?.update(folder.id, {
49 | name: trimEditName,
50 | });
51 | onRefreshFilesList && onRefreshFilesList();
52 | onclose();
53 | }
54 | };
55 |
56 | return (
57 |
58 |
59 |
60 | Edit folder name
61 |
62 |
63 |
64 | Folder name
65 | {
70 | e.code === "Enter" && !submitError && editName && onSubmit();
71 | }}
72 | />
73 | {submitError && {submitError}}
74 |
75 |
76 |
77 |
85 |
86 |
87 |
88 |
89 | );
90 | }
91 |
--------------------------------------------------------------------------------
/ui/src/components/HoverMenu.tsx:
--------------------------------------------------------------------------------
1 | import { useRef, useState } from "react";
2 | import CustomMenu from "./CustomMenu";
3 | import { Box, Menu, MenuList } from "@chakra-ui/react";
4 | type Props = {
5 | menuButton: React.ReactElement;
6 | menuContent: React.ReactElement;
7 | onClose?: () => void;
8 | };
9 | export default function HoverMenu({ menuButton, menuContent, onClose }: Props) {
10 | const closeTimeoutId = useRef();
11 | const [isOpen, setIsOpen] = useState(false);
12 | const delayedClose = () => {
13 | closeTimeoutId.current = setTimeout(() => setIsOpen(false), 400); // delay of 300ms
14 | };
15 |
16 | const onOpen = () => {
17 | setIsOpen(true);
18 | clearTimeout(closeTimeoutId.current);
19 | closeTimeoutId.current = undefined;
20 | };
21 | return (
22 |
32 | {menuButton}
33 |
34 | }
35 | options={
36 |
46 | }
47 | />
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/ui/src/components/MediaPreview.tsx:
--------------------------------------------------------------------------------
1 | import { Image } from "@chakra-ui/react";
2 | import { isImageFormat } from "../utils";
3 | import { useEffect, useState } from "react";
4 |
5 | type Props = {
6 | mediaLocalPath: string;
7 | size: number;
8 | autoPlay?: boolean;
9 | onBrokenLink?: () => void;
10 | hideBrokenImage?: boolean;
11 | isPreview?: boolean;
12 | objectFit?: "cover" | "contain";
13 | };
14 | export default function MediaPreview({
15 | mediaLocalPath,
16 | size,
17 | isPreview,
18 | autoPlay,
19 | hideBrokenImage,
20 | objectFit,
21 | onBrokenLink,
22 | }: Props) {
23 | const [isVisible, setIsVisible] = useState(true);
24 |
25 | useEffect(() => {
26 | const checkMediaExists = async () => {
27 | try {
28 | const response = await fetch(
29 | isPreview
30 | ? `/workspace/preview_media?filename=${mediaLocalPath}`
31 | : `/workspace/view_media?filename=${mediaLocalPath}`,
32 | );
33 | if (response.status == 404) {
34 | setIsVisible(false);
35 | onBrokenLink?.();
36 | return;
37 | }
38 | } catch (error) {
39 | console.error("Error checking media exists", error);
40 | }
41 | };
42 |
43 | hideBrokenImage && checkMediaExists();
44 | }, []);
45 |
46 | if (!isVisible) return null;
47 | return isImageFormat(mediaLocalPath) ? (
48 |
55 | ) : null;
56 | }
57 |
--------------------------------------------------------------------------------
/ui/src/components/Overlay.tsx:
--------------------------------------------------------------------------------
1 | export function Overlay({
2 | backgroundColor,
3 | }: {
4 | backgroundColor?: string | null;
5 | }) {
6 | const bg =
7 | backgroundColor === undefined
8 | ? "rgba(0,0,0,0.5)"
9 | : backgroundColor ?? undefined;
10 | return (
11 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/ui/src/components/SearchInput.tsx:
--------------------------------------------------------------------------------
1 | import { Box, IconButton, Input } from "@chakra-ui/react";
2 | import { IconSearch, IconX } from "@tabler/icons-react";
3 | import { CSSProperties } from "react";
4 |
5 | type Props = {
6 | searchValue: string;
7 | onUpdateSearchValue: (value: string) => void;
8 | placeholder?: string;
9 | style?: CSSProperties;
10 | };
11 |
12 | const IconSearchStyle: CSSProperties = {
13 | position: "absolute",
14 | marginLeft: "10px",
15 | width: "20px",
16 | height: "20px",
17 | top: "50%",
18 | color: "#A0AEC0",
19 | transform: "translateY(-50%)",
20 | };
21 |
22 | export default function SearchInput(props: Props) {
23 | const { searchValue, onUpdateSearchValue, style } = props;
24 | const isSearchValueNotEmpty = searchValue !== "";
25 |
26 | return (
27 |
28 |
29 | {isSearchValueNotEmpty && (
30 | }
40 | onClick={() => onUpdateSearchValue("")}
41 | aria-label="clear input button"
42 | />
43 | )}
44 | onUpdateSearchValue(target.value)}
51 | />
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/ui/src/components/copySharelink.tsx:
--------------------------------------------------------------------------------
1 | import { userSettingsTable, workflowsTable } from "../db-tables/WorkspaceDB";
2 | import { getNodeDefs } from "../share/shareUtils";
3 | import { EWorkflowPrivacy, Workflow } from "../types/dbTypes";
4 | import { ShareWorkflowData } from "../types/types";
5 | import { app } from "../utils/comfyapp";
6 |
7 | export async function copySharelink(
8 | shareKey: string,
9 | curWorkflow: Workflow,
10 | ): Promise<{
11 | link?: string | null;
12 | error?: string | null;
13 | } | null> {
14 | if (curWorkflow.cloudID) {
15 | const link =
16 | userSettingsTable?.settings?.cloudHost +
17 | "/workflow/" +
18 | curWorkflow.cloudID;
19 | return {
20 | link,
21 | };
22 | }
23 | const prompt = await app.graphToPrompt();
24 | const graph = app.graph.serialize();
25 | if (!graph.extra) {
26 | graph.extra = {};
27 | }
28 | graph.extra.apiPrompt = prompt.output ?? null;
29 | const input: ShareWorkflowData = {
30 | workflow: {
31 | name: curWorkflow?.name ?? "Untitled",
32 | cloudID: curWorkflow?.cloudID,
33 | },
34 | version: {
35 | name: "v1",
36 | json: JSON.stringify(graph),
37 | },
38 | nodeDefs: getNodeDefs(),
39 | privacy: EWorkflowPrivacy.UNLISTED,
40 | };
41 | return await fetch(
42 | userSettingsTable?.settings?.cloudHost + "/api/createCloudflow",
43 | {
44 | method: "POST",
45 | headers: {
46 | "Content-Type": "application/json",
47 | Authorization: `Bearer ${shareKey}`,
48 | },
49 | body: JSON.stringify(input),
50 | },
51 | )
52 | .then((resp) => resp.json())
53 | .then((data) => {
54 | if (data?.data) {
55 | const cloudID = data.data.workflowID;
56 | workflowsTable?.updateMetaInfo(curWorkflow?.id!, {
57 | cloudID,
58 | });
59 |
60 | const link =
61 | userSettingsTable?.settings?.cloudHost + "/workflow/" + cloudID;
62 | return {
63 | link,
64 | };
65 | } else {
66 | return {
67 | error: "Failed to create version. " + (data?.error ?? ""),
68 | };
69 | }
70 | })
71 | .catch((e) => {
72 | return {
73 | error: "Failed to create version. " + (e?.error ?? ""),
74 | };
75 | });
76 | }
77 |
--------------------------------------------------------------------------------
/ui/src/const.ts:
--------------------------------------------------------------------------------
1 | export const LEGACY_COMFYSPACE_TRACKING_FIELD_NAME = "comfyspace_tracking";
2 | export const COMFYSPACE_TRACKING_FIELD_NAME = "workspace_info";
3 | export const COMFYSPACE_AUTH_ENDPOINT = "comfyspace_auth";
4 | export const COMFYSPACE_AUTH_REDIRECT_URL = "http://localhost:8188/";
5 | export const DRAWER_Z_INDEX = 9999999;
6 | export const UPGRADE_TO_2WAY_SYNC_KEY = "upgrade_to_2way_sync";
7 | export const TOPBAR_BUTTON_HEIGHT = 28;
8 | export const SHORTCUT_TRIGGER_EVENT = "SHORTCUT_TRIGGER_EVENT";
9 |
--------------------------------------------------------------------------------
/ui/src/customHooks/useDebounce.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export const useDebounce = (value: T, delay: number): T => {
4 | const [debouncedValue, setDebouncedValue] = useState(value);
5 |
6 | useEffect(() => {
7 | const handler = setTimeout(() => {
8 | setDebouncedValue(value);
9 | }, delay);
10 |
11 | return () => {
12 | clearTimeout(handler);
13 | };
14 | }, [value, delay]);
15 |
16 | return debouncedValue;
17 | };
18 |
--------------------------------------------------------------------------------
/ui/src/customHooks/useDebounceFn.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef } from "react";
2 |
3 | export default function useDebounceFn void>(
4 | fn: T,
5 | delay: number,
6 | ): [T, () => void] {
7 | const timeoutRef = useRef(0);
8 |
9 | const cancel = useCallback(() => {
10 | if (timeoutRef.current !== null) {
11 | clearTimeout(timeoutRef.current);
12 | timeoutRef.current = 0;
13 | }
14 | }, []);
15 |
16 | const debouncedFn = useCallback(
17 | (...args: Parameters) => {
18 | cancel();
19 | timeoutRef.current = setTimeout(() => fn(...args), delay);
20 | },
21 | [fn, delay, cancel],
22 | ) as T;
23 |
24 | useEffect(() => {
25 | return () => {
26 | cancel();
27 | };
28 | }, []);
29 |
30 | return [debouncedFn, cancel];
31 | }
32 |
--------------------------------------------------------------------------------
/ui/src/customHooks/useStateRef.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useRef, useState, SetStateAction, Dispatch } from "react";
2 |
3 | const isFunction = (
4 | setStateAction: SetStateAction,
5 | ): setStateAction is (prevState: S) => S =>
6 | typeof setStateAction === "function";
7 |
8 | type ReadOnlyRefObject = {
9 | readonly current: T;
10 | };
11 |
12 | type UseStateRef = {
13 | (
14 | initialState: S | (() => S),
15 | ): [S, Dispatch>, ReadOnlyRefObject];
16 | (): [
17 | S | undefined,
18 | Dispatch>,
19 | ReadOnlyRefObject,
20 | ];
21 | };
22 |
23 | export const useStateRef: UseStateRef = (initialState?: S | (() => S)) => {
24 | const [state, setState] = useState(initialState);
25 | const ref = useRef(state);
26 |
27 | const dispatch: typeof setState = useCallback((setStateAction: any) => {
28 | ref.current = isFunction(setStateAction)
29 | ? setStateAction(ref.current)
30 | : setStateAction;
31 |
32 | setState(ref.current);
33 | }, []);
34 |
35 | return [state, dispatch, ref];
36 | };
37 |
--------------------------------------------------------------------------------
/ui/src/db-tables/ChangelogsTable.ts:
--------------------------------------------------------------------------------
1 | import { nanoid } from "nanoid";
2 | import { Table, userSettingsTable } from "./WorkspaceDB";
3 | import { Changelog } from "../types/dbTypes";
4 | import { TableBase } from "./TableBase";
5 | import { indexdb } from "./indexdb";
6 | const LIMIT = 80;
7 | export class ChangelogsTable extends TableBase {
8 | static readonly TABLE_NAME: Table = "changelogs";
9 | constructor() {
10 | super("changelogs");
11 | }
12 | static async load(): Promise {
13 | const instance = new ChangelogsTable();
14 | return instance;
15 | }
16 |
17 | public async listByWorkflowID(workflowID: string): Promise {
18 | const objects = await indexdb["changelogs"]
19 | .where("workflowID")
20 | .equals(workflowID)
21 | .reverse()
22 | .sortBy("createTime");
23 | return objects;
24 | }
25 | public async getLastestByWorkflowID(workflowID: string): Promise {
26 | const objects = await this.listByWorkflowID(workflowID);
27 | return objects[0];
28 | }
29 | public async create(input: {
30 | json: string;
31 | workflowID: string;
32 | isAutoSave: boolean;
33 | }): Promise {
34 | const latest = await this.getLastestByWorkflowID(input.workflowID);
35 | // only create when there is a change
36 | if (latest != null && latest.json === input.json) {
37 | return null;
38 | }
39 |
40 | const change: Changelog = {
41 | id: nanoid(),
42 | json: input.json,
43 | workflowID: input.workflowID,
44 | createTime: Date.now(),
45 | isAutoSave: input.isAutoSave,
46 | };
47 | await indexdb.changelogs.add(change);
48 | await this.deleteLogsExceedLimit(input.workflowID);
49 | return change;
50 | }
51 | async deleteLogsExceedLimit(workflowID: string) {
52 | const all = await indexdb.changelogs
53 | .where("workflowID")
54 | .equals(workflowID)
55 | .reverse()
56 | .sortBy("createTime");
57 | const limit = userSettingsTable?.settings?.maximumChangelogNumber ?? LIMIT;
58 | if (all.length > limit) {
59 | const toDelete = all.slice(limit);
60 | await indexdb.changelogs.bulkDelete(toDelete.map((c) => c.id));
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/ui/src/db-tables/DiskFileUtils.ts:
--------------------------------------------------------------------------------
1 | import { foldersTable, workflowsTable, userSettingsTable } from "./WorkspaceDB";
2 | import { TwowayFolderSyncAPI } from "../apis/TwowaySyncFolderApi";
3 |
4 | export async function genFolderRelPath(
5 | folderId: string | null,
6 | ): Promise {
7 | let filePath = "";
8 | let curFolderID = folderId;
9 | while (curFolderID != null) {
10 | const folder = await foldersTable?.get(curFolderID);
11 | if (folder == null) {
12 | break;
13 | }
14 | const folderName = folder.name;
15 | filePath = `${folderName}/${filePath}`;
16 | curFolderID = folder.parentFolderID ?? null;
17 | }
18 |
19 | return filePath;
20 | }
21 |
22 | export async function getFileCountInFolder(folderId: string): Promise {
23 | const twoWaySyncEnabled = await userSettingsTable?.getSetting("twoWaySync");
24 | if (twoWaySyncEnabled) {
25 | return (await TwowayFolderSyncAPI.genFilesCountInFolder(folderId)) ?? 0;
26 | }
27 | const allFlows = (await workflowsTable?.listAll()) ?? [];
28 | const allFolders = (await foldersTable?.listAll()) ?? [];
29 | const nestedFolderIdStack = [folderId];
30 | let count = 0;
31 |
32 | while (nestedFolderIdStack.length > 0) {
33 | const curFolderId = nestedFolderIdStack.shift();
34 |
35 | if (curFolderId) {
36 | for (const flow of allFlows) {
37 | if (flow.parentFolderID === curFolderId) {
38 | count++;
39 | }
40 | }
41 |
42 | const curNestedFolderIds = allFolders
43 | .filter((f) => f.parentFolderID === curFolderId)
44 | .map((f) => f.id);
45 |
46 | if (curNestedFolderIds.length) {
47 | nestedFolderIdStack.push(...curNestedFolderIds);
48 | }
49 | }
50 | }
51 |
52 | return count;
53 | }
54 |
--------------------------------------------------------------------------------
/ui/src/db-tables/IndexDBUtils.ts:
--------------------------------------------------------------------------------
1 | // Legacy indexdb backup, to be deleted after indexdb migration is done
2 |
3 | const WORKSPACE_KEY = "backup";
4 | const WORKSPACE_TABLE = "workspace";
5 | let indexDB: IDBDatabase | null = null;
6 | // Function to open a database
7 | function openDatabase(): Promise {
8 | return new Promise((resolve, reject) => {
9 | const request = indexedDB.open("WorkspaceDB", 3);
10 |
11 | request.onupgradeneeded = (event) => {
12 | const db = (event.target as IDBOpenDBRequest).result;
13 | // Create an object store if it doesn't exist
14 | if (!db.objectStoreNames.contains(WORKSPACE_TABLE)) {
15 | db.createObjectStore(WORKSPACE_TABLE, { keyPath: "id" });
16 | }
17 | };
18 |
19 | request.onsuccess = (event) => {
20 | resolve((event.target as IDBOpenDBRequest).result);
21 | };
22 |
23 | request.onerror = (event) => {
24 | reject((event.target as IDBOpenDBRequest).error);
25 | };
26 | });
27 | }
28 |
29 | // Function to write data to the database
30 | async function writeWorkspaceTable(data: string): Promise {
31 | try {
32 | if (indexDB == null) indexDB = await openDatabase();
33 |
34 | return new Promise((resolve, reject) => {
35 | if (indexDB == null) return reject("indexDB is null");
36 | const transaction = indexDB.transaction([WORKSPACE_TABLE], "readwrite");
37 | const store = transaction.objectStore(WORKSPACE_TABLE);
38 | const request = store.put({ id: WORKSPACE_KEY, value: data });
39 |
40 | request.onsuccess = () => resolve();
41 | request.onerror = () => reject(request.error);
42 | });
43 | } catch (error) {
44 | console.error("Error while opening database:", error);
45 | }
46 | }
47 |
48 | // Function to read data from the database
49 | async function readDataFromDatabase(): Promise {
50 | try {
51 | if (indexDB == null) indexDB = await openDatabase();
52 |
53 | return new Promise((resolve, reject) => {
54 | if (indexDB == null) return reject("indexDB is null");
55 |
56 | const transaction = indexDB.transaction([WORKSPACE_TABLE], "readonly");
57 | const store = transaction.objectStore(WORKSPACE_TABLE);
58 | const request = store.get(WORKSPACE_KEY);
59 |
60 | request.onsuccess = () => {
61 | if (request.result) {
62 | resolve(request.result.value);
63 | } else {
64 | resolve(undefined); // Key not found
65 | }
66 | };
67 | request.onerror = () => reject(request.error);
68 | });
69 | } catch (error) {
70 | console.error("Error while reading from database:", error);
71 | }
72 | }
73 |
74 | export async function getWorkspaceIndexDB() {
75 | try {
76 | const comfyspaceData = await readDataFromDatabase();
77 |
78 | return comfyspaceData;
79 | } catch (error) {
80 | console.error("Error retrieving data from IndexedDB:", error);
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/ui/src/db-tables/MediaTable.ts:
--------------------------------------------------------------------------------
1 | import { Table, workflowsTable } from "./WorkspaceDB";
2 | import { TableBase } from "./TableBase";
3 | import { Media } from "../types/dbTypes";
4 | import { indexdb } from "./indexdb";
5 |
6 | export class MediaTable extends TableBase {
7 | static readonly TABLE_NAME: Table = "media";
8 | constructor() {
9 | super("media");
10 | }
11 | public async listByWorkflowID(workflowID: string): Promise {
12 | const medias = await indexdb["media"]
13 | .where("workflowID")
14 | .equals(workflowID)
15 | .reverse()
16 | .sortBy("createTime");
17 | return medias;
18 | }
19 |
20 | public async create(input: {
21 | localPath: string;
22 | workflowID: string;
23 | }): Promise {
24 | const format = input.localPath.split(".").pop();
25 | if (format == null) return null;
26 |
27 | const md: Media = {
28 | id: input.localPath,
29 | localPath: input.localPath,
30 | workflowID: input.workflowID,
31 | createTime: Date.now(),
32 | };
33 | await workflowsTable?.updateMetaInfo(input.workflowID, {
34 | latestImage: md.localPath,
35 | });
36 | // save indexdb
37 | indexdb.media.put(md);
38 | return md;
39 | }
40 |
41 | async delete(id: string): Promise {
42 | super.delete(id);
43 | if (workflowsTable?.curWorkflow?.coverMediaPath === id) {
44 | workflowsTable?.updateMetaInfo(workflowsTable.curWorkflow.id, {
45 | coverMediaPath: undefined,
46 | });
47 | }
48 | if (workflowsTable?.curWorkflow?.latestImage === id) {
49 | workflowsTable?.updateMetaInfo(workflowsTable.curWorkflow.id, {
50 | latestImage: undefined,
51 | });
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/ui/src/db-tables/ModelsTable.ts:
--------------------------------------------------------------------------------
1 | import { Model } from "../types/dbTypes";
2 | import { Table } from "./WorkspaceDB";
3 | import { TableBase } from "./TableBase";
4 |
5 | export class ModelsTable extends TableBase {
6 | static readonly TABLE_NAME: Table = "models";
7 | constructor() {
8 | super("models");
9 | }
10 | static async load(): Promise {
11 | const instance = new ModelsTable();
12 | return instance;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/ui/src/db-tables/UserSettingsTable.ts:
--------------------------------------------------------------------------------
1 | import type { UserSettings } from "../types/dbTypes";
2 | import { TableBase } from "./TableBase";
3 | import { MODEL_TYPE_TO_FOLDER_MAPPING } from "../model-manager/install-models/util/modelTypes";
4 | import { fetchApi, fetchMyWorkflowsDir } from "../Api";
5 |
6 | export class UserSettingsTable extends TableBase {
7 | public defaultSettings: UserSettings;
8 | public readonly DEFAULT_USER = "guest";
9 | static readonly TABLE_NAME = "userSettings";
10 |
11 | private _settings: UserSettings | undefined = undefined;
12 |
13 | get settings() {
14 | return this._settings;
15 | }
16 |
17 | constructor() {
18 | super("userSettings");
19 | this.defaultSettings = {
20 | id: this.DEFAULT_USER,
21 | topBarStyle: {
22 | top: 0,
23 | left: 0,
24 | },
25 | myWorkflowsDir: "",
26 | shortcuts: {
27 | save: "Shift+S",
28 | saveAs: "Control+Alt+S",
29 | openSpotlightSearch: "Control+P",
30 | },
31 | defaultFolders: MODEL_TYPE_TO_FOLDER_MAPPING,
32 | autoSave: false,
33 | autoSaveDuration: 3,
34 | twoWaySync: false,
35 | foldersOnTop: false,
36 | cloudHost: "https://www.nodecafe.co",
37 | maximumChangelogNumber: 80,
38 | hideCoverImage: false,
39 | disableUnsavedWarning: false,
40 | };
41 | }
42 |
43 | public async getSetting(
44 | key: K,
45 | ): Promise {
46 | const currentUserSettings: UserSettings | undefined = await this.get(
47 | this.DEFAULT_USER,
48 | );
49 | if (key === "shortcuts" && currentUserSettings?.shortcuts) {
50 | return {
51 | ...this.defaultSettings.shortcuts,
52 | ...currentUserSettings.shortcuts,
53 | } as UserSettings[K];
54 | }
55 | return currentUserSettings?.[key] ?? this.defaultSettings[key];
56 | }
57 | public async get(_id: string): Promise {
58 | const obj = await fetchApi("/workspace/get_settings", {
59 | headers: {
60 | "Content-Type": "application/json",
61 | },
62 | }).then((res) => res.json());
63 | return obj as any;
64 | }
65 |
66 | public async upsert(newPairs: Partial) {
67 | const oldSettings =
68 | (await this.get(this.DEFAULT_USER)) ?? this.defaultSettings;
69 | const newSettings = {
70 | ...oldSettings,
71 | ...newPairs,
72 | };
73 | await fetchApi("/workspace/save_settings", {
74 | method: "POST",
75 | body: JSON.stringify(newSettings),
76 | headers: {
77 | "Content-Type": "application/json",
78 | },
79 | });
80 | this._settings = {
81 | ...this.defaultSettings,
82 | ...newSettings,
83 | };
84 | }
85 |
86 | static async load(): Promise {
87 | const instance = new UserSettingsTable();
88 | const myWorkflowsDir = await fetchMyWorkflowsDir();
89 |
90 | instance.defaultSettings.myWorkflowsDir = myWorkflowsDir.path!;
91 |
92 | await instance.get(instance.DEFAULT_USER).then((res) => {
93 | instance._settings = {
94 | ...instance.defaultSettings,
95 | ...res,
96 | };
97 | });
98 | if (
99 | instance._settings?.cloudHost?.includes("nodecafe.org") ||
100 | instance._settings?.cloudHost?.includes("comfyspace.art")
101 | ) {
102 | // overwrite legacy comfyspace.art
103 | await instance.upsert({
104 | cloudHost: instance.defaultSettings.cloudHost,
105 | });
106 | }
107 | return instance;
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/ui/src/db-tables/WorkflowVersionsTable.ts:
--------------------------------------------------------------------------------
1 | import { Table } from "./WorkspaceDB";
2 | import { WorkflowVersion } from "../types/dbTypes";
3 | import { TableBase } from "./TableBase";
4 | import { indexdb } from "./indexdb";
5 |
6 | export class WorkflowVersionsTable extends TableBase {
7 | static readonly TABLE_NAME: Table = "workflowVersions";
8 | constructor() {
9 | super("workflowVersions");
10 | }
11 | static async load(): Promise {
12 | const instance = new WorkflowVersionsTable();
13 | return instance;
14 | }
15 |
16 | public async listByWorkflowID(
17 | workflowID: string,
18 | ): Promise {
19 | const objects = (await indexdb[this.tableName]
20 | .where("workflowID")
21 | .equals(workflowID)
22 | .reverse()
23 | .sortBy("createTime")) as WorkflowVersion[];
24 | return objects ?? [];
25 | }
26 |
27 | public async getLatestByWorkflowID(
28 | workflowID: string,
29 | ): Promise {
30 | const objects = await this.listByWorkflowID(workflowID);
31 | if (objects?.length) return objects[0];
32 |
33 | return null;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/ui/src/db-tables/WorkspaceDB.ts:
--------------------------------------------------------------------------------
1 | import { ChangelogsTable } from "./ChangelogsTable";
2 | import { WorkflowsTable } from "./WorkflowsTable";
3 | import { FoldersTable } from "./FoldersTable";
4 | import { MediaTable } from "./MediaTable";
5 | import { UserSettingsTable } from "./UserSettingsTable";
6 | import { TagsTable } from "./tagsTable";
7 | import { indexdb } from "./indexdb";
8 | import { Folder, Workflow } from "../types/dbTypes";
9 | import { WorkflowVersionsTable } from "./WorkflowVersionsTable";
10 |
11 | export type Table =
12 | | "workflows"
13 | | "tags"
14 | | "userSettings"
15 | | "folders"
16 | | "changelogs"
17 | | "media"
18 | | "models"
19 | | "workflowVersions";
20 |
21 | export function isFolder(n: Folder | Workflow): n is Folder {
22 | return "type" in n && n.type === "folder";
23 | }
24 |
25 | export let workflowsTable: WorkflowsTable | null = null;
26 | export let tagsTable: TagsTable | null = null;
27 | export let userSettingsTable: UserSettingsTable | null = null;
28 | export let foldersTable: FoldersTable | null = null;
29 | export let changelogsTable: ChangelogsTable | null = null;
30 | export let mediaTable: MediaTable | null = null;
31 | export let workflowVersionsTable: WorkflowVersionsTable | null = null;
32 |
33 | export async function loadDBs() {
34 | const loadWorkflows = async () => {
35 | workflowsTable = await WorkflowsTable.load();
36 | };
37 | const loadTags = async () => {
38 | tagsTable = await TagsTable.load();
39 | };
40 | const loadUserSettings = async () => {
41 | userSettingsTable = await UserSettingsTable.load();
42 | };
43 | const loadFolders = async () => {
44 | foldersTable = await FoldersTable.load();
45 | };
46 | const loadChangelogs = async () => {
47 | changelogsTable = await ChangelogsTable.load();
48 | };
49 | const loadMedia = async () => {
50 | mediaTable = new MediaTable();
51 | };
52 | const loadWorkflowVersions = async () => {
53 | workflowVersionsTable = await WorkflowVersionsTable.load();
54 | };
55 | await Promise.all([
56 | loadWorkflows(),
57 | loadTags(),
58 | loadUserSettings(),
59 | loadFolders(),
60 | loadChangelogs(),
61 | loadMedia(),
62 | loadWorkflowVersions(),
63 | ]);
64 | }
65 |
--------------------------------------------------------------------------------
/ui/src/db-tables/indexdb.ts:
--------------------------------------------------------------------------------
1 | import Dexie, { Table } from "dexie";
2 | import {
3 | Workflow,
4 | LocalCache,
5 | Changelog,
6 | Folder,
7 | Media,
8 | Model,
9 | Tag,
10 | UserSettings,
11 | WORKSPACE_INDEXDB_NAME,
12 | WorkflowVersion,
13 | } from "../types/dbTypes";
14 |
15 | class ManagerDB extends Dexie {
16 | workflows!: Table;
17 | changelogs!: Table;
18 | media!: Table;
19 | folders!: Table;
20 | tags!: Table;
21 | userSettings!: Table;
22 | models!: Table;
23 | cache!: Table;
24 | workflowVersions!: Table;
25 |
26 | constructor() {
27 | super(WORKSPACE_INDEXDB_NAME);
28 | this.version(1)
29 | .stores({
30 | workflows: "&id, name, parentFolderID", // Primary key and indexed props
31 | changelogs: "&id, workflowID",
32 | media: "&id, workflowID",
33 | folders: "&id, name, parentFolderID",
34 | tags: "&name",
35 | userSettings: "&id",
36 | models: "&id, fileName, fileHash",
37 | cache: "&id",
38 | })
39 | .upgrade((trans) => {});
40 | this.version(2)
41 | .stores({
42 | workflows: "&id, name, parentFolderID,cloudID",
43 | changelogs: "&id, workflowID",
44 | media: "&id, workflowID",
45 | folders: "&id, name, parentFolderID",
46 | tags: "&name",
47 | userSettings: "&id",
48 | models: "&id, fileName, fileHash",
49 | cache: "&id",
50 | workflowVersions: "&id, name, workflowID,cloudID",
51 | })
52 | .upgrade((trans) => {});
53 | }
54 | }
55 |
56 | export const indexdb = new ManagerDB();
57 |
--------------------------------------------------------------------------------
/ui/src/db-tables/tagsTable.ts:
--------------------------------------------------------------------------------
1 | import { Tag } from "../types/dbTypes";
2 | import { Table } from "./WorkspaceDB";
3 | import { TableBase } from "./TableBase";
4 |
5 | export class TagsTable extends TableBase {
6 | static readonly TABLE_NAME: Table = "tags";
7 |
8 | constructor() {
9 | super("tags");
10 | }
11 |
12 | static async load(): Promise {
13 | const instance = new TagsTable();
14 | return instance;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/ui/src/gallery/GalleryContext.ts:
--------------------------------------------------------------------------------
1 | import { type Dispatch, type SetStateAction, createContext } from "react";
2 | import type { Media } from "../types/dbTypes.ts";
3 |
4 | interface GalleryContextProps {
5 | showAllImages: boolean;
6 | curMedia: Media | null;
7 | setCurMedia: (media: Media | null) => void;
8 | setMediaList: Dispatch>;
9 | setShowAllImages: (showAllImages: boolean) => void;
10 | }
11 |
12 | export const GalleryContext = createContext({
13 | showAllImages: false,
14 | curMedia: null,
15 | setCurMedia(): void {},
16 | setMediaList(): void {},
17 | setShowAllImages(): void {},
18 | });
19 |
--------------------------------------------------------------------------------
/ui/src/gallery/components/AllPromptForm/AllPromptForm.tsx:
--------------------------------------------------------------------------------
1 | import { Box, Flex, Text, Stack } from "@chakra-ui/react";
2 | import { FormItemComponent } from "../FormItem/FormItemComponent.tsx";
3 | import { isInTopField } from "../MetaBox/MetadataForm.tsx";
4 | import { useCallback, useContext, useEffect, useState } from "react";
5 | import { MetaBoxContext } from "../MetaBox/metaBoxContext.ts";
6 | import { PromptNodeInputItem } from "../MetaBox/utils.ts";
7 |
8 | export default function AllPromptForm() {
9 | const { topFields, calcInputList, showNodeName } = useContext(MetaBoxContext);
10 |
11 | const groupInputsByNodeType = useCallback(
12 | (inputList: PromptNodeInputItem[]) => {
13 | const groupedInputs: PromptNodeInputItem[][] = [];
14 | inputList.forEach((input) => {
15 | const lastGroup = groupedInputs[groupedInputs.length - 1];
16 | if (
17 | !lastGroup ||
18 | lastGroup[0].nodeID !== input.nodeID ||
19 | lastGroup[0].classType !== input.classType
20 | ) {
21 | groupedInputs.push([input]);
22 | } else {
23 | lastGroup.push(input);
24 | }
25 | });
26 | return groupedInputs;
27 | },
28 | [],
29 | );
30 |
31 | useEffect(() => {}, [showNodeName]);
32 |
33 | if (!showNodeName) {
34 | return (
35 |
36 | {calcInputList.map((input) => {
37 | if (
38 | isInTopField(topFields, {
39 | name: input.inputName,
40 | promptKey: input.nodeID,
41 | classType: input.classType,
42 | })
43 | ) {
44 | return null;
45 | }
46 | return (
47 |
51 | );
52 | })}
53 |
54 | );
55 | }
56 | const nodes = groupInputsByNodeType(calcInputList);
57 | return (
58 |
59 | {nodes.map((nodeInputs) => {
60 | if (!nodeInputs[0]) {
61 | return null;
62 | }
63 | return (
64 |
68 |
69 | {nodeInputs.map((input) => {
70 | if (
71 | isInTopField(topFields, {
72 | name: input.inputName,
73 | promptKey: input.nodeID,
74 | classType: input.classType,
75 | })
76 | ) {
77 | return null;
78 | }
79 |
80 | return (
81 |
85 | );
86 | })}
87 |
88 |
89 | );
90 | })}
91 |
92 | );
93 | }
94 |
95 | function CustomAccordionPanel({
96 | title,
97 | children,
98 | }: {
99 | title: string;
100 | children: React.ReactNode;
101 | }) {
102 | return (
103 |
104 |
105 | {title}
106 |
107 | {children}
108 |
109 | );
110 | }
111 |
--------------------------------------------------------------------------------
/ui/src/gallery/components/FormItem/CheckboxBase.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import { Checkbox, Flex } from "@chakra-ui/react";
3 | import { PromptNodeInputItem } from "../MetaBox/utils.ts";
4 |
5 | export const CheckboxBase: FC<
6 | {
7 | inputItem: PromptNodeInputItem;
8 | } & {
9 | [key in string]: any;
10 | }
11 | > = (props) => {
12 | const inputItem = props.inputItem;
13 | return (
14 |
15 |
16 | {inputItem.label ?? inputItem.inputName}
17 |
18 | {
21 | props?.updateMetaData?.({
22 | promptKey: props.promptKey,
23 | name: props.name,
24 | value: e.target.checked,
25 | });
26 | }}
27 | />
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/ui/src/gallery/components/FormItem/InputBase.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import { Flex, Input } from "@chakra-ui/react";
3 | import { PromptNodeInputItem } from "../MetaBox/utils.ts";
4 |
5 | export const InputBase: FC<
6 | {
7 | inputItem: PromptNodeInputItem;
8 | } & {
9 | [key in string]: any;
10 | }
11 | > = ({ inputItem }) => {
12 | return (
13 |
14 |
15 | {inputItem.label ?? inputItem.inputName}
16 |
17 | {}} />
18 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/ui/src/gallery/components/FormItem/InputSlider.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import {
3 | Flex,
4 | NumberDecrementStepper,
5 | NumberIncrementStepper,
6 | NumberInput,
7 | NumberInputField,
8 | NumberInputStepper,
9 | Slider,
10 | SliderFilledTrack,
11 | SliderThumb,
12 | SliderTrack,
13 | } from "@chakra-ui/react";
14 | import { PromptNodeInputItem } from "../MetaBox/utils.ts";
15 |
16 | export const InputSlider: FC<
17 | {
18 | inputItem: PromptNodeInputItem;
19 | } & {
20 | [key in string]: any;
21 | }
22 | > = (props) => {
23 | const inputItem = props.inputItem;
24 | return (
25 |
26 |
27 |
28 | {inputItem.label ?? inputItem.inputName}
29 |
30 | {}}
37 | >
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | {}}
53 | >
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | );
62 | };
63 |
--------------------------------------------------------------------------------
/ui/src/gallery/components/FormItem/NoSupport.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import { Flex } from "@chakra-ui/react";
3 | import { PromptNodeInputItem } from "../MetaBox/utils.ts";
4 |
5 | export const NoSupport: FC<{ inputItem: PromptNodeInputItem }> = (props) => {
6 | return (
7 |
8 |
9 | {props.inputItem.label ?? props.inputItem.inputName}
10 |
11 | No Support
12 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/ui/src/gallery/components/FormItem/SelectBase.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import { Flex, Select } from "@chakra-ui/react";
3 | import { PromptNodeInputItem } from "../MetaBox/utils.ts";
4 |
5 | export const SelectBase: FC<
6 | {
7 | inputItem: PromptNodeInputItem;
8 | } & {
9 | [key in string]: any;
10 | }
11 | > = (props) => {
12 | const { inputItem } = props;
13 | return (
14 |
15 |
16 | {inputItem.label ?? inputItem.inputName}
17 |
18 |
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/ui/src/gallery/components/FormItem/TextareaBase.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import { Flex, Textarea } from "@chakra-ui/react";
3 | import { PromptNodeInputItem } from "../MetaBox/utils.ts";
4 |
5 | export const TextareaBase: FC<
6 | {
7 | inputItem: PromptNodeInputItem;
8 | } & {
9 | [key in string]: any;
10 | }
11 | > = (props) => {
12 | const inputItem = props.inputItem;
13 | return (
14 |
15 | {inputItem.label ?? inputItem.inputName}
16 |