Globalization

The globalization process combines the translation of component messages with adapting them to specific locales.

For more information on how globalization practices are implemented in KendoReact, refer to the overview article. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

The following example demonstrates how to utilize the globalization aspects of the Chat.

import React from 'react';
import ReactDOM from 'react-dom';

import { Chat } from '@progress/kendo-react-conversational-ui';
import { IntlProvider , load } from '@progress/kendo-react-intl';

import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import weekData from 'cldr-core/supplemental/weekData.json';

import numbers from 'cldr-numbers-full/main/es/numbers.json';
import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
import dateFields from 'cldr-dates-full/main/es/dateFields.json';
import timeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';


load(
    likelySubtags,
    currencyData,
    weekData, numbers,
    caGregorian,
    dateFields,
    timeZoneNames
);

class App extends React.Component {
    constructor(props) {
        super(props);
        this.user = {
            id: 1,
            avatarUrl: "https://via.placeholder.com/24/008000/008000.png"
        };
        this.bot = {
            id: 0
        };
        this.state = {
            messages: [

            ]
        };
    }

    addNewMessage = (event) => {
        let botResponce = Object.assign({},event.message );
        botResponce.text = this.countReplayLength(event.message.text);
        botResponce.author = this.bot;
        this.setState((prevState) => {
            return { messages: [ ...prevState.messages, event.message ] };
        });
        let that = this;
        setTimeout(function() {
            that.setState((prevState) => {
                return { messages: [ ...prevState.messages, botResponce ] };
            });
        },1000);
    };

    countReplayLength = (question) => {
        let length = question.length;
        let answer = question + " contains exactly " + length + " symbols.";
        return answer;
    }

    render() {
        return (
            <div className="example-wrapper row">
                <div class="col-xs-12 col-sm-6 example-col">
                    <IntlProvider locale="en">
                        <Chat user={this.user}
                            messages={this.state.messages}
                            onMessageSend={this.addNewMessage}
                            width={370}>
                        </Chat>
                    </IntlProvider>
                </div>
                <div class="col-xs-12 col-sm-6 example-col">
                    <IntlProvider locale="es">
                        <Chat user={this.user}
                            messages={this.state.messages}
                            onMessageSend={this.addNewMessage}
                            width={370}>
                        </Chat>
                    </IntlProvider>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Internationalization

The internationalization process applies specific culture formats to a web application.

For more information, refer to:

Messages

The Chat does not provide built-in translated messages.

Right-to-Left Support

The following example demonstrates how to utilize the RTL support for the Chat.

import React from 'react';
import ReactDOM from 'react-dom';
import { Chat } from '@progress/kendo-react-conversational-ui';


class App extends React.Component {
    constructor(props) {
        super(props);
        this.user = {
            id: 1,
            avatarUrl: "https://via.placeholder.com/24/008000/008000.png"
        };
        this.bot = {
            id: 0
        };
        this.state = {
            messages: [
                {
                    author: this.bot,
                    suggestedActions: [ {
                        type: 'reply',
                        value: 'Oh, really?'
                    }, {
                        type: 'reply',
                        value: 'Thanks, but this is borring.'
                    } ],
                    timestamp: new Date(),
                    text: 'Hello, this is a demo bot. I don`t do much, but I can count symbols!'
                }
            ]
        };
    }

    addNewMessage = (event) => {
        let botResponce = Object.assign({},event.message );
        botResponce.text = this.countReplayLength(event.message.text);
        botResponce.author = this.bot;
        this.setState((prevState) => {
            return { messages: [ ...prevState.messages, event.message ] };
        });
        let that = this;
        setTimeout(function() {
            that.setState((prevState) => {
                return { messages: [ ...prevState.messages, botResponce ] };
            });
        },1000);
    };

    countReplayLength = (question) => {
        let length = question.length;
        let answer = question + " contains exactly " + length + " symbols.";
        return answer;
    }


    render() {
        return (
            <div dir="rtl">
                <Chat user={this.user}
                    messages={this.state.messages}
                    onMessageSend={this.addNewMessage}
                    width={400}>
                </Chat>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article