feat: add max-char-limit support to chat widget and web chat template

components/chat_widget/src/assets/translations/ar.json

@@ -16,6 +16,7 @@
   "modal.confirm": "تأكيد",
   "composer.placeholder": "اكتب رسالة...",
   "composer.send": "إرسال الرسالة",
+  "composer.messageTooLong": "الرسالة طويلة جدًا",
   "error.fileTooLarge": "الملف كبير جدًا",
   "error.totalTooLarge": "إجمالي حجم الملفات كبير جدًا",
   "error.unsupportedType": "نوع الملف غير مدعوم",

components/chat_widget/src/assets/translations/en.json

@@ -16,6 +16,7 @@
   "modal.confirm": "Confirm",
   "composer.placeholder": "Type a message...",
   "composer.send": "Send message",
+  "composer.messageTooLong": "Message is too long",
   "error.fileTooLarge": "File too large",
   "error.totalTooLarge": "Total file size too large",
   "error.unsupportedType": "Unsupported file type",

components/chat_widget/src/assets/translations/es.json

@@ -16,6 +16,7 @@
   "modal.confirm": "Confirmar",
   "composer.placeholder": "Escribe un mensaje...",
   "composer.send": "Enviar mensaje",
+  "composer.messageTooLong": "El mensaje es demasiado largo",
   "error.fileTooLarge": "Archivo demasiado grande",
   "error.totalTooLarge": "Tamaño total de archivos demasiado grande",
   "error.unsupportedType": "Tipo de archivo no soportado",

components/chat_widget/src/assets/translations/fr.json

@@ -16,6 +16,7 @@
   "modal.confirm": "Confirmer",
   "composer.placeholder": "Tapez un message...",
   "composer.send": "Envoyer le message",
+  "composer.messageTooLong": "Le message est trop long",
   "error.fileTooLarge": "Fichier trop volumineux",
   "error.totalTooLarge": "Taille totale des fichiers trop importante",
   "error.unsupportedType": "Type de fichier non pris en charge",

components/chat_widget/src/assets/translations/hi.json

@@ -16,6 +16,7 @@
   "modal.confirm": "पुष्टि करें",
   "composer.placeholder": "संदेश लिखें...",
   "composer.send": "संदेश भेजें",
+  "composer.messageTooLong": "संदेश बहुत लंबा है",
   "error.fileTooLarge": "फ़ाइल बहुत बड़ी है",
   "error.totalTooLarge": "कुल फ़ाइल आकार बहुत बड़ा है",
   "error.unsupportedType": "फ़ाइल प्रकार समर्थित नहीं है",

components/chat_widget/src/assets/translations/it.json

@@ -16,6 +16,7 @@
   "modal.confirm": "Conferma",
   "composer.placeholder": "Scrivi un messaggio...",
   "composer.send": "Invia messaggio",
+  "composer.messageTooLong": "Il messaggio è troppo lungo",
   "error.fileTooLarge": "File troppo grande",
   "error.totalTooLarge": "Dimensione totale del file troppo grande",
   "error.unsupportedType": "Tipo di file non supportato",

components/chat_widget/src/assets/translations/pt.json

@@ -16,6 +16,7 @@
   "modal.confirm": "Confirmar",
   "composer.placeholder": "Digite uma mensagem...",
   "composer.send": "Enviar mensagem",
+  "composer.messageTooLong": "A mensagem é muito longa",
   "error.fileTooLarge": "Arquivo muito grande",
   "error.totalTooLarge": "Tamanho total do arquivo muito grande",
   "error.unsupportedType": "Tipo de arquivo não suportado",

components/chat_widget/src/assets/translations/sw.json

@@ -16,6 +16,7 @@
   "modal.confirm": "Thibitisha",
   "composer.placeholder": "Andika ujumbe...",
   "composer.send": "Tuma ujumbe",
+  "composer.messageTooLong": "Ujumbe ni mrefu sana",
   "error.fileTooLarge": "Faili ni kubwa sana",
   "error.totalTooLarge": "Jumla ya ukubwa wa faili ni kubwa sana",
   "error.unsupportedType": "Aina ya faili haitumiki",

