feat: display contact metadata in chat info panel (#155)

* feat: display contact metadata in chat info panel

Rename custom_fields to metadata in the API response and frontend store,
add a collapsible MetadataSection component that renders key-value pairs,
tables for arrays of objects, and badges for primitive arrays.

* test: add e2e tests for contact metadata panel

- Add updateContact helper to ApiHelper
- Add id="info-button" to ChatView info button for reliable test selector
- Test metadata display: primitives, nested objects, arrays, booleans
- Test collapse/expand, label formatting, and empty metadata state

* fix: clean up contact info panel border spacing

- Remove double border between Tags and metadata sections
- Add border above "No data configured" empty state
- Increase gap between metadata sections for readability

* docs: document contact metadata display in info panel

Author: shridarpatil

docs/src/content/docs/api-reference/contacts.mdx

@@ -218,7 +218,86 @@ To unassign a contact, set `user_id` to `null`:
 ```
 
 <Aside type="tip">
-  Use the `metadata` field to store custom data like customer IDs, order numbers, or any business-specific information.
+  Use the `metadata` field to store custom data like customer IDs, order numbers, or any business-specific information. Metadata is displayed automatically in the **Contact Info** panel in the chat view.
+</Aside>
+
+## Contact Metadata
+
+The `metadata` field is a freeform JSON object that can hold any structured data. It is displayed in the Contact Info panel alongside tags and session data.
+
+### Supported Data Types
+
+Different value types are rendered differently in the panel:
+
+| Type | Display |
+|------|---------|
+| String, number | Key-value row |
+| Boolean | `Yes` / `No` badge |
+| Object | Collapsible section with key-value rows |
+| Array of objects | Collapsible table with column headers |
+| Array of primitives | Inline badges |
+
+### Example
+
+```json
+{
+  "metadata": {
+    "plan": "premium",
+    "age": 30,
+    "active": true,
+    "address": {
+      "city": "Mumbai",
+      "state": "Maharashtra",
+      "zip": "400001"
+    },
+    "orders": [
+      { "id": "ORD-001", "amount": 1500, "status": "delivered" },
+      { "id": "ORD-002", "amount": 2300, "status": "pending" }
+    ],
+    "interests": ["fitness", "tech", "travel"]
+  }
+}
+```
+
+This renders as:
+
+- **General** section — `plan`, `age`, and `active` as key-value rows (boolean shown as a badge)
+- **Address** section — collapsible key-value pairs for `city`, `state`, `zip`
+- **Orders** section — collapsible table with `Id`, `Amount`, `Status` columns
+- **Interests** section — inline badges: `fitness`, `tech`, `travel`
+
+### Nesting Depth
+
+The panel supports **one level of nesting**. Top-level keys are organized as follows:
+
+| Top-level value | Rendered as |
+|-----------------|-------------|
+| Primitive (string, number, boolean) | Row in the **General** section |
+| Object | Its own collapsible section with key-value rows |
+| Array of objects | Its own collapsible section with a table |
+| Array of primitives | Its own collapsible section with badges |
+
+Values **inside** a nested object or array are always displayed as flat text. If a nested object contains another object, the inner value is shown as a raw JSON string. For example:
+
+```json
+{
+  "metadata": {
+    "address": {
+      "city": "Mumbai",
+      "location": { "lat": 19.07, "lng": 72.87 }
+    }
+  }
+}
+```
+
+Here `city` displays as `Mumbai`, but `location` displays as `{"lat":19.07,"lng":72.87}`.
+
+<Aside type="caution">
+  Keep metadata **flat or one level deep** for the best display. Deeply nested structures will fall back to raw JSON strings in the panel.
+</Aside>
+
+<Aside type="note">
+  Keys are automatically formatted for display: `snake_case` and `camelCase` are converted to title case (e.g. `first_name` → "First Name", `lastName` → "Last Name").
 </Aside>
 
 ## Get Session Data

frontend/e2e/helpers/api.ts

@@ -286,6 +286,18 @@ export class ApiHelper {
     return data.data?.contacts || []
   }
 
+  async updateContact(contactId: string, data: Record<string, any>): Promise<any> {
+    const response = await this.request.put(`${BASE_URL}/api/contacts/${contactId}`, {
+      headers: this.headers,
+      data
+    })
+    if (!response.ok()) {
+      throw new Error(`Failed to update contact: ${await response.text()}`)
+    }
+    const result = await response.json()
+    return result.data
+  }
+
   // Conversation Notes
   async listNotes(contactId: string): Promise<any[]> {
     const response = await this.request.get(`${BASE_URL}/api/contacts/${contactId}/notes`, {

frontend/e2e/tests/chat/contact-metadata.spec.ts

@@ -0,0 +1,196 @@
+import { test, expect, request as playwrightRequest } from '@playwright/test'
+import { loginAsAdmin } from '../../helpers'
+import { ApiHelper } from '../../helpers/api'
+import { ChatPage } from '../../pages'
+
+const TEST_METADATA = {
+  plan: 'premium',
+  age: 30,
+  active: true,
+  address: {
+    city: 'Mumbai',
+    state: 'Maharashtra',
+    zip: '400001',
+  },
+  orders: [
+    { id: 'ORD-001', amount: 1500, status: 'delivered' },
+    { id: 'ORD-002', amount: 2300, status: 'pending' },
+  ],
+  interests: ['fitness', 'tech', 'travel'],
+}
+
+test.describe('Contact Metadata Panel', () => {
+  test.describe.configure({ mode: 'serial' }) // Tests share contact metadata state
+
+  let contactId: string
+
+  test.beforeAll(async () => {
+    const reqContext = await playwrightRequest.newContext()
+    const api = new ApiHelper(reqContext)
+    await api.loginAsAdmin()
+
+    // Get existing contacts or create one
+    let contacts = await api.getContacts()
+    if (contacts.length === 0) {
+      await api.createContact(`91${Date.now().toString().slice(-10)}`, 'Metadata Test')
+      contacts = await api.getContacts()
+    }
+
+    contactId = contacts[0].id
+
+    // Set metadata on the contact
+    await api.updateContact(contactId, { metadata: TEST_METADATA })
+    await reqContext.dispose()
+  })
+
+  let chatPage: ChatPage
+
+  test.beforeEach(async ({ page }) => {
+    await loginAsAdmin(page)
+    chatPage = new ChatPage(page)
+  })
+
+  async function openInfoPanel(page: import('@playwright/test').Page) {
+    await chatPage.goto(contactId)
+
+    // Open contact info panel
+    const infoBtn = page.locator('#info-button')
+    await infoBtn.click()
+
+    // Wait for the panel header to appear
+    await expect(page.getByText('Contact Info')).toBeVisible({ timeout: 10000 })
+  }
+
+  test('should display metadata section when contact has metadata', async ({ page }) => {
+    await openInfoPanel(page)
+
+    // "General" section should show for top-level primitives (plan, age, active)
+    await expect(page.getByText('General')).toBeVisible()
+
+    // Verify primitive values are displayed
+    await expect(page.getByText('premium')).toBeVisible()
+    await expect(page.getByText('30', { exact: true })).toBeVisible()
+  })
+
+  test('should display nested object metadata as key-value pairs', async ({ page }) => {
+    await openInfoPanel(page)
+
+    // "Address" section header (formatted from "address")
+    await expect(page.getByText('Address')).toBeVisible()
+
+    // Key-value pairs inside the address section
+    await expect(page.getByText('Mumbai')).toBeVisible()
+    await expect(page.getByText('Maharashtra')).toBeVisible()
+    await expect(page.getByText('400001')).toBeVisible()
+  })
+
+  test('should display array of objects as a table', async ({ page }) => {
+    await openInfoPanel(page)
+
+    // "Orders" section header (formatted from "orders")
+    await expect(page.getByText('Orders')).toBeVisible()
+
+    // Table should show the count
+    await expect(page.getByText('(2)')).toBeVisible()
+
+    // Table column headers
+    await expect(page.locator('th').getByText('Id')).toBeVisible()
+    await expect(page.locator('th').getByText('Amount')).toBeVisible()
+    await expect(page.locator('th').getByText('Status')).toBeVisible()
+
+    // Table data
+    await expect(page.getByText('ORD-001')).toBeVisible()
+    await expect(page.getByText('1500')).toBeVisible()
+    await expect(page.getByText('delivered')).toBeVisible()
+    await expect(page.getByText('ORD-002')).toBeVisible()
+  })
+
+  test('should display array of primitives as badges', async ({ page }) => {
+    await openInfoPanel(page)
+
+    // "Interests" section header
+    await expect(page.getByText('Interests')).toBeVisible()
+
+    // Badges for each interest
+    await expect(page.getByText('fitness')).toBeVisible()
+    await expect(page.getByText('tech')).toBeVisible()
+    await expect(page.getByText('travel')).toBeVisible()
+  })
+
+  test('should display boolean metadata as Yes/No badges', async ({ page }) => {
+    await openInfoPanel(page)
+
+    // The "Active" label should appear in the General section
+    await expect(page.getByText('Active')).toBeVisible()
+
+    // Boolean true should show as "Yes" badge
+    await expect(page.getByText('Yes')).toBeVisible()
+  })
+
+  test('should collapse and expand metadata sections', async ({ page }) => {
+    await openInfoPanel(page)
+
+    // Click "Address" section header to collapse it
+    const addressTrigger = page.locator('button').filter({ hasText: 'Address' })
+    await addressTrigger.click()
+
+    // Values should be hidden after collapse
+    await expect(page.getByText('Mumbai')).toBeHidden()
+
+    // Click again to expand
+    await addressTrigger.click()
+
+    // Values should be visible again
+    await expect(page.getByText('Mumbai')).toBeVisible()
+  })
+
+  test('should format metadata labels from snake_case and camelCase', async ({ page }) => {
+    // Update contact with snake_case and camelCase keys
+    const reqContext = await playwrightRequest.newContext()
+    const api = new ApiHelper(reqContext)
+    await api.loginAsAdmin()
+    await api.updateContact(contactId, {
+      metadata: {
+        first_name: 'John',
+        lastName: 'Doe',
+      },
+    })
+    await reqContext.dispose()
+
+    await openInfoPanel(page)
+
+    // snake_case "first_name" should become "First Name"
+    await expect(page.getByText('First Name')).toBeVisible()
+
+    // camelCase "lastName" should become "Last Name"
+    await expect(page.getByText('Last Name')).toBeVisible()
+
+    // Restore original metadata for other tests
+    const restoreCtx = await playwrightRequest.newContext()
+    const restoreApi = new ApiHelper(restoreCtx)
+    await restoreApi.loginAsAdmin()
+    await restoreApi.updateContact(contactId, { metadata: TEST_METADATA })
+    await restoreCtx.dispose()
+  })
+
+  test('should not show metadata section when contact has no metadata', async ({ page }) => {
+    // Clear metadata
+    const reqContext = await playwrightRequest.newContext()
+    const api = new ApiHelper(reqContext)
+    await api.loginAsAdmin()
+    await api.updateContact(contactId, { metadata: {} })
+    await reqContext.dispose()
+
+    await openInfoPanel(page)
+
+    // "General" section from metadata should not be visible
+    await expect(page.getByText('General')).toBeHidden()
+
+    // Restore metadata
+    const restoreCtx = await playwrightRequest.newContext()
+    const restoreApi = new ApiHelper(restoreCtx)
+    await restoreApi.loginAsAdmin()
+    await restoreApi.updateContact(contactId, { metadata: TEST_METADATA })
+    await restoreCtx.dispose()
+  })
+})

frontend/src/components/chat/ContactInfoPanel.vue

@@ -24,7 +24,8 @@ import {
 } from '@/components/ui/command'
 import { X, ChevronDown, Phone, User, Plus, Check, Tags, Loader2 } from 'lucide-vue-next'
 import { TagBadge } from '@/components/ui/tag-badge'
-import { getInitials, getAvatarGradient } from '@/lib/utils'
+import MetadataSection from '@/components/chat/MetadataSection.vue'
+import { getInitials, getAvatarGradient, formatLabel } from '@/lib/utils'
 import { getTagColorClass } from '@/lib/constants'
 import { useTagsStore } from '@/stores/tags'
 import { useAuthStore } from '@/stores/auth'
@@ -174,6 +175,26 @@ const contactTags = computed(() => {
   return props.contact.tags as string[]
 })
 
+// Contact metadata
+const hasMetadata = computed(() => {
+  const md = props.contact.metadata
+  return md && typeof md === 'object' && Object.keys(md).length > 0
+})
+
+const metadataPrimitives = computed(() => {
+  if (!hasMetadata.value) return []
+  return Object.entries(props.contact.metadata).filter(
+    ([, v]) => v === null || typeof v !== 'object'
+  )
+})
+
+const metadataSections = computed(() => {
+  if (!hasMetadata.value) return []
+  return Object.entries(props.contact.metadata).filter(
+    ([, v]) => v !== null && typeof v === 'object'
+  )
+})
+
 // Get tag details for display
 function getTagDetails(tagName: string): Tag | undefined {
   return tagsStore.getTagByName(tagName)
@@ -264,7 +285,7 @@ async function updateContactTags(tags: string[]) {
         </div>
 
         <!-- Tags Section (always shown) -->
-        <div class="border-b pb-4">
+        <div class="pb-4">
           <div class="flex items-center justify-between py-2">
             <h5 class="text-sm font-medium flex items-center gap-2">
               <Tags class="h-4 w-4 text-muted-foreground" />
@@ -330,8 +351,25 @@ async function updateContactTags(tags: string[]) {
           </div>
         </div>
 
+        <!-- Contact Metadata -->
+        <div v-if="hasMetadata" class="space-y-3">
+          <!-- General section: top-level primitives -->
+          <MetadataSection
+            v-if="metadataPrimitives.length > 0"
+            label="General"
+            :data="Object.fromEntries(metadataPrimitives)"
+          />
+          <!-- Object / array sections -->
+          <MetadataSection
+            v-for="[key, val] in metadataSections"
+            :key="key"
+            :label="formatLabel(key)"
+            :data="val"
+          />
+        </div>
+
         <!-- No Session Data or no panel config -->
-        <div v-if="!props.sessionData || sortedSections.length === 0" class="text-center py-6 text-muted-foreground">
+        <div v-if="!props.sessionData || sortedSections.length === 0" class="text-center py-6 text-muted-foreground border-t">
           <User class="h-8 w-8 mx-auto mb-2 opacity-50" />
           <p class="text-sm">No data configured</p>
           <p class="text-xs mt-1">Configure panel display in the chatbot flow settings.</p>