side chat: make default shift+enter/button to reply to most recent thread instead of making a new one

- this code sucks but I'm tired and this is important
- I saw a dozen examples of students frustrated and confused by the
  existing chat reply implementation; I hope this helps!

Author: williamstein

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

@@ -26,6 +26,7 @@ import {
   cmp,
   hoursToTimeIntervalHuman,
   parse_hashtags,
+  plural,
   search_match,
   search_split,
 } from "@cocalc/util/misc";
@@ -41,10 +42,16 @@ interface Props {
   path: string;
   mode: Mode;
   scrollToBottomRef?: MutableRefObject<(force?: boolean) => void>;
+  setLastVisible?: (x: Date | null) => void;
 }
 
-export function ChatLog(props: Readonly<Props>) {
-  const { project_id, path, scrollToBottomRef, mode } = props;
+export function ChatLog({
+  project_id,
+  path,
+  scrollToBottomRef,
+  mode,
+  setLastVisible,
+}: Props) {
   const actions: ChatActions = useActions(project_id, path);
   const messages = useRedux(["messages"], project_id, path) as ChatMessages;
   const fontSize = useRedux(["font_size"], project_id, path);
@@ -92,6 +99,16 @@ export function ChatLog(props: Readonly<Props>) {
       account_id,
       filterRecentH,
     );
+    // TODO: This is an ugly hack because I'm tired and need to finish this.
+    // The right solution would be to move this filtering to the store.
+    // The timeout is because you can't update a component while rendering another one.
+    setTimeout(() => {
+      setLastVisible?.(
+        dates.length == 0
+          ? null
+          : new Date(parseFloat(dates[dates.length - 1])),
+      );
+    }, 1);
     return { dates, numFolded };
   }, [messages, search, project_id, path, filterRecentH]);
 
@@ -366,9 +383,11 @@ function NotShowing({ num, search, filterRecentH }: NotShowingProps) {
       key="not_showing"
       message={
         <b>
-          WARNING: Hiding {num} messages
+          WARNING: Hiding {num} {plural(num, "message")}
           {search.trim()
-            ? ` that do not match search for '${search.trim()}'`
+            ? ` that ${
+                num != 1 ? "do" : "does"
+              } not match search for '${search.trim()}'`
             : ""}
           {timespan
             ? ` ${

src/packages/frontend/chat/message.tsx

@@ -688,7 +688,7 @@ export default function Message(props: Readonly<Props>) {
             }}
             type="primary"
           >
-            <Icon name="paper-plane" /> Send
+            <Icon name="paper-plane" /> Send Reply
           </Button>
           <LLMCostEstimationChat
             llm_cost={llm_cost_reply}

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

@@ -1,7 +1,6 @@
-import { Button, Flex, Tooltip } from "antd";
+import { Button, Flex, Space, Tooltip } from "antd";
 import { debounce } from "lodash";
-import { CSSProperties, useCallback, useEffect, useRef } from "react";
-
+import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
 import {
   redux,
   useActions,
@@ -31,6 +30,7 @@ interface Props {
 export default function SideChat({ project_id, path, style }: Props) {
   const actions: ChatActions = useActions(project_id, path);
   const messages = useRedux(["messages"], project_id, path);
+  const [lastVisible, setLastVisible] = useState<Date | null>(null);
   const input: string = useRedux(["input"], project_id, path);
   const search: string = useRedux(["search"], project_id, path);
   const addCollab: boolean = useRedux(["add_collab"], project_id, path);
@@ -55,11 +55,21 @@ export default function SideChat({ project_id, path, style }: Props) {
     markAsRead();
   }, []);
 
-  const sendChat = useCallback(() => {
-    const input = submitMentionsRef.current?.();
-    actions.send_chat({ input });
-    scrollToBottomRef.current?.(true);
-  }, [actions]);
+  const sendChat = useCallback(
+    (options?) => {
+      const input = submitMentionsRef.current?.();
+      actions.send_chat({ input, ...options });
+      actions.delete_draft(0);
+      scrollToBottomRef.current?.(true);
+      setTimeout(() => {
+        scrollToBottomRef.current?.(true);
+      }, 10);
+      setTimeout(() => {
+        scrollToBottomRef.current?.(true);
+      }, 1000);
+    },
+    [actions],
+  );
 
   if (messages == null) {
     return <Loading />;
@@ -155,25 +165,38 @@ export default function SideChat({ project_id, path, style }: Props) {
           path={path}
           scrollToBottomRef={scrollToBottomRef}
           mode={"sidechat"}
+          setLastVisible={setLastVisible}
         />
       </div>
 
       <div>
         {input.trim() ? (
           <Flex vertical={false} align="center" justify="space-between">
             <Tooltip title="Send message (shift+enter)">
-              <Button
-                style={{ margin: "5px 0 5px 5px" }}
-                onClick={() => {
-                  sendChat();
-                  user_activity("side_chat", "send_chat", "click");
-                }}
-                disabled={!input?.trim() || is_uploading}
-                type="primary"
-              >
-                <Icon name="paper-plane" />
-                Send
-              </Button>
+              <Space>
+                {lastVisible && (
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      sendChat({ reply_to: new Date(lastVisible) });
+                    }}
+                  >
+                    Reply (shift+enter)
+                  </Button>
+                )}
+                <Button
+                  type={!lastVisible ? "primary" : undefined}
+                  style={{ margin: "5px 0 5px 5px" }}
+                  onClick={() => {
+                    sendChat();
+                    user_activity("side_chat", "send_chat", "click");
+                  }}
+                  disabled={!input?.trim() || is_uploading}
+                >
+                  <Icon name="paper-plane" />
+                  Start New Conversation
+                </Button>
+              </Space>
             </Tooltip>
             <LLMCostEstimationChat
               compact
@@ -187,7 +210,7 @@ export default function SideChat({ project_id, path, style }: Props) {
           cacheId={`${path}${project_id}-new`}
           input={input}
           on_send={() => {
-            sendChat();
+            sendChat(lastVisible ? { reply_to: lastVisible } : undefined);
             user_activity("side_chat", "send_chat", "keyboard");
           }}
           style={{ height: INPUT_HEIGHT }}