From 46b1124c7df4c87fcc2eb8bac0ad8713c4807211 Mon Sep 17 00:00:00 2001
From: William Stein <wstein@sagemath.com>
Date: Sun, 13 Oct 2024 14:54:08 +0000
Subject: [PATCH] chat: fix Message component to use standard style

---
 src/packages/frontend/chat/chat-log.tsx       |   5 -
 src/packages/frontend/chat/message.tsx        | 208 ++++++++----------
 .../frame-editors/chat-editor/search.tsx      |  35 ++-
 .../chat-editor/use-search-index.ts           |   5 +-
 4 files changed, 122 insertions(+), 131 deletions(-)

diff --git a/src/packages/frontend/chat/chat-log.tsx b/src/packages/frontend/chat/chat-log.tsx
index 7820a74a6a..d3b5c3133c 100644
--- a/src/packages/frontend/chat/chat-log.tsx
+++ b/src/packages/frontend/chat/chat-log.tsx
@@ -544,11 +544,6 @@ export function MessageList({
                   sortedDates,
                   messages,
                 )}
-                is_next_sender={isNextMessageSender(
-                  index,
-                  sortedDates,
-                  messages,
-                )}
                 show_avatar={!isNextMessageSender(index, sortedDates, messages)}
                 mode={mode}
                 get_user_name={(account_id: string | undefined) =>
diff --git a/src/packages/frontend/chat/message.tsx b/src/packages/frontend/chat/message.tsx
index c63fd7a83f..e83073333b 100644
--- a/src/packages/frontend/chat/message.tsx
+++ b/src/packages/frontend/chat/message.tsx
@@ -108,7 +108,6 @@ interface Props {
   path?: string;
   font_size: number;
   is_prev_sender?: boolean;
-  is_next_sender?: boolean;
   show_avatar?: boolean;
   mode: Mode;
   selectedHashtags?: Set<string>;
@@ -128,20 +127,29 @@ interface Props {
   selected?: boolean;
 }
 
-export default function Message(props: Readonly<Props>) {
-  const {
-    is_folded,
-    is_thread_body,
-    is_thread,
-    message,
-    messages,
-    mode,
-    project_id,
-    font_size,
-    selected,
-    costEstimate,
-  } = props;
-
+export default function Message({
+  index,
+  actions,
+  get_user_name,
+  messages,
+  message,
+  account_id,
+  user_map,
+  project_id,
+  path,
+  font_size,
+  is_prev_sender,
+  show_avatar,
+  mode,
+  selectedHashtags,
+  scroll_into_view,
+  allowReply,
+  is_thread,
+  is_folded,
+  is_thread_body,
+  costEstimate,
+  selected,
+}: Props) {
   const showAISummarize = redux
     .getStore("projects")
     .hasLanguageModelEnabled(project_id, "chat-summarize");
@@ -174,29 +182,27 @@ export default function Message(props: Readonly<Props>) {
   const history_size = useMemo(() => message.get("history").size, [message]);
 
   const isEditing = useMemo(
-    () => is_editing(message, props.account_id),
-    [message, props.account_id],
+    () => is_editing(message, account_id),
+    [message, account_id],
   );
 
   const editor_name = useMemo(() => {
-    return props.get_user_name(
-      message.get("history")?.first()?.get("author_id"),
-    );
+    return get_user_name(message.get("history")?.first()?.get("author_id"));
   }, [message]);
 
   const reverseRowOrdering =
-    !is_thread_body && sender_is_viewer(props.account_id, message);
+    !is_thread_body && sender_is_viewer(account_id, message);
 
   const submitMentionsRef = useRef<SubmitMentionsFn>();
 
   const [replying, setReplying] = useState<boolean>(() => {
-    if (!props.allowReply) {
+    if (!allowReply) {
       return false;
     }
     const replyDate = -getThreadRootDate({ date, messages });
-    const draft = props.actions?.syncdb?.get_one({
+    const draft = actions?.syncdb?.get_one({
       event: "draft",
-      sender_id: props.account_id,
+      sender_id: account_id,
       date: replyDate,
     });
     if (draft == null) {
@@ -210,10 +216,10 @@ export default function Message(props: Readonly<Props>) {
     return true;
   });
   useEffect(() => {
-    if (!props.allowReply) {
+    if (!allowReply) {
       setReplying(false);
     }
-  }, [props.allowReply]);
+  }, [allowReply]);
 
   const [autoFocusReply, setAutoFocusReply] = useState<boolean>(false);
   const [autoFocusEdit, setAutoFocusEdit] = useState<boolean>(false);
@@ -221,12 +227,12 @@ export default function Message(props: Readonly<Props>) {
   const replyMessageRef = useRef<string>("");
   const replyMentionsRef = useRef<SubmitMentionsFn>();
 
-  const is_viewers_message = sender_is_viewer(props.account_id, message);
+  const is_viewers_message = sender_is_viewer(account_id, message);
   const verb = show_history ? "Hide" : "Show";
 
   const isLLMThread = useMemo(
-    () => props.actions?.isLanguageModelThread(message.get("date")),
-    [message, props.actions != null],
+    () => actions?.isLanguageModelThread(message.get("date")),
+    [message, actions != null],
   );
 
   const msgWrittenByLLM = useMemo(() => {
@@ -236,7 +242,7 @@ export default function Message(props: Readonly<Props>) {
 
   useLayoutEffect(() => {
     if (replying) {
-      props.scroll_into_view?.();
+      scroll_into_view?.();
     }
   }, [replying]);
 
@@ -244,7 +250,7 @@ export default function Message(props: Readonly<Props>) {
     let text;
     const other_editors = message
       .get("editing")
-      .remove(props.account_id)
+      .remove(account_id)
       // @ts-ignore – not sure why this error shows up
       .keySeq();
     if (is_editing) {
@@ -252,7 +258,7 @@ export default function Message(props: Readonly<Props>) {
         // This user and someone else is also editing
         text = (
           <>
-            {`WARNING: ${props.get_user_name(
+            {`WARNING: ${get_user_name(
               other_editors.first(),
             )} is also editing this! `}
             <b>Simultaneous editing of messages is not supported.</b>
@@ -273,7 +279,7 @@ export default function Message(props: Readonly<Props>) {
     } else {
       if (other_editors.size === 1) {
         // One person is editing
-        text = `${props.get_user_name(
+        text = `${get_user_name(
           other_editors.first(),
         )} is editing this message`;
       } else if (other_editors.size > 1) {
@@ -330,30 +336,26 @@ export default function Message(props: Readonly<Props>) {
   }
 
   function edit_message() {
-    if (
-      props.project_id == null ||
-      props.path == null ||
-      props.actions == null
-    ) {
+    if (project_id == null || path == null || actions == null) {
       // no editing functionality or not in a project with a path.
       return;
     }
-    props.actions.setEditing(message, true);
+    actions.setEditing(message, true);
     setAutoFocusEdit(true);
-    props.scroll_into_view?.();
+    scroll_into_view?.();
   }
 
   function avatar_column() {
     const sender_id = message.get("sender_id");
     let style: CSSProperties = {};
-    if (!props.is_prev_sender) {
+    if (!is_prev_sender) {
       style.marginTop = "22px";
     } else {
       style.marginTop = "5px";
     }
 
     if (!is_thread_body) {
-      if (sender_is_viewer(props.account_id, message)) {
+      if (sender_is_viewer(account_id, message)) {
         style.marginLeft = AVATAR_MARGIN_LEFTRIGHT;
       } else {
         style.marginRight = AVATAR_MARGIN_LEFTRIGHT;
@@ -363,7 +365,7 @@ export default function Message(props: Readonly<Props>) {
     return (
       <Col key={0} xs={2}>
         <div style={style}>
-          {sender_id != null && props.show_avatar ? (
+          {sender_id != null && show_avatar ? (
             <Avatar size={40} account_id={sender_id} />
           ) : undefined}
         </div>
@@ -376,19 +378,17 @@ export default function Message(props: Readonly<Props>) {
     let value = newest_content(message);
 
     const { background, color, lighten, message_class } = message_colors(
-      props.account_id,
+      account_id,
       message,
     );
 
-    const font_size = `${props.font_size}px`;
-
-    if (props.show_avatar) {
+    if (show_avatar) {
       marginBottom = "1vh";
     } else {
       marginBottom = "3px";
     }
 
-    if (!props.is_prev_sender && is_viewers_message) {
+    if (!is_prev_sender && is_viewers_message) {
       marginTop = MARGIN_TOP_VIEWER;
     } else {
       marginTop = "5px";
@@ -401,7 +401,7 @@ export default function Message(props: Readonly<Props>) {
       borderRadius: "5px",
       marginBottom,
       marginTop,
-      fontSize: font_size,
+      fontSize: `${font_size}px`,
       padding: selected ? "6px" : "9px",
       ...(mode === "sidechat"
         ? { marginLeft: "5px", marginRight: "5px" }
@@ -411,7 +411,7 @@ export default function Message(props: Readonly<Props>) {
 
     const mainXS = mode === "standalone" ? 20 : 22;
     const showEditButton = Date.now() - date < SHOW_EDIT_BUTTON_MS;
-    const feedback = message.getIn(["feedback", props.account_id]);
+    const feedback = message.getIn(["feedback", account_id]);
     const otherFeedback =
       isLLMThread && msgWrittenByLLM ? 0 : (message.get("feedback")?.size ?? 0);
     const showOtherFeedback = otherFeedback > 0;
@@ -463,7 +463,7 @@ export default function Message(props: Readonly<Props>) {
                   }}
                   type="text"
                   size="small"
-                  onClick={() => props.actions?.setEditing(message, true)}
+                  onClick={() => actions?.setEditing(message, true)}
                 >
                   <Icon name="pencil" /> Edit
                 </Button>
@@ -478,8 +478,8 @@ export default function Message(props: Readonly<Props>) {
                   title="Delete this message"
                   description="Are you sure you want to delete this message?"
                   onConfirm={() => {
-                    props.actions?.setEditing(message, true);
-                    setTimeout(() => props.actions?.sendEdit(message, ""), 1);
+                    actions?.setEditing(message, true);
+                    setTimeout(() => actions?.sendEdit(message, ""), 1);
                   }}
                 >
                   <Button
@@ -507,7 +507,7 @@ export default function Message(props: Readonly<Props>) {
                 icon={<Icon name="history" />}
                 onClick={() => {
                   set_show_history(!show_history);
-                  props.scroll_into_view?.();
+                  scroll_into_view?.();
                 }}
               >
                 <Tip
@@ -521,11 +521,11 @@ export default function Message(props: Readonly<Props>) {
             {showLLMFeedback && (
               <>
                 <RegenerateLLM
-                  actions={props.actions}
+                  actions={actions}
                   date={date}
                   model={isLLMThread}
                 />
-                <FeedbackLLM actions={props.actions} message={message} />
+                <FeedbackLLM actions={actions} message={message} />
               </>
             )}
           </Space>
@@ -538,19 +538,19 @@ export default function Message(props: Readonly<Props>) {
         <div
           style={{ display: "flex" }}
           onClick={() => {
-            props.actions?.setFragment(message.get("date"));
+            actions?.setFragment(message.get("date"));
           }}
         >
-          {!props.is_prev_sender &&
+          {!is_prev_sender &&
           !is_viewers_message &&
           message.get("sender_id") ? (
-            <Name sender_name={props.get_user_name(message.get("sender_id"))} />
+            <Name sender_name={get_user_name(message.get("sender_id"))} />
           ) : undefined}
-          {generating === true && props.actions ? (
+          {generating === true && actions ? (
             <Button
               style={{ color: COLORS.GRAY_M }}
               onClick={() => {
-                props.actions?.languageModelStopGenerating(new Date(date));
+                actions?.languageModelStopGenerating(new Date(date));
               }}
             >
               <Icon name="square" /> Stop Generating
@@ -600,10 +600,7 @@ export default function Message(props: Readonly<Props>) {
                     size="small"
                     type={feedback ? "dashed" : "text"}
                     onClick={() => {
-                      props.actions?.feedback(
-                        message,
-                        feedback ? null : "positive",
-                      );
+                      actions?.feedback(message, feedback ? null : "positive");
                     }}
                   >
                     {showOtherFeedback ? (
@@ -627,7 +624,7 @@ export default function Message(props: Readonly<Props>) {
               <Tooltip title="Select this message. Copy the browser URL to link to this message.">
                 <Button
                   onClick={() => {
-                    props.actions?.setFragment(message.get("date"));
+                    actions?.setFragment(message.get("date"));
                   }}
                   size="small"
                   type={"text"}
@@ -648,13 +645,13 @@ export default function Message(props: Readonly<Props>) {
               style={MARKDOWN_STYLE}
               value={value}
               className={message_class}
-              selectedHashtags={props.selectedHashtags}
+              selectedHashtags={selectedHashtags}
               toggleHashtag={
-                props.selectedHashtags != null && props.actions != null
+                selectedHashtags != null && actions != null
                   ? (tag) =>
-                      props.actions?.setHashtagState(
+                      actions?.setHashtagState(
                         tag,
-                        props.selectedHashtags?.has(tag) ? undefined : 1,
+                        selectedHashtags?.has(tag) ? undefined : 1,
                       )
                   : undefined
               }
@@ -666,10 +663,7 @@ export default function Message(props: Readonly<Props>) {
         {show_history && (
           <div>
             <HistoryTitle />
-            <History
-              history={message.get("history")}
-              user_map={props.user_map}
-            />
+            <History history={message.get("history")} user_map={user_map} />
             <HistoryFooter />
           </div>
         )}
@@ -679,32 +673,28 @@ export default function Message(props: Readonly<Props>) {
   }
 
   function saveEditedMessage(): void {
-    if (props.actions == null) return;
+    if (actions == null) return;
     const mesg =
       submitMentionsRef.current?.({ chat: `${date}` }) ??
       edited_message_ref.current;
     const value = newest_content(message);
     if (mesg !== value) {
       set_edited_message(mesg);
-      props.actions.sendEdit(message, mesg);
+      actions.sendEdit(message, mesg);
     } else {
-      props.actions.setEditing(message, false);
+      actions.setEditing(message, false);
     }
   }
 
   function on_cancel(): void {
     set_edited_message(newest_content(message));
-    if (props.actions == null) return;
-    props.actions.setEditing(message, false);
-    props.actions.deleteDraft(date);
+    if (actions == null) return;
+    actions.setEditing(message, false);
+    actions.deleteDraft(date);
   }
 
   function renderEditMessage() {
-    if (
-      props.project_id == null ||
-      props.path == null ||
-      props.actions?.syncdb == null
-    ) {
+    if (project_id == null || path == null || actions?.syncdb == null) {
       // should never get into this position
       // when null.
       return;
@@ -714,12 +704,12 @@ export default function Message(props: Readonly<Props>) {
         <ChatInput
           fontSize={font_size}
           autoFocus={autoFocusEdit}
-          cacheId={`${props.path}${props.project_id}${date}`}
+          cacheId={`${path}${project_id}${date}`}
           input={newest_content(message)}
           submitMentionsRef={submitMentionsRef}
           on_send={saveEditedMessage}
           height={"auto"}
-          syncdb={props.actions.syncdb}
+          syncdb={actions.syncdb}
           date={date}
           onChange={(value) => {
             edited_message_ref.current = value;
@@ -729,8 +719,8 @@ export default function Message(props: Readonly<Props>) {
           <Button
             style={{ marginRight: "5px" }}
             onClick={() => {
-              props.actions?.setEditing(message, false);
-              props.actions?.deleteDraft(date);
+              actions?.setEditing(message, false);
+              actions?.deleteDraft(date);
             }}
           >
             Cancel
@@ -744,25 +734,21 @@ export default function Message(props: Readonly<Props>) {
   }
 
   function sendReply(reply?: string) {
-    if (props.actions == null) return;
+    if (actions == null) return;
     setReplying(false);
     if (!reply && !replyMentionsRef.current?.(undefined, true)) {
       reply = replyMessageRef.current;
     }
-    props.actions.sendReply({
+    actions.sendReply({
       message: message.toJS(),
       reply,
       submitMentionsRef: replyMentionsRef,
     });
-    props.actions.scrollToIndex(props.index);
+    actions.scrollToIndex(index);
   }
 
   function renderComposeReply() {
-    if (
-      props.project_id == null ||
-      props.path == null ||
-      props.actions?.syncdb == null
-    ) {
+    if (project_id == null || path == null || actions?.syncdb == null) {
       // should never get into this position
       // when null.
       return;
@@ -774,7 +760,7 @@ export default function Message(props: Readonly<Props>) {
       input = "";
     } else {
       const replying_to = message.get("history")?.first()?.get("author_id");
-      if (!replying_to || replying_to == props.account_id) {
+      if (!replying_to || replying_to == account_id) {
         input = "";
       } else {
         input = `<span class="user-mention" account-id=${replying_to} >@${editor_name}</span> `;
@@ -791,18 +777,18 @@ export default function Message(props: Readonly<Props>) {
             borderRadius: "8px",
             height: "auto" /* for some reason the default 100% breaks things */,
           }}
-          cacheId={`${props.path}${props.project_id}${date}-reply`}
+          cacheId={`${path}${project_id}${date}-reply`}
           input={input}
           submitMentionsRef={replyMentionsRef}
           on_send={sendReply}
           height={"auto"}
-          syncdb={props.actions.syncdb}
+          syncdb={actions.syncdb}
           date={replyDate}
           onChange={(value) => {
             replyMessageRef.current = value;
             // replyMentionsRef does not submit mentions, only gives us the value
             const input = replyMentionsRef.current?.(undefined, true) ?? value;
-            props.actions?.llmEstimateCost({
+            actions?.llmEstimateCost({
               date: replyDate,
               input,
               message: message.toJS(),
@@ -815,7 +801,7 @@ export default function Message(props: Readonly<Props>) {
             style={{ marginRight: "5px" }}
             onClick={() => {
               setReplying(false);
-              props.actions?.deleteDraft(replyDate);
+              actions?.deleteDraft(replyDate);
             }}
           >
             Cancel
@@ -851,7 +837,7 @@ export default function Message(props: Readonly<Props>) {
       } else {
         return TRHEAD_STYLE_SINGLE;
       }
-    } else if (props.allowReply) {
+    } else if (allowReply) {
       return THREAD_STYLE_BOTTOM;
     } else {
       return THREAD_STYLE;
@@ -876,13 +862,7 @@ export default function Message(props: Readonly<Props>) {
   }
 
   function renderReplyRow() {
-    if (
-      replying ||
-      generating ||
-      !props.allowReply ||
-      is_folded ||
-      props.actions == null
-    ) {
+    if (replying || generating || !allowReply || is_folded || actions == null) {
       return;
     }
 
@@ -917,7 +897,7 @@ export default function Message(props: Readonly<Props>) {
           </Button>
         </Tooltip>
         {showAISummarize && is_thread ? (
-          <SummarizeThread message={message} actions={props.actions} />
+          <SummarizeThread message={message} actions={actions} />
         ) : undefined}
       </div>
     );
@@ -934,7 +914,7 @@ export default function Message(props: Readonly<Props>) {
             type="text"
             icon={<Icon name="down-circle-o" />}
             onClick={() =>
-              props.actions?.toggleFoldThread(message.get("date"), props.index)
+              actions?.toggleFoldThread(message.get("date"), index)
             }
           >
             <Text type="secondary">Unfold</Text>
@@ -968,9 +948,7 @@ export default function Message(props: Readonly<Props>) {
         <Button
           type="text"
           style={style}
-          onClick={() =>
-            props.actions?.toggleFoldThread(message.get("date"), props.index)
-          }
+          onClick={() => actions?.toggleFoldThread(message.get("date"), index)}
           icon={
             <Icon
               name={iconname}
diff --git a/src/packages/frontend/frame-editors/chat-editor/search.tsx b/src/packages/frontend/frame-editors/chat-editor/search.tsx
index 75d249898a..4d7fb157d2 100644
--- a/src/packages/frontend/frame-editors/chat-editor/search.tsx
+++ b/src/packages/frontend/frame-editors/chat-editor/search.tsx
@@ -9,12 +9,13 @@ Full text search that is better than a simple filter.
 
 import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 import type { EditorDescription } from "@cocalc/frontend/frame-editors/frame-tree/types";
-import { Button, Card, Input } from "antd";
+import { Button, Card, Input, Tooltip } from "antd";
 import { set } from "@cocalc/util/misc";
 import { useEffect, useMemo, useState } from "react";
 import { throttle } from "lodash";
 import useSearchIndex from "./use-search-index";
 import ShowError from "@cocalc/frontend/components/error";
+import { Icon } from "@cocalc/frontend/components/icon";
 
 interface Props {
   font_size: number;
@@ -35,7 +36,7 @@ function Search({ font_size, desc }: Props) {
     [project_id, path],
   );
 
-  const { error, setError, index, doRefresh } = useSearchIndex();
+  const { error, setError, index, doRefresh, indexTime } = useSearchIndex();
 
   useEffect(() => {
     if (index == null) {
@@ -57,19 +58,33 @@ function Search({ font_size, desc }: Props) {
         title={
           <>
             Search {path}
-            <Button
-              onClick={() => {
-                doRefresh();
-              }}
-              style={{ float: "right" }}
+            <Tooltip
+              title={
+                <>
+                  Recreate search index.{" "}
+                  {indexTime ? <>Time: {indexTime}ms</> : undefined}
+                </>
+              }
             >
-              Refresh
-            </Button>
+              <Button
+                onClick={() => {
+                  doRefresh();
+                }}
+                style={{ float: "right" }}
+              >
+                <Icon name="reload" />
+                Refresh
+              </Button>
+            </Tooltip>
           </>
         }
         style={{ fontSize: font_size }}
       >
-        <ShowError error={error} setError={setError} />
+        <ShowError
+          error={error}
+          setError={setError}
+          style={{ marginBottom: "15px" }}
+        />
         <Input.Search
           allowClear
           placeholder="Search for messages..."
diff --git a/src/packages/frontend/frame-editors/chat-editor/use-search-index.ts b/src/packages/frontend/frame-editors/chat-editor/use-search-index.ts
index 7af10daf35..63a9ff36a3 100644
--- a/src/packages/frontend/frame-editors/chat-editor/use-search-index.ts
+++ b/src/packages/frontend/frame-editors/chat-editor/use-search-index.ts
@@ -9,21 +9,24 @@ export default function useSearchIndex() {
   const [index, setIndex] = useState<null | SearchIndex>(null);
   const [error, setError] = useState<string>("");
   const { val: refresh, inc: doRefresh } = useCounter();
+  const [indexTime, setIndexTime] = useState<number>(0);
 
   useEffect(() => {
     (async () => {
       try {
         setError("");
+        const t0 = Date.now();
         const index = new SearchIndex({ actions });
         await index.init();
         setIndex(index);
+        setIndexTime(Date.now() - t0);
       } catch (err) {
         setError(`${err}`);
       }
     })();
   }, [project_id, path, refresh]);
 
-  return { index, error, doRefresh, setError };
+  return { index, error, doRefresh, setError, indexTime };
 }
 
 class SearchIndex {