@mui/x-data-grid-premium 8.0.0-beta.2 → 8.0.0

package/components/GridPremiumToolbar.js

@@ -9,16 +9,43 @@ exports.GridPremiumToolbar = GridPremiumToolbar;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _internals = require("@mui/x-data-grid/internals");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _export = require("./export");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+var _PivotPanelTrigger = require("./pivotPanel/PivotPanelTrigger");
+var _utils = require("../hooks/features/pivoting/utils");
+var _aiAssistantPanel = require("./aiAssistantPanel");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["excelOptions"];
 function GridPremiumToolbar(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const additionalItems = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [(0, _utils.isPivotingAvailable)(rootProps) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PivotPanelTrigger.PivotPanelTrigger, {
+      render: (triggerProps, state) => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarPivot'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.ToolbarButton, (0, _extends2.default)({}, triggerProps, {
+          color: state.active ? 'primary' : 'default',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotIcon, {
+            fontSize: "small"
+          })
+        }))
+      })
+    }), rootProps.aiAssistant && /*#__PURE__*/(0, _jsxRuntime.jsx)(_aiAssistantPanel.AiAssistantPanelTrigger, {
+      render: triggerProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarAssistant'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.ToolbarButton, (0, _extends2.default)({}, triggerProps, {
+          color: "default",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.aiAssistantIcon, {
+            fontSize: "small"
+          })
+        }))
+      })
+    })]
+  });
   const additionalExportMenuItems = !props.excelOptions?.disableToolbarButton ? onMenuItemClick => /*#__PURE__*/(0, _jsxRuntime.jsx)(_export.ExportExcel, {
     render: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({}, rootProps.slotProps?.baseMenuItem)),
     options: props.excelOptions,
@@ -26,6 +53,7 @@ function GridPremiumToolbar(props) {
     children: apiRef.current.getLocaleText('toolbarExportExcel')
   }) : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridToolbar, (0, _extends2.default)({}, other, {
+    additionalItems: additionalItems,
     additionalExportMenuItems: additionalExportMenuItems
   }));
 }

package/components/aiAssistantPanel/AiAssistantPanelTrigger.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { RenderProp } from '@mui/x-data-grid-pro/internals';
+import { GridSlotProps } from '@mui/x-data-grid-pro';
+export interface AiAssistantPanelState {
+  /**
+   * If `true`, the assistant panel is open.
+   */
+  open: boolean;
+}
+export type AiAssistantPanelTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton'], AiAssistantPanelState>;
+  /**
+   * A function to customize rendering of the component.
+   */
+  className?: string | ((state: AiAssistantPanelState) => string);
+};
+/**
+ * A button that opens and closes the assistant panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [AI Assistant Panel](https://mui.com/x/react-data-grid/components/ai-assistant-panel/)
+ *
+ * API:
+ *
+ * - [AiAssistantPanelTrigger API](https://mui.com/x/api/data-grid/ai-assistant-panel-trigger/)
+ */
+declare const AiAssistantPanelTrigger: React.ForwardRefExoticComponent<AiAssistantPanelTriggerProps> | React.ForwardRefExoticComponent<Omit<AiAssistantPanelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AiAssistantPanelTrigger };

