video chat button and message in the log (otherwise video chat is basically impossible to ever user)

Author: williamstein

src/packages/frontend/chat/chatroom.tsx

@@ -356,6 +356,15 @@ export function ChatRoom({
                 defaultMessage={"Preview"}
               />
             </Button>
+            <div style={{ height: "5px" }} />
+            <Button
+              style={{ height: "47.5px" }}
+              onClick={() => {
+                actions?.frameTreeActions?.getVideoChat().startChatting();
+              }}
+            >
+              <Icon name="video-camera" /> Video
+            </Button>
           </div>
         </div>
       </div>

src/packages/frontend/chat/message.tsx

@@ -5,11 +5,10 @@
 
 // cSpell:ignore blankcolumn
 
-import { Badge, Button, Col, Popconfirm, Row, Space } from "antd";
+import { Badge, Button, Col, Popconfirm, Row, Space, Tooltip } from "antd";
 import { List, Map } from "immutable";
 import { CSSProperties, useEffect, useLayoutEffect } from "react";
 import { useIntl } from "react-intl";
-
 import { Avatar } from "@cocalc/frontend/account/avatar/avatar";
 import {
   CSS,
@@ -831,14 +830,16 @@ export default function Message({
           >
             <CancelText />
           </Button>
-          <Button
-            onClick={() => {
-              sendReply();
-            }}
-            type="primary"
-          >
-            <Icon name="reply" /> Reply (shift+enter)
-          </Button>
+          <Tooltip title="Send Reply (shift+enter)">
+            <Button
+              onClick={() => {
+                sendReply();
+              }}
+              type="primary"
+            >
+              <Icon name="reply" /> Reply
+            </Button>
+          </Tooltip>
           {costEstimate?.get("date") == replyDate && (
             <LLMCostEstimationChat
               costEstimate={costEstimate?.toJS()}

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

@@ -167,41 +167,68 @@ export default function SideChat({
 
       <div>
         {input.trim() ? (
-          <Flex vertical={false} align="center" justify="space-between">
-            <Tooltip title="Send message (shift+enter)">
-              <Space>
-                {lastVisible && (
+          <Flex
+            vertical={false}
+            align="center"
+            justify="space-between"
+            style={{ margin: "5px" }}
+          >
+            <Space>
+              {lastVisible && (
+                <Tooltip title="Reply to the current thread (shift+enter)">
                   <Button
-                    disabled={!input.trim()}
+                    disabled={!input.trim() || actions == null}
                     type="primary"
                     onClick={() => {
                       sendChat({ reply_to: new Date(lastVisible) });
                     }}
                   >
-                    <Icon name="reply" /> Reply (shift+enter)
+                    <Icon name="reply" /> Reply
                   </Button>
-                )}
+                </Tooltip>
+              )}
+              <Tooltip
+                title={
+                  lastVisible
+                    ? "Start a new thread"
+                    : "Start a new thread (shift+enter)"
+                }
+              >
                 <Button
                   type={!lastVisible ? "primary" : undefined}
-                  style={{ margin: "5px 0 5px 5px" }}
+                  style={{ marginLeft: "5px" }}
                   onClick={() => {
                     sendChat();
                     user_activity("side_chat", "send_chat", "click");
                   }}
-                  disabled={!input?.trim()}
+                  disabled={!input?.trim() || actions == null}
                 >
                   <Icon name="paper-plane" />
-                  Start New Thread
+                  New Thread
                 </Button>
-              </Space>
-            </Tooltip>
-            {costEstimate?.get("date") == 0 && (
-              <LLMCostEstimationChat
-                compact
-                costEstimate={costEstimate?.toJS()}
-                style={{ margin: "5px" }}
-              />
-            )}
+              </Tooltip>
+            </Space>
+            <div style={{ flex: 1 }} />
+            <Space>
+              <Tooltip title={"Launch video chat specific to this document"}>
+                <Button
+                  disabled={actions == null}
+                  onClick={() => {
+                    actions?.frameTreeActions?.getVideoChat().startChatting();
+                  }}
+                >
+                  <Icon name="video-camera" />
+                  Video
+                </Button>
+              </Tooltip>
+              {costEstimate?.get("date") == 0 && (
+                <LLMCostEstimationChat
+                  compact
+                  costEstimate={costEstimate?.toJS()}
+                  style={{ margin: "5px" }}
+                />
+              )}
+            </Space>
           </Flex>
         ) : undefined}
         <ChatInput

src/packages/frontend/chat/video/video-chat.ts

@@ -3,6 +3,7 @@ import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { len, trunc_middle } from "@cocalc/util/misc";
 import { redux } from "@cocalc/frontend/app-framework";
 import { open_new_tab } from "../../misc/open-browser-tab";
+import { getSideChatActions } from "@cocalc/frontend/frame-editors/generic/chat";
 
 const VIDEO_CHAT_SERVER = "https://meet.jit.si";
 const VIDEO_UPDATE_INTERVAL_MS = 30 * 1000;
@@ -83,8 +84,19 @@ export class VideoChat {
   };
 
   startChatting = () => {
-    redux.getActions("file_use")?.mark_file(this.project_id, this.path, "chat");
     this.openVideoChatWindow();
+    redux.getActions("file_use")?.mark_file(this.project_id, this.path, "chat");
+    const sideChatActions =
+      getSideChatActions({
+        project_id: this.project_id,
+        path: this.path,
+      }) ??
+      redux.getEditorActions(this.project_id, this.path)?.getChatActions();
+    sideChatActions?.sendChat({
+      input: `[${this.getUserName()} joined Video Chat](${this.url()})`,
+    });
+    setTimeout(() => sideChatActions?.scrollToBottom(), 100);
+    setTimeout(() => sideChatActions?.scrollToBottom(), 1000);
   };
 
   // The canonical secret chatroom id.