make search results clickable

Author: williamstein

src/packages/frontend/chat/filter-messages.ts

@@ -90,7 +90,8 @@ function getContent(message: ChatMessageTyped, userMap): string {
   const author_id = first.get("author_id");
   const user = userMap?.get(author_id);
   if (user != null) {
-    content += " " + user.get("first_name") + " " + user.get("last_name");
+    content =
+      user.get("first_name") + " " + user.get("last_name") + "\n\n" + content;
   }
   return content;
 }

src/packages/frontend/client/console.ts

@@ -24,7 +24,7 @@ you have to change the context to *top*!   See
 http://stackoverflow.com/questions/3275816/debugging-iframes-with-chrome-developer-tools/8581276#8581276
 */
 
-declare const DEBUG; //  this comes from webpack.
+declare const DEBUG; //  this comes from rspack.
 console.log("DEBUG = ", DEBUG);
 
 import { IS_TOUCH } from "../feature";

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

@@ -16,6 +16,8 @@ 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";
 
 interface Props {
   font_size: number;
@@ -86,6 +88,7 @@ function Search({ font_size, desc }: Props) {
           style={{ marginBottom: "15px" }}
         />
         <Input.Search
+          autoFocus
           allowClear
           placeholder="Search for messages..."
           value={search}
@@ -96,9 +99,41 @@ function Search({ font_size, desc }: Props) {
           }}
         />
       </Card>
-      <pre className="smc-vfill" style={{ overflow: "auto" }}>
-        {JSON.stringify(result, undefined, 2)}
-      </pre>
+      <div className="smc-vfill">
+        <div style={{ overflow: "auto", padding: "15px" }}>
+          {result?.hits?.map((hit) => (
+            <SearchResult key={hit.id} hit={hit} actions={actions} />
+          ))}
+          {result?.hits == null && search?.trim() && <div>No hits</div>}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SearchResult({ hit, actions }) {
+  const { document } = hit;
+  return (
+    <div
+      style={{
+        cursor: "pointer",
+        margin: "5px 0",
+        padding: "5px",
+        border: "1px solid #ccc",
+        background: "#f8f8f8",
+        borderRadius: "5px",
+        maxHeight: "100px",
+        overflow: "hidden",
+      }}
+      onClick={() => {
+        actions.gotoFragment({ chat: document.time });
+      }}
+    >
+      <TimeAgo style={{ float: "right", color: "#888" }} date={document.time} />
+      <StaticMarkdown
+        value={document.message}
+        style={{ marginBottom: "-10px" /* account for <p> */ }}
+      />
     </div>
   );
 }

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

@@ -2969,7 +2969,7 @@ export class Actions<
     if (state != "ready" && !(await this.wait_until_syncdoc_ready(syncdoc))) {
       return "";
     }
-    const frameId = this.show_focused_frame_of_type(type);
+    const frameId = this.show_focused_frame_of_type(type, "col", true);
     if (state != "ready" && frameId) {
       // TODO: temporary hack until we have gotoFragment
       // as part of constructor!