search: making it more generic -- the fragment

Author: williamstein

src/packages/frontend/chat/actions.ts

@@ -517,12 +517,14 @@ 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.
   scrollToDate = (date) => {
     this.clearScrollRequest();
     this.frameTreeActions?.set_frame_data({
       id: this.frameId,
       fragmentId: toMsString(date),
     });
+    this.setFragment(date);
     setTimeout(() => {
       this.frameTreeActions?.set_frame_data({
         id: this.frameId,

src/packages/frontend/frame-editors/chat-editor/actions.ts

@@ -159,11 +159,16 @@ export class Actions extends CodeEditorActions<ChatEditorState> {
     }
   }
 
-  getSearchData = () => {
+  getSearchIndexData = () => {
     const messages = this.store?.get("messages");
     if (messages == null) {
       return {};
     }
-    return getSearchData({ messages, threads: false });
+    const data: { [id: string]: string } = {};
+    const data0 = getSearchData({ messages, threads: false });
+    for (const id in data0) {
+      data[id] = data0[id]?.content;
+    }
+    return { data, fragmentKey: "chat" };
   };
 }

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

@@ -42,7 +42,7 @@ function Search({ font_size, desc }: Props) {
     [project_id, path],
   );
 
-  const { error, setError, index, doRefresh } = useSearchIndex();
+  const { error, setError, index, doRefresh, fragmentKey } = useSearchIndex();
 
   useEffect(() => {
     if (index == null) {
@@ -69,7 +69,10 @@ function Search({ font_size, desc }: Props) {
     <div className="smc-vfill">
       <Card
         title={
-          <>Search Chatroom {separate_file_extension(path_split(path).tail).name}</>
+          <>
+            Search Chatroom{" "}
+            {separate_file_extension(path_split(path).tail).name}
+          </>
         }
         style={{ fontSize: font_size }}
       >
@@ -93,7 +96,7 @@ function Search({ font_size, desc }: Props) {
       <div className="smc-vfill">
         <div style={{ overflow: "auto", padding: "15px" }}>
           {result?.hits?.map((hit) => (
-            <SearchResult key={hit.id} hit={hit} actions={actions} />
+            <SearchResult key={hit.id} hit={hit} actions={actions} fragmentKey={fragmentKey} />
           ))}
           {result?.hits == null && search?.trim() && <div>No hits</div>}
         </div>
@@ -102,7 +105,7 @@ function Search({ font_size, desc }: Props) {
   );
 }
 
-function SearchResult({ hit, actions }) {
+function SearchResult({ hit, actions, fragmentKey }) {
   const { document } = hit;
   return (
     <div
@@ -117,12 +120,12 @@ function SearchResult({ hit, actions }) {
         overflow: "hidden",
       }}
       onClick={() => {
-        actions.gotoFragment({ chat: document.time });
+        actions.gotoFragment({ [fragmentKey]: document.id });
       }}
     >
-      <TimeAgo style={{ float: "right", color: "#888" }} date={document.time} />
+      <TimeAgo style={{ float: "right", color: "#888" }} date={parseFloat(document.id)} />
       <StaticMarkdown
-        value={document.message}
+        value={document.content}
         style={{ marginBottom: "-10px" /* account for <p> */ }}
       />
     </div>

src/packages/frontend/frame-editors/chat-editor/use-search-index.ts

@@ -13,6 +13,7 @@ export default function useSearchIndex() {
   const [error, setError] = useState<string>("");
   const { val: refresh, inc: doRefresh } = useCounter();
   const [indexTime, setIndexTime] = useState<number>(0);
+  const [fragmentKey, setFragmentKey] = useState<string>("id");
 
   useEffect(() => {
     if (
@@ -26,34 +27,40 @@ export default function useSearchIndex() {
       try {
         setError("");
         const t0 = Date.now();
-        const index = new SearchIndex({ actions });
-        await index.init();
-        setIndex(index);
+        const newIndex = new SearchIndex({ actions });
+        await newIndex.init();
+        setFragmentKey(newIndex.fragmentKey ?? "id");
+        setIndex(newIndex);
         setIndexTime(Date.now() - t0);
+        //index?.close();
       } catch (err) {
         setError(`${err}`);
       }
     })();
   }, [project_id, path, refresh]);
 
-  return { index, error, doRefresh, setError, indexTime };
+  return { index, error, doRefresh, setError, indexTime, fragmentKey };
 }
 
 class SearchIndex {
-  private actions;
-  private state: "init" | "ready" | "failed" = "init";
-  private error: Error | null = null;
-  private db;
+  private actions?;
+  private state: "init" | "ready" | "failed" | "closed" = "init";
+  private db?;
+  public fragmentKey?: string = "id";
 
   constructor({ actions }) {
     this.actions = actions;
   }
 
-  getState = () => this.state;
-  getError = () => this.error;
+  close = () => {
+    this.state = "closed";
+    delete this.actions;
+    delete this.db;
+    delete this.fragmentKey;
+  };
 
   search = async (query) => {
-    if (this.state != "ready") {
+    if (this.state != "ready" || this.db == null) {
       throw Error("index not ready");
     }
     return await search(this.db, query);
@@ -62,19 +69,22 @@ class SearchIndex {
   init = async () => {
     this.db = await create({
       schema: {
-        time: "number",
-        message: "string",
+        content: "string",
       },
     });
 
-    const searchData = this.actions.getSearchData();
-    if (searchData != null) {
-      const docs: { time: number; message: string }[] = [];
-      for (const time in searchData) {
-        docs.push({
-          time: parseInt(time),
-          message: searchData[time]?.content ?? "",
-        });
+    if (this.actions == null || this.state != "init") {
+      throw Error("not in init state");
+    }
+    const { data, fragmentKey } = this.actions.getSearchIndexData();
+    this.fragmentKey = fragmentKey;
+    if (data != null) {
+      const docs: { id: string; content: string }[] = [];
+      for (const id in data) {
+        const content = data[id]?.trim();
+        if (content) {
+          docs.push({ id, content });
+        }
       }
       await insertMultiple(this.db, docs);
     }