chatroom: move "scroll to bottom" to a menu item

Author: williamstein

src/packages/frontend/chat/chat-indicator.tsx

@@ -14,7 +14,6 @@ import { Button, Tooltip } from "antd";
 import { debounce } from "lodash";
 import { useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-
 import { UsersViewing } from "@cocalc/frontend/account/avatar/users-viewing";
 import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { HiddenXS } from "@cocalc/frontend/components";

src/packages/frontend/chat/chatroom.tsx

@@ -15,7 +15,7 @@ import {
   useRef,
   useState,
 } from "@cocalc/frontend/app-framework";
-import { Icon, Loading, Tip } from "@cocalc/frontend/components";
+import { Icon, Loading } from "@cocalc/frontend/components";
 import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
 import { FrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 import { hoursToTimeIntervalHuman } from "@cocalc/util/misc";
@@ -34,7 +34,7 @@ const FILTER_RECENT_NONE = {
   value: 0,
   label: (
     <>
-      <Icon name="clock" /> All
+      <Icon name="clock" />
     </>
   ),
 } as const;
@@ -114,10 +114,6 @@ export function ChatRoom({
     on_send();
   }
 
-  function button_scroll_to_bottom(): void {
-    scrollToBottomRef.current?.(true);
-  }
-
   function render_preview_message(): JSX.Element | undefined {
     if (!is_preview) return;
     if (input.length === 0 || preview.length === 0) return;
@@ -152,45 +148,16 @@ export function ChatRoom({
     );
   }
 
-  function render_bottom_button(): JSX.Element {
-    return (
-      <Button onClick={button_scroll_to_bottom}>
-        <Tip
-          title={
-            <FormattedMessage
-              id="chatroom.scroll_bottom.tooltip.title"
-              defaultMessage={"Newest Messages"}
-            />
-          }
-          tip={
-            <span>
-              <FormattedMessage
-                id="chatroom.scroll_bottom.tooltip.tip"
-                defaultMessage={
-                  "Scrolls the chat to the bottom showing the newest messages"
-                }
-              />
-            </span>
-          }
-          placement="left"
-        >
-          <Icon name="arrow-down" />{" "}
-          <FormattedMessage
-            id="chatroom.scroll_bottom.label"
-            defaultMessage={"Newest"}
-          />
-        </Tip>
-      </Button>
-    );
-  }
-
   function render_video_chat_button() {
     if (project_id == null || path == null) return;
     return (
       <VideoChatButton
         project_id={project_id}
         path={path}
-        sendChat={(value) => actions.sendChat({ input: value })}
+        sendChat={(value) => {
+          actions.sendChat({ input: value });
+          actions.scrollToBottom();
+        }}
       />
     );
   }
@@ -213,7 +180,6 @@ export function ChatRoom({
             actions.setFilterRecentH(0);
             setFilterRecentHCustom("");
           }}
-          style={{ width: 120 }}
           popupMatchSelectWidth={false}
           onSelect={(val: number) => actions.setFilterRecentH(val)}
           options={[
@@ -302,7 +268,6 @@ export function ChatRoom({
         {renderFilterRecent()}
         <ButtonGroup style={{ marginLeft: "5px" }}>
           {render_video_chat_button()}
-          {render_bottom_button()}
         </ButtonGroup>
       </Space>
     );

src/packages/frontend/chat/side-chat.tsx

@@ -137,6 +137,7 @@ export default function SideChat({
                   path,
                 ) as ChatActions;
                 actions.sendChat({ input: value });
+                actions.scrollToBottom();
               }}
             />
             <Tooltip title="Show TimeTravel change history of this side chat.">

src/packages/frontend/chat/video/launch-button.tsx

@@ -125,33 +125,9 @@ export default function VideoChatButton({
     </>
   );
 
-  const btn = <Button style={{ ...style, ...style0 }}>{body}</Button>;
-
   return (
-    <Popconfirm
-      onOpenChange={setOpen}
-      title={`${
-        num_users_chatting ? "Join the current" : "Launch "
-      } video chat?`}
-      onConfirm={click_video_button}
-      okText={`${num_users_chatting ? "Join" : "Launch"} video chat`}
-      cancelText={<CancelText />}
-    >
-      {open ? (
-        btn
-      ) : (
-        <Popover
-          mouseEnterDelay={0.8}
-          title={() => (
-            <span>
-              {render_join(num_users_chatting)}
-              {render_num_chatting(num_users_chatting)}
-            </span>
-          )}
-        >
-          {btn}
-        </Popover>
-      )}
-    </Popconfirm>
+    <Button onClick={click_video_button} style={{ ...style, ...style0 }}>
+      {body}
+    </Button>
   );
 }

src/packages/frontend/frame-editors/chat-editor/actions.ts

@@ -129,4 +129,12 @@ export class Actions extends CodeEditorActions<ChatEditorState> {
       this.set_error(`${error}`);
     }
   }
+
+  scrollToBottom = (frameId) => {
+    this.getChatActions(frameId)?.scrollToBottom();
+  };
+
+  scrollToTop = (frameId) => {
+    this.getChatActions(frameId)?.scrollToBottom(0);
+  };
 }

src/packages/frontend/frame-editors/chat-editor/editor.ts

@@ -37,8 +37,28 @@ const chatroom: EditorDescription = {
     "help",
     "export_to_markdown",
     "chatgpt",
+    "scrollToBottom",
+    "scrollToTop",
+  ]),
+  customizeCommands: {
+    scrollToTop: {
+      label: "Scroll to Old",
+      button: "Oldest",
+      title: "Scroll to oldest message in chat",
+    },
+    scrollToBottom: {
+      label: "Scroll to Newest",
+      button: "Newest",
+      title: "Scroll to newest message in chat",
+    },
+  },
+  buttons: set([
+    "undo",
+    "redo",
+    "decrease_font_size",
+    "increase_font_size",
+    "scrollToBottom",
   ]),
-  buttons: set(["undo", "redo", "decrease_font_size", "increase_font_size"]),
 } as const;
 
 const EDITOR_SPEC = {

src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx

@@ -54,7 +54,10 @@ addCommands({
     group: "frame-control",
     alwaysShow: true,
     pos: 2,
-    title: labels.split_frame_vertically_title,
+    title: defineMessage({
+      id: "command.generic.split_col.title",
+      defaultMessage: "Split frame vertically into two columns",
+    }),
     onClick: ({ props }) => {
       if (props.is_full) {
         return props.actions.unset_frame_full();
@@ -63,11 +66,7 @@ addCommands({
       }
     },
     icon: "vertical-split",
-    label: defineMessage({
-      id: "command.generic.split_col.label",
-      defaultMessage: "Split Right",
-      description: "Split a frame vertically",
-    }),
+    label: labels.split_frame_vertically_title,
     button: menu.split,
   },
   maximize: {
@@ -305,6 +304,18 @@ addCommands({
       };
     }),
   },
+  scrollToTop: {
+    group: "scroll",
+    pos: 0,
+    icon: "arrow-up",
+    label: "Scroll to top",
+  },
+  scrollToBottom: {
+    group: "scroll",
+    pos: 1,
+    icon: "arrow-down",
+    label: "Scroll to bottom",
+  },
   undo: {
     disabled: ({ readOnly }) => readOnly,
     stayOpenOnClick: true,

src/packages/frontend/frame-editors/frame-tree/commands/generic-menus.ts

@@ -38,7 +38,7 @@ addMenus({
   view: {
     label: menu.view,
     pos: 2,
-    groups: ["zoom", "frame-control", "show-frames", "button-bar"],
+    groups: ["zoom", "scroll", "frame-control", "show-frames", "button-bar"],
   },
   go: {
     label: menu.go,

src/packages/frontend/frame-editors/frame-tree/commands/manage.tsx

@@ -313,7 +313,7 @@ export class ManageCommands {
     );
   };
 
-  private cmd2display = (
+  private commandToDisplay = (
     cmd: Partial<Command>,
     aspect: "label" | "title" | "button",
   ): string | null | undefined | ReactNode => {
@@ -348,9 +348,9 @@ export class ManageCommands {
     tip: boolean,
   ) => {
     const width = ICON_WIDTH;
-    let lbl = this.cmd2display(cmd, "label");
+    let lbl = this.commandToDisplay(cmd, "label");
     if (tip && cmd.title) {
-      const title = this.cmd2display(cmd, "title");
+      const title = this.commandToDisplay(cmd, "title");
       lbl = (
         <Tooltip mouseEnterDelay={0.9} title={title} placement={"left"}>
           {lbl}
@@ -473,9 +473,9 @@ export class ManageCommands {
       const icon = this.getCommandIcon(cmd);
       let buttonLabel;
       if (cmd.button != null) {
-        buttonLabel = this.cmd2display(cmd, "button");
+        buttonLabel = this.commandToDisplay(cmd, "button");
       } else {
-        buttonLabel = this.cmd2display(cmd, "label");
+        buttonLabel = this.commandToDisplay(cmd, "label");
       }
       label = (
         <>
@@ -516,7 +516,7 @@ export class ManageCommands {
               <>
                 {this.getCommandLabel(cmd, name, false)}
                 {cmd.title ? (
-                  <div>{this.cmd2display(cmd, "title")}</div>
+                  <div>{this.commandToDisplay(cmd, "title")}</div>
                 ) : undefined}
               </>
             );

src/packages/frontend/i18n/common.ts

@@ -200,11 +200,12 @@ export const labels = defineMessages({
   },
   split_frame_vertically_title: {
     id: "labels.split_frame_vertically.title",
-    defaultMessage: "Split frame vertically into two columns",
+    defaultMessage: "Split Vertically",
+    description: "Split frame vertically into two columns",
   },
   split_frame_horizontally_title: {
     id: "labels.split_frame_horizontally.title",
-    defaultMessage: "Split frame horizontally into two rows",
+    defaultMessage: "Split Horizontally",
     description: "Split frame horizontally",
   },
   assistant: {