chat: massive refactor and make a frame editor -- work in progress

Author: williamstein

src/packages/frontend/chat/actions.ts

@@ -87,11 +87,6 @@ export class ChatActions extends Actions<ChatState> {
     });
   }
 
-  public close(): void {
-    this.syncdb?.close();
-    delete this.syncdb;
-  }
-
   // Initialize the state of the store from the contents of the syncdb.
   public init_from_syncdb(): void {
     if (this.syncdb == null) {
@@ -497,12 +492,6 @@ export class ChatActions extends Actions<ChatState> {
     this.setState({ is_uploading });
   }
 
-  public change_font_size(delta: number): void {
-    if (!this.store) return;
-    const font_size = this.store.get("font_size") + delta;
-    this.setState({ font_size });
-  }
-
   // Scan through all messages and figure out what hashtags are used.
   // Of course, at some point we should try to use efficient algorithms
   // to make this faster incrementally.

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

@@ -51,7 +51,6 @@ export function ChatLog({
   actions,
 }: Props) {
   const messages = useRedux(["messages"], project_id, path) as ChatMessages;
-  const font_size = useRedux(["font_size"], project_id, path);
   const scrollToBottom = useRedux(["scrollToBottom"], project_id, path);
   const llm_cost_reply: [number, number] = useRedux(
     ["llm_cost_reply"],
@@ -148,6 +147,7 @@ export function ChatLog({
     <>
       {visibleHashtags.size > 0 && (
         <HashtagBar
+          style={{ margin: "5px 0" }}
           actions={{
             set_hashtag_state: (tag, state) => {
               actions.setHashtagState(tag, state);
@@ -176,7 +176,7 @@ export function ChatLog({
           user_map,
           project_id,
           path,
-          fontSize: fontSize ?? font_size,
+          fontSize,
           selectedHashtags,
           actions,
           llm_cost_reply,

src/packages/frontend/chat/chatroom.tsx

@@ -15,7 +15,7 @@ import {
   useRef,
   useState,
 } from "@cocalc/frontend/app-framework";
-import { Icon, Loading, Tip, VisibleMDLG } from "@cocalc/frontend/components";
+import { Icon, Loading, Tip } 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";
@@ -69,9 +69,16 @@ interface Props {
   project_id: string;
   path: string;
   is_visible?: boolean;
+  font_size: number;
 }
 
-export function ChatRoom({ actions, project_id, path, is_visible }: Props) {
+export function ChatRoom({
+  actions,
+  project_id,
+  path,
+  is_visible,
+  font_size,
+}: Props) {
   const useEditor = useEditorRedux<ChatState>({ project_id, path });
   const is_uploading = useEditor("is_uploading");
   const is_preview = useEditor("is_preview");
@@ -163,68 +170,22 @@ export function ChatRoom({ actions, project_id, path, is_visible }: Props) {
           placement="left"
         >
           <Icon name="arrow-down" />{" "}
-          <VisibleMDLG>
-            {" "}
-            <FormattedMessage
-              id="chatroom.scroll_bottom.label"
-              defaultMessage={"Newest"}
-            />
-          </VisibleMDLG>
-        </Tip>
-      </Button>
-    );
-  }
-
-  function render_increase_font_size(): JSX.Element {
-    return (
-      <Button onClick={() => actions.change_font_size(1)}>
-        <Tip
-          title="Increase font size"
-          tip={<span>Make the font size larger for chat messages</span>}
-          placement="left"
-        >
-          <Icon name="search-plus" />
-        </Tip>
-      </Button>
-    );
-  }
-
-  function render_decrease_font_size(): JSX.Element {
-    return (
-      <Button onClick={() => actions.change_font_size(-1)}>
-        <Tip
-          title="Decrease font size"
-          tip={<span>Make the font size smaller for chat messages</span>}
-          placement="left"
-        >
-          <Icon name="search-minus" />
+          <FormattedMessage
+            id="chatroom.scroll_bottom.label"
+            defaultMessage={"Newest"}
+          />
         </Tip>
       </Button>
     );
   }
 
-  function render_export_button(): JSX.Element {
-    return (
-      <VisibleMDLG>
-        <Button
-          title={"Export to Markdown"}
-          onClick={() => actions.export_to_markdown()}
-          style={{ marginLeft: "5px" }}
-        >
-          <Icon name="external-link" />
-        </Button>
-      </VisibleMDLG>
-    );
-  }
-
   function render_video_chat_button() {
     if (project_id == null || path == null) return;
     return (
       <VideoChatButton
         project_id={project_id}
         path={path}
         sendChat={(value) => actions.send_chat({ input: value })}
-        label={"Video"}
       />
     );
   }
@@ -324,36 +285,6 @@ export function ChatRoom({ actions, project_id, path, is_visible }: Props) {
     }
     return (
       <Space style={{ width: "100%", marginTop: "3px" }} wrap>
-        <ButtonGroup style={{ marginLeft: "5px" }}>
-          {render_video_chat_button()}
-          {render_bottom_button()}
-        </ButtonGroup>
-        <ButtonGroup style={{ marginLeft: "5px" }}>
-          {render_decrease_font_size()}
-          {render_increase_font_size()}
-        </ButtonGroup>
-        {render_export_button()}
-        {actions.syncdb != null && (
-          <VisibleMDLG>
-            <ButtonGroup style={{ marginLeft: "5px" }}>
-              <Button onClick={() => actions.syncdb?.undo()} title="Undo">
-                <Icon name="undo" />
-              </Button>
-              <Button onClick={() => actions.syncdb?.redo()} title="Redo">
-                <Icon name="redo" />
-              </Button>
-            </ButtonGroup>
-          </VisibleMDLG>
-        )}
-        {actions.help != null && (
-          <Button
-            onClick={() => actions.help()}
-            style={{ marginLeft: "5px" }}
-            title="Documentation"
-          >
-            <Icon name="question-circle" />
-          </Button>
-        )}
         <Filter
           actions={actions}
           search={search}
@@ -366,6 +297,10 @@ export function ChatRoom({ actions, project_id, path, is_visible }: Props) {
           }}
         />
         {renderFilterRecent()}
+        <ButtonGroup style={{ marginLeft: "5px" }}>
+          {render_video_chat_button()}
+          {render_bottom_button()}
+        </ButtonGroup>
       </Space>
     );
   }
@@ -390,6 +325,7 @@ export function ChatRoom({ actions, project_id, path, is_visible }: Props) {
             path={path}
             scrollToBottomRef={scrollToBottomRef}
             mode={"standalone"}
+            fontSize={font_size}
           />
           {render_preview_message()}
         </div>
@@ -401,6 +337,7 @@ export function ChatRoom({ actions, project_id, path, is_visible }: Props) {
             }}
           >
             <ChatInput
+              fontSize={font_size}
               autoFocus
               cacheId={`${path}${project_id}-new`}
               input={input}

src/packages/frontend/chat/input.tsx

@@ -6,12 +6,10 @@
 import { CSSProperties, useEffect, useMemo, useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import { useDebouncedCallback } from "use-debounce";
-
 import {
   CSS,
   redux,
   useIsMountedRef,
-  useRedux,
 } from "@cocalc/frontend/app-framework";
 import MarkdownInput from "@cocalc/frontend/editors/markdown-input/multimode";
 import { IS_MOBILE } from "@cocalc/frontend/feature";
@@ -33,7 +31,7 @@ interface Props {
   on_paste?: (e) => void;
   height?: string;
   submitMentionsRef?: SubmitMentionsRef;
-  font_size?: number;
+  fontSize?: number;
   hideHelp?: boolean;
   style?: CSSProperties;
   cacheId?: string;
@@ -49,7 +47,7 @@ export default function ChatInput({
   cacheId,
   date,
   editBarStyle,
-  font_size,
+  fontSize,
   height,
   hideHelp,
   input: propsInput,
@@ -67,11 +65,7 @@ export default function ChatInput({
   useEffect(() => {
     onSendRef.current = on_send;
   }, [on_send]);
-  const { project_id, path, actions } = useFrameContext();
-  const fontSize = useRedux(["font_size"], project_id, path);
-  if (font_size == null) {
-    font_size = fontSize;
-  }
+  const { project_id, actions } = useFrameContext();
   const sender_id = useMemo(
     () => redux.getStore("account").get_account_id(),
     [],
@@ -248,7 +242,7 @@ export default function ChatInput({
           ? "Click the date to edit chats."
           : "Double click to edit chats."
       }
-      fontSize={font_size}
+      fontSize={fontSize}
       hideHelp={hideHelp}
       style={style}
       onUndo={() => {

src/packages/frontend/chat/message.tsx

@@ -138,6 +138,7 @@ export default function Message(props: Readonly<Props>) {
     messages,
     mode,
     project_id,
+    font_size,
   } = props;
 
   const showAISummarize = redux
@@ -654,6 +655,7 @@ export default function Message(props: Readonly<Props>) {
     return (
       <div>
         <ChatInput
+          fontSize={font_size}
           autoFocus={autoFocusEdit}
           cacheId={`${props.path}${props.project_id}${date}`}
           input={newest_content(message)}
@@ -708,6 +710,7 @@ export default function Message(props: Readonly<Props>) {
     return (
       <div style={{ marginLeft: mode === "standalone" ? "30px" : "0" }}>
         <ChatInput
+          fontSize={font_size}
           autoFocus={autoFocusReply}
           style={{
             borderRadius: "8px",

src/packages/frontend/chat/register.ts

@@ -59,7 +59,7 @@ export function initChat(project_id: string, path: string): string {
 export function remove(path: string, redux, project_id: string): string {
   const name = redux_name(project_id, path);
   const actions = redux.getActions(name);
-  actions?.close();
+  actions?.syncdb.close();
   const store = redux.getStore(name);
   if (store == null) {
     return name;
@@ -71,4 +71,3 @@ export function remove(path: string, redux, project_id: string): string {
   redux.removeActions(name);
   return name;
 }
-

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

@@ -210,6 +210,7 @@ export default function SideChat({ project_id, path, style, fontSize }: Props) {
         ) : undefined}
         <ChatInput
           autoFocus
+          fontSize={fontSize}
           cacheId={`${path}${project_id}-new`}
           input={input}
           on_send={() => {

src/packages/frontend/chat/store.ts

@@ -4,10 +4,9 @@
  */
 
 import { List, fromJS, Map as immutableMap } from "immutable";
-
-import { Store, redux } from "@cocalc/frontend/app-framework";
+import { Store } from "@cocalc/frontend/app-framework";
 import type { HashtagState } from "@cocalc/frontend/editors/task-editor/types";
-import { ChatMessages, MentionList } from "./types";
+import type { ChatMessages, MentionList } from "./types";
 
 export interface ChatState {
   project_id?: string;
@@ -30,7 +29,6 @@ export interface ChatState {
   has_unsaved_changes: boolean;
   unsent_user_mentions: MentionList;
   is_uploading: boolean;
-  font_size: number;
   // whenever this changes and is defined, do a scroll.
   //  scrollToBottom = 0 -- scroll to the bottom
   //  scrollToBottom = ms since epoch -- scroll to the bottom of that thread
@@ -60,7 +58,6 @@ export function getInitialState() {
     has_unsaved_changes: false,
     unsent_user_mentions: List() as any,
     is_uploading: false,
-    font_size: redux.getStore("account").get("font_size"),
     filterRecentH: 0,
   };
 }

src/packages/frontend/chat/video/launch-button.tsx

@@ -131,10 +131,10 @@ export default function VideoChatButton({
     <Popconfirm
       onOpenChange={setOpen}
       title={`${
-        num_users_chatting ? "Join the current" : "Start a new"
-      } video chat session about this document?`}
+        num_users_chatting ? "Join the current" : "Launch "
+      } video chat?`}
       onConfirm={click_video_button}
-      okText={`${num_users_chatting ? "Join" : "Start"} video chat`}
+      okText={`${num_users_chatting ? "Join" : "Launch"} video chat`}
       cancelText={<CancelText />}
     >
       {open ? (

src/packages/frontend/editors/slate/editable-markdown.tsx

@@ -164,7 +164,7 @@ export const EditableMarkdown: React.FC<Props> = React.memo((props: Props) => {
   const isMountedRef = useIsMountedRef();
   const id = id0 ?? "";
   const actions = actions0 ?? {};
-  const font_size = font_size0 ?? desc.get("font_size") ?? 14; // so possible to use without specifying this.  TODO: should be from account settings
+  const font_size = font_size0 ?? desc?.get("font_size") ?? 14; // so possible to use without specifying this.  TODO: should be from account settings
   const [change, setChange] = useState<number>(0);
 
   const editor = useMemo(() => {