feat(chat): show contact phone number in conversation list and header (EVO-988)

[nickoliveira23]

Summary

Surfaces the contact's phone number in two places so agents can tell at a glance whether they're talking to a domestic or international contact, without opening the details drawer.

• Conversation list row (ChatSidebar.tsx): small line with the contact phone, rendered between the name row and the last-message preview.
• Conversation header (ChatHeader.tsx): phone shown inline next to the contact name.
• Visibility: rendered only when conversation.contact.phone_number is present. Email/website/API conversations don't populate that field, so they remain unchanged.
• Formatting: prepend + when the stored value doesn't already start with one. No further reformatting (kept minimal on purpose).
• i18n: new whatsappNumber key under both chatHeader and chatSidebar namespaces in pt-BR and en (used as the tooltip on hover).

No backend changes — phone_number was already in the conversation payload.

Validation

• pnpm exec tsc -b --noEmit → clean
• pnpm lint → no new errors in changed files (existing baseline noise unchanged)
• pnpm exec vitest run src/components/chat → 51/51 passed (6 spec files)

Changed Files

• src/components/chat/chat-sidebar/ChatSidebar.tsx
• src/components/chat/chat-header/ChatHeader.tsx
• src/i18n/locales/pt-BR/chat.json
• src/i18n/locales/en/chat.json

Linked Issue

• EVO-988

Summary by Sourcery

Display WhatsApp contact phone numbers in the chat conversation list and header when available.

New Features:

• Show the contact phone number inline next to the contact name in the chat header when a phone number is present.
• Show the contact phone number in each conversation row in the chat sidebar between the contact name and last message preview.

Enhancements:

• Normalize displayed phone numbers by ensuring they are prefixed with '+' without additional formatting.
• Add localized tooltip labels for the displayed WhatsApp phone number in both English and Brazilian Portuguese chat translations.

[sourcery-ai]

Reviewer's Guide

Adds contact phone number display to chat conversation header and sidebar list rows, including minimal formatting and localized tooltips, without altering backend payloads.

Flow diagram for phone number display formatting in chat header and sidebar

flowchart TD
  A[Start render<br>conversation/contact] --> B{conversation.contact<br>and conversation.contact.phone_number?}
  B -- No --> C[Set rawPhone to undefined<br>Set phoneDisplay to null<br>Render no phone in UI]
  B -- Yes --> D[Set rawPhone to conversation.contact.phone_number]
  D --> E{rawPhone startsWith +?}
  E -- Yes --> F[Set phoneDisplay to rawPhone]
  E -- No --> G[Set phoneDisplay to + concatenated with rawPhone]
  F --> H[Render phoneDisplay<br>next to contact name in header<br>with title chatHeader.whatsappNumber]
  G --> H
  F --> I[Render phoneDisplay<br>below name in sidebar row<br>with title chatSidebar.whatsappNumber]
  G --> I

Loading

File-Level Changes

Change	Details	Files
Show the contact phone number next to the contact name in the chat header when available, with minimal formatting and a tooltip.	Derives a formatted phoneDisplay value from conversation.contact.phone_number, prefixing a '+' if missing and falling back to null if absent. Renders the phone number inline beside the contact name within a flex container, preserving wrapping behavior. Applies muted small-text styling and a localized tooltip via chatHeader.whatsappNumber when hovering the phone number.	src/components/chat/chat-header/ChatHeader.tsx
Display the contact phone number in each conversation row in the chat sidebar list when available, with truncation and a tooltip.	Computes phoneDisplay from conversation.contact.phone_number using the same '+' prefix logic and null fallback as in the header. Inserts a new text line between the name row and last message preview to show the phone, using small muted text and truncate for long numbers. Adds a localized tooltip via chatSidebar.whatsappNumber for the sidebar phone number display.	src/components/chat/chat-sidebar/ChatSidebar.tsx
Add i18n strings for the WhatsApp number tooltip in English and Brazilian Portuguese for both header and sidebar contexts.	Defines chatHeader.whatsappNumber key in en and pt-BR chat.json locale files. Defines chatSidebar.whatsappNumber key in en and pt-BR chat.json locale files.	src/i18n/locales/en/chat.json src/i18n/locales/pt-BR/chat.json

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• The rawPhone → phoneDisplay formatting logic is duplicated in both ChatHeader and ChatSidebar; consider extracting this into a small shared utility or hook to keep behavior consistent and easier to adjust later.
• When deriving phoneDisplay, consider defensively handling non-string or whitespace-only phone_number values (e.g., via type check and trim()) so you don't end up rendering a bare + or an unexpected value.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The `rawPhone` → `phoneDisplay` formatting logic is duplicated in both `ChatHeader` and `ChatSidebar`; consider extracting this into a small shared utility or hook to keep behavior consistent and easier to adjust later.
- When deriving `phoneDisplay`, consider defensively handling non-string or whitespace-only `phone_number` values (e.g., via type check and `trim()`) so you don't end up rendering a bare `+` or an unexpected value.

## Individual Comments

### Comment 1
<location path="src/components/chat/chat-header/ChatHeader.tsx" line_range="91-96" />
<code_context>
   const isArchived = Boolean(conversation.custom_attributes?.archived);

   const inboxName = conversation.inbox?.name || '';
+  const rawPhone = conversation.contact?.phone_number;
+  const phoneDisplay = rawPhone
+    ? rawPhone.startsWith('+')
+      ? rawPhone
+      : `+${rawPhone}`
+    : null;

   const renderConversationStatusDropdown = () => {
</code_context>
<issue_to_address>
**suggestion:** Consider extracting phone display formatting into a shared helper to avoid duplication.

The same `rawPhone` / `phoneDisplay` logic exists in `ChatSidebar`. Centralizing this into a shared utility (e.g., `formatContactPhoneForDisplay`) or hook would keep header/sidebar formatting consistent and reduce maintenance if the requirements change.

Suggested implementation:

```typescript
  const inboxName = conversation.inbox?.name || '';
  const phoneDisplay = formatContactPhoneForDisplay(
    conversation.contact?.phone_number
  );

```

To fully implement the shared helper and avoid duplication, you should also:

1. **Create the shared helper** (if it does not already exist), for example in `src/utils/phone.ts` (or wherever phone-related utilities are typically stored in your project):

```ts
export const formatContactPhoneForDisplay = (rawPhone?: string | null) => {
  if (!rawPhone) {
    return null;
  }

  return rawPhone.startsWith('+') ? rawPhone : `+${rawPhone}`;
};
```

2. **Import the helper in `ChatHeader.tsx`**, adding an import like:

```ts
import { formatContactPhoneForDisplay } from 'src/utils/phone';
```

(Adjust the import path to match your project's directory structure and existing conventions.)

3. **Update `ChatSidebar` (and any other components duplicating this logic)** to also use the same helper:

   - Replace the inline `rawPhone` / `phoneDisplay` logic with:
     ```ts
     const phoneDisplay = formatContactPhoneForDisplay(contact?.phone_number);
     ```
   - Add the same `formatContactPhoneForDisplay` import to those files.

These additional steps will centralize phone display formatting, keep header/sidebar consistent, and make future maintenance easier.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[dpaes]

Aprovado. Rodada 3 endereçou todos os achados das rodadas 1 e 2. Verificação detalhada no comentário no Linear EVO-988.