[DataGridPremium] Control grid with prompts #16992
Conversation
arminmeh
added
component: data grid
|
|
||
| <p class="description">Translate natural language into a set of grid state updates and apply them to the Data Grid component.</p> | ||
|
|
||
| :::warning | ||
| To use this feature, you need to have a prompt processing backend. MUI offers this service as a part of a premium package add-on. Check [licensing page](/x/introduction/licensing/) for more information. | ||
| To use this feature, you need to have a prompt processing backend. MUI offers this service as a part of a premium package add-on. | ||
| Check [licensing page](/x/introduction/licensing/) for more information. |
There was a problem hiding this comment.
@joserodolfofreitas this needs to point to the right page with all necessary information
| @@ -2,22 +2,24 @@ | |||
| title: Data Grid - Prompt | |||
There was a problem hiding this comment.
@joserodolfofreitas I am not sure if this will be the official name
| @@ -122,7 +122,6 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(function Toolbar(props, | |||
| role: 'toolbar', | |||
| 'aria-orientation': 'horizontal', | |||
| className: clsx(classes.root, className), | |||
| ownerState: rootProps, | |||
There was a problem hiding this comment.
@KenanYusuf
I was getting error in the prompt demos that owner state does not exist on the component (since Box is used for rendering)
Removing ownerState makes this more generic and you can get rootProps again in your custom renderer
There was a problem hiding this comment.
Right, I don't think we need ownerState in this case anyway, but it definitely shouldn't be forwarded to the rendered element. Makes sense to me.
|
Deploy preview: https://deploy-preview-16992--material-ui-x.netlify.app/ Updated pages: |
arminmeh
force-pushed
the
prompt-improvements
branch
from
0f7d5c1 to
03571ef
Compare
| </Box> | ||
| <GridToolbarPromptControl onPrompt={mockPromptResolver} allowDataSampling /> | ||
| <GridToolbarPromptControl |
There was a problem hiding this comment.
@arminmeh @joserodolfofreitas I'm thinking GridToolbarPromptControl should be a composable component. I'd propose an API similar to the Quick Filter component:
<PromptField
<PromptFieldRecord />
<PromptFieldControl />
<PromptFieldSubmit />
</PromptField>For Material UI it would be composed like:
<PromptField>
<PromptFieldControl
render={({ ref, ...other }) => (
<TextField
{...other}
aria-label="Prompt"
placeholder="Record or type a prompt..."
size="small"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<PromptFieldRecord
edge="start"
size="small"
aria-label="Record voice"
>
<MicrophoneIcon fontSize="small" />
</PromptFieldRecord>
</InputAdornment>
),
endAdornment: other.value ? (
<InputAdornment position="end">
<PromptFieldSubmit
edge="end"
size="small"
aria-label="Send"
>
<SendIcon fontSize="small" />
</PromptFieldSubmit>
</InputAdornment>
) : null,
}}
/>
)}
/>
</PromptField>Just suggesting it here as it came into my head—I can move this to a separate issue.
There was a problem hiding this comment.
I will update it in this PR
Closes #15548
I have extracted context processing and result processing in a hook. This also allows building custom UI.
Preivew
https://deploy-preview-16992--material-ui-x.netlify.app/x/react-data-grid/prompt/
Before merging:
Follow ups: