Merge branch 'master' into fs2

Author: williamstein

src/packages/frontend/app/context.tsx

@@ -96,9 +96,12 @@ export function useAntdStyleProvider() {
 
   const algorithm = compact ? { algorithm: theme.compactAlgorithm } : undefined;
 
+  const textColors = { colorTextDescription: COLORS.GRAY_DD };
+
   const antdTheme: ThemeConfig = {
     ...algorithm,
     token: {
+      ...textColors,
       ...brandedColors,
       ...borderStyle,
       ...animationStyle,

src/packages/frontend/chat/README.md

@@ -16,7 +16,7 @@ Note: There are a couple of ways to represent a time in Javascript:
 
 The data structures for chat have somehow evolved since that
 crazy Sage Days by the Ocean in WA to use all of these at once, which is
-confusing and annoying.  Be careful!
+confusing and annoying. Be careful!
 
 ## Overview
 

src/packages/frontend/chat/actions.ts

@@ -168,13 +168,18 @@ export class ChatActions extends Actions<ChatState> {
     tag,
     noNotification,
     submitMentionsRef,
+    extraInput,
+    name,
   }: {
     input?: string;
     sender_id?: string;
     reply_to?: Date;
     tag?: string;
     noNotification?: boolean;
     submitMentionsRef?;
+    extraInput?: string;
+    // if name is given, rename thread to have that name
+    name?: string;
   }): string => {
     if (this.syncdb == null || this.store == null) {
       console.warn("attempt to sendChat before chat actions initialized");
@@ -186,11 +191,15 @@ export class ChatActions extends Actions<ChatState> {
     if (submitMentionsRef?.current != null) {
       input = submitMentionsRef.current?.({ chat: `${time_stamp.valueOf()}` });
     }
+    if (extraInput) {
+      input = (input ?? "") + extraInput;
+    }
     input = input?.trim();
     if (!input) {
       // do not send when there is nothing to send.
       return "";
     }
+    const trimmedName = name?.trim();
     const message: ChatMessage = {
       sender_id,
       event: "chat",
@@ -205,7 +214,12 @@ export class ChatActions extends Actions<ChatState> {
       reply_to: reply_to?.toISOString(),
       editing: {},
     };
+    if (trimmedName && !reply_to) {
+      (message as any).name = trimmedName;
+    }
     this.syncdb.set(message);
+    const messagesState = this.store.get("messages");
+    let selectedThreadKey: string;
     if (!reply_to) {
       this.deleteDraft(0);
       // NOTE: we also clear search, since it's confusing to send a message and not
@@ -214,17 +228,29 @@ export class ChatActions extends Actions<ChatState> {
       // Also, only do this clearing when not replying.
       // For replies search find full threads not individual messages.
       this.clearAllFilters();
+      selectedThreadKey = `${time_stamp.valueOf()}`;
     } else {
       // when replying we make sure that the thread is expanded, since otherwise
       // our reply won't be visible
-      const messages = this.store.get("messages");
       if (
-        messages
+        messagesState
           ?.getIn([`${reply_to.valueOf()}`, "folding"])
           ?.includes(sender_id)
       ) {
         this.toggleFoldThread(reply_to);
       }
+      const root =
+        getThreadRootDate({
+          date: reply_to.valueOf(),
+          messages: messagesState,
+        }) ?? reply_to.valueOf();
+      selectedThreadKey = `${root}`;
+    }
+    if (selectedThreadKey != "0") {
+      this.setSelectedThread(selectedThreadKey);
+    }
+    if (trimmedName && reply_to) {
+      this.renameThread(selectedThreadKey, trimmedName);
     }
 
     const project_id = this.store?.get("project_id");
@@ -481,6 +507,127 @@ export class ChatActions extends Actions<ChatState> {
     });
   };
 
+  // returns number of deleted messages
+  // threadKey = iso timestamp root of thread.
+  deleteThread = (threadKey: string): number => {
+    if (this.syncdb == null || this.store == null) {
+      return 0;
+    }
+    const messages = this.store.get("messages");
+    if (messages == null) {
+      return 0;
+    }
+    const rootTarget = parseInt(`${threadKey}`);
+    if (!isFinite(rootTarget)) {
+      return 0;
+    }
+    let deleted = 0;
+    for (const [_, message] of messages) {
+      if (message == null) continue;
+      const dateField = message.get("date");
+      let dateValue: number | undefined;
+      let dateIso: string | undefined;
+      if (dateField instanceof Date) {
+        dateValue = dateField.valueOf();
+        dateIso = dateField.toISOString();
+      } else if (typeof dateField === "number") {
+        dateValue = dateField;
+        dateIso = new Date(dateField).toISOString();
+      } else if (typeof dateField === "string") {
+        const t = Date.parse(dateField);
+        dateValue = isNaN(t) ? undefined : t;
+        dateIso = dateField;
+      }
+      if (dateValue == null || dateIso == null) {
+        continue;
+      }
+      const rootDate =
+        getThreadRootDate({ date: dateValue, messages }) || dateValue;
+      if (rootDate !== rootTarget) {
+        continue;
+      }
+      this.syncdb.delete({ event: "chat", date: dateIso });
+      deleted++;
+    }
+    if (deleted > 0) {
+      this.syncdb.commit();
+    }
+    return deleted;
+  };
+
+  renameThread = (threadKey: string, name: string): boolean => {
+    if (this.syncdb == null) {
+      return false;
+    }
+    const entry = this.getThreadRootDoc(threadKey);
+    if (entry == null) {
+      return false;
+    }
+    const trimmed = name.trim();
+    if (trimmed) {
+      entry.doc.name = trimmed;
+    } else {
+      delete entry.doc.name;
+    }
+    this.syncdb.set(entry.doc);
+    this.syncdb.commit();
+    return true;
+  };
+
+  markThreadRead = (threadKey: string, count: number): boolean => {
+    if (this.syncdb == null) {
+      return false;
+    }
+    const account_id = this.redux.getStore("account").get_account_id();
+    if (!account_id || !Number.isFinite(count)) {
+      return false;
+    }
+    const entry = this.getThreadRootDoc(threadKey);
+    if (entry == null) {
+      return false;
+    }
+    entry.doc[`read-${account_id}`] = count;
+    this.syncdb.set(entry.doc);
+    this.syncdb.commit();
+    return true;
+  };
+
+  private getThreadRootDoc = (
+    threadKey: string,
+  ): { doc: any; message: ChatMessageTyped } | null => {
+    if (this.store == null) {
+      return null;
+    }
+    const messages = this.store.get("messages");
+    if (messages == null) {
+      return null;
+    }
+    const normalizedKey = toMsString(threadKey);
+    const fallbackKey = `${parseInt(threadKey, 10)}`;
+    const candidates = [normalizedKey, threadKey, fallbackKey];
+    let message: ChatMessageTyped | undefined;
+    for (const key of candidates) {
+      if (!key) continue;
+      message = messages.get(key);
+      if (message != null) break;
+    }
+    if (message == null) {
+      return null;
+    }
+    const dateField = message.get("date");
+    const dateIso =
+      dateField instanceof Date
+        ? dateField.toISOString()
+        : typeof dateField === "string"
+          ? dateField
+          : new Date(dateField).toISOString();
+    if (!dateIso) {
+      return null;
+    }
+    const doc = { ...message.toJS(), date: dateIso };
+    return { doc, message };
+  };
+
   save_scroll_state = (position, height, offset): void => {
     if (height == 0) {
       // height == 0 means chat room is not rendered
@@ -1104,13 +1251,15 @@ export class ChatActions extends Actions<ChatState> {
   };
 
   setFragment = (date?) => {
+    let fragmentId;
     if (!date) {
       Fragment.clear();
+      fragmentId = "";
     } else {
-      const fragmentId = toMsString(date);
+      fragmentId = toMsString(date);
       Fragment.set({ chat: fragmentId });
-      this.frameTreeActions?.set_frame_data({ id: this.frameId, fragmentId });
     }
+    this.frameTreeActions?.set_frame_data({ id: this.frameId, fragmentId });
   };
 
   setShowPreview = (showPreview) => {
@@ -1119,6 +1268,14 @@ export class ChatActions extends Actions<ChatState> {
       showPreview,
     });
   };
+
+  setSelectedThread = (threadKey: string | null) => {
+    console.log("setSelectedThread", { threadKey });
+    this.frameTreeActions?.set_frame_data({
+      id: this.frameId,
+      selectedThreadKey: threadKey,
+    });
+  };
 }
 
 // We strip out any cased version of the string @chatgpt and also all mentions.

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

@@ -55,6 +55,7 @@ interface Props {
   filterRecentH?;
   selectedHashtags;
   disableFilters?: boolean;
+  selectedThread?: string;
   scrollToIndex?: null | number | undefined;
   // scrollToDate = string ms from epoch
   scrollToDate?: null | undefined | string;
@@ -74,12 +75,32 @@ export function ChatLog({
   filterRecentH,
   selectedHashtags: selectedHashtags0,
   disableFilters,
+  selectedThread,
   scrollToIndex,
   scrollToDate,
   selectedDate,
   costEstimate,
 }: Props) {
-  const messages = useRedux(["messages"], project_id, path) as ChatMessages;
+  const storeMessages = useRedux(
+    ["messages"],
+    project_id,
+    path,
+  ) as ChatMessages;
+  const singleThreadView = selectedThread != null;
+  const messages = useMemo(() => {
+    if (!selectedThread || storeMessages == null) {
+      return storeMessages;
+    }
+    return storeMessages.filter((message) => {
+      if (message == null) return false;
+      const replyTo = message.get("reply_to");
+      if (replyTo != null) {
+        return `${new Date(replyTo).valueOf()}` === selectedThread;
+      }
+      const dateValue = message.get("date")?.valueOf();
+      return dateValue != null ? `${dateValue}` === selectedThread : false;
+    }) as ChatMessages;
+  }, [storeMessages, selectedThread]);
   // see similar code in task list:
   const { selectedHashtags, selectedHashtagsSearch } = useMemo(() => {
     return getSelectedHashtagsSearch(selectedHashtags0);
@@ -102,6 +123,7 @@ export function ChatLog({
       search,
       account_id!,
       filterRecentH,
+      singleThreadView,
     );
     // TODO: This is an ugly hack because I'm tired and need to finish this.
     // The right solution would be to move this filtering to the store.
@@ -114,7 +136,7 @@ export function ChatLog({
       );
     }, 1);
     return { dates, numFolded, numChildren };
-  }, [messages, search, project_id, path, filterRecentH]);
+  }, [messages, search, project_id, path, filterRecentH, singleThreadView]);
 
   useEffect(() => {
     scrollToBottomRef?.current?.(true);
@@ -254,6 +276,7 @@ export function ChatLog({
           mode,
           selectedDate,
           numChildren,
+          singleThreadView,
         }}
       />
       <Composing
@@ -330,6 +353,7 @@ export function getSortedDates(
   search: string | undefined,
   account_id: string,
   filterRecentH?: number,
+  disableFolding?: boolean,
 ): {
   dates: string[];
   numFolded: number;
@@ -365,7 +389,7 @@ export function getSortedDates(
     if (message == null) continue;
 
     // If we search for a message, we treat all threads as unfolded
-    if (!search) {
+    if (!disableFolding && !search) {
       const is_thread = isThread(message, numChildren);
       const is_folded = is_thread && isFolded(messages, message, account_id);
       const is_thread_body = is_thread && message.get("reply_to") != null;
@@ -494,6 +518,7 @@ export function MessageList({
   mode,
   selectedDate,
   numChildren,
+  singleThreadView,
 }: {
   messages: ChatMessages;
   account_id: string;
@@ -510,6 +535,7 @@ export function MessageList({
   manualScrollRef?;
   selectedDate?: string;
   numChildren?: NumChildren;
+  singleThreadView?: boolean;
 }) {
   const virtuosoHeightsRef = useRef<{ [index: number]: number }>({});
   const virtuosoScroll = useVirtuosoScrollHook({
@@ -546,7 +572,10 @@ export function MessageList({
         const is_thread = numChildren != null && isThread(message, numChildren);
         // optimization: only threads can be folded, so don't waste time
         // checking on folding state if it isn't a thread.
-        const is_folded = is_thread && isFolded(messages, message, account_id);
+        const is_folded =
+          !singleThreadView &&
+          is_thread &&
+          isFolded(messages, message, account_id);
         const is_thread_body = is_thread && message.get("reply_to") != null;
         const h = virtuosoHeightsRef.current?.[index];
 
@@ -594,9 +623,11 @@ export function MessageList({
                     : undefined
                 }
                 allowReply={
+                  !singleThreadView &&
                   messages.getIn([sortedDates[index + 1], "reply_to"]) == null
                 }
                 costEstimate={costEstimate}
+                threadViewMode={singleThreadView}
               />
             </DivTempHeight>
           </div>