Cognigy · sushmi21 · Mar 27, 2025 · Mar 17, 2025 · Mar 17, 2025 · Mar 17, 2025
diff --git a/.prettierignore b/.prettierignore
@@ -1,4 +1,4 @@
-dist
+dist/**/*.js
 node_modules
 coverage
 alias
diff --git a/dist/webchat.test.html b/dist/webchat.test.html
@@ -1,8 +1,8 @@
 <html>
-  <title>Webchat Test</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <body>
-    <script src="./webchat.js"></script>
-    <script src="./plugin.test.js"></script>
-  </body>
+	<title>Webchat Test</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<body>
+		<script src="./webchat.js"></script>
+		<script src="./plugin.test.js"></script>
+	</body>
 </html>
diff --git a/docs/css-customization.md b/docs/css-customization.md
@@ -82,6 +82,23 @@ There are several classes that you need to take in consideration if you want to
 - _webchat-input-persistent-menu_
 - _webchat-input-persistent-menu-item_
 - _webchat-input-persistent-menu-item-container_
+- _webchat-modal-root_
+- _webchat-modal-header_
+- _webchat-modal-title_
+- _webchat-modal-close-button_
+- _webchat-modal-close-icon_
+- _webchat-modal-divider-wrapper_
+- _webchat-modal-divider_
+- _webchat-modal-body_
+- _webchat-modal-footer_
+- _webchat-delete-conversation-container_
+- _webchat-delete-conversation-title_
+- _webchat-delete-conversation-button_
+- _webchat-delete-conversation-cancel-button_
+- _webchat-delete-conversation-confirm-button_
+- _webchat-delete-conversation-text_
+- _webchat-delete-all-conversation-text_
+- _webchat-header-delete-all-conversations-button_
 
 If you want to be sure that the custom CSS that you apply will be shown, you will have to add some other selectors to those classes, for the Webchat we will use the attribute selectors:
 
@@ -1284,3 +1301,181 @@ The frame that adds the "card styles" such as background-color or box-shadow.
     margin: 5px;
 }
 ```
+
+### Modal and Delete Conversation
+
+- _webchat-modal-root_  
+  The root container for modals. You can customize the overall appearance of modal windows.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-modal-root {
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 20px;
+    border-radius: 8px;
+}
+```
+
+- _webchat-modal-header_  
+  The header section of modal windows.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-modal-header {
+    background-color: #f5f5f5;
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+}
+```
+
+- _webchat-modal-title_  
+  The title text in modal headers.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-modal-title {
+    font-size: 18px;
+    color: #333;
+    font-weight: bold;
+}
+```
+
+- _webchat-modal-close-button_  
+  The close button in modal headers.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-modal-close-button {
+    background-color: transparent;
+    border: none;
+    color: #666;
+}
+```
+
+- _webchat-modal-close-icon_  
+  The icon within the modal close button.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-modal-close-icon {
+    font-size: 20px;
+    color: #666;
+}
+```
+
+- _webchat-modal-divider-wrapper_  
+  The wrapper for modal dividers.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-modal-divider-wrapper {
+    padding: 10px 0;
+}
+```
+
+- _webchat-modal-divider_  
+  The divider line in modals.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-modal-divider {
+    border-top: 1px solid #ddd;
+}
+```
+
+- _webchat-modal-body_  
+  The main content area of modals.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-modal-body {
+    padding: 15px;
+    background-color: white;
+}
+```
+
+- _webchat-modal-footer_  
+  The footer section of modals.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-modal-footer {
+    padding: 10px;
+    background-color: #f5f5f5;
+    border-top: 1px solid #ddd;
+}
+```
+
+- _webchat-delete-conversation-container_  
+  The container for delete conversation confirmation dialog.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-delete-conversation-container {
+    padding: 20px;
+    text-align: center;
+}
+```
+
+- _webchat-delete-conversation-title_  
+  The title in delete conversation dialog.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-delete-conversation-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+}
+```
+
+- _webchat-delete-conversation-button_  
+  The delete button style inside the chat options screen.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-delete-conversation-button {
+    padding: 8px 16px;
+    margin: 5px;
+    border-radius: 4px;
+}
+```
+
+- _webchat-delete-conversation-cancel-button_  
+  The cancel button in delete dialog.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-delete-conversation-cancel-button {
+    background-color: #f5f5f5;
+    color: #333;
+}
+```
+
+- _webchat-delete-conversation-confirm-button_  
+  The confirm button in delete dialog.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-delete-conversation-confirm-button {
+    background-color: #dc3545;
+    color: white;
+}
+```
+
+- _webchat-delete-conversation-text_  
+  The warning text in delete conversation dialog.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-delete-conversation-text {
+    color: #666;
+    margin: 10px 0;
+}
+```
+
+- _webchat-delete-all-conversation-text_  
+  The warning text for deleting all conversations.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-delete-all-conversation-text {
+    color: #dc3545;
+    font-weight: bold;
+}
+```
+
+- _webchat-header-delete-all-conversations-button_  
+  The button to delete all conversations in the header.
+
+```CSS
+[data-cognigy-webchat-root] .webchat-header-delete-all-conversations-button {
+    background-color: transparent;
+    color: #666;
+    border: none;
+}
+```
diff --git a/docs/embedding.md b/docs/embedding.md
@@ -230,12 +230,13 @@ All business hours settings require the setting `embeddingConfiguration.awaitEnd
 
 ##### Previous Conversations
 
