@mui/x-data-grid-premium
Version:
The Premium plan edition of the MUI X Data Grid Components.
195 lines (194 loc) • 8.56 kB
JavaScript
;
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 _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _styles = require("@mui/material/styles");
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, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
};
const AiAssistantPanelRoot = (0, _styles.styled)('div', {
name: 'MuiDataGrid',
slot: 'AiAssistantPanel'
})({
flexDirection: 'column',
width: 380,
maxHeight: 'none',
overflow: 'hidden'
});
const AiAssistantPanelHeader = (0, _styles.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, _styles.styled)('div', {
name: 'MuiDataGrid',
slot: 'AiAssistantPanelTitleContainer'
})({
display: 'flex',
flexDirection: 'column',
flex: 1,
overflow: 'hidden'
});
const AiAssistantPanelTitle = (0, _styles.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, _styles.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, _styles.styled)('div', {
name: 'MuiDataGrid',
slot: 'AiAssistantPanelBody'
})({
flexGrow: 0,
flexShrink: 0,
height: 260,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
});
const AiAssistantPanelEmptyText = (0, _styles.styled)('span', {
name: 'MuiDataGrid',
slot: 'AiAssistantPanelEmptyText'
})({
font: _internals.vars.typography.font.body,
color: _internals.vars.colors.foreground.muted
});
const AiAssistantPanelFooter = (0, _styles.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
})]
})]
});
}