@canmingir/link 1.2.55 → 1.2.57

package/src/lib/SidebarChat/SidebarSessionList.tsx

@@ -0,0 +1,304 @@
+import type { StoredSession } from "./types";
+import { alpha } from "@mui/material/styles";
+import { cleanIconName } from "./cleanIconName";
+import { publish } from "@nucleoidai/react-event";
+
+import { Badge, Box, Tooltip, Typography } from "@mui/material";
+import { DevTool, Iconify } from "@canmingir/link/platform/components";
+import React, { memo } from "react";
+
+interface SidebarSessionListProps {
+  sessions: StoredSession[];
+  currentSessionId?: string;
+  unreadCount: number;
+  onToggleChat: () => void;
+  onSessionClick: (
+    event: React.MouseEvent<HTMLElement>,
+    sessionId: string
+  ) => void;
+  onClearAll: () => void;
+  onNewSession?: () => void;
+  wrapperRef?: React.Ref<HTMLDivElement>;
+  beta?: boolean;
+}
+
+const btnBase = {
+  width: 32,
+  height: 32,
+  borderRadius: "10px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  alignSelf: "center",
+  flexDirection: "column",
+  cursor: "pointer",
+  flexShrink: 0,
+  transition: "all 0.18s ease",
+  border: "1px solid transparent",
+};
+
+const SidebarSessionList = ({
+  sessions,
+  currentSessionId,
+  unreadCount,
+  onToggleChat,
+  onSessionClick,
+  onClearAll,
+  onNewSession,
+  wrapperRef,
+  beta,
+}: SidebarSessionListProps) => {
+  const sidebarSessions = sessions;
+
+  const header = (
+    <>
+      <Tooltip
+        title="New Chat"
+        placement="left"
+        enterDelay={1000}
+        enterNextDelay={1000}
+      >
+        <Box
+          onClick={() => {
+            onNewSession?.();
+            onToggleChat();
+          }}
+          sx={{
+            ...btnBase,
+            flexDirection: "column",
+            gap: 0.5,
+            mb: 0.5,
+            color: "text.secondary",
+            "&:hover": {
+              color: "primary.main",
+              bgcolor: (theme) => alpha(theme.palette.primary.main, 0.12),
+              borderColor: (theme) => alpha(theme.palette.primary.main, 0.2),
+              transform: "scale(1.08)",
+            },
+          }}
+        >
+          <Iconify
+            icon="solar:add-square-bold-duotone"
+            sx={{ width: 20, height: 20 }}
+          />
+          <Typography
+            sx={{
+              fontSize: "0.5rem",
+              fontWeight: 500,
+              letterSpacing: 0.5,
+              lineHeight: 1,
+              textTransform: "capitalize",
+            }}
+          >
+            New
+          </Typography>
+        </Box>
+      </Tooltip>
+
+      {!beta && (
+        <Tooltip
+          title="Open API"
+          placement="left"
+          enterDelay={1000}
+          enterNextDelay={1000}
+        >
+          <Box
+            onClick={() => publish("SWAGGER_DIALOG_OPEN", { open: true })}
+            sx={{
+              ...btnBase,
+              flexDirection: "column",
+              gap: 0.5,
+              mb: 1,
+              color: "text.secondary",
+              "&:hover": {
+                bgcolor: (theme) =>
+                  theme.palette.mode === "dark"
+                    ? "rgba(255,255,255,0.1)"
+                    : "rgba(0,0,0,0.08)",
+                transform: "scale(1.08)",
+              },
+            }}
+          >
+            <Iconify
+              icon="logos:swagger"
+              sx={{ width: 20, height: 20, transition: "all 0.2s ease-in-out" }}
+            />
+            <Typography
+              sx={{
+                fontSize: "0.5rem",
+                fontWeight: 500,
+                letterSpacing: 0.5,
+                lineHeight: 1,
+                textTransform: "capitalize",
+              }}
+            >
+              API
+            </Typography>
+          </Box>
+        </Tooltip>
+      )}
+    </>
+  );
+
+  const content = (
+    <Box
+      ref={wrapperRef}
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 1,
+        width: "100%",
+        py: 1,
+      }}
+    >
+      {sidebarSessions.map((session, idx) => {
+        const isCurrent = session.sessionId === currentSessionId;
+        const sessionNum = idx + 1;
+        const hasUnread = isCurrent && unreadCount > 0;
+
+        return (
+          <Tooltip
+            key={session.sessionId}
+            title={
+              hasUnread
+                ? `${unreadCount} new · message${unreadCount !== 1 ? "s" : ""}`
+                : `${session.messages.length} message${
+                    session.messages.length !== 1 ? "s" : ""
+                  }`
+            }
+            placement="left"
+            enterDelay={1000}
+            enterNextDelay={1000}
+          >
+            <Box
+              onClick={(e) => onSessionClick(e, session.sessionId)}
+              sx={{
+                ...btnBase,
+                flexDirection: "column",
+                gap: 0.4,
+                color: isCurrent ? "primary.main" : "text.secondary",
+                borderColor: isCurrent
+                  ? (theme) => alpha(theme.palette.primary.main, 0.28)
+                  : "transparent",
+                boxShadow: isCurrent
+                  ? (theme) =>
+                      `0 0 0 1px ${alpha(theme.palette.primary.main, 0.2)}`
+                  : "none",
+                "&:hover": {
+                  bgcolor: isCurrent
+                    ? (theme) => alpha(theme.palette.primary.main, 0.2)
+                    : (theme) =>
+                        theme.palette.mode === "dark"
+                          ? "rgba(255,255,255,0.1)"
+                          : "rgba(0,0,0,0.08)",
+                  transform: "scale(1.08)",
+                },
+              }}
+            >
+              <Badge
+                badgeContent={hasUnread ? unreadCount : 0}
+                color="error"
+                max={9}
+                sx={{
+                  "& .MuiBadge-badge": {
+                    fontSize: "0.55rem",
+                    minWidth: 14,
+                    height: 14,
+                    padding: "0 3px",
+                    transform: "scale(0.85) translate(25%, -25%)",
+                    transition: "all 0.2s ease",
+                  },
+                }}
+              >
+                <Box
+                  sx={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: "7px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    transition: "all 0.2s ease-in-out",
+                    bgcolor: (theme) =>
+                      isCurrent
+                        ? alpha(theme.palette.primary.main, 0.2)
+                        : alpha(theme.palette.text.secondary, 0.1),
+                  }}
+                >
+                  {session.agentIcon ? (
+                    <Iconify
+                      icon={cleanIconName(session.agentIcon)}
+                      sx={{ width: 15, height: 15 }}
+                    />
+                  ) : (
+                    <Typography
+                      sx={{
+                        fontSize: "0.65rem",
+                        fontWeight: 800,
+                        lineHeight: 1,
+                      }}
+                    >
+                      {sessionNum}
+                    </Typography>
+                  )}
+                </Box>
+              </Badge>
+
+              <Typography
+                sx={{
+                  fontSize: "0.55rem",
+                  fontWeight: 700,
+                  lineHeight: 1,
+                  letterSpacing: 0.3,
+                }}
+              >
+                {`Ses. ${sessionNum}`}
+              </Typography>
+            </Box>
+          </Tooltip>
+        );
+      })}
+    </Box>
+  );
+
+  const footer = (
+    <Tooltip
+      title={sidebarSessions.length > 0 ? "Clear all sessions" : "No sessions"}
+      placement="left"
+    >
+      <Box
+        onClick={sidebarSessions.length > 0 ? onClearAll : undefined}
+        sx={{
+          ...btnBase,
+          color: "text.disabled",
+          bgcolor: "transparent",
+          opacity: sidebarSessions.length > 0 ? 1 : 0.4,
+          cursor: sidebarSessions.length > 0 ? "pointer" : "not-allowed",
+          ...(sidebarSessions.length > 0 && {
+            "&:hover": {
+              bgcolor: (theme) => alpha(theme.palette.error.main, 0.1),
+              color: "error.main",
+              borderColor: (theme) => alpha(theme.palette.error.main, 0.2),
+              transform: "scale(1.08)",
+            },
+          }),
+        }}
+      >
+        <Iconify icon="solar:trash-bin-2-bold" sx={{ width: 18, height: 18 }} />
+      </Box>
+    </Tooltip>
+  );
+
+  return (
+    <DevTool
+      width={45}
+      height={310}
+      header={header}
+      content={content}
+      footer={footer}
+    />
+  );
+};
+
+export default memo(SidebarSessionList);

