docs: add context object guide to js guide

Author: bang9

.gitignore

@@ -2,3 +2,4 @@
 **/dist
 **/.vite
 **/deps
+.idea

js/README.md

@@ -15,6 +15,7 @@ The **Sendbird AI Agent Messenger** allows seamless integration of chatbot featu
   - [Advanced Features](#advanced-features)
     - [Display messenger without launcher button](#display-messenger-without-launcher-button)
     - [Deauthenticate and clear session](#deauthenticate-and-clear-session)
+    - [Passing context object to Agent](#passing-context-object-to-agent)
 
 ## Prerequisites
 
@@ -60,18 +61,18 @@ Now that you have installed and initialized the AI Agent SDK, follow the steps b
 
 For proper user session management, you can update the session information using the following methods.
 
-    ```javascript
-    // Update entire session configuration
-    messenger.updateUserSession({
-        userId: 'new_user_id',
-        authToken: 'new_auth_token',
-        // this callback should handle session token refresh:
-        onSessionTokenRequest: async () => {
-            const response = await fetch('new-token-endpoint');
-            return response.token;
-        }
-    });
-    ```
+```javascript
+// Update entire session configuration
+messenger.updateUserSession({
+    userId: 'new_user_id',
+    authToken: 'new_auth_token',
+    // this callback should handle session token refresh:
+    onSessionTokenRequest: async () => {
+        const response = await fetch('new-token-endpoint');
+        return response.token;
+    }
+});
+```
 
 ### Launch the messenger
 
@@ -83,37 +84,37 @@ To launch and display the messenger, implement the code below:
 
 >__Note__: Replace `YOUR_APP_ID` AND `YOUR_AI_AGENT_ID` with your Application ID and AI agent ID which you can obtain from the Sendbird Dashboard. To learn how do to so, refer to the [prerequisites](#prerequisites) section.
 
-    ```javascript
-    const messenger = await loadMessenger();
-    messenger.initialize({
-        appId: 'YOUR_APP_ID',
-        aiAgentId: 'YOUR_AI_AGENT_ID',
-    });
-    ```
+```javascript
+const messenger = await loadMessenger();
+messenger.initialize({
+    appId: 'YOUR_APP_ID',
+    aiAgentId: 'YOUR_AI_AGENT_ID',
+});
+```
 
 The messenger view can be programmatically controlled using the `open()` and `close()` methods:
 
-    ```javascript
-    // Open the messenger view automatically after initialized
-    messenger.initialize({ appId, aiAgentId });
-    messenger.onLoad(() => {
-        messenger.open();
-    });
+```javascript
+// Open the messenger view automatically after initialized
+messenger.initialize({ appId, aiAgentId });
+messenger.onLoad(() => {
+    messenger.open();
+});
 
-    // Close the messenger view by clicking a button
-    <button onClick={() => messenger.close()}>Close</button>
-    ```
+// Close the messenger view by clicking a button
+<button onClick={() => messenger.close()}>Close</button>
+```
 
 To update the configurations:
 
-    ```javascript
-    // Update configuration
-    messenger.updateConfig({
-        appId: 'NEW_APP_ID',
-        aiAgentId: 'NEW_BOT_ID',
-        // ... other config options
-    });
-    ```
+```javascript
+// Update configuration
+messenger.updateConfig({
+    appId: 'NEW_APP_ID',
+    aiAgentId: 'NEW_BOT_ID',
+    // ... other config options
+});
+```
 
 ---
 
@@ -125,27 +126,73 @@ The following are available advanced features.
 
 ![Image](https://github.com/user-attachments/assets/348ccad1-ec9a-4851-9324-084eaf569e34)
 
-    ```javascript
-    const messenger = await loadMessenger({
-      // Use Conversation component to display only the messenger without the launcher
-      customMainComponent: ({ messenger, react }) => {
-        return (props) => {
-            return react.createElement(messenger.AgentProviderContainer, props, [
-                react.createElement(messenger.Conversation),
-            ]);
-        };
-      }
-    });
-    messenger.initialize({
-        appId: 'APP_ID',
-        aiAgentId: 'AI_AGENT_ID',
-    });
-    ```
-
+```javascript
+const messenger = await loadMessenger({
+  // Use Conversation component to display only the messenger without the launcher
+  customMainComponent: ({ messenger, react }) => {
+    return (props) => {
+        return react.createElement(messenger.AgentProviderContainer, props, [
+            react.createElement(messenger.Conversation),
+        ]);
+    };
+  }
+});
+messenger.initialize({
+    appId: 'APP_ID',
+    aiAgentId: 'AI_AGENT_ID',
+});
+```
 ### Deauthenticate and clear session
 
 While it is not required, you can de-authenticate the SDK to clear session data and disconnect when a user logs out.
 
-    ```javascript
-    messenger.destroy();
-    ```
+```javascript
+messenger.destroy();
+```
+
+### Passing context object to Agent
+
+You can predefine customer-specific information such as country, language, or other custom context data to guide the AI Agent in providing faster and more accurate responses.
+
+This allows for a more personalized and context-aware interaction experience.
+
+> Once the contexts are set, they will be used throughout the conversation to provide personalized and context-aware responses.
+
+
+### Passing context object to Agent
+
+You can predefine customer-specific information such as country, language, or other custom context data to guide the AI Agent in providing faster and more accurate responses.
+
+This allows for a more personalized and context-aware interaction experience.
+
+> Once the contexts are set, they will be used throughout the conversation to provide personalized and context-aware responses.
+
+```javascript
+// Metadata can be updated incrementally using updateMetadata().
+// Top-level key-value pairs are merged across multiple calls.
+
+messenger.updateMetadata({
+    language: 'en-US', // default: navigator.language
+});
+
+messenger.updateMetadata({
+    countryCode: 'US',
+});
+
+const newContextObject = { key1: 'value1', key2: 'value2' };
+messenger.updateMetadata({
+    message: { contextObject: newContextObject },
+});
+
+// Updating context with a new object replaces the previous one.
+const removedContextObject = { key1: 'value1' };
+messenger.updateMetadata({
+    message: { contextObject: removedContextObject },
+});
+
+// Sending an empty object clears the context.
+const emptyContextObject = {};
+messenger.updateMetadata({
+    message: { contextObject: emptyContextObject },
+});
+```