@canmingir/link 1.2.65 → 1.2.67

package/src/lib/DevTool/DevToolFrame.jsx

@@ -0,0 +1,116 @@
+import React from "react";
+import { Box, Divider } from "@mui/material";
+
+const DevToolFrame = ({
+  width = 62,
+  height = "auto",
+  top = "50%",
+  open = true,
+  content,
+  header,
+  footer,
+  sx,
+}) => {
+  if (open === false) return null;
+
+  return (
+    <Box
+      component="aside"
+      sx={{
+        position: "fixed",
+        top,
+        right: 0,
+        transform: "translateY(-50%)",
+        width,
+        height,
+        bgcolor: (theme) =>
+          theme.palette.mode === "dark"
+            ? "background.paper"
+            : "rgba(255, 255, 255, 0.85)",
+        backdropFilter: "blur(16px) saturate(180%)",
+        WebkitBackdropFilter: "blur(16px) saturate(180%)",
+        border: (theme) =>
+          `1px solid ${
+            theme.palette.mode === "dark"
+              ? "rgba(255,255,255,0.07)"
+              : "rgba(0,0,0,0.07)"
+          }`,
+        borderRadius: "4px",
+        boxShadow: (theme) =>
+          theme.palette.mode === "dark"
+            ? "0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04)"
+            : "0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04)",
+        zIndex: (theme) => theme.zIndex.modal + 3,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        py: 1.5,
+        overflowY: "hidden",
+        overflowX: "hidden",
+        "&::-webkit-scrollbar": { display: "none" },
+        scrollbarWidth: "none",
+        ...(sx || {}),
+      }}
+    >
+      {header && (
+        <Box
+          sx={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            flexShrink: 0,
+          }}
+        >
+          {header}
+        </Box>
+      )}
+
+      <Box
+        sx={{
+          flex: 1,
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          overflowY: "auto",
+          overflowX: "hidden",
+          "&::-webkit-scrollbar": { display: "none" },
+          scrollbarWidth: "none",
+        }}
+      >
+        {content}
+      </Box>
+
+      {footer && (
+        <>
+          <Divider
+            flexItem
+            sx={{
+              borderColor: (theme) =>
+                theme.palette.mode === "dark"
+                  ? "rgba(255,255,255,0.07)"
+                  : "rgba(0,0,0,0.07)",
+              width: "100%",
+              flexShrink: 0,
+            }}
+          />
+          <Box
+            sx={{
+              width: "100%",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              flexShrink: 0,
+              pt: 0.5,
+            }}
+          >
+            {footer}
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default DevToolFrame;

package/src/lib/Flow/layouts/InfoNode.jsx

@@ -1,8 +1,8 @@
+import { Iconify } from "@canmingir/link/platform/components";
+
 import React, { useEffect, useState } from "react";
 import { alpha, styled } from "@mui/material/styles";
 
-import { Iconify } from "@canmingir/link/platform/components";
-
 const ANIMATION_DELAY_MS = 200;
 
 const MainContainer = styled("div", {
@@ -79,6 +79,10 @@ const IconContainer = styled("div", {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
+    boxShadow: `
+            4px 4px 0 rgba(255, 255, 255, 0.1),
+            5px 5px 5px rgba(0, 0, 0, 0.5)
+          `,
 
     '[data-hovered="true"] &': {
       backgroundColor: hoverBg,

package/src/lib/SidebarChat/ChatDrawer.tsx

@@ -428,6 +428,7 @@ const ChatDrawer = ({
       onClose={onClose}
       variant="persistent"
       sx={{
+        zIndex: (theme) => theme.zIndex.modal + 3,
         width: open ? DRAWER_WIDTH : 0,
         flexShrink: 0,
         "& .MuiDrawer-paper": {

package/src/lib/SidebarChat/SessionPopover.tsx

@@ -51,6 +51,7 @@ const SessionPopover = ({
       onClose={onClose}
       anchorOrigin={{ vertical: "center", horizontal: "left" }}
       transformOrigin={{ vertical: "center", horizontal: "right" }}
+      sx={{ zIndex: (theme) => theme.zIndex.modal + 3 }}
       slotProps={{
         paper: {
           sx: {

package/src/lib/SidebarChat/SidebarChat.tsx

@@ -1,8 +1,5 @@
 import ChatDrawer from "./ChatDrawer";
 import MessageSfx from "./messageSFX.mp3";
-import SessionPopover from "./SessionPopover";
-import SidebarSessionList from "./SidebarSessionList";
-import { StoredSession } from "./types";
 import { useEvent } from "@nucleoidai/react-event";
 import useSound from "use-sound";
 
@@ -21,17 +18,11 @@ interface SidebarChatProps {
   history?: Message[];
   readOnly?: boolean;
   sound?: boolean;
-  agent?: { id: string; name: string; icon: string };
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Presets?: any[];
   selectedPreset?: string;
   onPresetChange?: (preset: string) => void;
-  onSessionSelect?: (sessionId: string, cachedMessages?: Message[]) => void;
   onNewSession?: () => void;
-  beta?: boolean;
-  storedSessions?: StoredSession[];
-  refreshSessions?: () => void;
-  clearAllSessions?: () => void;
   toolRenderers?: ToolRenderers;
   onToolDecision?: (toolCallId: string, decision: ToolDecision) => void;
   embedded?: boolean;
@@ -40,7 +31,6 @@ interface SidebarChatProps {
 
 const SidebarChat = ({
   selectedConversationId,
-  sessionId,
   title,
   open,
   handleToggle,
@@ -48,16 +38,10 @@ const SidebarChat = ({
   history = [],
   readOnly,
   sound,
-  agent,
   Presets = [],
   selectedPreset,
   onPresetChange,
-  onSessionSelect,
   onNewSession,
-  beta,
-  storedSessions = [],
-  refreshSessions = () => {},
-  clearAllSessions = () => {},
   toolRenderers,
   onToolDecision,
   embedded,
@@ -66,20 +50,12 @@ const SidebarChat = ({
   const [aiResponded] = useEvent("AI_RESPONDED", null);
   const [conversationSent] = useEvent("CONVERSATION_SENT", null);
 
-  const currentSessionId = sessionId || selectedConversationId;
-
   const [mute, setMute] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [unreadCount, setUnreadCount] = useState(0);
   const [play] = useSound(MessageSfx);
 
   const messagesEndRef = useRef(null);
   const highlightedMessage = useRef(null);
-  const lastSeenCountRef = useRef(0);
-  const sidebarRef = useRef<HTMLDivElement>(null);
-
-  const [popoverAnchor, setPopoverAnchor] = useState<HTMLElement | null>(null);
-  const [activeLogSessionId, setActiveLogSessionId] = useState("");
 
   const scrollToBottom = useCallback(() => {
     highlightedMessage.current?.scrollIntoView({
@@ -88,20 +64,6 @@ const SidebarChat = ({
     });
   }, []);
 
-  useEffect(() => {
-    if (open) {
-      lastSeenCountRef.current = history.length;
-      setUnreadCount(0);
-      setPopoverAnchor(null);
-    }
-  }, [open, history.length]);
-
-  useEffect(() => {
-    if (!open && history.length > lastSeenCountRef.current) {
-      setUnreadCount(history.length - lastSeenCountRef.current);
-    }
-  }, [history, open]);
-
   useEffect(() => {
     if (open) {
       messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -144,86 +106,29 @@ const SidebarChat = ({
     return false;
   }, [conversationSent, aiResponded, loading]);
 
-  const handleSessionClick = useCallback(
-    (event: React.MouseEvent<HTMLElement>, sid: string) => {
-      refreshSessions();
-      setActiveLogSessionId(sid);
-      setPopoverAnchor(event.currentTarget);
-    },
-    [refreshSessions]
-  );
-
-  const handleOpenFromPopover = useCallback(() => {
-    setPopoverAnchor(null);
-    if (activeLogSessionId && activeLogSessionId !== currentSessionId) {
-      const cached = storedSessions.find(
-        (s) => s.sessionId === activeLogSessionId
-      );
-      onSessionSelect?.(activeLogSessionId, cached?.messages);
-    }
-    if (!open) handleToggle();
-  }, [
-    handleToggle,
-    open,
-    activeLogSessionId,
-    currentSessionId,
-    onSessionSelect,
-    storedSessions,
-  ]);
-
   return (
-    <>
-      {!open && !embedded && (
-        <SidebarSessionList
-          sessions={storedSessions}
-          currentSessionId={currentSessionId}
-          unreadCount={unreadCount}
-          onToggleChat={handleToggle}
-          onSessionClick={handleSessionClick}
-          onClearAll={clearAllSessions}
-          wrapperRef={sidebarRef}
-          beta={beta}
-          onNewSession={onNewSession}
-        />
-      )}
-
-      {!embedded && (
-        <SessionPopover
-          anchorEl={popoverAnchor}
-          onClose={() => setPopoverAnchor(null)}
-          onOpenFullChat={handleOpenFromPopover}
-          sessions={storedSessions}
-          activeSessionId={activeLogSessionId}
-          currentSessionId={currentSessionId}
-          selectedConversationId={selectedConversationId}
-          messagesEndRef={messagesEndRef}
-          highlightedMessage={highlightedMessage}
-        />
-      )}
-
-      <ChatDrawer
-        title={title}
-        open={open}
-        onClose={handleToggle}
-        history={history}
-        selectedConversationId={selectedConversationId}
-        readOnly={readOnly}
-        mute={mute}
-        onMuteToggle={() => setMute((prev) => !prev)}
-        showLoading={showLoading()}
-        onSend={handleSend}
-        Presets={Presets}
-        selectedPreset={selectedPreset}
-        onPresetChange={onPresetChange}
-        messagesEndRef={messagesEndRef}
-        highlightedMessage={highlightedMessage}
-        onNewSession={onNewSession}
-        toolRenderers={toolRenderers}
-        onToolDecision={onToolDecision}
-        embedded={embedded}
-        footer={footer}
-      />
-    </>
+    <ChatDrawer
+      title={title}
+      open={open}
+      onClose={handleToggle}
+      history={history}
+      selectedConversationId={selectedConversationId}
+      readOnly={readOnly}
+      mute={mute}
+      onMuteToggle={() => setMute((prev) => !prev)}
+      showLoading={showLoading()}
+      onSend={handleSend}
+      Presets={Presets}
+      selectedPreset={selectedPreset}
+      onPresetChange={onPresetChange}
+      messagesEndRef={messagesEndRef}
+      highlightedMessage={highlightedMessage}
+      onNewSession={onNewSession}
+      toolRenderers={toolRenderers}
+      onToolDecision={onToolDecision}
+      embedded={embedded}
+      footer={footer}
+    />
   );
 };
 

package/src/lib/SidebarChat/SidebarSessionList.tsx

@@ -1,12 +1,20 @@
+import DevToolFrame from "../DevTool/DevToolFrame";
+import { Iconify } from "@canmingir/link/platform/components";
 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";
 
+export interface DevToolTopAction {
+  icon: string;
+  label: string;
+  onClick: () => void;
+  tooltip?: string;
+}
+
 interface SidebarSessionListProps {
   sessions: StoredSession[];
   currentSessionId?: string;
@@ -20,6 +28,7 @@ interface SidebarSessionListProps {
   onNewSession?: () => void;
   wrapperRef?: React.Ref<HTMLDivElement>;
   beta?: boolean;
+  topAction?: DevToolTopAction;
 }
 
 const btnBase = {
@@ -47,9 +56,48 @@ const SidebarSessionList = ({
   onNewSession,
   wrapperRef,
   beta,
+  topAction,
 }: SidebarSessionListProps) => {
   const sidebarSessions = sessions;
 
+  const contextRailContent = topAction ? (
+    <Tooltip
+      title={topAction.tooltip ?? topAction.label}
+      placement="left"
+      enterDelay={1000}
+      enterNextDelay={1000}
+    >
+      <Box
+        onClick={topAction.onClick}
+        sx={{
+          ...btnBase,
+          flexDirection: "column",
+          gap: 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={topAction.icon} sx={{ width: 20, height: 20 }} />
+        <Typography
+          sx={{
+            fontSize: "0.5rem",
+            fontWeight: 500,
+            letterSpacing: 0.5,
+            lineHeight: 1,
+            textTransform: "capitalize",
+          }}
+        >
+          {topAction.label}
+        </Typography>
+      </Box>
+    </Tooltip>
+  ) : null;
+
   const header = (
     <>
       <Tooltip
@@ -291,13 +339,28 @@ const SidebarSessionList = ({
   );
 
   return (
-    <DevTool
-      width={45}
-      height={310}
-      header={header}
-      content={content}
-      footer={footer}
-    />
+    <>
+      {contextRailContent && (
+        <DevToolFrame
+          width={45}
+          height="auto"
+          content={contextRailContent}
+          sx={{
+            top: "calc(50% - 155px)",
+            transform: "translateY(calc(-100% - 12px))",
+            py: 1,
+          }}
+        />
+      )}
+
+      <DevToolFrame
+        width={45}
+        height={310}
+        header={header}
+        content={content}
+        footer={footer}
+      />
+    </>
   );
 };