add commenting functionality to document editing

src/packages/frontend/chat/actions.ts

@@ -47,6 +47,7 @@ import { ChatState, ChatStore } from "./store";
 import type {
   ChatMessage,
   ChatMessageTyped,
+  Comment,
   Feedback,
   MessageHistory,
 } from "./types";
@@ -156,22 +157,27 @@ export class ChatActions extends Actions<ChatState> {
 
   // The second parameter is used for sending a message by
   // chatgpt, which is currently managed by the frontend
-  // (not the project).  Also the async doesn't finish until
-  // chatgpt is totally done.
+  // (not the project).
   sendChat = ({
     input,
     sender_id = this.redux.getStore("account").get_account_id(),
     reply_to,
     tag,
     noNotification,
     submitMentionsRef,
+    comment,
+    editing,
   }: {
     input?: string;
     sender_id?: string;
     reply_to?: Date;
     tag?: string;
     noNotification?: boolean;
     submitMentionsRef?;
+    // set this field if this message thread is comment on a document.
+    comment?: Comment;
+    // if true, start with sender editing
+    editing?: boolean;
   }): string => {
     if (this.syncdb == null || this.store == null) {
       console.warn("attempt to sendChat before chat actions initialized");
@@ -183,9 +189,9 @@ export class ChatActions extends Actions<ChatState> {
     if (submitMentionsRef?.current != null) {
       input = submitMentionsRef.current?.({ chat: `${time_stamp.valueOf()}` });
     }
-    input = input?.trim();
-    if (!input) {
-      // do not send when there is nothing to send.
+    input = input?.trim() ?? "";
+    if (!input && comment == null) {
+      // do not send when there is nothing to send (except if it is a comment)
       return "";
     }
     const message: ChatMessage = {
@@ -200,7 +206,8 @@ export class ChatActions extends Actions<ChatState> {
       ],
       date: time_stamp_str,
       reply_to: reply_to?.toISOString(),
-      editing: {},
+      editing: editing ? { [sender_id]: "FUTURE" } : {},
+      comment,
     };
     this.syncdb.set(message);
     if (!reply_to) {
@@ -517,7 +524,7 @@ export class ChatActions extends Actions<ChatState> {
     this.scrollToIndex(Number.MAX_SAFE_INTEGER);
   };
 
-// this scrolls the message with given date into view and sets it as the selected message.
+  // this scrolls the message with given date into view and sets it as the selected message.
   scrollToDate = (date) => {
     this.clearScrollRequest();
     this.frameTreeActions?.set_frame_data({

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

@@ -30,6 +30,7 @@ import { getSelectedHashtagsSearch, newest_content } from "./utils";
 import { getRootMessage, getThreadRootDate } from "./utils";
 import { DivTempHeight } from "@cocalc/frontend/jupyter/cell-list";
 import { filterMessages } from "./filter-messages";
+import { search_split } from "@cocalc/util/misc";
 
 interface Props {
   project_id: string; // used to render links more effectively
@@ -39,7 +40,7 @@ interface Props {
   setLastVisible?: (x: Date | null) => void;
   fontSize?: number;
   actions: ChatActions;
-  search;
+  search: string;
   filterRecentH?;
   selectedHashtags;
   disableFilters?: boolean;
@@ -76,14 +77,17 @@ export function ChatLog({
 
   const user_map = useTypedRedux("users", "user_map");
   const account_id = useTypedRedux("account", "account_id");
+
   const {
     dates: sortedDates,
     numFolded,
     numChildren,
+    searchWords,
   } = useMemo<{
     dates: string[];
     numFolded: number;
     numChildren;
+    searchWords;
   }>(() => {
     const { dates, numFolded, numChildren } = getSortedDates(
       messages,
@@ -101,7 +105,12 @@ export function ChatLog({
           : new Date(parseFloat(dates[dates.length - 1])),
       );
     }, 1);
-    return { dates, numFolded, numChildren };
+    return {
+      dates,
+      numFolded,
+      numChildren,
+      searchWords: search ? search_split(search) : undefined,
+    };
   }, [messages, search, project_id, path, filterRecentH]);
 
   useEffect(() => {
@@ -242,6 +251,7 @@ export function ChatLog({
           mode,
           selectedDate,
           numChildren,
+          searchWords,
         }}
       />
       <Composing
@@ -485,6 +495,7 @@ export function MessageList({
   mode,
   selectedDate,
   numChildren,
+  searchWords,
 }: {
   messages;
   account_id;
@@ -502,6 +513,7 @@ export function MessageList({
   manualScrollRef?;
   selectedDate?: string;
   numChildren?;
+  searchWords?;
 }) {
   const virtuosoHeightsRef = useRef<{ [index: number]: number }>({});
   const virtuosoScroll = useVirtuosoScrollHook({
@@ -589,6 +601,7 @@ export function MessageList({
                   messages.getIn([sortedDates[index + 1], "reply_to"]) == null
                 }
                 costEstimate={costEstimate}
+                searchWords={searchWords}
               />
             </DivTempHeight>
           </div>

src/packages/frontend/chat/message.tsx

@@ -24,7 +24,7 @@ import { labels } from "@cocalc/frontend/i18n";
 import { CancelText } from "@cocalc/frontend/i18n/components";
 import { User } from "@cocalc/frontend/users";
 import { isLanguageModelService } from "@cocalc/util/db-schema/llm-utils";
-import { plural, unreachable } from "@cocalc/util/misc";
+import { auxFileToOriginal, plural, unreachable } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import { ChatActions } from "./actions";
 import { getUserName } from "./chat-log";
@@ -125,6 +125,9 @@ interface Props {
   // for the root of a folded thread, optionally give this number of a
   // more informative message to the user.
   numChildren?: number;
+
+  // highlighted if provided (when in non-edit mode)
+  searchWords?;
 }
 
 export default function Message({
@@ -150,6 +153,7 @@ export default function Message({
   costEstimate,
   selected,
   numChildren,
+  searchWords,
 }: Props) {
   const intl = useIntl();
 
@@ -623,7 +627,7 @@ export default function Message({
                     </Tooltip>
                   </Button>
                 </Tooltip>
-              )}{" "}
+              )}
               <Tooltip title="Select message. Copy URL to link to this message.">
                 <Button
                   onClick={() => {
@@ -641,6 +645,32 @@ export default function Message({
                   <Icon name="link" />
                 </Button>
               </Tooltip>
+              {message.get("comment") != null && (
+                <Tooltip title="Mark as resolved and hide discussion">
+                  <Button
+                    onClick={() => {
+                      const id = message.getIn(["comment", "id"]);
+                      if (id) {
+                        const actions = getEditorActions({
+                          project_id,
+                          path,
+                          message,
+                        });
+                        actions.comments.set({ id, done: true });
+                      }
+                    }}
+                    type={"text"}
+                    style={{
+                      float: "right",
+                      marginTop: "-8px",
+                      fontSize: "15px",
+                      color: is_viewers_message ? "white" : "#888",
+                    }}
+                  >
+                    <Icon name="check" />
+                  </Button>
+                </Tooltip>
+              )}
             </span>
           )}
           {!isEditing && (
@@ -649,6 +679,7 @@ export default function Message({
               value={value}
               className={message_class}
               selectedHashtags={selectedHashtags}
+              searchWords={searchWords}
               toggleHashtag={
                 selectedHashtags != null && actions != null
                   ? (tag) =>
@@ -1037,7 +1068,20 @@ export default function Message({
   }
 
   return (
-    <Row style={getStyle()}>
+    <Row
+      style={getStyle()}
+      onClick={
+        message.get("comment") && path && project_id
+          ? () => {
+              const id = message.getIn(["comment", "id"]);
+              if (id) {
+                const actions = getEditorActions({ project_id, path, message });
+                actions.selectComment(id);
+              }
+            }
+          : undefined
+      }
+    >
       {renderCols()}
       {renderFoldedRow()}
       {renderReplyRow()}
@@ -1053,3 +1097,12 @@ export function message_to_markdown(message): string {
   const date = message.get("date").toString();
   return `*From:* ${sender}  \n*Date:* ${date}  \n\n${value}`;
 }
+
+// If this is a side chat message, this gets the main editor that this
+// is next to, or possibly a different file in case of comments and
+// multifile editing.
+function getEditorActions({ project_id, path, message }) {
+  const commentPath = message.getIn(["comment", "path"]);
+  const origPath = auxFileToOriginal(path);
+  return redux.getEditorActions(project_id, commentPath ?? origPath);
+}

src/packages/frontend/chat/types.ts

@@ -29,6 +29,14 @@ export interface MessageHistory {
   date: string; // date.toISOString()
 }
 
+export interface Comment {
+  id: string;
+  // The optional path is needed to disambiguate in the context of
+  // multifile editing, e.g., if you are commenting on macros.tex
+  // while editing main.tex.
+  path?: string;
+}
+
 export interface ChatMessage {
   event: "chat";
   sender_id: string;
@@ -39,6 +47,7 @@ export interface ChatMessage {
   editing?: { [author_id: string]: "FUTURE" | null };
   folding?: string[];
   feedback?: { [account_id: string]: Feedback };
+  comment?: Comment;
 }
 
 // this type isn't explicitly used anywhere yet, but the actual structure is and I just
@@ -69,6 +78,7 @@ export type ChatMessageTyped = TypedMap<{
   }>;
   folding?: List<string>;
   feedback?: Map<string, Feedback>; // encoded as map of {[account_id]:Feedback}
+  comment?: TypedMap<Comment>;
 }>;
 
 export type ChatMessages = TypedMap<{