@mui/x-data-grid-premium/components/aiAssistantPanel/GridAiAssistantPanelConversationsMenu.js

The Premium plan edition of the MUI X Data Grid Components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GridAiAssistantPanelConversationsMenu = GridAiAssistantPanelConversationsMenu;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _useId = _interopRequireDefault(require("@mui/utils/useId"));
var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
var _gridAiAssistantSelectors = require("../../hooks/features/aiAssistant/gridAiAssistantSelectors");
var _jsxRuntime = require("react/jsx-runtime");
function GridAiAssistantPanelConversationsMenu() {
  const rootProps = (0, _useGridRootProps.useGridRootProps)();
  const apiRef = (0, _useGridApiContext.useGridApiContext)();
  const activeConversationIndex = (0, _xDataGridPro.useGridSelector)(apiRef, _gridAiAssistantSelectors.gridAiAssistantActiveConversationIndexSelector);
  const conversations = (0, _xDataGridPro.useGridSelector)(apiRef, _gridAiAssistantSelectors.gridAiAssistantConversationsSelector);
  const [open, setOpen] = React.useState(false);
  const menuId = (0, _useId.default)();
  const triggerId = (0, _useId.default)();
  const triggerRef = React.useRef(null);
  const handleOpen = () => {
    setOpen(!open);
  };
  const handleClose = () => {
    setOpen(false);
  };

  // Ordered by most recent prompt in conversations
  const sortedConversations = React.useMemo(() => {
    return [...conversations].sort((a, b) => {
      if (!a.prompts.length) {
        return -1;
      }
      // New conversations should be at the top
      if (!b.prompts.length) {
        return 1;
      }
      return b.prompts[b.prompts.length - 1].createdAt.getTime() - a.prompts[a.prompts.length - 1].createdAt.getTime();
    });
  }, [conversations]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
      title: apiRef.current.getLocaleText('aiAssistantPanelConversationHistory'),
      enterDelay: 500,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
          disabled: conversations.length === 0,
          id: triggerId,
          "aria-haspopup": "true",
          "aria-controls": open ? menuId : undefined,
          "aria-expanded": open ? 'true' : undefined,
          "aria-label": apiRef.current.getLocaleText('aiAssistantPanelConversationHistory'),
          onClick: handleOpen,
          ref: triggerRef,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.aiAssistantPanelHistoryIcon, {
            fontSize: "small"
          })
        }))
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridMenu, {
      target: triggerRef.current,
      open: open,
      onClose: handleClose,
      position: "bottom-end",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, (0, _extends2.default)({
        id: menuId,
        "aria-labelledby": triggerId,
        autoFocusItem: true
      }, rootProps.slotProps?.baseMenuList, {
        children: sortedConversations.map((conversation, sortedIndex) => {
          const conversationIndex = conversations.findIndex(c => c === conversation);
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
            selected: conversationIndex === activeConversationIndex,
            onClick: () => {
              apiRef.current.aiAssistant.setActiveConversationIndex(conversationIndex);
              handleClose();
            },
            children: conversation.title
          }, `${conversation.id}-${sortedIndex}`);
        })
      }))
    })]
  });
}