chat: use antd Input.Search component for consistency; also when search state gets cleared when sending message, update what is displayed in search; finally also clear hashtag state

Author: williamstein

src/packages/frontend/chat/actions.ts

@@ -294,11 +294,13 @@ export class ChatActions extends Actions<ChatState> {
       this.setState({
         input: "",
         search: "",
+        selectedHashtags: immutableMap(),
       });
     } else {
       // TODO: but until we improve search to be by thread (instead of by message), do this:
       this.setState({
         search: "",
+        selectedHashtags: immutableMap(),
       });
     }
 

src/packages/frontend/chat/chatroom.tsx

@@ -22,13 +22,7 @@ import {
   useRef,
   useState,
 } from "@cocalc/frontend/app-framework";
-import {
-  Icon,
-  Loading,
-  SearchInput,
-  Tip,
-  VisibleMDLG,
-} from "@cocalc/frontend/components";
+import { Icon, Loading, Tip, VisibleMDLG } from "@cocalc/frontend/components";
 import { computeServersEnabled } from "@cocalc/frontend/compute/config";
 import SelectComputeServerForFile from "@cocalc/frontend/compute/select-server-for-file";
 import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
@@ -43,6 +37,7 @@ import { LLMCostEstimationChat } from "./llm-cost-estimation";
 import { SubmitMentionsFn } from "./types";
 import { INPUT_HEIGHT, markChatAsReadIfUnseen } from "./utils";
 import VideoChatButton from "./video/launch-button";
+import Filter from "./filter";
 
 const FILTER_RECENT_NONE = { value: 0, label: "All" } as const;
 
@@ -304,30 +299,6 @@ export const ChatRoom: React.FC<Props> = ({ project_id, path, is_visible }) => {
     );
   }
 
-  function render_search() {
-    return (
-      <SearchInput
-        autoFocus={false}
-        placeholder={"Filter messages (use /re/ for regexp)..."}
-        default_value={search}
-        on_change={debounce(
-          (value) => actions.setState({ search: value }),
-          150,
-          { leading: false, trailing: true },
-        )}
-        status={!search ? undefined : "warning"}
-        style={{
-          margin: 0,
-          width: "100%",
-          marginBottom: "5px",
-          ...(messages.size >= 2
-            ? undefined
-            : { visibility: "hidden", height: 0 }),
-        }}
-      />
-    );
-  }
-
   function isValidFilterRecentCustom(): boolean {
     const v = parseFloat(filterRecentHCustom);
     return isFinite(v) && v >= 0;
@@ -466,7 +437,18 @@ export const ChatRoom: React.FC<Props> = ({ project_id, path, is_visible }) => {
           }}
         >
           {renderFilterRecent()}
-          {render_search()}
+          <Filter
+            actions={actions}
+            search={search}
+            style={{
+              margin: 0,
+              width: "100%",
+              marginBottom: "5px",
+              ...(messages.size >= 2
+                ? undefined
+                : { visibility: "hidden", height: 0 }),
+            }}
+          />
         </Col>
       </Row>
     );

src/packages/frontend/chat/filter.tsx

@@ -0,0 +1,45 @@
+import { Input } from "antd";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { debounce } from "lodash";
+
+export default function Filter({ actions, search, style }) {
+  const [value, setValue] = useState<string>(search ?? "");
+  useEffect(() => {
+    setValue(search);
+  }, [search]);
+  const doSearch = useCallback(
+    (value: string) => {
+      actions.setState({ search: value });
+    },
+    [actions],
+  );
+  const debouncedSearch = useMemo(
+    () =>
+      debounce(doSearch, 200, {
+        leading: false,
+        trailing: true,
+      }),
+    [actions],
+  );
+
+  return (
+    <Input.Search
+      style={style}
+      allowClear
+      placeholder={"Filter messages (use /re/ for regexp)..."}
+      value={value}
+      onChange={(e) => {
+        setValue(e.target.value ?? "");
+        debouncedSearch(e.target.value ?? "");
+      }}
+      onPressEnter={() => {
+        debouncedSearch.cancel();
+        doSearch(value);
+      }}
+      onSearch={() => {
+        debouncedSearch.cancel();
+        doSearch(value);
+      }}
+    />
+  );
+}

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

@@ -1,5 +1,4 @@
 import { Button, Flex, Space, Tooltip } from "antd";
-import { debounce } from "lodash";
 import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
 import {
   redux,
@@ -8,7 +7,7 @@ import {
   useTypedRedux,
 } from "@cocalc/frontend/app-framework";
 import { AddCollaborators } from "@cocalc/frontend/collaborators";
-import { A, Icon, Loading, SearchInput } from "@cocalc/frontend/components";
+import { A, Icon, Loading } from "@cocalc/frontend/components";
 import { IS_MOBILE } from "@cocalc/frontend/feature";
 import { ProjectUsers } from "@cocalc/frontend/projects/project-users";
 import { user_activity } from "@cocalc/frontend/tracker";
@@ -20,6 +19,7 @@ import { SubmitMentionsFn } from "./types";
 import { INPUT_HEIGHT, markChatAsReadIfUnseen } from "./utils";
 import VideoChatButton from "./video/launch-button";
 import { COLORS } from "@cocalc/util/theme";
+import Filter from "./filter";
 
 interface Props {
   project_id: string;
@@ -141,11 +141,9 @@ export default function SideChat({ project_id, path, style }: Props) {
           <AddChatCollab addCollab={addCollab} project_id={project_id} />
         </div>
       )}
-      <SearchInput
-        autoFocus={false}
-        placeholder={"Filter messages (use /re/ for regexp)..."}
-        default_value={search}
-        on_change={debounce((search) => actions.setState({ search }), 500)}
+      <Filter
+        actions={actions}
+        search={search}
         style={{
           margin: 0,
           ...(messages.size >= 2