Merge remote-tracking branch 'origin/master' into api-exec-await

Author: haraldschilly

src/packages/frontend/account/editor-settings/checkboxes.tsx

@@ -30,6 +30,8 @@ const EDITOR_SETTINGS_CHECKBOXES: { [setting: string]: string | Rendered } = {
   build_on_save: "build LaTex/Rmd files whenever it is saved to disk",
   show_exec_warning: "warn that certain files are not directly executable",
   ask_jupyter_kernel: "ask which kernel to use for a new Jupyter Notebook",
+  disable_jupyter_virtualization:
+    "render entire notebook instead of just visible part (slower and not recommended)",
   jupyter_classic: (
     <span>
       <A href="https://github.com/sagemathinc/cocalc/issues/7706">

src/packages/frontend/chat/actions.ts

@@ -287,14 +287,21 @@ export class ChatActions extends Actions<ChatState> {
     this.syncdb.set(message);
     if (!reply_to) {
       this.delete_draft(0);
+      // NOTE: we also clear search, since it's confusing to send a message and not
+      // even see it (if it doesn't match search).  We do NOT clear the hashtags though,
+      // since by default the message you are sending has those tags.
+      // Also, only do this clearing when not replying.
+      // For replies search find full threads not individual messages.
+      this.setState({
+        input: "",
+        search: "",
+      });
+    } else {
+      // TODO: but until we fix search, do this:
+      this.setState({
+        search: "",
+      });
     }
-    // NOTE: we also clear search, since it's confusing to send a message and not
-    // even see it (if it doesn't match search).  We do NOT clear the hashtags though,
-    // since by default the message you are sending has those tags.
-    this.setState({
-      input: "",
-      search: "",
-    });
     this.ensureDraftStartsWithHashtags(false);
 
     if (this.store) {
@@ -558,11 +565,12 @@ export class ChatActions extends Actions<ChatState> {
   public scrollToBottom(index: number = -1) {
     if (this.syncdb == null) return;
     // this triggers scroll behavior in the chat-log component.
-    this.setState({ scrollToBottom: null }); // noop, but necessary to trigger a change
+    this.setState({ scrollToBottom: null }); // no-op, but necessary to trigger a change
     this.setState({ scrollToBottom: index });
   }
 
   public set_uploading(is_uploading: boolean): void {
+    console.log("set_uploading", is_uploading);
     this.setState({ is_uploading });
   }
 

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

@@ -286,6 +286,14 @@ function isThread(messages: ChatMessages, message: ChatMessageTyped) {
   if (message.get("reply_to") != null) {
     return true;
   }
+  // TODO/WARNING!!! This is a linear search
+  // through all messages to decide if a message is the root of a thread.
+  // This is VERY BAD and must to be redone at some point, since we call isThread
+  // on all messages (in getSortedDates), making that algorithm O(n^2),
+  // which is hideous as the number of messages scales.  Instead one must
+  // use a proper data structure (or even a cache) to track this once
+  // and for all.  It's more complicated but everything needs to be at
+  // most O(n).
   return messages.some(
     (m) => m.get("reply_to") === message.get("date").toISOString(),
   );

src/packages/frontend/chat/chatroom.tsx

@@ -43,6 +43,7 @@ import { LLMCostEstimationChat } from "./llm-cost-estimation";
 import { SubmitMentionsFn } from "./types";
 import { INPUT_HEIGHT, markChatAsReadIfUnseen } from "./utils";
 import VideoChatButton from "./video/launch-button";
+import { FrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 
 const FILTER_RECENT_NONE = { value: 0, label: "All" } as const;
 
@@ -75,9 +76,10 @@ const CHAT_LOG_STYLE: React.CSSProperties = {
 interface Props {
   project_id: string;
   path: string;
+  is_visible?: boolean;
 }
 
-export const ChatRoom: React.FC<Props> = ({ project_id, path }) => {
+export const ChatRoom: React.FC<Props> = ({ project_id, path, is_visible }) => {
   const actions: ChatActions = useActions(project_id, path);
 
   const is_uploading = useRedux(["is_uploading"], project_id, path);
@@ -550,13 +552,26 @@ export const ChatRoom: React.FC<Props> = ({ project_id, path }) => {
   if (messages == null || input == null) {
     return <Loading theme={"medium"} />;
   }
+  // remove frameContext once the chatroom is part of a frame tree.
+  // we need this now, e.g., since some markdown editing components
+  // for input assume in a frame tree, e.g., to fix
+  //  https://github.com/sagemathinc/cocalc/issues/7554
   return (
-    <div
-      onMouseMove={mark_as_read}
-      onClick={mark_as_read}
-      className="smc-vfill"
+    <FrameContext.Provider
+      value={{
+        project_id,
+        path,
+        isVisible: !!is_visible,
+        redux,
+      } as any}
     >
-      {render_body()}
-    </div>
+      <div
+        onMouseMove={mark_as_read}
+        onClick={mark_as_read}
+        className="smc-vfill"
+      >
+        {render_body()}
+      </div>
+    </FrameContext.Provider>
   );
 };

src/packages/frontend/chat/input.tsx

@@ -5,7 +5,6 @@
 
 import { CSSProperties, useEffect, useMemo, useRef, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
-
 import {
   CSS,
   redux,
@@ -61,6 +60,10 @@ export default function ChatInput({
   submitMentionsRef,
   syncdb,
 }: Props) {
+  const onSendRef = useRef<Function>(on_send);
+  useEffect(() => {
+    onSendRef.current = on_send;
+  }, [on_send]);
   const { project_id, path, actions } = useFrameContext();
   const fontSize = useRedux(["font_size"], project_id, path);
   if (font_size == null) {
@@ -213,16 +216,7 @@ export default function ChatInput({
         setInput(input);
         saveChat(input);
       }}
-      onShiftEnter={(input) => {
-        // no need to save on unmount, since we are saving
-        // the correct state below.
-        saveOnUnmountRef.current = false;
-        lastSavedRef.current = input;
-        setInput(input);
-        saveChat(input);
-        saveChat.cancel();
-        on_send(input);
-      }}
+      onShiftEnter={on_send}
       height={height}
       placeholder={getPlaceholder(project_id, placeholder)}
       extraHelp={

src/packages/frontend/chat/message.tsx

@@ -628,10 +628,12 @@ export default function Message(props: Readonly<Props>) {
     );
   }
 
-  function sendReply() {
+  function sendReply(reply?: string) {
     if (props.actions == null) return;
     setReplying(false);
-    const reply = replyMentionsRef.current?.() ?? replyMessageRef.current;
+    if (!reply) {
+      reply = replyMentionsRef.current?.() ?? replyMessageRef.current;
+    }
     props.actions.send_reply({ message: message.toJS(), reply });
     props.actions.scrollToBottom(props.index);
   }
@@ -680,7 +682,12 @@ export default function Message(props: Readonly<Props>) {
           >
             Cancel
           </Button>
-          <Button onClick={sendReply} type="primary">
+          <Button
+            onClick={() => {
+              sendReply();
+            }}
+            type="primary"
+          >
             <Icon name="paper-plane" /> Send
           </Button>
           <LLMCostEstimationChat

src/packages/frontend/components/sortable-list.tsx

@@ -12,7 +12,6 @@ being virtualized with react-virtuoso.
 
 import { CSSProperties, ReactNode, useState } from "react";
 import { Icon } from "./icon";
-
 import { DndContext, DragOverlay } from "@dnd-kit/core";
 import {
   SortableContext,

src/packages/frontend/editors/markdown-input/component.tsx

@@ -151,7 +151,7 @@ export function MarkdownInput(props: Props) {
     unregisterEditor,
     value,
   } = props;
-  const { actions } = useFrameContext();
+  const { actions, isVisible } = useFrameContext();
   const cm = useRef<CodeMirror.Editor>();
   const textarea_ref = useRef<HTMLTextAreaElement>(null);
   const editor_settings = useRedux(["account", "editor_settings"]);
@@ -561,9 +561,7 @@ export function MarkdownInput(props: Props) {
     // console.log("upload_sending", file);
     if (current_uploads_ref.current == null) {
       current_uploads_ref.current = { [file.name]: true };
-      if (onUploadStart != null) {
-        onUploadStart();
-      }
+      onUploadStart?.();
     } else {
       current_uploads_ref.current[file.name] = true;
     }
@@ -582,16 +580,16 @@ export function MarkdownInput(props: Props) {
     if (path == null) {
       throw Error("path must be set if enableUploads is set.");
     }
+    const filename = file.name ?? file.upload.filename;
 
     if (current_uploads_ref.current != null) {
-      delete current_uploads_ref.current[file.name];
+      delete current_uploads_ref.current[filename];
       if (len(current_uploads_ref.current) == 0) {
         current_uploads_ref.current = null;
-        if (onUploadEnd != null) {
-          onUploadEnd();
-        }
+        onUploadEnd?.();
       }
     }
+
     if (cm.current == null) return;
     const input = cm.current.getValue();
     const s0 = upload_temp_link(file);
@@ -803,6 +801,14 @@ export function MarkdownInput(props: Props) {
     }
   }
 
+  // make sure that mentions is closed if we switch to another tab.
+  useEffect(() => {
+    console.log("")
+    if (mentions && !isVisible) {
+      close_mentions();
+    }
+  }, [isVisible]);
+
   function render_mentions_popup() {
     if (mentions == null || mentions_offset == null) return;
 

src/packages/frontend/editors/markdown-input/multimode.tsx

@@ -189,6 +189,19 @@ export default function MultiMarkdownInput(props: Props) {
     path,
   } = useFrameContext();
 
+  // We use refs for shiftEnter and onChange to be absolutely
+  // 100% certain that if either of these functions is changed,
+  // then the new function is used, even if the components
+  // implementing our markdown editor mess up somehow and hang on.
+  const onShiftEnterRef = useRef<any>(onShiftEnter);
+  useEffect(() => {
+    onShiftEnterRef.current = onShiftEnter;
+  }, [onShiftEnter]);
+  const onChangeRef = useRef<any>(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
   const editBar2 = useRef<JSX.Element | undefined>(undefined);
 
   function getCache() {
@@ -380,7 +393,9 @@ export default function MultiMarkdownInput(props: Props) {
           divRef={editorDivRef}
           selectionRef={selectionRef}
           value={value}
-          onChange={onChange}
+          onChange={(value) => {
+            onChangeRef.current?.(value);
+          }}
           saveDebounceMs={saveDebounceMs}
           getValueRef={getValueRef}
           project_id={project_id}
@@ -389,7 +404,9 @@ export default function MultiMarkdownInput(props: Props) {
           onUploadStart={onUploadStart}
           onUploadEnd={onUploadEnd}
           enableMentions={enableMentions}
-          onShiftEnter={onShiftEnter}
+          onShiftEnter={(value) => {
+            onShiftEnterRef.current?.(value);
+          }}
           placeholder={placeholder ?? "Type markdown..."}
           fontSize={fontSize}
           cmOptions={cmOptions}
@@ -400,7 +417,7 @@ export default function MultiMarkdownInput(props: Props) {
           extraHelp={extraHelp}
           hideHelp={hideHelp}
           onBlur={(value) => {
-            onChange?.(value);
+            onChangeRef.current?.(value);
             if (!ignoreBlur.current) {
               onBlur?.();
             }
@@ -463,14 +480,14 @@ export default function MultiMarkdownInput(props: Props) {
             getValueRef={getValueRef}
             actions={{
               set_value: (value) => {
-                onChange?.(value);
+                onChangeRef.current?.(value);
               },
               shiftEnter: (value) => {
-                onChange?.(value);
-                onShiftEnter?.(value);
+                onChangeRef.current?.(value);
+                onShiftEnterRef.current?.(value);
               },
               altEnter: (value) => {
-                onChange?.(value);
+                onChangeRef.current?.(value);
                 setMode("markdown");
               },
               set_cursor_locs: onCursors,

src/packages/frontend/editors/slate/editable-markdown.tsx

@@ -160,7 +160,7 @@ export const EditableMarkdown: React.FC<Props> = React.memo((props: Props) => {
     unregisterEditor,
     value,
   } = props;
-  const { project_id, path, desc } = useFrameContext();
+  const { project_id, path, desc, isVisible } = useFrameContext();
   const isMountedRef = useIsMountedRef();
   const id = id0 ?? "";
   const actions = actions0 ?? {};
@@ -334,6 +334,7 @@ export const EditableMarkdown: React.FC<Props> = React.memo((props: Props) => {
   const mentionableUsers = useMentionableUsers();
 
   const mentions = useMentions({
+    isVisible,
     editor,
     insertMention: (editor, account_id) => {
       Transforms.insertNodes(editor, [

src/packages/frontend/editors/slate/slate-mentions/hook.ts

@@ -14,7 +14,7 @@ import { Editor, Range, Text, Transforms } from "slate";
 import { ReactEditor } from "../slate-react";
 import React from "react";
 import { useIsMountedRef } from "@cocalc/frontend/app-framework";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   Complete,
   Item,
@@ -25,6 +25,7 @@ interface Options {
   editor: ReactEditor;
   insertMention: (Editor, string) => void;
   matchingUsers: (search: string) => (string | JSX.Element)[];
+  isVisible?: boolean;
 }
 
 interface MentionsControl {
@@ -34,6 +35,7 @@ interface MentionsControl {
 }
 
 export const useMentions: (Options) => MentionsControl = ({
+  isVisible,
   editor,
   insertMention,
   matchingUsers,
@@ -42,6 +44,12 @@ export const useMentions: (Options) => MentionsControl = ({
   const [search, setSearch] = useState("");
   const isMountedRef = useIsMountedRef();
 
+  useEffect(() => {
+    if (!isVisible && target) {
+      setTarget(undefined);
+    }
+  }, [isVisible]);
+
   const items: Item[] = useMemo(() => {
     return matchingUsers(search);
   }, [search]);