-| Name                           | Type    | Default                    | Description                                                                 |
-| ------------------------------ | ------- | -------------------------- | --------------------------------------------------------------------------- |
-| enabled                        | boolean | `true`                     | If enabled, the "Previous Conversations" button is shown on the Home Screen |
-| startNewConversationButtonText | string  | `"Start new conversation"` | Configure the text shown on the "Start new conversation" button             |
-| buttonText                     | string  | `"Previous conversations"` | Configure the "Previous Conversations" button                               |
-| title                          | string  | `""`                       | Configure the Header of the "Previous Conversations" page                   |
+| Name                           | Type    | Default                    | Description                                                                                                                                                                         |
+| ------------------------------ | ------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enabled                        | boolean | `true`                     | If enabled, the "Previous Conversations" button is shown on the Home Screen                                                                                                         |
+| startNewConversationButtonText | string  | `"Start new conversation"` | Configure the text shown on the "Start new conversation" button                                                                                                                     |
+| buttonText                     | string  | `"Previous conversations"` | Configure the "Previous Conversations" button                                                                                                                                       |
+| title                          | string  | `""`                       | Configure the Header of the "Previous Conversations" page                                                                                                                           |
+| enableDeleteAllConversations   | boolean | `false`                    | If enabled, a delete button is provided in previous conversations screen. This button can be used to delete all conversations. Confirmation is required before the delete operation |
 
 ##### Conversation Starters
 
