frontend/chat: add a "fold all LLM threads" button

Author: haraldschilly

src/packages/frontend/chat/actions.ts

@@ -90,9 +90,7 @@ export class ChatActions extends Actions<ChatState> {
   };
 
   toggleFoldThread = (reply_to: Date, messageIndex?: number) => {
-    if (this.syncdb == null) {
-      return;
-    }
+    if (this.syncdb == null) return;
     const account_id = this.redux.getStore("account").get_account_id();
     const cur = this.syncdb.get_one({ event: "chat", date: reply_to });
     const folding = cur?.get("folding") ?? List([]);
@@ -113,6 +111,29 @@ export class ChatActions extends Actions<ChatState> {
     }
   };
 
+  foldAllThreads = (onlyLLM = true) => {
+    if (this.syncdb == null || this.store == null) return;
+    const messages = this.store.get("messages");
+    if (messages == null) return;
+    const account_id = this.redux.getStore("account").get_account_id();
+    for (const [_timestamp, message] of messages) {
+      // ignore replies
+      if (message.get("reply_to") != null) continue;
+      const date = message.get("date");
+      if (!(date instanceof Date)) continue;
+      const isLLMThread = this.isLanguageModelThread(date) !== false;
+      if (onlyLLM && !isLLMThread) continue;
+      const folding = message?.get("folding") ?? List([]);
+      const folded = folding.includes(account_id);
+      if (!folded) {
+        this.syncdb.set({
+          folding: folding.push(account_id),
+          date,
+        });
+      }
+    }
+  };
+
   feedback = (message: ChatMessageTyped, feedback: Feedback | null) => {
     if (this.syncdb == null) return;
     const date = message.get("date");
@@ -479,6 +500,7 @@ export class ChatActions extends Actions<ChatState> {
       scrollToDate: null,
     });
   };
+
   scrollToIndex = (index: number = -1) => {
     if (this.syncdb == null) return;
     // we first clear, then set it, since scroll to needs to

src/packages/frontend/chat/chatroom.tsx

@@ -23,6 +23,7 @@ import { hoursToTimeIntervalHuman } from "@cocalc/util/misc";
 import type { ChatActions } from "./actions";
 import { ChatLog } from "./chat-log";
 import Filter from "./filter";
+import { FoldAllThreads } from "./fold-threads";
 import ChatInput from "./input";
 import { LLMCostEstimationChat } from "./llm-cost-estimation";
 import type { ChatState } from "./store";
@@ -262,6 +263,7 @@ export function ChatRoom({
         <ButtonGroup style={{ marginLeft: "5px" }}>
           {render_video_chat_button()}
         </ButtonGroup>
+        <FoldAllThreads actions={actions} shortLabel={false} />
       </Space>
     );
   }

src/packages/frontend/chat/fold-threads.tsx

@@ -0,0 +1,25 @@
+import { Button } from "antd";
+
+import { ChatActions } from "@cocalc/frontend/chat/actions";
+import { Icon, Tip } from "@cocalc/frontend/components";
+
+export function FoldAllThreads({
+  actions,
+  shortLabel,
+}: {
+  actions: ChatActions;
+  shortLabel: boolean;
+}) {
+  return (
+    <Tip placement="top" title="Fold all language model threads">
+      <Button
+        onClick={() => {
+          actions.foldAllThreads(true);
+        }}
+      >
+        <Icon name="to-top-outlined" />{" "}
+        {shortLabel ? "LLM" : "Fold LLM threads"}
+      </Button>
+    </Tip>
+  );
+}

src/packages/frontend/chat/message.tsx

@@ -964,7 +964,7 @@ export default function Message({
     );
 
     return (
-      <Col xs={24} style={{}}>
+      <Col xs={24}>
         <Tip title={"Click to unfold this thread to show all messages."}>
           <Button
             onClick={() =>

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

@@ -1,5 +1,6 @@
 import { Button, Flex, Space, Tooltip } from "antd";
 import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
+
 import {
   redux,
   useActions,
@@ -11,15 +12,16 @@ 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";
+import { COLORS } from "@cocalc/util/theme";
 import type { ChatActions } from "./actions";
 import { ChatLog } from "./chat-log";
+import Filter from "./filter";
+import { FoldAllThreads } from "./fold-threads";
 import ChatInput from "./input";
 import { LLMCostEstimationChat } from "./llm-cost-estimation";
 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;
@@ -104,7 +106,7 @@ export default function SideChat({
       onMouseMove={markAsRead}
       onFocus={() => {
         // Remove any active key handler that is next to this side chat.
-        // E.g, this is critical for taks lists...
+        // E.g, this is critical for tasks lists...
         redux.getActions("page").erase_active_key_handler();
       }}
     >
@@ -134,6 +136,7 @@ export default function SideChat({
                 <Icon name="history" />
               </Button>
             </Tooltip>
+            <FoldAllThreads actions={actions} shortLabel={true} />
           </Space.Compact>
           <CollabList
             addCollab={addCollab}

src/packages/frontend/frame-editors/frame-tree/commands/editor-menus.ts

@@ -135,7 +135,7 @@ export function addEditorMenus({
     const { children } = COMMANDS[name];
     const cmdName = `${prefix}-${name}`;
     if (children == null) {
-      // everthing based entirely on spec object.
+      // everything based entirely on spec object.
       C[cmdName] = {
         ...cmd(name),
         ...COMMANDS[name],