Compose: Refine the check_overflow_text function

Fixes: zulip#28706

This commit optimization in compose_validate.js manages cases where text.length exceeds max_length, displaying exceeded messages and negative exceeded characters, and tooltip message is updated to 'Maximum message length: 10000 characters.’This simplification enhances clarity by displaying only the remaining characters.

web/src/compose_validate.js

@@ -755,22 +755,27 @@ export function check_overflow_text() {
     const remainingCharacters = max_length - text.length;
     const $indicator = $("#compose-limit-indicator");
 
-    if (remainingCharacters < 0) {
+    if (text.length > max_length) {
         $indicator.addClass("over_limit");
         $("textarea#compose-textarea").addClass("over_limit");
         $indicator.html(
             render_compose_limit_indicator({
-                remaining_length: remainingCharacters, 
+                remaining_length: remainingCharacters,
                 max_length,
             }),
         );
         compose_banner.show_error_message(
-            $t({ defaultMessage: "Message length exceeded by {exceeded_chars} characters." }, { exceeded_chars: Math.abs(remainingCharacters) }),
+            $t(
+                {
+                    defaultMessage: "Message length exceeded by {exceeded_chars} characters.",
+                },
+                {exceeded_chars: Math.abs(remainingCharacters)},
+            ),
             compose_banner.CLASSNAMES.message_too_long,
             $("#compose_banners"),
         );
         set_message_too_long(true);
-    } else {
+    } else if (text.length > 0.9 * max_length) {
         $indicator.removeClass("over_limit");
         $("textarea#compose-textarea").removeClass("over_limit");
         $indicator.html(
@@ -779,6 +784,12 @@ export function check_overflow_text() {
                 max_length,
             }),
         );
+        set_message_too_long(false);
+        $(`#compose_banners .${CSS.escape(compose_banner.CLASSNAMES.message_too_long)}`).remove();
+    } else {
+        $indicator.text("");
+        $("textarea#compose-textarea").removeClass("over_limit");
+
         set_message_too_long(false);
         $(`#compose_banners .${CSS.escape(compose_banner.CLASSNAMES.message_too_long)}`).remove();
     }

web/tests/compose.test.js

@@ -852,15 +852,3 @@ test_ui("narrow_button_titles", ({override}) => {
 run_test("reset MockDate", () => {
     MockDate.reset();
 });
-
-run_test("test check_overflow_text with compose_limit_indicator.hbs", ({ mock_template }) => {
-
-    // Set the expected remaining_length value
-    const remaining_length = 42;  
-
-    mock_template("compose_limit_indicator.hbs", false, (data) => {
-        assert.deepEqual(data, { remaining_length });
-        return "stub-for-zjquery";
-    });
-
-});

web/tests/compose_validate.test.js

@@ -573,7 +573,7 @@ test_ui("test_check_overflow_text", ({mock_template}) => {
         assert.equal(
             data.banner_text,
             $t({
-                defaultMessage: "Message length exceeded by 100 characters.",
+                defaultMessage: "Message length exceeded by 1 characters.",
             }),
         );
         banner_rendered = true;
@@ -588,7 +588,7 @@ test_ui("test_check_overflow_text", ({mock_template}) => {
     $textarea.val("a".repeat(10000 + 1));
     compose_validate.check_overflow_text();
     assert.ok($indicator.hasClass("over_limit"));
-    assert.equal(limit_indicator_html, "10001\n");
+    assert.equal(limit_indicator_html, "-1\n\n");
     assert.ok($textarea.hasClass("over_limit"));
     assert.ok(banner_rendered);
     assert.ok($(".message-send-controls").hasClass("disabled-message-send-controls"));
@@ -598,7 +598,7 @@ test_ui("test_check_overflow_text", ({mock_template}) => {
     $textarea.val("a".repeat(9000 + 1));
     compose_validate.check_overflow_text();
     assert.ok(!$indicator.hasClass("over_limit"));
-    assert.equal(limit_indicator_html, "9001\n");
+    assert.equal(limit_indicator_html, "999\n\n");
     assert.ok(!$textarea.hasClass("over_limit"));
     assert.ok(!$(".message-send-controls").hasClass("disabled-message-send-controls"));
     assert.ok(!banner_rendered);