topic_summary: Add button to generate narrow summary.

This remains only enabled in the development environment.

tools/test-js-with-node

@@ -153,6 +153,7 @@ EXEMPT_FILES = make_set(
         "web/src/message_notifications.ts",
         "web/src/message_scroll.ts",
         "web/src/message_scroll_state.ts",
+        "web/src/message_summary.ts",
         "web/src/message_util.ts",
         "web/src/message_view.ts",
         "web/src/message_view_header.ts",

web/src/message_fetch.ts

@@ -317,7 +317,7 @@ function handle_operators_supporting_id_based_api(narrow_parameter: string): str
     return JSON.stringify(narrow_terms);
 }
 
-function get_narrow_for_message_fetch(filter: Filter): string {
+export function get_narrow_for_message_fetch(filter: Filter): string {
     let narrow_data = filter.public_terms();
     if (page_params.narrow !== undefined) {
         narrow_data = [...narrow_data, ...page_params.narrow];

web/src/message_summary.ts

@@ -0,0 +1,56 @@
+import $ from "jquery";
+import {z} from "zod";
+
+import render_topic_summary from "../templates/topic_summary.hbs";
+
+import * as channel from "./channel.ts";
+import * as dialog_widget from "./dialog_widget.ts";
+import {Filter} from "./filter.ts";
+import {$t} from "./i18n.ts";
+import * as message_fetch from "./message_fetch.ts";
+import * as stream_data from "./stream_data.ts";
+import * as util from "./util.ts";
+
+export function get_narrow_summary(channel_id: number, topic_name: string): void {
+    const filter = new Filter([
+        {operator: "channel", operand: `${channel_id}`},
+        {operator: "topic", operand: topic_name},
+    ]);
+    const data = {narrow: message_fetch.get_narrow_for_message_fetch(filter)};
+    const channel_name = stream_data.get_stream_name_from_id(channel_id);
+    const display_topic_name = util.get_final_topic_display_name(topic_name);
+    dialog_widget.launch({
+        html_heading: $t(
+            {defaultMessage: "Summary of #${channel_name} > ${topic_name}:"},
+            {channel_name, topic_name: display_topic_name},
+        ),
+        html_body: "",
+        html_submit_button: "Close",
+        close_on_submit: true,
+        on_click() {
+            // Just close the modal, there is nothing else to do.
+        },
+        id: "topic-summary-modal",
+        single_footer_button: true,
+        post_render() {
+            const close_on_success = false;
+            dialog_widget.submit_api_request(
+                channel.get,
+                "/json/messages/summary",
+                data,
+                {
+                    success_continuation(response_data) {
+                        const data = z.object({summary: z.string()}).parse(response_data);
+                        const message = data.summary;
+                        $("#topic-summary-modal .modal__content").html(
+                            render_topic_summary({
+                                message,
+                            }),
+                        );
+                    },
+                },
+                close_on_success,
+            );
+        },
+    });
+}

web/src/popover_menus_data.ts

@@ -55,6 +55,8 @@ type TopicPopoverContext = {
     is_empty_string_topic: boolean;
     topic_unmuted: boolean;
     is_spectator: boolean;
+    is_moderator: boolean;
+    is_development_environment: boolean;
     is_topic_empty: boolean;
     can_move_topic: boolean;
     can_rename_topic: boolean;
@@ -264,6 +266,9 @@ export function get_topic_popover_content_context({
         is_topic_empty,
         can_move_topic,
         can_rename_topic,
+        is_moderator: current_user.is_moderator,
+        // Temporary, as we're using this to control whether we show the summarize popover.
+        is_development_environment: page_params.development_environment,
         is_realm_admin: current_user.is_admin,
         topic_is_resolved: resolved_topic.is_resolved(topic_name),
         has_starred_messages,

web/src/topic_popover.ts

@@ -9,6 +9,7 @@ import render_left_sidebar_topic_actions_popover from "../templates/popovers/lef
 import * as confirm_dialog from "./confirm_dialog.ts";
 import {$t_html} from "./i18n.ts";
 import * as message_edit from "./message_edit.ts";
+import * as message_summary from "./message_summary.ts";
 import * as popover_menus from "./popover_menus.ts";
 import * as popover_menus_data from "./popover_menus_data.ts";
 import * as starred_messages_ui from "./starred_messages_ui.ts";
@@ -159,6 +160,12 @@ export function initialize(): void {
                     popover_menus.hide_current_popover_if_visible(instance);
                 });
 
+                $popper.one("click", ".sidebar-popover-summarize-topic", () => {
+                    message_summary.get_narrow_summary(stream_id, topic_name);
+
+                    popover_menus.hide_current_popover_if_visible(instance);
+                });
+
                 $popper.one("click", ".sidebar-popover-toggle-resolved", () => {
                     message_edit.with_first_message_id(stream_id, topic_name, (message_id) => {
                         assert(message_id !== undefined);

web/templates/popovers/left_sidebar/left_sidebar_topic_actions_popover.hbs

@@ -38,6 +38,14 @@
         {{else}}
             {{!-- Group 2 --}}
             <li role="separator" class="popover-menu-separator"></li>
+            {{#if (and is_development_environment (or is_moderator is_realm_admin))}}
+            <li role="none" class="link-item popover-menu-list-item">
+                <a role="menuitem" class="sidebar-popover-summarize-topic popover-menu-link" tabindex="0">
+                    <i class="popover-menu-icon fa fa-magic" aria-hidden="true"></i>
+                    <span class="popover-menu-label">{{t "Summarize recent messages"}}</span>
+                </a>
+            </li>
+            {{/if}}
             {{#if has_starred_messages}}
             <li role="none" class="link-item popover-menu-list-item hidden-for-spectators">
                 <a role="menuitem" class="sidebar-popover-unstar-all-in-topic popover-menu-link" tabindex="0">

web/templates/topic_summary.hbs

@@ -0,0 +1 @@
+<p>{{message}}</p>