fix side chat for sagews -- was broken for sagews due to some last minute dev

Author: williamstein

src/packages/frontend/chat/actions.ts

@@ -54,6 +54,7 @@ import { history_path } from "@cocalc/util/misc";
 import { initFromSyncDB, handleSyncDBChange, processSyncDBObj } from "./sync";
 import { getReplyToRoot, getThreadRootDate, toMsString } from "./utils";
 import Fragment from "@cocalc/frontend/misc/fragment-id";
+import type { Actions as CodeEditorActions } from "@cocalc/frontend/frame-editors/code-editor/actions";
 
 const MAX_CHATSTREAM = 10;
 
@@ -66,7 +67,8 @@ export class ChatActions extends Actions<ChatState> {
   // this prevents that at least.
   private chatStreams: Set<string> = new Set([]);
   public frameId: string = "";
-  public frameTreeActions;
+  // this might not be set e.g., for deprecated side chat on sagews:
+  public frameTreeActions?: CodeEditorActions;
 
   set_syncdb = (syncdb: SyncDB, store: ChatStore): void => {
     this.syncdb = syncdb;
@@ -499,7 +501,7 @@ export class ChatActions extends Actions<ChatState> {
   // that starts with that date.
   // safe to call after closing actions.
   clearScrollRequest = () => {
-    this.frameTreeActions.set_frame_data({
+    this.frameTreeActions?.set_frame_data({
       id: this.frameId,
       scrollToIndex: null,
       scrollToDate: null,
@@ -513,7 +515,7 @@ export class ChatActions extends Actions<ChatState> {
     // to virtuoso and directly control things from here.
     this.clearScrollRequest();
     setTimeout(() => {
-      this.frameTreeActions.set_frame_data({
+      this.frameTreeActions?.set_frame_data({
         id: this.frameId,
         scrollToIndex: index,
         scrollToDate: null,
@@ -527,12 +529,12 @@ export class ChatActions extends Actions<ChatState> {
 
   scrollToDate = (date) => {
     this.clearScrollRequest();
-    this.frameTreeActions.set_frame_data({
+    this.frameTreeActions?.set_frame_data({
       id: this.frameId,
       fragmentId: toMsString(date),
     });
     setTimeout(() => {
-      this.frameTreeActions.set_frame_data({
+      this.frameTreeActions?.set_frame_data({
         id: this.frameId,
         // string version of ms since epoch, which is the key
         // in the messages immutable Map
@@ -583,7 +585,7 @@ export class ChatActions extends Actions<ChatState> {
   };
 
   setHashtagState = (tag: string, state?: HashtagState): void => {
-    if (!this.store) return;
+    if (!this.store || this.frameTreeActions == null) return;
     // similar code in task list.
     let selectedHashtags: SelectedHashtags =
       this.frameTreeActions._get_frame_data(this.frameId, "selectedHashtags") ??
@@ -1095,15 +1097,15 @@ export class ChatActions extends Actions<ChatState> {
   };
 
   setSearch = (search) => {
-    this.frameTreeActions.set_frame_data({ id: this.frameId, search });
+    this.frameTreeActions?.set_frame_data({ id: this.frameId, search });
   };
 
   setFilterRecentH = (filterRecentH) => {
-    this.frameTreeActions.set_frame_data({ id: this.frameId, filterRecentH });
+    this.frameTreeActions?.set_frame_data({ id: this.frameId, filterRecentH });
   };
 
   setSelectedHashtags = (selectedHashtags) => {
-    this.frameTreeActions.set_frame_data({
+    this.frameTreeActions?.set_frame_data({
       id: this.frameId,
       selectedHashtags,
     });
@@ -1115,7 +1117,7 @@ export class ChatActions extends Actions<ChatState> {
     } else {
       const fragmentId = toMsString(date);
       Fragment.set({ chat: fragmentId });
-      this.frameTreeActions.set_frame_data({ id: this.frameId, fragmentId });
+      this.frameTreeActions?.set_frame_data({ id: this.frameId, fragmentId });
     }
   };
 }

src/packages/frontend/chat/chatroom.tsx

@@ -70,7 +70,7 @@ interface Props {
   path: string;
   is_visible?: boolean;
   font_size: number;
-  desc;
+  desc?;
 }
 
 export function ChatRoom({
@@ -87,12 +87,12 @@ export function ChatRoom({
   const input: string = useEditor("input");
   const [preview] = useDebounce(input, 250);
 
-  const search = desc.get("data-search") ?? "";
-  const filterRecentH: number = desc.get("data-filterRecentH") ?? 0;
-  const selectedHashtags = desc.get("data-selectedHashtags");
-  const scrollToIndex = desc.get("data-scrollToIndex") ?? null;
-  const scrollToDate = desc.get("data-scrollToDate") ?? null;
-  const fragmentId = desc.get("data-fragmentId") ?? null;
+  const search = desc?.get("data-search") ?? "";
+  const filterRecentH: number = desc?.get("data-filterRecentH") ?? 0;
+  const selectedHashtags = desc?.get("data-selectedHashtags");
+  const scrollToIndex = desc?.get("data-scrollToIndex") ?? null;
+  const scrollToDate = desc?.get("data-scrollToDate") ?? null;
+  const fragmentId = desc?.get("data-fragmentId") ?? null;
 
   const messages = useEditor("messages");
   const [filterRecentHCustom, setFilterRecentHCustom] = useState<string>("");

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

@@ -48,9 +48,9 @@ export default function SideChat({
   const input: string = useRedux(["input"], project_id, path);
   const search = desc?.get("data-search") ?? "";
   const selectedHashtags = desc?.get("data-selectedHashtags");
-  const scrollToIndex = desc.get("data-scrollToIndex") ?? null;
-  const scrollToDate = desc.get("data-scrollToDate") ?? null;
-  const fragmentId = desc.get("data-fragmentId") ?? null;
+  const scrollToIndex = desc?.get("data-scrollToIndex") ?? null;
+  const scrollToDate = desc?.get("data-scrollToDate") ?? null;
+  const fragmentId = desc?.get("data-fragmentId") ?? null;
   const addCollab: boolean = useRedux(["add_collab"], project_id, path);
   const is_uploading = useRedux(["is_uploading"], project_id, path);
   const project_map = useTypedRedux("projects", "project_map");

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

@@ -29,10 +29,15 @@ export default function VideoChatButton({
   const [counter, set_counter] = useState<number>(0); // to force updates periodically.
   useInterval(() => set_counter(counter + 1), VIDEO_UPDATE_INTERVAL_MS / 2);
   const videoChat = useMemo(
-    () => actions.frameTreeActions.getVideoChat(),
+    () => actions.frameTreeActions?.getVideoChat(),
     [actions],
   );
 
+  if (videoChat == null) {
+    // eg sage worksheets...
+    return null;
+  }
+
   const click_video_button = debounce(
     () => {
       if (videoChat.weAreChatting()) {
@@ -60,14 +65,14 @@ export default function VideoChatButton({
           <hr />
           There following {num_users_chatting} people are using video chat:
           <br />
-          {videoChat.getUserNames().join(", ")}
+          {videoChat?.getUserNames().join(", ")}
         </span>
       );
     }
   }
 
   function render_join(num_users_chatting: number): JSX.Element {
-    if (videoChat.weAreChatting()) {
+    if (videoChat?.weAreChatting()) {
       return (
         <span>
           <b>Leave</b> this video chatroom.
@@ -91,7 +96,7 @@ export default function VideoChatButton({
     }
   }
 
-  const num_users_chatting: number = videoChat.numUsersChatting() ?? 0;
+  const num_users_chatting: number = videoChat?.numUsersChatting() ?? 0;
   const style: React.CSSProperties = { cursor: "pointer" };
   if (num_users_chatting > 0) {
     style.color = "#c9302c";

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

@@ -76,7 +76,7 @@ export class Actions extends CodeEditorActions<ChatEditorState> {
     // our store is not exactly a ChatStore but it's close enough
     actions.set_syncdb(syncdb, this.store as ChatStore);
     actions.frameId = frameId;
-    actions.frameTreeActions = this;
+    actions.frameTreeActions = this as any;
     this.chatActions[frameId] = actions;
     return actions;
   }

src/packages/util/smc-version.js

@@ -1,2 +1,2 @@
 /* autogenerated by the update_version script */
-exports.version=1727734946;
+exports.version=1728224335;