chat frame tree: got it mostly working with independent filter state per frame

Author: williamstein

src/packages/frontend/chat/actions.ts

@@ -64,6 +64,8 @@ export class ChatActions extends Actions<ChatState> {
   // at once and it really did send them all to openai at once, and
   // this prevents that at least.
   private chatStreams: Set<string> = new Set([]);
+  public frameId: string = "";
+  public frameTreeActions;
 
   set_syncdb = (syncdb: SyncDB, store: ChatStore): void => {
     this.syncdb = syncdb;
@@ -527,13 +529,13 @@ export class ChatActions extends Actions<ChatState> {
     if (!this.store) return;
     // similar code in task list.
     let selectedHashtags: SelectedHashtags =
-      this.store.get("selectedHashtags") ??
+      this.frameTreeActions._get_frame_data(this.frameId, "selectedHashtags") ??
       immutableMap<string, HashtagState>();
     selectedHashtags =
       state == null
         ? selectedHashtags.delete(tag)
         : selectedHashtags.set(tag, state);
-    this.setState({ selectedHashtags });
+    this.setSelectedHashtags(selectedHashtags);
   };
 
   help = () => {
@@ -1028,10 +1030,27 @@ export class ChatActions extends Actions<ChatState> {
   };
 
   clearAllFilters = () => {
-    this.setState({
-      search: "",
-      selectedHashtags: immutableMap(),
-      filterRecentH: 0,
+    if (this.frameTreeActions == null) {
+      // crappy code just for sage worksheets -- will go away.
+      return;
+    }
+    this.setSearch("");
+    this.setFilterRecentH(0);
+    this.setSelectedHashtags({});
+  };
+
+  setSearch = (search) => {
+    this.frameTreeActions.set_frame_data({ id: this.frameId, search });
+  };
+
+  setFilterRecentH = (filterRecentH) => {
+    this.frameTreeActions.set_frame_data({ id: this.frameId, filterRecentH });
+  };
+
+  setSelectedHashtags = (selectedHashtags) => {
+    this.frameTreeActions.set_frame_data({
+      id: this.frameId,
+      selectedHashtags,
     });
   };
 }

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

@@ -39,6 +39,10 @@ interface Props {
   setLastVisible?: (x: Date | null) => void;
   fontSize?: number;
   actions: ChatActions;
+  search;
+  filterRecentH?;
+  selectedHashtags;
+  disableFilters?: boolean;
 }
 
 export function ChatLog({
@@ -49,6 +53,10 @@ export function ChatLog({
   setLastVisible,
   fontSize,
   actions,
+  search: search0,
+  filterRecentH,
+  selectedHashtags: selectedHashtags0,
+  disableFilters,
 }: Props) {
   const messages = useRedux(["messages"], project_id, path) as ChatMessages;
   const scrollToBottom = useRedux(["scrollToBottom"], project_id, path);
@@ -59,13 +67,10 @@ export function ChatLog({
   );
 
   // see similar code in task list:
-  const selectedHashtags0 = useRedux(["selectedHashtags"], project_id, path);
   const { selectedHashtags, selectedHashtagsSearch } = useMemo(() => {
     return getSelectedHashtagsSearch(selectedHashtags0);
   }, [selectedHashtags0]);
-
-  const search =
-    useRedux(["search"], project_id, path) + selectedHashtagsSearch;
+  const search = search0 + " " + selectedHashtagsSearch;
 
   useEffect(() => {
     scrollToBottomRef?.current?.(true);
@@ -82,7 +87,6 @@ export function ChatLog({
     actions.setState({ scrollToBottom: undefined });
   }, [scrollToBottom]);
 
-  const filterRecentH = useRedux(["filterRecentH"], project_id, path);
   const user_map = useTypedRedux("users", "user_map");
   const account_id = useTypedRedux("account", "account_id");
   const { dates: sortedDates, numFolded } = useMemo<{
@@ -110,6 +114,9 @@ export function ChatLog({
 
   const visibleHashtags = useMemo(() => {
     let X = immutableSet<string>([]);
+    if (disableFilters) {
+      return X;
+    }
     for (const date of sortedDates) {
       const message = messages.get(date);
       const value = newest_content(message);

src/packages/frontend/chat/chatroom.tsx

@@ -70,6 +70,7 @@ interface Props {
   path: string;
   is_visible?: boolean;
   font_size: number;
+  desc;
 }
 
 export function ChatRoom({
@@ -78,16 +79,19 @@ export function ChatRoom({
   path,
   is_visible,
   font_size,
+  desc,
 }: Props) {
   const useEditor = useEditorRedux<ChatState>({ project_id, path });
   const is_uploading = useEditor("is_uploading");
   const is_preview = useEditor("is_preview");
   const input: string = useEditor("input");
   const [preview] = useDebounce(input, 250);
 
-  const search = useEditor("search");
+  const search = desc.get("data-search") ?? "";
+  const filterRecentH: number = desc.get("data-filterRecentH") ?? 0;
+  const selectedHashtags = desc.get("data-selectedHashtags");
+
   const messages = useEditor("messages");
-  const filterRecentH: number = useEditor("filterRecentH");
   const [filterRecentHCustom, setFilterRecentHCustom] = useState<string>("");
   const [filterRecentOpen, setFilterRecentOpen] = useState<boolean>(false);
   const llm_cost_room = useEditor("llm_cost_room");
@@ -205,12 +209,12 @@ export function ChatRoom({
           status={filterRecentH > 0 ? "warning" : undefined}
           allowClear
           onClear={() => {
-            actions.setState({ filterRecentH: 0 });
+            actions.setFilterRecentH(0);
             setFilterRecentHCustom("");
           }}
           style={{ width: 120 }}
           popupMatchSelectWidth={false}
-          onSelect={(val: number) => actions.setState({ filterRecentH: val })}
+          onSelect={(val: number) => actions.setFilterRecentH(val)}
           options={[
             FILTER_RECENT_NONE,
             ...[1, 6, 12, 24, 48, 24 * 7, 14 * 24, 28 * 24].map((value) => {
@@ -258,11 +262,9 @@ export function ChatRoom({
                     setFilterRecentHCustom(v);
                     const val = parseFloat(v);
                     if (isFinite(val) && val >= 0) {
-                      actions.setState({ filterRecentH: val });
+                      actions.setFilterRecentH(val);
                     } else if (v == "") {
-                      actions.setState({
-                        filterRecentH: FILTER_RECENT_NONE.value,
-                      });
+                      actions.setFilterRecentH(FILTER_RECENT_NONE.value);
                     }
                   },
                   150,
@@ -326,6 +328,9 @@ export function ChatRoom({
             scrollToBottomRef={scrollToBottomRef}
             mode={"standalone"}
             fontSize={font_size}
+            search={search}
+            filterRecentH={filterRecentH}
+            selectedHashtags={selectedHashtags}
           />
           {render_preview_message()}
         </div>

src/packages/frontend/chat/filter.tsx

@@ -1,21 +1,16 @@
 import { Input, Tooltip } from "antd";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { 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, {
+      debounce(actions.setSearch, 200, {
         leading: false,
         trailing: true,
       }),
@@ -41,11 +36,11 @@ export default function Filter({ actions, search, style }) {
         }}
         onPressEnter={() => {
           debouncedSearch.cancel();
-          doSearch(value);
+          actions.setSearch(value);
         }}
         onSearch={() => {
           debouncedSearch.cancel();
-          doSearch(value);
+          actions.setSearch(value);
         }}
       />
     </Tooltip>

src/packages/frontend/chat/message.tsx

@@ -747,7 +747,7 @@ export default function Message(props: Readonly<Props>) {
             }}
             type="primary"
           >
-            <Icon name="paper-plane" /> Send Reply
+            <Icon name="reply" /> Reply (shift+enter)
           </Button>
           <LLMCostEstimationChat
             llm_cost={llm_cost_reply}

src/packages/frontend/chat/register.ts

@@ -11,10 +11,10 @@ import { ChatActions } from "./actions";
 import { ChatStore } from "./store";
 
 // it is fine to call this more than once.
-export function initChat(project_id: string, path: string): string {
+export function initChat(project_id: string, path: string): ChatActions {
   const name = redux_name(project_id, path);
   if (redux.getActions(name) != null) {
-    return name; // already initialized
+    return redux.getActions(name); // already initialized
   }
 
   const actions = redux.createActions(name, ChatActions);
@@ -53,13 +53,13 @@ export function initChat(project_id: string, path: string): string {
     redux.getProjectActions(project_id)?.log_opened_time(path);
   });
 
-  return name;
+  return actions;
 }
 
 export function remove(path: string, redux, project_id: string): string {
   const name = redux_name(project_id, path);
   const actions = redux.getActions(name);
-  actions?.syncdb.close();
+  actions?.syncdb?.close();
   const store = redux.getStore(name);
   if (store == null) {
     return name;

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

@@ -26,14 +26,28 @@ interface Props {
   path: string;
   style?: CSSProperties;
   fontSize?: number;
+  actions?: ChatActions;
+  desc?;
 }
 
-export default function SideChat({ project_id, path, style, fontSize }: Props) {
-  const actions: ChatActions = useActions(project_id, path);
+export default function SideChat({
+  actions: actions0,
+  project_id,
+  path,
+  style,
+  fontSize,
+  desc,
+}: Props) {
+  // This actionsViaContext via useActions is ONLY needed for side chat for non-frame
+  // editors, i.e., basically just Sage Worksheets!
+  const actionsViaContext = useActions(project_id, path);
+  const actions: ChatActions = actions0 ?? actionsViaContext;
+  const disableFilters = actions0 == null;
   const messages = useRedux(["messages"], project_id, path);
   const [lastVisible, setLastVisible] = useState<Date | null>(null);
   const input: string = useRedux(["input"], project_id, path);
-  const search: string = useRedux(["search"], project_id, path);
+  const search = desc?.get("data-search") ?? "";
+  const selectedHashtags = desc?.get("data-selectedHashtags");
   const addCollab: boolean = useRedux(["add_collab"], project_id, path);
   const is_uploading = useRedux(["is_uploading"], project_id, path);
   const project_map = useTypedRedux("projects", "project_map");
@@ -142,16 +156,18 @@ export default function SideChat({ project_id, path, style, fontSize }: Props) {
           <AddChatCollab addCollab={addCollab} project_id={project_id} />
         </div>
       )}
-      <Filter
-        actions={actions}
-        search={search}
-        style={{
-          margin: 0,
-          ...(messages.size >= 2
-            ? undefined
-            : { visibility: "hidden", height: 0 }),
-        }}
-      />
+      {!disableFilters && (
+        <Filter
+          actions={actions}
+          search={search}
+          style={{
+            margin: 0,
+            ...(messages.size >= 2
+              ? undefined
+              : { visibility: "hidden", height: 0 }),
+          }}
+        />
+      )}
       <div
         className="smc-vfill"
         style={{
@@ -169,6 +185,9 @@ export default function SideChat({ project_id, path, style, fontSize }: Props) {
           scrollToBottomRef={scrollToBottomRef}
           mode={"sidechat"}
           setLastVisible={setLastVisible}
+          search={search}
+          selectedHashtags={selectedHashtags}
+          disableFilters={disableFilters}
         />
       </div>
 
@@ -184,7 +203,7 @@ export default function SideChat({ project_id, path, style, fontSize }: Props) {
                       sendChat({ reply_to: new Date(lastVisible) });
                     }}
                   >
-                    Reply (shift+enter)
+                    <Icon name="reply" /> Reply (shift+enter)
                   </Button>
                 )}
                 <Button
@@ -197,7 +216,7 @@ export default function SideChat({ project_id, path, style, fontSize }: Props) {
                   disabled={!input?.trim() || is_uploading}
                 >
                   <Icon name="paper-plane" />
-                  Start New Conversation
+                  Start New Thread
                 </Button>
               </Space>
             </Tooltip>

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

@@ -65,6 +65,8 @@ export class Actions extends CodeEditorActions<ChatEditorState> {
     const actions = this.redux.createActions(reduxName, ChatActions);
     // our store is not exactly a ChatStore but it's close enough
     actions.set_syncdb(syncdb, this.store as ChatStore);
+    actions.frameId = frameId;
+    actions.frameTreeActions = this;
     this.chatActions[frameId] = actions;
     return actions;
   }