@flozy/editor 9.8.3 → 9.8.4

package/dist/Editor/themeSettingsAI/index.js

@@ -0,0 +1,355 @@
+import React, { useState } from "react";
+import { Button, Checkbox, CircularProgress, Divider, Drawer, FormControlLabel, Grid, IconButton, InputAdornment, Tab, Tabs, TextField, TextareaAutosize, Typography, styled } from "@mui/material";
+
+// Style
+import Style from "./style";
+
+// icons
+import { CloseIcon } from "../common/iconslist";
+import { CloudIcon } from "./icons";
+import { TickIcon } from "./icons";
+import { ResetIcon } from "./icons";
+import { useEditorTheme } from "../hooks/useEditorTheme";
+import ActiveTheme from "../themeSettings/ActiveTheme";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function generateUniqueId() {
+  const timestamp = Date.now(); // current timestamp in milliseconds
+  const randomNum = Math.floor(Math.random() * 1000000); // random number for uniqueness
+  return `id_${timestamp}_${randomNum}`;
+}
+async function getTheme(fileInputRef, onThemeChange, setLoading) {
+  const file = fileInputRef.current?.files[0];
+  if (file) {
+    setLoading(true);
+    // Create a FormData object to hold the file
+    const formData = new FormData();
+    formData.append("file", file); // 'image' is the key that your backend will use to access the file
+
+    try {
+      // Send the file using the fetch API
+      const response = await fetch("https://aicheck.agenciflow.com/create", {
+        method: "POST",
+        body: formData
+      });
+
+      // Handle the response
+      if (response.ok) {
+        const data = await response.json(); // Assuming the response is JSON
+        const theme = JSON.parse(data?.response || "{}");
+        onThemeChange({
+          id: generateUniqueId(),
+          name: "AI Generated",
+          theme: theme
+        });
+      } else {
+        console.error("Error:", response.statusText);
+      }
+    } catch (error) {
+      console.error("Fetch error:", error);
+    }
+    setLoading(false);
+  } else {
+    console.log("No file selected");
+  }
+}
+const ThemeSettingsAI = props => {
+  const {
+    className,
+    openAITheme,
+    setOpenAITheme
+  } = props;
+
+  // State
+  // const [themeDrawer, setThemeDrawer] = useState(true);
+  const [themeTabType, setThemeTabType] = React.useState(0);
+  const [enableGenerateTheme, setEnableGenerateTheme] = React.useState(false);
+  const [generateTheme] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const [imageSrc, setImageSrc] = useState(null);
+  const {
+    updateTheme
+  } = useEditorTheme();
+  const onThemeChange = theme => {
+    updateTheme(theme, {
+      action: "THEME_CHANGE"
+    });
+  };
+
+  //   image upload
+  const fileInputRef = React.useRef(null);
+  const handleDivClick = () => {
+    // Trigger the click event on the hidden file input element
+    fileInputRef.current.click();
+  };
+  const handleImageUpload = event => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        setImageSrc(reader.result);
+      };
+      reader.readAsDataURL(file);
+      setEnableGenerateTheme(true);
+    }
+  };
+  const handleTabChange = (event, newValue) => {
+    setThemeTabType(newValue);
+  };
+  const handleClose = () => {
+    setOpenAITheme(false);
+  };
+
+  // themeCard
+  // const ThemeCard = () => {
+  //   return (
+  //     <Grid className="themeCardWrapper">
+  //       {/* remove selected based on condition */}
+  //       <Grid
+  //         container
+  //         justifyContent={"space-between"}
+  //         className="themeCard selected"
+  //       >
+  //         <TickIcon />
+  //         <Grid>
+  //           <Typography variant="body1" className="fs-14 fw-500">
+  //             Slate Gray
+  //           </Typography>
+  //           <Typography
+  //             variant="body2"
+  //             color={"textSecondary"}
+  //             className="fs-12"
+  //           >
+  //             Muted Elegance
+  //           </Typography>
+  //         </Grid>
+  //         <Grid className="flexAlign" sx={{ gap: "5px" }}>
+  //           <Grid className="primaryCard"></Grid>
+  //           <Grid className="secondaryCard"></Grid>
+  //           <Grid className="otherColors" sx={{ gap: "5px" }}>
+  //             <Grid className="smallCard"></Grid>
+  //             <Grid className="smallCard"></Grid>
+  //             <Grid className="smallCard"></Grid>
+  //             <Grid className="smallCard"></Grid>
+  //           </Grid>
+  //         </Grid>
+  //       </Grid>
+  //     </Grid>
+  //   );
+  // };
+
+  return /*#__PURE__*/_jsx(Grid, {
+    className: className,
+    children: /*#__PURE__*/_jsx(Drawer, {
+      className: className,
+      open: openAITheme,
+      onClose: handleClose,
+      anchor: "right",
+      children: /*#__PURE__*/_jsxs(Grid, {
+        className: "settingsContainer",
+        children: [/*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          justifyContent: "space-between",
+          wrap: "nowrap",
+          className: "header",
+          children: [/*#__PURE__*/_jsx(Grid, {
+            children: /*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              className: "title",
+              children: "Create theme with AI"
+            })
+          }), /*#__PURE__*/_jsx(IconButton, {
+            className: "closeBtn",
+            onClick: handleClose,
+            children: /*#__PURE__*/_jsx(CloseIcon, {})
+          })]
+        }), /*#__PURE__*/_jsxs(Tabs, {
+          value: themeTabType,
+          onChange: handleTabChange,
+          variant: "scrollable",
+          scrollButtons: false,
+          "aria-label": "scrollable prevent tabs example",
+          sx: {
+            mb: 2
+          },
+          children: [/*#__PURE__*/_jsx(Tab, {
+            label: /*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              className: "fs-14 fw-500 transformNone",
+              children: "Image"
+            })
+          }), /*#__PURE__*/_jsx(Tab, {
+            label: /*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              className: "fs-14 fw-500 transformNone",
+              children: "Text"
+            })
+          }), /*#__PURE__*/_jsx(Tab, {
+            label: /*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              className: "fs-14 fw-500 transformNone",
+              children: "Image link"
+            })
+          })]
+        }), themeTabType === 0 && /*#__PURE__*/_jsx(Grid, {
+          className: "imageUpload",
+          children: /*#__PURE__*/_jsxs(Grid, {
+            container: true,
+            justifyContent: "center",
+            alignItems: "center",
+            className: "imgUploadInner",
+            onClick: handleDivClick,
+            children: [/*#__PURE__*/_jsx("input", {
+              type: "file",
+              accept: ".png",
+              ref: fileInputRef,
+              onChange: handleImageUpload,
+              style: {
+                display: "none"
+              }
+            }), imageSrc ? /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(IconButton, {
+                className: "resetIcon",
+                onClick: () => setImageSrc(null),
+                children: /*#__PURE__*/_jsx(ResetIcon, {})
+              }), /*#__PURE__*/_jsx(Grid, {
+                className: "changeImgText",
+                children: "Change Image"
+              }), /*#__PURE__*/_jsx("img", {
+                src: imageSrc,
+                alt: "Uploaded Preview",
+                className: "uploadedImage"
+              })]
+            }) : /*#__PURE__*/_jsxs(Grid, {
+              container: true,
+              justifyContent: "center",
+              alignItems: "center",
+              direction: "column",
+              children: [/*#__PURE__*/_jsx(CloudIcon, {}), /*#__PURE__*/_jsx(Typography, {
+                variant: "body1",
+                className: "fw-600",
+                sx: {
+                  pb: 0.5
+                },
+                children: "Upload a logo or image"
+              }), /*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                className: "fs-12 textSecondary",
+                children: "Click here to upload PDF, PPT, and image files."
+              })]
+            })]
+          })
+        }), themeTabType === 1 && /*#__PURE__*/_jsx(Grid, {
+          className: "textArea",
+          children: /*#__PURE__*/_jsx(TextareaAutosize, {
+            placeholder: "Describe the theme you are interested in..."
+          })
+        }), themeTabType === 2 && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Grid, {
+            className: "textArea imageUrl invalidUrl",
+            children: /*#__PURE__*/_jsx(TextField, {
+              fullWidth: true,
+              placeholder: "Add Image URL",
+              size: "small"
+              //   value={imageUrl}
+              ,
+              id: "outlined-basic",
+              variant: "outlined",
+              InputProps: {
+                endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+                  position: "end",
+                  children: /*#__PURE__*/_jsx(TickIcon, {})
+                })
+              }
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            className: "imageUpload",
+            children: /*#__PURE__*/_jsx(Grid, {
+              container: true,
+              justifyContent: "center",
+              justifyItems: "center",
+              className: "imgUploadInner",
+              children: /*#__PURE__*/_jsx(Grid, {
+                container: true,
+                justifyContent: "center",
+                alignItems: "center",
+                direction: "column",
+                children: /*#__PURE__*/_jsx("img", {
+                  src: "",
+                  alt: ""
+                })
+              })
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(Grid, {
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            sx: {
+              mb: 1,
+              mt: 1
+            },
+            control: /*#__PURE__*/_jsx(Checkbox, {
+              checked: enableGenerateTheme,
+              onChange: event => setEnableGenerateTheme(event.target.checked),
+              size: "small"
+            }),
+            label: /*#__PURE__*/_jsx(Typography, {
+              variant: "body2",
+              className: "fs-12",
+              children: "a generated theme is used, the site text style will also change."
+            })
+          }), /*#__PURE__*/_jsxs(Grid, {
+            container: true,
+            justifyContent: generateTheme ? "space-between" : "flex-end",
+            children: [generateTheme && /*#__PURE__*/_jsx(Button, {
+              className: "outlineBtn",
+              variant: "outlined",
+              size: "small",
+              color: "primary",
+              children: "Regenerate theme"
+            }), /*#__PURE__*/_jsxs(Button, {
+              variant: "contained",
+              size: "small",
+              className: `blueBtn ${enableGenerateTheme ? "eanbled" : "disabled"}`,
+              disabled: loading,
+              onClick: () => {
+                // setGenerateTheme(true);
+                getTheme(fileInputRef, onThemeChange, setLoading);
+              },
+              children: [loading ? /*#__PURE__*/_jsx(CircularProgress, {
+                size: 18,
+                style: {
+                  marginRight: "10px"
+                }
+              }) : null, loading ? "Generating..." : "Generate Theme"]
+            })]
+          })]
+        }), /*#__PURE__*/_jsx(Divider, {
+          sx: {
+            mt: 2,
+            mb: 2
+          }
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          className: "fs-14 fw-600",
+          sx: {
+            mt: 1,
+            mb: 1
+          },
+          children: "Active Theme"
+        }), /*#__PURE__*/_jsx(Grid, {
+          className: "themeCardWrapper",
+          children: /*#__PURE__*/_jsxs(Grid, {
+            container: true,
+            justifyContent: "space-between",
+            className: "themeCard selected",
+            children: [/*#__PURE__*/_jsx(TickIcon, {}), /*#__PURE__*/_jsx(ActiveTheme, {
+              explore: false
+            })]
+          })
+        })]
+      })
+    })
+  });
+};
+export default styled(ThemeSettingsAI)(Style);

package/dist/Editor/themeSettingsAI/saveTheme.js

@@ -0,0 +1,205 @@
+import React, { useEffect, useState } from "react";
+import { Box, Button, CircularProgress, Dialog, Divider, Grid, IconButton, TextField, Typography, styled } from "@mui/material";
+
+// Style
+import Style from "./style";
+
+// icons
+import { CloseIcon } from "../common/iconslist";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const SaveTheme = props => {
+  const {
+    className,
+    // enableGenerateTheme,
+    saveBtnLabel,
+    loading,
+    onSave,
+    defaultFormData = {},
+    addNewTheme
+  } = props;
+
+  // State
+  const [saveTheme, setSaveTheme] = useState(false);
+  const [error, setError] = useState({});
+  const [form, setForm] = useState(defaultFormData);
+  const {
+    name,
+    mood_name
+  } = form;
+  const updateForm = update => {
+    setForm(prev => ({
+      ...prev,
+      ...update
+    }));
+  };
+  const onClose = () => {
+    setSaveTheme(false);
+    setError({});
+    setForm({});
+  };
+  const validate = () => {
+    let err = {};
+    if (!name) {
+      err.name = "This field is required!";
+    }
+    if (!mood_name) {
+      err.mood_name = "This field is required!";
+    }
+    return err;
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    className: className,
+    children: [/*#__PURE__*/_jsx(Button, {
+      variant: "contained",
+      size: "small"
+      // className={`blueBtn ${enableGenerateTheme ? "eanbled" : "disabled"}`}
+      // disabled={!enableGenerateTheme}
+      ,
+      className: addNewTheme ? `outlineBtn` : `blueBtn`,
+      onClick: () => {
+        setForm(defaultFormData);
+        setSaveTheme(true);
+      },
+      children: saveBtnLabel
+    }), /*#__PURE__*/_jsx(Dialog, {
+      fullWidth: true,
+      maxWidth: "sm",
+      open: saveTheme,
+      onClose: onClose,
+      className: className,
+      sx: {
+        borderRadius: "10px"
+      },
+      children: /*#__PURE__*/_jsxs(Grid, {
+        className: "saveThemeContainer",
+        sx: {
+          p: 2,
+          pt: 2.5
+        },
+        children: [/*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          justifyContent: "space-between",
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "h4",
+            sx: {
+              fontSize: "18px"
+            },
+            className: "fw-600",
+            children: saveBtnLabel
+          }), /*#__PURE__*/_jsx(IconButton, {
+            onClick: onClose,
+            className: "closeBtn",
+            children: /*#__PURE__*/_jsx(CloseIcon, {})
+          })]
+        }), /*#__PURE__*/_jsx(Divider, {
+          sx: {
+            mt: 2,
+            mb: 2
+          }
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          className: "fw-500",
+          sx: {
+            pb: 1
+          },
+          children: "Theme name"
+        }), /*#__PURE__*/_jsx(TextField, {
+          variant: "outlined",
+          fullWidth: true,
+          size: "small",
+          placeholder: "Ex : Forest green",
+          onChange: e => updateForm({
+            name: e.target.value
+          }),
+          value: name
+        }), /*#__PURE__*/_jsx(Error, {
+          error: error?.name
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          className: "fw-500",
+          sx: {
+            pt: 2,
+            pb: 1
+          },
+          children: "Category"
+        }), /*#__PURE__*/_jsx(TextField, {
+          variant: "outlined",
+          size: "small",
+          placeholder: "Ex : Nature and Calm",
+          fullWidth: true,
+          onChange: e => updateForm({
+            mood_name: e.target.value
+          }),
+          value: mood_name
+        }), /*#__PURE__*/_jsx(Error, {
+          error: error?.mood_name
+        }), loading ? /*#__PURE__*/_jsx(Box, {
+          sx: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 99999,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+          },
+          children: /*#__PURE__*/_jsx(CircularProgress, {})
+        }) : null, /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          justifyContent: "flex-end",
+          sx: {
+            mt: 3
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "outlined",
+            className: "seondaryOutlineBtn",
+            color: "secondary",
+            onClick: onClose,
+            children: "Cancel"
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            color: "primary",
+            className: "blueBtn",
+            sx: {
+              ml: 1
+            },
+            onClick: async () => {
+              const err = validate();
+              setError(err);
+              if (Object.keys(err)?.length) {
+                return;
+              }
+              await onSave({
+                ...form
+              }, addNewTheme);
+              onClose();
+            },
+            children: saveBtnLabel
+          })]
+        })]
+      })
+    })]
+  });
+};
+export default styled(SaveTheme)(Style);
+function Error({
+  error = ""
+}) {
+  if (error) {
+    return /*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      sx: {
+        color: "red",
+        mt: 1
+      },
+      children: error
+    });
+  } else {
+    return /*#__PURE__*/_jsx(_Fragment, {});
+  }
+}