Add notice about local Websocket communication to chatbots configurations group

- in settings, Web > Chatbots, add notice: 'Communication with the browser is established using local Websockets'

├── apps
│   └── editor
│       └── src
│           └── views
│               └── settings
│                   └── frontend
│                       ├── Home
│                       │   ├── Home.tsx
│                       │   └── sections
│                       │       └── WebSection.tsx
│                       └── i18n
│                           └── translations
│                               ├── index.ts
│                               └── web.ts
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── settings-view
                        ├── Group
                        │   ├── Group.module.scss
                        │   └── Group.tsx
                        └── Notices
                            ├── Notices.module.scss
                            ├── Notices.tsx
                            └── index.ts

Author: robertpiosik

apps/editor/src/views/settings/frontend/Home/sections/WebSection.tsx

@@ -7,6 +7,7 @@ import { SortableList } from '@ui/components/editor/settings-view/SortableList'
 import { IconButton } from '@ui/components/editor/common/IconButton'
 import { ForwardedPorts } from '@ui/components/editor/settings-view/ForwardedPorts'
 import { DefaultConfigurationSelector } from '@ui/components/editor/settings-view/DefaultConfigurationSelector'
+import { Notices as UiNotices } from '@ui/components/editor/settings-view/Notices'
 import { WebConfiguration } from '@/types/web-configuration'
 import { Icon } from '@ui/components/editor/common/Icon'
 import { CHATBOTS } from '@shared/constants/chatbots'
@@ -162,7 +163,19 @@ export const WebSection = forwardRef<HTMLDivElement, Props>((props, ref) => {
       <div
         ref={(el) => props.set_section_ref('section:web:group:chatbots', el)}
       >
-        <UiGroup title={t('chatbots.configurations.title')}>
+        <UiGroup
+          title={t('chatbots.configurations.title')}
+          notice_slot={
+            <UiNotices
+              notices={[
+                {
+                  type: 'info',
+                  message: t('chatbots.configurations.notice')
+                }
+              ]}
+            />
+          }
+        >
           <SortableList
             items={props.web_configurations.map((c, index) => ({
               ...c,

apps/editor/src/views/settings/frontend/i18n/translations/web.ts

@@ -147,6 +147,25 @@ export const translations = {
     hu: 'Chatbotok automatikus kitöltése.',
     bg: 'Автоматично попълване на чатботове.'
   },
+  'chatbots.configurations.notice': {
+    en: 'Communication with the browser is established using local Websockets.',
+    pl: 'Komunikacja z przeglądarką jest nawiązywana za pomocą lokalnych Websocketów.',
+    'zh-cn': '与浏览器的通信是使用本地 Websockets 建立的。',
+    ja: 'ブラウザとの通信はローカル Websocket を使用して確立されます。',
+    'zh-tw': '與瀏覽器的通訊是使用本機 Websockets 建立的。',
+    de: 'Die Kommunikation mit dem Browser wird über lokale Websockets hergestellt.',
+    es: 'La comunicación con el navegador se establece utilizando Websockets locales.',
+    fr: "La communication avec le navigateur est établie à l'aide de Websockets locaux.",
+    'pt-br':
+      'A comunicação com o navegador é estabelecida usando Websockets locais.',
+    ru: 'Связь с браузером устанавливается с использованием локальных Websockets.',
+    ko: '브라우저와의 통신은 로컬 Websockets를 사용하여 설정됩니다.',
+    it: 'La comunicazione con il browser è stabilita utilizzando Websocket locali.',
+    tr: "Tarayıcı ile iletişim yerel Websocket'ler kullanılarak kurulur.",
+    cs: 'Komunikace s prohlížečem je navázána pomocí místních Websocketů.',
+    hu: 'A böngészővel való kommunikáció helyi Websocketek használatával jön létre.',
+    bg: 'Комуникацията с браузъра се осъществява чрез локални Websockets.'
+  },
   'chatbots.configurations.title': {
     en: 'Chatbots',
     pl: 'Chatboty',