12.customization-minimizable-web-chat Sample Doesn't not translate to es-ES

[renrous]

Hello, the botframework-webchat-component module does not translate correctly to es-ES, after investigating the problem, I found that the file is-ES.js located in
% project% \ node_modules \ botframework-webchat-component \ lib \ Localization is not fully

translated, original file:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

function xMinutesAgo(date) {
  var now = Date.now();
  var deltaInMs = now - new Date(date).getTime();
  var deltaInMinutes = Math.floor(deltaInMs / 60000);
  var deltaInHours = Math.floor(deltaInMs / 3600000);

  if (deltaInMinutes < 1) {
    return 'Ahora';
  } else if (deltaInMinutes === 1) {
    return 'Hace un minuto';
  } else if (deltaInHours < 1) {
    return "Hace ".concat(deltaInMinutes, " minutos");
  } else if (deltaInHours === 1) {
    return "Hace una hora";
  } else if (deltaInHours < 5) {
    return "Hace ".concat(deltaInHours, " horas");
  } else if (deltaInHours <= 24) {
    return "Hoy";
  } else if (deltaInHours <= 48) {
    return "Ayer";
  } else {
    return new Intl.DateTimeFormat('es-ES').format(date);
  }
}

var _default = {
  FAILED_CONNECTION_NOTIFICATION: 'Imposible conectar.',
  // Do not localize {Retry}; it is a placeholder for "Retry". English translation should be, "Send failed. Retry."
  SEND_FAILED_KEY: 'No enviado. {Retry}.',
  SLOW_CONNECTION_NOTIFICATION: 'Está tardando mucho en conectar.',
  'X minutes ago': xMinutesAgo,
  'Chat': 'Chat',
  'Microphone off': 'Apagar micrófono',
  'Microphone on': 'Encender micrófono',
  'Download file': 'Descargar archivo',
  'New messages': 'Nuevos mensajes',
  'Listening…': 'Escuchando…',
  'retry': 'reintentar',
  'Retry': 'Reintentar',
  // Please alter this value if 'Retry' at the beginning of a sentence is written differently than at the end of a sentence.
  'Send': 'Enviar',
  'Sending': 'Enviando',
  'Speak': 'Hablar',
  'Starting…': 'Comenzando',
  'Tax': 'Impuestos',
  'Total': 'Total',
  'Type your message': 'Escribe tu mensaje...',
  'Upload file': 'Subir archivo',
  'VAT': 'IVA'
};
exports.default = _default;

Complete translated file:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

function botSaidSomething(avatarInitials, text, timestamp) {
  return "El Bot ".concat(avatarInitials, " dijo, ").concat(text, ", ").concat(xMinutesAgo(timestamp));
}

function userSaidSomething(avatarInitials, text, timestamp) {
  return "El usuario ".concat(avatarInitials, " dijo, ").concat(text, ", ").concat(xMinutesAgo(timestamp));
}

function xMinutesAgo(dateStr) {
  var date = new Date(dateStr);
  var dateTime = date.getTime();

  if (isNaN(dateTime)) {
    return dateStr;
  }

  var now = Date.now();
  var deltaInMs = now - dateTime;
  var deltaInMinutes = Math.floor(deltaInMs / 60000);
  var deltaInHours = Math.floor(deltaInMs / 3600000);

  if (deltaInMinutes < 1) {
    return 'Ahora';
  } else if (deltaInMinutes === 1) {
    return 'Hace un minuto';
  } else if (deltaInHours < 1) {
    return "Hace ".concat(deltaInMinutes, " minutos");
  } else if (deltaInHours === 1) {
    return "Hace una hora";
  } else if (deltaInHours < 5) {
    return "Hace ".concat(deltaInHours, " horas");
  } else if (deltaInHours <= 24) {
    return "Hoy";
  } else if (deltaInHours <= 48) {
    return "Ayer";
  } else if (window.Intl) {
    return new Intl.DateTimeFormat('en-US').format(date);
  } else {
    return date.toLocaleString('en-US', {
      day: '2-digit',
      hour: '2-digit',
      hour12: false,
      minute: '2-digit',
      month: '2-digit',
      year: 'numeric'
    });
  }
}

var _default = {
  FAILED_CONNECTION_NOTIFICATION: 'No se puede establecer conexion.',
  // Do not localize {Retry}; it is a placeholder for "Retry". English translation should be, "Send failed. Retry."
  SEND_FAILED_KEY: 'No enviado. {Retry}.',
  SLOW_CONNECTION_NOTIFICATION: 'Tomando más de lo usuar para conectarse.',
  'Bot said something': botSaidSomething,
  'User said something': userSaidSomething,
  'X minutes ago': xMinutesAgo,
  // '[File of type '%1']': '[File of type '%1']",
  // '[Unknown Card '%1']': '[Unknown Card '%1']',
  'Adaptive Card parse error': 'Adaptive Card parse error',
  'Adaptive Card render error': 'Adaptive Card render error',
  'Chat': 'Chat',
  'Download file': 'Descargar archivo',
  'Microphone off': 'Apagar microfono',
  'Microphone on': 'Encender microfono',
  'Left': 'Izquierda',
  'Listening…': 'Escuchando...',
  'New messages': 'Nuevos mensajes',
  'Right': 'Derecha',
  'retry': 'reintentar',
  'Retry': 'Reintentar',
  'Send': 'Enviar',
  'Sending': 'Enviando',
  'Speak': 'Hablar',
  'Starting…': 'Comenzando…',
  'Tax': 'Impuesto',
  'Total': 'Total',
  'Type your message': 'Escribe tu mensaje...',
  'Upload file': 'Subir archivo',
  'VAT': 'IVA'
};
exports.default = _default;

