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

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

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { GridMenu, useGridSelector } from '@mui/x-data-grid-pro';
import useId from '@mui/utils/useId';
import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
import { gridAiAssistantActiveConversationIndexSelector, gridAiAssistantConversationsSelector } from "../../hooks/features/aiAssistant/gridAiAssistantSelectors.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function GridAiAssistantPanelConversationsMenu() {
  const rootProps = useGridRootProps();
  const apiRef = useGridApiContext();
  const activeConversationIndex = useGridSelector(apiRef, gridAiAssistantActiveConversationIndexSelector);
  const conversations = useGridSelector(apiRef, gridAiAssistantConversationsSelector);
  const [open, setOpen] = React.useState(false);
  const menuId = useId();
  const triggerId = useId();
  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__*/_jsxs(React.Fragment, {
    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
      title: apiRef.current.getLocaleText('aiAssistantPanelConversationHistory'),
      enterDelay: 500,
      children: /*#__PURE__*/_jsx("span", {
        children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({}, 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__*/_jsx(rootProps.slots.aiAssistantPanelHistoryIcon, {
            fontSize: "small"
          })
        }))
      })
    }), /*#__PURE__*/_jsx(GridMenu, {
      target: triggerRef.current,
      open: open,
      onClose: handleClose,
      position: "bottom-end",
      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, _extends({
        id: menuId,
        "aria-labelledby": triggerId,
        autoFocusItem: true
      }, rootProps.slotProps?.baseMenuList, {
        children: sortedConversations.map((conversation, sortedIndex) => {
          const conversationIndex = conversations.findIndex(c => c === conversation);
          return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
            selected: conversationIndex === activeConversationIndex,
            onClick: () => {
              apiRef.current.aiAssistant.setActiveConversationIndex(conversationIndex);
              handleClose();
            },
            children: conversation.title
          }, `${conversation.id}-${sortedIndex}`);
        })
      }))
    })]
  });
}
export { GridAiAssistantPanelConversationsMenu };