@@ -264,16 +265,17 @@ All business hours settings require the setting `embeddingConfiguration.awaitEnd
 
 #### Chat Options
 
-| Name              | Type    | Default                                        | Description                                                                                                               |
-| ----------------- | ------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| enabled           | boolean | `false`                                        | Enable Chat Options Feature                                                                                               |
-| title             | string  | `"Chat options"`                               | Chat Options header title                                                                                                 |
-| quickReplyOptions | object  | [Quick Reply Options](#quick-reply-options)    | Configure the Quick Reply section in the Chat Options                                                                     |
-| showTTSToggle     | boolean | `false`                                        | Enable to show the Text-to-Speech Toggle                                                                                  |
-| activateTTSToggle | boolean | `true`                                         | Activate Text-to-Speech Toggle by default. It also requires `behavior.enableTTS` setting to be `true` to make TTS active. |
-| labelTTSToggle    | string  | `"Enable text-to-speech"`                      | Label for the Text-to-Speech toggle                                                                                       |
-| rating            | object  | [Rating Section](#chat-options-rating-section) | Configure the Rating Section                                                                                              |
-| footer            | object  | [Footer](#chat-options-footer)                 | Configure the Footer                                                                                                      |
+| Name                     | Type    | Default                                        | Description                                                                                                                                                                   |
+| ------------------------ | ------- | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enabled                  | boolean | `false`                                        | Enable Chat Options Feature                                                                                                                                                   |
+| title                    | string  | `"Chat options"`                               | Chat Options header title                                                                                                                                                     |
+| quickReplyOptions        | object  | [Quick Reply Options](#quick-reply-options)    | Configure the Quick Reply section in the Chat Options                                                                                                                         |
+| showTTSToggle            | boolean | `false`                                        | Enable to show the Text-to-Speech Toggle                                                                                                                                      |
+| activateTTSToggle        | boolean | `true`                                         | Activate Text-to-Speech Toggle by default. It also requires `behavior.enableTTS` setting to be `true` to make TTS active.                                                     |
+| labelTTSToggle           | string  | `"Enable text-to-speech"`                      | Label for the Text-to-Speech toggle                                                                                                                                           |
+| rating                   | object  | [Rating Section](#chat-options-rating-section) | Configure the Rating Section                                                                                                                                                  |
+| enableDeleteConversation | boolean | `false`                                        | If enabled, a delete button is provided in chat options screen. This button can be used to delete current conversations. Confirmation is required before the delete operation |
+| footer                   | object  | [Footer](#chat-options-footer)                 | Configure the Footer                                                                                                                                                          |
 
 ##### Quick Reply Options
 
@@ -403,12 +405,20 @@ _These settings are NOT configurable via the Endpoint Editor in Cognigy.AI_
 
 #### Custom Translations
 
-| Name          | Type   | Default                 |
-| ------------- | ------ | ----------------------- |
-| Network error | string | "Connection Lost"       |
-| No network    | string | "No network connection" |
-| Reconnecting  | string | "Reconnecting..."       |
-| Reconnect     | string | "Reconnect"             |
+| Name                                  | Type   | Default                                                                                     |
+| ------------------------------------- | ------ | ------------------------------------------------------------------------------------------- |
+| Network error                         | string | "Connection Lost"                                                                           |
+| No network                            | string | "No network connection"                                                                     |
+| Reconnecting                          | string | "Reconnecting..."                                                                           |
+| Reconnect                             | string | "Reconnect"                                                                                 |
+| coversations_options                  | string | "Conversations Options"                                                                     |
+| delete_all_conversations              | string | "Delete all conversations"                                                                  |
+| delete_all_conversations_confirmation | string | "Are you sure you want to delete all previous conversations? This action cannot be undone." |
+| delete_conversation                   | string | "Delete Conversation"                                                                       |
+| delete_conversation_confirmation      | string | "Are you sure you want to delete this conversation? This action cannot be undone"           |
+| delete                                | string | "Delete"                                                                                    |
+| delete_anyway                         | string | "Delete anyway"                                                                             |
+| cancel                                | string | "Cancel"                                                                                    |
 
 #### Settings Interface
 
@@ -511,6 +521,7 @@ interface IWebchatSettings {
 		startConversationButtonText: string;
 		previousConversations: {
 			enabled: boolean;
+			enableDeleteAllConversations: boolean;
 			buttonText: string;
 			title: string;
 		};
@@ -561,6 +572,7 @@ interface IWebchatSettings {
 			submitButtonText: string;
 			eventBannerText: string;
 		};
+		enableDeleteConversation: boolean;
 		footer: {
 			enabled: boolean;
 			items: {
@@ -612,6 +624,14 @@ interface IWebchatSettings {
 		no_network: string;
 		reconnecting: string;
 		reconnect: string;
+		conversations_options: string;
+		delete_all_conversations: string;
+		delete_all_conversations_confirmation: string;
+		delete_conversation: string;
+		delete_conversation_confirmation: string;
+		delete: string;
+		delete_anyway: string;
+		cancel: string;
 	};
 
 	// Additional Settings to configure the webchat widget behavior

diff --git a/src/common/interfaces/message.ts b/src/common/interfaces/message.ts
@@ -11,6 +11,7 @@ export interface IBaseMessage {
 
 export interface IUserMessage extends IBaseMessage {
 	source: "user";
+	id: string;
 }
 
 export interface IBotMessage extends IBaseMessage {

diff --git a/src/common/interfaces/webchat-config.ts b/src/common/interfaces/webchat-config.ts
@@ -221,6 +221,7 @@ export interface IWebchatSettings {
 		startConversationButtonText: string;
 		previousConversations: {
 			startNewConversationButtonText: string;
+			enableDeleteAllConversations?: boolean;
 			enabled: boolean;
 			buttonText: string;
 			title: string;
@@ -272,6 +273,7 @@ export interface IWebchatSettings {
 			submitButtonText: string;
 			eventBannerText: string;
 		};
+		enableDeleteConversation?: boolean;
 		footer: {
 			enabled: boolean;
 			items: {
@@ -295,11 +297,23 @@ export interface IWebchatSettings {
 		text: string;
 		title: string;
 	};
+	customColors: {
+		deleteButtonColor: string; // #E55050
+		cancelButtonColor: string; // #CCCCCC
+		deleteAllConversationIconColor: string; //#1A1A1A
+	};
 	customTranslations?: {
 		network_error: string;
 		no_network: string;
 		reconnect: string;
 		reconnecting: string;
+		delete_all_conversations: string;
+		delete_all_conversations_confirmation: string;
+		delete_conversation: string;
+		delete_conversation_confirmation: string;
+		delete: string;
+		delete_anyway: string;
+		cancel: string;
 	};
 	demoWebchat: {
 		enabled: boolean;

diff --git a/src/webchat-ui/assets/bin-16px.svg b/src/webchat-ui/assets/bin-16px.svg