@canmingir/link 1.2.63 → 1.2.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.63",
+  "version": "1.2.64",
   "license": "Apache-2.0",
   "type": "module",
   "bin": {

package/src/layouts/DashboardLayout/nav-vertical.jsx

@@ -1,6 +1,3 @@
-import { Button, Typography } from "@mui/material";
-import { useEffect, useState } from "react";
-
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
 import Iconify from "../../components/Iconify";
@@ -20,6 +17,9 @@ import { usePathname } from "../../routes/hooks/use-pathname";
 import { useResponsive } from "../../hooks/use-responsive";
 import { useUser } from "../../hooks/use-user";
 
+import { Button, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+
 // ----------------------------------------------------------------------
 
 export default function NavVertical({ openNav, onCloseNav }) {
@@ -31,15 +31,9 @@ export default function NavVertical({ openNav, onCloseNav }) {
   const lgUp = useResponsive("up", "lg");
   const { beta, name } = config();
 
-  useEffect(() => {
-    const index = sideMenu.findIndex(
-      (item) => item.subheader === hideSubheader.subheader,
-    );
-
-    if (index !== -1) {
-      sideMenu.splice(index, 1);
-    }
-  }, [hideSubheader]);
+  const filteredSideMenu = sideMenu.filter(
+    (item) => item.subheader !== hideSubheader.subheader
+  );
 
   useEffect(() => {
     if (openNav) {
@@ -105,7 +99,8 @@ export default function NavVertical({ openNav, onCloseNav }) {
             mt: 3,
           }}
         >
-          <Logo maxSize={name ? 100 : 150} sx={{ ml: name ? 4 : -10 }} />
+          <Logo maxSize={name ? 100 : 150} sx={{ ml: name ? -8 : -10 }} />
+
           <Typography
             sx={{
               ml: 2,
@@ -116,7 +111,7 @@ export default function NavVertical({ openNav, onCloseNav }) {
         </Box>
       )}
       <NavSectionVertical
-        data={sideMenu}
+        data={filteredSideMenu}
         slotProps={{
           currentRole: user?.role,
         }}

package/src/lib/SidebarChat/ChatDrawer.tsx

@@ -1,6 +1,6 @@
-import PresetSelector from "../PresetSelector/PresetSelector";
 import Editor from "@monaco-editor/react";
 import { Iconify } from "@canmingir/link/platform/components";
+import PresetSelector from "../PresetSelector/PresetSelector";
 import { Scrollbar } from "@canmingir/link/platform/components";
 import Stack from "@mui/material/Stack";
 import { alpha } from "@mui/material/styles";
@@ -16,8 +16,8 @@ import {
   Typography,
 } from "@mui/material";
 import { LoadingMessage, MessageList } from "../ChatMessage";
-import { ToolDecision, ToolRenderers } from "../ChatMessage/ToolMessage";
 import React, { memo, useCallback, useRef, useState } from "react";
+import { ToolDecision, ToolRenderers } from "../ChatMessage/ToolMessage";
 
 const DRAWER_WIDTH = 400;
 
@@ -43,6 +43,8 @@ interface ChatDrawerProps {
   onNewSession?: () => void;
   toolRenderers?: ToolRenderers;
   onToolDecision?: (toolCallId: string, decision: ToolDecision) => void;
+  embedded?: boolean;
+  footer?: React.ReactNode;
 }
 
 const DEFAULT_JSON = `{\n  \n}`;
@@ -65,6 +67,8 @@ const ChatDrawer = ({
   highlightedMessage,
   toolRenderers,
   onToolDecision,
+  embedded,
+  footer,
 }: ChatDrawerProps) => {
   const inputRef = useRef(null);
   const [inputMode, setInputMode] = useState<InputMode>("chat");
@@ -124,115 +128,105 @@ const ChatDrawer = ({
     [handleJsonSend]
   );
 
-  return (
-    <Drawer
-      anchor="right"
-      open={open}
-      onClose={onClose}
-      variant="persistent"
+  const content = (
+    <Box
       sx={{
-        width: open ? DRAWER_WIDTH : 0,
-        flexShrink: 0,
-        "& .MuiDrawer-paper": {
-          width: DRAWER_WIDTH,
-          boxSizing: "border-box",
-          border: "none",
-          boxShadow: (theme) => theme.shadows[8],
-        },
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        width: "100%",
+        minWidth: 0,
+        maxWidth: "100%",
+        bgcolor: (theme) => theme.palette.background.default,
       }}
     >
+      {/* Header */}
       <Box
         sx={{
+          bgcolor: (theme) => alpha(theme.palette.grey[900], 0.9),
           display: "flex",
-          flexDirection: "column",
-          height: "100%",
-          bgcolor: (theme) => theme.palette.background.default,
+          justifyContent: "space-between",
+          alignItems: "center",
+          p: 2,
+          borderBottom: (theme) =>
+            `1px solid ${alpha(theme.palette.divider, 0.1)}`,
         }}
       >
-        {/* Header */}
-        <Box
-          sx={{
-            bgcolor: (theme) => alpha(theme.palette.grey[900], 0.9),
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            p: 2,
-            borderBottom: (theme) =>
-              `1px solid ${alpha(theme.palette.divider, 0.1)}`,
-          }}
-        >
-          <Typography variant="h6" sx={{ color: "white", fontWeight: 600 }}>
-            {title}
-          </Typography>
-          <Stack direction="row" spacing={1}>
-            {!readOnly && (
-              <IconButton onClick={onMuteToggle} size="small">
-                <Iconify
-                  icon={
-                    mute
-                      ? "solar:volume-cross-bold-duotone"
-                      : "solar:volume-loud-bold-duotone"
-                  }
-                  sx={{ width: 20, height: 20, color: "white" }}
-                />
-              </IconButton>
-            )}
-            <IconButton onClick={onClose} size="small">
+        <Typography variant="h6" sx={{ color: "white", fontWeight: 600 }}>
+          {title}
+        </Typography>
+        <Stack direction="row" spacing={1}>
+          {!readOnly && (
+            <IconButton onClick={onMuteToggle} size="small">
               <Iconify
-                icon="mdi:chevron-right"
-                sx={{ width: 24, height: 24, color: "white" }}
+                icon={
+                  mute
+                    ? "solar:volume-cross-bold-duotone"
+                    : "solar:volume-loud-bold-duotone"
+                }
+                sx={{ width: 20, height: 20, color: "white" }}
               />
             </IconButton>
-          </Stack>
-        </Box>
-
-        {Presets.length > 0 && !readOnly && (
-          <Box sx={{ px: 2, pt: 1 }}>
-            <PresetSelector
-              Presets={Presets}
-              selectedPreset={selectedPreset}
-              onPresetChange={onPresetChange}
+          )}
+          <IconButton onClick={onClose} size="small">
+            <Iconify
+              icon="mdi:chevron-right"
+              sx={{ width: 24, height: 24, color: "white" }}
             />
-          </Box>
-        )}
+          </IconButton>
+        </Stack>
+      </Box>
 
-        {/* Messages */}
-        <Box sx={{ flex: 1, overflow: "hidden", p: 2 }}>
-          <Scrollbar sx={{ height: "100%" }}>
-            <MessageList
-              messages={
-                history as { id: string; content: string; role: string }[]
-              }
-              selectedId={selectedConversationId}
-              messagesEndRef={messagesEndRef}
-              highlightedMessage={highlightedMessage}
-              toolRenderers={toolRenderers}
-              onToolDecision={onToolDecision}
-            />
-            {showLoading && <LoadingMessage messagesEndRef={messagesEndRef} />}
-          </Scrollbar>
+      {Presets.length > 0 && !readOnly && (
+        <Box sx={{ px: 2, pt: 1 }}>
+          <PresetSelector
+            Presets={Presets}
+            selectedPreset={selectedPreset}
+            onPresetChange={onPresetChange}
+          />
         </Box>
+      )}
+
+      {/* Messages */}
+      <Box sx={{ flex: 1, minWidth: 0, overflow: "hidden", p: 2 }}>
+        <Scrollbar sx={{ height: "100%", width: "100%" }}>
+          <MessageList
+            messages={
+              history as { id: string; content: string; role: string }[]
+            }
+            selectedId={selectedConversationId}
+            messagesEndRef={messagesEndRef}
+            highlightedMessage={highlightedMessage}
+            toolRenderers={toolRenderers}
+            onToolDecision={onToolDecision}
+          />
+          {showLoading && <LoadingMessage messagesEndRef={messagesEndRef} />}
+        </Scrollbar>
+      </Box>
+
+      {footer}
 
-        {/* Input Area */}
-        {!readOnly && (
+      {/* Input Area */}
+      {!readOnly && (
+        <Box
+          sx={{
+            borderTop: (theme) =>
+              `1px solid ${alpha(theme.palette.divider, 0.1)}`,
+            bgcolor: (theme) => alpha(theme.palette.grey[900], 0.5),
+          }}
+        >
+          {/* Mode Toggle */}
           <Box
             sx={{
-              borderTop: (theme) =>
-                `1px solid ${alpha(theme.palette.divider, 0.1)}`,
-              bgcolor: (theme) => alpha(theme.palette.grey[900], 0.5),
+              display: "flex",
+              alignItems: "center",
+              px: 2,
+              pt: 1.5,
+              pb: 1,
+              gap: 1,
             }}
           >
-            {/* Mode Toggle */}
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                px: 2,
-                pt: 1.5,
-                pb: 1,
-                gap: 1,
-              }}
-            >
+            {!embedded && (
               <ToggleButtonGroup
                 value={inputMode}
                 exclusive
@@ -265,6 +259,7 @@ const ChatDrawer = ({
                   />
                   Chat
                 </ToggleButton>
+
                 <ToggleButton value="json">
                   <Iconify
                     icon="solar:code-bold-duotone"
@@ -273,133 +268,177 @@ const ChatDrawer = ({
                   JSON
                 </ToggleButton>
               </ToggleButtonGroup>
-            </Box>
-
-            {/* Chat Input */}
-            {inputMode === "chat" && (
-              <Box sx={{ px: 2, pb: 2 }}>
-                <TextField
-                  variant="outlined"
-                  autoComplete="off"
-                  fullWidth
-                  placeholder="Type a message..."
-                  inputRef={inputRef}
-                  onKeyDown={handleKeyDown}
-                  size="small"
-                  sx={{
-                    "& .MuiOutlinedInput-root": {
-                      bgcolor: (theme) =>
-                        alpha(theme.palette.background.paper, 0.8),
-                    },
-                  }}
-                  slotProps={{
-                    input: {
-                      endAdornment: (
-                        <IconButton
-                          onClick={() => {
-                            const content = inputRef.current?.value?.trim();
-                            if (content) {
-                              onSend(content);
-                              inputRef.current.value = "";
-                            }
-                          }}
-                          size="small"
-                        >
-                          <Iconify
-                            icon="material-symbols:send"
-                            sx={{ width: 20, height: 20 }}
-                          />
-                        </IconButton>
-                      ),
-                    },
-                  }}
-                />
-              </Box>
             )}
+          </Box>
 
-            {/* JSON Input */}
-            {inputMode === "json" && (
-              <Box sx={{ px: 2, pb: 2 }} onKeyDown={handleJsonKeyDown}>
-                <Box
-                  sx={{
-                    border: (theme) =>
-                      `1px solid ${
-                        jsonError
-                          ? theme.palette.error.main
-                          : alpha(theme.palette.primary.main, 0.3)
-                      }`,
-                    borderRadius: 1,
-                    overflow: "hidden",
-                    bgcolor: "#1e1e1e",
-                  }}
-                >
-                  <Editor
-                    height="160px"
-                    defaultLanguage="json"
-                    value={jsonValue}
-                    onChange={handleJsonChange}
-                    theme="vs-dark"
-                    options={{
-                      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 },
-                    }}
-                  />
-                </Box>
-
-                <Box
-                  sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    mt: 1,
-                  }}
-                >
-                  <Typography
-                    variant="caption"
-                    sx={{
-                      color: jsonError
-                        ? "error.main"
-                        : (theme) => alpha(theme.palette.text.secondary, 0.5),
-                      fontSize: "0.7rem",
-                    }}
-                  >
-                    {jsonError ?? "⌘↵ to send"}
-                  </Typography>
-                  <Tooltip title="Send JSON (⌘↵)" placement="top">
-                    <span>
+          {/* Chat Input */}
+          {inputMode === "chat" && (
+            <Box sx={{ px: 2, pb: 2 }}>
+              <TextField
+                variant="outlined"
+                autoComplete="off"
+                fullWidth
+                multiline
+                maxRows={9}
+                placeholder="Type a message..."
+                inputRef={inputRef}
+                onKeyDown={handleKeyDown}
+                size="small"
+                sx={{
+                  "& .MuiOutlinedInput-root": {
+                    bgcolor: (theme) =>
+                      alpha(theme.palette.background.paper, 0.8),
+                  },
+                }}
+                slotProps={{
+                  input: {
+                    endAdornment: (
                       <IconButton
-                        onClick={handleJsonSend}
-                        size="small"
-                        disabled={!!jsonError}
                         sx={{
-                          color: (theme) =>
-                            jsonError
-                              ? theme.palette.action.disabled
-                              : theme.palette.primary.light,
+                          alignSelf: "flex-end",
+                          mb: 0.5,
+                        }}
+                        onClick={() => {
+                          const content = inputRef.current?.value?.trim();
+                          if (content) {
+                            onSend(content);
+                            inputRef.current.value = "";
+                          }
                         }}
+                        size="small"
                       >
                         <Iconify
                           icon="material-symbols:send"
-                          sx={{ width: 18, height: 18 }}
+                          sx={{ width: 20, height: 20 }}
                         />
                       </IconButton>
-                    </span>
-                  </Tooltip>
-                </Box>
+                    ),
+                  },
+                }}
+              />
+            </Box>
+          )}
+
+          {/* JSON Input */}
+          {inputMode === "json" && (
+            <Box sx={{ px: 2, pb: 2 }} onKeyDown={handleJsonKeyDown}>
+              <Box
+                sx={{
+                  border: (theme) =>
+                    `1px solid ${
+                      jsonError
+                        ? theme.palette.error.main
+                        : alpha(theme.palette.primary.main, 0.3)
+                    }`,
+                  borderRadius: 1,
+                  overflow: "hidden",
+                  bgcolor: "#1e1e1e",
+                }}
+              >
+                <Editor
+                  height="160px"
+                  defaultLanguage="json"
+                  value={jsonValue}
+                  onChange={handleJsonChange}
+                  theme="vs-dark"
+                  options={{
+                    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 },
+                  }}
+                />
               </Box>
-            )}
-          </Box>
-        )}
+
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  mt: 1,
+                }}
+              >
+                <Typography
+                  variant="caption"
+                  sx={{
+                    color: jsonError
+                      ? "error.main"
+                      : (theme) => alpha(theme.palette.text.secondary, 0.5),
+                    fontSize: "0.7rem",
+                  }}
+                >
+                  {jsonError ?? "⌘↵ to send"}
+                </Typography>
+                <Tooltip title="Send JSON (⌘↵)" placement="top">
+                  <span>
+                    <IconButton
+                      onClick={handleJsonSend}
+                      size="small"
+                      disabled={!!jsonError}
+                      sx={{
+                        color: (theme) =>
+                          jsonError
+                            ? theme.palette.action.disabled
+                            : theme.palette.primary.light,
+                      }}
+                    >
+                      <Iconify
+                        icon="material-symbols:send"
+                        sx={{ width: 18, height: 18 }}
+                      />
+                    </IconButton>
+                  </span>
+                </Tooltip>
+              </Box>
+            </Box>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+
+  if (embedded) {
+    return (
+      <Box
+        sx={{
+          display: open ? "flex" : "none",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          boxShadow: (theme) => theme.shadows[4],
+        }}
+      >
+        {content}
       </Box>
+    );
+  }
+
+  return (
+    <Drawer
+      anchor="right"
+      open={open}
+      onClose={onClose}
+      variant="persistent"
+      sx={{
+        width: open ? DRAWER_WIDTH : 0,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width: DRAWER_WIDTH,
+          boxSizing: "border-box",
+          border: "none",
+          boxShadow: (theme) => theme.shadows[8],
+        },
+      }}
+    >
+      {content}
     </Drawer>
   );
 };

package/src/lib/SidebarChat/SidebarChat.tsx

@@ -1,13 +1,13 @@
 import ChatDrawer from "./ChatDrawer";
+import MessageSfx from "./messageSFX.mp3";
 import SessionPopover from "./SessionPopover";
 import SidebarSessionList from "./SidebarSessionList";
 import { StoredSession } from "./types";
-import { ToolDecision, ToolRenderers } from "../ChatMessage/ToolMessage";
 import { useEvent } from "@nucleoidai/react-event";
 import useSound from "use-sound";
 
-import MessageSfx from "./messageSFX.mp3";
 import React, { memo, useCallback, useEffect, useRef, useState } from "react";
+import { ToolDecision, ToolRenderers } from "../ChatMessage/ToolMessage";
 
 type Message = { id?: string; content: string; role: string };
 
@@ -34,6 +34,8 @@ interface SidebarChatProps {
   clearAllSessions?: () => void;
   toolRenderers?: ToolRenderers;
   onToolDecision?: (toolCallId: string, decision: ToolDecision) => void;
+  embedded?: boolean;
+  footer?: React.ReactNode;
 }
 
 const SidebarChat = ({
@@ -58,6 +60,8 @@ const SidebarChat = ({
   clearAllSessions = () => {},
   toolRenderers,
   onToolDecision,
+  embedded,
+  footer,
 }: SidebarChatProps) => {
   const [aiResponded] = useEvent("AI_RESPONDED", null);
   const [conversationSent] = useEvent("CONVERSATION_SENT", null);
@@ -169,7 +173,7 @@ const SidebarChat = ({
 
   return (
     <>
-      {!open && (
+      {!open && !embedded && (
         <SidebarSessionList
           sessions={storedSessions}
           currentSessionId={currentSessionId}
@@ -183,17 +187,19 @@ const SidebarChat = ({
         />
       )}
 
-      <SessionPopover
-        anchorEl={popoverAnchor}
-        onClose={() => setPopoverAnchor(null)}
-        onOpenFullChat={handleOpenFromPopover}
-        sessions={storedSessions}
-        activeSessionId={activeLogSessionId}
-        currentSessionId={currentSessionId}
-        selectedConversationId={selectedConversationId}
-        messagesEndRef={messagesEndRef}
-        highlightedMessage={highlightedMessage}
-      />
+      {!embedded && (
+        <SessionPopover
+          anchorEl={popoverAnchor}
+          onClose={() => setPopoverAnchor(null)}
+          onOpenFullChat={handleOpenFromPopover}
+          sessions={storedSessions}
+          activeSessionId={activeLogSessionId}
+          currentSessionId={currentSessionId}
+          selectedConversationId={selectedConversationId}
+          messagesEndRef={messagesEndRef}
+          highlightedMessage={highlightedMessage}
+        />
+      )}
 
       <ChatDrawer
         title={title}
@@ -214,6 +220,8 @@ const SidebarChat = ({
         onNewSession={onNewSession}
         toolRenderers={toolRenderers}
         onToolDecision={onToolDecision}
+        embedded={embedded}
+        footer={footer}
       />
     </>
   );