Merge pull request #7598 from sagemathinc/chat-improve-today-filter

frontend/chat: improve "today" filtering and search

Author: williamstein

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

@@ -22,13 +22,14 @@ import {
 import { VisibleMDLG } from "@cocalc/frontend/components";
 import useVirtuosoScrollHook from "@cocalc/frontend/components/virtuoso-scroll-hook";
 import { HashtagBar } from "@cocalc/frontend/editors/task-editor/hashtag-bar";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
 import {
   cmp,
+  hoursToTimeIntervalHuman,
   parse_hashtags,
   search_match,
   search_split,
 } from "@cocalc/util/misc";
-import { webapp_client } from "../webapp-client";
 import { ChatActions, getRootMessage } from "./actions";
 import Composing from "./composing";
 import Message from "./message";
@@ -78,7 +79,7 @@ export function ChatLog(props: Readonly<Props>) {
     actions.setState({ scrollToBottom: undefined });
   }, [scrollToBottom]);
 
-  const today = useRedux(["today"], project_id, path);
+  const filterRecentH = useRedux(["filterRecentH"], project_id, path);
   const user_map = useTypedRedux("users", "user_map");
   const account_id = useTypedRedux("account", "account_id");
   const { dates: sortedDates, numFolded } = useMemo<{
@@ -89,10 +90,10 @@ export function ChatLog(props: Readonly<Props>) {
       messages,
       search,
       account_id,
-      today,
+      filterRecentH,
     );
     return { dates, numFolded };
-  }, [messages, search, project_id, path, today]);
+  }, [messages, search, project_id, path, filterRecentH]);
 
   const visibleHashtags = useMemo(() => {
     let X = immutableSet<string>([]);
@@ -115,13 +116,15 @@ export function ChatLog(props: Readonly<Props>) {
     scrollToBottomRef.current = (force?: boolean) => {
       if (manualScrollRef.current && !force) return;
       manualScrollRef.current = false;
-      virtuosoRef.current?.scrollToIndex({ index: 99999999999999999999 });
+      virtuosoRef.current?.scrollToIndex({ index: Number.MAX_SAFE_INTEGER });
       // sometimes scrolling to bottom is requested before last entry added,
       // so we do it again in the next render loop.  This seems needed mainly
       // for side chat when there is little vertical space.
       setTimeout(
         () =>
-          virtuosoRef.current?.scrollToIndex({ index: 99999999999999999999 }),
+          virtuosoRef.current?.scrollToIndex({
+            index: Number.MAX_SAFE_INTEGER,
+          }),
         0,
       );
     };
@@ -151,7 +154,7 @@ export function ChatLog(props: Readonly<Props>) {
         <NotShowing
           num={messages.size - numFolded - sortedDates.length}
           search={search}
-          today={today}
+          filterRecentH={filterRecentH}
         />
       )}
       <Virtuoso
@@ -167,7 +170,10 @@ export function ChatLog(props: Readonly<Props>) {
           }
 
           const is_thread = isThread(messages, message);
-          const is_folded = isFolded(messages, message, account_id);
+          // if we search for a message, we treat all threads as unfolded
+          const force_unfold = !!search;
+          const is_folded =
+            !force_unfold && isFolded(messages, message, account_id);
           const is_thread_body = message.get("reply_to") != null;
 
           return (
@@ -185,6 +191,7 @@ export function ChatLog(props: Readonly<Props>) {
                 actions={actions}
                 is_thread={is_thread}
                 is_folded={is_folded}
+                force_unfold={force_unfold}
                 is_thread_body={is_thread_body}
                 is_prev_sender={isPrevMessageSender(
                   index,
@@ -304,7 +311,7 @@ export function getSortedDates(
   messages: ChatMessages,
   search?: string,
   account_id?: string,
-  today?: boolean,
+  filterRecentH?: number,
 ): { dates: string[]; numFolded: number } {
   let numFolded = 0;
   let m = messages;
@@ -315,8 +322,9 @@ export function getSortedDates(
     m = m.filter((message) => searchMatches(message, searchTerms));
   }
 
-  if (today) {
-    const cutoff = webapp_client.server_time().getTime() - 1000 * 24 * 60 * 60;
+  if (typeof filterRecentH === "number" && filterRecentH > 0) {
+    const now = webapp_client.server_time().getTime();
+    const cutoff = now - filterRecentH * 1000 * 60 * 60;
     m = m.filter((msg) => {
       const date = msg.get("date").getTime();
       return date >= cutoff;
@@ -327,13 +335,16 @@ export function getSortedDates(
   for (const [date, message] of m) {
     if (message == null) continue;
 
-    const is_thread = isThread(messages, message);
-    const is_folded = isFolded(messages, message, account_id);
-    const is_thread_body = message.get("reply_to") != null;
-    const folded = is_thread && is_folded && is_thread_body;
-    if (folded) {
-      numFolded++;
-      continue;
+    // If we search for a message, we treat all threads as unfolded
+    if (!search) {
+      const is_thread = isThread(messages, message);
+      const is_folded = isFolded(messages, message, account_id);
+      const is_thread_body = message.get("reply_to") != null;
+      const folded = is_thread && is_folded && is_thread_body;
+      if (folded) {
+        numFolded++;
+        continue;
+      }
     }
 
     const reply_to = message.get("reply_to");
@@ -384,8 +395,18 @@ export function getUserName(userMap, accountId: string): string {
   return account.get("first_name", "") + " " + account.get("last_name", "");
 }
 
-function NotShowing({ num, search, today }) {
+interface NotShowingProps {
+  num: number;
+  search: string;
+  filterRecentH: number;
+}
+
+function NotShowing({ num, search, filterRecentH }: NotShowingProps) {
   if (num <= 0) return null;
+
+  const timespan =
+    filterRecentH > 0 ? hoursToTimeIntervalHuman(filterRecentH) : null;
+
   return (
     <Alert
       style={{ margin: "0" }}
@@ -399,8 +420,10 @@ function NotShowing({ num, search, today }) {
           {search.trim()
             ? ` that do not match search for '${search.trim()}'`
             : ""}
-          {today
-            ? ` ${search.trim() ? "and" : "that"} were not sent today`
+          {timespan
+            ? ` ${
+                search.trim() ? "and" : "that"
+              } were not sent in the past ${timespan}`
             : ""}
           .
         </b>

src/packages/frontend/chat/chatroom.tsx

@@ -3,7 +3,7 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { Button, Checkbox } from "antd";
+import { Button, Divider, Input, Select, Tooltip } from "antd";
 import { debounce } from "lodash";
 import { useDebounce } from "use-debounce";
 
@@ -21,6 +21,7 @@ import {
   useEffect,
   useRedux,
   useRef,
+  useState,
 } from "@cocalc/frontend/app-framework";
 import {
   Icon,
@@ -34,7 +35,7 @@ import SelectComputeServerForFile from "@cocalc/frontend/compute/select-server-f
 import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
 import { SaveButton } from "@cocalc/frontend/frame-editors/frame-tree/save-button";
 import { sanitize_html_safe } from "@cocalc/frontend/misc";
-import { history_path } from "@cocalc/util/misc";
+import { history_path, hoursToTimeIntervalHuman } from "@cocalc/util/misc";
 import { ChatActions } from "./actions";
 import { ChatLog } from "./chat-log";
 import ChatInput from "./input";
@@ -43,6 +44,8 @@ import { SubmitMentionsFn } from "./types";
 import { INPUT_HEIGHT, markChatAsReadIfUnseen } from "./utils";
 import VideoChatButton from "./video/launch-button";
 
+const FILTER_RECENT_NONE = { value: 0, label: "All" } as const;
+
 const PREVIEW_STYLE: React.CSSProperties = {
   background: "#f5f5f5",
   fontSize: "14px",
@@ -95,7 +98,9 @@ export const ChatRoom: React.FC<Props> = ({ project_id, path }) => {
 
   const search = useRedux(["search"], project_id, path);
   const messages = useRedux(["messages"], project_id, path);
-  const today: boolean = useRedux(["today"], project_id, path);
+  const filterRecentH: number = useRedux(["filterRecentH"], project_id, path);
+  const [filterRecentHCustom, setFilterRecentHCustom] = useState<string>("");
+  const [filterRecentOpen, setFilterRecentOpen] = useState<boolean>(false);
   const llm_cost_room: [number, number] = useRedux(
     ["llm_cost_room"],
     project_id,
@@ -294,8 +299,10 @@ export const ChatRoom: React.FC<Props> = ({ project_id, path }) => {
         default_value={search}
         on_change={debounce(
           (value) => actions.setState({ search: value }),
-          250,
+          150,
+          { leading: false, trailing: true },
         )}
+        status={!search ? undefined : "warning"}
         style={{
           margin: 0,
           width: "100%",
@@ -308,6 +315,93 @@ export const ChatRoom: React.FC<Props> = ({ project_id, path }) => {
     );
   }
 
+  function isValidFilterRecentCustom(): boolean {
+    const v = parseFloat(filterRecentHCustom);
+    return isFinite(v) && v >= 0;
+  }
+
+  function renderFilterRecent() {
+    return (
+      <Select
+        open={filterRecentOpen}
+        onDropdownVisibleChange={(v) => setFilterRecentOpen(v)}
+        value={filterRecentH}
+        status={filterRecentH > 0 ? "warning" : undefined}
+        allowClear
+        onClear={() => {
+          actions.setState({ filterRecentH: 0 });
+          setFilterRecentHCustom("");
+        }}
+        style={{ width: 120 }}
+        popupMatchSelectWidth={false}
+        onSelect={(val: number) => actions.setState({ filterRecentH: val })}
+        options={[
+          FILTER_RECENT_NONE,
+          ...[1, 6, 12, 24, 48, 24 * 7, 14 * 24, 28 * 24].map((value) => {
+            const label = hoursToTimeIntervalHuman(value);
+            return { value, label };
+          }),
+        ]}
+        labelRender={({ label, value }) => {
+          if (!label) {
+            if (isValidFilterRecentCustom()) {
+              value = parseFloat(filterRecentHCustom);
+              label = hoursToTimeIntervalHuman(value);
+            } else {
+              ({ label, value } = FILTER_RECENT_NONE);
+            }
+          }
+          return (
+            <Tooltip
+              title={
+                value === 0
+                  ? `All messages.`
+                  : `Only messages sent in the past ${label}.`
+              }
+            >
+              {label}
+            </Tooltip>
+          );
+        }}
+        dropdownRender={(menu) => (
+          <>
+            {menu}
+            <Divider style={{ margin: "8px 0" }} />
+            <Input
+              placeholder="Number of hours"
+              allowClear
+              value={filterRecentHCustom}
+              status={
+                filterRecentHCustom == "" || isValidFilterRecentCustom()
+                  ? undefined
+                  : "error"
+              }
+              onChange={debounce(
+                (e: React.ChangeEvent<HTMLInputElement>) => {
+                  const v = e.target.value;
+                  setFilterRecentHCustom(v);
+                  const val = parseFloat(v);
+                  if (isFinite(val) && val >= 0) {
+                    actions.setState({ filterRecentH: val });
+                  } else if (v == "") {
+                    actions.setState({
+                      filterRecentH: FILTER_RECENT_NONE.value,
+                    });
+                  }
+                },
+                150,
+                { leading: true, trailing: true },
+              )}
+              onKeyDown={(e) => e.stopPropagation()}
+              onPressEnter={() => setFilterRecentOpen(false)}
+              addonAfter={<span style={{ paddingLeft: "5px" }}>hours</span>}
+            />
+          </>
+        )}
+      />
+    );
+  }
+
   function render_button_row() {
     return (
       <Row style={{ marginLeft: 0, marginRight: 0 }}>
@@ -348,17 +442,17 @@ export const ChatRoom: React.FC<Props> = ({ project_id, path }) => {
             </Button>
           )}
         </Col>
-        <Col xs={3} md={3} style={{ padding: "2px", display: "flex" }}>
-          <div style={{ marginTop: "5px" }}>
-            <Checkbox
-              checked={today}
-              onChange={() => {
-                actions.setState({ today: !today });
-              }}
-            >
-              Today
-            </Checkbox>
-          </div>
+        <Col
+          xs={3}
+          md={3}
+          style={{
+            padding: "2px",
+            display: "flex",
+            verticalAlign: "center",
+            gap: "5px",
+          }}
+        >
+          {renderFilterRecent()}
           {render_search()}
         </Col>
       </Row>