CHI-3768, CHI-3773: Fix Aselo webchat participant names by stephenhand · Pull Request #4115 · techmatters/flex-plugins

stephenhand · 2026-03-27T16:53:55Z

Description

The logic for the names of message senders is that

Messages from the service user are labelled 'You' (translatable & overridable via helpline)
Messages from others with a conversation participant are labelled 'Counsellor' (translatable & overridable via helpline)
Messages from anywhere else (will be automated) use the message author

Unit tests for MessageBubble have been updated to reflect this new behaviour:

Mock state now includes translations and defaultLocale in the config so the localization selectors work correctly in tests
Test assertions updated to check for translated values ('You', 'Counsellor') rather than user friendly names
Also fixed a bug where the screen reader text was rendering raw i18n keys instead of translated values

createConversation in the Lambda layer has been made more robust:

The initial client.conversations.v1.conversations.create() call is now inside its own try/catch, ensuring that any failure at that stage is returned as a Result error (with no conversationSid) rather than causing an unhandled throw. A second try/catch continues to wrap all subsequent setup steps (returning the conversationSid in the error when it was created but setup failed).
Fixed typo in variable name: createConverationResult → createConversationResult in customChannelToFlex.ts

sessionDataHandler.ts has been made more resilient for non-English locales:

The CustomerFriendlyName fallback now detects when localizeKey returns the raw i18n key unchanged (meaning the key is absent from the current locale's translations) and substitutes the hardcoded default 'Anonymous' instead of sending a raw key string as the conversation friendly name

Checklist

Other Related Issues

None

Verification steps

See tickets

AFTER YOU MERGE

Cut a release tag using the Github workflow. Wait for it to complete and notify in the #aselo-deploys Slack channel.
Comment on the ticket with the release tag version AND any additional instructions required to configure an environment to test the changes.
Only then move the ticket into the QA column in JIRA

You are responsible for ensuring the above steps are completed. If you move a ticket into QA without advising what version to test, the QA team will assume the latest tag has the changes. If it does not, the following confusion is on you! :-P

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

…x_aselo_webchat_participant_names

stephenhand · 2026-03-27T17:55:16Z

@copilot Fix the unit tests that are failing due to the code changes in this PR

Agent-Logs-Url: https://github.com/techmatters/flex-plugins/sessions/783c2c53-643e-4714-9a8b-bb1fe99abd53 Co-authored-by: stephenhand <1694716+stephenhand@users.noreply.github.com>

- Use localizeKey directly in MessageBubble.tsx instead of LocalizedTemplate component to get translated name for both visual text and screen reader text - Fix screen reader text to use translated name (was showing raw i18n key) - Fix null guard: use message.author || '' to prevent Mustache.render error - Update MessageBubble.test.tsx: add translations/defaultLocale to mock state, update assertions to check for 'You'/'Counsellor' instead of user friendly names Agent-Logs-Url: https://github.com/techmatters/flex-plugins/sessions/783c2c53-643e-4714-9a8b-bb1fe99abd53 Co-authored-by: stephenhand <1694716+stephenhand@users.noreply.github.com>

Copilot · 2026-03-27T18:09:49Z

@copilot Fix the unit tests that are failing due to the code changes in this PR

Fixed in commit 068b329. The tests were failing because MessageBubble.tsx was using LocalizedTemplate (which calls useSelector(selectCurrentTranslations)) but the test mock state had no translations in config.

Changes made:

MessageBubble.tsx: Replaced LocalizedTemplate with direct localizeKey usage — selects currentTranslations via useSelector, computes translatedName, and uses it consistently for both the visible text and screen reader text (also fixing a bug where the screen reader was showing raw i18n keys instead of translated values). Added || '' fallback for message.author to guard against undefined.
MessageBubble.test.tsx: Added translations and defaultLocale to the mock config state; updated the 'renders the message author' assertion to check for 'You' and the screenreader test for other users to check for 'Counsellor sent at'.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

download.cypress.io
- Triggering command: /opt/hostedtoolcache/node/20.20.1/x64/bin/node node dist/index.js --exec install (dns block)
tsock.us1.twilio.com
- Triggering command: /opt/hostedtoolcache/node/20.20.1/x64/bin/node node node_modules/.bin/jest --watchAll=false (dns block)
- Triggering command: /opt/hostedtoolcache/node/20.20.1/x64/bin/node node node_modules/.bin/jest --watchAll=false /home/REDACTED/work/flex-plugins/flex-plugins/aselo-webchat-react-app/src/store/actions/actionTypes.ts (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

…x_aselo_webchat_participant_names

…. createConversation now uses Result type

Copilot

Pull request overview

This PR updates how participant/sender names are determined and displayed in Aselo webchat (and related channel integrations), aiming to consistently label messages as “You”, “Counsellor”, or fall back to the author for automated/system messages.

Changes:

Adds localized sender-name behavior in MessageBubble (“You” / “Counsellor” / author fallback) and fixes screen-reader text to use translated values.
Updates conversation creation to return a Result type and sets Twilio Conversation User friendlyName to senderScreenName.
Extends AS webchat pre-engagement form to collect friendlyName, adds a localized default name (“Anonymous”), and improves local-dev form definitions loading.

Reviewed changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
lambdas/packages/hrm-form-definitions/form-definitions/as/v1/webchat/PreEngagementForm.json	Adds required `friendlyName` input field to capture user nickname.
lambdas/account-scoped/src/conversation/createConversation.ts	Returns `Result`, sets Twilio user `friendlyName`, and refactors error handling.
lambdas/account-scoped/src/webchatAuthentication/initWebchat.ts	Adapts orchestration to `Result`-returning `createConversation`.
lambdas/account-scoped/src/customChannels/customChannelToFlex.ts	Adapts to `Result` from `createConversation` and updates conversation removal call.
lambdas/account-scoped/src/customChannels/{modica,line,instagram}/*ToFlex.ts	Adjusts `senderScreenName` to align with new naming expectations.
lambdas/account-scoped/tests/unit/webchatAuthentication/initWebchat.test.ts	Updates mocks/assertions for `Result`-based `createConversation` behavior.
lambdas/account-scoped/tests/unit/customChannels/{telegram,line,modica}/*ToFlex.test.ts	Extends Twilio client mocks for newly required `users.get().update()` call path.
aselo-webchat-react-app/src/components/MessageBubble.tsx	Implements translated sender labels and screen-reader fix; changes sender selection logic.
aselo-webchat-react-app/src/components/tests/MessageBubble.test.tsx	Updates tests to assert translated sender labels (“You” / “Counsellor”).
aselo-webchat-react-app/src/sessionDataHandler.ts	Uses localized default customer name key instead of hardcoded string.
aselo-webchat-react-app/translationsSrc/en.json	Adds new translation keys for sender labels and default customer name.
aselo-webchat-react-app/src/services/configService.ts	Allows overriding form-definitions base URL via `REACT_APP_FORM_DEFINITIONS_BASE_URL`.
aselo-webchat-react-app/package.json	Enhances local dev script to serve form definitions via a local server.
aselo-webchat-react-app/package-lock.json	Updates lockfile to reflect dependency changes.

Files not reviewed (1)

aselo-webchat-react-app/package-lock.json: Language not supported

Copilot · 2026-03-31T15:38:01Z

lambdas/account-scoped/src/conversation/createConversation.ts

  try {
    const conversationContext =
      client.conversations.v1.conversations.get(conversationSid);
    await conversationContext.participants.create({
      identity: uniqueUserName,
    });
+    await client.conversations.v1.users
+      .get(uniqueUserName)
+      .update({ friendlyName: senderScreenName });


The try/catch only wraps operations starting from conversationContext creation, but the initial client.conversations.v1.conversations.create(...) happens before the try. If that call fails, createConversation will still throw/reject even though its signature now returns a Result, and callers only checking isErr(...) will miss it.

Move the conversation creation into the try/catch (and return a newErr(...) with conversationSid omitted when it was never created).

@copilot apply changes based on this feedback

Fixed in commit bd74e45. Split the single try/catch into two: the first wraps conversations.create() and returns newErr({ cause }) with no conversationSid (since none was created), and the second wraps all subsequent setup and returns newErr({ conversationSid, cause }) as before.

lambdas/account-scoped/src/webchatAuthentication/initWebchat.ts

Copilot · 2026-03-31T15:38:02Z

lambdas/account-scoped/src/customChannels/customChannelToFlex.ts

  if (!conversationSid) {
-    const { conversationSid: newConversationSid, error } = await createConversation(
-      client,
-      {
-        studioFlowSid,
-        channelType,
-        twilioNumber,
-        uniqueUserName,
-        senderScreenName,
-        onMessageAddedWebhookUrl,
-        conversationFriendlyName,
-        testSessionId,
-      },
-    );
+    const createConverationResult = await createConversation(client, {
+      studioFlowSid,
+      channelType,
+      twilioNumber,
+      uniqueUserName,


Typo in the new variable name: createConverationResult is missing an "s" (should be createConversationResult). This makes the code harder to read/search and can propagate to other call sites via copy/paste.

@copilot apply changes based on this feedback

@copilot apply changes based on #4115 (comment)

Fixed in commit 9eda176. Renamed createConverationResult → createConversationResult throughout customChannelToFlex.ts.

aselo-webchat-react-app/src/components/MessageBubble.tsx

Copilot · 2026-03-31T15:38:02Z

aselo-webchat-react-app/src/components/MessageBubble.tsx

+  } else {
+    name = message.author || '';
+  }
+  const translatedName = localizeKey(currentTranslations)(name);


This introduces new i18n keys (MessagePhase-MessageBubble-OwnMessageSenderName / ...OtherParticipant...) and unconditionally runs them through localizeKey(currentTranslations). Only translationsSrc/en.json defines these keys right now; es.json, fr.json, mt.json, etc. don’t, so users on those locales will see the raw key strings rendered in the UI.

Add these keys to the other locale files (even if temporarily untranslated) or implement a fallback to defaultLocale/English when a key is missing from the current locale.

Suggested change

const translatedName = localizeKey(currentTranslations)(name);

const translated = localizeKey(currentTranslations)(name);

const translatedName = translated && translated !== name ? translated : message.author || '';

Copilot · 2026-03-31T15:38:03Z

aselo-webchat-react-app/src/sessionDataHandler.ts

+      const { config } = store.getState();
      const payload: InitWebchatAPIPayload = {
        DeploymentKey: this.getDeploymentKey(),
-        CustomerFriendlyName: (formData?.friendlyName as string) || CUSTOMER_DEFAULT_NAME,
+        CustomerFriendlyName:
+          (formData?.friendlyName as string) ||
+          localizeKey(config.translations[config.currentLocale ?? config.defaultLocale])(CUSTOMER_DEFAULT_NAME_KEY),
        PreEngagementData: JSON.stringify(formData),


CustomerFriendlyName falls back to a localized key lookup, but Conversation-Participants-CustomerDefaultName is only present in translationsSrc/en.json right now. For other locales (or for configs/tests where translations is empty), localizeKey(...) will return the raw key string, which then becomes the conversation friendly name.

Either add this key to all locale translation files (even as an English placeholder), or add a safer fallback (e.g., if the lookup returns the key unchanged, use a hardcoded default like "Anonymous").

@copilot apply changes based on this feedback

Fixed in commit 9eda176. sessionDataHandler.ts now compares the localizeKey result against the raw key — if they're equal (key not found in translations), it falls back to the hardcoded 'Anonymous' string instead of passing the raw key as the friendly name.

lambdas/account-scoped/tests/unit/webchatAuthentication/initWebchat.test.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

… Result The initial `client.conversations.v1.conversations.create()` call was outside the try/catch, causing createConversation to throw instead of returning a newErr Result when that call failed. Split into two try/catch blocks: the first wraps the initial conversation creation (returning newErr without a conversationSid on failure), and the second wraps all subsequent setup (returning newErr with the conversationSid). Agent-Logs-Url: https://github.com/techmatters/flex-plugins/sessions/6db22729-5826-4470-9436-24b2a825ee89 Co-authored-by: stephenhand <1694716+stephenhand@users.noreply.github.com>

…ssionDataHandler.ts - Fix typo: createConverationResult -> createConversationResult in customChannelToFlex.ts - Add safe fallback in sessionDataHandler.ts: if localizeKey returns the raw key string unchanged (meaning the key is not in the current locale translations), fall back to the hardcoded 'Anonymous' default instead of using the raw key Agent-Logs-Url: https://github.com/techmatters/flex-plugins/sessions/7bddef15-9291-4150-b998-7d199b6e58ae Co-authored-by: stephenhand <1694716+stephenhand@users.noreply.github.com>

Copilot · 2026-04-01T08:48:37Z

@copilot Fix the unit tests that are failing due to the code changes in this PR

Unit tests are passing — all 321 tests in aselo-webchat-react-app pass and CI is green on the latest commits. The MessageBubble test failures were fixed previously in commit 068b329.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

tsock.us1.twilio.com
- Triggering command: /opt/hostedtoolcache/node/20.20.1/x64/bin/node node /home/REDACTED/work/flex-plugins/flex-plugins/aselo-webchat-react-app/node_modules/.bin/jest (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

stephenhand added 2 commits March 27, 2026 09:46

Merge branch 'CHI-3641-channel_type_convo_attribute' into CHI-3640-fi…

456f42b

…x_aselo_webchat_participant_names

Ensure conversation participants have correct names in chat window

9b77067

stephenhand changed the base branch from master to CHI-3641-channel_type_convo_attribute March 27, 2026 16:56

Merge branch 'CHI-3641-channel_type_convo_attribute' into CHI-3640-fi…

411914e

…x_aselo_webchat_participant_names

Copilot started work on behalf of stephenhand March 27, 2026 17:55 View session

Copilot AI and others added 2 commits March 27, 2026 18:03

Initial plan for fixing failing MessageBubble tests

ea16514

Agent-Logs-Url: https://github.com/techmatters/flex-plugins/sessions/783c2c53-643e-4714-9a8b-bb1fe99abd53 Co-authored-by: stephenhand <1694716+stephenhand@users.noreply.github.com>

Copilot stopped work on behalf of stephenhand due to an error March 27, 2026 18:12
The "Install dependencies for aselo-webchat-react-app" custom setup step from your .github/workflows/copilot-setup-steps.yml file failed.

stephenhand added 2 commits March 30, 2026 15:42

Merge branch 'CHI-3641-channel_type_convo_attribute' into CHI-3640-fi…

7338808

…x_aselo_webchat_participant_names

Update friendlyName of user in conversations created in Twilio Lambda…

23bc1a1

…. createConversation now uses Result type

stephenhand requested review from Copilot and gpaoloni and removed request for gpaoloni March 31, 2026 15:29

Copilot started reviewing on behalf of stephenhand March 31, 2026 15:29 View session

Copilot AI reviewed Mar 31, 2026

View reviewed changes

Copilot started work on behalf of stephenhand April 1, 2026 07:44 View session

stephenhand and others added 2 commits April 1, 2026 08:52

Update aselo-webchat-react-app/src/components/MessageBubble.tsx

2eec22b

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot finished work on behalf of stephenhand April 1, 2026 08:00

Copilot started work on behalf of stephenhand April 1, 2026 08:32 View session

Copilot finished work on behalf of stephenhand April 1, 2026 08:51

	const translatedName = localizeKey(currentTranslations)(name);
	const translated = localizeKey(currentTranslations)(name);
	const translatedName = translated && translated !== name ? translated : message.author \|\| '';

Conversation

stephenhand commented Mar 27, 2026 • edited by Copilot AI Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Other Related Issues

Verification steps

AFTER YOU MERGE

Uh oh!

stephenhand commented Mar 27, 2026

Uh oh!

Copilot AI commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

stephenhand Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

stephenhand Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

stephenhand Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

stephenhand Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

stephenhand commented Mar 27, 2026 •

edited by Copilot AI

Loading

Copilot AI commented Mar 27, 2026 •

edited

Loading

Copilot AI commented Apr 1, 2026 •

edited

Loading