package/src/lib/SidebarChat/assets.d.ts

@@ -0,0 +1,4 @@
+declare module "*.mp3" {
+  const src: string;
+  export default src;
+}

package/src/lib/SidebarChat/cleanIconName.ts

@@ -0,0 +1,4 @@
+export const cleanIconName = (icon?: string) => {
+  if (!icon) return "";
+  return icon.replace(/^:+|:+$/g, "");
+};

package/src/lib/SidebarChat/index.js

@@ -0,0 +1 @@
+export { default } from "./SidebarChat";

package/src/lib/SidebarChat/types.ts

@@ -0,0 +1,14 @@
+export interface Message {
+  id?: string;
+  content: string;
+  role: string;
+}
+
+export interface StoredSession {
+  sessionId: string;
+  agentId?: string;
+  messages: Message[];
+  lastUpdated: number;
+  agentIcon?: string;
+  agentName?: string;
+}

package/src/lib/index.js

@@ -56,3 +56,14 @@ export {
   GlassCardActions,
 } from "./GlassCard/GlassCard";
 export { default as DevTool } from "./DevTool";
+
+export { default as SidebarChat } from "./SidebarChat/SidebarChat";
+export { default as PresetSelector } from "./PresetSelector/PresetSelector";
+export {
+  AIMessage,
+  ErrorMessage,
+  HumanMessage,
+  LoadingMessage,
+  MessageList,
+  ToolMessage,
+} from "./ChatMessage";

