Sync prechat form labels with custom attributes; hide stale messages during chat load.

cmd/chat.go

@@ -52,8 +52,10 @@ type conversationResp struct {
 }
 
 type customAttributeWidget struct {
-	ID     int      `json:"id"`
-	Values []string `json:"values"`
+	ID       int      `json:"id"`
+	Values   []string `json:"values"`
+	Name     string   `json:"-"`
+	DataType string   `json:"-"`
 }
 
 type chatInitReq struct {
@@ -1157,8 +1159,10 @@ func filterPreChatFormFields(fields []livechat.PreChatFormField, app *App) ([]li
 			continue
 		}
 		existingCustomAttrs[id] = customAttributeWidget{
-			ID:     attr.ID,
-			Values: attr.Values,
+			ID:       attr.ID,
+			Values:   attr.Values,
+			Name:     attr.Name,
+			DataType: attr.DataType,
 		}
 	}
 
@@ -1172,7 +1176,10 @@ func filterPreChatFormFields(fields []livechat.PreChatFormField, app *App) ([]li
 		}
 
 		// Only keep custom fields if their custom attribute exists
-		if _, exists := existingCustomAttrs[field.CustomAttributeID]; exists {
+		if attr, exists := existingCustomAttrs[field.CustomAttributeID]; exists {
+			// Sync label and type from the current custom attribute definition.
+			field.Label = attr.Name
+			field.Type = attr.DataType
 			filteredFields = append(filteredFields, field)
 		}
 	}

frontend/apps/main/src/features/admin/inbox/PreChatFormConfig.vue

@@ -245,24 +245,26 @@ const fetchCustomAttributes = async () => {
       ...(conversationAttrs.data?.data || [])
     ]
 
-    // Clean up orphaned custom attribute fields
-    const availableCustomAttrIds = customAttributes.value.map((attr) => attr.id)
+    // Build lookup map for custom attributes
+    const customAttrMap = new Map(customAttributes.value.map((attr) => [attr.id, attr]))
+
+    // Clean up orphaned fields and sync labels/types from current custom attribute definitions
     const cleanedFields = (prechatConfig.value.fields || []).filter((field) => {
-      // Keep default fields
       if (field.is_default) return true
-
-      // Keep custom fields that still exist
-      if (field.custom_attribute_id && availableCustomAttrIds.includes(field.custom_attribute_id))
-        return true
-
-      // Remove orphaned custom fields
+      if (field.custom_attribute_id && customAttrMap.has(field.custom_attribute_id)) return true
       return false
+    }).map((field) => {
+      if (!field.is_default && field.custom_attribute_id) {
+        const attr = customAttrMap.get(field.custom_attribute_id)
+        if (attr) {
+          field.label = attr.name
+          field.type = attr.data_type
+        }
+      }
+      return field
     })
 
-    // Update fields if any were removed
-    if (cleanedFields.length !== (prechatConfig.value.fields || []).length) {
-      prechatConfig.value.fields = cleanedFields
-    }
+    prechatConfig.value.fields = cleanedFields
   } catch (error) {
     console.error('Error fetching custom attributes:', error)
     customAttributes.value = []

frontend/apps/widget/src/components/ChatMessages.vue

@@ -3,7 +3,7 @@
     <!-- Loading conversation overlay -->
     <div
       v-if="isLoadingConversation"
-      class="absolute inset-0 bg-background/80 backdrop-blur-sm z-10"
+      class="absolute inset-0 bg-background z-10"
       role="status"
     >
       <Spinner size="md" :text="$t('globals.terms.loading')" absolute />