package/components/aiAssistantPanel/AiAssistantPanelTrigger.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AiAssistantPanelTrigger = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _utils = require("@mui/material/utils");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "className", "onClick", "onPointerUp"];
+/**
+ * A button that opens and closes the assistant panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [AI Assistant Panel](https://mui.com/x/react-data-grid/components/ai-assistant-panel/)
+ *
+ * API:
+ *
+ * - [AiAssistantPanelTrigger API](https://mui.com/x/api/data-grid/ai-assistant-panel-trigger/)
+ */
+const AiAssistantPanelTrigger = exports.AiAssistantPanelTrigger = (0, _forwardRef.forwardRef)(function AiAssistantPanelTrigger(props, ref) {
+  const {
+      render,
+      className,
+      onClick,
+      onPointerUp
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const buttonId = (0, _useId.default)();
+  const panelId = (0, _useId.default)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const panelState = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridPreferencePanelStateSelector);
+  const open = panelState.open && panelState.openedPanelValue === _xDataGridPro.GridPreferencePanelsValue.aiAssistant;
+  const state = {
+    open
+  };
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const {
+    aiAssistantPanelTriggerRef
+  } = (0, _internals.useGridPanelContext)();
+  const handleRef = (0, _utils.useForkRef)(ref, aiAssistantPanelTriggerRef);
+  const handleClick = event => {
+    if (open) {
+      apiRef.current.hidePreferences();
+    } else {
+      apiRef.current.showPreferences(_xDataGridPro.GridPreferencePanelsValue.aiAssistant, panelId, buttonId);
+    }
+    onClick?.(event);
+  };
+  const handlePointerUp = event => {
+    if (open) {
+      event.stopPropagation();
+    }
+    onPointerUp?.(event);
+  };
+  const element = (0, _internals.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
+    id: buttonId,
+    'aria-haspopup': 'true',
+    'aria-expanded': open ? 'true' : undefined,
+    'aria-controls': open ? panelId : undefined,
+    className: resolvedClassName
+  }, other, {
+    onClick: handleClick,
+    onPointerUp: handlePointerUp,
+    ref: handleRef
+  }), state);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? AiAssistantPanelTrigger.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A function to customize rendering of the component.
+   */
+  className: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  disabled: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  role: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
+  startIcon: _propTypes.default.node,
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.number,
+  title: _propTypes.default.string,
+  touchRippleRef: _propTypes.default.any
+} : void 0;

package/components/aiAssistantPanel/GridAiAssistantPanel.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function GridAiAssistantPanel(): React.JSX.Element;
+export { GridAiAssistantPanel };

