From ea47c500abcb39b4c7bb6c001be73b8e799c4fbc Mon Sep 17 00:00:00 2001 From: enisn Date: Thu, 11 Dec 2025 17:33:23 +0300 Subject: [PATCH] Update chat component JS API docs with best practices Expanded the JavaScript API documentation for chat components to clarify initialization timing and added best-practice examples for accessing components after user interaction, rather than at page load. --- docs/en/modules/ai-management/index.md | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/docs/en/modules/ai-management/index.md b/docs/en/modules/ai-management/index.md index 00c78a8944..a699ea1688 100644 --- a/docs/en/modules/ai-management/index.md +++ b/docs/en/modules/ai-management/index.md @@ -516,7 +516,7 @@ You can use the `ConversationId` property to specify the id of the conversation ``` #### JavaScript API -All the initialized components in the page is stored in the `abp.chatComponents` object. You can retrieve a specific component by its `ComponentId` which is defined while invoking the ViewComponent. +The chat components are initialized automatically when the ViewComponent is rendered in the page. All the initialized components in the page are stored in the `abp.chatComponents` object. You can retrieve a specific component by its `ComponentId` which is defined while invoking the ViewComponent. ```csharp @await Component.InvokeAsync(typeof(ChatClientChatViewComponent), new ChatClientChatViewModel @@ -573,6 +573,28 @@ chatComponent.on('streamStarted', function(data) { chatComponent.off('messageSent', callbackFunction); ``` +**Best-practices:** +- Don't try to access the component at the page load time, it's not guaranteed to be initialized yet. Get the component whenever you need it to make sure it's **initialized** and the **latest state** is applied. + +❌ Don't do this +```js +(function(){ + var chatComponent = abp.chatComponents.get('mylama-chat'); + $('#my-button').on('click', function() { + chatComponent.clearConversation(); + }); +}); +``` + +✅ Do this +```js +(function(){ + $('#my-button').on('click', function() { + var chatComponent = abp.chatComponents.get('mylama-chat'); + chatComponent.clearConversation(); + }); +}); +``` ## Using Dynamic Workspace Configurations for custom requirements