@canmingir/link 1.2.55 → 1.2.57

package/src/lib/SidebarChat/SessionPopover.tsx

@@ -0,0 +1,221 @@
+import { Iconify } from "@canmingir/link/platform/components";
+import { MessageList } from "../ChatMessage";
+import { Scrollbar } from "@canmingir/link/platform/components";
+import Stack from "@mui/material/Stack";
+import { StoredSession } from "./types";
+import { alpha } from "@mui/material/styles";
+import { cleanIconName } from "./cleanIconName";
+
+import { Box, IconButton, Popover, Tooltip, Typography } from "@mui/material";
+import React, { memo, useEffect, useRef } from "react";
+
+interface SessionPopoverProps {
+  anchorEl: HTMLElement | null;
+  onClose: () => void;
+  onOpenFullChat: () => void;
+  sessions: StoredSession[];
+  activeSessionId: string;
+  currentSessionId?: string;
+  selectedConversationId?: string;
+  messagesEndRef: React.RefObject<HTMLDivElement>;
+  highlightedMessage: React.RefObject<HTMLDivElement>;
+}
+
+const SessionPopover = ({
+  anchorEl,
+  onClose,
+  onOpenFullChat,
+  sessions,
+  activeSessionId,
+  currentSessionId,
+  selectedConversationId,
+  messagesEndRef,
+  highlightedMessage,
+}: SessionPopoverProps) => {
+  const session = sessions.find((s) => s.sessionId === activeSessionId);
+  const isCurrent = activeSessionId === currentSessionId;
+  const popoverEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (anchorEl) {
+      setTimeout(() => {
+        popoverEndRef.current?.scrollIntoView({ behavior: "smooth" });
+      }, 80);
+    }
+  }, [anchorEl, activeSessionId]);
+
+  return (
+    <Popover
+      open={Boolean(anchorEl)}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      anchorOrigin={{ vertical: "center", horizontal: "left" }}
+      transformOrigin={{ vertical: "center", horizontal: "right" }}
+      slotProps={{
+        paper: {
+          sx: {
+            width: 360,
+            height: 500,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            borderRadius: "16px",
+            bgcolor: (theme) =>
+              alpha(
+                theme.palette.mode === "dark"
+                  ? theme.palette.grey[900]
+                  : theme.palette.common.white,
+                0.88
+              ),
+            backdropFilter: "blur(20px) saturate(180%)",
+            WebkitBackdropFilter: "blur(20px) saturate(180%)",
+            border: (theme) =>
+              `1px solid ${alpha(theme.palette.divider, 0.12)}`,
+            boxShadow: (theme) =>
+              `0 8px 40px ${alpha(theme.palette.common.black, 0.22)}`,
+            mr: 1,
+          },
+        },
+      }}
+    >
+      <Box
+        sx={{
+          flexShrink: 0,
+          px: 2,
+          py: 1.5,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          background: (theme) =>
+            `linear-gradient(135deg, ${alpha(
+              theme.palette.grey[900],
+              0.97
+            )} 0%, ${alpha(theme.palette.grey[800], 0.97)} 100%)`,
+          borderBottom: (theme) =>
+            `1px solid ${alpha(theme.palette.common.white, 0.06)}`,
+        }}
+      >
+        <Stack direction="row" alignItems="center" spacing={1}>
+          <Box
+            sx={{
+              width: 32,
+              height: 32,
+              borderRadius: "9px",
+              bgcolor: (theme) => (theme.palette.primary.main, 0.2),
+              border: (theme) =>
+                `1px solid ${alpha(theme.palette.primary.main, 0.3)}`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+            }}
+          >
+            {session?.agentIcon ? (
+              <Iconify
+                icon={cleanIconName(session.agentIcon)}
+                sx={{ width: 18, height: 18 }}
+              />
+            ) : (
+              <Typography
+                sx={{
+                  fontSize: "0.72rem",
+                  fontWeight: 800,
+                  color: (theme) =>
+                    isCurrent
+                      ? theme.palette.primary.light
+                      : theme.palette.warning.light,
+                }}
+              >
+                {session?.agentName?.[0] ?? "?"}
+              </Typography>
+            )}
+          </Box>
+          <Box>
+            <Typography
+              variant="subtitle2"
+              sx={{ color: "white", fontWeight: 700, lineHeight: 1.2 }}
+            >
+              {session?.agentName}
+            </Typography>
+            <Typography
+              variant="caption"
+              sx={{
+                color: (theme) => alpha(theme.palette.common.white, 0.5),
+                lineHeight: 1,
+              }}
+            >
+              {isCurrent ? "Current · " : "Session · "}
+              {session?.messages.length ?? 0} msg
+              {session ? ` · ${session.agentName}` : ""}
+            </Typography>
+          </Box>
+        </Stack>
+
+        <Stack direction="row" spacing={0.5}>
+          <Tooltip title="Open full chat" placement="top">
+            <IconButton
+              size="small"
+              onClick={onOpenFullChat}
+              sx={{
+                color: (theme) => alpha(theme.palette.common.white, 0.7),
+                "&:hover": { bgcolor: alpha("#fff", 0.08), color: "white" },
+              }}
+            >
+              <Iconify
+                icon="solar:maximize-square-bold"
+                sx={{ width: 16, height: 16 }}
+              />
+            </IconButton>
+          </Tooltip>
+          <IconButton
+            size="small"
+            onClick={onClose}
+            sx={{
+              color: (theme) => alpha(theme.palette.common.white, 0.7),
+              "&:hover": { bgcolor: alpha("#fff", 0.08), color: "white" },
+            }}
+          >
+            <Iconify icon="mdi:close" sx={{ width: 16, height: 16 }} />
+          </IconButton>
+        </Stack>
+      </Box>
+
+      <Box sx={{ flex: 1, minHeight: 0, overflow: "hidden" }}>
+        {session ? (
+          <Scrollbar sx={{ height: "100%", px: 1.5, py: 1 }}>
+            <MessageList
+              messages={
+                session.messages as {
+                  id: string;
+                  content: string;
+                  role: string;
+                }[]
+              }
+              selectedId={isCurrent ? selectedConversationId : undefined}
+              messagesEndRef={messagesEndRef}
+              highlightedMessage={highlightedMessage}
+            />
+            <div ref={popoverEndRef} />
+          </Scrollbar>
+        ) : (
+          <Box
+            sx={{
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 1,
+              opacity: 0.4,
+            }}
+          >
+            <Iconify icon="solar:history-bold" sx={{ width: 32, height: 32 }} />
+            <Typography variant="caption">No messages yet</Typography>
+          </Box>
+        )}
+      </Box>
+    </Popover>
+  );
+};
+
+export default memo(SessionPopover);