package/components/aiAssistantPanel/GridAiAssistantPanel.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridAiAssistantPanel = GridAiAssistantPanel;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _utils = require("@mui/utils");
+var _system = require("@mui/system");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridAiAssistantSelectors = require("../../hooks/features/aiAssistant/gridAiAssistantSelectors");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _GridAiAssistantPanelConversation = require("./GridAiAssistantPanelConversation");
+var _GridPromptField = require("../promptField/GridPromptField");
+var _GridAiAssistantPanelSuggestions = require("./GridAiAssistantPanelSuggestions");
+var _GridAiAssistantPanelConversationsMenu = require("./GridAiAssistantPanelConversationsMenu");
+var _jsxRuntime = require("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 (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const AiAssistantPanelRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanel'
+})({
+  flexDirection: 'column',
+  width: 380,
+  maxHeight: 'none',
+  overflow: 'hidden'
+});
+const AiAssistantPanelHeader = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelHeader'
+})({
+  flexShrink: 0,
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  boxSizing: 'border-box',
+  borderBottom: `1px solid ${_internals.vars.colors.border.base}`,
+  height: 52,
+  padding: _internals.vars.spacing(0, 0.75, 0, 2)
+});
+const AiAssistantPanelTitleContainer = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelTitleContainer'
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  overflow: 'hidden'
+});
+const AiAssistantPanelTitle = (0, _system.styled)('span', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelTitle'
+})({
+  font: _internals.vars.typography.font.body,
+  fontWeight: _internals.vars.typography.fontWeight.medium,
+  marginTop: _internals.vars.spacing(0.25)
+});
+const AiAssistantPanelConversationTitle = (0, _system.styled)('span', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelConversationTitle'
+})({
+  font: _internals.vars.typography.font.small,
+  color: _internals.vars.colors.foreground.muted,
+  marginTop: _internals.vars.spacing(-0.25),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const AiAssistantPanelBody = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelBody'
+})({
+  flexGrow: 0,
+  flexShrink: 0,
+  height: 260,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const AiAssistantPanelEmptyText = (0, _system.styled)('span', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelEmptyText'
+})({
+  font: _internals.vars.typography.font.body,
+  color: _internals.vars.colors.foreground.muted
+});
+const AiAssistantPanelFooter = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelFooter'
+})({
+  flexShrink: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: _internals.vars.spacing(1),
+  borderTop: `1px solid ${_internals.vars.colors.border.base}`,
+  padding: _internals.vars.spacing(1)
+});
+function GridAiAssistantPanel() {
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const classes = useUtilityClasses(rootProps);
+  const activeConversation = (0, _xDataGridPro.useGridSelector)(apiRef, _gridAiAssistantSelectors.gridAiAssistantActiveConversationSelector);
+  const conversations = (0, _xDataGridPro.useGridSelector)(apiRef, _gridAiAssistantSelectors.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__*/(0, _jsxRuntime.jsxs)(AiAssistantPanelRoot, {
+    className: classes.root,
+    ownerState: rootProps,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(AiAssistantPanelHeader, {
+      className: classes.header,
+      ownerState: rootProps,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(AiAssistantPanelTitleContainer, {
+        className: classes.titleContainer,
+        ownerState: rootProps,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AiAssistantPanelTitle, {
+          className: classes.title,
+          ownerState: rootProps,
+          children: apiRef.current.getLocaleText('aiAssistantPanelTitle')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AiAssistantPanelConversationTitle, {
+          className: classes.conversationTitle,
+          ownerState: rootProps,
+          title: conversationTitle,
+          children: conversationTitle
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('aiAssistantPanelNewConversation'),
+        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 || !activeConversation?.prompts.length,
+            onClick: createConversation,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.aiAssistantPanelNewConversationIcon, {
+              fontSize: "small"
+            })
+          }))
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridAiAssistantPanelConversationsMenu.GridAiAssistantPanelConversationsMenu, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
+        "aria-label": apiRef.current.getLocaleText('aiAssistantPanelClose'),
+        onClick: apiRef.current.hidePreferences,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.aiAssistantPanelCloseIcon, {
+          fontSize: "small"
+        })
+      }))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AiAssistantPanelBody, {
+      className: classes.body,
+      ownerState: rootProps,
+      children: activeConversation && activeConversation.prompts.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridAiAssistantPanelConversation.GridAiAssistantPanelConversation, {
+        conversation: activeConversation
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(AiAssistantPanelEmptyText, {
+        ownerState: rootProps,
+        className: classes.emptyText,
+        children: apiRef.current.getLocaleText('aiAssistantPanelEmptyConversation')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(AiAssistantPanelFooter, {
+      className: classes.footer,
+      ownerState: rootProps,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPromptField.GridPromptField, {
+        onSubmit: apiRef.current.aiAssistant.processPrompt
+      }), rootProps.aiAssistantSuggestions && rootProps.aiAssistantSuggestions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridAiAssistantPanelSuggestions.GridAiAssistantPanelSuggestions, {
+        suggestions: rootProps.aiAssistantSuggestions
+      })]
+    })]
+  });
+}

package/components/aiAssistantPanel/GridAiAssistantPanelConversation.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Conversation } from "../../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
+type GridAiAssistantPanelConversationProps = {
+  conversation: Conversation;
+};
+declare function GridAiAssistantPanelConversation(props: GridAiAssistantPanelConversationProps): React.JSX.Element;
+export { GridAiAssistantPanelConversation };

package/components/aiAssistantPanel/GridAiAssistantPanelConversation.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridAiAssistantPanelConversation = GridAiAssistantPanelConversation;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _utils = require("@mui/utils");
+var _system = require("@mui/system");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _prompt = require("../prompt");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['aiAssistantPanelConversation'],
+    list: ['aiAssistantPanelConversationList']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const AiAssistantPanelConversationRoot = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea, {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelConversation'
+})({
+  flexShrink: 0,
+  height: '100%'
+});
+const AiAssistantPanelConversationList = (0, _system.styled)('ol', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelConversationList'
+})({
+  flex: 1,
+  padding: 0,
+  margin: 0
+});
+function GridAiAssistantPanelConversation(props) {
+  const {
+    conversation
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  const ref = React.useRef(null);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+
+  // Scroll to the bottom of the conversation when the prompt list changes
+  React.useEffect(() => {
+    ref.current?.scrollTo({
+      top: ref.current?.scrollHeight,
+      behavior: 'smooth'
+    });
+  }, [conversation]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AiAssistantPanelConversationRoot, {
+    className: classes.root,
+    ownerState: rootProps,
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AiAssistantPanelConversationList, {
+      className: classes.list,
+      ownerState: rootProps,
+      children: conversation.prompts.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_prompt.GridPrompt, (0, _extends2.default)({}, item, {
+        onRerun: () => apiRef.current.aiAssistant.processPrompt(item.value)
+      }), item.createdAt.toISOString()))
+    })
+  });
+}

