From c3d98fc06416eabe61dc151f9f92fb0bfb3595e9 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 29 May 2025 10:19:56 +0530
Subject: [PATCH 01/16] chore: Move URL comparison logic to utils (#11617)

---
 app/javascript/portal/portalHelpers.js | 47 +-------------------------
 package.json                           |  2 +-
 pnpm-lock.yaml                         | 10 +++---
 3 files changed, 7 insertions(+), 52 deletions(-)

diff --git a/app/javascript/portal/portalHelpers.js b/app/javascript/portal/portalHelpers.js
index 68e2cb6a8..bed50387e 100644
--- a/app/javascript/portal/portalHelpers.js
+++ b/app/javascript/portal/portalHelpers.js
@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 import { directive as onClickaway } from 'vue3-click-away';
+import { isSameHost } from '@chatwoot/utils';
 
 import slugifyWithCounter from '@sindresorhus/slugify';
 import PublicArticleSearch from './components/PublicArticleSearch.vue';
@@ -25,52 +26,6 @@ export const getHeadingsfromTheArticle = () => {
   return rows;
 };
 
-/**
- * Converts various input formats to URL objects.
- * Handles URL objects, domain strings, relative paths, and full URLs.
- * @param {string|URL} input - Input to convert to URL object
- * @returns {URL|null} URL object or null if input is invalid
- */
-const toURL = input => {
-  if (!input) return null;
-  if (input instanceof URL) return input;
-
-  if (
-    typeof input === 'string' &&
-    !input.includes('://') &&
-    !input.startsWith('/')
-  ) {
-    return new URL(`https://${input}`);
-  }
-
-  if (typeof input === 'string' && input.startsWith('/')) {
-    return new URL(input, window.location.origin);
-  }
-
-  return new URL(input);
-};
-
-/**
- * Determines if two URLs belong to the same host by comparing their normalized URL objects.
- * Handles various input formats including URL objects, domain strings, relative paths, and full URLs.
- * Returns false if either URL cannot be parsed or normalized.
- * @param {string|URL} url1 - First URL to compare
- * @param {string|URL} url2 - Second URL to compare
- * @returns {boolean} True if both URLs have the same host, false otherwise
- */
-const isSameHost = (url1, url2) => {
-  try {
-    const urlObj1 = toURL(url1);
-    const urlObj2 = toURL(url2);
-
-    if (!urlObj1 || !urlObj2) return false;
-
-    return urlObj1.hostname === urlObj2.hostname;
-  } catch (error) {
-    return false;
-  }
-};
-
 export const openExternalLinksInNewTab = () => {
   const { customDomain, hostURL } = window.portalConfig;
   const isOnArticlePage =
diff --git a/package.json b/package.json
index 90b7708f6..6280ec7fd 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@breezystack/lamejs": "^1.2.7",
     "@chatwoot/ninja-keys": "1.2.3",
     "@chatwoot/prosemirror-schema": "1.1.1-next",
-    "@chatwoot/utils": "^0.0.43",
+    "@chatwoot/utils": "^0.0.45",
     "@formkit/core": "^1.6.7",
     "@formkit/vue": "^1.6.7",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af7703fc6..606ebbb63 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,8 +23,8 @@ importers:
         specifier: 1.1.1-next
         version: 1.1.1-next
       '@chatwoot/utils':
-        specifier: ^0.0.43
-        version: 0.0.43
+        specifier: ^0.0.45
+        version: 0.0.45
       '@formkit/core':
         specifier: ^1.6.7
         version: 1.6.7
@@ -406,8 +406,8 @@ packages:
   '@chatwoot/prosemirror-schema@1.1.1-next':
     resolution: {integrity: sha512-/M2qZ+ZF7GlQNt1riwVP499fvp3hxSqd5iy8hxyF9pkj9qQ+OKYn5JK+v3qwwqQY3IxhmNOn1Lp6tm7vstrd9Q==}
 
-  '@chatwoot/utils@0.0.43':
-    resolution: {integrity: sha512-kMIXAGebCak9qOi68QnGer+rQLLo/z2N9cR+7tvGdZCW0ThDiVCF7JbHYHVDlYsdDFIx0FLlyIdCfEbooVT2Dw==}
+  '@chatwoot/utils@0.0.45':
+    resolution: {integrity: sha512-zqmuri6MrEFAY1tLv7Z3HBy4Ig60LhSrLkEiHegVsOVSxPv4Bedq+xmAW7LphvcLNgbkkvu17MU91gvMVlpEHw==}
     engines: {node: '>=10'}
 
   '@codemirror/commands@6.7.0':
@@ -5255,7 +5255,7 @@ snapshots:
       prosemirror-utils: 1.2.2(prosemirror-model@1.22.3)(prosemirror-state@1.4.3)
       prosemirror-view: 1.34.1
 
-  '@chatwoot/utils@0.0.43':
+  '@chatwoot/utils@0.0.45':
     dependencies:
       date-fns: 2.30.0
 

From f6510e0d4367f5a7a9e9a142032483063be34358 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 29 May 2025 11:23:27 +0530
Subject: [PATCH 02/16] docs: add swagger spec for accounts API (#11620)

---
 swagger/definitions/index.yml                 |   7 +
 .../request/account/update_payload.yml        |  49 +++
 .../definitions/resource/account_detail.yml   |  84 +++++
 .../resource/account_show_response.yml        |  13 +
 swagger/paths/application/accounts/show.yml   |  28 ++
 swagger/paths/application/accounts/update.yml |  43 +++
 swagger/paths/index.yml                       |   9 +
 swagger/swagger.json                          | 331 ++++++++++++++++++
 swagger/tag_groups/application_swagger.json   | 199 +++++++++++
 swagger/tag_groups/client_swagger.json        | 199 +++++++++++
 swagger/tag_groups/other_swagger.json         | 199 +++++++++++
 swagger/tag_groups/platform_swagger.json      | 199 +++++++++++
 12 files changed, 1360 insertions(+)
 create mode 100644 swagger/definitions/request/account/update_payload.yml
 create mode 100644 swagger/definitions/resource/account_detail.yml
 create mode 100644 swagger/definitions/resource/account_show_response.yml
 create mode 100644 swagger/paths/application/accounts/show.yml
 create mode 100644 swagger/paths/application/accounts/update.yml

diff --git a/swagger/definitions/index.yml b/swagger/definitions/index.yml
index 57e10e2dd..faf947217 100644
--- a/swagger/definitions/index.yml
+++ b/swagger/definitions/index.yml
@@ -60,6 +60,10 @@ webhook:
   $ref: ./resource/webhook.yml
 account:
   $ref: ./resource/account.yml
+account_detail:
+  $ref: ./resource/account_detail.yml
+account_show_response:
+  $ref: ./resource/account_show_response.yml
 account_user:
   $ref: ./resource/account_user.yml
 platform_account:
@@ -87,6 +91,9 @@ public_inbox:
 account_create_update_payload:
   $ref: ./request/account/create_update_payload.yml
 
+account_update_payload:
+  $ref: ./request/account/update_payload.yml
+
 account_user_create_update_payload:
   $ref: ./request/account_user/create_update_payload.yml
 
diff --git a/swagger/definitions/request/account/update_payload.yml b/swagger/definitions/request/account/update_payload.yml
new file mode 100644
index 000000000..b2e47cbc2
--- /dev/null
+++ b/swagger/definitions/request/account/update_payload.yml
@@ -0,0 +1,49 @@
+type: object
+properties:
+  name:
+    type: string
+    description: Name of the account
+    example: 'My Account'
+  locale:
+    type: string
+    description: The locale of the account
+    example: 'en'
+  domain:
+    type: string
+    description: The domain of the account
+    example: 'example.com'
+  support_email:
+    type: string
+    description: The support email of the account
+    example: 'support@example.com'
+  # Settings parameters (stored in settings JSONB column)
+  auto_resolve_after:
+    type: integer
+    minimum: 10
+    maximum: 1439856
+    nullable: true
+    description: Auto resolve conversations after specified minutes
+    example: 1440
+  auto_resolve_message:
+    type: string
+    nullable: true
+    description: Message to send when auto resolving
+    example: "This conversation has been automatically resolved due to inactivity"
+  auto_resolve_ignore_waiting:
+    type: boolean
+    nullable: true
+    description: Whether to ignore waiting conversations for auto resolve
+    example: false
+  # Custom attributes parameters (stored in custom_attributes JSONB column)
+  industry:
+    type: string
+    description: Industry type
+    example: "Technology"
+  company_size:
+    type: string
+    description: Company size
+    example: "50-100"
+  timezone:
+    type: string
+    description: Account timezone
+    example: "UTC"
\ No newline at end of file
diff --git a/swagger/definitions/resource/account_detail.yml b/swagger/definitions/resource/account_detail.yml
new file mode 100644
index 000000000..0ff463bae
--- /dev/null
+++ b/swagger/definitions/resource/account_detail.yml
@@ -0,0 +1,84 @@
+type: object
+properties:
+  id:
+    type: number
+    description: Account ID
+  name:
+    type: string
+    description: Name of the account
+  locale:
+    type: string
+    description: The locale of the account
+  domain:
+    type: string
+    description: The domain of the account
+  support_email:
+    type: string
+    description: The support email of the account
+  status:
+    type: string
+    description: The status of the account
+  created_at:
+    type: string
+    format: date-time
+    description: The creation date of the account
+  cache_keys:
+    type: object
+    description: Cache keys for the account
+  features:
+    type: array
+    items:
+      type: string
+    description: Enabled features for the account
+  settings:
+    type: object
+    description: Account settings
+    properties:
+      auto_resolve_after:
+        type: number
+        description: Auto resolve conversations after specified minutes
+      auto_resolve_message:
+        type: string
+        description: Message to send when auto resolving
+      auto_resolve_ignore_waiting:
+        type: boolean
+        description: Whether to ignore waiting conversations for auto resolve
+  custom_attributes:
+    type: object
+    description: Custom attributes of the account
+    properties:
+      plan_name:
+        type: string
+        description: Subscription plan name
+      subscribed_quantity:
+        type: number
+        description: Subscribed quantity
+      subscription_status:
+        type: string
+        description: Subscription status
+      subscription_ends_on:
+        type: string
+        format: date
+        description: Subscription end date
+      industry:
+        type: string
+        description: Industry type
+      company_size:
+        type: string
+        description: Company size
+      timezone:
+        type: string
+        description: Account timezone
+      logo:
+        type: string
+        description: Account logo URL
+      onboarding_step:
+        type: string
+        description: Current onboarding step
+      marked_for_deletion_at:
+        type: string
+        format: date-time
+        description: When account was marked for deletion
+      marked_for_deletion_reason:
+        type: string
+        description: Reason for account deletion
\ No newline at end of file
diff --git a/swagger/definitions/resource/account_show_response.yml b/swagger/definitions/resource/account_show_response.yml
new file mode 100644
index 000000000..208b27218
--- /dev/null
+++ b/swagger/definitions/resource/account_show_response.yml
@@ -0,0 +1,13 @@
+allOf:
+  - $ref: '#/components/schemas/account_detail'
+  - type: object
+    properties:
+      latest_chatwoot_version:
+        type: string
+        description: Latest version of Chatwoot available
+        example: "3.0.0"
+      subscribed_features:
+        type: array
+        items:
+          type: string
+        description: List of subscribed enterprise features (if enterprise edition is enabled)
\ No newline at end of file
diff --git a/swagger/paths/application/accounts/show.yml b/swagger/paths/application/accounts/show.yml
new file mode 100644
index 000000000..56e0c8052
--- /dev/null
+++ b/swagger/paths/application/accounts/show.yml
@@ -0,0 +1,28 @@
+tags:
+  - Account
+operationId: get-account-details
+summary: Get account details
+description: Get the details of the current account
+security:
+  - userApiKey: []
+parameters:
+  - $ref: '#/components/parameters/account_id'
+responses:
+  '200':
+    description: Success
+    content:
+      application/json:
+        schema:
+          $ref: '#/components/schemas/account_show_response'
+  '401':
+    description: Unauthorized
+    content:
+      application/json:
+        schema:
+          $ref: '#/components/schemas/bad_request_error'
+  '404':
+    description: Account not found
+    content:
+      application/json:
+        schema:
+          $ref: '#/components/schemas/bad_request_error'
\ No newline at end of file
diff --git a/swagger/paths/application/accounts/update.yml b/swagger/paths/application/accounts/update.yml
new file mode 100644
index 000000000..23c9c40f8
--- /dev/null
+++ b/swagger/paths/application/accounts/update.yml
@@ -0,0 +1,43 @@
+tags:
+  - Account
+operationId: update-account
+summary: Update account
+description: Update account details, settings, and custom attributes
+security:
+  - userApiKey: []
+parameters:
+  - $ref: '#/components/parameters/account_id'
+requestBody:
+  required: true
+  content:
+    application/json:
+      schema:
+        $ref: '#/components/schemas/account_update_payload'
+    application/x-www-form-urlencoded:
+      schema:
+        $ref: '#/components/schemas/account_update_payload'
+responses:
+  '200':
+    description: Success
+    content:
+      application/json:
+        schema:
+          $ref: '#/components/schemas/account_detail'
+  '401':
+    description: Unauthorized (requires administrator role)
+    content:
+      application/json:
+        schema:
+          $ref: '#/components/schemas/bad_request_error'
+  '404':
+    description: Account not found
+    content:
+      application/json:
+        schema:
+          $ref: '#/components/schemas/bad_request_error'
+  '422':
+    description: Validation error
+    content:
+      application/json:
+        schema:
+          $ref: '#/components/schemas/bad_request_error'
\ No newline at end of file
diff --git a/swagger/paths/index.yml b/swagger/paths/index.yml
index 379b2eef0..a70800b89 100644
--- a/swagger/paths/index.yml
+++ b/swagger/paths/index.yml
@@ -166,6 +166,15 @@
 
 # ------------  Application API routes  ------------#
 
+# Accounts
+/api/v1/accounts/{id}:
+  parameters:
+    - $ref: '#/components/parameters/account_id'
+  get:
+    $ref: ./application/accounts/show.yml
+  patch:
+    $ref: ./application/accounts/update.yml
+
 # AgentBots
 /api/v1/accounts/{account_id}/agent_bots:
   parameters:
diff --git a/swagger/swagger.json b/swagger/swagger.json
index 943b7a3e8..b9ecbcf27 100644
--- a/swagger/swagger.json
+++ b/swagger/swagger.json
@@ -1476,6 +1476,138 @@
         }
       }
     },
+    "/api/v1/accounts/{id}": {
+      "parameters": [
+        {
+          "$ref": "#/components/parameters/account_id"
+        }
+      ],
+      "get": {
+        "tags": [
+          "Account"
+        ],
+        "operationId": "get-account-details",
+        "summary": "Get account details",
+        "description": "Get the details of the current account",
+        "security": [
+          {
+            "userApiKey": []
+          }
+        ],
+        "parameters": [
+          {
+            "$ref": "#/components/parameters/account_id"
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Success",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/account_show_response"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Unauthorized",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/bad_request_error"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Account not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/bad_request_error"
+                }
+              }
+            }
+          }
+        }
+      },
+      "patch": {
+        "tags": [
+          "Account"
+        ],
+        "operationId": "update-account",
+        "summary": "Update account",
+        "description": "Update account details, settings, and custom attributes",
+        "security": [
+          {
+            "userApiKey": []
+          }
+        ],
+        "parameters": [
+          {
+            "$ref": "#/components/parameters/account_id"
+          }
+        ],
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/account_update_payload"
+              }
+            },
+            "application/x-www-form-urlencoded": {
+              "schema": {
+                "$ref": "#/components/schemas/account_update_payload"
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Success",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/account_detail"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Unauthorized (requires administrator role)",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/bad_request_error"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Account not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/bad_request_error"
+                }
+              }
+            }
+          },
+          "422": {
+            "description": "Validation error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/bad_request_error"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/api/v1/accounts/{account_id}/agent_bots": {
       "parameters": [
         {
@@ -8774,6 +8906,145 @@
           }
         }
       },
+      "account_detail": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "number",
+            "description": "Account ID"
+          },
+          "name": {
+            "type": "string",
+            "description": "Name of the account"
+          },
+          "locale": {
+            "type": "string",
+            "description": "The locale of the account"
+          },
+          "domain": {
+            "type": "string",
+            "description": "The domain of the account"
+          },
+          "support_email": {
+            "type": "string",
+            "description": "The support email of the account"
+          },
+          "status": {
+            "type": "string",
+            "description": "The status of the account"
+          },
+          "created_at": {
+            "type": "string",
+            "format": "date-time",
+            "description": "The creation date of the account"
+          },
+          "cache_keys": {
+            "type": "object",
+            "description": "Cache keys for the account"
+          },
+          "features": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "description": "Enabled features for the account"
+          },
+          "settings": {
+            "type": "object",
+            "description": "Account settings",
+            "properties": {
+              "auto_resolve_after": {
+                "type": "number",
+                "description": "Auto resolve conversations after specified minutes"
+              },
+              "auto_resolve_message": {
+                "type": "string",
+                "description": "Message to send when auto resolving"
+              },
+              "auto_resolve_ignore_waiting": {
+                "type": "boolean",
+                "description": "Whether to ignore waiting conversations for auto resolve"
+              }
+            }
+          },
+          "custom_attributes": {
+            "type": "object",
+            "description": "Custom attributes of the account",
+            "properties": {
+              "plan_name": {
+                "type": "string",
+                "description": "Subscription plan name"
+              },
+              "subscribed_quantity": {
+                "type": "number",
+                "description": "Subscribed quantity"
+              },
+              "subscription_status": {
+                "type": "string",
+                "description": "Subscription status"
+              },
+              "subscription_ends_on": {
+                "type": "string",
+                "format": "date",
+                "description": "Subscription end date"
+              },
+              "industry": {
+                "type": "string",
+                "description": "Industry type"
+              },
+              "company_size": {
+                "type": "string",
+                "description": "Company size"
+              },
+              "timezone": {
+                "type": "string",
+                "description": "Account timezone"
+              },
+              "logo": {
+                "type": "string",
+                "description": "Account logo URL"
+              },
+              "onboarding_step": {
+                "type": "string",
+                "description": "Current onboarding step"
+              },
+              "marked_for_deletion_at": {
+                "type": "string",
+                "format": "date-time",
+                "description": "When account was marked for deletion"
+              },
+              "marked_for_deletion_reason": {
+                "type": "string",
+                "description": "Reason for account deletion"
+              }
+            }
+          }
+        }
+      },
+      "account_show_response": {
+        "allOf": [
+          {
+            "$ref": "#/components/schemas/account_detail"
+          },
+          {
+            "type": "object",
+            "properties": {
+              "latest_chatwoot_version": {
+                "type": "string",
+                "description": "Latest version of Chatwoot available",
+                "example": "3.0.0"
+              },
+              "subscribed_features": {
+                "type": "array",
+                "items": {
+                  "type": "string"
+                },
+                "description": "List of subscribed enterprise features (if enterprise edition is enabled)"
+              }
+            }
+          }
+        ]
+      },
       "account_user": {
         "type": "array",
         "description": "Array of account users",
@@ -9113,6 +9384,66 @@
           }
         }
       },
+      "account_update_payload": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string",
+            "description": "Name of the account",
+            "example": "My Account"
+          },
+          "locale": {
+            "type": "string",
+            "description": "The locale of the account",
+            "example": "en"
+          },
+          "domain": {
+            "type": "string",
+            "description": "The domain of the account",
+            "example": "example.com"
+          },
+          "support_email": {
+            "type": "string",
+            "description": "The support email of the account",
+            "example": "support@example.com"
+          },
+          "auto_resolve_after": {
+            "type": "integer",
+            "minimum": 10,
+            "maximum": 1439856,
+            "nullable": true,
+            "description": "Auto resolve conversations after specified minutes",
+            "example": 1440
+          },
+          "auto_resolve_message": {
+            "type": "string",
+            "nullable": true,
+            "description": "Message to send when auto resolving",
+            "example": "This conversation has been automatically resolved due to inactivity"
+          },
+          "auto_resolve_ignore_waiting": {
+            "type": "boolean",
+            "nullable": true,
+            "description": "Whether to ignore waiting conversations for auto resolve",
+            "example": false
+          },
+          "industry": {
+            "type": "string",
+            "description": "Industry type",
+            "example": "Technology"
+          },
+          "company_size": {
+            "type": "string",
+            "description": "Company size",
+            "example": "50-100"
+          },
+          "timezone": {
+            "type": "string",
+            "description": "Account timezone",
+            "example": "UTC"
+          }
+        }
+      },
       "account_user_create_update_payload": {
         "type": "object",
         "required": [
diff --git a/swagger/tag_groups/application_swagger.json b/swagger/tag_groups/application_swagger.json
index 33e75183f..2a8162358 100644
--- a/swagger/tag_groups/application_swagger.json
+++ b/swagger/tag_groups/application_swagger.json
@@ -7135,6 +7135,145 @@
           }
         }
       },
+      "account_detail": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "number",
+            "description": "Account ID"
+          },
+          "name": {
+            "type": "string",
+            "description": "Name of the account"
+          },
+          "locale": {
+            "type": "string",
+            "description": "The locale of the account"
+          },
+          "domain": {
+            "type": "string",
+            "description": "The domain of the account"
+          },
+          "support_email": {
+            "type": "string",
+            "description": "The support email of the account"
+          },
+          "status": {
+            "type": "string",
+            "description": "The status of the account"
+          },
+          "created_at": {
+            "type": "string",
+            "format": "date-time",
+            "description": "The creation date of the account"
+          },
+          "cache_keys": {
+            "type": "object",
+            "description": "Cache keys for the account"
+          },
+          "features": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "description": "Enabled features for the account"
+          },
+          "settings": {
+            "type": "object",
+            "description": "Account settings",
+            "properties": {
+              "auto_resolve_after": {
+                "type": "number",
+                "description": "Auto resolve conversations after specified minutes"
+              },
+              "auto_resolve_message": {
+                "type": "string",
+                "description": "Message to send when auto resolving"
+              },
+              "auto_resolve_ignore_waiting": {
+                "type": "boolean",
+                "description": "Whether to ignore waiting conversations for auto resolve"
+              }
+            }
+          },
+          "custom_attributes": {
+            "type": "object",
+            "description": "Custom attributes of the account",
+            "properties": {
+              "plan_name": {
+                "type": "string",
+                "description": "Subscription plan name"
+              },
+              "subscribed_quantity": {
+                "type": "number",
+                "description": "Subscribed quantity"
+              },
+              "subscription_status": {
+                "type": "string",
+                "description": "Subscription status"
+              },
+              "subscription_ends_on": {
+                "type": "string",
+                "format": "date",
+                "description": "Subscription end date"
+              },
+              "industry": {
+                "type": "string",
+                "description": "Industry type"
+              },
+              "company_size": {
+                "type": "string",
+                "description": "Company size"
+              },
+              "timezone": {
+                "type": "string",
+                "description": "Account timezone"
+              },
+              "logo": {
+                "type": "string",
+                "description": "Account logo URL"
+              },
+              "onboarding_step": {
+                "type": "string",
+                "description": "Current onboarding step"
+              },
+              "marked_for_deletion_at": {
+                "type": "string",
+                "format": "date-time",
+                "description": "When account was marked for deletion"
+              },
+              "marked_for_deletion_reason": {
+                "type": "string",
+                "description": "Reason for account deletion"
+              }
+            }
+          }
+        }
+      },
+      "account_show_response": {
+        "allOf": [
+          {
+            "$ref": "#/components/schemas/account_detail"
+          },
+          {
+            "type": "object",
+            "properties": {
+              "latest_chatwoot_version": {
+                "type": "string",
+                "description": "Latest version of Chatwoot available",
+                "example": "3.0.0"
+              },
+              "subscribed_features": {
+                "type": "array",
+                "items": {
+                  "type": "string"
+                },
+                "description": "List of subscribed enterprise features (if enterprise edition is enabled)"
+              }
+            }
+          }
+        ]
+      },
       "account_user": {
         "type": "array",
         "description": "Array of account users",
@@ -7474,6 +7613,66 @@
           }
         }
       },
+      "account_update_payload": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string",
+            "description": "Name of the account",
+            "example": "My Account"
+          },
+          "locale": {
+            "type": "string",
+            "description": "The locale of the account",
+            "example": "en"
+          },
+          "domain": {
+            "type": "string",
+            "description": "The domain of the account",
+            "example": "example.com"
+          },
+          "support_email": {
+            "type": "string",
+            "description": "The support email of the account",
+            "example": "support@example.com"
+          },
+          "auto_resolve_after": {
+            "type": "integer",
+            "minimum": 10,
+            "maximum": 1439856,
+            "nullable": true,
+            "description": "Auto resolve conversations after specified minutes",
+            "example": 1440
+          },
+          "auto_resolve_message": {
+            "type": "string",
+            "nullable": true,
+            "description": "Message to send when auto resolving",
+            "example": "This conversation has been automatically resolved due to inactivity"
+          },
+          "auto_resolve_ignore_waiting": {
+            "type": "boolean",
+            "nullable": true,
+            "description": "Whether to ignore waiting conversations for auto resolve",
+            "example": false
+          },
+          "industry": {
+            "type": "string",
+            "description": "Industry type",
+            "example": "Technology"
+          },
+          "company_size": {
+            "type": "string",
+            "description": "Company size",
+            "example": "50-100"
+          },
+          "timezone": {
+            "type": "string",
+            "description": "Account timezone",
+            "example": "UTC"
+          }
+        }
+      },
       "account_user_create_update_payload": {
         "type": "object",
         "required": [
diff --git a/swagger/tag_groups/client_swagger.json b/swagger/tag_groups/client_swagger.json
index 6d471da43..cefc39324 100644
--- a/swagger/tag_groups/client_swagger.json
+++ b/swagger/tag_groups/client_swagger.json
@@ -1978,6 +1978,145 @@
           }
         }
       },
