- Fix copy button component usage

- Set --primary color value correct in live chat widget.

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"

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"

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,

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') }),

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()

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)
+  }
+}

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",