Chat: Add suggestions API Description#8674
Chat: Add suggestions API Description#8674arman-boyakhchyan wants to merge 3 commits intoDevExpress:26_1from
Conversation
There was a problem hiding this comment.
Pull request overview
Adds API reference content for dxChat.Options.suggestions to describe how to configure suggestion buttons above the Chat input field.
Changes:
- Documented how
suggestionsmaps to a DevExtreme ButtonGroup configuration (including ignored/overridden options). - Added multi-framework code snippets (jQuery/Angular/Vue/React) demonstrating suggestion buttons that populate
inputFieldText.
| return ( | ||
| <Chat | ||
| inputFieldText={inputFieldText} | ||
| suggestions={chatSuggestions} | ||
| /> |
There was a problem hiding this comment.
In the React sample, inputFieldText is supplied from React state, but there is no onInputFieldTextChange handler to keep that state updated when the user types. This can lead to state/UI divergence (and the value being reset on re-render). Add the change handler (see the existing inputFieldText option example for the pattern).
| { text: 'Fix my writing' }, | ||
| ], | ||
| onItemClick: handleSuggestionClick, | ||
| } |
There was a problem hiding this comment.
Missing semicolon after the chatSuggestions object literal; most TypeScript/React samples in this section terminate statements with semicolons. Add the semicolon to avoid lint/style inconsistencies in the snippet.
| } | |
| }; |
| $('#chat').dxChat({ | ||
| suggestions: { | ||
| items: [ | ||
| { text: 'Summarize text' }, | ||
| { text: 'Write an email' }, | ||
| { text: 'Fix my writing' }, | ||
| ], | ||
| onItemClick(e) { | ||
| $('#chat').dxChat('instance').option('inputFieldText', e.itemData.text); | ||
| }, |
There was a problem hiding this comment.
In the jQuery snippet, the handler calls $('#chat').dxChat('instance') on every click, which repeats DOM lookup and instance retrieval. Store the Chat instance once during initialization (or keep it in a variable/closure) and reuse it inside onItemClick.
| </dx-chat> | ||
|
|
||
| <!-- tab: app.component.ts --> | ||
| import { DxChatModule, type DxChatTypes } from "devextreme-angular/ui/chat"; |
There was a problem hiding this comment.
The Angular example imports DxChatModule, but the snippet does not use it anywhere (and it is not paired with an app.module.ts tab). Consider removing this import or adding the module-setup snippet where DxChatModule is actually used to avoid confusion and unused-import warnings.
| import { DxChatModule, type DxChatTypes } from "devextreme-angular/ui/chat"; | |
| import { type DxChatTypes } from "devextreme-angular/ui/chat"; |
|
|
||
| <!-- tab: app.component.html --> | ||
| <dx-chat ... | ||
| [inputFieldText]="inputFieldText" |
There was a problem hiding this comment.
The Angular template binds [inputFieldText] one-way, so the component field will not reflect user edits in the input. If the intent is to keep inputFieldText in sync with the UI (as in the existing inputFieldText option docs), use two-way binding ([(inputFieldText)]) or handle the corresponding change event.
| [inputFieldText]="inputFieldText" | |
| [(inputFieldText)]="inputFieldText" |
No description provided.