example with original file:

example replacing original file by translated:

I would like the issue to be analyzed so that the full translation of the module is carried out and to avoid having to manually replace the file es-ES.js

[corinagum]

Hey @renrous! Thanks for the changes.

Instead of editing the \lib\ directory, which will get overwritten in each build, I recommend editing the es-ES.js file that produces the \lib\ file during build. After you make the changes, you can run npm run build to build the es-ES.js file in \lib\.

Would you mind making a PR of these changes so that we can give you input and have this code merged in? When you do a PR, you can add your username to LOCALIZATION.md and add an update to the CHANGELOG.md as well.

When you make your PR, please tag this issue so that it will be closed when your changes are merged in.

Thanks so much for the help!

[Edit] I forgot to say, if you need any support or have questions while doing this PR, please feel free to contact me. I am happy to help!

[renrous]

hello @corinagum thank you very much, I really do not have much experience in the use of github I'm doing the first experiences, I'm not clear how to do the PR if you could help me with this to learn happy to be able to count on the help and learn to keep getting involved in the use of github .
Thank you very much!

[corinagum]

Let's start by taking a look at the Contributing documentation for Web Chat. I'm not sure how new you are to git, but I'll outline some first steps for you to get comfortable with first.

1. Fork and clone Web Chat. Make a new branch that you will work off of
2. Set https://github.com/microsoft/BotFramework-WebChat as your upstream - (your fork will be your origin)
3. Practice the "Building the project" section on Contributing.
4. Make sure Web Chat runs locally on the playground:
   • cd packages/playground
   • npm run build
   • npm run start
   • play around with Mock Bot to make sure the bot runs as expected
5. Make your new changes on BotFramework-WebChat/packages/component/src/Localization/es-ES.js
6. Using the playground linked above, test your changes and make sure your code doesn't cause any errors.
7. Update CHANGELOG.md and LOCALIZATION.md
8. Commit your changes and push to a branch on your fork
9. Start a new Pull Request (see screencap below:)
   
10. Verify your changes and submit a Pull Request
11. We will review your changes and possibly leave comments and suggestions. After that, you can implement the changes we suggest, and push those changes to your branch. After that, the Web Chat team will handle the rest!

Be sure to look through all of the Git Hub documentation, and don't be afraid to explore the documentation. It has a lot of helpful information. :) Feel free to ask questions along the way if you need more help.

[renrous]

hello @corinagum first of all thanks for your help, the indications helped me and getting involved with the use of github to generate the PR led me to give me a call at https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/ component / src / Localization / en-ES.js the file for the location is-ES is complete and it works, then the problem is in the botframework-webchat-component module uploaded to npm, when I include this module in a project and it is downloaded Direct from npm the file is not the same, but an incomplete one is downloaded:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _default = {
  // FAILED_CONNECTION_NOTIFICATION: '',
  // Do not localize {Retry}; it is a placeholder for "Retry". English translation should be, "Send failed. Retry."
  SEND_FAILED_KEY: 'No enviado. {Retry}.',
  // SLOW_CONNECTION_NOTIFICATION: '',
  'Chat': 'Chat',
  'Microphone off': 'Apagar micrófono',
  'Microphone on': 'Encender micrófono',
  'Download file': 'Descargar archivo',
  'New messages': 'Nuevos mensajes',
  'Listening…': 'Escuchando…',
  'retry': 'reintentar',
  'Retry': 'Reintentar',
  // Please alter this value if 'Retry' at the beginning of a sentence is written differently than at the end of a sentence.
  'Send': 'Enviar',
  'Sending': 'Enviando',
  'Speak': 'Hablar',
  'Starting…': 'Comenzando',
  'Tax': 'Impuestos',
  'Total': 'Total',
  'Type your message': 'Escribe tu mensaje...',
  'Upload file': 'Subir archivo',
  'VAT': 'IVA' // 'X minutes ago':

};

which is not completely translated, the point then is to upload the version of the corresponding ES-ES file to the npm module, should I do something for this?
I hope to have explained to me despite my bad English
Thank you very much!

[corinagum]

Hi @renrous, thanks for the reply. I'm not sure I understood your question so please let me know if I am giving you incorrect advice.

The code that you originally posted to me is an outdated version of the es-ES file. When you do this PR, we want to make sure that your improvements are included, as well as the updated phrases that have been added more recently.

The intention when you do a PR is to update BotFramework-WebChat/packages/component/src/Localization/es-ES.js with the changes you recommended in the original post. You will also need to provide the Spanish for the new phrases, such as // FAILED_CONNECTION_NOTIFICATION: '',. If you are able, it would be great if you can update all of the incorrect AND empty Spanish phrases. You can look at BotFramework-WebChat/packages/component/src/Localization/en-US.js to see what the original English is and translate from there.

If you're concerned about the translations of these phrases, I also know a few Spanish speakers on our team and we could get them to look at the PR after you submit it. Please let me know what you think!

[corinagum]

Hey @renrous, how's it going? Do you have any questions? If you think you will not be able to make changes, please let me know. That's no problem, and I can look into this fix instead.