+      "account_detail": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "number",
+            "description": "Account ID"
+          },
+          "name": {
+            "type": "string",
+            "description": "Name of the account"
+          },
+          "locale": {
+            "type": "string",
+            "description": "The locale of the account"
+          },
+          "domain": {
+            "type": "string",
+            "description": "The domain of the account"
+          },
+          "support_email": {
+            "type": "string",
+            "description": "The support email of the account"
+          },
+          "status": {
+            "type": "string",
+            "description": "The status of the account"
+          },
+          "created_at": {
+            "type": "string",
+            "format": "date-time",
+            "description": "The creation date of the account"
+          },
+          "cache_keys": {
+            "type": "object",
+            "description": "Cache keys for the account"
+          },
+          "features": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "description": "Enabled features for the account"
+          },
+          "settings": {
+            "type": "object",
+            "description": "Account settings",
+            "properties": {
+              "auto_resolve_after": {
+                "type": "number",
+                "description": "Auto resolve conversations after specified minutes"
+              },
+              "auto_resolve_message": {
+                "type": "string",
+                "description": "Message to send when auto resolving"
+              },
+              "auto_resolve_ignore_waiting": {
+                "type": "boolean",
+                "description": "Whether to ignore waiting conversations for auto resolve"
+              }
+            }
+          },
+          "custom_attributes": {
+            "type": "object",
+            "description": "Custom attributes of the account",
+            "properties": {
+              "plan_name": {
+                "type": "string",
+                "description": "Subscription plan name"
+              },
+              "subscribed_quantity": {
+                "type": "number",
+                "description": "Subscribed quantity"
+              },
+              "subscription_status": {
+                "type": "string",
+                "description": "Subscription status"
+              },
+              "subscription_ends_on": {
+                "type": "string",
+                "format": "date",
+                "description": "Subscription end date"
+              },
+              "industry": {
+                "type": "string",
+                "description": "Industry type"
+              },
+              "company_size": {
+                "type": "string",
+                "description": "Company size"
+              },
+              "timezone": {
+                "type": "string",
+                "description": "Account timezone"
+              },
+              "logo": {
+                "type": "string",
+                "description": "Account logo URL"
+              },
+              "onboarding_step": {
+                "type": "string",
+                "description": "Current onboarding step"
+              },
+              "marked_for_deletion_at": {
+                "type": "string",
+                "format": "date-time",
+                "description": "When account was marked for deletion"
+              },
+              "marked_for_deletion_reason": {
+                "type": "string",
+                "description": "Reason for account deletion"
+              }
+            }
+          }
+        }
+      },
+      "account_show_response": {
+        "allOf": [
+          {
+            "$ref": "#/components/schemas/account_detail"
+          },
+          {
+            "type": "object",
+            "properties": {
+              "latest_chatwoot_version": {
+                "type": "string",
+                "description": "Latest version of Chatwoot available",
+                "example": "3.0.0"
+              },
+              "subscribed_features": {
+                "type": "array",
+                "items": {
+                  "type": "string"
+                },
+                "description": "List of subscribed enterprise features (if enterprise edition is enabled)"
+              }
+            }
+          }
+        ]
+      },
       "account_user": {
         "type": "array",
         "description": "Array of account users",
@@ -2317,6 +2456,66 @@
           }
         }
       },
+      "account_update_payload": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string",
+            "description": "Name of the account",
+            "example": "My Account"
+          },
+          "locale": {
+            "type": "string",
+            "description": "The locale of the account",
+            "example": "en"
+          },
+          "domain": {
+            "type": "string",
+            "description": "The domain of the account",
+            "example": "example.com"
+          },
+          "support_email": {
+            "type": "string",
+            "description": "The support email of the account",
+            "example": "support@example.com"
+          },
+          "auto_resolve_after": {
+            "type": "integer",
+            "minimum": 10,
+            "maximum": 1439856,
+            "nullable": true,
+            "description": "Auto resolve conversations after specified minutes",
+            "example": 1440
+          },
+          "auto_resolve_message": {
+            "type": "string",
+            "nullable": true,
+            "description": "Message to send when auto resolving",
+            "example": "This conversation has been automatically resolved due to inactivity"
+          },
+          "auto_resolve_ignore_waiting": {
+            "type": "boolean",
+            "nullable": true,
+            "description": "Whether to ignore waiting conversations for auto resolve",
+            "example": false
+          },
+          "industry": {
+            "type": "string",
+            "description": "Industry type",
+            "example": "Technology"
+          },
+          "company_size": {
+            "type": "string",
+            "description": "Company size",
+            "example": "50-100"
+          },
+          "timezone": {
+            "type": "string",
+            "description": "Account timezone",
+            "example": "UTC"
+          }
+        }
+      },
       "account_user_create_update_payload": {
         "type": "object",
         "required": [
diff --git a/swagger/tag_groups/other_swagger.json b/swagger/tag_groups/other_swagger.json
index fc61e8721..2cc045747 100644
--- a/swagger/tag_groups/other_swagger.json
+++ b/swagger/tag_groups/other_swagger.json
@@ -1393,6 +1393,145 @@
           }
         }
       },
+      "account_detail": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "number",
+            "description": "Account ID"
+          },
+          "name": {
+            "type": "string",
+            "description": "Name of the account"
+          },
+          "locale": {
+            "type": "string",
+            "description": "The locale of the account"
+          },
+          "domain": {
+            "type": "string",
+            "description": "The domain of the account"
+          },
+          "support_email": {
+            "type": "string",
+            "description": "The support email of the account"
+          },
+          "status": {
+            "type": "string",
+            "description": "The status of the account"
+          },
+          "created_at": {
+            "type": "string",
+            "format": "date-time",
+            "description": "The creation date of the account"
+          },
+          "cache_keys": {
+            "type": "object",
+            "description": "Cache keys for the account"
+          },
+          "features": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "description": "Enabled features for the account"
+          },
+          "settings": {
+            "type": "object",
+            "description": "Account settings",
+            "properties": {
+              "auto_resolve_after": {
+                "type": "number",
+                "description": "Auto resolve conversations after specified minutes"
+              },
+              "auto_resolve_message": {
+                "type": "string",
+                "description": "Message to send when auto resolving"
+              },
+              "auto_resolve_ignore_waiting": {
+                "type": "boolean",
+                "description": "Whether to ignore waiting conversations for auto resolve"
+              }
+            }
+          },
+          "custom_attributes": {
+            "type": "object",
+            "description": "Custom attributes of the account",
+            "properties": {
+              "plan_name": {
+                "type": "string",
+                "description": "Subscription plan name"
+              },
+              "subscribed_quantity": {
+                "type": "number",
+                "description": "Subscribed quantity"
+              },
+              "subscription_status": {
+                "type": "string",
+                "description": "Subscription status"
+              },
+              "subscription_ends_on": {
+                "type": "string",
+                "format": "date",
+                "description": "Subscription end date"
+              },
+              "industry": {
+                "type": "string",
+                "description": "Industry type"
+              },
+              "company_size": {
+                "type": "string",
+                "description": "Company size"
+              },
+              "timezone": {
+                "type": "string",
+                "description": "Account timezone"
+              },
+              "logo": {
+                "type": "string",
+                "description": "Account logo URL"
+              },
+              "onboarding_step": {
+                "type": "string",
+                "description": "Current onboarding step"
+              },
+              "marked_for_deletion_at": {
+                "type": "string",
+                "format": "date-time",
+                "description": "When account was marked for deletion"
+              },
+              "marked_for_deletion_reason": {
+                "type": "string",
+                "description": "Reason for account deletion"
+              }
+            }
+          }
+        }
+      },
+      "account_show_response": {
+        "allOf": [
+          {
+            "$ref": "#/components/schemas/account_detail"
+          },
+          {
+            "type": "object",
+            "properties": {
+              "latest_chatwoot_version": {
+                "type": "string",
+                "description": "Latest version of Chatwoot available",
+                "example": "3.0.0"
+              },
+              "subscribed_features": {
+                "type": "array",
+                "items": {
+                  "type": "string"
+                },
+                "description": "List of subscribed enterprise features (if enterprise edition is enabled)"
+              }
+            }
+          }
+        ]
+      },
       "account_user": {
         "type": "array",
         "description": "Array of account users",
@@ -1732,6 +1871,66 @@
           }
         }
       },
+      "account_update_payload": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string",
+            "description": "Name of the account",
+            "example": "My Account"
+          },
+          "locale": {
+            "type": "string",
+            "description": "The locale of the account",
+            "example": "en"
+          },
+          "domain": {
+            "type": "string",
+            "description": "The domain of the account",
+            "example": "example.com"
+          },
+          "support_email": {
+            "type": "string",
+            "description": "The support email of the account",
+            "example": "support@example.com"
+          },
+          "auto_resolve_after": {
+            "type": "integer",
+            "minimum": 10,
+            "maximum": 1439856,
+            "nullable": true,
+            "description": "Auto resolve conversations after specified minutes",
+            "example": 1440
+          },
+          "auto_resolve_message": {
+            "type": "string",
+            "nullable": true,
+            "description": "Message to send when auto resolving",
+            "example": "This conversation has been automatically resolved due to inactivity"
+          },
+          "auto_resolve_ignore_waiting": {
+            "type": "boolean",
+            "nullable": true,
+            "description": "Whether to ignore waiting conversations for auto resolve",
+            "example": false
+          },
+          "industry": {
+            "type": "string",
+            "description": "Industry type",
+            "example": "Technology"
+          },
+          "company_size": {
+            "type": "string",
+            "description": "Company size",
+            "example": "50-100"
+          },
+          "timezone": {
+            "type": "string",
+            "description": "Account timezone",
+            "example": "UTC"
+          }
+        }
+      },
       "account_user_create_update_payload": {
         "type": "object",
         "required": [
diff --git a/swagger/tag_groups/platform_swagger.json b/swagger/tag_groups/platform_swagger.json
index 18ec796a0..085e969ab 100644
--- a/swagger/tag_groups/platform_swagger.json
+++ b/swagger/tag_groups/platform_swagger.json
@@ -2154,6 +2154,145 @@
           }
         }
       },
+      "account_detail": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "number",
+            "description": "Account ID"
+          },
+          "name": {
+            "type": "string",
+            "description": "Name of the account"
+          },
+          "locale": {
+            "type": "string",
+            "description": "The locale of the account"
+          },
+          "domain": {
+            "type": "string",
+            "description": "The domain of the account"
+          },
+          "support_email": {
+            "type": "string",
+            "description": "The support email of the account"
+          },
+          "status": {
+            "type": "string",
+            "description": "The status of the account"
+          },
+          "created_at": {
+            "type": "string",
+            "format": "date-time",
+            "description": "The creation date of the account"
+          },
+          "cache_keys": {
+            "type": "object",
+            "description": "Cache keys for the account"
+          },
+          "features": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "description": "Enabled features for the account"
+          },
+          "settings": {
+            "type": "object",
+            "description": "Account settings",
+            "properties": {
+              "auto_resolve_after": {
+                "type": "number",
+                "description": "Auto resolve conversations after specified minutes"
+              },
+              "auto_resolve_message": {
+                "type": "string",
+                "description": "Message to send when auto resolving"
+              },
+              "auto_resolve_ignore_waiting": {
+                "type": "boolean",
+                "description": "Whether to ignore waiting conversations for auto resolve"
+              }
+            }
+          },
+          "custom_attributes": {
+            "type": "object",
+            "description": "Custom attributes of the account",
+            "properties": {
+              "plan_name": {
+                "type": "string",
+                "description": "Subscription plan name"
+              },
+              "subscribed_quantity": {
+                "type": "number",
+                "description": "Subscribed quantity"
+              },
+              "subscription_status": {
+                "type": "string",
+                "description": "Subscription status"
+              },
+              "subscription_ends_on": {
+                "type": "string",
+                "format": "date",
+                "description": "Subscription end date"
+              },
+              "industry": {
+                "type": "string",
+                "description": "Industry type"
+              },
+              "company_size": {
+                "type": "string",
+                "description": "Company size"
+              },
+              "timezone": {
+                "type": "string",
+                "description": "Account timezone"
+              },
+              "logo": {
+                "type": "string",
+                "description": "Account logo URL"
+              },
+              "onboarding_step": {
+                "type": "string",
+                "description": "Current onboarding step"
+              },
+              "marked_for_deletion_at": {
+                "type": "string",
+                "format": "date-time",
+                "description": "When account was marked for deletion"
+              },
+              "marked_for_deletion_reason": {
+                "type": "string",
+                "description": "Reason for account deletion"
+              }
+            }
+          }
+        }
+      },
+      "account_show_response": {
+        "allOf": [
+          {
+            "$ref": "#/components/schemas/account_detail"
+          },
+          {
+            "type": "object",
+            "properties": {
+              "latest_chatwoot_version": {
+                "type": "string",
+                "description": "Latest version of Chatwoot available",
+                "example": "3.0.0"
+              },
+              "subscribed_features": {
+                "type": "array",
+                "items": {
+                  "type": "string"
+                },
+                "description": "List of subscribed enterprise features (if enterprise edition is enabled)"
+              }
+            }
+          }
+        ]
+      },
       "account_user": {
         "type": "array",
         "description": "Array of account users",
@@ -2493,6 +2632,66 @@
           }
         }
       },
+      "account_update_payload": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string",
+            "description": "Name of the account",
+            "example": "My Account"
+          },
+          "locale": {
+            "type": "string",
+            "description": "The locale of the account",
+            "example": "en"
+          },
+          "domain": {
+            "type": "string",
+            "description": "The domain of the account",
+            "example": "example.com"
+          },
+          "support_email": {
+            "type": "string",
+            "description": "The support email of the account",
+            "example": "support@example.com"
+          },
+          "auto_resolve_after": {
+            "type": "integer",
+            "minimum": 10,
+            "maximum": 1439856,
+            "nullable": true,
+            "description": "Auto resolve conversations after specified minutes",
+            "example": 1440
+          },
+          "auto_resolve_message": {
+            "type": "string",
+            "nullable": true,
+            "description": "Message to send when auto resolving",
+            "example": "This conversation has been automatically resolved due to inactivity"
+          },
+          "auto_resolve_ignore_waiting": {
+            "type": "boolean",
+            "nullable": true,
+            "description": "Whether to ignore waiting conversations for auto resolve",
+            "example": false
+          },
+          "industry": {
+            "type": "string",
+            "description": "Industry type",
+            "example": "Technology"
+          },
+          "company_size": {
+            "type": "string",
+            "description": "Company size",
+            "example": "50-100"
+          },
+          "timezone": {
+            "type": "string",
+            "description": "Account timezone",
+            "example": "UTC"
+          }
+        }
+      },
       "account_user_create_update_payload": {
         "type": "object",
         "required": [

From 23a804512aed3849f4500ecf76961516a6d4f8dc Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Thu, 29 May 2025 01:05:10 -0600
Subject: [PATCH 03/16] feat: Update the UI to support the change for Copilot
 as a universal copilot (#11618)

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../dashboard/assets/scss/widgets/_tabs.scss  |  2 +-
 .../Conversation/SidepanelSwitch.vue          | 87 +++++++++++++++++++
 ...ory.vue => SidebarActionsHeader.story.vue} | 16 +++-
 .../components-next/SidebarActionsHeader.vue  | 47 ++++++++++
 .../components-next/copilot/Copilot.vue       | 43 ++++++---
 .../components-next/copilot/CopilotHeader.vue | 32 -------
 .../components-next/sidebar/Sidebar.vue       |  2 +-
 .../dashboard/components/ChatList.vue         |  2 +-
 .../dashboard/components/ChatListHeader.vue   |  8 +-
 .../components/widgets/ChatTypeTabs.vue       |  3 +-
 .../widgets/conversation/ConversationBox.vue  | 21 +----
 .../widgets/conversation/ConversationCard.vue |  4 +-
 .../conversation/ConversationHeader.vue       | 38 ++------
 .../conversation/ConversationSidebar.vue      | 60 +++++--------
 .../widgets/conversation/MessagesView.vue     | 36 --------
 .../dashboard/i18n/locale/en/general.json     |  3 +-
 .../dashboard/conversation/ContactPanel.vue   | 25 +++---
 .../conversation/ConversationView.vue         | 32 ++++---
 18 files changed, 248 insertions(+), 213 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Conversation/SidepanelSwitch.vue
 rename app/javascript/dashboard/components-next/{copilot/CopilotHeader.story.vue => SidebarActionsHeader.story.vue} (50%)
 create mode 100644 app/javascript/dashboard/components-next/SidebarActionsHeader.vue
 delete mode 100644 app/javascript/dashboard/components-next/copilot/CopilotHeader.vue

diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
index 72a2e6be8..72773de7f 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
@@ -3,7 +3,7 @@
 }
 
 .tabs--container--with-border {
-  @apply border-b border-n-weak;
+  @apply border-b border-b-n-weak;
 }
 
 .tabs--container--compact.tab--chat-type {
diff --git a/app/javascript/dashboard/components-next/Conversation/SidepanelSwitch.vue b/app/javascript/dashboard/components-next/Conversation/SidepanelSwitch.vue
new file mode 100644
index 000000000..ec3a8d03a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/SidepanelSwitch.vue
@@ -0,0 +1,87 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { computed } from 'vue';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
+const { updateUISettings } = useUISettings();
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+const showCopilotTab = computed(() =>
+  isFeatureEnabledonAccount.value(currentAccountId.value, FEATURE_FLAGS.CAPTAIN)
+);
+
+const { uiSettings } = useUISettings();
+const isContactSidebarOpen = computed(
+  () => uiSettings.value.is_contact_sidebar_open
+);
+const isCopilotPanelOpen = computed(
+  () => uiSettings.value.is_copilot_panel_open
+);
+
+const toggleConversationSidebarToggle = () => {
+  updateUISettings({
+    is_contact_sidebar_open: !isContactSidebarOpen.value,
+    is_copilot_panel_open: false,
+  });
+};
+
+const handleConversationSidebarToggle = () => {
+  updateUISettings({
+    is_contact_sidebar_open: true,
+    is_copilot_panel_open: false,
+  });
+};
+
+const handleCopilotSidebarToggle = () => {
+  updateUISettings({
+    is_contact_sidebar_open: false,
+    is_copilot_panel_open: true,
+  });
+};
+
+const keyboardEvents = {
+  'Alt+KeyO': {
+    action: toggleConversationSidebarToggle,
+  },
+};
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-center items-center absolute top-24 ltr:right-2 rtl:left-2 bg-n-solid-2 border border-n-weak rounded-full gap-2 p-1"
+  >
+    <Button
+      v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"
+      ghost
+      slate
+      sm
+      class="!rounded-full"
+      :class="{
+        'bg-n-alpha-2': isContactSidebarOpen,
+      }"
+      icon="i-ph-user-bold"
+      @click="handleConversationSidebarToggle"
+    />
+    <Button
+      v-if="showCopilotTab"
+      v-tooltip.bottom="$t('CONVERSATION.SIDEBAR.COPILOT')"
+      ghost
+      slate
+      class="!rounded-full"
+      :class="{
+        'bg-n-alpha-2 !text-n-iris-9': isCopilotPanelOpen,
+      }"
+      sm
+      icon="i-woot-captain"
+      @click="handleCopilotSidebarToggle"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotHeader.story.vue b/app/javascript/dashboard/components-next/SidebarActionsHeader.story.vue
similarity index 50%
rename from app/javascript/dashboard/components-next/copilot/CopilotHeader.story.vue
rename to app/javascript/dashboard/components-next/SidebarActionsHeader.story.vue
index 78a345093..13d528240 100644
--- a/app/javascript/dashboard/components-next/copilot/CopilotHeader.story.vue
+++ b/app/javascript/dashboard/components-next/SidebarActionsHeader.story.vue
@@ -1,21 +1,29 @@
 <script setup>
-import CopilotHeader from './CopilotHeader.vue';
+import SidebarActionsHeader from './SidebarActionsHeader.vue';
 </script>
 
 <template>
   <Story
-    title="Captain/Copilot/CopilotHeader"
+    title="Components/SidebarActionsHeader"
     :layout="{ type: 'grid', width: '800px' }"
   >
     <!-- Default State -->
     <Variant title="Default State">
-      <CopilotHeader />
+      <SidebarActionsHeader title="Default State" />
     </Variant>
 
     <!-- With New Conversation Button -->
     <Variant title="With New Conversation Button">
       <!-- eslint-disable-next-line vue/prefer-true-attribute-shorthand -->
-      <CopilotHeader :has-messages="true" />
+      <SidebarActionsHeader
+        title="With New Conversation Button"
+        :buttons="[
+          {
+            key: 'new_conversation',
+            icon: 'i-lucide-plus',
+          },
+        ]"
+      />
     </Variant>
   </Story>
 </template>
