chat: adding video chat menu/button support; work in progress

Author: williamstein

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

@@ -1,4 +1,4 @@
-import { Button, Popconfirm, Popover } from "antd";
+import { Button, Popover } from "antd";
 import { debounce } from "lodash";
 import type { CSSProperties, ReactNode } from "react";
 import { useInterval } from "react-interval-hook";
@@ -10,7 +10,6 @@ import {
   useTypedRedux,
 } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
-import { CancelText } from "@cocalc/frontend/i18n/components";
 import { user_activity } from "@cocalc/frontend/tracker";
 import { VideoChat } from "./video-chat";
 
@@ -36,7 +35,6 @@ export default function VideoChatButton({
   // to know if somebody else has video chat opened for this file
   // @ts-ignore
   const file_use = useTypedRedux("file_use", "file_use");
-  const [open, setOpen] = useState<boolean>(false);
 
   // so we can exclude ourselves
   const account_id: string = useTypedRedux("account", "account_id");
@@ -125,9 +123,23 @@ export default function VideoChatButton({
     </>
   );
 
-  return (
+  const btn = (
     <Button onClick={click_video_button} style={{ ...style, ...style0 }}>
       {body}
     </Button>
   );
+
+  return (
+    <Popover
+      mouseEnterDelay={0.8}
+      title={() => (
+        <span>
+          {render_join(num_users_chatting)}
+          {render_num_chatting(num_users_chatting)}
+        </span>
+      )}
+    >
+      {btn}
+    </Popover>
+  );
 }

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

@@ -58,6 +58,7 @@ const chatroom: EditorDescription = {
     "decrease_font_size",
     "increase_font_size",
     "scrollToBottom",
+    "videoChat",
   ]),
 } as const;
 

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

@@ -3052,4 +3052,8 @@ export class Actions<
   settings = () => {
     this.redux.getActions("page").settings("editor-settings");
   };
+
+  videoChat = () => {
+    console.log("video chat");
+  };
 }

src/packages/frontend/frame-editors/frame-tree/commands/button-bar.tsx

@@ -1085,12 +1085,12 @@ addCommands({
     // 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",
+    pos: -1,
+    group: "show-frames",
     icon: "comment",
     label: defineMessage({
       id: "command.generic.chat.label",
-      defaultMessage: "Side Chat with Collaborators or AI",
+      defaultMessage: "Chat with Collaborators or AI",
       description:
         "Opens a chatroom next to the document to chat with other users (collaborators) or an AI chatbot",
     }),
@@ -1106,6 +1106,15 @@ addCommands({
       redux.getProjectActions(props.project_id).open_chat({ path: props.path });
     },
   },
+  videoChat: {
+    alwaysShow: true,
+    pos: 0,
+    icon: "video-camera",
+    group: "show-frames",
+    label: "Video Chat",
+    button: "Video",
+    title: "Video chat with collaborators on this project",
+  },
   support: {
     alwaysShow: true,
     pos: 6,

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

@@ -24,7 +24,7 @@ import type { Command } from "./types";
 
 const MAX_TITLE_WIDTH = 20;
 const MAX_SEARCH_RESULTS = 10;
-const ICON_WIDTH = "24px";
+const ICON_WIDTH = "28px";
 
 export class ManageCommands {
   // TODO: setting this to FrameTitleBarProps causes type issues in frame-editors/jupyter-editor/editor.ts
@@ -482,11 +482,11 @@ export class ManageCommands {
           {icon ?? <Icon name="square" />}
           <div
             style={{
-              fontSize: "10px",
+              fontSize: "11px",
               color: "#666",
-              marginTop: "-5px",
+              marginTop: "-10px",
               // special case: button='' explicitly means no label
-              width: cmd.button === "" ? undefined : "46px",
+              width: cmd.button === "" ? undefined : "50px",
               overflow: "hidden",
               textOverflow: "ellipsis",
             }}

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

@@ -7,6 +7,8 @@ unset PGHOST
 export DEBUG="cocalc:*"
 #export DEBUG_CONSOLE="yes"
 unset DEBUG_CONSOLE
+export COCALC_NOCACHE=yes
 
 #export COCALC_DISABLE_API_VALIDATION=yes
+
 pnpm hub