components/chat_widget/src/assets/translations/uk.json

@@ -16,6 +16,7 @@
   "modal.confirm": "Підтвердити",
   "composer.placeholder": "Введіть повідомлення...",
   "composer.send": "Надіслати повідомлення",
+  "composer.messageTooLong": "Повідомлення занадто довге",
   "error.fileTooLarge": "Файл занадто великий",
   "error.totalTooLarge": "Загальний розмір файлів занадто великий",
   "error.unsupportedType": "Непідтримуваний тип файлу",

components/chat_widget/src/components.d.ts

@@ -51,6 +51,10 @@ export namespace Components {
           * The language code for the widget UI (e.g., 'en', 'es', 'fr'). Defaults to en
          */
         "language"?: string;
+        /**
+          * Maximum number of characters allowed in a single message (derived from the model's token limit). When set, a live counter is shown and the send button is disabled when exceeded.
+         */
+        "maxCharLimit"?: number;
         /**
           * The operating mode of the widget. - 'standard': Default floating window with launcher button. - 'kiosk': Fills parent container, always visible, no header or launcher button.   The parent element must establish a containing block (e.g. `position: relative`).
           * @default 'standard'
@@ -170,6 +174,10 @@ declare namespace LocalJSX {
           * The language code for the widget UI (e.g., 'en', 'es', 'fr'). Defaults to en
          */
         "language"?: string;
+        /**
+          * Maximum number of characters allowed in a single message (derived from the model's token limit). When set, a live counter is shown and the send button is disabled when exceeded.
+         */
+        "maxCharLimit"?: number;
         /**
           * The operating mode of the widget. - 'standard': Default floating window with launcher button. - 'kiosk': Fills parent container, always visible, no header or launcher button.   The parent element must establish a containing block (e.g. `position: relative`).
           * @default 'standard'

components/chat_widget/src/components/ocs-chat/ocs-chat.css

@@ -582,6 +582,27 @@
     }
   }
 
+  .message-textarea-error {
+    border-color: var(--error-text-color);
+    &:focus {
+      outline-color: var(--error-text-color);
+    }
+  }
+
+  .char-counter {
+    @apply text-xs text-right pr-1 pt-0.5;
+    color: var(--char-counter-color, #9ca3af);
+  }
+
+  .char-counter-warning {
+    color: var(--char-counter-warning-color, #f59e0b);
+  }
+
+  .char-counter-error {
+    color: var(--error-text-color);
+    font-weight: 600;
+  }
+
   .send-button {
     @apply rounded-md font-medium transition-colors duration-200;
     padding: 0.5em 1em;

components/chat_widget/src/components/ocs-chat/ocs-chat.spec.tsx

@@ -453,4 +453,73 @@ describe('ocs-chat', () => {
       expect(starterQuestions).toBeTruthy();
     });
   });
+
+  describe('Character Limit', () => {
+    it('should not render counter when maxCharLimit is not set', async () => {
+      const page = await newSpecPage({
+        components: [OcsChat],
+        html: `<open-chat-studio-widget chatbot-id="test-bot" visible="true"></open-chat-studio-widget>`,
+      });
+      const component = page.rootInstance as OcsChat;
+      component.sessionId = 'test-session';
+      await page.waitForChanges();
+
+      const counter = page.root?.shadowRoot?.querySelector('.char-counter');
+      expect(counter).toBeNull();
+    });
+
+    it('should render counter and allow send when message is within limit', async () => {
+      const page = await newSpecPage({
+        components: [OcsChat],
+        html: `<open-chat-studio-widget chatbot-id="test-bot" visible="true" max-char-limit="100"></open-chat-studio-widget>`,
+      });
+      const component = page.rootInstance as OcsChat;
+      component.sessionId = 'test-session';
+      component.messageInput = 'short message';
+      await page.waitForChanges();
+
+      const counter = page.root?.shadowRoot?.querySelector('.char-counter');
+      expect(counter).toBeTruthy();
+      expect(counter?.classList.contains('char-counter-error')).toBe(false);
+      expect(counter?.classList.contains('char-counter-warning')).toBe(false);
+
+      const sendBtn = page.root?.shadowRoot?.querySelector('button[title]') as HTMLButtonElement | null;
+      // send button should not be disabled due to char limit alone (message is short)
+      expect(component.messageTooLong).toBe(false);
+    });
+
+    it('should show warning state when message exceeds 80% of limit', async () => {
+      const page = await newSpecPage({
+        components: [OcsChat],
+        html: `<open-chat-studio-widget chatbot-id="test-bot" visible="true" max-char-limit="10"></open-chat-studio-widget>`,
+      });
+      const component = page.rootInstance as OcsChat;
+      component.sessionId = 'test-session';
+      component.messageInput = '12345678'; // 80% of 10
+      await page.waitForChanges();
+
+      const counter = page.root?.shadowRoot?.querySelector('.char-counter');
+      expect(counter?.classList.contains('char-counter-warning')).toBe(true);
+      expect(counter?.classList.contains('char-counter-error')).toBe(false);
+      expect(component.messageTooLong).toBe(false);
+    });
+
+    it('should show error state and block send when message exceeds limit', async () => {
+      const page = await newSpecPage({
+        components: [OcsChat],
+        html: `<open-chat-studio-widget chatbot-id="test-bot" visible="true" max-char-limit="5"></open-chat-studio-widget>`,
+      });
+      const component = page.rootInstance as OcsChat;
+      component.sessionId = 'test-session';
+      component.messageInput = 'this is too long';
+      await page.waitForChanges();
+
+      const counter = page.root?.shadowRoot?.querySelector('.char-counter');
+      expect(counter?.classList.contains('char-counter-error')).toBe(true);
+      expect(component.messageTooLong).toBe(true);
+
+      const sendButton = page.root?.shadowRoot?.querySelector('button.send-button') as HTMLButtonElement | null;
+      expect(sendButton?.disabled).toBe(true);
+    });
+  });
 });

components/chat_widget/src/components/ocs-chat/ocs-chat.tsx

@@ -206,10 +206,18 @@ export class OcsChat {
   /**
    * @internal
    * Optional version number of the chatbot to use. Requires authentication.
-   * This is for internal use only and is not intended for public-facing widgets.
+   * Intentionally declared as @Prop() so the Django host page can pass it as
+   * an HTML attribute; it is not part of the public widget API and should not
+   * be used by third-party embedders.
    */
   @Prop() versionNumber?: number;
 
+  /**
+   * Maximum number of characters allowed in a single message (derived from the model's token limit).
+   * When set, a live counter is shown and the send button is disabled when exceeded.
+   */
+  @Prop() maxCharLimit?: number;
+
   @State() error: string = '';
   @State() messages: ChatMessage[] = [];
   @State() sessionId?: string;
@@ -495,8 +503,17 @@ export class OcsChat {
     }
   }
 
