From 8ebe77a5fd3bf4f3c33ba97f346d5e110128cd78 Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Sun, 18 Jan 2026 11:55:43 +0530
Subject: [PATCH] - Fix copy button component usage - Set --primary color value
 correct in live chat widget.

---
 .../main/src/components/button/CopyButton.vue |  1 +
 .../src/features/admin/agents/AgentForm.vue   |  4 +-
 .../admin/inbox/LivechatInboxForm.vue         | 10 ++--
 .../admin/inbox/livechatFormSchema.js         |  2 +-
 frontend/apps/widget/src/App.vue              |  3 ++
 frontend/shared-ui/utils/color.js             | 50 +++++++++++++++++++
 i18n/en.json                                  |  2 +-
 7 files changed, 63 insertions(+), 9 deletions(-)
 create mode 100644 frontend/shared-ui/utils/color.js

diff --git a/frontend/apps/main/src/components/button/CopyButton.vue b/frontend/apps/main/src/components/button/CopyButton.vue
index 96d2b2a5..97475f85 100644
--- a/frontend/apps/main/src/components/button/CopyButton.vue
+++ b/frontend/apps/main/src/components/button/CopyButton.vue
@@ -1,5 +1,6 @@
 <template>
   <Button
+    type="button"
     variant="ghost"
     size="icon"
     class="h-7 w-7 text-zinc-400 hover:text-white hover:bg-zinc-700"
diff --git a/frontend/apps/main/src/features/admin/agents/AgentForm.vue b/frontend/apps/main/src/features/admin/agents/AgentForm.vue
index bc1bcde8..a00bd41f 100644
--- a/frontend/apps/main/src/features/admin/agents/AgentForm.vue
+++ b/frontend/apps/main/src/features/admin/agents/AgentForm.vue
@@ -133,7 +133,7 @@
             <div class="flex items-center gap-2 mt-1">
               <Input v-model="newAPIKeyData.api_key" readonly class="font-mono text-sm" />
               <CopyButton
-                :text-to-copy="newAPIKeyData.api_key"
+                :text="newAPIKeyData.api_key"
                 variant="outline"
                 size="sm"
                 :show-text="false"
@@ -145,7 +145,7 @@
             <div class="flex items-center gap-2 mt-1">
               <Input v-model="newAPIKeyData.api_secret" readonly class="font-mono text-sm" />
               <CopyButton
-                :text-to-copy="newAPIKeyData.api_secret"
+                :text="newAPIKeyData.api_secret"
                 variant="outline"
                 size="sm"
                 :show-text="false"
diff --git a/frontend/apps/main/src/features/admin/inbox/LivechatInboxForm.vue b/frontend/apps/main/src/features/admin/inbox/LivechatInboxForm.vue
index 6559f2ab..43f9eaf9 100644
--- a/frontend/apps/main/src/features/admin/inbox/LivechatInboxForm.vue
+++ b/frontend/apps/main/src/features/admin/inbox/LivechatInboxForm.vue
@@ -723,7 +723,7 @@
           <!-- Basic Installation -->
           <div class="relative">
             <CodeEditor :modelValue="integrationSnippet" language="html" :readOnly="true" />
-            <CopyButton :text-to-copy="integrationSnippet" class="absolute top-3 right-3" />
+            <CopyButton :text="integrationSnippet" class="absolute top-3 right-3" />
           </div>
 
           <!-- Authenticated Users Section -->
@@ -738,7 +738,7 @@
 
             <div class="relative">
               <CodeEditor :modelValue="jwtPayloadExample" language="javascript" :readOnly="true" />
-              <CopyButton :text-to-copy="jwtPayloadExample" class="absolute top-3 right-3" />
+              <CopyButton :text="jwtPayloadExample" class="absolute top-3 right-3" />
             </div>
 
             <p class="text-sm text-muted-foreground">
@@ -752,7 +752,7 @@
                 :readOnly="true"
               />
               <CopyButton
-                :text-to-copy="authenticatedIntegrationSnippet"
+                :text="authenticatedIntegrationSnippet"
                 class="absolute top-3 right-3"
               />
             </div>
@@ -908,8 +908,8 @@ const form = useForm({
           bottom: 20
         }
       },
-      greeting_message: '',
-      introduction_message: '',
+      greeting_message: 'Hello {{.FirstName}}',
+      introduction_message: 'How can we help?',
       chat_introduction: 'Ask us anything, or share your feedback.',
       show_office_hours_in_chat: false,
       show_office_hours_after_assignment: false,
