CHI-3864: Add label to end chat button by stephenhand · Pull Request #4316 · techmatters/flex-plugins

stephenhand · 2026-05-06T08:22:28Z

Description

Add optional label to the chat widget button
Support explicit empty strings in translation keys

Checklist

Other Related Issues

None

Verification steps

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

…ne to pre-engagement

Copilot

Pull request overview

Adds new/expanded localization support across the Aselo webchat widget UI, including an optional text label for the widget entry-point button, and updates several components/tests to use translation-driven strings (including allowing translation values to be explicit empty strings).

Changes:

Add new English translation keys for entry point label, message input strings, read indicator, and pre-engagement copy (including an explicit empty-string description).
Update localizeKey to use nullish coalescing (??) so explicit empty-string translations are preserved.
Update EntryPoint / MessageInput / MessageBubble / PreEngagementFormPhase to use new translation keys and adjust tests accordingly.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
aselo-webchat-react-app/translationsSrc/en.json	Adds new English translation keys (including explicit empty string) used by updated UI components.
aselo-webchat-react-app/src/localization/localizeKey.ts	Changes translation lookup to preserve explicit empty-string values.
aselo-webchat-react-app/src/components/styles/EntryPoint.styles.ts	Updates entry point button styling to support wider/pill-shaped button when label is present.
aselo-webchat-react-app/src/components/PreEngagementFormPhase.tsx	Switches pre-engagement header/description/submit label to fixed translation keys and adds test id for submit label span.
aselo-webchat-react-app/src/components/MessageInput.tsx	Localizes placeholder and send/emoji accessible text (but currently contains a key typo).
aselo-webchat-react-app/src/components/MessageBubble.tsx	Localizes the “Read” indicator and adds a test id for it.
aselo-webchat-react-app/src/components/tests/PreEngagementFormPhase.test.tsx	Updates spinner/label assertions to use the new test id instead of hard-coded button text.
aselo-webchat-react-app/src/components/tests/MessageInput.test.tsx	Updates mocked config state to include `translations` to satisfy new selectors.
aselo-webchat-react-app/src/components/tests/MessageBubble.test.tsx	Updates assertions to use the new `ReadIndicator` test id.
aselo-webchat-react-app/src/components/tests/EntryPoint.test.tsx	Updates mocked state to include `config.translations` and clears mocks between tests.

