# Chat

The module allows the creation of chat dialogs. The chat is displayed across the UI in a right panel, providing users with a persistent chat experience throughout the application.

**Note:** In Crowdin, a chat module from an app installed by a project owner will only be visible to project members within that project, not across the whole product.

## Sample

```js ins={14-18} title="index.js"
    import crowdinModule from '@crowdin/app-project-module';

    const app = crowdinModule.express();

    const configuration = {
      baseUrl: 'https://123.ngrok.io',
      clientId: 'clientId',
      clientSecret: 'clientSecret',
      name: 'Sample App',
      identifier: 'sample-app',
      description: 'Sample App description',
      dbFolder: import.meta.dirname,
      imagePath: import.meta.dirname + '/logo.png',
      chat: [{
        key: 'sample-chat',
        uiPath: import.meta.dirname + '/public',
        name: 'Sample Chat'
      }]
    }

    const crowdinApp = crowdinModule.addCrowdinEndpoints(app, configuration);

    app.listen(3000, () =>  console.log('Crowdin app started'));
    ```
  ```ts ins={15-19} title="index.ts"
    import crowdinModule from '@crowdin/app-project-module';
    import type { ClientConfig } from '@crowdin/app-project-module';

    const app = crowdinModule.express();

    const configuration: ClientConfig = {
      baseUrl: 'https://123.ngrok.io',
      clientId: 'clientId',
      clientSecret: 'clientSecret',
      name: 'Sample App',
      identifier: 'sample-app',
      description: 'Sample App description',
      dbFolder: import.meta.dirname,
      imagePath: import.meta.dirname + '/logo.png',
      chat: [{
        key: 'sample-chat',
        uiPath: import.meta.dirname + '/public',
        name: 'Sample Chat'
      }]
    }

    const crowdinApp = crowdinModule.addCrowdinEndpoints(app, configuration);

    app.listen(3000, () =>  console.log('Crowdin app started'));
    ```
  You can use the [React JSON Schema forms](/app-project-module/user-interface/) to define the UI for your chat in a declarative way:

```js "formSchema" "formUiSchema" title="index.js"
const configuration = {
  baseUrl: 'https://123.ngrok.io',
  clientId: 'clientId',
  clientSecret: 'clientSecret',
  name: 'Sample App',
  identifier: 'sample-app',
  description: 'Sample App description',
  dbFolder: import.meta.dirname,
  imagePath: import.meta.dirname + '/logo.png',
  chat: [{
    key: 'sample-chat',
    formSchema: {
      "title": "Chat settings",
      "type": "object",
      "properties": {
        "welcomeMessage": {
          "type": "string",
          "title": "Welcome message",
          "default": "Hello! How can I help you?"
        }
      }
    },
    formUiSchema: {
      "ui:submitButtonOptions": {
        "submitText": "Save"
      }
    }
  }]
};
```

### Chats

You can define chat dialogs:

```js title="index.js"
const configuration = {
  // ... other configuration
  chat: [
    {
      key: 'first-chat',
      uiPath: import.meta.dirname + '/public/chat1',
      name: 'First Chat'
    },
    {
      key: 'second-chat',
      formSchema: {
        // ... schema definition
      },
      name: 'Second Chat'
    }
  ]
};
```

## Configuration

| Parameter<div class="w-32"/>  | Description                                                                                                    |
|-------------------------------|----------------------------------------------------------------------------------------------------------------|
| `key`                         | Unique identifier for the chat.                                                                                |
| `name`                        | Display name for the chat (optional, defaults to app name).                                                    |
| `url`                         | The relative URL to the content page of the module that will be integrated into the UI.                        |
| `uiPath`                      | Folder where UI of the module is located (`js`, `html`, `css` files).                                          |
| `fileName`                    | Page name (default `index.html`).                                                                              |
| `formSchema`                  | [JSON schema](/app-project-module/user-interface/) for the form that will be displayed in the chat.            |
| `formUiSchema`                | [JSON schema](/app-project-module/user-interface/) for the UI of the form that will be displayed in the chat.  |
| `formPostDataUrl`             | URL to custom endpoint to save form data (POST requests).                                                      |
| `formGetDataUrl`              | URL to custom endpoint to retrieve form data (GET requests).                                                   |
| `formPatchDataUrl`            | URL to custom endpoint for patching form data (PATCH requests).                                                |
| `environments`                | Environments where the chat module is available (`crowdin`, `crowdin-enterprise`).                              |