chat: various sanity improvements with chat being a full application, e.g., don't also have side chat at the same time.

williamstein · williamstein · commit cb8445ca5def · 2024-10-04T22:13:26.000Z
diff --git a/src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx b/src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx
@@ -107,7 +107,7 @@ addCommands({
     title: defineMessage({
       id: "command.generic.close.title",
       defaultMessage:
-        "Close this frame. To restore the default layout, select the application menu entry 'Default Layout'.",
+        "Close this frame. To restore the default layout, select the application menu entry 'Default Layout' or close all frames.",
     }),
     onClick: ({ props }) => {
       props.actions.close_frame(props.id);
@@ -1071,13 +1071,15 @@ addCommands({
       redux.getStore("projects").hasLanguageModelEnabled(props.project_id),
   },
   chat: {
-    alwaysShow: true,
+    // we have a side chat menu item... except for in a chatroom or side chat.
+    isVisible: ({ props }) =>
+      !props.path?.endsWith(".sage-chat") && props.type != "chat",
     pos: 5,
     group: "help-link",
     icon: "comment",
     label: defineMessage({
       id: "command.generic.chat.label",
-      defaultMessage: "Chat with Collaborators or AI",
+      defaultMessage: "Side Chat with Collaborators or AI",
       description:
         "Opens a chatroom next to the document to chat with other users (collaborators) or an AI chatbot",
     }),
diff --git a/src/packages/frontend/frame-editors/frame-tree/commands/manage.tsx b/src/packages/frontend/frame-editors/frame-tree/commands/manage.tsx
@@ -70,7 +70,12 @@ export class ManageCommands {
     if (cmd == null) {
       cmd = COMMANDS[name];
     }
-    // some buttons are always visible, e.g., for controlling the frame.
+    if (this.props.spec.commands?.[`-${name}`]) {
+      // explicitly hidden by the spec
+      return false;
+    }
+    // some buttons are always visible, e.g., for controlling the frame, unless of course they are explicitly
+    // hidden by the spec (above)
     if (cmd?.alwaysShow) {
       return true;
     }
@@ -81,10 +86,6 @@ export class ManageCommands {
     if (cmd?.disable && this.studentProjectFunctionality[cmd.disable]) {
       return false;
     }
-    if (this.props.spec.commands?.[`-${name}`]) {
-      // explicitly hidden by the spec
-      return false;
-    }
     if (cmd?.isVisible != null) {
       const { isVisible } = cmd;
       if (typeof isVisible === "string") {
diff --git a/src/packages/frontend/frame-editors/frame-tree/editor.tsx b/src/packages/frontend/frame-editors/frame-tree/editor.tsx
@@ -5,7 +5,6 @@
 
 import { Map, Set } from "immutable";
 import { clone } from "lodash";
-
 import {
   CSS,
   React,
@@ -243,7 +242,11 @@ export function createEditor(opts: Options): React.FC<EditorProps> {
         project_id={project_id}
         format_bar={!!opts.format_bar}
         format_bar_exclude={opts.format_bar_exclude}
-        editor_spec={{ ...opts.editor_spec, chat }}
+        editor_spec={
+          path.endsWith(".sage-chat")
+            ? opts.editor_spec
+            : { ...opts.editor_spec, chat }
+        }
         tab_is_visible={is_visible}
       />
     );
diff --git a/src/packages/frontend/frame-editors/frame-tree/title-bar.tsx b/src/packages/frontend/frame-editors/frame-tree/title-bar.tsx
@@ -12,7 +12,6 @@ import { Button, Input, InputNumber, Popover, Tooltip } from "antd";
 import { List } from "immutable";
 import { useMemo, useRef } from "react";
 import { useIntl } from "react-intl";
-
 import { ButtonGroup } from "@cocalc/frontend/antd-bootstrap";
 import {
   CSS,
@@ -325,19 +324,18 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
 
   function render_x(): Rendered {
     return (
-      <Button
+      <Tooltip
         title={intl.formatMessage({
           id: "frame_editors.frame_tree.title_bar.close",
-          defaultMessage: "Close this frame",
+          defaultMessage:
+            "Close this frame. To restore the default layout, close all frames.",
           description: "Click this X button to close the frame",
         })}
-        key={"close"}
-        size="small"
-        type="text"
-        onClick={click_close}
       >
-        <Icon name={"times"} />
-      </Button>
+        <Button key={"close"} size="small" type="text" onClick={click_close}>
+          <Icon name={"times"} />
+        </Button>
+      </Tooltip>
     );
   }
 
@@ -374,94 +372,104 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
   function render_full(): Rendered {
     if (props.is_full) {
       return (
-        <Button
-          disabled={props.is_only}
+        <Tooltip
           title={intl.formatMessage({
             id: "frame_editors.frame_tree.title_bar.minimize",
             defaultMessage: "Show all frames",
             description: "Minimize this frame to show all frames",
           })}
-          key={"full-screen-button"}
-          size="small"
-          type="text"
-          onClick={() => {
-            track("unset-full");
-            props.actions.unset_frame_full();
-          }}
-          style={{
-            color: darkMode ? "orange" : undefined,
-            background: !darkMode ? "orange" : undefined,
-          }}
         >
-          <Icon name={"compress"} />
-        </Button>
+          <Button
+            disabled={props.is_only}
+            key={"full-screen-button"}
+            size="small"
+            type="text"
+            onClick={() => {
+              track("unset-full");
+              props.actions.unset_frame_full();
+            }}
+            style={{
+              color: darkMode ? "orange" : undefined,
+              background: !darkMode ? "orange" : undefined,
+            }}
+          >
+            <Icon name={"compress"} />
+          </Button>
+        </Tooltip>
       );
     } else {
       return (
-        <Button
-          disabled={props.is_only}
-          key={"full-screen-button"}
+        <Tooltip
           title={intl.formatMessage({
             id: "frame_editors.frame_tree.title_bar.maximize",
             defaultMessage: "Show only this frame",
             description: "Maximize this frame to show only this one",
           })}
-          size="small"
-          type="text"
-          onClick={() => {
-            track("set-full");
-            props.actions.set_frame_full(props.id);
-          }}
         >
-          <Icon name={"expand"} />
-        </Button>
+          <Button
+            disabled={props.is_only}
+            key={"full-screen-button"}
+            size="small"
+            type="text"
+            onClick={() => {
+              track("set-full");
+              props.actions.set_frame_full(props.id);
+            }}
+          >
+            <Icon name={"expand"} />
+          </Button>
+        </Tooltip>
       );
     }
   }
 
   function render_split_row(): Rendered {
     return (
-      <Button
-        key={"split-row-button"}
+      <Tooltip
         title={intl.formatMessage(labels.split_frame_horizontally_title)}
-        size="small"
-        type="text"
-        onClick={(e) => {
-          e.stopPropagation();
-          if (props.is_full) {
-            track("unset-full");
-            return props.actions.unset_frame_full();
-          } else {
-            track("split-row");
-            return props.actions.split_frame("row", props.id);
-          }
-        }}
       >
-        <Icon name="horizontal-split" />
-      </Button>
+        <Button
+          key={"split-row-button"}
+          size="small"
+          type="text"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (props.is_full) {
+              track("unset-full");
+              return props.actions.unset_frame_full();
+            } else {
+              track("split-row");
+              return props.actions.split_frame("row", props.id);
+            }
+          }}
+        >
+          <Icon name="horizontal-split" />
+        </Button>
+      </Tooltip>
     );
   }
 
   function render_split_col(): Rendered {
     return (
-      <Button
-        key={"split-col-button"}
-        title={intl.formatMessage(labels.split_frame_vertically_title)}
-        size="small"
-        type="text"
-        onClick={(e) => {
-          e.stopPropagation();
-          if (props.is_full) {
-            track("unset-full");
-            return props.actions.unset_frame_full();
-          } else {
-            track("split-col");
-            return props.actions.split_frame("col", props.id);
-          }
-        }}
-      >
-        <Icon name="vertical-split" />
-      </Button>
+      <Tooltip title={intl.formatMessage(labels.split_frame_vertically_title)}>
+        <Button
+          key={"split-col-button"}
+          size="small"
+          type="text"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (props.is_full) {
+              track("unset-full");
+              return props.actions.unset_frame_full();
+            } else {
+              track("split-col");
+              return props.actions.split_frame("col", props.id);
+            }
+          }}
+        >
+          <Icon name="vertical-split" />
+        </Button>
+      </Tooltip>
     );
   }
 
@@ -698,8 +706,8 @@ export function FrameTitleBar(props: FrameTitleBarProps) {
             label === APPLICATION_MENU
               ? manageCommands.applicationMenuTitle()
               : isIntlMessage(label)
-              ? intl.formatMessage(label)
-              : label
+                ? intl.formatMessage(label)
+                : label
           }
           items={v}
         />
diff --git a/src/packages/frontend/i18n/common.ts b/src/packages/frontend/i18n/common.ts
@@ -204,8 +204,8 @@ export const labels = defineMessages({
   },
   split_frame_horizontally_title: {
     id: "labels.split_frame_horizontally.title",
-    defaultMessage: "Split Down",
-    description: "Split a frame horizontally",
+    defaultMessage: "Split frame horizontally into two rows",
+    description: "Split frame horizontally",
   },
   assistant: {
     id: "labels.assistant",