package/src/pages/404.jsx

@@ -2,8 +2,6 @@ import { Helmet } from "react-helmet-async";
 import { NotFoundView } from "../widgets/error";
 import React from "react";
 
-// ----------------------------------------------------------------------
-
 export default function NotFoundPage() {
   return (
     <>

package/src/routes/components/router-link.jsx

@@ -2,8 +2,6 @@ import { Link } from "react-router-dom";
 import React from "react";
 import { forwardRef } from "react";
 
-// ----------------------------------------------------------------------
-
 const RouterLink = forwardRef(({ href, ...other }, ref) => (
   <Link ref={ref} to={href} {...other} />
 ));

package/src/routes/hooks/use-active-link.js

@@ -1,7 +1,5 @@
 import { matchPath, useLocation } from "react-router-dom";
 
-// ----------------------------------------------------------------------
-
 export function useActiveLink(path, deep = true) {
   const { pathname } = useLocation();
 

package/src/routes/hooks/use-pathname.js

@@ -1,8 +1,6 @@
 import { useLocation } from "react-router-dom";
 import { useMemo } from "react";
 
-// ----------------------------------------------------------------------
-
 export function usePathname() {
   const { pathname } = useLocation();
 

package/src/routes/hooks/use-router.js

@@ -1,8 +1,6 @@
 import { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 
-// ----------------------------------------------------------------------
-
 export function useRouter() {
   const navigate = useNavigate();
 

package/src/theme/css.js

@@ -4,8 +4,6 @@ import { checkboxClasses } from "@mui/material/Checkbox";
 import { dividerClasses } from "@mui/material/Divider";
 import { menuItemClasses } from "@mui/material/MenuItem";
 
-// ----------------------------------------------------------------------
-
 export const paper = ({ theme, bgcolor, dropdown }) => ({
   ...bgBlur({
     blur: 20,
@@ -29,8 +27,6 @@ export const paper = ({ theme, bgcolor, dropdown }) => ({
   }),
 });
 
-// ----------------------------------------------------------------------
-
 export const menuItem = (theme) => ({
   ...theme.typography.body2,
   padding: theme.spacing(0.75, 1),
@@ -61,8 +57,6 @@ export const menuItem = (theme) => ({
   },
 });
 
-// ----------------------------------------------------------------------
-
 export function bgBlur(props) {
   const color = props?.color || "#000000";
   const blur = props?.blur || 6;
@@ -95,8 +89,6 @@ export function bgBlur(props) {
   };
 }
 
-// ----------------------------------------------------------------------
-
 export function bgGradient(props) {
   const direction = props?.direction || "to bottom";
   const startColor = props?.startColor;
@@ -120,8 +112,6 @@ export function bgGradient(props) {
   };
 }
 
-// ----------------------------------------------------------------------
-
 export function textGradient(value) {
   return {
     background: `-webkit-linear-gradient(${value})`,
@@ -130,8 +120,6 @@ export function textGradient(value) {
   };
 }
 
-// ----------------------------------------------------------------------
-
 export const hideScroll = {
   x: {
     msOverflowStyle: "none",

package/src/theme/custom-shadows.js

@@ -11,8 +11,6 @@ import {
   warning,
 } from "./palette";
 
-// ----------------------------------------------------------------------
-
 export function customShadows(mode) {
   const color = mode === "light" ? grey[500] : common.black;
 

package/src/theme/options/contrast.js

@@ -1,8 +1,6 @@
 import { customShadows } from "../custom-shadows";
 import { grey } from "../palette";
 
-// ----------------------------------------------------------------------
-
 export function createContrast(contrast, mode) {
   const theme = {
     ...(contrast === "bold" &&

package/src/theme/options/presets.js

@@ -2,8 +2,6 @@ import { alpha } from "@mui/material/styles";
 
 import { grey, primary } from "../palette";
 
-// ----------------------------------------------------------------------
-
 export function createPresets(preset) {
   const primaryColor = getPrimary(preset);
 
@@ -21,8 +19,6 @@ export function createPresets(preset) {
   };
 }
 
-// ----------------------------------------------------------------------
-
 const cyan = {
   lighter: "#CCF4FE",
   light: "#68CDF9",

package/src/theme/options/right-to-left.jsx

@@ -4,8 +4,6 @@ import createCache from "@emotion/cache";
 import rtlPlugin from "stylis-plugin-rtl";
 import { useEffect } from "react";
 
-// ----------------------------------------------------------------------
-
 export default function RTL({ children, themeDirection }) {
   useEffect(() => {
     document.dir = themeDirection;

package/src/theme/overrides/components/accordion.js

@@ -2,8 +2,6 @@ import { accordionClasses } from "@mui/material/Accordion";
 import { accordionSummaryClasses } from "@mui/material/AccordionSummary";
 import { typographyClasses } from "@mui/material/Typography";
 
-// ----------------------------------------------------------------------
-
 export function accordion(theme) {
   return {
     MuiAccordion: {

package/src/theme/overrides/components/alert.js

@@ -1,12 +1,8 @@
 import { alertClasses } from "@mui/material/Alert";
 import { alpha } from "@mui/material/styles";
 
-// ----------------------------------------------------------------------
-
 const COLORS = ["info", "success", "warning", "error"];
 
-// ----------------------------------------------------------------------
-
 export function alert(theme) {
   const lightMode = theme.palette.mode === "light";
 

package/src/theme/overrides/components/appbar.js

@@ -1,5 +1,3 @@
-// ----------------------------------------------------------------------
-
 export function appBar(theme) {
   return {
     MuiAppBar: {

package/src/theme/overrides/components/autocomplete.js

@@ -4,8 +4,6 @@ import { svgIconClasses } from "@mui/material/SvgIcon";
 
 import { menuItem, paper } from "../../css";
 
-// ----------------------------------------------------------------------
-
 export function autocomplete(theme) {
   return {
     MuiAutocomplete: {

package/src/theme/overrides/components/avatar.js

@@ -1,8 +1,6 @@
 import { alpha } from "@mui/material/styles";
 import { avatarGroupClasses } from "@mui/material/AvatarGroup";
 
-// ----------------------------------------------------------------------
-
 const COLORS = [
   "default",
   "primary",
@@ -25,8 +23,6 @@ const colorByName = (name) => {
   return "default";
 };
 
-// ----------------------------------------------------------------------
-
 export function avatar(theme) {
   return {
     MuiAvatar: {

package/src/theme/overrides/components/backdrop.js

@@ -1,7 +1,5 @@
 import { alpha } from "@mui/material/styles";
 
-// ----------------------------------------------------------------------
-
 export function backdrop(theme) {
   return {
     MuiBackdrop: {

package/src/theme/overrides/components/badge.js

@@ -1,7 +1,5 @@
 import { badgeClasses } from "@mui/material/Badge";
 
-// ----------------------------------------------------------------------
-
 export function badge(theme) {
   return {
     MuiBadge: {

package/src/theme/overrides/components/breadcrumbs.js

@@ -1,5 +1,3 @@
-// ----------------------------------------------------------------------
-
 export function breadcrumbs(theme) {
   return {
     MuiBreadcrumbs: {

package/src/theme/overrides/components/button-group.js

@@ -1,12 +1,8 @@
 import { alpha } from "@mui/material/styles";
 import { buttonGroupClasses } from "@mui/material/ButtonGroup";
 
-// ----------------------------------------------------------------------
-
 const COLORS = ["primary", "secondary", "info", "success", "warning", "error"];
 
-// ----------------------------------------------------------------------
-
 export function buttonGroup(theme) {
   const rootStyles = (ownerState) => {
     const inheritColor = ownerState.color === "inherit";

package/src/theme/overrides/components/button.js

@@ -1,12 +1,8 @@
 import { alpha } from "@mui/material/styles";
 import { buttonClasses } from "@mui/material/Button";
 
-// ----------------------------------------------------------------------
-
 const COLORS = ["primary", "secondary", "info", "success", "warning", "error"];
 
-// ----------------------------------------------------------------------
-
 export function button(theme) {
   const lightMode = theme.palette.mode === "light";
 

package/src/theme/overrides/components/card.js

@@ -1,5 +1,3 @@
-// ----------------------------------------------------------------------
-
 export function card(theme) {
   return {
     MuiCard: {

package/src/theme/overrides/components/checkbox.js

@@ -1,5 +1,3 @@
-// ----------------------------------------------------------------------
-
 export function checkbox(theme) {
   return {
     MuiCheckbox: {

package/src/theme/overrides/components/chip.js

@@ -1,12 +1,8 @@
 import { alpha } from "@mui/material/styles";
 import { chipClasses } from "@mui/material/Chip";
 
-// ----------------------------------------------------------------------
-
 const COLORS = ["primary", "secondary", "info", "success", "warning", "error"];
 
-// ----------------------------------------------------------------------
-
 export function chip(theme) {
   const lightMode = theme.palette.mode === "light";
 

package/src/theme/overrides/components/css-baseline.js

@@ -1,5 +1,3 @@
-// ----------------------------------------------------------------------
-
 export function cssBaseline(theme) {
   return {
     MuiCssBaseline: {

package/src/theme/overrides/components/data-grid.js

@@ -6,8 +6,6 @@ import { paper } from "../../css";
 import { paperClasses } from "@mui/material/Paper";
 import { tablePaginationClasses } from "@mui/material/TablePagination";
 
-// ----------------------------------------------------------------------
-
 export function dataGrid(theme) {
   const paperStyles = paper({ theme, dropdown: true });
 

package/src/theme/overrides/components/date-picker.jsx

@@ -2,8 +2,6 @@ import Iconify from "../../../components/Iconify";
 import React from "react";
 import { buttonClasses } from "@mui/material/Button";
 
-// ----------------------------------------------------------------------
-
 const dateList = [
   "DatePicker",
   "DateTimePicker",

package/src/theme/overrides/components/dialog.js

@@ -1,5 +1,3 @@
-// ----------------------------------------------------------------------
-
 export function dialog(theme) {
   return {
     MuiDialog: {