@mui/x-data-grid-premium/components/aiAssistantPanel/GridAiAssistantPanel.mjs

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

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { useGridSelector, getDataGridUtilityClass } from '@mui/x-data-grid-pro';
import { vars } from '@mui/x-data-grid-pro/internals';
import composeClasses from '@mui/utils/composeClasses';
import { styled } from '@mui/material/styles';
import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
import { gridAiAssistantActiveConversationSelector, gridAiAssistantConversationsSelector } from "../../hooks/features/aiAssistant/gridAiAssistantSelectors.mjs";
import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
import { GridAiAssistantPanelConversation } from "./GridAiAssistantPanelConversation.mjs";
import { GridPromptField } from "../promptField/GridPromptField.mjs";
import { GridAiAssistantPanelSuggestions } from "./GridAiAssistantPanelSuggestions.mjs";
import { GridAiAssistantPanelConversationsMenu } from "./GridAiAssistantPanelConversationsMenu.mjs";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useUtilityClasses = ownerState => {
  const {
    classes
  } = ownerState;
  const slots = {
    root: ['aiAssistantPanel'],
    header: ['aiAssistantPanelHeader'],
    title: ['aiAssistantPanelTitle'],
    titleContainer: ['aiAssistantPanelTitleContainer'],
    conversationTitle: ['aiAssistantPanelConversationTitle'],
    body: ['aiAssistantPanelBody'],
    emptyText: ['aiAssistantPanelEmptyText'],
    footer: ['aiAssistantPanelFooter']
  };
  return composeClasses(slots, getDataGridUtilityClass, classes);
};
const AiAssistantPanelRoot = styled('div', {
  name: 'MuiDataGrid',
  slot: 'AiAssistantPanel'
})({
  flexDirection: 'column',
  width: 380,
  maxHeight: 'none',
  overflow: 'hidden'
});
const AiAssistantPanelHeader = styled('div', {
  name: 'MuiDataGrid',
  slot: 'AiAssistantPanelHeader'
})({
  flexShrink: 0,
  display: 'flex',
  alignItems: 'center',
  width: '100%',
  boxSizing: 'border-box',
  borderBottom: `1px solid ${vars.colors.border.base}`,
  height: 52,
  padding: vars.spacing(0, 0.75, 0, 2)
});
const AiAssistantPanelTitleContainer = styled('div', {
  name: 'MuiDataGrid',
  slot: 'AiAssistantPanelTitleContainer'
})({
  display: 'flex',
  flexDirection: 'column',
  flex: 1,
  overflow: 'hidden'
});
const AiAssistantPanelTitle = styled('span', {
  name: 'MuiDataGrid',
  slot: 'AiAssistantPanelTitle'
})({
  font: vars.typography.font.body,
  fontWeight: vars.typography.fontWeight.medium,
  marginTop: vars.spacing(0.25)
});
const AiAssistantPanelConversationTitle = styled('span', {
  name: 'MuiDataGrid',
  slot: 'AiAssistantPanelConversationTitle'
})({
  font: vars.typography.font.small,
  color: vars.colors.foreground.muted,
  marginTop: vars.spacing(-0.25),
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap'
});
const AiAssistantPanelBody = styled('div', {
  name: 'MuiDataGrid',
  slot: 'AiAssistantPanelBody'
})({
  flexGrow: 0,
  flexShrink: 0,
  height: 260,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center'
});
const AiAssistantPanelEmptyText = styled('span', {
  name: 'MuiDataGrid',
  slot: 'AiAssistantPanelEmptyText'
})({
  font: vars.typography.font.body,
  color: vars.colors.foreground.muted
});
const AiAssistantPanelFooter = styled('div', {
  name: 'MuiDataGrid',
  slot: 'AiAssistantPanelFooter'
})({
  flexShrink: 0,
  display: 'flex',
  flexDirection: 'column',
  gap: vars.spacing(1),
  borderTop: `1px solid ${vars.colors.border.base}`,
  padding: vars.spacing(1)
});
function GridAiAssistantPanel() {
  const rootProps = useGridRootProps();
  const apiRef = useGridApiContext();
  const classes = useUtilityClasses(rootProps);
  const activeConversation = useGridSelector(apiRef, gridAiAssistantActiveConversationSelector);
  const conversations = useGridSelector(apiRef, gridAiAssistantConversationsSelector);
  const conversationTitle = activeConversation?.title || apiRef.current.getLocaleText('aiAssistantPanelNewConversation');
  const createConversation = React.useCallback(() => {
    const newConversation = conversations.findIndex(conversation => !conversation.prompts.length);
    if (newConversation !== -1) {
      apiRef.current.aiAssistant.setActiveConversationIndex(newConversation);
    } else {
      apiRef.current.aiAssistant.setConversations(newConversations => [...newConversations, {
        title: apiRef.current.getLocaleText('aiAssistantPanelNewConversation'),
        prompts: []
      }]);
      apiRef.current.aiAssistant.setActiveConversationIndex(conversations.length);
    }
  }, [apiRef, conversations]);
  return /*#__PURE__*/_jsxs(AiAssistantPanelRoot, {
    className: classes.root,
    ownerState: rootProps,
    children: [/*#__PURE__*/_jsxs(AiAssistantPanelHeader, {
      className: classes.header,
      ownerState: rootProps,
      children: [/*#__PURE__*/_jsxs(AiAssistantPanelTitleContainer, {
        className: classes.titleContainer,
        ownerState: rootProps,
        children: [/*#__PURE__*/_jsx(AiAssistantPanelTitle, {
          className: classes.title,
          ownerState: rootProps,
          children: apiRef.current.getLocaleText('aiAssistantPanelTitle')
        }), /*#__PURE__*/_jsx(AiAssistantPanelConversationTitle, {
          className: classes.conversationTitle,
          ownerState: rootProps,
          title: conversationTitle,
          children: conversationTitle
        })]
      }), /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
        title: apiRef.current.getLocaleText('aiAssistantPanelNewConversation'),
        enterDelay: 500,
        children: /*#__PURE__*/_jsx("span", {
          children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({}, rootProps.slotProps?.baseIconButton, {
            disabled: !conversations.length || !activeConversation?.prompts.length,
            onClick: createConversation,
            children: /*#__PURE__*/_jsx(rootProps.slots.aiAssistantPanelNewConversationIcon, {
              fontSize: "small"
            })
          }))
        })
      }), /*#__PURE__*/_jsx(GridAiAssistantPanelConversationsMenu, {}), /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({}, rootProps.slotProps?.baseIconButton, {
        "aria-label": apiRef.current.getLocaleText('aiAssistantPanelClose'),
        onClick: apiRef.current.hidePreferences,
        children: /*#__PURE__*/_jsx(rootProps.slots.aiAssistantPanelCloseIcon, {
          fontSize: "small"
        })
      }))]
    }), /*#__PURE__*/_jsx(AiAssistantPanelBody, {
      className: classes.body,
      ownerState: rootProps,
      children: activeConversation && activeConversation.prompts.length > 0 ? /*#__PURE__*/_jsx(GridAiAssistantPanelConversation, {
        conversation: activeConversation
      }) : /*#__PURE__*/_jsx(AiAssistantPanelEmptyText, {
        ownerState: rootProps,
        className: classes.emptyText,
        children: apiRef.current.getLocaleText('aiAssistantPanelEmptyConversation')
      })
    }), /*#__PURE__*/_jsxs(AiAssistantPanelFooter, {
      className: classes.footer,
      ownerState: rootProps,
      children: [/*#__PURE__*/_jsx(GridPromptField, {
        onSubmit: apiRef.current.aiAssistant.processPrompt
      }), rootProps.aiAssistantSuggestions && rootProps.aiAssistantSuggestions.length > 0 && /*#__PURE__*/_jsx(GridAiAssistantPanelSuggestions, {
        suggestions: rootProps.aiAssistantSuggestions
      })]
    })]
  });
}
export { GridAiAssistantPanel };