diff --git a/app/javascript/dashboard/components-next/SidebarActionsHeader.vue b/app/javascript/dashboard/components-next/SidebarActionsHeader.vue
new file mode 100644
index 000000000..210ddfa0e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/SidebarActionsHeader.vue
@@ -0,0 +1,47 @@
+<script setup>
+import Button from './button/Button.vue';
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  buttons: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['click', 'close']);
+
+const handleButtonClick = button => {
+  emit('click', button.key);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between px-4 py-2 border-b border-n-weak h-12"
+  >
+    <div class="flex items-center justify-between gap-2 flex-1">
+      <span class="font-medium text-sm text-n-slate-12">{{ title }}</span>
+      <div class="flex items-center">
+        <Button
+          v-for="button in buttons"
+          :key="button.key"
+          v-tooltip="button.tooltip"
+          :icon="button.icon"
+          ghost
+          sm
+          @click="handleButtonClick(button)"
+        />
+        <Button
+          v-tooltip="$t('GENERAL.CLOSE')"
+          icon="i-lucide-x"
+          ghost
+          sm
+          @click="$emit('close')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/Copilot.vue b/app/javascript/dashboard/components-next/copilot/Copilot.vue
index 5feb474a6..6fb45c278 100644
--- a/app/javascript/dashboard/components-next/copilot/Copilot.vue
+++ b/app/javascript/dashboard/components-next/copilot/Copilot.vue
@@ -3,13 +3,15 @@ import { nextTick, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useTrack } from 'dashboard/composables';
 import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 import CopilotInput from './CopilotInput.vue';
 import CopilotLoader from './CopilotLoader.vue';
 import CopilotAgentMessage from './CopilotAgentMessage.vue';
 import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
 import ToggleCopilotAssistant from './ToggleCopilotAssistant.vue';
-import Icon from '../icon/Icon.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import SidebarActionsHeader from 'dashboard/components-next/SidebarActionsHeader.vue';
 
 const props = defineProps({
   supportAgent: {
@@ -54,10 +56,6 @@ const useSuggestion = opt => {
   useTrack(COPILOT_EVENTS.SEND_SUGGESTED);
 };
 
-const handleReset = () => {
-  emit('reset');
-};
-
 const chatContainer = ref(null);
 
 const scrollToBottom = async () => {
@@ -82,6 +80,21 @@ const promptOptions = [
   },
 ];
 
+const { updateUISettings } = useUISettings();
+
+const closeCopilotPanel = () => {
+  updateUISettings({
+    is_copilot_panel_open: false,
+    is_contact_sidebar_open: false,
+  });
+};
+
+const handleSidebarAction = action => {
+  if (action === 'reset') {
+    emit('reset');
+  }
+};
+
 watch(
   [() => props.messages, () => props.isCaptainTyping],
   () => {
@@ -93,6 +106,18 @@ watch(
 
 <template>
   <div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
+    <SidebarActionsHeader
+      :title="$t('CAPTAIN.COPILOT.TITLE')"
+      :buttons="[
+        {
+          key: 'reset',
+          icon: 'i-lucide-refresh-ccw',
+          tooltip: $t('CAPTAIN.COPILOT.RESET'),
+        },
+      ]"
+      @click="handleSidebarAction"
+      @close="closeCopilotPanel"
+    />
     <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
       <template v-for="message in messages" :key="message.id">
         <CopilotAgentMessage
@@ -139,14 +164,6 @@ watch(
           @set-assistant="$event => emit('setAssistant', $event)"
         />
         <div v-else />
-        <button
-          v-if="messages.length"
-          class="text-xs flex items-center gap-1 hover:underline"
-          @click="handleReset"
-        >
-          <i class="i-lucide-refresh-ccw" />
-          <span>{{ $t('CAPTAIN.COPILOT.RESET') }}</span>
-        </button>
       </div>
       <CopilotInput class="mb-1 w-full" @send="sendMessage" />
     </div>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotHeader.vue b/app/javascript/dashboard/components-next/copilot/CopilotHeader.vue
deleted file mode 100644
index c7a8696f3..000000000
--- a/app/javascript/dashboard/components-next/copilot/CopilotHeader.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup>
-import Button from '../button/Button.vue';
-defineProps({
-  hasMessages: {
-    type: Boolean,
-    default: false,
-  },
-});
-defineEmits(['reset', 'close']);
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-between px-5 py-2 border-b border-n-weak h-12"
-  >
-    <div class="flex items-center justify-between gap-2 flex-1">
-      <span class="font-medium text-sm text-n-slate-12">
-        {{ $t('CAPTAIN.COPILOT.TITLE') }}
-      </span>
-      <div class="flex items-center">
-        <Button
-          v-if="hasMessages"
-          icon="i-lucide-plus"
-          ghost
-          sm
-          @click="$emit('reset')"
-        />
-        <Button icon="i-lucide-x" ghost sm @click="$emit('close')" />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index e3a533437..0bfcf4142 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -519,7 +519,7 @@ const menuItems = computed(() => {
       </div>
     </section>
     <nav class="grid flex-grow gap-2 px-2 pb-5 overflow-y-scroll no-scrollbar">
-      <ul class="flex flex-col gap-2 m-0 list-none">
+      <ul class="flex flex-col gap-1.5 m-0 list-none">
         <SidebarGroup
           v-for="item in menuItems"
           :key="item.name"
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index f6d114c21..089d9e74f 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -814,7 +814,7 @@ watch(conversationFilters, (newVal, oldVal) => {
     class="flex flex-col flex-shrink-0 bg-n-solid-1 conversations-list-wrap"
     :class="[
       { hidden: !showConversationList },
-      isOnExpandedLayout ? 'basis-full' : 'w-[360px] 2xl:w-[420px]',
+      isOnExpandedLayout ? 'basis-full' : 'w-[340px] 2xl:w-[412px]',
     ]"
   >
     <slot />
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index 286d6d6c5..b4ce9f342 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -80,16 +80,14 @@ const toggleConversationLayout = () => {
 
 <template>
   <div
-    class="flex items-center justify-between gap-2 px-4"
+    class="flex items-center justify-between gap-2 px-3 h-12"
     :class="{
-      'pb-3 border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
-      'pt-3 pb-2': showV4View,
-      'mb-2 pb-0': !showV4View,
+      'border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
     }"
   >
     <div class="flex items-center justify-center min-w-0">
       <h1
-        class="text-lg font-medium truncate text-n-slate-12"
+        class="text-base font-medium truncate text-n-slate-12"
         :title="pageTitle"
       >
         {{ pageTitle }}
diff --git a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
index 01fb46187..26fa7466a 100644
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
@@ -48,12 +48,13 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <woot-tabs
     :index="activeTabIndex"
-    class="w-full px-4 py-0 tab--chat-type"
+    class="w-full px-3 -mt-1 py-0 tab--chat-type"
     @change="onTabChange"
   >
     <woot-tabs-item
       v-for="(item, index) in items"
       :key="item.key"
+      class="text-sm"
       :index="index"
       :name="item.name"
       :count="item.count"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index b0f5eb21f..5a39ae447 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -4,17 +4,14 @@ import ConversationHeader from './ConversationHeader.vue';
 import DashboardAppFrame from '../DashboardApp/Frame.vue';
 import EmptyState from './EmptyState/EmptyState.vue';
 import MessagesView from './MessagesView.vue';
-import ConversationSidebar from './ConversationSidebar.vue';
 
 export default {
   components: {
-    ConversationSidebar,
     ConversationHeader,
     DashboardAppFrame,
     EmptyState,
     MessagesView,
   },
-
   props: {
     inboxId: {
       type: [Number, String],
@@ -34,7 +31,6 @@ export default {
       default: true,
     },
   },
-  emits: ['contactPanelToggle'],
   data() {
     return { activeIndex: 0 };
   },
@@ -86,9 +82,6 @@ export default {
       }
       this.$store.dispatch('conversationLabels/get', this.currentChat.id);
     },
-    onToggleContactPanel() {
-      this.$emit('contactPanelToggle');
-    },
     onDashboardAppTabChange(index) {
       this.activeIndex = index;
     },
@@ -98,7 +91,7 @@ export default {
 
 <template>
   <div
-    class="conversation-details-wrap bg-n-background"
+    class="conversation-details-wrap bg-n-background relative"
     :class="{
       'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
     }"
@@ -107,14 +100,12 @@ export default {
       v-if="currentChat.id"
       :chat="currentChat"
       :is-inbox-view="isInboxView"
-      :is-contact-panel-open="isContactPanelOpen"
       :show-back-button="isOnExpandedLayout && !isInboxView"
-      @contact-panel-toggle="onToggleContactPanel"
     />
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="-mt-px bg-white dashboard-app--tabs dark:bg-slate-900"
+      class="-mt-px dashboard-app--tabs border-t border-t-n-background"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item
@@ -130,18 +121,12 @@ export default {
         v-if="currentChat.id"
         :inbox-id="inboxId"
         :is-inbox-view="isInboxView"
-        :is-contact-panel-open="isContactPanelOpen"
-        @contact-panel-toggle="onToggleContactPanel"
       />
       <EmptyState
         v-if="!currentChat.id && !isInboxView"
         :is-on-expanded-layout="isOnExpandedLayout"
       />
-      <ConversationSidebar
-        v-if="showContactPanel"
-        :current-chat="currentChat"
-        @toggle-contact-panel="onToggleContactPanel"
-      />
+      <slot />
     </div>
     <DashboardAppFrame
       v-for="(dashboardApp, index) in dashboardApps"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 7d771ad88..698690dad 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -243,7 +243,7 @@ export default {
 
 <template>
   <div
-    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-3 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
     :class="{
       'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3 border-n-weak':
         isActiveChat,
@@ -278,7 +278,7 @@ export default {
         :badge="inboxBadge"
         :username="currentContact.name"
         :status="currentContact.availability_status"
-        size="40px"
+        size="32px"
       />
     </div>
     <div
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 6434a168f..4a85e2a00 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -1,6 +1,5 @@
 <script>
 import { mapGetters } from 'vuex';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import BackButton from '../BackButton.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import InboxName from '../InboxName.vue';
@@ -29,11 +28,7 @@ export default {
   props: {
     chat: {
       type: Object,
-      default: () => {},
-    },
-    isContactPanelOpen: {
-      type: Boolean,
-      default: false,
+      default: () => ({}),
     },
     showBackButton: {
       type: Boolean,
@@ -44,15 +39,6 @@ export default {
       default: false,
     },
   },
-  emits: ['contactPanelToggle'],
-  setup(props, { emit }) {
-    const keyboardEvents = {
-      'Alt+KeyO': {
-        action: () => emit('contactPanelToggle'),
-      },
-    };
-    useKeyboardEvents(keyboardEvents);
-  },
   computed: {
     ...mapGetters({
       currentChat: 'getSelectedChat',
@@ -99,13 +85,6 @@ export default {
       }
       return this.$t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
     },
-    contactPanelToggleText() {
-      return `${
-        this.isContactPanelOpen
-          ? this.$t('CONVERSATION.HEADER.CLOSE')
-          : this.$t('CONVERSATION.HEADER.OPEN')
-      } ${this.$t('CONVERSATION.HEADER.DETAILS')}`;
-    },
     inbox() {
       const { inbox_id: inboxId } = this.chat;
       return this.$store.getters['inboxes/getInbox'](inboxId);
@@ -133,7 +112,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col items-center justify-between px-4 py-2 border-b bg-n-background border-n-weak md:flex-row"
+    class="flex flex-col items-center justify-between px-3 py-2 border-b bg-n-background border-n-weak md:flex-row h-12"
   >
     <div
       class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
@@ -150,6 +129,7 @@ export default {
           :badge="inboxBadge"
           :username="currentContact.name"
           :status="currentContact.availability_status"
+          size="32px"
         />
         <div
           class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
@@ -157,9 +137,9 @@ export default {
           <div
             class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
           >
-            <NextButton link slate @click.prevent="$emit('contactPanelToggle')">
+            <NextButton link slate>
               <span
-                class="text-base font-medium truncate leading-tight text-n-slate-12"
+                class="text-sm font-medium truncate leading-tight text-n-slate-12"
               >
                 {{ currentContact.name }}
               </span>
@@ -180,19 +160,11 @@ export default {
             <span v-if="isSnoozed" class="font-medium text-n-amber-10">
               {{ snoozedDisplayText }}
             </span>
-            <NextButton
-              link
-              xs
-              blue
-              :label="contactPanelToggleText"
-              @click="$emit('contactPanelToggle')"
-            />
           </div>
         </div>
       </div>
       <div
         class="flex flex-row items-center justify-end flex-grow gap-2 mt-3 header-actions-wrap lg:mt-0"
-        :class="{ 'justify-end': isContactPanelOpen }"
       >
         <SLACardLabel v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
         <Linear
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
index c91232cc5..31e8b09cf 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
@@ -1,11 +1,10 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import CopilotContainer from '../../copilot/CopilotContainer.vue';
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
-import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
-import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store';
 import { FEATURE_FLAGS } from '../../../featureFlags';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 const props = defineProps({
   currentChat: {
@@ -14,33 +13,8 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['toggleContactPanel']);
-
-const { t } = useI18n();
-
 const channelType = computed(() => props.currentChat?.meta?.channel || '');
 
-const CONTACT_TABS_OPTIONS = [
-  { key: 'CONTACT', value: 'contact' },
-  { key: 'COPILOT', value: 'copilot' },
-];
-
-const tabs = computed(() => {
-  return CONTACT_TABS_OPTIONS.map(tab => ({
-    label: t(`CONVERSATION.SIDEBAR.${tab.key}`),
-    value: tab.value,
-  }));
-});
-const activeTab = ref(0);
-const toggleContactPanel = () => {
-  emit('toggleContactPanel');
-};
-
-const handleTabChange = selectedTab => {
-  activeTab.value = tabs.value.findIndex(
-    tabItem => tabItem.value === selectedTab.value
-  );
-};
 const currentAccountId = useMapGetter('getCurrentAccountId');
 const isFeatureEnabledonAccount = useMapGetter(
   'accounts/isFeatureEnabledonAccount'
@@ -49,29 +23,37 @@ const isFeatureEnabledonAccount = useMapGetter(
 const showCopilotTab = computed(() =>
   isFeatureEnabledonAccount.value(currentAccountId.value, FEATURE_FLAGS.CAPTAIN)
 );
+
+const { uiSettings } = useUISettings();
+
+const activeTab = computed(() => {
+  const {
+    is_contact_sidebar_open: isContactSidebarOpen,
+    is_copilot_panel_open: isCopilotPanelOpen,
+  } = uiSettings.value;
+
+  if (isContactSidebarOpen) {
+    return 0;
+  }
+  if (isCopilotPanelOpen) {
+    return 1;
+  }
+  return null;
+});
 </script>
 
 <template>
   <div
     class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-80 min-w-80 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
   >
-    <div v-if="showCopilotTab" class="p-2">
-      <TabBar
-        :tabs="tabs"
-        :initial-active-tab="activeTab"
-        class="w-full [&>button]:w-full"
-        @tab-changed="handleTabChange"
-      />
-    </div>
     <div class="flex flex-1 overflow-auto">
       <ContactPanel
-        v-if="!activeTab"
+        v-show="activeTab === 0"
         :conversation-id="currentChat.id"
         :inbox-id="currentChat.inbox_id"
-        :on-toggle="toggleContactPanel"
       />
       <CopilotContainer
-        v-else-if="activeTab === 1 && showCopilotTab"
+        v-show="activeTab === 1 && showCopilotTab"
         :key="currentChat.id"
         :conversation-inbox-type="channelType"
         :conversation-id="currentChat.id"
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index e5e5da385..5f020d9ba 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -38,8 +38,6 @@ import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { FEATURE_FLAGS } from '../../../featureFlags';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 export default {
   components: {
     Message,
@@ -47,20 +45,8 @@ export default {
     ReplyBox,
     Banner,
     ConversationLabelSuggestion,
-    NextButton,
   },
   mixins: [inboxMixin],
-  props: {
-    isContactPanelOpen: {
-      type: Boolean,
-      default: false,
-    },
-    isInboxView: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['contactPanelToggle'],
   setup() {
     const isPopOutReplyBox = ref(false);
     const conversationPanelRef = ref(null);
@@ -203,12 +189,6 @@ export default {
     isATweet() {
       return this.conversationType === 'tweet';
     },
-    isRightOrLeftIcon() {
-      if (this.isContactPanelOpen) {
-        return 'arrow-chevron-right';
-      }
-      return 'arrow-chevron-left';
-    },
     getLastSeenAt() {
       const { contact_last_seen_at: contactLastSeenAt } = this.currentChat;
       return contactLastSeenAt;
@@ -444,9 +424,6 @@ export default {
         relevantMessages
       );
     },
-    onToggleContactPanel() {
-      this.$emit('contactPanelToggle');
-    },
     setScrollParams() {
       this.heightBeforeLoad = this.conversationPanel.scrollHeight;
       this.scrollTopBeforeLoad = this.conversationPanel.scrollTop;
@@ -530,19 +507,6 @@ export default {
       class="mx-2 mt-2 overflow-hidden rounded-lg"
       :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
     />
-    <div class="flex justify-end">
-      <NextButton
-        faded
-        xs
-        slate
-        class="!rounded-r-none rtl:rotate-180 !rounded-2xl !fixed z-10"
-        :icon="
-          isContactPanelOpen ? 'i-ph-caret-right-fill' : 'i-ph-caret-left-fill'
-        "
-        :class="isInboxView ? 'top-52 md:top-40' : 'top-32'"
-        @click="onToggleContactPanel"
-      />
-    </div>
     <NextMessageList
       v-if="showNextBubbles"
       ref="conversationPanelRef"
diff --git a/app/javascript/dashboard/i18n/locale/en/general.json b/app/javascript/dashboard/i18n/locale/en/general.json
index 78e97db90..129fb239a 100644
--- a/app/javascript/dashboard/i18n/locale/en/general.json
+++ b/app/javascript/dashboard/i18n/locale/en/general.json
@@ -4,6 +4,7 @@
     "PHONE_INPUT": {
       "PLACEHOLDER": "Search",
       "EMPTY_STATE": "No results found"
-    }
+    },
+    "CLOSE": "Close"
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 1e6479934..212d9219b 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -11,14 +11,14 @@ import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
 import ContactConversations from './ContactConversations.vue';
 import ConversationAction from './ConversationAction.vue';
 import ConversationParticipant from './ConversationParticipant.vue';
-
 import ContactInfo from './contact/ContactInfo.vue';
 import ContactNotes from './contact/ContactNotes.vue';
 import ConversationInfo from './ConversationInfo.vue';
 import CustomAttributes from './customAttributes/CustomAttributes.vue';
 import Draggable from 'vuedraggable';
 import MacrosList from './Macros/List.vue';
-import ShopifyOrdersList from '../../../components/widgets/conversation/ShopifyOrdersList.vue';
+import ShopifyOrdersList from 'dashboard/components/widgets/conversation/ShopifyOrdersList.vue';
+import SidebarActionsHeader from 'dashboard/components-next/SidebarActionsHeader.vue';
 
 const props = defineProps({
   conversationId: {
@@ -29,10 +29,6 @@ const props = defineProps({
     type: Number,
     default: undefined,
   },
-  onToggle: {
-    type: Function,
-    default: () => {},
-  },
 });
 
 const {
@@ -89,8 +85,6 @@ watch(conversationId, (newConversationId, prevConversationId) => {
 
 watch(contactId, getContactDetails);
 
-const onPanelToggle = props.onToggle;
-
 const onDragEnd = () => {
   dragging.value = false;
   updateUISettings({
@@ -98,6 +92,13 @@ const onDragEnd = () => {
   });
 };
 
+const closeContactPanel = () => {
+  updateUISettings({
+    is_contact_sidebar_open: false,
+    is_copilot_panel_open: false,
+  });
+};
+
 onMounted(() => {
   conversationSidebarItems.value = conversationSidebarItemsOrder.value;
   getContactDetails();
@@ -107,11 +108,11 @@ onMounted(() => {
 
 <template>
   <div class="w-full">
-    <ContactInfo
-      :contact="contact"
-      :channel-type="channelType"
-      @toggle-panel="onPanelToggle"
+    <SidebarActionsHeader
+      :title="$t('CONVERSATION.SIDEBAR.CONTACT')"
+      @close="closeContactPanel"
     />
+    <ContactInfo :contact="contact" :channel-type="channelType" />
     <div class="list-group pb-8">
       <Draggable
         :list="conversationSidebarItems"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index 4b86841f6..f18b55611 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -10,6 +10,8 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 import { emitter } from 'shared/helpers/mitt';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import SidepanelSwitch from 'dashboard/components-next/Conversation/SidepanelSwitch.vue';
+import ConversationSidebar from 'dashboard/components/widgets/conversation/ConversationSidebar.vue';
 
 export default {
   components: {
@@ -17,6 +19,8 @@ export default {
     ConversationBox,
     PopOverSearch,
     CmdBarConversationSnooze,
+    SidepanelSwitch,
+    ConversationSidebar,
   },
   beforeRouteLeave(to, from, next) {
     // Clear selected state if navigating away from a conversation to a route without a conversationId to prevent stale data issues
@@ -87,13 +91,17 @@ export default {
         this.uiSettings;
       return conversationDisplayType !== CONDENSED;
     },
-    isContactPanelOpen() {
-      if (this.currentChat.id) {
-        const { is_contact_sidebar_open: isContactSidebarOpen } =
-          this.uiSettings;
-        return isContactSidebarOpen;
+
+    shouldShowSidebar() {
+      if (!this.currentChat.id) {
+        return false;
       }
-      return false;
+
+      const {
+        is_contact_sidebar_open: isContactSidebarOpen,
+        is_copilot_panel_open: isCopilotPanelOpen,
+      } = this.uiSettings;
+      return isContactSidebarOpen || isCopilotPanelOpen;
     },
     showPopOverSearch() {
       return !this.isFeatureEnabledonAccount(
@@ -189,11 +197,6 @@ export default {
         this.$store.dispatch('clearSelectedState');
       }
     },
-    onToggleContactPanel() {
-      this.updateUISettings({
-        is_contact_sidebar_open: !this.isContactPanelOpen,
-      });
-    },
     onSearch() {
       this.showSearchModal = true;
     },
@@ -225,10 +228,11 @@ export default {
     <ConversationBox
       v-if="showMessageView"
       :inbox-id="inboxId"
-      :is-contact-panel-open="isContactPanelOpen"
       :is-on-expanded-layout="isOnExpandedLayout"
-      @contact-panel-toggle="onToggleContactPanel"
-    />
+    >
+      <SidepanelSwitch v-if="currentChat.id" />
+    </ConversationBox>
+    <ConversationSidebar v-if="shouldShowSidebar" :current-chat="currentChat" />
     <CmdBarConversationSnooze />
   </section>
 </template>

From 2ea10ae065935930a34e4ecb12f82b7ab6c8a572 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 29 May 2025 12:49:38 +0530
Subject: [PATCH 04/16] fix: Snackbar notifications hidden behind modal dialogs
 (#11616)

---
 .../dashboard/components/Snackbar.vue         |   4 +-
 .../components/SnackbarContainer.vue          | 108 ++++++++++--------
 2 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/app/javascript/dashboard/components/Snackbar.vue b/app/javascript/dashboard/components/Snackbar.vue
index 3a23a15ef..0404c4ba8 100644
--- a/app/javascript/dashboard/components/Snackbar.vue
+++ b/app/javascript/dashboard/components/Snackbar.vue
@@ -20,7 +20,7 @@ export default {
 <template>
   <div>
     <div
-      class="shadow-sm bg-slate-800 dark:bg-slate-700 rounded-[4px] items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
+      class="shadow-sm bg-n-slate-12 dark:bg-n-slate-7 rounded-lg items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
     >
       <div class="text-sm font-medium text-white dark:text-white">
         {{ message }}
@@ -29,7 +29,7 @@ export default {
         <router-link
           v-if="action.type == 'link'"
           :to="action.to"
-          class="font-medium cursor-pointer select-none text-woot-500 dark:text-woot-500 hover:text-woot-600 dark:hover:text-woot-600"
+          class="font-medium cursor-pointer select-none text-n-blue-10 hover:text-n-brand"
         >
           {{ action.message }}
         </router-link>
diff --git a/app/javascript/dashboard/components/SnackbarContainer.vue b/app/javascript/dashboard/components/SnackbarContainer.vue
index b55d3865c..8c0daebaf 100644
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/app/javascript/dashboard/components/SnackbarContainer.vue
@@ -1,62 +1,72 @@
-<script>
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
 import WootSnackbar from './Snackbar.vue';
 import { emitter } from 'shared/helpers/mitt';
+import { useI18n } from 'vue-i18n';
 
-export default {
-  components: {
-    WootSnackbar,
-  },
-  props: {
-    duration: {
-      type: Number,
-      default: 2500,
-    },
+const props = defineProps({
+  duration: {
+    type: Number,
+    default: 2500,
   },
+});
 
-  data() {
-    return {
-      snackMessages: [],
-    };
-  },
+const { t } = useI18n();
 
-  mounted() {
-    emitter.on('newToastMessage', this.onNewToastMessage);
-  },
-  unmounted() {
-    emitter.off('newToastMessage', this.onNewToastMessage);
-  },
-  methods: {
-    onNewToastMessage({ message: originalMessage, action }) {
-      // FIX ME: This is a temporary workaround to pass string from functions
-      // that doesn't have the context of the VueApp.
-      const usei18n = action?.usei18n;
-      const duration = action?.duration || this.duration;
-      const message = usei18n ? this.$t(originalMessage) : originalMessage;
+const snackMessages = ref([]);
+const snackbarContainer = ref(null);
 
-      this.snackMessages.push({
-        key: new Date().getTime(),
-        message,
-        action,
-      });
-      window.setTimeout(() => {
-        this.snackMessages.splice(0, 1);
-      }, duration);
-    },
-  },
+const showPopover = () => {
+  try {
+    const el = snackbarContainer.value;
+    if (el?.matches(':popover-open')) {
+      el.hidePopover();
+    }
+    el?.showPopover();
+  } catch (e) {
+    // ignore
+  }
 };
+
+const onNewToastMessage = ({ message: originalMessage, action }) => {
+  const message = action?.usei18n ? t(originalMessage) : originalMessage;
+  const duration = action?.duration || props.duration;
+
+  snackMessages.value.push({
+    key: Date.now(),
+    message,
+    action,
+  });
+
+  nextTick(showPopover);
+
+  setTimeout(() => {
+    snackMessages.value.shift();
+  }, duration);
+};
+
+onMounted(() => {
+  emitter.on('newToastMessage', onNewToastMessage);
+});
+
+onUnmounted(() => {
+  emitter.off('newToastMessage', onNewToastMessage);
+});
 </script>
 
 <template>
-  <transition-group
-    name="toast-fade"
-    tag="div"
-    class="left-0 my-0 mx-auto max-w-[25rem] overflow-hidden absolute right-0 text-center top-4 z-[9999]"
+  <div
+    ref="snackbarContainer"
+    popover="manual"
+    class="fixed top-4 left-1/2 -translate-x-1/2 max-w-[25rem] w-[calc(100%-2rem)] text-center bg-transparent border-0 p-0 m-0 outline-none overflow-visible"
   >
-    <WootSnackbar
-      v-for="snackMessage in snackMessages"
-      :key="snackMessage.key"
-      :message="snackMessage.message"
-      :action="snackMessage.action"
-    />
-  </transition-group>
+    <transition-group name="toast-fade" tag="div">
+      <WootSnackbar
+        v-for="snackMessage in snackMessages"
+        :key="snackMessage.key"
+        :message="snackMessage.message"
+        :action="snackMessage.action"
+      />
+    </transition-group>
+  </div>
 </template>

From fdd35ff549ad1bc6f888e97f182b9815ed75f140 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Thu, 29 May 2025 01:45:00 -0600
Subject: [PATCH 05/16] chore: Update Codespaces (#11621)

- Fix issues with the current Chatwoot development codespaces
- Switch from webpacket to vite
- Add additional configs to make the development easier with codespaces
- toggles v4 feature true as default
---
 .devcontainer/Dockerfile                      |  12 +-
 .devcontainer/Dockerfile.base                 | 107 +++++++++++-------
 .devcontainer/devcontainer.json               |   8 +-
 .devcontainer/docker-compose.base.yml         |  18 +++
 .devcontainer/docker-compose.yml              |  13 ---
 .devcontainer/scripts/setup.sh                |   9 +-
 .github/workflows/publish_codespace_image.yml |   3 +-
 config/environments/development.rb            |   9 ++
 config/features.yml                           |   2 +-
 9 files changed, 111 insertions(+), 70 deletions(-)
 create mode 100644 .devcontainer/docker-compose.base.yml

diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
index 3fd4f1a31..9e8c36fdb 100644
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@@ -4,5 +4,15 @@ FROM ghcr.io/chatwoot/chatwoot_codespace:latest
 
 # Do the set up required for chatwoot app
 WORKDIR /workspace
+
+# Copy dependency files first for better caching
+COPY package.json pnpm-lock.yaml ./
+COPY Gemfile Gemfile.lock ./
+
+# Install dependencies (will be cached if files don't change)
+RUN pnpm install --frozen-lockfile && \
+    gem install bundler && \
+    bundle install --jobs=$(nproc)
+
+# Copy source code after dependencies are installed
 COPY . /workspace
-RUN yarn && gem install bundler && bundle install
diff --git a/.devcontainer/Dockerfile.base b/.devcontainer/Dockerfile.base
index fe31dc42e..2b74602b8 100644
--- a/.devcontainer/Dockerfile.base
+++ b/.devcontainer/Dockerfile.base
@@ -1,12 +1,16 @@
-
-ARG VARIANT
+ARG VARIANT="ubuntu-22.04"
 
 FROM mcr.microsoft.com/vscode/devcontainers/base:0-${VARIANT}
 
+ENV DEBIAN_FRONTEND=noninteractive
+
 ARG NODE_VERSION
 ARG RUBY_VERSION
 ARG USER_UID
 ARG USER_GID
+ARG PNPM_VERSION="10.2.0"
+ENV PNPM_VERSION ${PNPM_VERSION}
+ENV RUBY_CONFIGURE_OPTS=--disable-install-doc
 
 # Update args in docker-compose.yaml to set the UID/GID of the "vscode" user.
 RUN if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
@@ -15,61 +19,80 @@ RUN if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
         && chmod -R $USER_UID:$USER_GID /home/vscode; \
     fi
 
-RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-  && apt-get -y install --no-install-recommends \
-    build-essential \
-    libssl-dev \
-    zlib1g-dev \
-    gnupg2 \
-    tar \
-    tzdata \
-    postgresql-client \
-    libpq-dev \
-    yarn \
-    git \
-    imagemagick \
-    tmux \
-    zsh \
-    git-flow \
-    npm \
-    libyaml-dev
+RUN NODE_MAJOR=$(echo $NODE_VERSION | cut -d. -f1) \
+    && curl -fsSL https://deb.nodesource.com/setup_${NODE_MAJOR}.x | bash - \
+    && apt-get update \
+    && apt-get -y install --no-install-recommends \
+        build-essential \
+        libssl-dev \
+        zlib1g-dev \
+        gnupg \
+        tar \
+        tzdata \
+        postgresql-client \
+        libpq-dev \
+        git \
+        imagemagick \
+        libyaml-dev \
+        curl \
+        ca-certificates \
+        tmux \
+        nodejs \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 
-# Install rbenv and ruby
-RUN git clone https://github.com/rbenv/rbenv.git ~/.rbenv \
+# Install rbenv and ruby for root user first
+RUN git clone --depth 1 https://github.com/rbenv/rbenv.git ~/.rbenv \
     &&  echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc \
     &&  echo 'eval "$(rbenv init -)"' >> ~/.bashrc
 ENV PATH "/root/.rbenv/bin/:/root/.rbenv/shims/:$PATH"
-RUN git clone https://github.com/rbenv/ruby-build.git && \
+RUN git clone --depth 1 https://github.com/rbenv/ruby-build.git && \
     PREFIX=/usr/local ./ruby-build/install.sh
 
 RUN rbenv install $RUBY_VERSION && \
     rbenv global $RUBY_VERSION && \
     rbenv versions
 
-# Install overmind
+# Set up rbenv for vscode user
+RUN su - vscode -c "git clone --depth 1 https://github.com/rbenv/rbenv.git ~/.rbenv" \
+    && su - vscode -c "echo 'export PATH=\"\$HOME/.rbenv/bin:\$PATH\"' >> ~/.bashrc" \
+    && su - vscode -c "echo 'eval \"\$(rbenv init -)\"' >> ~/.bashrc" \
+    && su - vscode -c "PATH=\"/home/vscode/.rbenv/bin:\$PATH\" rbenv install $RUBY_VERSION" \
+    && su - vscode -c "PATH=\"/home/vscode/.rbenv/bin:\$PATH\" rbenv global $RUBY_VERSION"
+
+# Install overmind and gh in single layer
 RUN curl -L https://github.com/DarthSim/overmind/releases/download/v2.1.0/overmind-v2.1.0-linux-amd64.gz > overmind.gz \
   && gunzip overmind.gz \
-  && sudo mv overmind /usr/local/bin \
-  && chmod +x /usr/local/bin/overmind
-
-
-# Install gh
-RUN curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \
-   && echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null \
-   && sudo apt update \
-   && sudo apt install gh
+  && mv overmind /usr/local/bin \
+  && chmod +x /usr/local/bin/overmind \
+  && curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \
+  && echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | tee /etc/apt/sources.list.d/github-cli.list > /dev/null \
+  && apt-get update \
+  && apt-get install -y --no-install-recommends gh \
+  && apt-get clean \
+  && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 
 
 # Do the set up required for chatwoot app
 WORKDIR /workspace
-COPY . /workspace
+RUN chown vscode:vscode /workspace
 
-# set up ruby
-COPY Gemfile Gemfile.lock ./
-RUN gem install bundler && bundle install
+# set up node js and pnpm in single layer
+RUN npm install -g pnpm@${PNPM_VERSION} \
+    && npm cache clean --force
 
-# set up node js
-RUN npm install n -g && \
-    n $NODE_VERSION
-RUN npm install --global yarn
-RUN yarn
+# Switch to vscode user
+USER vscode
+ENV PATH="/home/vscode/.rbenv/bin:/home/vscode/.rbenv/shims:$PATH"
+
+# Copy dependency files first for better caching
+COPY --chown=vscode:vscode Gemfile Gemfile.lock package.json pnpm-lock.yaml ./
+
+# Install dependencies as vscode user
+RUN eval "$(rbenv init -)" \
+    && gem install bundler -N \
+    && bundle install --jobs=$(nproc) \
+    && pnpm install --frozen-lockfile
+
+# Copy source code after dependencies are installed
+COPY --chown=vscode:vscode . /workspace
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index d2dac356b..c51338b51 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -23,15 +23,15 @@
   // 5432 postgres
   // 6379 redis
   // 1025,8025 mailhog
-  "forwardPorts": [8025, 3000, 3035],
+  "forwardPorts": [8025, 3000, 3036],
 
-  "postCreateCommand": ".devcontainer/scripts/setup.sh && POSTGRES_STATEMENT_TIMEOUT=600s bundle exec rake db:chatwoot_prepare && yarn",
+  "postCreateCommand": ".devcontainer/scripts/setup.sh && POSTGRES_STATEMENT_TIMEOUT=600s bundle exec rake db:chatwoot_prepare && pnpm install",
   "portsAttributes": {
     "3000": {
       "label": "Rails Server"
     },
-    "3035": {
-      "label": "Webpack Dev Server"
+    "3036": {
+      "label": "Vite Dev Server"
     },
     "8025": {
       "label": "Mailhog UI"
diff --git a/.devcontainer/docker-compose.base.yml b/.devcontainer/docker-compose.base.yml
new file mode 100644
index 000000000..6932b5f10
--- /dev/null
+++ b/.devcontainer/docker-compose.base.yml
@@ -0,0 +1,18 @@
+# Docker Compose file for building the base image in GitHub Actions
+# Usage: docker-compose -f .devcontainer/docker-compose.base.yml build base
+
+version: '3'
+
+services:
+  base:
+    build:
+      context: ..
+      dockerfile: .devcontainer/Dockerfile.base
+      args:
+        VARIANT: 'ubuntu-22.04'
+        NODE_VERSION: '23.7.0'
+        RUBY_VERSION: '3.4.4'
+        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
+        USER_UID: '1000'
+        USER_GID: '1000'
+    image: ghcr.io/chatwoot/chatwoot_codespace:latest
diff --git a/.devcontainer/docker-compose.yml b/.devcontainer/docker-compose.yml
index 21a9fe909..a9185ea09 100644
--- a/.devcontainer/docker-compose.yml
+++ b/.devcontainer/docker-compose.yml
@@ -5,19 +5,6 @@
 version: '3'
 
 services:
-  base:
-    build:
-      context: ..
-      dockerfile: .devcontainer/Dockerfile.base
-      args:
-        VARIANT: 'ubuntu-22.04'
-        NODE_VERSION: '23.7.0'
-        RUBY_VERSION: '3.4.4'
-        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
-        USER_UID: '1000'
-        USER_GID: '1000'
-    image: base:latest
-
   app:
     build:
       context: ..
diff --git a/.devcontainer/scripts/setup.sh b/.devcontainer/scripts/setup.sh
index 4ffee2d3a..6beb2ff57 100755
--- a/.devcontainer/scripts/setup.sh
+++ b/.devcontainer/scripts/setup.sh
@@ -2,12 +2,7 @@ cp .env.example .env
 sed -i -e '/REDIS_URL/ s/=.*/=redis:\/\/localhost:6379/' .env
 sed -i -e '/POSTGRES_HOST/ s/=.*/=localhost/' .env
 sed -i -e '/SMTP_ADDRESS/ s/=.*/=localhost/' .env
-sed -i -e "/FRONTEND_URL/ s/=.*/=https:\/\/$CODESPACE_NAME-3000.githubpreview.dev/" .env
-sed -i -e "/WEBPACKER_DEV_SERVER_PUBLIC/ s/=.*/=https:\/\/$CODESPACE_NAME-3035.githubpreview.dev/" .env
-# uncomment the webpacker env variable
-sed -i -e '/WEBPACKER_DEV_SERVER_PUBLIC/s/^# //' .env
-# fix the error with webpacker
-echo 'export NODE_OPTIONS=--openssl-legacy-provider' >> ~/.zshrc
+sed -i -e "/FRONTEND_URL/ s/=.*/=https:\/\/$CODESPACE_NAME-3000.app.github.dev/" .env
 
 # codespaces make the ports public
-gh codespace ports visibility 3000:public 3035:public 8025:public -c $CODESPACE_NAME
+gh codespace ports visibility 3000:public 3036:public 8025:public -c $CODESPACE_NAME
diff --git a/.github/workflows/publish_codespace_image.yml b/.github/workflows/publish_codespace_image.yml
index 647608473..5da4fda05 100644
--- a/.github/workflows/publish_codespace_image.yml
+++ b/.github/workflows/publish_codespace_image.yml
@@ -19,6 +19,5 @@ jobs:
 
     - name: Build the Codespace Base Image
       run: |
-        docker-compose -f .devcontainer/docker-compose.yml build base
-        docker tag base:latest ghcr.io/chatwoot/chatwoot_codespace:latest
+        docker compose -f .devcontainer/docker-compose.base.yml build base
         docker push ghcr.io/chatwoot/chatwoot_codespace:latest
diff --git a/config/environments/development.rb b/config/environments/development.rb
index 557000065..7f72e6d2f 100644
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@@ -62,6 +62,15 @@ Rails.application.configure do
 
   # Disable host check during development
   config.hosts = nil
+  
+  # GitHub Codespaces configuration
+  if ENV['CODESPACES']
+    # Allow web console access from any IP
+    config.web_console.whitelisted_ips = %w(0.0.0.0/0 ::/0)
+    # Allow CSRF from codespace URLs
+    config.force_ssl = false
+    config.action_controller.forgery_protection_origin_check = false
+  end
 
   # customize using the environment variables
   config.log_level = ENV.fetch('LOG_LEVEL', 'debug').to_sym
diff --git a/config/features.yml b/config/features.yml
index eacbd0a72..131456c72 100644
--- a/config/features.yml
+++ b/config/features.yml
@@ -146,7 +146,7 @@
   premium: true
 - name: chatwoot_v4
   display_name: Chatwoot V4
-  enabled: false
+  enabled: true
 - name: report_v4
   display_name: Report V4
   enabled: true

From a0cc27faaf61f8800a890dd476a3b3d8d2011ef5 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 29 May 2025 14:19:35 +0530
Subject: [PATCH 06/16] feat: show articles in the list only if feature is
 enabled (#11607)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../dashboard/composables/usePolicy.js        |  1 +
 .../modules/search/components/SearchView.vue  | 82 +++++++++++--------
 2 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/app/javascript/dashboard/composables/usePolicy.js b/app/javascript/dashboard/composables/usePolicy.js
index dc203cbac..a76ffbf1d 100644
--- a/app/javascript/dashboard/composables/usePolicy.js
+++ b/app/javascript/dashboard/composables/usePolicy.js
@@ -129,6 +129,7 @@ export function usePolicy() {
   return {
     checkPermissions,
     shouldShowPaywall,
+    isFeatureFlagEnabled,
     shouldShow,
   };
 }
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index bd48a3078..49efca67b 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -10,10 +10,8 @@ import {
   CONTACT_PERMISSIONS,
   PORTAL_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
-import {
-  getUserPermissions,
-  filterItemsByPermission,
-} from 'dashboard/helper/permissionsHelper.js';
+import { usePolicy } from 'dashboard/composables/usePolicy';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
 import Policy from 'dashboard/components/policy.vue';
@@ -39,8 +37,6 @@ const pages = ref({
   articles: 1,
 });
 
-const currentUser = useMapGetter('getCurrentUser');
-const currentAccountId = useMapGetter('getCurrentAccountId');
 const contactRecords = useMapGetter('conversationSearch/getContactRecords');
 const conversationRecords = useMapGetter(
   'conversationSearch/getConversationRecords'
@@ -83,9 +79,7 @@ const filterConversations = filterByTab('conversations');
 const filterMessages = filterByTab('messages');
 const filterArticles = filterByTab('articles');
 
-const userPermissions = computed(() =>
-  getUserPermissions(currentUser.value, currentAccountId.value)
-);
+const { shouldShow, isFeatureFlagEnabled } = usePolicy();
 
 const TABS_CONFIG = {
   all: {
@@ -111,47 +105,67 @@ const TABS_CONFIG = {
   },
   articles: {
     permissions: [...ROLES, PORTAL_PERMISSIONS],
+    featureFlag: FEATURE_FLAGS.HELP_CENTER,
     count: () => mappedArticles.value.length,
   },
 };
 
 const tabs = computed(() => {
-  const configs = Object.entries(TABS_CONFIG).map(([key, config]) => ({
-    key,
-    name: t(`SEARCH.TABS.${key.toUpperCase()}`),
-    count: config.count(),
-    showBadge: key !== 'all',
-    permissions: config.permissions,
-  }));
-
-  return filterItemsByPermission(
-    configs,
-    userPermissions.value,
-    item => item.permissions
-  );
+  return Object.entries(TABS_CONFIG)
+    .map(([key, config]) => ({
+      key,
+      name: t(`SEARCH.TABS.${key.toUpperCase()}`),
+      count: config.count(),
+      showBadge: key !== 'all',
+      permissions: config.permissions,
+      featureFlag: config.featureFlag,
+    }))
+    .filter(config => {
+      // why the double check, glad you asked.
+      // Some features are marked as premium features, that means
+      // the feature will be visible, but a Paywall will be shown instead
+      // this works for pages and routes, but fails for UI elements like search here
+      // so we explicitly check if the feature is enabled
+      return (
+        shouldShow(config.featureFlag, config.permissions, null) &&
+        isFeatureFlagEnabled(config.featureFlag)
+      );
+    });
 });
 
 const totalSearchResultsCount = computed(() => {
-  const permissionCounts = {
-    contacts: {
+  const permissionCounts = [
+    {
       permissions: [...ROLES, CONTACT_PERMISSIONS],
       count: () => contacts.value.length,
     },
-    conversations: {
+    {
       permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
       count: () => conversations.value.length + messages.value.length,
     },
-    articles: {
+    {
       permissions: [...ROLES, PORTAL_PERMISSIONS],
+      featureFlag: FEATURE_FLAGS.HELP_CENTER,
       count: () => articles.value.length,
     },
-  };
-  return filterItemsByPermission(
-    permissionCounts,
-    userPermissions.value,
-    item => item.permissions,
-    (_, item) => item.count
-  ).reduce((total, count) => total + count(), 0);
+  ];
+
+  return permissionCounts
+    .filter(config => {
+      // why the double check, glad you asked.
+      // Some features are marked as premium features, that means
+      // the feature will be visible, but a Paywall will be shown instead
+      // this works for pages and routes, but fails for UI elements like search here
+      // so we explicitly check if the feature is enabled
+      return (
+        shouldShow(config.featureFlag, config.permissions, null) &&
+        isFeatureFlagEnabled(config.featureFlag)
+      );
+    })
+    .map(config => {
+      return config.count();
+    })
+    .reduce((sum, count) => sum + count, 0);
 });
 
 const activeTabIndex = computed(() => {
@@ -355,7 +369,9 @@ onUnmounted(() => {
             </Policy>
 
             <Policy
+              v-if="isFeatureFlagEnabled(FEATURE_FLAGS.HELP_CENTER)"
               :permissions="[...ROLES, PORTAL_PERMISSIONS]"
+              :feature-flag="FEATURE_FLAGS.HELP_CENTER"
               class="flex flex-col justify-center"
             >
               <SearchResultArticlesList

From 873cfa08d82c60550294a64deb458be4d5ca7936 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Thu, 29 May 2025 03:12:13 -0600
Subject: [PATCH 07/16] feat: Ability to reset api_access_token (#11565)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
---
 .../api/v1/accounts/agent_bots_controller.rb  |  5 +
 app/controllers/api/v1/profiles_controller.rb |  5 +
 app/javascript/dashboard/api/agentBots.js     |  4 +
 app/javascript/dashboard/api/auth.js          |  4 +
 app/javascript/dashboard/api/endPoints.js     |  3 +
 .../dashboard/api/specs/agentBots.spec.js     |  1 +
 .../button/ConfirmButton.story.vue            | 41 ++++++++
 .../components-next/button/ConfirmButton.vue  | 99 +++++++++++++++++++
 .../dashboard/i18n/locale/en/agentBots.json   |  4 +-
 .../dashboard/i18n/locale/en/settings.json    |  7 +-
 .../agentBots/components/AgentBotModal.vue    | 28 +++++-
 .../settings/profile/AccessToken.vue          | 54 ++++++----
 .../dashboard/settings/profile/Index.vue      | 14 ++-
 .../dashboard/store/modules/agentBots.js      | 11 +++
 .../dashboard/store/modules/auth.js           | 10 ++
 .../modules/specs/agentBots/agentBots.spec.js | 17 ++++
 .../store/modules/specs/auth/actions.spec.js  | 16 +++
 app/policies/agent_bot_policy.rb              |  4 +
 .../reset_access_token.json.jbuilder          |  1 +
 .../profiles/reset_access_token.json.jbuilder |  1 +
 config/routes.rb                              |  2 +
 .../v1/accounts/agent_bots_controller_spec.rb | 51 ++++++++++
 .../api/v1/profiles_controller_spec.rb        | 28 ++++++
 23 files changed, 388 insertions(+), 22 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/button/ConfirmButton.story.vue
 create mode 100644 app/javascript/dashboard/components-next/button/ConfirmButton.vue
 create mode 100644 app/views/api/v1/accounts/agent_bots/reset_access_token.json.jbuilder
 create mode 100644 app/views/api/v1/profiles/reset_access_token.json.jbuilder

diff --git a/app/controllers/api/v1/accounts/agent_bots_controller.rb b/app/controllers/api/v1/accounts/agent_bots_controller.rb
index 1422beea1..64c35d33d 100644
--- a/app/controllers/api/v1/accounts/agent_bots_controller.rb
+++ b/app/controllers/api/v1/accounts/agent_bots_controller.rb
@@ -29,6 +29,11 @@ class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
     head :ok
   end
 
+  def reset_access_token
+    @agent_bot.access_token.regenerate_token
+    @agent_bot.reload
+  end
+
   private
 
   def agent_bot
diff --git a/app/controllers/api/v1/profiles_controller.rb b/app/controllers/api/v1/profiles_controller.rb
index ae1a1fe30..141253d0d 100644
--- a/app/controllers/api/v1/profiles_controller.rb
+++ b/app/controllers/api/v1/profiles_controller.rb
@@ -38,6 +38,11 @@ class Api::V1::ProfilesController < Api::BaseController
     head :ok
   end
 
+  def reset_access_token
+    @user.access_token.regenerate_token
+    @user.reload
+  end
+
   private
 
   def set_user
diff --git a/app/javascript/dashboard/api/agentBots.js b/app/javascript/dashboard/api/agentBots.js
index 6e59f38d3..de887f415 100644
--- a/app/javascript/dashboard/api/agentBots.js
+++ b/app/javascript/dashboard/api/agentBots.js
@@ -21,6 +21,10 @@ class AgentBotsAPI extends ApiClient {
   deleteAgentBotAvatar(botId) {
     return axios.delete(`${this.url}/${botId}/avatar`);
   }
+
+  resetAccessToken(botId) {
+    return axios.post(`${this.url}/${botId}/reset_access_token`);
+  }
 }
 
 export default new AgentBotsAPI();
diff --git a/app/javascript/dashboard/api/auth.js b/app/javascript/dashboard/api/auth.js
index dde817866..75e7e2953 100644
--- a/app/javascript/dashboard/api/auth.js
+++ b/app/javascript/dashboard/api/auth.js
@@ -102,4 +102,8 @@ export default {
     const urlData = endPoints('resendConfirmation');
     return axios.post(urlData.url);
   },
+  resetAccessToken() {
+    const urlData = endPoints('resetAccessToken');
+    return axios.post(urlData.url);
+  },
 };
diff --git a/app/javascript/dashboard/api/endPoints.js b/app/javascript/dashboard/api/endPoints.js
index 31337b7fc..5409aac60 100644
--- a/app/javascript/dashboard/api/endPoints.js
+++ b/app/javascript/dashboard/api/endPoints.js
@@ -51,6 +51,9 @@ const endPoints = {
   resendConfirmation: {
     url: '/api/v1/profile/resend_confirmation',
   },
+  resetAccessToken: {
+    url: '/api/v1/profile/reset_access_token',
+  },
 };
 
 export default page => {
diff --git a/app/javascript/dashboard/api/specs/agentBots.spec.js b/app/javascript/dashboard/api/specs/agentBots.spec.js
index c89dbfdf5..bf57804c0 100644
--- a/app/javascript/dashboard/api/specs/agentBots.spec.js
+++ b/app/javascript/dashboard/api/specs/agentBots.spec.js
@@ -9,5 +9,6 @@ describe('#AgentBotsAPI', () => {
     expect(AgentBotsAPI).toHaveProperty('create');
     expect(AgentBotsAPI).toHaveProperty('update');
     expect(AgentBotsAPI).toHaveProperty('delete');
+    expect(AgentBotsAPI).toHaveProperty('resetAccessToken');
   });
 });
diff --git a/app/javascript/dashboard/components-next/button/ConfirmButton.story.vue b/app/javascript/dashboard/components-next/button/ConfirmButton.story.vue
new file mode 100644
index 000000000..673661a74
--- /dev/null
+++ b/app/javascript/dashboard/components-next/button/ConfirmButton.story.vue
@@ -0,0 +1,41 @@
+<script setup>
+import ConfirmButton from './ConfirmButton.vue';
+import { ref } from 'vue';
+
+const count = ref(0);
+
+const incrementCount = () => {
+  count.value += 1;
+};
+</script>
+
+<template>
+  <Story
+    title="Components/ConfirmButton"
+    :layout="{ type: 'grid', width: '400px' }"
+  >
+    <Variant title="Basic">
+      <div class="grid gap-2 p-4 bg-white dark:bg-slate-900">
+        <p>{{ count }}</p>
+        <ConfirmButton
+          label="Delete"
+          confirm-label="Confirm?"
+          @click="incrementCount"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Color Change">
+      <div class="grid gap-2 p-4 bg-white dark:bg-slate-900">
+        <p>{{ count }}</p>
+        <ConfirmButton
+          label="Archive"
+          confirm-label="Confirm?"
+          color="slate"
+          confirm-color="amber"
+          @click="incrementCount"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/button/ConfirmButton.vue b/app/javascript/dashboard/components-next/button/ConfirmButton.vue
new file mode 100644
index 000000000..854d5d452
--- /dev/null
+++ b/app/javascript/dashboard/components-next/button/ConfirmButton.vue
@@ -0,0 +1,99 @@
+<script setup>
+import { ref, computed } from 'vue';
+import Button from './Button.vue';
+
+const props = defineProps({
+  label: { type: [String, Number], default: '' },
+  confirmLabel: { type: [String, Number], default: '' },
+  color: { type: String, default: 'blue' },
+  confirmColor: { type: String, default: 'ruby' },
+  confirmHint: { type: String, default: '' },
+  variant: { type: String, default: null },
+  size: { type: String, default: null },
+  justify: { type: String, default: null },
+  icon: { type: [String, Object, Function], default: '' },
+  trailingIcon: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['click']);
+
+const isConfirmMode = ref(false);
+const isClicked = ref(false);
+
+const currentLabel = computed(() => {
+  return isConfirmMode.value ? props.confirmLabel : props.label;
+});
+
+const currentColor = computed(() => {
+  return isConfirmMode.value ? props.confirmColor : props.color;
+});
+const resetConfirmMode = () => {
+  isConfirmMode.value = false;
+  isClicked.value = false;
+};
+
+const handleClick = () => {
+  if (!isConfirmMode.value) {
+    isConfirmMode.value = true;
+  } else {
+    isClicked.value = true;
+    emit('click');
+    setTimeout(resetConfirmMode, 400);
+  }
+};
+</script>
+
+<template>
+  <div
+    class="relative"
+    :class="{
+      'animate-bounce-complete': isClicked,
+    }"
+  >
+    <Button
+      type="button"
+      :label="currentLabel"
+      :color="currentColor"
+      :variant="variant"
+      :size="size"
+      :justify="justify"
+      :icon="icon"
+      :trailing-icon="trailingIcon"
+      :is-loading="isLoading"
+      @click="handleClick"
+      @blur="resetConfirmMode"
+    >
+      <template v-if="$slots.default" #default>
+        <slot />
+      </template>
+      <template v-if="$slots.icon" #icon>
+        <slot name="icon" />
+      </template>
+    </Button>
+    <div
+      v-if="isConfirmMode && confirmHint"
+      class="absolute mt-1 w-full text-[10px] text-center text-n-slate-10"
+    >
+      {{ confirmHint }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes bounce-complete {
+  0% {
+    transform: scale(0.95);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.animate-bounce-complete {
+  animation: bounce-complete 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+</style>
diff --git a/app/javascript/dashboard/i18n/locale/en/agentBots.json b/app/javascript/dashboard/i18n/locale/en/agentBots.json
index 194cfb999..d3a0bb991 100644
--- a/app/javascript/dashboard/i18n/locale/en/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/en/agentBots.json
@@ -62,7 +62,9 @@
     "ACCESS_TOKEN": {
       "TITLE": "Access Token",
       "DESCRIPTION": "Copy the access token and save it securely",
-      "COPY_SUCCESSFUL": "Access token copied to clipboard"
+      "COPY_SUCCESSFUL": "Access token copied to clipboard",
+      "RESET_SUCCESS": "Access token regenerated successfully",
+      "RESET_ERROR": "Unable to regenerate access token. Please try again"
     },
     "FORM": {
       "AVATAR": {
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index daced76dd..81b9c8a78 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -76,7 +76,12 @@
       "ACCESS_TOKEN": {
         "TITLE": "Access Token",
         "NOTE": "This token can be used if you are building an API based integration",
-        "COPY": "Copy"
+        "COPY": "Copy",
+        "RESET": "Reset",
+        "CONFIRM_RESET": "Are you sure?",
+        "CONFIRM_HINT": "Click again to confirm",
+        "RESET_SUCCESS": "Access token regenerated successfully",
+        "RESET_ERROR": "Unable to regenerate access token. Please try again"
       },
       "AUDIO_NOTIFICATIONS_SECTION": {
         "TITLE": "Audio Alerts",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotModal.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotModal.vue
index 97629992a..be4deb337 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotModal.vue
@@ -228,7 +228,20 @@ const initializeForm = () => {
 
 const onCopyToken = async value => {
   await copyTextToClipboard(value);
-  useAlert(t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+  useAlert(t('AGENT_BOTS.ACCESS_TOKEN.COPY_SUCCESSFUL'));
+};
+
+const onResetToken = async () => {
+  const response = await store.dispatch(
+    'agentBots/resetAccessToken',
+    props.selectedBot.id
+  );
+  if (response) {
+    accessToken.value = response.access_token;
+    useAlert(t('AGENT_BOTS.ACCESS_TOKEN.RESET_SUCCESS'));
+  } else {
+    useAlert(t('AGENT_BOTS.ACCESS_TOKEN.RESET_ERROR'));
+  }
 };
 
 const closeModal = () => {
@@ -312,7 +325,18 @@ defineExpose({ dialogRef });
         >
           {{ $t('AGENT_BOTS.ACCESS_TOKEN.TITLE') }}
         </label>
-        <AccessToken :value="accessToken" @on-copy="onCopyToken" />
+        <AccessToken
+          v-if="type === MODAL_TYPES.EDIT"
+          :value="accessToken"
+          @on-copy="onCopyToken"
+          @on-reset="onResetToken"
+        />
+        <AccessToken
+          v-else
+          :value="accessToken"
+          :show-reset-button="false"
+          @on-copy="onCopyToken"
+        />
       </div>
 
       <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
index abf547b69..5b0b43fac 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
@@ -1,14 +1,17 @@
 <script setup>
 import { ref, computed } from 'vue';
-import FormButton from 'v3/components/Form/Button.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import ConfirmButton from 'dashboard/components-next/button/ConfirmButton.vue';
+
 const props = defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
+  value: { type: String, default: '' },
+  showResetButton: { type: Boolean, default: true },
 });
-const emit = defineEmits(['onCopy']);
+
+const emit = defineEmits(['onCopy', 'onReset']);
+
 const inputType = ref('password');
+
 const toggleMasked = () => {
   inputType.value = inputType.value === 'password' ? 'text' : 'password';
 };
@@ -20,6 +23,10 @@ const maskIcon = computed(() => {
 const onClick = () => {
   emit('onCopy', props.value);
 };
+
+const onReset = () => {
+  emit('onReset');
+};
 </script>
 
 <template>
@@ -38,7 +45,7 @@ const onClick = () => {
     >
       <template #masked>
         <button
-          class="absolute top-1.5 ltr:right-0.5 rtl:left-0.5"
+          class="absolute top-0 bottom-0 ltr:right-0.5 rtl:left-0.5"
           type="button"
           @click="toggleMasked"
         >
@@ -46,15 +53,28 @@ const onClick = () => {
         </button>
       </template>
     </woot-input>
-    <FormButton
-      type="button"
-      size="large"
-      icon="text-copy"
-      variant="outline"
-      color-scheme="secondary"
-      @click="onClick"
-    >
-      {{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.COPY') }}
-    </FormButton>
+    <div class="flex flex-row gap-2">
+      <NextButton
+        :label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.COPY')"
+        slate
+        outline
+        type="button"
+        icon="i-lucide-copy"
+        class="rounded-xl"
+        @click="onClick"
+      />
+      <ConfirmButton
+        v-if="showResetButton"
+        :label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET')"
+        :confirm-label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_RESET')"
+        :confirm-hint="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_HINT')"
+        color="slate"
+        confirm-color="ruby"
+        variant="outline"
+        icon="i-lucide-key-round"
+        class="rounded-xl"
+        @click="onReset"
+      />
+    </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index 45a060e05..eedcd21f1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -181,6 +181,14 @@ export default {
       await copyTextToClipboard(value);
       useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
     },
+    async resetAccessToken() {
+      const success = await this.$store.dispatch('resetAccessToken');
+      if (success) {
+        useAlert(this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET_SUCCESS'));
+      } else {
+        useAlert(this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET_ERROR'));
+      }
+    },
   },
 };
 </script>
@@ -281,7 +289,11 @@ export default {
         )
       "
     >
-      <AccessToken :value="currentUser.access_token" @on-copy="onCopyToken" />
+      <AccessToken
+        :value="currentUser.access_token"
+        @on-copy="onCopyToken"
+        @on-reset="resetAccessToken"
+      />
     </FormSection>
   </div>
 </template>
diff --git a/app/javascript/dashboard/store/modules/agentBots.js b/app/javascript/dashboard/store/modules/agentBots.js
index 3e9931057..bd7bff5f0 100644
--- a/app/javascript/dashboard/store/modules/agentBots.js
+++ b/app/javascript/dashboard/store/modules/agentBots.js
@@ -172,6 +172,17 @@ export const actions = {
       commit(types.SET_AGENT_BOT_UI_FLAG, { isDisconnecting: false });
     }
   },
+
+  resetAccessToken: async ({ commit }, botId) => {
+    try {
+      const response = await AgentBotsAPI.resetAccessToken(botId);
+      commit(types.EDIT_AGENT_BOT, response.data);
+      return response.data;
+    } catch (error) {
+      throwErrorMessage(error);
+      return null;
+    }
+  },
 };
 
 export const mutations = {
diff --git a/app/javascript/dashboard/store/modules/auth.js b/app/javascript/dashboard/store/modules/auth.js
index b790b2a80..f329fb009 100644
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@@ -213,6 +213,16 @@ export const actions = {
     }
   },
 
+  resetAccessToken: async ({ commit }) => {
+    try {
+      const response = await authAPI.resetAccessToken();
+      commit(types.SET_CURRENT_USER, response.data);
+      return true;
+    } catch (error) {
+      return false;
+    }
+  },
+
   resendConfirmation: async () => {
     try {
       await authAPI.resendConfirmation();
diff --git a/app/javascript/dashboard/store/modules/specs/agentBots/agentBots.spec.js b/app/javascript/dashboard/store/modules/specs/agentBots/agentBots.spec.js
index b2fa47313..168c8f78c 100644
--- a/app/javascript/dashboard/store/modules/specs/agentBots/agentBots.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/agentBots/agentBots.spec.js
@@ -170,4 +170,21 @@ describe('#actions', () => {
       ]);
     });
   });
+  describe('#resetAccessToken', () => {
+    it('sends correct actions if API is success', async () => {
+      const mockResponse = {
+        data: { ...agentBotRecords[0], access_token: 'new_token_123' },
+      };
+      axios.post.mockResolvedValue(mockResponse);
+      const result = await actions.resetAccessToken(
+        { commit },
+        agentBotRecords[0].id
+      );
+
+      expect(commit.mock.calls).toEqual([
+        [types.EDIT_AGENT_BOT, mockResponse.data],
+      ]);
+      expect(result).toBe(mockResponse.data);
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js b/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js
index 3de56b1fe..b5dfebe26 100644
--- a/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js
@@ -228,4 +228,20 @@ describe('#actions', () => {
       );
     });
   });
+
+  describe('#resetAccessToken', () => {
+    it('sends correct actions if API is success', async () => {
+      const mockResponse = {
+        data: { id: 1, name: 'John', access_token: 'new_token_123' },
+        headers: { expiry: 581842904 },
+      };
+      axios.post.mockResolvedValue(mockResponse);
+      const result = await actions.resetAccessToken({ commit });
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CURRENT_USER, mockResponse.data],
+      ]);
+      expect(result).toBe(true);
+    });
+  });
 });
diff --git a/app/policies/agent_bot_policy.rb b/app/policies/agent_bot_policy.rb
index 75c91dbf9..7461f6b2d 100644
--- a/app/policies/agent_bot_policy.rb
+++ b/app/policies/agent_bot_policy.rb
@@ -22,4 +22,8 @@ class AgentBotPolicy < ApplicationPolicy
   def avatar?
     @account_user.administrator?
   end
+
+  def reset_access_token?
+    @account_user.administrator?
+  end
 end
diff --git a/app/views/api/v1/accounts/agent_bots/reset_access_token.json.jbuilder b/app/views/api/v1/accounts/agent_bots/reset_access_token.json.jbuilder
new file mode 100644
index 000000000..f647ac383
--- /dev/null
+++ b/app/views/api/v1/accounts/agent_bots/reset_access_token.json.jbuilder
@@ -0,0 +1 @@
+json.partial! 'api/v1/models/agent_bot', formats: [:json], resource: AgentBotPresenter.new(@agent_bot)
diff --git a/app/views/api/v1/profiles/reset_access_token.json.jbuilder b/app/views/api/v1/profiles/reset_access_token.json.jbuilder
new file mode 100644
index 000000000..0a4b4f9fa
--- /dev/null
+++ b/app/views/api/v1/profiles/reset_access_token.json.jbuilder
@@ -0,0 +1 @@
+json.partial! 'api/v1/models/user', formats: [:json], resource: @user
diff --git a/config/routes.rb b/config/routes.rb
index d1705d605..9841c7103 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -67,6 +67,7 @@ Rails.application.routes.draw do
           end
           resources :agent_bots, only: [:index, :create, :show, :update, :destroy] do
             delete :avatar, on: :member
+            post :reset_access_token, on: :member
           end
           resources :contact_inboxes, only: [] do
             collection do
@@ -296,6 +297,7 @@ Rails.application.routes.draw do
           post :auto_offline
           put :set_active_account
           post :resend_confirmation
+          post :reset_access_token
         end
       end
 
diff --git a/spec/controllers/api/v1/accounts/agent_bots_controller_spec.rb b/spec/controllers/api/v1/accounts/agent_bots_controller_spec.rb
index b5cdff018..61fcf30ac 100644
--- a/spec/controllers/api/v1/accounts/agent_bots_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/agent_bots_controller_spec.rb
@@ -262,4 +262,55 @@ RSpec.describe 'Agent Bot API', type: :request do
       end
     end
   end
+
+  describe 'POST /api/v1/accounts/{account.id}/agent_bots/:id/reset_access_token' do
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        post "/api/v1/accounts/#{account.id}/agent_bots/#{agent_bot.id}/reset_access_token"
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      it 'regenerates the access token when administrator' do
+        old_token = agent_bot.access_token.token
+
+        post "/api/v1/accounts/#{account.id}/agent_bots/#{agent_bot.id}/reset_access_token",
+             headers: admin.create_new_auth_token,
+             as: :json
+
+        expect(response).to have_http_status(:success)
+        agent_bot.reload
+        expect(agent_bot.access_token.token).not_to eq(old_token)
+        json_response = response.parsed_body
+        expect(json_response['access_token']).to eq(agent_bot.access_token.token)
+      end
+
+      it 'would not reset the access token when agent' do
+        old_token = agent_bot.access_token.token
+
+        post "/api/v1/accounts/#{account.id}/agent_bots/#{agent_bot.id}/reset_access_token",
+             headers: agent.create_new_auth_token,
+             as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+        agent_bot.reload
+        expect(agent_bot.access_token.token).to eq(old_token)
+      end
+
+      it 'would not reset access token for a global agent bot' do
+        global_bot = create(:agent_bot)
+        old_token = global_bot.access_token.token
+
+        post "/api/v1/accounts/#{account.id}/agent_bots/#{global_bot.id}/reset_access_token",
+             headers: admin.create_new_auth_token,
+             as: :json
+
+        expect(response).to have_http_status(:not_found)
+        global_bot.reload
+        expect(global_bot.access_token.token).to eq(old_token)
+      end
+    end
+  end
 end
diff --git a/spec/controllers/api/v1/profiles_controller_spec.rb b/spec/controllers/api/v1/profiles_controller_spec.rb
index 50404ad55..8af9e30c0 100644
--- a/spec/controllers/api/v1/profiles_controller_spec.rb
+++ b/spec/controllers/api/v1/profiles_controller_spec.rb
@@ -296,4 +296,32 @@ RSpec.describe 'Profile API', type: :request do
       end
     end
   end
+
+  describe 'POST /api/v1/profile/reset_access_token' do
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        post '/api/v1/profile/reset_access_token'
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      let(:agent) { create(:user, account: account, role: :agent) }
+
+      it 'regenerates the access token' do
+        old_token = agent.access_token.token
+
+        post '/api/v1/profile/reset_access_token',
+             headers: agent.create_new_auth_token,
+             as: :json
+
+        expect(response).to have_http_status(:success)
+        agent.reload
+        expect(agent.access_token.token).not_to eq(old_token)
+        json_response = response.parsed_body
+        expect(json_response['access_token']).to eq(agent.access_token.token)
+      end
+    end
+  end
 end

From b3a76289cc88b9f5426a6453751076eb8c9d4823 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 29 May 2025 17:01:38 +0530
Subject: [PATCH 08/16] feat: use tracking pixel for article view count
 (#11559)

---
 .../api/v1/portals/articles_controller.rb     |  18 +++++++-
 app/views/layouts/portal.html.erb             |  24 +++++++++++
 config/routes.rb                              |   1 +
 public/assets/images/tracking-pixel.png       | Bin 0 -> 123 bytes
 .../v1/portals/articles_controller_spec.rb    |  40 +++++++++++++++++-
 5 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 public/assets/images/tracking-pixel.png

diff --git a/app/controllers/public/api/v1/portals/articles_controller.rb b/app/controllers/public/api/v1/portals/articles_controller.rb
index d07dbcb9d..32a147d34 100644
--- a/app/controllers/public/api/v1/portals/articles_controller.rb
+++ b/app/controllers/public/api/v1/portals/articles_controller.rb
@@ -1,7 +1,7 @@
 class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::BaseController
   before_action :ensure_custom_domain_request, only: [:show, :index]
   before_action :portal
-  before_action :set_category, except: [:index, :show]
+  before_action :set_category, except: [:index, :show, :tracking_pixel]
   before_action :set_article, only: [:show]
   layout 'portal'
 
@@ -15,6 +15,21 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def show; end
 
+  def tracking_pixel
+    @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
+    return head :not_found unless @article
+
+    @article.increment_view_count if @article.published?
+
+    # Serve the 1x1 tracking pixel with 24-hour private cache
+    # Private cache bypasses CDN but allows browser caching to prevent duplicate views from same user
+    expires_in 24.hours, public: false
+    response.headers['Content-Type'] = 'image/png'
+
+    pixel_path = Rails.public_path.join('assets/images/tracking-pixel.png')
+    send_file pixel_path, type: 'image/png', disposition: 'inline'
+  end
+
   private
 
   def limit_results
@@ -39,7 +54,6 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def set_article
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
-    @article.increment_view_count if @article.published?
     @parsed_content = render_article_content(@article.content)
   end
 
diff --git a/app/views/layouts/portal.html.erb b/app/views/layouts/portal.html.erb
index c4135fd37..6ed0c8201 100644
--- a/app/views/layouts/portal.html.erb
+++ b/app/views/layouts/portal.html.erb
@@ -73,6 +73,30 @@ By default, it renders:
         <% end %>
       </main>
     </div>
+    <% if @article.present? %>
+    <script>
+      (function() {
+        let viewTracked = false;
+        const trackView = function() {
+          if (!viewTracked) {
+            viewTracked = true;
+            const img = new Image();
+            img.src = '<%= request.base_url %>/hc/<%= @portal.slug %>/articles/<%= @article.slug %>.png';
+          }
+        };
+        
+        const addTrackingListeners = function() {
+          const events = ['mouseenter', 'touchstart', 'focus'];
+          events.forEach(event => {
+            document.body.addEventListener(event, function() {
+              setTimeout(trackView, 5000);
+            }, { once: true });
+          });
+        };
+        addTrackingListeners();
+      })();
+    </script>
+    <% end %>
   </body>
   <style>
   html.dark {
diff --git a/config/routes.rb b/config/routes.rb
index 9841c7103..ea65a02c9 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -449,6 +449,7 @@ Rails.application.routes.draw do
   get 'hc/:slug/:locale/categories', to: 'public/api/v1/portals/categories#index'
   get 'hc/:slug/:locale/categories/:category_slug', to: 'public/api/v1/portals/categories#show'
   get 'hc/:slug/:locale/categories/:category_slug/articles', to: 'public/api/v1/portals/articles#index'
+  get 'hc/:slug/articles/:article_slug.png', to: 'public/api/v1/portals/articles#tracking_pixel'
   get 'hc/:slug/articles/:article_slug', to: 'public/api/v1/portals/articles#show'
 
   # ----------------------------------------------------------------------
diff --git a/public/assets/images/tracking-pixel.png b/public/assets/images/tracking-pixel.png
new file mode 100644
index 0000000000000000000000000000000000000000..04cc712f24b2ecf0100a4c9b415783d8f8fba087
GIT binary patch
literal 123
zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx1|;Q0k8}bl&H|6fVg?3oVGw3ym^DWNq@p;;
z-HBn{IhmJ04okYDuOkD)#(wTUiL5}rfTxRNNChJ!E5on<KrRrlGBBo8Otk<pJzf1=
J);T3K0Ra5c7l{A>

literal 0
HcmV?d00001

diff --git a/spec/controllers/public/api/v1/portals/articles_controller_spec.rb b/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
index 08c5206c1..e6429a1de 100644
--- a/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
+++ b/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
@@ -82,7 +82,7 @@ RSpec.describe 'Public Articles API', type: :request do
       get "/hc/#{portal.slug}/articles/#{article.slug}"
       expect(response).to have_http_status(:success)
       expect(response.body).to include(ChatwootMarkdownRenderer.new(article.content).render_article)
-      expect(article.reload.views).to eq 1
+      expect(article.reload.views).to eq 0 # View count should not increment on show
     end
 
     it 'does not increment the view count if the article is not published' do
@@ -98,4 +98,42 @@ RSpec.describe 'Public Articles API', type: :request do
       expect(response).to have_http_status(:success)
     end
   end
+
+  describe 'GET /public/api/v1/portals/:slug/articles/:slug.png (tracking pixel)' do
+    it 'serves a PNG image and increments view count for published article' do
+      get "/hc/#{portal.slug}/articles/#{article.slug}.png"
+
+      expect(response).to have_http_status(:success)
+      expect(response.headers['Content-Type']).to eq('image/png')
+      expect(response.headers['Cache-Control']).to include('max-age=86400')
+      expect(response.headers['Cache-Control']).to include('private')
+      expect(article.reload.views).to eq 1
+    end
+
+    it 'serves a PNG image but does not increment view count for draft article' do
+      draft_article = create(:article, category: category, status: :draft, portal: portal, account_id: account.id, author_id: agent.id, views: 0)
+
+      get "/hc/#{portal.slug}/articles/#{draft_article.slug}.png"
+
+      expect(response).to have_http_status(:success)
+      expect(response.headers['Content-Type']).to eq('image/png')
+      expect(response.headers['Cache-Control']).to include('max-age=86400')
+      expect(response.headers['Cache-Control']).to include('private')
+      expect(draft_article.reload.views).to eq 0
+    end
+
+    it 'returns 404 if article does not exist' do
+      get "/hc/#{portal.slug}/articles/non-existent-article.png"
+
+      expect(response).to have_http_status(:not_found)
+    end
+
+    it 'sets proper cache headers for performance' do
+      get "/hc/#{portal.slug}/articles/#{article.slug}.png"
+
+      expect(response.headers['Cache-Control']).to include('max-age=86400')
+      expect(response.headers['Cache-Control']).to include('private')
+      expect(response.headers['Content-Type']).to eq('image/png')
+    end
+  end
 end

From b1898e019b60911a0f976ded90dfd76ee1c0bba9 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 29 May 2025 23:37:05 +0530
Subject: [PATCH 09/16] fix: Design issues with profile settings style (#11630)

# Pull Request Template

## Description

This PR fixes styles issues with the select in profile settings and
toggles the Hotkeys button.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screenshots

**Select**
| Before  | After (Dark Mode) | After (Light Mode) |
| ------------- | ------------- | ------------- |
| <img width="162" alt="image"
src="https://github.com/user-attachments/assets/6d4ebd45-d233-413e-aca8-7f4db5d6c8a2"
/> <img width="699" alt="image"
src="https://github.com/user-attachments/assets/62c2ca85-479f-4252-a4fc-ffd5a570cff0"
/> | <img width="162" alt="image"
src="https://github.com/user-attachments/assets/7c9780ea-8ab6-429e-82e3-6fb554141bc0"
/> <img width="699" alt="image"
src="https://github.com/user-attachments/assets/726d7a0a-bfbc-4bdc-aedc-a874146230d8"
/> | <img width="162" alt="image"
src="https://github.com/user-attachments/assets/f3022b5f-6ae2-48d6-a2c9-9961f4295b81"
/> <img width="699" alt="image"
src="https://github.com/user-attachments/assets/fa6515c1-35df-4f6f-9096-e7893bffe683"
/> |

**Toggle Hotkeys**
| Before  | After (Dark Mode) | After (Light Mode) |
| ------------- | ------------- | ------------- |
| <img width="783" alt="image"
src="https://github.com/user-attachments/assets/5628fa6a-9692-44f4-bc45-6e5de44588c7"
/> | <img width="783" alt="image"
src="https://github.com/user-attachments/assets/14529e80-fd9c-46cd-9ad8-aab041781238"
/> | <img width="783" alt="image"
src="https://github.com/user-attachments/assets/dfe2cbec-8d05-443d-89a2-0e674fffa518"
/> |

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 app/javascript/dashboard/assets/scss/widgets/_base.scss    | 2 +-
 .../dashboard/routes/dashboard/settings/profile/Index.vue  | 7 ++++++-
 app/javascript/v3/components/Form/Select.vue               | 6 +++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_base.scss b/app/javascript/dashboard/assets/scss/widgets/_base.scss
index 9c4ccf126..afaaf91c8 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_base.scss
@@ -101,7 +101,7 @@ select {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
   background-size: 9px 6px;
 
-  @apply field-base h-10 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
+  @apply field-base h-10 bg-origin-content bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
 
   &[disabled] {
     @apply field-disabled;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index eedcd21f1..097e0589a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -245,7 +245,12 @@ export default {
         <button
           v-for="hotKey in hotKeys"
           :key="hotKey.key"
-          class="px-0 reset-base w-full sm:flex-1"
+          class="px-0 reset-base w-full sm:flex-1 rounded-xl outline-1 outline"
+          :class="
+            isEditorHotKeyEnabled(hotKey.key)
+              ? 'outline-n-brand/30'
+              : 'outline-n-weak'
+          "
         >
           <HotKeyCard
             :key="hotKey.title"
diff --git a/app/javascript/v3/components/Form/Select.vue b/app/javascript/v3/components/Form/Select.vue
index 0fd9ad002..f91c1ebe2 100644
--- a/app/javascript/v3/components/Form/Select.vue
+++ b/app/javascript/v3/components/Form/Select.vue
@@ -64,11 +64,11 @@ export default {
       :selected="modelValue"
       :name="name"
       :class="{
-        'text-ash-400': !modelValue,
-        'text-ash-900': modelValue,
+        'text-n-slate-9': !modelValue,
+        'text-n-slate-12': modelValue,
         'pl-9': icon,
       }"
-      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 text-sm leading-6"
+      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm appearance-none rounded-xl select-caret leading-6"
       @input="onInput"
     >
       <option value="" disabled selected class="hidden">

From 3548948c92fc6722acd90df7029ca63ae19d3e42 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Thu, 29 May 2025 12:09:03 -0600
Subject: [PATCH 10/16] fix: Allow users with report_manage permission to
 access CSAT reports (#11625)

- Extended CsatSurveyResponsePolicy to support report_manage permission
- Added enterprise extension module following existing pattern
- Users with report_manage custom role can now access CSAT index,
metrics, and download
- Added comprehensive tests for both base and enterprise policy behavior
---
 app/policies/csat_survey_response_policy.rb   |  2 ++
 .../enterprise/csat_survey_response_policy.rb | 13 ++++++++++
 .../csat_survey_response_policy_spec.rb       | 26 +++++++++++++++++++
 .../csat_survey_response_policy_spec.rb       | 25 ++++++++++++++++++
 4 files changed, 66 insertions(+)
 create mode 100644 enterprise/app/policies/enterprise/csat_survey_response_policy.rb
 create mode 100644 spec/enterprise/policies/csat_survey_response_policy_spec.rb
 create mode 100644 spec/policies/csat_survey_response_policy_spec.rb

diff --git a/app/policies/csat_survey_response_policy.rb b/app/policies/csat_survey_response_policy.rb
index afcce00e9..bcda7c458 100644
--- a/app/policies/csat_survey_response_policy.rb
+++ b/app/policies/csat_survey_response_policy.rb
@@ -11,3 +11,5 @@ class CsatSurveyResponsePolicy < ApplicationPolicy
     @account_user.administrator?
   end
 end
+
+CsatSurveyResponsePolicy.prepend_mod_with('CsatSurveyResponsePolicy')
diff --git a/enterprise/app/policies/enterprise/csat_survey_response_policy.rb b/enterprise/app/policies/enterprise/csat_survey_response_policy.rb
new file mode 100644
index 000000000..4b0f5816e
--- /dev/null
+++ b/enterprise/app/policies/enterprise/csat_survey_response_policy.rb
@@ -0,0 +1,13 @@
+module Enterprise::CsatSurveyResponsePolicy
+  def index?
+    @account_user.custom_role&.permissions&.include?('report_manage') || super
+  end
+
+  def metrics?
+    @account_user.custom_role&.permissions&.include?('report_manage') || super
+  end
+
+  def download?
+    @account_user.custom_role&.permissions&.include?('report_manage') || super
+  end
+end
diff --git a/spec/enterprise/policies/csat_survey_response_policy_spec.rb b/spec/enterprise/policies/csat_survey_response_policy_spec.rb
new file mode 100644
index 000000000..c577655f9
--- /dev/null
+++ b/spec/enterprise/policies/csat_survey_response_policy_spec.rb
@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe 'Enterprise::CsatSurveyResponsePolicy', type: :policy do
+  subject(:csat_policy) { CsatSurveyResponsePolicy }
+
+  let(:account) { create(:account) }
+  let(:csat_survey_response) { create(:csat_survey_response, account: account) }
+
+  # Create a custom role with report_manage permission
+  let(:custom_role) { create(:custom_role, account: account, permissions: ['report_manage']) }
+  let(:agent_with_role) { create(:user) } # Create without account
+  let(:agent_with_role_account_user) do
+    create(:account_user, user: agent_with_role, account: account, role: :agent, custom_role: custom_role)
+  end
+  let(:agent_with_role_context) do
+    { user: agent_with_role, account: account, account_user: agent_with_role_account_user }
+  end
+
+  permissions :index?, :metrics?, :download? do
+    context 'when agent with report_manage permission' do
+      it { expect(csat_policy).to permit(agent_with_role_context, csat_survey_response) }
+    end
+  end
+end
diff --git a/spec/policies/csat_survey_response_policy_spec.rb b/spec/policies/csat_survey_response_policy_spec.rb
new file mode 100644
index 000000000..6579e6f0e
--- /dev/null
+++ b/spec/policies/csat_survey_response_policy_spec.rb
@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe CsatSurveyResponsePolicy, type: :policy do
+  subject(:csat_policy) { described_class }
+
+  let(:account) { create(:account) }
+  let(:administrator) { create(:user, :administrator, account: account) }
+  let(:agent) { create(:user, account: account) }
+  let(:csat_survey_response) { create(:csat_survey_response, account: account) }
+
+  let(:administrator_context) { { user: administrator, account: account, account_user: account.account_users.first } }
+  let(:agent_context) { { user: agent, account: account, account_user: account.account_users.last } }
+
+  permissions :index?, :metrics?, :download? do
+    context 'when administrator' do
+      it { expect(csat_policy).to permit(administrator_context, csat_survey_response) }
+    end
+
+    context 'when agent' do
+      it { expect(csat_policy).not_to permit(agent_context, csat_survey_response) }
+    end
+  end
+end

From 4ab0b17e6eade028f56bbbe56cc3e7051414b4b6 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Thu, 29 May 2025 15:17:20 -0600
Subject: [PATCH 11/16] feat: add custom roles seeding to account seeder
 (#11623)

Introduce custom roles in account seed data to support testing of
realistic role-based access scenarios. Includes six distinct roles with
varied permission sets and assigns them to multiple users for
comprehensive test coverage.
---
 lib/seeders/account_seeder.rb | 53 +++++++++++++++++++++++++++++------
 lib/seeders/seed_data.yml     | 43 ++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+), 8 deletions(-)

diff --git a/lib/seeders/account_seeder.rb b/lib/seeders/account_seeder.rb
index 802a02dbf..ba46638c5 100644
--- a/lib/seeders/account_seeder.rb
+++ b/lib/seeders/account_seeder.rb
@@ -19,6 +19,7 @@ class Seeders::AccountSeeder
   def perform!
     set_up_account
     seed_teams
+    seed_custom_roles
     set_up_users
     seed_labels
     seed_canned_responses
@@ -32,6 +33,7 @@ class Seeders::AccountSeeder
     @account.labels.destroy_all
     @account.inboxes.destroy_all
     @account.contacts.destroy_all
+    @account.custom_roles.destroy_all if @account.respond_to?(:custom_roles)
   end
 
   def seed_teams
@@ -40,6 +42,18 @@ class Seeders::AccountSeeder
     end
   end
 
+  def seed_custom_roles
+    return unless @account_data['custom_roles'].present? && @account.respond_to?(:custom_roles)
+
+    @account_data['custom_roles'].each do |role_data|
+      @account.custom_roles.create!(
+        name: role_data['name'],
+        description: role_data['description'],
+        permissions: role_data['permissions']
+      )
+    end
+  end
+
   def seed_labels
     @account_data['labels'].each do |label|
       @account.labels.create!(label)
@@ -48,17 +62,34 @@ class Seeders::AccountSeeder
 
   def set_up_users
     @account_data['users'].each do |user|
-      user_record = User.create_with(name: user['name'], password: 'Password1!.').find_or_create_by!(email: (user['email']).to_s)
-      user_record.skip_confirmation!
-      user_record.save!
-      Avatar::AvatarFromUrlJob.perform_later(user_record, "https://xsgames.co/randomusers/avatar.php?g=#{user['gender']}")
-      AccountUser.create_with(role: (user['role'] || 'agent')).find_or_create_by!(account_id: @account.id, user_id: user_record.id)
-      next if user['team'].blank?
-
-      add_user_to_teams(user: user_record, teams: user['team'])
+      user_record = create_user_record(user)
+      create_account_user(user_record, user)
+      add_user_to_teams(user: user_record, teams: user['team']) if user['team'].present?
     end
   end
 
+  private
+
+  def create_user_record(user)
+    user_record = User.create_with(name: user['name'], password: 'Password1!.').find_or_create_by!(email: user['email'].to_s)
+    user_record.skip_confirmation!
+    user_record.save!
+    Avatar::AvatarFromUrlJob.perform_later(user_record, "https://xsgames.co/randomusers/avatar.php?g=#{user['gender']}")
+    user_record
+  end
+
+  def create_account_user(user_record, user)
+    account_user_attrs = build_account_user_attrs(user)
+    AccountUser.create_with(account_user_attrs).find_or_create_by!(account_id: @account.id, user_id: user_record.id)
+  end
+
+  def build_account_user_attrs(user)
+    attrs = { role: (user['role'] || 'agent') }
+    custom_role = find_custom_role(user['custom_role']) if user['custom_role'].present?
+    attrs[:custom_role] = custom_role if custom_role
+    attrs
+  end
+
   def add_user_to_teams(user:, teams:)
     teams.each do |team|
       team_record = @account.teams.where('name LIKE ?', "%#{team.downcase}%").first if team.present?
@@ -66,6 +97,12 @@ class Seeders::AccountSeeder
     end
   end
 
+  def find_custom_role(role_name)
+    return nil unless @account.respond_to?(:custom_roles)
+
+    @account.custom_roles.find_by(name: role_name)
+  end
+
   def seed_canned_responses(count: 50)
     count.times do
       @account.canned_responses.create(content: Faker::Quote.fortune_cookie, short_code: Faker::Alphanumeric.alpha(number: 10))
diff --git a/lib/seeders/seed_data.yml b/lib/seeders/seed_data.yml
index 6ca79467f..08cb5549b 100644
--- a/lib/seeders/seed_data.yml
+++ b/lib/seeders/seed_data.yml
@@ -61,41 +61,49 @@ users:
     email: 'karn@paperlayer.test'
     team:
       - 'Sales'
+    custom_role: 'Sales Representative'
   - name: 'Danny Cordray'
     gender: female
     email: 'danny@paperlayer.test'
     team:
       - 'Sales'
+    custom_role: 'Customer Support Lead'
   - name: 'Ben Nugent'
     gender: male
     email: 'ben@paperlayer.test'
     team:
       - 'Sales'
+    custom_role: 'Junior Agent'
   - name: 'Todd Packer'
     gender: male
     email: 'todd@paperlayer.test'
     team:
       - 'Sales'
+    custom_role: 'Sales Representative'
   - name: 'Cathy Simms'
     gender: female
     email: 'cathy@paperlayer.test'
     team:
       - 'Administration'
+    custom_role: 'Knowledge Manager'
   - name: 'Hunter Jo'
     gender: male
     email: 'hunter@paperlayer.test'
     team:
       - 'Administration'
+    custom_role: 'Analytics Specialist'
   - name: 'Rolando Silva'
     gender: male
     email: 'rolando@paperlayer.test'
     team:
       - 'Administration'
+    custom_role: 'Junior Agent'
   - name: 'Stephanie Wilson'
     gender: female
     email: 'stephanie@paperlayer.test'
     team:
       - 'Administration'
+    custom_role: 'Escalation Handler'
   - name: 'Jordan Garfield'
     gender: male
     email: 'jorodan@paperlayer.test'
@@ -111,6 +119,7 @@ users:
     email: 'lonny@paperlayer.test'
     team:
       - 'Warehouse'
+    custom_role: 'Customer Support Lead'
   - name: 'Madge Madsen'
     gender: female
     email: 'madge@paperlayer.test'
@@ -162,6 +171,7 @@ users:
   - name: 'Devon White'
     gender: male
     email: 'devon@paperlayer.test'
+    custom_role: 'Escalation Handler'
   - name: 'Kendall'
     gender: male
     email: 'kendall@paperlayer.test'
@@ -173,6 +183,39 @@ teams:
   - '💼 Management'
   - '👩‍💼 Administration'
   - '🚛 Warehouse'
+custom_roles:
+  - name: 'Customer Support Lead'
+    description: 'Lead support agent with full conversation and contact management'
+    permissions:
+      - 'conversation_manage'
+      - 'contact_manage'
+      - 'report_manage'
+  - name: 'Sales Representative'
+    description: 'Sales team member with conversation and contact access'
+    permissions:
+      - 'conversation_unassigned_manage'
+      - 'conversation_participating_manage'
+      - 'contact_manage'
+  - name: 'Knowledge Manager'
+    description: 'Manages knowledge base and participates in conversations'
+    permissions:
+      - 'knowledge_base_manage'
+      - 'conversation_participating_manage'
+  - name: 'Junior Agent'
+    description: 'Entry-level agent with basic conversation access'
+    permissions:
+      - 'conversation_participating_manage'
+  - name: 'Analytics Specialist'
+    description: 'Focused on reports and data analysis'
+    permissions:
+      - 'report_manage'
+      - 'conversation_participating_manage'
+  - name: 'Escalation Handler'
+    description: 'Handles unassigned conversations and escalations'
+    permissions:
+      - 'conversation_unassigned_manage'
+      - 'conversation_participating_manage'
+      - 'contact_manage'
 labels:
     - title: 'billing'
       color: '#28AD21'

From 70c29f699c4bb8a1b0ff560fdb8577c5414bacc6 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Thu, 29 May 2025 16:52:33 -0600
Subject: [PATCH 12/16] =?UTF-8?q?fix(revert):=20"fix:=20Send=20CSAT=20surv?=
 =?UTF-8?q?ey=20only=20when=20agent=20can=20reply=20in=20conversati?=
 =?UTF-8?q?=E2=80=A6=20(#11634)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…on (#11584)"

This reverts commit b5ebc4763723e15ad3a04ab0b0ecb1e01087a2b1.

# Pull Request Template

## Description

Please include a summary of the change and issue(s) fixed. Also, mention
relevant motivation, context, and any dependencies that this change
requires.
Fixes # (issue)

## Type of change

Please delete options that are not relevant.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration.


## Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../concerns/activity_message_handler.rb      |  1 -
 .../concerns/csat_activity_message_handler.rb |  8 -----
 .../hook_execution_service.rb                 | 23 ++++-----------
 config/locales/en.yml                         |  2 --
 spec/models/conversation_spec.rb              | 14 ---------
 .../hook_execution_service_spec.rb            | 29 +------------------
 6 files changed, 6 insertions(+), 71 deletions(-)
 delete mode 100644 app/models/concerns/csat_activity_message_handler.rb

diff --git a/app/models/concerns/activity_message_handler.rb b/app/models/concerns/activity_message_handler.rb
index 0d6741c7a..54e58b4d9 100644
--- a/app/models/concerns/activity_message_handler.rb
+++ b/app/models/concerns/activity_message_handler.rb
@@ -5,7 +5,6 @@ module ActivityMessageHandler
   include LabelActivityMessageHandler
   include SlaActivityMessageHandler
   include TeamActivityMessageHandler
-  include CsatActivityMessageHandler
 
   private
 
diff --git a/app/models/concerns/csat_activity_message_handler.rb b/app/models/concerns/csat_activity_message_handler.rb
deleted file mode 100644
index 7a2488c4d..000000000
--- a/app/models/concerns/csat_activity_message_handler.rb
+++ /dev/null
@@ -1,8 +0,0 @@
-module CsatActivityMessageHandler
-  extend ActiveSupport::Concern
-
-  def create_csat_not_sent_activity_message
-    content = I18n.t('conversations.activity.csat.not_sent_due_to_messaging_window')
-    ::Conversations::ActivityMessageJob.perform_later(self, activity_message_params(content)) if content
-  end
-end
diff --git a/app/services/message_templates/hook_execution_service.rb b/app/services/message_templates/hook_execution_service.rb
index 8291c8a9c..a8a4c4318 100644
--- a/app/services/message_templates/hook_execution_service.rb
+++ b/app/services/message_templates/hook_execution_service.rb
@@ -17,7 +17,7 @@ class MessageTemplates::HookExecutionService
     ::MessageTemplates::Template::OutOfOffice.new(conversation: conversation).perform if should_send_out_of_office_message?
     ::MessageTemplates::Template::Greeting.new(conversation: conversation).perform if should_send_greeting?
     ::MessageTemplates::Template::EmailCollect.new(conversation: conversation).perform if inbox.enable_email_collect && should_send_email_collect?
-    handle_csat_survey
+    ::MessageTemplates::Template::CsatSurvey.new(conversation: conversation).perform if should_send_csat_survey?
   end
 
   def should_send_out_of_office_message?
@@ -65,26 +65,13 @@ class MessageTemplates::HookExecutionService
     true
   end
 
-  def handle_csat_survey
+  def should_send_csat_survey?
     return unless csat_enabled_conversation?
+
     # only send CSAT once in a conversation
-    return if csat_already_sent?
+    return if conversation.messages.where(content_type: :input_csat).present?
 
-    # Only send CSAT if agent can still reply by checking the messaging window restriction
-    # https://www.chatwoot.com/docs/self-hosted/supported-features#outgoing-message-restriction
-    if within_messaging_window?
-      ::MessageTemplates::Template::CsatSurvey.new(conversation: conversation).perform
-    else
-      conversation.create_csat_not_sent_activity_message
-    end
-  end
-
-  def csat_already_sent?
-    conversation.messages.where(content_type: :input_csat).present?
-  end
-
-  def within_messaging_window?
-    conversation.can_reply?
+    true
   end
 end
 MessageTemplates::HookExecutionService.prepend_mod_with('MessageTemplates::HookExecutionService')
diff --git a/config/locales/en.yml b/config/locales/en.yml
index b309e718c..9a35197ad 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -185,8 +185,6 @@ en:
         removed: '%{user_name} removed %{labels}'
       sla:
         added: '%{user_name} added SLA policy %{sla_name}'
-      csat:
-        not_sent_due_to_messaging_window: 'CSAT survey not sent due to outgoing message restrictions'
         removed: '%{user_name} removed SLA policy %{sla_name}'
       muted: '%{user_name} has muted the conversation'
       unmuted: '%{user_name} has unmuted the conversation'
diff --git a/spec/models/conversation_spec.rb b/spec/models/conversation_spec.rb
index ad3446a13..aef91603d 100644
--- a/spec/models/conversation_spec.rb
+++ b/spec/models/conversation_spec.rb
@@ -435,20 +435,6 @@ RSpec.describe Conversation do
     end
   end
 
-  describe '#create_csat_not_sent_activity_message' do
-    subject(:create_csat_not_sent_activity_message) { conversation.create_csat_not_sent_activity_message }
-
-    let(:conversation) { create(:conversation) }
-
-    it 'creates CSAT not sent activity message' do
-      create_csat_not_sent_activity_message
-      expect(Conversations::ActivityMessageJob)
-        .to(have_been_enqueued.at_least(:once).with(conversation, { account_id: conversation.account_id, inbox_id: conversation.inbox_id,
-                                                                    message_type: :activity,
-                                                                    content: 'CSAT survey not sent due to outgoing message restrictions' }))
-    end
-  end
-
   describe 'unread_messages' do
     subject(:unread_messages) { conversation.unread_messages }
 
diff --git a/spec/services/message_templates/hook_execution_service_spec.rb b/spec/services/message_templates/hook_execution_service_spec.rb
index 6e97aac42..24e40ea8d 100644
--- a/spec/services/message_templates/hook_execution_service_spec.rb
+++ b/spec/services/message_templates/hook_execution_service_spec.rb
@@ -121,9 +121,8 @@ describe MessageTemplates::HookExecutionService do
       create(:message, conversation: conversation, message_type: 'incoming')
     end
 
-    it 'calls ::MessageTemplates::Template::CsatSurvey when a conversation is resolved in an inbox with survey enabled and can reply' do
+    it 'calls ::MessageTemplates::Template::CsatSurvey when a conversation is resolved in an inbox with survey enabled' do
       conversation.inbox.update(csat_survey_enabled: true)
-      allow(conversation).to receive(:can_reply?).and_return(true)
 
       conversation.resolved!
       Conversations::ActivityMessageJob.perform_now(conversation,
@@ -173,32 +172,6 @@ describe MessageTemplates::HookExecutionService do
       expect(MessageTemplates::Template::CsatSurvey).not_to have_received(:new).with(conversation: conversation)
       expect(csat_survey).not_to have_received(:perform)
     end
-
-    it 'will not call ::MessageTemplates::Template::CsatSurvey if cannot reply' do
-      conversation.inbox.update(csat_survey_enabled: true)
-      allow(conversation).to receive(:can_reply?).and_return(false)
-
-      conversation.resolved!
-      Conversations::ActivityMessageJob.perform_now(conversation,
-                                                    { account_id: conversation.account_id, inbox_id: conversation.inbox_id, message_type: :activity,
-                                                      content: 'Conversation marked resolved!!' })
-
-      expect(MessageTemplates::Template::CsatSurvey).not_to have_received(:new).with(conversation: conversation)
-      expect(csat_survey).not_to have_received(:perform)
-    end
-
-    it 'creates activity message when CSAT not sent due to messaging window restriction' do
-      conversation.inbox.update(csat_survey_enabled: true)
-      allow(conversation).to receive(:can_reply?).and_return(false)
-      allow(conversation).to receive(:create_csat_not_sent_activity_message)
-
-      conversation.resolved!
-      Conversations::ActivityMessageJob.perform_now(conversation,
-                                                    { account_id: conversation.account_id, inbox_id: conversation.inbox_id, message_type: :activity,
-                                                      content: 'Conversation marked resolved!!' })
-
-      expect(conversation).to have_received(:create_csat_not_sent_activity_message)
-    end
   end
 
   context 'when it is after working hours' do

From aad6d655d5602270802d80bb9954839b0de16f88 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Thu, 29 May 2025 18:45:28 -0600
Subject: [PATCH 13/16] fix: Update design to fix the crowded header (#11633)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Before:**

<img width="907" alt="Screenshot 2025-05-29 at 3 21 00 PM"
src="https://github.com/user-attachments/assets/7738f684-7e9f-40ff-ac49-d9b389eca99b"
/>

**After:**
<img width="903" alt="Screenshot 2025-05-29 at 3 20 33 PM"
src="https://github.com/user-attachments/assets/1213d832-59d8-4d04-be96-f711297a887d"
/>
---
 .../components-next/sidebar/Sidebar.vue       |   2 +-
 .../widgets/conversation/ConversationBox.vue  |   1 -
 .../conversation/ConversationHeader.vue       | 307 +++++++++---------
 .../conversation/ConversationSidebar.vue      |   2 +-
 .../widgets/conversation/MoreActions.vue      | 178 +++++-----
 .../conversation/components/SLACardLabel.vue  | 211 ++++++------
 .../widgets/conversation/linear/index.vue     |  19 +-
 .../conversation/specs/MoreActions.spec.js    | 110 -------
 .../composables/spec/useFontSize.spec.js      |  16 +-
 .../dashboard/composables/useFontSize.js      |   1 -
 .../i18n/locale/en/conversation.json          |   1 +
 11 files changed, 363 insertions(+), 485 deletions(-)
 delete mode 100644 app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js

diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 0bfcf4142..dbb417533 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -477,7 +477,7 @@ const menuItems = computed(() => {
 
 <template>
   <aside
-    class="w-[12.5rem] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
+    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
   >
     <section class="grid gap-2 mt-2 mb-4">
       <div class="flex items-center min-w-0 gap-2 px-2">
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 5a39ae447..62ea8fdaf 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -99,7 +99,6 @@ export default {
     <ConversationHeader
       v-if="currentChat.id"
       :chat="currentChat"
-      :is-inbox-view="isInboxView"
       :show-back-button="isOnExpandedLayout && !isInboxView"
     />
     <woot-tabs
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 4a85e2a00..702afce1c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -1,7 +1,9 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+import { useElementSize } from '@vueuse/core';
 import BackButton from '../BackButton.vue';
-import inboxMixin from 'shared/mixins/inboxMixin';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
 import Thumbnail from '../Thumbnail.vue';
@@ -11,176 +13,161 @@ import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import Linear from './linear/index.vue';
+import { useInbox } from 'dashboard/composables/useInbox';
+import { useI18n } from 'vue-i18n';
 
-import NextButton from 'dashboard/components-next/button/Button.vue';
+const props = defineProps({
+  chat: {
+    type: Object,
+    default: () => ({}),
+  },
+  showBackButton: {
+    type: Boolean,
+    default: false,
+  },
+});
 
-export default {
-  components: {
-    BackButton,
-    InboxName,
-    MoreActions,
-    Thumbnail,
-    SLACardLabel,
-    Linear,
-    NextButton,
-  },
-  mixins: [inboxMixin],
-  props: {
-    chat: {
-      type: Object,
-      default: () => ({}),
-    },
-    showBackButton: {
-      type: Boolean,
-      default: false,
-    },
-    isInboxView: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    ...mapGetters({
-      currentChat: 'getSelectedChat',
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-      appIntegrations: 'integrations/getAppIntegrations',
-    }),
-    chatMetadata() {
-      return this.chat.meta;
-    },
-    backButtonUrl() {
-      const {
-        params: { accountId, inbox_id: inboxId, label, teamId },
-        name,
-      } = this.$route;
-      return conversationListPageURL({
-        accountId,
-        inboxId,
-        label,
-        teamId,
-        conversationType: name === 'conversation_mentions' ? 'mention' : '',
-      });
-    },
-    isHMACVerified() {
-      if (!this.isAWebWidgetInbox) {
-        return true;
-      }
-      return this.chatMetadata.hmac_verified;
-    },
-    currentContact() {
-      return this.$store.getters['contacts/getContact'](
-        this.chat.meta.sender.id
-      );
-    },
-    isSnoozed() {
-      return this.currentChat.status === wootConstants.STATUS_TYPE.SNOOZED;
-    },
-    snoozedDisplayText() {
-      const { snoozed_until: snoozedUntil } = this.currentChat;
-      if (snoozedUntil) {
-        return `${this.$t(
-          'CONVERSATION.HEADER.SNOOZED_UNTIL'
-        )} ${snoozedReopenTime(snoozedUntil)}`;
-      }
-      return this.$t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
-    },
-    inbox() {
-      const { inbox_id: inboxId } = this.chat;
-      return this.$store.getters['inboxes/getInbox'](inboxId);
-    },
-    hasMultipleInboxes() {
-      return this.$store.getters['inboxes/getInboxes'].length > 1;
-    },
-    hasSlaPolicyId() {
-      return this.chat?.sla_policy_id;
-    },
-    isLinearIntegrationEnabled() {
-      return this.appIntegrations.find(
-        integration => integration.id === 'linear' && !!integration.hooks.length
-      );
-    },
-    isLinearFeatureEnabled() {
-      return this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.LINEAR
-      );
-    },
-  },
-};
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+const conversationHeader = ref(null);
+const { width } = useElementSize(conversationHeader);
+const { isAWebWidgetInbox } = useInbox();
+
+const currentChat = computed(() => store.getters.getSelectedChat);
+const accountId = computed(() => store.getters.getCurrentAccountId);
+const isFeatureEnabledonAccount = computed(
+  () => store.getters['accounts/isFeatureEnabledonAccount']
+);
+const appIntegrations = computed(
+  () => store.getters['integrations/getAppIntegrations']
+);
+
+const chatMetadata = computed(() => props.chat.meta);
+
+const backButtonUrl = computed(() => {
+  const {
+    params: { inbox_id: inboxId, label, teamId },
+    name,
+  } = route;
+  return conversationListPageURL({
+    accountId,
+    inboxId,
+    label,
+    teamId,
+    conversationType: name === 'conversation_mentions' ? 'mention' : '',
+  });
+});
+
+const isHMACVerified = computed(() => {
+  if (!isAWebWidgetInbox.value) {
+    return true;
+  }
+  return chatMetadata.value.hmac_verified;
+});
+
+const currentContact = computed(() =>
+  store.getters['contacts/getContact'](props.chat.meta.sender.id)
+);
+
+const isSnoozed = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.SNOOZED
+);
+
+const snoozedDisplayText = computed(() => {
+  const { snoozed_until: snoozedUntil } = currentChat.value;
+  if (snoozedUntil) {
+    return `${t('CONVERSATION.HEADER.SNOOZED_UNTIL')} ${snoozedReopenTime(snoozedUntil)}`;
+  }
+  return t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
+});
+
+const inbox = computed(() => {
+  const { inbox_id: inboxId } = props.chat;
+  return store.getters['inboxes/getInbox'](inboxId);
+});
+
+const hasMultipleInboxes = computed(
+  () => store.getters['inboxes/getInboxes'].length > 1
+);
+
+const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
+
+const isLinearIntegrationEnabled = computed(() =>
+  appIntegrations.value.find(
+    integration => integration.id === 'linear' && !!integration.hooks.length
+  )
+);
+
+const isLinearFeatureEnabled = computed(() =>
+  isFeatureEnabledonAccount.value(accountId.value, FEATURE_FLAGS.LINEAR)
+);
 </script>
 
 <template>
   <div
-    class="flex flex-col items-center justify-between px-3 py-2 border-b bg-n-background border-n-weak md:flex-row h-12"
+    ref="conversationHeader"
+    class="flex flex-col items-center justify-center flex-1 w-full min-w-0 xl:flex-row px-3 py-2 border-b bg-n-background border-n-weak h-24 xl:h-12"
   >
     <div
-      class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
-      :class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
+      class="flex items-center justify-start w-full xl:w-auto max-w-full min-w-0"
     >
-      <div class="flex items-center justify-start max-w-full min-w-0 w-fit">
-        <BackButton
-          v-if="showBackButton"
-          :back-url="backButtonUrl"
-          class="ltr:mr-2 rtl:ml-2"
-        />
-        <Thumbnail
-          :src="currentContact.thumbnail"
-          :badge="inboxBadge"
-          :username="currentContact.name"
-          :status="currentContact.availability_status"
-          size="32px"
-        />
-        <div
-          class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
-        >
-          <div
-            class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
+      <BackButton
+        v-if="showBackButton"
+        :back-url="backButtonUrl"
+        class="ltr:mr-2 rtl:ml-2"
+      />
+      <Thumbnail
+        :src="currentContact.thumbnail"
+        :username="currentContact.name"
+        :status="currentContact.availability_status"
+        size="32px"
+      />
+      <div
+        class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
+      >
+        <div class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit">
+          <span
+            class="text-sm font-medium truncate leading-tight text-n-slate-12"
           >
-            <NextButton link slate>
-              <span
-                class="text-sm font-medium truncate leading-tight text-n-slate-12"
-              >
-                {{ currentContact.name }}
-              </span>
-            </NextButton>
-            <fluent-icon
-              v-if="!isHMACVerified"
-              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-              size="14"
-              class="text-n-amber-10 my-0 mx-0 min-w-[14px]"
-              icon="warning"
-            />
-          </div>
+            {{ currentContact.name }}
+          </span>
+          <fluent-icon
+            v-if="!isHMACVerified"
+            v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
+            size="14"
+            class="text-n-amber-10 my-0 mx-0 min-w-[14px]"
+            icon="warning"
+          />
+        </div>
 
-          <div
-            class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
-          >
-            <InboxName v-if="hasMultipleInboxes" :inbox="inbox" />
-            <span v-if="isSnoozed" class="font-medium text-n-amber-10">
-              {{ snoozedDisplayText }}
-            </span>
-          </div>
+        <div
+          class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
+        >
+          <InboxName v-if="hasMultipleInboxes" :inbox="inbox" class="!mx-0" />
+          <span v-if="isSnoozed" class="font-medium text-n-amber-10">
+            {{ snoozedDisplayText }}
+          </span>
         </div>
       </div>
-      <div
-        class="flex flex-row items-center justify-end flex-grow gap-2 mt-3 header-actions-wrap lg:mt-0"
-      >
-        <SLACardLabel v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
-        <Linear
-          v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
-          :conversation-id="currentChat.id"
-        />
-        <MoreActions :conversation-id="currentChat.id" />
-      </div>
+    </div>
+    <div
+      class="flex flex-row items-center justify-start xl:justify-end flex-grow gap-2 w-full xl:w-auto mt-3 header-actions-wrap xl:mt-0"
+    >
+      <SLACardLabel
+        v-if="hasSlaPolicyId"
+        :chat="chat"
+        show-extended-info
+        :parent-width="width"
+        class="hidden lg:flex"
+      />
+      <Linear
+        v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
+        :conversation-id="currentChat.id"
+        :parent-width="width"
+        class="hidden lg:flex"
+      />
+      <MoreActions :conversation-id="currentChat.id" />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.conversation--header--actions {
-  ::v-deep .inbox--name {
-    @apply m-0;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
index 31e8b09cf..40305560d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
@@ -44,7 +44,7 @@ const activeTab = computed(() => {
 
 <template>
   <div
-    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-80 min-w-80 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-[320px] min-w-[320px] 2xl:min-w-[360px] 2xl:w-[360px] flex flex-col bg-n-background"
   >
     <div class="flex flex-1 overflow-auto">
       <ContactPanel
diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index 9c7997976..448c0105c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -1,10 +1,14 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { computed, onUnmounted } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useStore } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
 import { emitter } from 'shared/helpers/mitt';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
 import ButtonV4 from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 
 import {
   CMD_MUTE_CONVERSATION,
@@ -12,97 +16,111 @@ import {
   CMD_UNMUTE_CONVERSATION,
 } from 'dashboard/helper/commandbar/events';
 
-export default {
-  components: {
-    EmailTranscriptModal,
-    ResolveAction,
-    ButtonV4,
-  },
-  data() {
-    return {
-      showEmailActionsModal: false,
-    };
-  },
-  computed: {
-    ...mapGetters({ currentChat: 'getSelectedChat' }),
-  },
-  mounted() {
-    emitter.on(CMD_MUTE_CONVERSATION, this.mute);
-    emitter.on(CMD_UNMUTE_CONVERSATION, this.unmute);
-    emitter.on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
-  },
-  unmounted() {
-    emitter.off(CMD_MUTE_CONVERSATION, this.mute);
-    emitter.off(CMD_UNMUTE_CONVERSATION, this.unmute);
-    emitter.off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
-  },
-  methods: {
-    mute() {
-      this.$store.dispatch('muteConversation', this.currentChat.id);
-      useAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
-    },
-    unmute() {
-      this.$store.dispatch('unmuteConversation', this.currentChat.id);
-      useAlert(this.$t('CONTACT_PANEL.UNMUTED_SUCCESS'));
-    },
-    toggleEmailActionsModal() {
-      this.showEmailActionsModal = !this.showEmailActionsModal;
-    },
-  },
+// No props needed as we're getting currentChat from the store directly
+const store = useStore();
+const { t } = useI18n();
+
+const [showEmailActionsModal, toggleEmailModal] = useToggle(false);
+const [showActionsDropdown, toggleDropdown] = useToggle(false);
+
+const currentChat = computed(() => store.getters.getSelectedChat);
+
+const actionMenuItems = computed(() => {
+  const items = [];
+
+  if (!currentChat.value.muted) {
+    items.push({
+      icon: 'i-lucide-volume-off',
+      label: t('CONTACT_PANEL.MUTE_CONTACT'),
+      action: 'mute',
+      value: 'mute',
+    });
+  } else {
+    items.push({
+      icon: 'i-lucide-volume-1',
+      label: t('CONTACT_PANEL.UNMUTE_CONTACT'),
+      action: 'unmute',
+      value: 'unmute',
+    });
+  }
+
+  items.push({
+    icon: 'i-lucide-share',
+    label: t('CONTACT_PANEL.SEND_TRANSCRIPT'),
+    action: 'send_transcript',
+    value: 'send_transcript',
+  });
+
+  return items;
+});
+
+const handleActionClick = ({ action }) => {
+  toggleDropdown(false);
+
+  if (action === 'mute') {
+    store.dispatch('muteConversation', currentChat.value.id);
+    useAlert(t('CONTACT_PANEL.MUTED_SUCCESS'));
+  } else if (action === 'unmute') {
+    store.dispatch('unmuteConversation', currentChat.value.id);
+    useAlert(t('CONTACT_PANEL.UNMUTED_SUCCESS'));
+  } else if (action === 'send_transcript') {
+    toggleEmailModal();
+  }
 };
+
+// These functions are needed for the event listeners
+const mute = () => {
+  store.dispatch('muteConversation', currentChat.value.id);
+  useAlert(t('CONTACT_PANEL.MUTED_SUCCESS'));
+};
+
+const unmute = () => {
+  store.dispatch('unmuteConversation', currentChat.value.id);
+  useAlert(t('CONTACT_PANEL.UNMUTED_SUCCESS'));
+};
+
+emitter.on(CMD_MUTE_CONVERSATION, mute);
+emitter.on(CMD_UNMUTE_CONVERSATION, unmute);
+emitter.on(CMD_SEND_TRANSCRIPT, toggleEmailModal);
+
+onUnmounted(() => {
+  emitter.off(CMD_MUTE_CONVERSATION, mute);
+  emitter.off(CMD_UNMUTE_CONVERSATION, unmute);
+  emitter.off(CMD_SEND_TRANSCRIPT, toggleEmailModal);
+});
 </script>
 
 <template>
   <div class="relative flex items-center gap-2 actions--container">
-    <ButtonV4
-      v-if="!currentChat.muted"
-      v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
-      size="sm"
-      variant="ghost"
-      color="slate"
-      icon="i-lucide-volume-off"
-      @click="mute"
-    />
-    <ButtonV4
-      v-else
-      v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
-      size="sm"
-      variant="ghost"
-      color="slate"
-      icon="i-lucide-volume-1"
-      @click="unmute"
-    />
-    <ButtonV4
-      v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
-      size="sm"
-      variant="ghost"
-      color="slate"
-      icon="i-lucide-share"
-      @click="toggleEmailActionsModal"
-    />
     <ResolveAction
       :conversation-id="currentChat.id"
       :status="currentChat.status"
     />
+    <div
+      v-on-clickaway="() => toggleDropdown(false)"
+      class="relative flex items-center group"
+    >
+      <ButtonV4
+        v-tooltip="$t('CONVERSATION.HEADER.MORE_ACTIONS')"
+        size="sm"
+        variant="ghost"
+        color="slate"
+        icon="i-lucide-more-vertical"
+        class="rounded-md group-hover:bg-n-alpha-2"
+        @click="toggleDropdown()"
+      />
+      <DropdownMenu
+        v-if="showActionsDropdown"
+        :menu-items="actionMenuItems"
+        class="mt-1 ltr:right-0 rtl:left-0 top-full"
+        @action="handleActionClick"
+      />
+    </div>
     <EmailTranscriptModal
       v-if="showEmailActionsModal"
       :show="showEmailActionsModal"
       :current-chat="currentChat"
-      @cancel="toggleEmailActionsModal"
+      @cancel="toggleEmailModal"
     />
   </div>
 </template>
-
-<style scoped lang="scss">
-.more--button {
-  @apply items-center flex ml-2 rtl:ml-0 rtl:mr-2;
-}
-
-.dropdown-pane {
-  @apply -right-2 top-12;
-}
-
-.icon {
-  @apply mr-1 rtl:mr-0 rtl:ml-1 min-w-[1rem];
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
index f9cc888cc..77e4be498 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
@@ -1,132 +1,115 @@
-<script>
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { evaluateSLAStatus } from '@chatwoot/utils';
 import SLAPopoverCard from './SLAPopoverCard.vue';
 
+const props = defineProps({
+  chat: {
+    type: Object,
+    default: () => ({}),
+  },
+  showExtendedInfo: {
+    type: Boolean,
+    default: false,
+  },
+  parentWidth: {
+    type: Number,
+    default: 1000,
+  },
+});
+
 const REFRESH_INTERVAL = 60000;
+const { t } = useI18n();
 
-export default {
-  components: {
-    SLAPopoverCard,
-  },
-  props: {
-    chat: {
-      type: Object,
-      default: () => ({}),
-    },
-    showExtendedInfo: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      timer: null,
-      showSlaPopover: false,
-      slaStatus: {
-        threshold: null,
-        isSlaMissed: false,
-        type: null,
-        icon: null,
-      },
-    };
-  },
-  computed: {
-    slaPolicyId() {
-      return this.chat?.sla_policy_id;
-    },
-    appliedSLA() {
-      return this.chat?.applied_sla;
-    },
-    slaEvents() {
-      return this.chat?.sla_events;
-    },
-    hasSlaThreshold() {
-      return this.slaStatus?.threshold;
-    },
-    isSlaMissed() {
-      return this.slaStatus?.isSlaMissed;
-    },
-    slaTextStyles() {
-      return this.isSlaMissed ? 'text-n-ruby-11' : 'text-n-amber-11';
-    },
-    slaStatusText() {
-      const upperCaseType = this.slaStatus?.type?.toUpperCase(); // FRT, NRT, or RT
-      const statusKey = this.isSlaMissed ? 'MISSED' : 'DUE';
+const timer = ref(null);
+const slaStatus = ref({
+  threshold: null,
+  isSlaMissed: false,
+  type: null,
+  icon: null,
+});
 
-      return this.$t(`CONVERSATION.HEADER.SLA_STATUS.${upperCaseType}`, {
-        status: this.$t(`CONVERSATION.HEADER.SLA_STATUS.${statusKey}`),
-      });
-    },
-    showSlaPopoverCard() {
-      return (
-        this.showExtendedInfo && this.showSlaPopover && this.slaEvents.length
-      );
-    },
-  },
-  watch: {
-    chat() {
-      this.updateSlaStatus();
-    },
-  },
-  mounted() {
-    this.updateSlaStatus();
-    this.createTimer();
-  },
-  unmounted() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
-  },
-  methods: {
-    createTimer() {
-      this.timer = setTimeout(() => {
-        this.updateSlaStatus();
-        this.createTimer();
-      }, REFRESH_INTERVAL);
-    },
-    updateSlaStatus() {
-      this.slaStatus = evaluateSLAStatus({
-        appliedSla: this.appliedSLA,
-        chat: this.chat,
-      });
-    },
-    openSlaPopover() {
-      if (!this.showExtendedInfo) return;
-      this.showSlaPopover = true;
-    },
-    closeSlaPopover() {
-      this.showSlaPopover = false;
-    },
-  },
+const appliedSLA = computed(() => props.chat?.applied_sla);
+const slaEvents = computed(() => props.chat?.sla_events);
+const hasSlaThreshold = computed(() => slaStatus.value?.threshold);
+const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
+const slaTextStyles = computed(() =>
+  isSlaMissed.value ? 'text-n-ruby-11' : 'text-n-amber-11'
+);
+
+const slaStatusText = computed(() => {
+  const upperCaseType = slaStatus.value?.type?.toUpperCase(); // FRT, NRT, or RT
+  const statusKey = isSlaMissed.value ? 'MISSED' : 'DUE';
+
+  return t(`CONVERSATION.HEADER.SLA_STATUS.${upperCaseType}`, {
+    status: t(`CONVERSATION.HEADER.SLA_STATUS.${statusKey}`),
+  });
+});
+
+const showSlaPopoverCard = computed(
+  () => props.showExtendedInfo && slaEvents.value?.length > 0
+);
+
+const groupClass = computed(() => {
+  return props.showExtendedInfo
+    ? 'h-[26px] rounded-lg bg-n-alpha-1'
+    : 'rounded h-5  border border-n-strong';
+});
+
+const updateSlaStatus = () => {
+  slaStatus.value = evaluateSLAStatus({
+    appliedSla: appliedSLA.value,
+    chat: props.chat,
+  });
 };
+
+const createTimer = () => {
+  timer.value = setTimeout(() => {
+    updateSlaStatus();
+    createTimer();
+  }, REFRESH_INTERVAL);
+};
+
+watch(
+  () => props.chat,
+  () => {
+    updateSlaStatus();
+  }
+);
+
+const slaPopoverClass = computed(() => {
+  return props.showExtendedInfo
+    ? 'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-n-strong'
+    : '';
+});
+
+onMounted(() => {
+  updateSlaStatus();
+  createTimer();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+});
 </script>
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div
     v-if="hasSlaThreshold"
-    class="relative flex items-center cursor-pointer min-w-fit"
-    :class="
-      showExtendedInfo
-        ? 'h-[26px] rounded-lg bg-n-alpha-1'
-        : 'rounded h-5  border border-n-strong'
-    "
+    class="relative flex items-center cursor-pointer min-w-fit group"
+    :class="groupClass"
   >
     <div
-      v-on-clickaway="closeSlaPopover"
-      class="flex items-center w-full truncate"
-      :class="showExtendedInfo ? 'px-1.5' : 'px-2 gap-1'"
-      @mouseover="openSlaPopover()"
+      class="flex items-center w-full truncate px-1.5"
+      :class="showExtendedInfo ? '' : 'gap-1'"
     >
-      <div
-        class="flex items-center gap-1"
-        :class="
-          showExtendedInfo &&
-          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-n-strong'
-        "
-      >
+      <div class="flex items-center gap-1" :class="slaPopoverClass">
         <fluent-icon
-          size="14"
+          size="12"
           :icon="slaStatus.icon"
           type="outline"
           :icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
@@ -134,7 +117,7 @@ export default {
           :class="slaTextStyles"
         />
         <span
-          v-if="showExtendedInfo"
+          v-if="showExtendedInfo && parentWidth > 650"
           class="text-xs font-medium"
           :class="slaTextStyles"
         >
@@ -151,7 +134,7 @@ export default {
     <SLAPopoverCard
       v-if="showSlaPopoverCard"
       :sla-missed-events="slaEvents"
-      class="right-0 top-7"
+      class="rtl:left-0 ltr:right-0 top-7 hidden group-hover:flex"
     />
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
index 012e43a67..f4fe672ba 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
@@ -16,6 +16,10 @@ const props = defineProps({
     type: [Number, String],
     required: true,
   },
+  parentWidth: {
+    type: Number,
+    default: 10000,
+  },
 });
 
 defineOptions({
@@ -73,6 +77,14 @@ const unlinkIssue = async linkId => {
   }
 };
 
+const shouldShowIssueIdentifier = computed(() => {
+  if (!linkedIssue.value) {
+    return false;
+  }
+
+  return props.parentWidth > 600;
+});
+
 const openIssue = () => {
   if (!linkedIssue.value) shouldShowPopup.value = true;
   shouldShow.value = true;
@@ -119,7 +131,10 @@ onMounted(() => {
         class="text-[#5E6AD2] flex-shrink-0"
         view-box="0 0 19 19"
       />
-      <span v-if="linkedIssue" class="text-xs font-medium text-n-slate-11">
+      <span
+        v-if="shouldShowIssueIdentifier"
+        class="text-xs font-medium text-n-slate-11"
+      >
         {{ linkedIssue.issue.identifier }}
       </span>
     </Button>
@@ -127,7 +142,7 @@ onMounted(() => {
       v-if="linkedIssue"
       :issue="linkedIssue.issue"
       :link-id="linkedIssue.id"
-      class="absolute right-0 top-[36px] invisible group-hover:visible"
+      class="absolute rtl:left-0 ltr:right-0 top-9 invisible group-hover:visible"
       @unlink-issue="unlinkIssue"
     />
     <woot-modal
diff --git a/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js b/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js
deleted file mode 100644
index ba37c3b22..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import MoreActions from '../MoreActions.vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-
-vi.mock('shared/helpers/mitt', () => ({
-  emitter: {
-    emit: vi.fn(),
-    on: vi.fn(),
-    off: vi.fn(),
-  },
-}));
-
-const mockDirective = {
-  mounted: () => {},
-};
-
-import { emitter } from 'shared/helpers/mitt';
-
-describe('MoveActions', () => {
-  let currentChat = { id: 8, muted: false };
-  let store = null;
-  let muteConversation = null;
-  let unmuteConversation = null;
-
-  beforeEach(() => {
-    muteConversation = vi.fn(() => Promise.resolve());
-    unmuteConversation = vi.fn(() => Promise.resolve());
-
-    store = createStore({
-      state: {
-        authenticated: true,
-        currentChat,
-      },
-      getters: {
-        getSelectedChat: () => currentChat,
-      },
-      modules: {
-        conversations: {
-          namespaced: false,
-          actions: { muteConversation, unmuteConversation },
-        },
-      },
-    });
-  });
-
-  const createWrapper = () =>
-    mount(MoreActions, {
-      global: {
-        plugins: [store],
-        components: {
-          'fluent-icon': FluentIcon,
-        },
-        directives: {
-          'on-clickaway': mockDirective,
-        },
-      },
-    });
-
-  describe('muting discussion', () => {
-    it('triggers "muteConversation"', async () => {
-      const wrapper = createWrapper();
-      await wrapper.find('button:first-child').trigger('click');
-
-      expect(muteConversation).toHaveBeenCalledTimes(1);
-      expect(muteConversation).toHaveBeenCalledWith(
-        expect.any(Object), // First argument is the Vuex context object
-        currentChat.id // Second argument is the ID of the conversation
-      );
-    });
-
-    it('shows alert', async () => {
-      const wrapper = createWrapper();
-      await wrapper.find('button:first-child').trigger('click');
-
-      expect(emitter.emit).toBeCalledWith('newToastMessage', {
-        message:
-          'This contact is blocked successfully. You will not be notified of any future conversations.',
-        action: null,
-      });
-    });
-  });
-
-  describe('unmuting discussion', () => {
-    beforeEach(() => {
-      currentChat.muted = true;
-    });
-
-    it('triggers "unmuteConversation"', async () => {
-      const wrapper = createWrapper();
-      await wrapper.find('button:first-child').trigger('click');
-
-      expect(unmuteConversation).toHaveBeenCalledTimes(1);
-      expect(unmuteConversation).toHaveBeenCalledWith(
-        expect.any(Object), // First argument is the Vuex context object
-        currentChat.id // Second argument is the ID of the conversation
-      );
-    });
-
-    it('shows alert', async () => {
-      const wrapper = createWrapper();
-      await wrapper.find('button:first-child').trigger('click');
-
-      expect(emitter.emit).toBeCalledWith('newToastMessage', {
-        message: 'This contact is unblocked successfully.',
-        action: null,
-      });
-    });
-  });
-});
diff --git a/app/javascript/dashboard/composables/spec/useFontSize.spec.js b/app/javascript/dashboard/composables/spec/useFontSize.spec.js
index 9253a3988..52d22478f 100644
--- a/app/javascript/dashboard/composables/spec/useFontSize.spec.js
+++ b/app/javascript/dashboard/composables/spec/useFontSize.spec.js
@@ -43,7 +43,7 @@ describe('useFontSize', () => {
 
   it('returns fontSizeOptions with correct structure', () => {
     const { fontSizeOptions } = useFontSize();
-    expect(fontSizeOptions).toHaveLength(6);
+    expect(fontSizeOptions).toHaveLength(5);
     expect(fontSizeOptions[0]).toHaveProperty('value');
     expect(fontSizeOptions[0]).toHaveProperty('label');
 
@@ -59,12 +59,6 @@ describe('useFontSize', () => {
       label:
         'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.SMALLER',
     });
-
-    expect(fontSizeOptions.find(option => option.value === '22px')).toEqual({
-      value: '22px',
-      label:
-        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.EXTRA_LARGE',
-    });
   });
 
   it('returns currentFontSize from UI settings', () => {
@@ -84,9 +78,6 @@ describe('useFontSize', () => {
     applyFontSize('14px');
     expect(document.documentElement.style.fontSize).toBe('14px');
 
-    applyFontSize('22px');
-    expect(document.documentElement.style.fontSize).toBe('22px');
-
     applyFontSize('16px');
     expect(document.documentElement.style.fontSize).toBe('16px');
   });
@@ -145,8 +136,6 @@ describe('useFontSize', () => {
           'Smaller',
         'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.DEFAULT':
           'Default',
-        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.EXTRA_LARGE':
-          'Extra Large',
       };
       return translations[key] || key;
     });
@@ -160,9 +149,6 @@ describe('useFontSize', () => {
     expect(fontSizeOptions.find(option => option.value === '16px').label).toBe(
       'Default'
     );
-    expect(fontSizeOptions.find(option => option.value === '22px').label).toBe(
-      'Extra Large'
-    );
 
     // Verify translation function was called with correct keys
     expect(mockTranslate).toHaveBeenCalledWith(
diff --git a/app/javascript/dashboard/composables/useFontSize.js b/app/javascript/dashboard/composables/useFontSize.js
index 9bb8d4841..d7177a5fb 100644
--- a/app/javascript/dashboard/composables/useFontSize.js
+++ b/app/javascript/dashboard/composables/useFontSize.js
@@ -19,7 +19,6 @@ const FONT_SIZE_OPTIONS = {
   DEFAULT: '16px',
   LARGE: '18px',
   LARGER: '20px',
-  EXTRA_LARGE: '22px',
 };
 
 /**
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index da2f64b01..26ec6dc16 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -70,6 +70,7 @@
       "RESOLVE_ACTION": "Resolve",
       "REOPEN_ACTION": "Reopen",
       "OPEN_ACTION": "Open",
+      "MORE_ACTIONS": "More actions",
       "OPEN": "More",
       "CLOSE": "Close",
       "DETAILS": "details",

From 8bbf6c75e399d39551ae4c633be7344320dd7b54 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Thu, 29 May 2025 21:18:02 -0600
Subject: [PATCH 14/16] chore: Improvements to codespaces (#11635)

- Remove the deprecated extensions
- Install claude code in base image
- Fix rails deprecation warning
---
 .devcontainer/Dockerfile.base      |  4 ++--
 .devcontainer/devcontainer.json    | 17 +++++++++++++----
 .devcontainer/scripts/setup.sh     |  8 ++++++++
 Makefile                           |  1 +
 config/environments/development.rb |  2 +-
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/.devcontainer/Dockerfile.base b/.devcontainer/Dockerfile.base
index 2b74602b8..dc7d4eb8c 100644
--- a/.devcontainer/Dockerfile.base
+++ b/.devcontainer/Dockerfile.base
@@ -77,8 +77,8 @@ RUN curl -L https://github.com/DarthSim/overmind/releases/download/v2.1.0/overmi
 WORKDIR /workspace
 RUN chown vscode:vscode /workspace
 
-# set up node js and pnpm in single layer
-RUN npm install -g pnpm@${PNPM_VERSION} \
+# set up node js, pnpm and claude code in single layer
+RUN npm install -g pnpm@${PNPM_VERSION} @anthropic-ai/claude-code \
     && npm cache clean --force
 
 # Switch to vscode user
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index c51338b51..2e237bbcb 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -4,17 +4,26 @@
   "dockerComposeFile": "docker-compose.yml",
 
   "settings": {
-    "terminal.integrated.shell.linux": "/bin/zsh"
+    "terminal.integrated.shell.linux": "/bin/zsh",
+    "extensions.showRecommendationsOnlyOnDemand": true,
+    "editor.formatOnSave": true,
+    "files.trimTrailingWhitespace": true,
+    "files.insertFinalNewline": true,
+    "search.exclude": {
+      "**/node_modules": true,
+      "**/tmp": true,
+      "**/log": true,
+      "**/coverage": true,
+      "**/public/packs": true
+    }
   },
 
 
   // Add the IDs of extensions you want installed when the container is created.
   "extensions": [
-    "rebornix.Ruby",
+    "Shopify.ruby-lsp",
     "misogi.ruby-rubocop",
-    "wingrunr21.vscode-ruby",
     "davidpallinder.rails-test-runner",
-    "eamodio.gitlens",
     "github.copilot",
     "mrmlnc.vscode-duplicate"
   ],
diff --git a/.devcontainer/scripts/setup.sh b/.devcontainer/scripts/setup.sh
index 6beb2ff57..36db5cfd9 100755
--- a/.devcontainer/scripts/setup.sh
+++ b/.devcontainer/scripts/setup.sh
@@ -4,5 +4,13 @@ sed -i -e '/POSTGRES_HOST/ s/=.*/=localhost/' .env
 sed -i -e '/SMTP_ADDRESS/ s/=.*/=localhost/' .env
 sed -i -e "/FRONTEND_URL/ s/=.*/=https:\/\/$CODESPACE_NAME-3000.app.github.dev/" .env
 
+# Setup Claude Code API key if available
+if [ -n "$CLAUDE_CODE_API_KEY" ]; then
+  mkdir -p ~/.claude
+  echo '{"apiKeyHelper": "~/.claude/anthropic_key.sh"}' > ~/.claude/settings.json
+  echo "echo \"$CLAUDE_CODE_API_KEY\"" > ~/.claude/anthropic_key.sh
+  chmod +x ~/.claude/anthropic_key.sh
+fi
+
 # codespaces make the ports public
 gh codespace ports visibility 3000:public 3036:public 8025:public -c $CODESPACE_NAME
diff --git a/Makefile b/Makefile
index 1c5ce297c..b7a936dc4 100644
--- a/Makefile
+++ b/Makefile
@@ -41,6 +41,7 @@ run:
 
 force_run:
 	rm -f ./.overmind.sock
+	rm -f tmp/pids/*.pid
 	overmind start -f Procfile.dev
 
 debug:
diff --git a/config/environments/development.rb b/config/environments/development.rb
index 7f72e6d2f..822a67939 100644
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@@ -66,7 +66,7 @@ Rails.application.configure do
   # GitHub Codespaces configuration
   if ENV['CODESPACES']
     # Allow web console access from any IP
-    config.web_console.whitelisted_ips = %w(0.0.0.0/0 ::/0)
+    config.web_console.allowed_ips = %w(0.0.0.0/0 ::/0)
     # Allow CSRF from codespace URLs
     config.force_ssl = false
     config.action_controller.forgery_protection_origin_check = false

From 07a39f4b42b1286949ad3cb7f80942c004287b79 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 30 May 2025 15:19:42 +0530
Subject: [PATCH 15/16] feat: Enforce role permissions on filtered page
 (#11638)

Fixes: https://github.com/chatwoot/chatwoot/issues/11610

Demo:
https://www.loom.com/share/c9181b42619044379ba01e0ac913801d?sid=e306fe30-ce80-47ac-83e5-92132a99f464
---
 .../store/modules/conversations/getters.js    |  33 +-
 .../specs/conversations/getters.spec.js       | 304 ++++++++++++++++++
 2 files changed, 331 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/store/modules/conversations/getters.js b/app/javascript/dashboard/store/modules/conversations/getters.js
index f5b83e546..9f5744fbb 100644
--- a/app/javascript/dashboard/store/modules/conversations/getters.js
+++ b/app/javascript/dashboard/store/modules/conversations/getters.js
@@ -18,13 +18,34 @@ const getters = {
   getAllConversations: ({ allConversations, chatSortFilter: sortKey }) => {
     return allConversations.sort((a, b) => sortComparator(a, b, sortKey));
   },
-  getFilteredConversations: ({
-    allConversations,
-    chatSortFilter,
-    appliedFilters,
-  }) => {
+  getFilteredConversations: (
+    { allConversations, chatSortFilter, appliedFilters },
+    _,
+    __,
+    rootGetters
+  ) => {
+    const currentUser = rootGetters.getCurrentUser;
+    const currentUserId = rootGetters.getCurrentUser.id;
+    const currentAccountId = rootGetters.getCurrentAccountId;
+
+    const permissions = getUserPermissions(currentUser, currentAccountId);
+    const userRole = getUserRole(currentUser, currentAccountId);
+
     return allConversations
-      .filter(conversation => matchesFilters(conversation, appliedFilters))
+      .filter(conversation => {
+        const matchesFilterResult = matchesFilters(
+          conversation,
+          appliedFilters
+        );
+        const allowedForRole = applyRoleFilter(
+          conversation,
+          userRole,
+          permissions,
+          currentUserId
+        );
+
+        return matchesFilterResult && allowedForRole;
+      })
       .sort((a, b) => sortComparator(a, b, chatSortFilter));
   },
   getSelectedChat: ({ selectedChatId, allConversations }) => {
diff --git a/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js
index 8ac89f49a..7b6c38456 100644
--- a/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js
@@ -325,4 +325,308 @@ describe('#getters', () => {
       });
     });
   });
+
+  describe('#getFilteredConversations', () => {
+    const mockConversations = [
+      {
+        id: 1,
+        status: 'open',
+        meta: { assignee: { id: 1 } },
+        last_activity_at: 1000,
+      },
+      {
+        id: 2,
+        status: 'open',
+        meta: {},
+        last_activity_at: 2000,
+      },
+      {
+        id: 3,
+        status: 'resolved',
+        meta: { assignee: { id: 2 } },
+        last_activity_at: 3000,
+      },
+    ];
+
+    const mockRootGetters = {
+      getCurrentUser: {
+        id: 1,
+        accounts: [{ id: 1, role: 'agent', permissions: [] }],
+      },
+      getCurrentAccountId: 1,
+    };
+
+    it('filters conversations based on role permissions for administrator', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [{ id: 1, role: 'administrator', permissions: [] }],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      expect(result).toEqual([
+        mockConversations[2],
+        mockConversations[1],
+        mockConversations[0],
+      ]);
+    });
+
+    it('filters conversations based on role permissions for agent', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [{ id: 1, role: 'agent', permissions: [] }],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      expect(result).toEqual([
+        mockConversations[2],
+        mockConversations[1],
+        mockConversations[0],
+      ]);
+    });
+
+    it('filters conversations for custom role with conversation_manage permission', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: ['conversation_manage'],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      expect(result).toEqual([
+        mockConversations[2],
+        mockConversations[1],
+        mockConversations[0],
+      ]);
+    });
+
+    it('filters conversations for custom role with conversation_unassigned_manage permission', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: ['conversation_unassigned_manage'],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      // Should include conversation assigned to user (id: 1) and unassigned conversation
+      expect(result).toEqual([mockConversations[1], mockConversations[0]]);
+    });
+
+    it('filters conversations for custom role with conversation_participating_manage permission', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: ['conversation_participating_manage'],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      // Should only include conversation assigned to user (id: 1)
+      expect(result).toEqual([mockConversations[0]]);
+    });
+
+    it('filters conversations for custom role with no permissions', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: [],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      // Should return empty array as user has no permissions
+      expect(result).toEqual([]);
+    });
+
+    it('applies filters and role permissions together', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [
+          {
+            attribute_key: 'status',
+            filter_operator: 'equal_to',
+            values: ['open'],
+            query_operator: 'and',
+          },
+        ],
+      };
+
+      const rootGetters = {
+        ...mockRootGetters,
+        getCurrentUser: {
+          ...mockRootGetters.getCurrentUser,
+          accounts: [
+            {
+              id: 1,
+              custom_role_id: 5,
+              permissions: ['conversation_participating_manage'],
+            },
+          ],
+        },
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        rootGetters
+      );
+
+      // Should only include open conversation assigned to user (id: 1)
+      expect(result).toEqual([mockConversations[0]]);
+    });
+
+    it('returns empty array when no conversations match filters', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_desc',
+        appliedFilters: [
+          {
+            attribute_key: 'status',
+            filter_operator: 'equal_to',
+            values: ['pending'],
+            query_operator: 'and',
+          },
+        ],
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        mockRootGetters
+      );
+
+      expect(result).toEqual([]);
+    });
+
+    it('sorts filtered conversations according to chatSortFilter', () => {
+      const state = {
+        allConversations: mockConversations,
+        chatSortFilter: 'last_activity_at_asc',
+        appliedFilters: [],
+      };
+
+      const result = getters.getFilteredConversations(
+        state,
+        {},
+        {},
+        mockRootGetters
+      );
+
+      expect(result).toEqual([
+        mockConversations[0],
+        mockConversations[1],
+        mockConversations[2],
+      ]);
+    });
+  });
 });

From f064b097765a5a8c318794b6214c2abc6893a086 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 30 May 2025 16:26:40 +0530
Subject: [PATCH 16/16] feat: move embedding config to a yaml file (#11611)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 config/markdown_embeds.yml          | 132 ++++++++++++++++++++++++++++
 lib/custom_markdown_renderer.rb     |  95 ++++++++------------
 lib/embed_renderer.rb               | 102 ---------------------
 spec/config/markdown_embeds_spec.rb | 103 ++++++++++++++++++++++
 4 files changed, 270 insertions(+), 162 deletions(-)
 create mode 100644 config/markdown_embeds.yml
 delete mode 100644 lib/embed_renderer.rb
 create mode 100644 spec/config/markdown_embeds_spec.rb

diff --git a/config/markdown_embeds.yml b/config/markdown_embeds.yml
new file mode 100644
index 000000000..878276c5a
--- /dev/null
+++ b/config/markdown_embeds.yml
@@ -0,0 +1,132 @@
+# Markdown Embed Configuration
+#
+# This file defines patterns and templates for converting URLs into embedded content
+# in markdown rendering. Each embed type has:
+#   - regex: Pattern with named capture groups (?<name>...)
+#   - template: HTML template with %{capture_group_name} placeholders
+#
+# To add a new embed type:
+# 1. Add a new top-level key
+# 2. Define the regex pattern with named capture groups: (?<name>pattern)
+# 3. Create an HTML template using %{name} placeholders matching the capture groups
+
+youtube:
+  regex: 'https?://(?:www\.)?(?:youtube\.com/watch\?v=|youtu\.be/)(?<video_id>[^&/]+)'
+  template: |
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+     <iframe
+      src="https://www.youtube-nocookie.com/embed/%{video_id}"
+      frameborder="0"
+      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen></iframe>
+    </div>
+
+loom:
+  regex: 'https?://(?:www\.)?loom\.com/share/(?<video_id>[^&/]+)'
+  template: |
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+      <iframe
+       src="https://www.loom.com/embed/%{video_id}"
+       frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
+       style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+    </div>
+
+vimeo:
+  regex: 'https?://(?:www\.)?vimeo\.com/(?<video_id>\d+)'
+  template: |
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+     <iframe
+      src="https://player.vimeo.com/video/%{video_id}?dnt=true"
+      frameborder="0"
+      allow="autoplay; fullscreen; picture-in-picture"
+      allowfullscreen
+      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+     </div>
+
+mp4:
+  regex: '(?<link_url>https?://(?:www\.)?.+\.mp4)'
+  template: |
+    <video width="640" height="360" controls>
+      <source src="%{link_url}" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+
+arcade:
+  regex: 'https?://(?:www\.)?app\.arcade\.software/share/(?<video_id>[^&/]+)'
+  template: |
+    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+      <iframe
+        src="https://app.arcade.software/embed/%{video_id}"
+        frameborder="0"
+        webkitallowfullscreen
+        mozallowfullscreen
+        allowfullscreen
+        allow="fullscreen"
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+      </iframe>
+    </div>
+
+wistia:
+  regex: 'https?://(?:www\.)?[^/]+\.wistia\.com/medias/(?<video_id>[^&/]+)'
+  template: |
+    <div style="position: relative; padding-bottom: 56.25%; height: 0;">
+      <script src="https://fast.wistia.com/player.js" async></script>
+      <script src="https://fast.wistia.com/embed/%{video_id}.js" async type="module"></script>
+      <style>
+        wistia-player[media-id='%{video_id}']:not(:defined) {
+          background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/%{video_id}/swatch');
+          display: block;
+          filter: blur(5px);
+          padding-top:56.25%;
+        }
+      </style>
+      <wistia-player
+        media-id="%{video_id}"
+        aspect="1.7777777777777777"
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+      </wistia-player>
+    </div>
+
+bunny:
+  regex: 'https?://iframe\.mediadelivery\.net/play/(?<library_id>\d+)/(?<video_id>[^&/?]+)'
+  template: |
+    <div style="position: relative; padding-top: 56.25%;">
+      <iframe
+        src="https://iframe.mediadelivery.net/embed/%{library_id}/%{video_id}?autoplay=false&loop=false&muted=false&preload=true&responsive=true"
+        title="Bunny video player"
+        loading="lazy"
+        style="border: 0; position: absolute; top: 0; height: 100%; width: 100%;"
+        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
+        allowfullscreen>
+      </iframe>
+    </div>
+
+codepen:
+  regex: 'https?://(?:www\.)?codepen\.io/(?<user>[^/]+)/pen/(?<pen_id>[^/?]+)'
+  template: |
+    <div style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;">
+      <iframe
+        height="400"
+        style="width: 100%;"
+        scrolling="no"
+        title="CodePen Embed"
+        src="https://codepen.io/%{user}/embed/%{pen_id}?default-tab=result"
+        frameborder="no"
+        loading="lazy"
+        allowtransparency="true"
+        allowfullscreen="true">
+      </iframe>
+    </div>
+
+github_gist:
+  regex: 'https?://gist\.github\.com/(?<username>[^/]+)/(?<gist_id>[a-f0-9]+)'
+  template: |
+    <script src="https://gist.github.com/%{username}/%{gist_id}.js"></script>
+    <noscript>
+      <div style="border: 1px solid #d1d9e0; border-radius: 6px; padding: 16px; margin: 16px 0; background: #f6f8fa;">
+        <a href="https://gist.github.com/%{username}/%{gist_id}" target="_blank" style="color: #0969da; text-decoration: none;">
+          View this gist on GitHub
+        </a>
+      </div>
+    </noscript>
diff --git a/lib/custom_markdown_renderer.rb b/lib/custom_markdown_renderer.rb
index 902fc20a3..fea10388c 100644
--- a/lib/custom_markdown_renderer.rb
+++ b/lib/custom_markdown_renderer.rb
@@ -1,13 +1,13 @@
 class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
-  # TODO: let move this regex from here to a config file where we can update this list much more easily
-  # the config file will also have the matching embed template as well.
-  YOUTUBE_REGEX = %r{https?://(?:www\.)?(?:youtube\.com/watch\?v=|youtu\.be/)([^&/]+)}
-  LOOM_REGEX = %r{https?://(?:www\.)?loom\.com/share/([^&/]+)}
-  VIMEO_REGEX = %r{https?://(?:www\.)?vimeo\.com/(\d+)}
-  MP4_REGEX = %r{https?://(?:www\.)?.+\.(mp4)}
-  ARCADE_REGEX = %r{https?://(?:www\.)?app\.arcade\.software/share/([^&/]+)}
-  WISTIA_REGEX = %r{https?://(?:www\.)?([^/]+)\.wistia\.com/medias/([^&/]+)}
-  BUNNY_REGEX = %r{https?://iframe\.mediadelivery\.net/play/(\d+)/([^&/?]+)}
+  CONFIG_PATH = Rails.root.join('config/markdown_embeds.yml')
+
+  def self.config
+    @config ||= YAML.load_file(CONFIG_PATH)
+  end
+
+  def self.embed_regexes
+    @embed_regexes ||= config.transform_values { |embed_config| Regexp.new(embed_config['regex']) }
+  end
 
   def text(node)
     content = node.string_content
@@ -23,7 +23,7 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
   def link(node)
     return if surrounded_by_empty_lines?(node) && render_embedded_content(node)
 
-    # If it's not YouTube or Vimeo link, render normally
+    # If it's not a supported embed link, render normally
     super
   end
 
@@ -47,25 +47,35 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
 
   def render_embedded_content(node)
     link_url = node.url
-    embedding_methods = {
-      YOUTUBE_REGEX => :make_youtube_embed,
-      VIMEO_REGEX => :make_vimeo_embed,
-      MP4_REGEX => :make_video_embed,
-      LOOM_REGEX => :make_loom_embed,
-      ARCADE_REGEX => :make_arcade_embed,
-      WISTIA_REGEX => :make_wistia_embed,
-      BUNNY_REGEX => :make_bunny_embed
-    }
+    embed_html = find_matching_embed(link_url)
 
-    embedding_methods.each do |regex, method|
+    return false unless embed_html
+
+    out(embed_html)
+    true
+  end
+
+  def find_matching_embed(link_url)
+    self.class.embed_regexes.each do |embed_key, regex|
       match = link_url.match(regex)
-      if match
-        out(send(method, match))
-        return true
-      end
+      next unless match
+
+      return render_embed_from_match(embed_key, match)
     end
 
-    false
+    nil
+  end
+
+  def render_embed_from_match(embed_key, match_data)
+    embed_config = self.class.config[embed_key]
+    return nil unless embed_config
+
+    template = embed_config['template']
+    # Use Ruby's built-in named captures with gsub to handle CSS % values
+    match_data.named_captures.each do |var_name, value|
+      template = template.gsub("%{#{var_name}}", value)
+    end
+    template
   end
 
   def parse_sup(content)
@@ -77,39 +87,4 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
       end
     end
   end
-
-  def make_youtube_embed(youtube_match)
-    video_id = youtube_match[1]
-    EmbedRenderer.youtube(video_id)
-  end
-
-  def make_loom_embed(loom_match)
-    video_id = loom_match[1]
-    EmbedRenderer.loom(video_id)
-  end
-
-  def make_vimeo_embed(vimeo_match)
-    video_id = vimeo_match[1]
-    EmbedRenderer.vimeo(video_id)
-  end
-
-  def make_video_embed(link_url)
-    EmbedRenderer.video(link_url)
-  end
-
-  def make_wistia_embed(wistia_match)
-    video_id = wistia_match[2]
-    EmbedRenderer.wistia(video_id)
-  end
-
-  def make_arcade_embed(arcade_match)
-    video_id = arcade_match[1]
-    EmbedRenderer.arcade(video_id)
-  end
-
-  def make_bunny_embed(bunny_match)
-    library_id = bunny_match[1]
-    video_id = bunny_match[2]
-    EmbedRenderer.bunny(library_id, video_id)
-  end
 end
diff --git a/lib/embed_renderer.rb b/lib/embed_renderer.rb
deleted file mode 100644
index 78f620376..000000000
--- a/lib/embed_renderer.rb
+++ /dev/null
@@ -1,102 +0,0 @@
-module EmbedRenderer
-  def self.youtube(video_id)
-    %(
-      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
-       <iframe
-        src="https://www.youtube-nocookie.com/embed/#{video_id}"
-        frameborder="0"
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen></iframe>
-      </div>
-    )
-  end
-
-  def self.loom(video_id)
-    %(
-      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
-        <iframe
-         src="https://www.loom.com/embed/#{video_id}"
-         frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
-         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
-      </div>
-    )
-  end
-
-  def self.vimeo(video_id)
-    %(
-      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
-       <iframe
-        src="https://player.vimeo.com/video/#{video_id}?dnt=true"
-        frameborder="0"
-        allow="autoplay; fullscreen; picture-in-picture"
-        allowfullscreen
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
-       </div>
-    )
-  end
-
-  def self.video(link_url)
-    %(
-      <video width="640" height="360" controls>
-        <source src="#{link_url}" type="video/mp4">
-        Your browser does not support the video tag.
-      </video>
-    )
-  end
-
-  # Generates an HTML embed for a Wistia video.
-  # @param wistia_match [MatchData] A match object from the WISTIA_REGEX regex, where wistia_match[2] contains the video ID.
-  def self.wistia(video_id)
-    %(
-      <div style="position: relative; padding-bottom: 56.25%; height: 0;">
-        <script src="https://fast.wistia.com/player.js" async></script>
-        <script src="https://fast.wistia.com/embed/#{video_id}.js" async type="module"></script>
-        <style>
-          wistia-player[media-id='#{video_id}']:not(:defined) {
-            background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/#{video_id}/swatch');
-            display: block;
-            filter: blur(5px);
-            padding-top:56.25%;
-          }
-        </style>
-        <wistia-player
-          media-id="#{video_id}"
-          aspect="1.7777777777777777"
-          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-        </wistia-player>
-      </div>
-    )
-  end
-
-  def self.arcade(video_id)
-    %(
-    <div style="position: relative; padding-bottom: 62.5%; height: 0;">
-      <iframe
-        src="https://app.arcade.software/embed/#{video_id}"
-        frameborder="0"
-        webkitallowfullscreen
-        mozallowfullscreen
-        allowfullscreen
-        allow="fullscreen"
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-      </iframe>
-    </div>
-  )
-  end
-
-  def self.bunny(library_id, video_id)
-    %(
-      <div style="position: relative; padding-top: 56.25%;">
-        <iframe
-          src="https://iframe.mediadelivery.net/embed/#{library_id}/#{video_id}?autoplay=false&loop=false&muted=false&preload=true&responsive=true"
-          title="Bunny video player"
-          loading="lazy"
-          style="border: 0; position: absolute; top: 0; height: 100%; width: 100%;"
-          allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
-          allowfullscreen>
-        </iframe>
-      </div>
-    )
-  end
-end
diff --git a/spec/config/markdown_embeds_spec.rb b/spec/config/markdown_embeds_spec.rb
new file mode 100644
index 000000000..2eff75bcd
--- /dev/null
+++ b/spec/config/markdown_embeds_spec.rb
@@ -0,0 +1,103 @@
+require 'rails_helper'
+
+# rubocop:disable RSpec/DescribeClass
+describe 'Markdown Embeds Configuration' do
+  # rubocop:enable RSpec/DescribeClass
+  let(:config) { YAML.load_file(Rails.root.join('config/markdown_embeds.yml')) }
+
+  describe 'YAML structure' do
+    it 'loads valid YAML' do
+      expect(config).to be_a(Hash)
+      expect(config).not_to be_empty
+    end
+
+    it 'has required keys for each embed type' do
+      config.each do |embed_type, embed_config|
+        expect(embed_config).to have_key('regex'), "#{embed_type} missing regex"
+        expect(embed_config).to have_key('template'), "#{embed_type} missing template"
+        expect(embed_config['regex']).to be_a(String), "#{embed_type} regex should be string"
+        expect(embed_config['template']).to be_a(String), "#{embed_type} template should be string"
+      end
+    end
+
+    it 'contains expected embed types' do
+      expected_types = %w[youtube loom vimeo mp4 arcade wistia bunny codepen github_gist]
+      expect(config.keys).to match_array(expected_types)
+    end
+  end
+
+  describe 'regex patterns and named capture groups' do
+    let(:test_cases) do
+      {
+        'youtube' => [
+          { url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', expected: { 'video_id' => 'dQw4w9WgXcQ' } },
+          { url: 'https://youtu.be/dQw4w9WgXcQ', expected: { 'video_id' => 'dQw4w9WgXcQ' } },
+          { url: 'https://youtube.com/watch?v=abc123XYZ', expected: { 'video_id' => 'abc123XYZ' } }
+        ],
+        'loom' => [
+          { url: 'https://www.loom.com/share/abc123def456', expected: { 'video_id' => 'abc123def456' } },
+          { url: 'https://loom.com/share/xyz789', expected: { 'video_id' => 'xyz789' } }
+        ],
+        'vimeo' => [
+          { url: 'https://vimeo.com/123456789', expected: { 'video_id' => '123456789' } },
+          { url: 'https://www.vimeo.com/987654321', expected: { 'video_id' => '987654321' } }
+        ],
+        'mp4' => [
+          { url: 'https://example.com/video.mp4', expected: { 'link_url' => 'https://example.com/video.mp4' } },
+          { url: 'https://www.test.com/path/to/movie.mp4', expected: { 'link_url' => 'https://www.test.com/path/to/movie.mp4' } }
+        ],
+        'arcade' => [
+          { url: 'https://app.arcade.software/share/arcade123', expected: { 'video_id' => 'arcade123' } },
+          { url: 'https://www.app.arcade.software/share/demo456', expected: { 'video_id' => 'demo456' } }
+        ],
+        'wistia' => [
+          { url: 'https://chatwoot.wistia.com/medias/kjwjeq6f9i', expected: { 'video_id' => 'kjwjeq6f9i' } },
+          { url: 'https://www.company.wistia.com/medias/abc123def', expected: { 'video_id' => 'abc123def' } }
+        ],
+        'bunny' => [
+          { url: 'https://iframe.mediadelivery.net/play/431789/1f105841-cad9-46fe-a70e-b7623c60797c',
+            expected: { 'library_id' => '431789', 'video_id' => '1f105841-cad9-46fe-a70e-b7623c60797c' } },
+          { url: 'https://iframe.mediadelivery.net/play/12345/abcdef-ghijkl', expected: { 'library_id' => '12345', 'video_id' => 'abcdef-ghijkl' } }
+        ],
+        'codepen' => [
+          { url: 'https://codepen.io/username/pen/abcdef', expected: { 'user' => 'username', 'pen_id' => 'abcdef' } },
+          { url: 'https://www.codepen.io/testuser/pen/xyz123', expected: { 'user' => 'testuser', 'pen_id' => 'xyz123' } }
+        ],
+        'github_gist' => [
+          { url: 'https://gist.github.com/username/1234567890abcdef1234567890abcdef',
+            expected: { 'username' => 'username', 'gist_id' => '1234567890abcdef1234567890abcdef' } },
+          { url: 'https://gist.github.com/testuser/fedcba0987654321fedcba0987654321', expected: { 'username' => 'testuser', 'gist_id' => 'fedcba0987654321fedcba0987654321' } }
+        ]
+      }
+    end
+
+    it 'correctly captures named groups for all embed types' do
+      test_cases.each do |embed_type, cases|
+        regex = Regexp.new(config[embed_type]['regex'])
+
+        cases.each do |test_case|
+          match = regex.match(test_case[:url])
+          expect(match).not_to be_nil, "#{embed_type} regex failed to match URL: #{test_case[:url]}"
+          expect(match.named_captures).to eq(test_case[:expected]),
+                                          "#{embed_type} captured groups don't match expected for URL: #{test_case[:url]}"
+        end
+      end
+    end
+
+    it 'validates that template variables match capture group names' do
+      config.each do |embed_type, embed_config|
+        regex = Regexp.new(embed_config['regex'])
+        template = embed_config['template']
+
+        # Extract template variables like %{video_id}
+        template_vars = template.scan(/%\{(\w+)\}/).flatten.uniq
+
+        # Get named capture groups from regex
+        capture_names = regex.names
+
+        expect(capture_names).to match_array(template_vars),
+                                 "#{embed_type}: Template variables #{template_vars} don't match capture groups #{capture_names}"
+      end
+    end
+  end
+end