Multilingual Bots and Dynamic Language Support

Overview

The ai12z Copilot suite includes built-in support for multilingual bots that allow seamless communication with users in 20 languages. With automatic language detection based on the user's browser settings, ai12z dynamically adjusts the language of the user interface and bot responses to match the user’s language preference. This capability enables global reach and localized experiences, ensuring that bots respond in the same language as the question was asked.

Additionally, developers have full control over customizing text strings, labels, and phrases for different languages using JavaScript. This document provides detailed guidance on implementing multilingual bots, customizing language settings, and dynamically creating forms in various languages.

Key Features

• Automatic Language Detection: The bot detects the user's language from the browser settings and loads the corresponding language pack for supported languages.
• Dynamic Language Switching: Respond to users in the language they used for their query, ensuring a localized and seamless experience.
• Customizable Phrases: Developers can use JavaScript to modify the default phrases or properties loaded from the language pack.
• Support for 40 Languages: Language packs for over 40 languages are provided, with the ability to extend this further if needed.
• Dynamic Forms: Create and render dynamic forms in different languages based on user input or the detected language.

System Prompts for Multilingual Support

To ensure that the ai12z Copilot bots respond in the appropriate language, the following lines must be added to the system prompts:

React LLM Prompt

Respond in the same language as the question was asked.

Answer AI LLM Prompt

Respond in the same language as the question was asked.

These prompts instruct the bot to identify the language of the user’s question and provide a response in the same language.

Browser-Based Language Detection and Language Packs

The ai12z platform automatically detects the language settings of the user's browser. This detection allows ai12z to load the appropriate language pack for the interface and bot interactions. The following JavaScript function detects the user's language from the browser:

const userLang = navigator.language || navigator.userLanguage
console.log("User's language: " + userLang)

Once the language is detected, ai12z dynamically loads the language pack for the detected language. If you want to override or customize any text or labels dynamically, you can use JavaScript to modify these properties.

Example of Customizing Phrases with JavaScript

You can customize the text properties using JavaScript to translate them into the user's detected language. For example, to change the button text and placeholder based on the detected language:

const userLang = navigator.language || navigator.userLanguage

if (userLang === "fr") {
  // French
  document
    .querySelector('[data-key="your_key_here"]')
    .setAttribute("button-text", "Demandez-moi")
  document
    .querySelector('[data-key="your_key_here"]')
    .setAttribute("placeholder", "Tapez votre question ici...")
} else if (userLang === "es") {
  // Spanish
  document
    .querySelector('[data-key="your_key_here"]')
    .setAttribute("button-text", "Pregúntame")
  document
    .querySelector('[data-key="your_key_here"]')
    .setAttribute("placeholder", "Escriba su pregunta aquí...")
}

Customization Options

The ai12z Copilot provides various customizable properties, which can be translated into the user's language based on the detected language settings.

Property	Description	Example	Default
data-key (Required)	API key from your ai12z project settings	data-key="123456"
data-mode (Optional)	Server to use dev, prod, or local	data-mode="prod"	prod
heading (Optional)	Text displayed above the control	heading="Search Here 1"	empty
button-text (Optional)	Custom text for the button	button-text="Ask me"	Ask AI
help-text (Optional)	Helper text displayed in the search input	help-text="Type your question here"	Enter text to get started
no-results-text (Optional)	Custom text for no results found	no-results-text="No results found"	No results found...
auto-search (Optional)	If true, returns search results as you type	auto-search="true"	true
placeholder (Optional)	Customizes the placeholder text	placeholder="Enter your question"	empty
categorize (Optional)	If true, categorizes results by set categories	categorize="true"	true
follow-up-label (Optional)	Label for follow-up questions	follow-up-label="Another question?"	Do you have a follow-up?
clear-memory (Optional)	Clears search history upon dialog closure	clear-memory="true"	true
image-upload (Optional)	Enables the image upload icon	image-upload="true"	true
enable-mobile-view (Optional)	Occupies full width on mobile view	enable-mobile-view="true"	false

You can modify any of these properties based on the user's language settings using JavaScript, as shown in the previous example.

Dynamic Forms in Multiple Languages

In ai12z, you can dynamically create forms that are translated into the user's preferred language. This allows for a localized and personalized user experience when collecting input through forms. The following example demonstrates how dynamic forms can be generated and customized for multilingual support.

Example: Creating a Multilingual Dynamic Form

Here is an example of dynamically generating a form for activity sign-ups with language support:

def create_activity_form(activity, first_name, last_name, room_number, language):
    """
    Return form data according to the activity, translated to the user's language.
    """
    form_data = {
        "title": f"{translate('Sign up for', language)} {activity.capitalize()}",
        "pages": [
            {
                "name": "page1",
                "elements": [
                    {
                        "type": "text",
                        "name": "firstName",
                        "title": translate("First Name", language),
                        "defaultValue": first_name,
                        "isRequired": True,
                        "placeholder": translate("Enter your first name", language)
                    },
                    {
                        "type": "text",
                        "name": "lastName",
                        "title": translate("Last Name", language),
                        "defaultValue": last_name,
                        "isRequired": True,
                        "placeholder": translate("Enter your last name", language)
                    }
                ]
            }
        ]
    }

    return form_data

The translate function would be a utility that fetches the appropriate translation for a given string based on the selected language.

JavaScript Implementation for Dynamic Forms

To implement dynamic form translation in the front-end, you can pass the language ID or detected language to the form generator:

function generateForm(language) {
  // Call the backend to fetch the form data with the appropriate language
  fetch("/activities", {
    method: "POST",
    body: JSON.stringify({ language: language }),
  })
    .then((response) => response.json())
    .then((formData) => {
      renderForm(formData) // Function to render the form using the formData
    })
}

By detecting the browser language or receiving user input, you can generate and display forms that are fully translated into the user’s preferred language.

List of Language Packs

• Arabic
• German
• English
• Spanish
• Persian (Farsi)
• French
• Hindi
• Italian
• Japanese
• Korean
• Dutch
• Polish
• Portuguese
• Romanian
• Swedish
• Thai
• Turkish
• Ukrainian
• Vietnamese
• Chinese (likely Simplified)

Conclusion

The ai12z Copilot supports robust multilingual capabilities, ensuring that users can interact with bots and interfaces in their preferred language. From automatic language detection to dynamic form generation in multiple languages, the platform enables global accessibility and localized experiences. Through JavaScript customization, developers have full control over adjusting the text strings and labels based on the detected language, enhancing both user experience and engagement.

This documentation provides an overview of how to leverage multilingual support within the ai12z Copilot and how to dynamically adjust forms and text to different languages. The examples are applicable across different backend technologies, ensuring flexibility and scalability in your projects.