@canmingir/link 1.2.55 → 1.2.57

package/src/layouts/MainLayout/nav/desktop/nav-list.jsx

@@ -13,8 +13,6 @@ import { useTheme } from "@mui/material/styles";
 import { NavItem, NavItemDashboard } from "./nav-item";
 import { useCallback, useEffect, useState } from "react";
 
-// ----------------------------------------------------------------------
-
 export default function NavList({ data }) {
   const theme = useTheme();
 
@@ -93,8 +91,6 @@ export default function NavList({ data }) {
   );
 }
 
-// ----------------------------------------------------------------------
-
 function NavSubList({ data, subheader, sx, ...other }) {
   const pathname = usePathname();
 
@@ -104,18 +100,22 @@ function NavSubList({ data, subheader, sx, ...other }) {
     <Stack
       spacing={2}
       {...other}
-      sx={[{
-        flexGrow: 1,
-        alignItems: "flex-start",
-        pb: 2,
-
-        ...(dashboard && {
-          pb: 0,
-          maxWidth: { md: 1 / 3, lg: 540 },
-        }),
-
-        ...sx
-      }, ...(Array.isArray(other.sx) ? other.sx : [other.sx])]}>
+      sx={[
+        {
+          flexGrow: 1,
+          alignItems: "flex-start",
+          pb: 2,
+
+          ...(dashboard && {
+            pb: 0,
+            maxWidth: { md: 1 / 3, lg: 540 },
+          }),
+
+          ...sx,
+        },
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
+      ]}
+    >
       <ListSubheader
         disableSticky
         sx={{

package/src/layouts/MainLayout/nav/mobile/index.jsx

@@ -9,8 +9,6 @@ import { usePathname } from "../../../../routes/hooks";
 
 import { useCallback, useEffect, useState } from "react";
 
-// ----------------------------------------------------------------------
-
 export default function NavMobile({ data }) {
   const pathname = usePathname();
 
@@ -45,7 +43,7 @@ export default function NavMobile({ data }) {
               pb: 5,
               width: 260,
             },
-          }
+          },
         }}
       >
         <Scrollbar>

package/src/layouts/MainLayout/nav/mobile/nav-item.jsx

@@ -8,8 +8,6 @@ import { forwardRef } from "react";
 
 import { alpha, styled } from "@mui/material/styles";
 
-// ----------------------------------------------------------------------
-
 export const NavItem = forwardRef(
   (
     { title, path, icon, open, active, hasChild, externalLink, ...other },
@@ -63,8 +61,6 @@ export const NavItem = forwardRef(
   }
 );
 
-// ----------------------------------------------------------------------
-
 const StyledNavItem = styled(ListItemButton, {
   shouldForwardProp: (prop) => prop !== "active",
 })(({ open, active, theme }) => {

package/src/layouts/MainLayout/nav/mobile/nav-list.jsx

@@ -8,8 +8,6 @@ import { useActiveLink } from "../../../../routes/hooks/use-active-link";
 
 import { useCallback, useState } from "react";
 
-// ----------------------------------------------------------------------
-
 export default function NavList({ data }) {
   const active = useActiveLink(data.path, !!data.children);
 

package/src/layouts/TwoSideLayout/TwoSideLayout.jsx

@@ -2,7 +2,6 @@ import Container from "@mui/material/Container";
 import Grid from "@mui/material/Grid";
 import React from "react";
 import Typography from "@mui/material/Typography";
-// ----------------------------------------------------------------------
 
 export default function TwoSideLayout({ rows, title }) {
   const rowData = rows;

package/src/layouts/auth/classic.jsx

@@ -9,8 +9,6 @@ import { useResponsive } from "../../hooks/use-responsive";
 
 import { alpha, useTheme } from "@mui/material/styles";
 
-// ----------------------------------------------------------------------
-
 export default function AuthClassicLayout({ image, title }) {
   const theme = useTheme();
 
@@ -56,8 +54,9 @@ export default function AuthClassicLayout({ image, title }) {
             theme.palette.mode === "light" ? 0.88 : 0.94
           ),
           imgUrl: "https://minimals.cc/assets/background/overlay_2.jpg",
-        })
-      }}>
+        }),
+      }}
+    >
       <Typography variant="h3" sx={{ maxWidth: 480, textAlign: "center" }}>
         {title || "Hi, Welcome back"}
       </Typography>

package/src/layouts/auth/modern-compact.jsx

@@ -4,8 +4,6 @@ import Header from "../common/header-sim";
 import { Outlet } from "react-router";
 import React from "react";
 