package/src/lib/SidebarChat/SidebarChat.tsx

@@ -0,0 +1,222 @@
+import ChatDrawer from "./ChatDrawer";
+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";
+
+type Message = { id?: string; content: string; role: string };
+
+interface SidebarChatProps {
+  selectedConversationId?: string;
+  sessionId?: string;
+  title: string;
+  open: boolean;
+  handleToggle: () => void;
+  handleNewUserMessage: (message: string) => void;
+  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;
+}
+
+const SidebarChat = ({
+  selectedConversationId,
+  sessionId,
+  title,
+  open,
+  handleToggle,
+  handleNewUserMessage,
+  history = [],
+  readOnly,
+  sound,
+  agent,
+  Presets = [],
+  selectedPreset,
+  onPresetChange,
+  onSessionSelect,
+  onNewSession,
+  beta,
+  storedSessions = [],
+  refreshSessions = () => {},
+  clearAllSessions = () => {},
+  toolRenderers,
+  onToolDecision,
+}: SidebarChatProps) => {
+  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({
+      behavior: "smooth",
+      block: "center",
+    });
+  }, []);
+
+  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" });
+    }
+  }, [history, open]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [aiResponded, scrollToBottom]);
+
+  useEffect(() => {
+    if (selectedConversationId) scrollToBottom();
+  }, [selectedConversationId, scrollToBottom]);
+
+  useEffect(() => {
+    if (!sound) {
+      setLoading(false);
+      return;
+    } else if (aiResponded !== null) {
+      setLoading(false);
+      !mute && play();
+    }
+    // eslint-disable-next-line
+  }, [aiResponded, mute, play]);
+
+  const handleSend = useCallback(
+    (content: string) => {
+      if (!content.trim()) return;
+      handleNewUserMessage(content);
+      !mute && play();
+      setLoading(true);
+    },
+    [handleNewUserMessage, mute, play]
+  );
+
+  const showLoading = useCallback(() => {
+    if (conversationSent?.createdAt > aiResponded?.createdAt) return true;
+    if (loading) return true;
+    if (conversationSent && aiResponded === null) return true;
+    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 && (
+        <SidebarSessionList
+          sessions={storedSessions}
+          currentSessionId={currentSessionId}
+          unreadCount={unreadCount}
+          onToggleChat={handleToggle}
+          onSessionClick={handleSessionClick}
+          onClearAll={clearAllSessions}
+          wrapperRef={sidebarRef}
+          beta={beta}
+          onNewSession={onNewSession}
+        />
+      )}
+
+      <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}
+      />
+    </>
+  );
+};
+
+export default memo(SidebarChat);