+  const openWidgetLabel = localizeKey(currentTranslations)('EntryPoint-ClosedState-OpenWidgetButtonLabel');
+
  return (
    <Box
      as="button"
      data-testid="entry-point-button"
      onClick={() => dispatch(changeExpandedStatus({ expanded: !expanded }))}
      {...containerStyles}
+      padding={openWidgetLabel && !expanded ? 'space40' : 'space0'}
    >


 export const EntryPoint = () => {
  const dispatch = useDispatch();
  const expanded = useSelector((state: AppState) => state.session.expanded);
+  const currentTranslations = useSelector(selectCurrentTranslations);
  const { isMobileFullscreen } = useMobileOptimizations();


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

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 5 comments.

+  const title = localize('PreEngagementPhase-Form-Title');
+
+  const description = localize('PreEngagementPhase-Form-Description');
+
  return (
    <>
      <Header />
      <NotificationBar />
      <Box as="form" data-test="pre-engagement-chat-form" onSubmit={handleSubmit} {...formStyles} ref={formRef}>
-        <Text {...titleStyles} as="h3">
-          <LocalizedTemplate code={titleText} />
-        </Text>
+        {title && (
+          <Text {...titleStyles} as="h3">
+            {title}
+          </Text>
+        )}
+        {description && (
+          <Text {...descriptionStyles} as="p">
+            {description}
+          </Text>
+        )}


+            data-testid="pre-engagement-start-chat-button-label"
+            style={isRecaptchaVerifyPending ? { visibility: 'hidden' } : {}}
+          >
+            <LocalizedTemplate code="PreEngagementPhase-Form-SubmitButtonLabel" />


+  const openWidgetLabel = localizeKey(currentTranslations)('EntryPoint-ClosedState-OpenWidgetButtonLabel');
+
  return (
    <Box
      as="button"
      data-testid="entry-point-button"
      onClick={() => dispatch(changeExpandedStatus({ expanded: !expanded }))}
      {...containerStyles}
+      padding={openWidgetLabel && !expanded ? 'space40' : 'space0'}
    >
      {expanded ? (
        <ChevronDownIcon decorative={false} title="Minimize chat" size="sizeIcon80" />
      ) : (
-        <ChatIcon decorative={false} title="Open chat" size="sizeIcon60" />
+        <>
+          {openWidgetLabel && (
+            <Box as="span" marginRight="space30">
+              {openWidgetLabel}
+            </Box>
+          )}
+          <ChatIcon decorative={false} title="Open chat" size="sizeIcon60" />


stephenhand · 2026-05-07T12:51:01Z

+  const openWidgetLabel = localizeKey(currentTranslations)('EntryPoint-ClosedState-OpenWidgetButtonLabel');
+
  return (
    <Box
      as="button"
      data-testid="entry-point-button"
      onClick={() => dispatch(changeExpandedStatus({ expanded: !expanded }))}
      {...containerStyles}
+      padding={openWidgetLabel && !expanded ? 'space40' : 'space0'}
    >
      {expanded ? (
        <ChevronDownIcon decorative={false} title="Minimize chat" size="sizeIcon80" />
      ) : (
-        <ChatIcon decorative={false} title="Open chat" size="sizeIcon60" />
+        <>
+          {openWidgetLabel && (
+            <Box as="span" marginRight="space30">
+              {openWidgetLabel}
+            </Box>
+          )}
+          <ChatIcon decorative={false} title="Open chat" size="sizeIcon60" />


@copilot apply changes based on this feedback

Done in commit 7e7b11b. Added two tests in a new open widget label describe block:

Verifies the label renders with the correct text when the translation key resolves to a non-empty string

Verifies the label is not rendered when the translation key resolves to an explicit empty string

Also added data-testid="open-widget-label" to the label span to make it reliably queryable in tests.

 export const localizeKey =
  (localeTranslations: ConfigState['translations'][keyof ConfigState['translations']]) =>
  (key: string, parameters: Record<string, string> = {}) => {
-    const lookedUpValue = (localeTranslations && localeTranslations[key]) || key;
+    const lookedUpValue = (localeTranslations && localeTranslations[key]) ?? key;
    return Mustache.render(lookedUpValue, parameters);


Agent-Logs-Url: https://github.com/techmatters/flex-plugins/sessions/d60e5a73-5e80-41fa-a14b-781cbf98984c Co-authored-by: stephenhand <1694716+stephenhand@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.

+  const title = localize('PreEngagementPhase-Form-Title');
+
+  const description = localize('PreEngagementPhase-Form-Description');


+            data-testid="pre-engagement-start-chat-button-label"
+            style={isRecaptchaVerifyPending ? { visibility: 'hidden' } : {}}
+          >
+            <LocalizedTemplate code="PreEngagementPhase-Form-SubmitButtonLabel" />


      </Box>
      {read && (
-        <Flex hAlignContent="right" vAlignContent="center" marginTop="space20">
+        <Flex data-testid="ReadIndicator" hAlignContent="right" vAlignContent="center" marginTop="space20">


+  const openWidgetLabel = localizeKey(currentTranslations)('EntryPoint-ClosedState-OpenWidgetButtonLabel');
+
  return (
    <Box
      as="button"
      data-testid="entry-point-button"
      onClick={() => dispatch(changeExpandedStatus({ expanded: !expanded }))}
      {...containerStyles}
+      padding={openWidgetLabel && !expanded ? 'space40' : 'space0'}
    >
      {expanded ? (
        <ChevronDownIcon decorative={false} title="Minimize chat" size="sizeIcon80" />
      ) : (
-        <ChatIcon decorative={false} title="Open chat" size="sizeIcon60" />
+        <>
+          {openWidgetLabel && (
+            <Box as="span" data-testid="open-widget-label" marginRight="space30">
+              {openWidgetLabel}
+            </Box>
+          )}
+          <ChatIcon decorative={false} title="Open chat" size="sizeIcon60" />


Add label to end chat button

f99962b

stephenhand requested a review from gpaoloni May 6, 2026 08:22

stephenhand added 6 commits May 6, 2026 10:50

Add label to end chat button

cb75993

More translations

e3674a0

Fix tests

f4c9961

Merge branch 'master' into CHI-3864-widget_button_label

cc9d7bc

Fix tests. Make pre-engagement customisations standard. Add detail li…

b4913a4

…ne to pre-engagement

Linter

0c3549f

stephenhand requested a review from Copilot May 7, 2026 08:09

Copilot started reviewing on behalf of stephenhand May 7, 2026 08:09 View session

Copilot AI reviewed May 7, 2026

View reviewed changes

stephenhand and others added 3 commits May 7, 2026 10:28

Remove unused title / description

8e6c20a

Potential fix for pull request finding

bf899c7

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

Potential fix for pull request finding

78ce52c

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

stephenhand requested a review from Copilot May 7, 2026 12:31

Copilot started reviewing on behalf of stephenhand May 7, 2026 12:32 View session

Copilot AI reviewed May 7, 2026

View reviewed changes

Copilot started work on behalf of stephenhand May 7, 2026 12:51 View session

test: add EntryPoint open widget label rendering tests

7e7b11b

Agent-Logs-Url: https://github.com/techmatters/flex-plugins/sessions/d60e5a73-5e80-41fa-a14b-781cbf98984c Co-authored-by: stephenhand <1694716+stephenhand@users.noreply.github.com>

Copilot finished work on behalf of stephenhand May 7, 2026 12:59

stephenhand requested a review from Copilot May 7, 2026 14:35

Copilot started reviewing on behalf of stephenhand May 7, 2026 14:36 View session

Copilot AI reviewed May 7, 2026

View reviewed changes

stephenhand merged commit 3d32b3f into master May 7, 2026
30 checks passed

stephenhand deleted the CHI-3864-widget_button_label branch May 7, 2026 14:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CHI-3864: Add label to end chat button#4316

CHI-3864: Add label to end chat button#4316
stephenhand merged 11 commits intomasterfrom
CHI-3864-widget_button_label

stephenhand commented May 6, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

stephenhand May 7, 2026

Uh oh!

Copilot AI May 7, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const title = localize('PreEngagementPhase-Form-Title');

		const description = localize('PreEngagementPhase-Form-Description');

Conversation

stephenhand commented May 6, 2026

Description

Checklist

Other Related Issues

Verification steps

AFTER YOU MERGE

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

stephenhand May 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants