BotFlow
BotFlow copied to clipboard
Support localization
Botflow needs to support multiple languages. For now we will target PT-BR, and EN-US should be supported soon. To accomplish that we will have to prepare the front end to load strings from a localization file.
Tasks
- [x] Add the i18nlib to the project (https://medium.com/reactbrasil/internacionaliza%C3%A7%C3%A3o-em-react-native-77fb1a56f8e9)
- [x] Define naming convention for strings
- [x] Create EN-US and PT-BR locales
- [x] Localize existing content
- [x] Document naming conventions on the wiki
Acceptance criteria
- [x] Existing front-end is correctly localized when changing language parameter (no need to build UI for that)
- [x] Changes are available on the Dev environment
Translations are in the following path:
translate
│ └───languages
│ │ en.js
│ │ index.js
│ │ pt.js
│ index.js
In the case of adding more languages, the file must be created in the languages folder.
The structure of the translation file must be according to the name of the page/component and the string as the following example:
const messages = {
en: {
translations: { // Mesmo valor usado nas configurações (defaultNS)
menu_nav_bar: {
dialogues: 'Dialogues',
questions: 'Questions',
answers: 'Answers'
},
stories_page: {
create_dialogue: "Create",
filter: 'Filter'
},
stories_edit_page: {
questions: 'Questions',
answers: 'Answers',
filter: 'Filter'
},
deleted: "Item deleted",
no_result: "No items found",
repeated_name: "Try a different name, it already exists",
no_special_char: "Use only letters without accents, numbers or _",
no_dialogs: "Click on the questions and answers to set up a dialogue with expected interaction examples",
delete_confirmation: "Delete item?",
exportar_conteudo: 'Export content',
story: {
created: "Dialogue created",
deleted: "Dialogue deleted",
updated: "Dialogue updated",
create_button: "Create new dialogue",
first_element: "The dialogue must begin with a question",
two_intents: "Add an answer after each question",
},
intent: {
created: "Question created",
deleted: "Question deleted",
updated: "Updated question",
toolbar_name: "Question title",
list_filter: "Registered questions",
create_button: "Create new question",
placeholder: "Ex: Gen_Greet, How_To_Reg_Serv",
name_good_pratice: "To identify the questions clearly, indicate the main subject and then the type of question, separated by '_'",
},
utter: {
created: "Answer created",
deleted: "Answer deleted",
selection: "Balloons appear:",
sequence_text: "sequentially",
updated: "Answer updated",
toolbar_name: "Answer title",
create_button: "Create new answer",
list_filter: "Answers registered",
alternatives_text: "as alternative",
placeholder: "Ex: Ans_Gen_Greet, Ans_How_To_Reg_Serv",
name_good_pratice: "To identify the answers clearly, use 'Resp_' and the title of the corresponding question, if any",
},
toolbar_name: "Save",
list_filter: 'Filter',
intent_form: {
new_question: 'New question'
},
uttter_form: {
new_balloon: 'New answer balloon'
},
example_story: 'Example:'
}
}
}
export { messages }
Fantastic work @gabrielfilipe7unb! I just did a quick update on some strings to follow RASA standard of "story", "intent" and "utter".
There are two places that remain unlocalized: the "Desfazer" button that appears on snackbars (e.g. after you delete something) and the "Apagar" button that appears inside the overflow menu of each section (right beside the save button).
I think now we are good to go!
EN strings look OK, but when I run the app in PT-BR...
Here we go!

Confirmed! 👍🏻