diff --git a/frontend/apps/main/src/features/admin/inbox/livechatFormSchema.js b/frontend/apps/main/src/features/admin/inbox/livechatFormSchema.js
index 5411bf52..3c5e3f23 100644
--- a/frontend/apps/main/src/features/admin/inbox/livechatFormSchema.js
+++ b/frontend/apps/main/src/features/admin/inbox/livechatFormSchema.js
@@ -4,7 +4,7 @@ export const createFormSchema = (t) => z.object({
   name: z.string().min(1, { message: t('globals.messages.required') }),
   enabled: z.boolean(),
   csat_enabled: z.boolean(),
-  secret: z.string(),
+  secret: z.string().nullable().optional(),
   linked_email_inbox_id: z.number().nullable().optional(),
   config: z.object({
     brand_name: z.string().min(1, { message: t('globals.messages.required') }),
diff --git a/frontend/apps/widget/src/App.vue b/frontend/apps/widget/src/App.vue
index feb6d9c7..ab85e987 100644
--- a/frontend/apps/widget/src/App.vue
+++ b/frontend/apps/widget/src/App.vue
@@ -16,6 +16,7 @@ import { useChatStore } from '@widget/store/chat.js'
 import { useUserStore } from './store/user.js'
 import { initWidgetWS, closeWidgetWebSocket } from './websocket.js'
 import { useUnreadCount } from './composables/useUnreadCount.js'
+import { applyCSSColor } from '@shared-ui/utils/color.js'
 import MainLayout from '@widget/layouts/MainLayout.vue'
 
 const widgetStore = useWidgetStore()
@@ -30,6 +31,8 @@ onMounted(async () => {
   const widgetConfig = getCurrentInstance().appContext.config.globalProperties.$widgetConfig
   if (widgetConfig) {
     widgetStore.updateConfig(widgetConfig)
+    // Apply custom primary color from config
+    applyCSSColor('--primary', widgetConfig.colors?.primary)
   }
 
   initializeWebSocket()
diff --git a/frontend/shared-ui/utils/color.js b/frontend/shared-ui/utils/color.js
new file mode 100644
index 00000000..26c95326
--- /dev/null
+++ b/frontend/shared-ui/utils/color.js
@@ -0,0 +1,50 @@
+/**
+ * Convert hex color to HSL format for CSS variables.
+ * @param {string} hex - Hex color (e.g., "#2563eb" or "2563eb")
+ * @returns {string} HSL values formatted for CSS (e.g., "217 91% 60%")
+ */
+export const hexToHSL = (hex) => {
+  hex = hex.replace(/^#/, '')
+
+  const r = parseInt(hex.substring(0, 2), 16) / 255
+  const g = parseInt(hex.substring(2, 4), 16) / 255
+  const b = parseInt(hex.substring(4, 6), 16) / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h,
+    s,
+    l = (max + min) / 2
+
+  if (max === min) {
+    h = s = 0
+  } else {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6
+        break
+      case g:
+        h = ((b - r) / d + 2) / 6
+        break
+      case b:
+        h = ((r - g) / d + 4) / 6
+        break
+    }
+  }
+
+  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`
+}
+
+/**
+ * Apply a hex color to a CSS variable on the document root.
+ * @param {string} variableName - CSS variable name (e.g., "--primary")
+ * @param {string} hexColor - Hex color value
+ */
+export const applyCSSColor = (variableName, hexColor) => {
+  if (hexColor) {
+    const hslValue = hexToHSL(hexColor)
+    document.documentElement.style.setProperty(variableName, hslValue)
+  }
+}
diff --git a/i18n/en.json b/i18n/en.json
index 5d070d47..eefa1292 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -624,7 +624,7 @@
   "admin.inbox.livechat.features.allowCloseConversation.description": "Allow users to close their own conversations",
   "admin.inbox.livechat.directToConversation": "Launch directly into conversation",
   "admin.inbox.livechat.directToConversation.description": "Skip the home screen and open directly into the user's latest conversation, or a new conversation if none exists",
-  "admin.inbox.livechat.greetingMessage.variables": "Available variables: {{.FirstName}}, {{.LastName}}",
+  "admin.inbox.livechat.greetingMessage.variables": "Available variables: {'{{.FirstName}}'}, {'{{.LastName}}'}",
   "admin.inbox.livechat.externalLinks": "External links",
   "admin.inbox.livechat.externalLinks.add": "Add external link",
   "admin.inbox.livechat.externalLinks.description": "Add helpful links that will be displayed in the chat widget",