Address UI feedbacks

- import order - add missing localization - add title for edit button
brave · Jul 16, 2024 · 0b64a41 · 0b64a41
1 parent 26769e4
commit 0b64a41
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 2 deletions.
diff --git a/components/ai_chat/core/browser/constants.cc b/components/ai_chat/core/browser/constants.cc
@@ -82,6 +82,8 @@ base::span<const webui::LocalizedString> GetLocalizedStrings() {
       {"submitButtonLabel", IDS_CHAT_UI_SUBMIT_BUTTON_LABEL},
       {"cancelButtonLabel", IDS_CHAT_UI_CANCEL_BUTTON_LABEL},
       {"saveButtonLabel", IDS_CHAT_UI_SAVE_BUTTON_LABEL},
+      {"editedLabel", IDS_CHAT_UI_EDITED_LABEL},
+      {"editButtonLabel", IDS_CHAT_UI_EDIT_BUTTON_LABEL},
       {"optionNotHelpful", IDS_CHAT_UI_OPTION_NOT_HELPFUL},
       {"optionIncorrect", IDS_CHAT_UI_OPTION_INCORRECT},
       {"optionUnsafeHarmful", IDS_CHAT_UI_OPTION_UNSAFE_HARMFUL},

diff --git a/components/ai_chat/resources/page/components/edit_button/index.tsx b/components/ai_chat/resources/page/components/edit_button/index.tsx
@@ -4,9 +4,10 @@
  * You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
+import { getLocale } from '$web-common/locale'
+import Button from '@brave/leo/react/button'
 import Icon from '@brave/leo/react/icon'
 import styles from './style.module.scss'
-import Button from '@brave/leo/react/button'
 
 interface Props {
   onClick: () => void
@@ -18,6 +19,7 @@ function EditButton (props: Props) {
       fab
       size='tiny'
       kind='plain-faint'
+      title={getLocale('editButtonLabel')}
     >
       <Icon name='edit-pencil' />
     </Button>

diff --git a/components/ai_chat/resources/page/components/edit_indicator/index.tsx b/components/ai_chat/resources/page/components/edit_indicator/index.tsx
@@ -7,6 +7,7 @@ import * as React from 'react'
 
 import { Time } from 'gen/mojo/public/mojom/base/time.mojom.m.js'
 import { mojoTimeToJSDate } from '$web-common/mojomUtils'
+import { getLocale } from '$web-common/locale'
 import Icon from '@brave/leo/react/icon'
 
 import styles from './style.module.scss'
@@ -27,7 +28,7 @@ function EditIndicator(props: Props) {
   return (
     <div className={styles.editIndicator}>
       <Icon name='edit-pencil' />
-      <span className={styles.editedText}>Edited</span>
+      <span className={styles.editedText}>{getLocale('editedLabel')}</span>
       <span className={styles.time}>
         {dateTimeFormatter.format(mojoTimeToJSDate(props.time))}
       </span>

diff --git a/components/ai_chat/resources/page/stories/locale.ts b/components/ai_chat/resources/page/stories/locale.ts
@@ -59,6 +59,8 @@ provideStrings({
   submitButtonLabel: 'Submit',
   cancelButtonLabel: 'Cancel',
   saveButtonLabel: 'Save',
+  editButtonLabel: 'Edit',
+  editedLabel: 'Edited',
   optionNotHelpful: 'Not helpful',
   optionIncorrect: 'Incorrect',
   optionUnsafeHarmful: 'Unsafe/harmful',

diff --git a/components/resources/ai_chat_ui_strings.grdp b/components/resources/ai_chat_ui_strings.grdp
@@ -193,6 +193,12 @@
   <message name="IDS_CHAT_UI_SAVE_BUTTON_LABEL" desc="Button label to save data/form">
     Save
   </message>
+  <message name="IDS_CHAT_UI_EDITED_LABEL" desc="Text for indicating the content is edited">
+    Edited
+  </message>
+  <message name="IDS_CHAT_UI_EDIT_BUTTON_LABEL" desc="Button title to edit content">
+    Edit
+  </message>
   <message name="IDS_CHAT_UI_OPTION_NOT_HELPFUL" desc="Select option for feedback form if the answer is not helpful">
     Not helpful
   </message>