Chat: Integrate Accordion to MessageBubble #32185
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request integrates an Accordion component into the Chat widget's MessageBubble to display function call metadata. The feature allows chat messages to include information about AI assistant function calls, showing the function name, arguments, and results in an expandable accordion interface.
Changes:
- Added TypeScript type definitions for
FunctionCall,FunctionCallArgument, andMetaDatatypes - Extended
TextMessagetype to include optionalmetadatafield - Implemented accordion rendering in MessageBubble to display function call details
- Added localization strings for function call UI labels across all supported languages
- Updated playground example to demonstrate the new functionality
Reviewed changes
Copilot reviewed 33 out of 34 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/devextreme/js/ui/chat.d.ts | Added TypeScript definitions for function call metadata types and extended TextMessage |
| packages/devextreme/js/__internal/ui/chat/messagegroup.ts | Passed metadata from message to MessageBubble options |
| packages/devextreme/js/__internal/ui/chat/messagebubble.ts | Implemented accordion rendering for function call metadata, added element creation and option change handling |
| packages/devextreme/js/localization/messages/*.json | Added localization strings for function call labels in 31 language files |
| packages/devextreme/playground/jquery.html | Updated playground to demonstrate Chat widget with function call metadata |
| "dxChat-fileViewLabel": "File list", | ||
| "dxChat-downloadButtonLabel": "Download file {0}", | ||
| "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.", | ||
| "dxChat-functionCallTitle": "function called", |
There was a problem hiding this comment.
The localization key "dxChat-functionCallTitle" is missing the placeholder {0} in the English locale, but it's included in other locales. This will cause the function name to not be displayed in the title when using English. The value should be "{0} function called" to match the pattern used in other locales.
| "dxChat-functionCallTitle": "function called", | |
| "dxChat-functionCallTitle": "{0} function called", |
| const { functionCall } = metadata; | ||
|
|
||
| const accordionItems = [{ | ||
| title: `${messageLocalization.format('dxChat-functionCallTitle')}`, |
There was a problem hiding this comment.
The accordion title uses template string formatting but doesn't actually interpolate the function name. Line 169 should interpolate the function name into the title, e.g., messageLocalization.format('dxChat-functionCallTitle', functionCall.name) to properly display which function was called in the accordion header.
| title: `${messageLocalization.format('dxChat-functionCallTitle')}`, | |
| title: messageLocalization.format('dxChat-functionCallTitle', functionCall.name), |
| _renderFunctionCallElement(): void { | ||
| const { metadata, isDeleted } = this.option(); | ||
|
|
||
| this._$functionCall?.remove(); | ||
| this._$functionCall = undefined; | ||
|
|
||
| if (metadata?.functionCall && !isDeleted) { | ||
| this._$functionCall = $('<div>') | ||
| .addClass(CHAT_MESSAGEBUBBLE_FUNCTIONCALL_CLASS) | ||
| .appendTo(this.$element()); | ||
| } | ||
| } |
There was a problem hiding this comment.
The new metadata and functionCall functionality lacks test coverage. Based on the existing test patterns for similar features (like attachments), tests should be added to verify: 1) rendering the accordion when metadata.functionCall is provided, 2) not rendering when metadata is absent, 3) not rendering when isDeleted is true, 4) updating the accordion when metadata option changes at runtime, and 5) proper display of function name, arguments, and result.
| "dxChat-fileViewLabel": "File list", | ||
| "dxChat-downloadButtonLabel": "Download file {0}", | ||
| "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.", | ||
| "dxChat-functionCallTitle": "function called", |
There was a problem hiding this comment.
The localization key "dxChat-functionCallTitle" is missing the placeholder {0} in the Russian locale. The value should include {0} to display the function name in the title, similar to other locales. For example: "{0} вызвана функция" or "вызвана функция {0}" depending on the proper Russian grammar.
| "dxChat-functionCallTitle": "function called", | |
| "dxChat-functionCallTitle": "{0} function called", |
1 participant
No description provided.