chat: automatically update search index when messages change

- it's so fast, even for ~1000 messages, let's just automate it.

Author: williamstein

src/packages/frontend/chat/filter.tsx

@@ -8,21 +8,22 @@ export default function Filter({ actions, search, style }) {
     setValue(search);
   }, [search]);
 
-  const debouncedSearch = useMemo(
-    () =>
-      debounce(actions.setSearch, 200, {
-        leading: false,
-        trailing: true,
-      }),
-    [actions],
-  );
+  const debouncedSearch = useMemo(() => {
+    return debounce(actions.setSearch, 200, {
+      leading: false,
+      trailing: true,
+    });
+  }, [actions]);
 
   return (
     <Tooltip
       title={
-        !value
-          ? "Show only threads that match this search.  Use /re/ for a regular expression, quotes, and dashes to negate."
-          : undefined
+        !value ? (
+          <>
+            Show only threads that match this filter. Use /re/ for a regular
+            expression, quotes, and dashes to negate.
+          </>
+        ) : undefined
       }
     >
       <Input.Search

src/packages/frontend/frame-editors/chat-editor/search.tsx

@@ -9,15 +9,16 @@ 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, Tooltip } from "antd";
-import { set } from "@cocalc/util/misc";
+import { Card, Input } from "antd";
+import { path_split, separate_file_extension, 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";
 import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
 import { TimeAgo } from "@cocalc/frontend/components";
+import { useEditorRedux } from "@cocalc/frontend/app-framework";
+import type { ChatState } from "@cocalc/frontend/chat/store";
 
 interface Props {
   font_size: number;
@@ -26,6 +27,9 @@ interface Props {
 
 function Search({ font_size, desc }: Props) {
   const { project_id, path, actions, id } = useFrameContext();
+  const useEditor = useEditorRedux<ChatState>({ project_id, path });
+  const messages = useEditor("messages");
+  const [indexedMessages, setIndexedMessages] = useState<any>(messages);
   const [search, setSearch] = useState<string>(desc.get("data-search") ?? "");
   const [result, setResult] = useState<any>(null);
   const saveSearch = useMemo(
@@ -38,7 +42,7 @@ function Search({ font_size, desc }: Props) {
     [project_id, path],
   );
 
-  const { error, setError, index, doRefresh, indexTime } = useSearchIndex();
+  const { error, setError, index, doRefresh } = useSearchIndex();
 
   useEffect(() => {
     if (index == null) {
@@ -54,31 +58,18 @@ function Search({ font_size, desc }: Props) {
     })();
   }, [search, index]);
 
+  useEffect(() => {
+    if (indexedMessages != messages) {
+      setIndexedMessages(messages);
+      doRefresh();
+    }
+  }, [messages]);
+
   return (
     <div className="smc-vfill">
       <Card
         title={
-          <>
-            Search {path}
-            <Tooltip
-              title={
-                <>
-                  Recreate search index.{" "}
-                  {indexTime ? <>Time: {indexTime}ms</> : undefined}
-                </>
-              }
-            >
-              <Button
-                onClick={() => {
-                  doRefresh();
-                }}
-                style={{ float: "right" }}
-              >
-                <Icon name="reload" />
-                Refresh
-              </Button>
-            </Tooltip>
-          </>
+          <>Search Chatroom {separate_file_extension(path_split(path).tail).name}</>
         }
         style={{ fontSize: font_size }}
       >
@@ -90,7 +81,7 @@ function Search({ font_size, desc }: Props) {
         <Input.Search
           autoFocus
           allowClear
-          placeholder="Search for messages..."
+          placeholder="Search messages..."
           value={search}
           onChange={(e) => {
             const search = e.target.value ?? "";
@@ -117,7 +108,7 @@ function SearchResult({ hit, actions }) {
     <div
       style={{
         cursor: "pointer",
-        margin: "5px 0",
+        margin: "10px 0",
         padding: "5px",
         border: "1px solid #ccc",
         background: "#f8f8f8",

src/packages/frontend/frame-editors/frame-tree/editor.tsx

@@ -115,7 +115,7 @@ const FrameTreeEditor: React.FC<FrameTreeEditorProps> = React.memo(
     useEffect(() => {
       if (!frameRootRef.current) return;
       const observer = new ResizeObserver(() => {
-        actions.set_resize();
+        actions.set_resize?.();
       });
       observer.observe(frameRootRef.current);
       return () => observer.disconnect();

src/packages/frontend/frame-editors/frame-tree/frame-tree-drag-bar.tsx

@@ -90,7 +90,7 @@ export const FrameTreeDragBar: React.FC<Props> = React.memo((props: Props) => {
       id: frame_tree.get("id"),
       pos,
     });
-    actions.set_resize();
+    actions.set_resize?.();
     actions.focus(); // see https://github.com/sagemathinc/cocalc/issues/3269
   }
 

src/packages/frontend/frame-editors/frame-tree/register.ts

@@ -37,7 +37,7 @@ interface Register {
 }
 
 function isAsyncRegister(
-  opts: Register | AsyncRegister
+  opts: Register | AsyncRegister,
 ): opts is AsyncRegister {
   return opts["editor"] != null;
 }
@@ -71,7 +71,7 @@ export function register_file_editor(opts: Register | AsyncRegister) {
       opts.component,
       opts.Actions,
       opts.asyncData,
-      is_public
+      is_public,
     );
   }
 }
@@ -95,7 +95,7 @@ function register(
         component: any;
         Actions: any;
       }>),
-  is_public: boolean
+  is_public: boolean,
 ) {
   let data: any = {
     icon,
@@ -144,9 +144,7 @@ function register(
       if (is_public) return;
       const name = redux_name(project_id, path);
       const actions = redux.getActions(name);
-      if (actions) {
-        actions.save();
-      }
+      actions?.save?.();
     },
   };
 
@@ -179,7 +177,7 @@ function register(
   } else {
     if (asyncData == null) {
       throw Error(
-        "either asyncData must be given or components and Actions must be given (or both)"
+        "either asyncData must be given or components and Actions must be given (or both)",
       );
     }
     let async_data: any = undefined;

src/scripts/g.sh

@@ -10,7 +10,6 @@ unset DEBUG_CONSOLE
 
 #export COCALC_DISABLE_API_VALIDATION=yes
 #export NO_RSPACK_DEV_SERVER=yes
-#ulimit -Sv 120000000
 
 while true; do
   pnpm hub