package/components/aiAssistantPanel/GridAiAssistantPanelConversationsMenu.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function GridAiAssistantPanelConversationsMenu(): React.JSX.Element;
+export { GridAiAssistantPanelConversationsMenu };

package/components/aiAssistantPanel/GridAiAssistantPanelConversationsMenu.js

@@ -0,0 +1,92 @@
+"use strict";
+
+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,
+            material: {
+              dense: true
+            },
+            onClick: () => {
+              apiRef.current.aiAssistant.setActiveConversationIndex(conversationIndex);
+              handleClose();
+            },
+            children: conversation.title
+          }, `${conversation.id}-${sortedIndex}`);
+        })
+      }))
+    })]
+  });
+}

package/components/aiAssistantPanel/GridAiAssistantPanelSuggestions.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PromptSuggestion } from "../../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
+type GridAiAssistantPanelSuggestionsProps = {
+  suggestions: PromptSuggestion[];
+};
+declare function GridAiAssistantPanelSuggestions(props: GridAiAssistantPanelSuggestionsProps): React.JSX.Element;
+export { GridAiAssistantPanelSuggestions };

package/components/aiAssistantPanel/GridAiAssistantPanelSuggestions.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridAiAssistantPanelSuggestions = GridAiAssistantPanelSuggestions;
+var React = _interopRequireWildcard(require("react"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _utils = require("@mui/utils");
+var _system = require("@mui/system");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['aiAssistantPanelSuggestions'],
+    list: ['aiAssistantPanelSuggestionsList'],
+    item: ['aiAssistantPanelSuggestionsItem'],
+    label: ['aiAssistantPanelSuggestionsLabel']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const AiAssistantPanelSuggestionsRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelSuggestions'
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: _internals.vars.spacing(0.75)
+});
+const AiAssistantPanelSuggestionsList = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelSuggestionsList'
+})({
+  display: 'flex',
+  gap: _internals.vars.spacing(0.75),
+  overflow: 'auto',
+  padding: _internals.vars.spacing(1),
+  margin: _internals.vars.spacing(-1),
+  scrollbarWidth: 'thin'
+});
+const AiAssistantPanelSuggestionsLabel = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelSuggestionsLabel'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  gap: _internals.vars.spacing(1),
+  font: _internals.vars.typography.font.body,
+  color: _internals.vars.colors.foreground.muted,
+  paddingLeft: _internals.vars.spacing(0.5)
+});
+function GridAiAssistantPanelSuggestions(props) {
+  const {
+    suggestions
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AiAssistantPanelSuggestionsRoot, {
+    className: classes.root,
+    ownerState: ownerState,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AiAssistantPanelSuggestionsLabel, {
+      className: classes.label,
+      ownerState: ownerState,
+      children: apiRef.current.getLocaleText('aiAssistantSuggestions')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AiAssistantPanelSuggestionsList, {
+      className: classes.list,
+      ownerState: ownerState,
+      children: suggestions.map(suggestion => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, {
+        label: suggestion.value,
+        className: classes.item,
+        onClick: () => apiRef.current.aiAssistant.processPrompt(suggestion.value),
+        variant: "outlined"
+      }, suggestion.value))
+    })]
+  });
+}

package/components/aiAssistantPanel/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./AiAssistantPanelTrigger.js";
+export * from "./GridAiAssistantPanel.js";