frontend: start working on more compact/hidden chat threads

Author: haraldschilly

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

@@ -7,15 +7,19 @@
 Render all the messages in the chat.
 */
 
+// cSpell:ignore: timespan
+
 import { Alert, Button } from "antd";
 import { Set as immutableSet } from "immutable";
 import { MutableRefObject, useEffect, useMemo, useRef } from "react";
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
+
 import { chatBotName, isChatBot } from "@cocalc/frontend/account/chatbot";
 import { useRedux, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
 import useVirtuosoScrollHook from "@cocalc/frontend/components/virtuoso-scroll-hook";
 import { HashtagBar } from "@cocalc/frontend/editors/task-editor/hashtag-bar";
+import { DivTempHeight } from "@cocalc/frontend/jupyter/cell-list";
 import {
   cmp,
   hoursToTimeIntervalHuman,
@@ -24,12 +28,21 @@ import {
 } from "@cocalc/util/misc";
 import type { ChatActions } from "./actions";
 import Composing from "./composing";
-import Message from "./message";
-import type { ChatMessageTyped, ChatMessages, Mode } from "./types";
-import { getSelectedHashtagsSearch, newest_content } from "./utils";
-import { getRootMessage, getThreadRootDate } from "./utils";
-import { DivTempHeight } from "@cocalc/frontend/jupyter/cell-list";
 import { filterMessages } from "./filter-messages";
+import Message from "./message";
+import type {
+  ChatMessageTyped,
+  ChatMessages,
+  CostEstimate,
+  Mode,
+  NumChildren,
+} from "./types";
+import {
+  getRootMessage,
+  getSelectedHashtagsSearch,
+  getThreadRootDate,
+  newest_content,
+} from "./utils";
 
 interface Props {
   project_id: string; // used to render links more effectively
@@ -83,7 +96,7 @@ export function ChatLog({
   } = useMemo<{
     dates: string[];
     numFolded: number;
-    numChildren;
+    numChildren: NumChildren;
   }>(() => {
     const { dates, numFolded, numChildren } = getSortedDates(
       messages,
@@ -288,10 +301,7 @@ function isPrevMessageSender(
   );
 }
 
-function isThread(
-  message: ChatMessageTyped,
-  numChildren: { [date: number]: number },
-) {
+function isThread(message: ChatMessageTyped, numChildren: NumChildren) {
   if (message.get("reply_to") != null) {
     return true;
   }
@@ -324,7 +334,7 @@ export function getSortedDates(
 ): {
   dates: string[];
   numFolded: number;
-  numChildren: { [date: number]: number };
+  numChildren: NumChildren;
 } {
   let numFolded = 0;
   let m = messages;
@@ -342,7 +352,7 @@ export function getSortedDates(
 
   // Do a linear pass through all messages to divide into threads, so that
   // getSortedDates is O(n) instead of O(n^2) !
-  const numChildren: { [date: number]: number } = {};
+  const numChildren: NumChildren = {};
   for (const [_, message] of m) {
     const parent = message.get("reply_to");
     if (parent != null) {
@@ -486,22 +496,21 @@ export function MessageList({
   selectedDate,
   numChildren,
 }: {
-  messages;
-  account_id;
+  messages: ChatMessages;
+  account_id: string;
   user_map;
   mode;
   sortedDates;
   virtuosoRef?;
-  search?;
-  project_id?;
-  path?;
-  fontSize?;
+  project_id?: string;
+  path?: string;
+  fontSize?: number;
   selectedHashtags?;
   actions?;
-  costEstimate?;
+  costEstimate?: CostEstimate;
   manualScrollRef?;
   selectedDate?: string;
-  numChildren?;
+  numChildren?: NumChildren;
 }) {
   const virtuosoHeightsRef = useRef<{ [index: number]: number }>({});
   const virtuosoScroll = useVirtuosoScrollHook({

src/packages/frontend/chat/chatroom.tsx

@@ -5,6 +5,8 @@
 
 import { Button, Divider, Input, Select, Space, Tooltip } from "antd";
 import { debounce } from "lodash";
+import { FormattedMessage } from "react-intl";
+
 import { ButtonGroup, Col, Row, Well } from "@cocalc/frontend/antd-bootstrap";
 import {
   React,
@@ -18,16 +20,15 @@ import { Icon, Loading } from "@cocalc/frontend/components";
 import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
 import { FrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 import { hoursToTimeIntervalHuman } from "@cocalc/util/misc";
-import { FormattedMessage } from "react-intl";
 import type { ChatActions } from "./actions";
-import type { ChatState } from "./store";
 import { ChatLog } from "./chat-log";
+import Filter from "./filter";
 import ChatInput from "./input";
 import { LLMCostEstimationChat } from "./llm-cost-estimation";
+import type { ChatState } from "./store";
 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,
@@ -68,7 +69,7 @@ interface Props {
   project_id: string;
   path: string;
   is_visible?: boolean;
-  font_size: number;
+  fontSize: number;
   desc?;
 }
 
@@ -77,7 +78,7 @@ export function ChatRoom({
   project_id,
   path,
   is_visible,
-  font_size,
+  fontSize,
   desc,
 }: Props) {
   const useEditor = useEditorRedux<ChatState>({ project_id, path });
@@ -285,7 +286,7 @@ export function ChatRoom({
             path={path}
             scrollToBottomRef={scrollToBottomRef}
             mode={"standalone"}
-            fontSize={font_size}
+            fontSize={fontSize}
             search={search}
             filterRecentH={filterRecentH}
             selectedHashtags={selectedHashtags}
@@ -304,7 +305,7 @@ export function ChatRoom({
             }}
           >
             <ChatInput
-              fontSize={font_size}
+              fontSize={fontSize}
               autoFocus
               cacheId={`${path}${project_id}-new`}
               input={input}

src/packages/frontend/chat/llm-cost-estimation.tsx

@@ -7,13 +7,14 @@ import {
   ESTIMATION_HELP_TEXT,
   MODEL_FREE_TO_USE,
 } from "@cocalc/frontend/misc/llm-cost-estimation";
+import type { CostEstimate } from "./types";
 
 export function LLMCostEstimationChat({
   costEstimate,
   compact,
   style,
 }: {
-  costEstimate?: { min: number; max: number } | null;
+  costEstimate?: CostEstimate;
   compact: boolean; // only mean is shown
   style?: CSS;
 }) {

src/packages/frontend/chat/message.tsx

@@ -3,10 +3,13 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+// cSpell:ignore blankcolumn
+
 import { Badge, Button, Col, Popconfirm, Row, Space, Tooltip } from "antd";
 import { List, Map } from "immutable";
 import { CSSProperties, useEffect, useLayoutEffect } from "react";
 import { useIntl } from "react-intl";
+
 import { Avatar } from "@cocalc/frontend/account/avatar/avatar";
 import {
   CSS,
@@ -55,14 +58,14 @@ const BORDER = "2px solid #ccc";
 
 const SHOW_EDIT_BUTTON_MS = 15000;
 
-const TRHEAD_STYLE_SINGLE: CSS = {
+const THREAD_STYLE_SINGLE: CSS = {
   marginLeft: "15px",
   marginRight: "15px",
   paddingLeft: "15px",
 } as const;
 
 const THREAD_STYLE: CSS = {
-  ...TRHEAD_STYLE_SINGLE,
+  ...THREAD_STYLE_SINGLE,
   borderLeft: BORDER,
   borderRight: BORDER,
 } as const;
@@ -102,7 +105,7 @@ interface Props {
   user_map?: Map<string, any>;
   project_id?: string; // improves relative links if given
   path?: string;
-  font_size: number;
+  font_size?: number;
   is_prev_sender?: boolean;
   show_avatar?: boolean;
   mode: Mode;
@@ -395,7 +398,7 @@ export default function Message({
       marginTop = "5px";
     }
 
-    const message_style: CSSProperties = {
+    const messageStyle: CSSProperties = {
       color,
       background,
       wordWrap: "break-word",
@@ -418,7 +421,7 @@ export default function Message({
     const showEditButton = Date.now() - date < SHOW_EDIT_BUTTON_MS;
     const feedback = message.getIn(["feedback", account_id]);
     const otherFeedback =
-      isLLMThread && msgWrittenByLLM ? 0 : (message.get("feedback")?.size ?? 0);
+      isLLMThread && msgWrittenByLLM ? 0 : message.get("feedback")?.size ?? 0;
     const showOtherFeedback = otherFeedback > 0;
 
     const editControlRow = () => {
@@ -563,7 +566,7 @@ export default function Message({
           ) : undefined}
         </div>
         <div
-          style={message_style}
+          style={messageStyle}
           className="smc-chat-message"
           onDoubleClick={edit_message}
         >
@@ -844,7 +847,7 @@ export default function Message({
           return THREAD_STYLE_TOP;
         }
       } else {
-        return TRHEAD_STYLE_SINGLE;
+        return THREAD_STYLE_SINGLE;
       }
     } else if (allowReply) {
       return THREAD_STYLE_BOTTOM;
@@ -945,7 +948,7 @@ export default function Message({
     );
   }
 
-  function getThreadfoldOrBlank() {
+  function getThreadFoldOrBlank() {
     const xs = 2;
     if (is_thread_body || (!is_thread_body && !is_thread)) {
       return BLANK_COLUMN(xs);
@@ -964,7 +967,7 @@ export default function Message({
               width: "100%",
               textAlign: "center",
             };
-      const iconname = is_folded
+      const iconName = is_folded
         ? mode === "standalone"
           ? reverseRowOrdering
             ? "right-circle-o"
@@ -978,7 +981,7 @@ export default function Message({
           onClick={() => actions?.toggleFoldThread(message.get("date"), index)}
           icon={
             <Icon
-              name={iconname}
+              name={iconName}
               style={{ fontSize: mode === "standalone" ? "22px" : "18px" }}
             />
           }
@@ -1027,14 +1030,14 @@ export default function Message({
 
     switch (mode) {
       case "standalone":
-        const cols = [avatar_column(), contentColumn(), getThreadfoldOrBlank()];
+        const cols = [avatar_column(), contentColumn(), getThreadFoldOrBlank()];
         if (reverseRowOrdering) {
           cols.reverse();
         }
         return cols;
 
       case "sidechat":
-        return [getThreadfoldOrBlank(), contentColumn()];
+        return [getThreadFoldOrBlank(), contentColumn()];
 
       default:
         unreachable(mode);

src/packages/frontend/chat/types.ts

@@ -83,3 +83,7 @@ export type SubmitMentionsFn = (
 ) => string;
 
 export type SubmitMentionsRef = MutableRefObject<SubmitMentionsFn | undefined>;
+
+export type NumChildren = { [date: number]: number };
+
+export type CostEstimate = { min: number; max: number } | null;

src/packages/frontend/chat/viewer.tsx

@@ -2,17 +2,19 @@
 Used for viewing a list of messages, e.g., in timetravel.
 */
 
-import { MessageList, getSortedDates } from "./chat-log";
-import { useTypedRedux } from "@cocalc/frontend/app-framework";
-import { useMemo } from "react";
 import { Map as immutableMap } from "immutable";
+import { useMemo } from "react";
+
+import type { Document } from "@cocalc/sync/editor/generic/types";
+import { useTypedRedux } from "@cocalc/frontend/app-framework";
+import { MessageList, getSortedDates } from "./chat-log";
 import type { ChatMessages } from "./types";
 
 export default function Viewer({
   doc,
   font_size,
 }: {
-  doc;
+  doc: Document;
   font_size?: number;
 }) {
   const messages = useMemo<ChatMessages>(() => {

src/packages/frontend/cspell.json

@@ -35,7 +35,9 @@
     "rtypes",
     "rclass",
     "ipython",
-    "Miniterm"
+    "Miniterm",
+    "syncdoc",
+    "synctables"
   ],
   "ignoreWords": [
     "LLMs",
@@ -55,7 +57,8 @@
     "mintime",
     "PoweroffOutlined",
     "immutablejs",
-    "reuseinflight"
+    "reuseinflight",
+    "sidechat"
   ],
   "flagWords": [],
   "ignorePaths": ["node_modules/**", "dist/**", "dist-ts/**", "build/**"],

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

@@ -8,12 +8,13 @@ Top-level react component for editing chat
 */
 
 import { createElement } from "react";
+
 import { ChatRoom } from "@cocalc/frontend/chat/chatroom";
-import { set } from "@cocalc/util/misc";
 import { createEditor } from "@cocalc/frontend/frame-editors/frame-tree/editor";
 import type { EditorDescription } from "@cocalc/frontend/frame-editors/frame-tree/types";
 import { terminal } from "@cocalc/frontend/frame-editors/terminal-editor/editor";
 import { time_travel } from "@cocalc/frontend/frame-editors/time-travel-editor/editor";
+import { set } from "@cocalc/util/misc";
 import { search } from "./search";
 
 const chatroom: EditorDescription = {