-// ----------------------------------------------------------------------
-
 export default function AuthModernCompactLayout() {
   return (
     <>

package/src/layouts/auth/modern.jsx

@@ -6,8 +6,6 @@ import React from "react";
 import Stack from "@mui/material/Stack";
 import { alpha } from "@mui/material/styles";
 
-// ----------------------------------------------------------------------
-
 export default function AuthModernLayout() {
   return (
     <Stack

package/src/layouts/common/ProjectBar/utils.js

@@ -1,7 +1,5 @@
 import { flattenArray } from "../../../utils/flatten-array";
 
-// ----------------------------------------------------------------------
-
 export function getAllItems({ data }) {
   const reduceItems = data
     .map((list) => handleLoop(list.items, list.subheader))
@@ -20,8 +18,6 @@ export function getAllItems({ data }) {
   return items;
 }
 
-// ----------------------------------------------------------------------
-
 export function applyFilter({ inputData, query }) {
   if (query) {
     inputData = inputData.filter(
@@ -32,8 +28,6 @@ export function applyFilter({ inputData, query }) {
   return inputData;
 }
 
-// ----------------------------------------------------------------------
-
 export function splitPath(array, key) {
   let stack = array.map((item) => ({
     path: [item.title],
@@ -59,8 +53,6 @@ export function splitPath(array, key) {
   return null;
 }
 
-// ----------------------------------------------------------------------
-
 export function handleLoop(array, subheader) {
   return array?.map((list) => ({
     subheader,
@@ -71,8 +63,6 @@ export function handleLoop(array, subheader) {
   }));
 }
 
-// ----------------------------------------------------------------------
-
 export function groupedData(array) {
   const group = array.reduce((groups, item) => {
     groups[item.group] = groups[item.group] || [];

package/src/layouts/common/account-popover.jsx

@@ -16,8 +16,6 @@ import { varHover } from "../../components/animate";
 
 import CustomPopover, { usePopover } from "../../components/custom-popover";
 
-// ----------------------------------------------------------------------
-
 export default function AccountPopover() {
   const { options } = config().menu;
   const router = useRouter();

package/src/layouts/common/header-shadow.jsx

@@ -1,8 +1,6 @@
 import Box from "@mui/material/Box";
 import React from "react";
 
-// ----------------------------------------------------------------------
-
 export default function HeaderShadow({ sx, ...other }) {
   return (
     <Box

package/src/layouts/common/header-sim.jsx

@@ -9,7 +9,6 @@ import Toolbar from "@mui/material/Toolbar";
 import { bgBlur } from "../../theme/css";
 import { useOffSetTop } from "../../hooks/use-off-set-top";
 import { useTheme } from "@mui/material/styles";
-// ----------------------------------------------------------------------
 
 export default function HeaderSim() {
   const theme = useTheme();
@@ -41,9 +40,13 @@ export default function HeaderSim() {
       >
         <Logo />
 
-        <Stack direction="row" spacing={1} sx={{
-          alignItems: "center"
-        }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: "center",
+          }}
+        >
           <SettingsButton />
         </Stack>
       </Toolbar>

package/src/layouts/common/header-simple.jsx

@@ -16,8 +16,6 @@ import { useOffSetTop } from "../../hooks/use-off-set-top";
 import { useResponsive } from "../../hooks/use-responsive";
 import { useTheme } from "@mui/material/styles";
 
-// ----------------------------------------------------------------------
-
 export default function HeaderSimple({
   handleItemSelect,
   selectedItem,
@@ -52,9 +50,13 @@ export default function HeaderSimple({
           }),
         }}
       >
-        <Stack direction="row" spacing={5} sx={{
-          alignItems: "center"
-        }}>
+        <Stack
+          direction="row"
+          spacing={5}
+          sx={{
+            alignItems: "center",
+          }}
+        >
           <Logo />
           <ProjectBar
             handleItemSelect={handleItemSelect}
@@ -62,9 +64,13 @@ export default function HeaderSimple({
             setSelectedItem={setSelectedItem}
           />
         </Stack>
-        <Stack direction="row" spacing={1} sx={{
-          alignItems: "center"
-        }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: "center",
+          }}
+        >
           {mdUp && <NavDesktop data={topMenu} />}
           <NotificationsPopover />
 

package/src/layouts/common/nav-toggle-button.jsx

@@ -7,8 +7,6 @@ import { useResponsive } from "../../hooks/use-responsive";
 import { useSettingsContext } from "../../components/settings";
 import { useTheme } from "@mui/material/styles";
 
-// ----------------------------------------------------------------------
-
 export default function NavToggleButton({ sx, ...other }) {
   const theme = useTheme();
 
@@ -26,7 +24,7 @@ export default function NavToggleButton({ sx, ...other }) {
       onClick={() =>
         settings.onUpdate(
           "themeLayout",
-          settings.themeLayout === "vertical" ? "mini" : "vertical",
+          settings.themeLayout === "vertical" ? "mini" : "vertical"
         )
       }
       sx={{

package/src/layouts/common/notifications-popover/index.jsx

@@ -18,8 +18,6 @@ import { varHover } from "../../../components/animate";
 
 import { useCallback, useState } from "react";
 
-// ----------------------------------------------------------------------
-
 const TABS = [
   {
     value: "all",
@@ -38,8 +36,6 @@ const TABS = [
   },
 ];
 
-// ----------------------------------------------------------------------
-
 export default function NotificationsPopover() {
   const drawer = useBoolean();
 
@@ -74,8 +70,9 @@ export default function NotificationsPopover() {
         py: 2,
         pl: 2.5,
         pr: 1,
-        minHeight: 68
-      }}>
+        minHeight: 68,
+      }}
+    >
       <Typography variant="h6" sx={{ flexGrow: 1 }}>
         Notifications
       </Typography>
@@ -153,8 +150,9 @@ export default function NotificationsPopover() {
 
           paper: {
             sx: { width: 1, maxWidth: 420 },
-          }
-        }}>
+          },
+        }}
+      >
         {renderHead}
 
         <Divider />
@@ -165,8 +163,9 @@ export default function NotificationsPopover() {
             alignItems: "center",
             justifyContent: "space-between",
             pl: 2.5,
-            pr: 1
-          }}>
+            pr: 1,
+          }}
+        >
           {renderTabs}
           <IconButton onClick={handleMarkAllAsRead}>
             <Iconify icon="solar:settings-bold-duotone" />

package/src/layouts/common/notifications-popover/notification-item.jsx

@@ -11,8 +11,6 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { fToNow } from "../../../utils/format-time";
 
-// ----------------------------------------------------------------------
-
 export default function NotificationItem({ notification }) {
   const renderAvatar = (
     <ListItemAvatar>
@@ -29,8 +27,9 @@ export default function NotificationItem({ notification }) {
             width: 40,
             height: 40,
             borderRadius: "50%",
-            bgcolor: "background.neutral"
-          }}>
+            bgcolor: "background.neutral",
+          }}
+        >
           <Box
             component="img"
             src={`/assets/icons/notification/${
@@ -67,8 +66,9 @@ export default function NotificationItem({ notification }) {
           sx={{
             alignItems: "center",
             typography: "caption",
-            color: "text.disabled"
-          }}>
+            color: "text.disabled",
+          }}
+        >
           {fToNow(notification.createdAt)}
           {notification.category}
         </Stack>
@@ -102,9 +102,11 @@ export default function NotificationItem({ notification }) {
   );
 
   const projectAction = (
-    <Stack sx={{
-      alignItems: "flex-start"
-    }}>
+    <Stack
+      sx={{
+        alignItems: "flex-start",
+      }}
+    >
       <Box
         sx={{
           p: 1.5,
@@ -147,8 +149,9 @@ export default function NotificationItem({ notification }) {
         direction={{ xs: "column", sm: "row" }}
         sx={{
           flexGrow: 1,
-          minWidth: 0
-        }}>
+          minWidth: 0,
+        }}
+      >
         <ListItemText
           disableTypography
           primary={
@@ -178,8 +181,9 @@ export default function NotificationItem({ notification }) {
               sx={{
                 alignItems: "center",
                 typography: "caption",
-                color: "text.disabled"
-              }}>
+                color: "text.disabled",
+              }}
+            >
               <span>2.3 GB</span>
               <span>30 min ago</span>
             </Stack>
@@ -199,8 +203,9 @@ export default function NotificationItem({ notification }) {
       spacing={0.75}
       sx={{
         flexWrap: "wrap",
-        mt: 1.5
-      }}>
+        mt: 1.5,
+      }}
+    >
       <Label variant="outlined" color="info">
         Design
       </Label>
@@ -247,8 +252,6 @@ export default function NotificationItem({ notification }) {
   );
 }
 
-// ----------------------------------------------------------------------
-
 function reader(data) {
   return (
     <Box

package/src/layouts/common/settings-button.jsx

@@ -6,8 +6,6 @@ import SettingsDialog from "../../widgets/SettingsDialog";
 import { motion } from "framer-motion";
 import { varHover } from "../../components/animate";
 
-// ----------------------------------------------------------------------
-
 export default function SettingsButton({ sx }) {
   const [settingsOpen, setSettingsOpen] = React.useState(false);
 

package/src/layouts/config-layout.js

@@ -1,5 +1,3 @@
-// ----------------------------------------------------------------------
-
 export const HEADER = {
   H_MOBILE: 64,
   H_DESKTOP: 80,

package/src/lib/ChatMessage/AIMessage.tsx

@@ -0,0 +1,163 @@
+import Editor from "@monaco-editor/react";
+import ReactMarkdown from "react-markdown";
+import { alpha } from "@mui/material/styles";
+
+import remarkGfm from "remark-gfm";
+
+import { Box, Stack } from "@mui/material";
+
+import React, { memo, useMemo } from "react";
+
+function tryParseJson(content: string): object | null {
+  const trimmed = content.trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return null;
+  try {
+    return JSON.parse(trimmed);
+  } catch {
+    return null;
+  }
+}
+
+const JsonViewer: React.FC<{ content: string }> = memo(({ content }) => {
+  const formatted = useMemo(() => {
+    try {
+      return JSON.stringify(JSON.parse(content), null, 2);
+    } catch {
+      return content;
+    }
+  }, [content]);
+
+  const lineCount = formatted.split("\n").length;
+  const height = Math.min(Math.max(lineCount * 19 + 24, 60), 300);
+
+  return (
+    <Box
+      sx={{
+        border: (theme) =>
+          `1px solid ${alpha(theme.palette.primary.main, 0.25)}`,
+        borderRadius: 1,
+        overflow: "hidden",
+        bgcolor: "#1e1e1e",
+      }}
+    >
+      <Editor
+        height={`${height}px`}
+        defaultLanguage="json"
+        value={formatted}
+        theme="vs-dark"
+        options={{
+          readOnly: true,
+          minimap: { enabled: false },
+          fontSize: 12,
+          lineNumbers: "off",
+          scrollBeyondLastLine: false,
+          wordWrap: "on",
+          tabSize: 2,
+          folding: false,
+          glyphMargin: false,
+          lineDecorationsWidth: 0,
+          lineNumbersMinChars: 0,
+          padding: { top: 8, bottom: 8 },
+          scrollbar: { vertical: "hidden", horizontal: "hidden" },
+          renderLineHighlight: "none",
+          selectionHighlight: false,
+          occurrencesHighlight: "off",
+          cursorStyle: "line",
+          contextmenu: false,
+          domReadOnly: true,
+        }}
+      />
+    </Box>
+  );
+});
+
+const AIMessage: React.FC<{
+  content: string;
+  messageRef?: React.RefObject<HTMLDivElement>;
+}> = memo(({ content, messageRef }) => {
+  const parsedJson = useMemo(() => tryParseJson(content), [content]);
+
+  return (
+    <Stack
+      ref={messageRef}
+      sx={{
+        p: 2,
+        alignContent: "flex-start",
+        justifyContent: "flex-start",
+        backgroundColor: (theme) => alpha(theme.palette.primary.dark, 0.4),
+        borderRadius: 2,
+        height: "auto",
+        mt: 1.5,
+        boxShadow: 1,
+        border: (theme) =>
+          `1px solid ${alpha(theme.palette.primary.light, 0.2)}`,
+      }}
+    >
+      {parsedJson ? (
+        <JsonViewer content={content} />
+      ) : (
+        <Box
+          sx={{
+            width: "100%",
+            "& p": {
+              margin: "0.5em 0",
+              fontSize: "0.95rem",
+              lineHeight: 1.6,
+              color: (theme) => theme.palette.text.primary,
+            },
+            "& p:first-of-type": { marginTop: 0 },
+            "& p:last-of-type": { marginBottom: 0 },
+            "& code": {
+              backgroundColor: (theme) => alpha(theme.palette.grey[900], 0.6),
+              padding: "2px 6px",
+              borderRadius: "4px",
+              fontSize: "0.9em",
+              fontFamily: "monospace",
+            },
+            "& pre": {
+              backgroundColor: (theme) => alpha(theme.palette.grey[900], 0.7),
+              padding: "12px",
+              borderRadius: "6px",
+              overflow: "auto",
+              margin: "0.75em 0",
+            },
+            "& pre code": { backgroundColor: "transparent", padding: 0 },
+            "& ul, & ol": {
+              marginLeft: "1.5em",
+              marginTop: "0.5em",
+              marginBottom: "0.5em",
+            },
+            "& li": { marginBottom: "0.25em", lineHeight: 1.6 },
+            "& blockquote": {
+              borderLeft: (theme) => `3px solid ${theme.palette.primary.main}`,
+              paddingLeft: "1em",
+              marginLeft: 0,
+              fontStyle: "italic",
+              opacity: 0.9,
+            },
+            "& strong": { fontWeight: 600 },
+            "& a": {
+              color: (theme) => theme.palette.primary.light,
+              textDecoration: "underline",
+            },
+            "& h1, & h2, & h3, & h4, & h5, & h6": {
+              marginTop: "0.75em",
+              marginBottom: "0.5em",
+              fontWeight: 600,
+            },
+            "& hr": {
+              border: "none",
+              borderTop: (theme) =>
+                `1px solid ${alpha(theme.palette.grey[500], 0.3)}`,
+              margin: "1em 0",
+            },
+          }}
+        >
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+        </Box>
+      )}
+    </Stack>
+  );
+});
+
+export { AIMessage };