+  private get messageTooLong(): boolean {
+    return this.maxCharLimit != null && this.messageInput.length > this.maxCharLimit;
+  }
+
+  private get messageNearLimit(): boolean {
+    return this.maxCharLimit != null && this.messageInput.length > this.maxCharLimit * 0.8;
+  }
+
   private async sendMessage(message: string): Promise<void> {
     if (!message.trim()) return;
+    if (this.messageTooLong) return;
     const epoch = this.sessionEpoch;
 
     // Start session if we don't have one yet
@@ -1748,7 +1765,7 @@ export class OcsChat {
                 <div class="input-container">
                   <textarea
                     ref={el => (this.textareaRef = el)}
-                    class="message-textarea"
+                    class={`message-textarea${this.messageTooLong ? ' message-textarea-error' : ''}`}
                     rows={1}
                     placeholder={this.translationManager.get('composer.placeholder')}
                     value={this.messageInput}
@@ -1785,13 +1802,21 @@ export class OcsChat {
                     </button>
                   )}
                   <button
-                    class={`send-button ${!this.isTyping && !this.isLoading && !!this.messageInput.trim() ? 'send-button-enabled' : 'send-button-disabled'}`}
+                    class={`send-button ${
+                      !this.isTyping && !this.isLoading && !!this.messageInput.trim() && !this.messageTooLong ? 'send-button-enabled' : 'send-button-disabled'
+                    }`}
                     onClick={() => this.sendMessage(this.messageInput)}
-                    disabled={this.isTyping || this.isUploadingFiles || this.isLoading || !this.messageInput.trim()}
+                    disabled={this.isTyping || this.isUploadingFiles || this.isLoading || !this.messageInput.trim() || this.messageTooLong}
+                    title={this.messageTooLong ? this.translationManager.get('composer.messageTooLong') : undefined}
                   >
                     {this.isUploadingFiles ? `${this.translationManager.get('status.uploading')}...` : this.translationManager.get('composer.send')}
                   </button>
                 </div>
+                {this.maxCharLimit != null && (
+                  <div class={`char-counter${this.messageTooLong ? ' char-counter-error' : this.messageNearLimit ? ' char-counter-warning' : ''}`}>
+                    {this.messageInput.length} / {this.maxCharLimit}
+                  </div>
+                )}
               </div>
               <div class="flex items-center justify-center text-[0.8em] font-light w-full text-slate-500 py-[2px]">
                 <p>

components/chat_widget/src/components/ocs-chat/readme.md

@@ -21,6 +21,7 @@ For more information, see the [Open Chat Studio documentation](https://docs.open
 | `headerText`                 | `header-text`                   | The text to place in the header.                                                                                                                                                                                                                                   | `""`                            | `undefined`                        |
 | `iconUrl`                    | `icon-url`                      | URL of the icon to display on the button. If not provided, uses the default OCS logo.                                                                                                                                                                              | `string`                        | `undefined`                        |
 | `language`                   | `language`                      | The language code for the widget UI (e.g., 'en', 'es', 'fr'). Defaults to en                                                                                                                                                                                       | `string`                        | `undefined`                        |
+| `maxCharLimit`               | `max-char-limit`                | Maximum number of characters allowed in a single message (derived from the model's token limit). When set, a live counter is shown and the send button is disabled when exceeded.                                                                                  | `number`                        | `undefined`                        |
 | `mode`                       | `mode`                          | The operating mode of the widget. - 'standard': Default floating window with launcher button. - 'kiosk': Fills parent container, always visible, no header or launcher button.   The parent element must establish a containing block (e.g. `position: relative`). | `"kiosk" \| "standard"`         | `'standard'`                       |
 | `newChatConfirmationMessage` | `new-chat-confirmation-message` | The message to display in the new chat confirmation dialog.                                                                                                                                                                                                        | `string`                        | `undefined`                        |
 | `pageContext`                | `page-context`                  | Optional context object to send with each message. This provides page-specific context to the bot.                                                                                                                                                                 | `{ [x: string]: any; }`         | `undefined`                        |

components/chat_widget/src/services/chat-session-service.ts

@@ -125,7 +125,17 @@ export class ChatSessionService {
     });
 
     if (!response.ok) {
-      throw new Error(`Failed to poll task: ${response.statusText}`);
+      let errorMessage = `Failed to poll task: ${response.statusText}`;
+      try {
+        const data = (await response.json()) as { error?: string };
+        if (data?.error) {
+          errorMessage = data.error;
+        }
+      } catch {
+        // non-JSON body; keep statusText fallback
+      }
+
+      throw new Error(errorMessage);
     }
 
     return response.json() as Promise<ChatTaskPollResponse>;

templates/chatbots/chat/web_chat.html

@@ -35,6 +35,7 @@
               user-name="{{ request.user.get_full_name }}"
             {% endif %}
             persistent-session="true"
+            {% if max_char_limit %}max-char-limit="{{ max_char_limit }}"{% endif %}
           ></open-chat-studio-widget>
         </div>
       {% else %}