frontend/chat: if "search" is set, temporarily unfold all threads to search through all messages

Author: haraldschilly

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

@@ -170,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 (
@@ -188,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,
@@ -331,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");

src/packages/frontend/chat/chatroom.tsx

@@ -299,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%",
@@ -374,16 +376,22 @@ export const ChatRoom: React.FC<Props> = ({ project_id, path }) => {
                   ? undefined
                   : "error"
               }
-              onChange={(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 });
-                }
-              }}
+              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>}

src/packages/frontend/chat/message.tsx

@@ -122,13 +122,15 @@ interface Props {
   is_thread?: boolean; // if true, there is a thread starting in a reply_to message
   is_folded?: boolean; // if true, only show the reply_to root message
   is_thread_body: boolean;
+  force_unfold?: boolean; // if true, all threads are temporarily forced to be unfolded
 
   llm_cost_reply?: [number, number] | null;
 }
 
 export default function Message(props: Readonly<Props>) {
   const {
     is_folded,
+    force_unfold,
     is_thread_body,
     is_thread,
     llm_cost_reply,
@@ -179,10 +181,6 @@ export default function Message(props: Readonly<Props>) {
     );
   }, [message]);
 
-  const isFolded: boolean = useMemo(() => {
-    return message.get("folding")?.includes(props.account_id) ?? false;
-  }, [message]);
-
   const reverseRowOrdering =
     !is_thread_body && sender_is_viewer(props.account_id, message);
 
@@ -527,7 +525,11 @@ export default function Message(props: Readonly<Props>) {
                 ) : undefined}
                 {isLLMThread && msgWrittenByLLM ? (
                   <>
-                    <RegenerateLLM actions={props.actions} date={date} model={isLLMThread} />
+                    <RegenerateLLM
+                      actions={props.actions}
+                      date={date}
+                      model={isLLMThread}
+                    />
                     <FeedbackLLM actions={props.actions} message={message} />
                   </>
                 ) : undefined}
@@ -651,8 +653,8 @@ export default function Message(props: Readonly<Props>) {
           onChange={(value) => {
             replyMessageRef.current = value;
             // replyMentionsRef does not submit mentions, only gives us the value
-           const reply = replyMentionsRef.current?.(undefined, true) ?? value;
-           props.actions?.llm_estimate_cost(reply, "reply", message.toJS());
+            const reply = replyMentionsRef.current?.(undefined, true) ?? value;
+            props.actions?.llm_estimate_cost(reply, "reply", message.toJS());
           }}
           placeholder={"Reply to the above message..."}
         />
@@ -684,7 +686,7 @@ export default function Message(props: Readonly<Props>) {
   function getStyleBase(): CSS {
     if (!is_thread_body) {
       if (is_thread) {
-        if (isFolded) {
+        if (is_folded) {
           return THREAD_STYLE_FOLDED;
         } else {
           return THREAD_STYLE_TOP;
@@ -791,7 +793,7 @@ export default function Message(props: Readonly<Props>) {
               marginRight: "5px",
             }
           : { marginTop: "5px", width: "100%", textAlign: "center" };
-      const iconname = isFolded
+      const iconname = is_folded
         ? mode === "standalone"
           ? reverseRowOrdering
             ? "right-circle-o"
@@ -802,6 +804,7 @@ export default function Message(props: Readonly<Props>) {
         <Button
           type="text"
           style={style}
+          disabled={force_unfold}
           onClick={() =>
             props.actions?.foldThread(message.get("date"), props.index)
           }
@@ -824,7 +827,7 @@ export default function Message(props: Readonly<Props>) {
           ) : (
             <Tooltip
               title={
-                isFolded
+                is_folded
                   ? "Unfold this thread"
                   : "Fold this thread to hide replies"
               }

src/packages/frontend/components/search-input.tsx

@@ -37,6 +37,7 @@ interface Props {
   autoSelect?: boolean;
   placeholder?: string;
   focus?: number; // if this changes, focus the search box.
+  status?: "warning" | "error";
 }
 
 export const SearchInput: React.FC<Props> = React.memo((props) => {
@@ -147,6 +148,7 @@ export const SearchInput: React.FC<Props> = React.memo((props) => {
       onKeyUp={key_up}
       disabled={props.disabled}
       enterButton={props.buttonAfter}
+      status={props.status}
     />
   );
 });