fix #4392 -- font size of text in the popup margin notes in the latex

- also use markdown usually for showing LLM prompt details...

Author: williamstein

src/packages/frontend/components/raw-prompt.tsx

@@ -1,35 +1,45 @@
 import { CSS } from "@cocalc/frontend/app-framework";
 import { useBottomScroller } from "@cocalc/frontend/app-framework/use-bottom-scroller";
-import { Paragraph } from "@cocalc/frontend/components";
 import { COLORS } from "@cocalc/util/theme";
+import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
+import { Paragraph } from "@cocalc/frontend/components";
+
+const STYLE = {
+  border: "1px solid lightgrey",
+  borderRadius: "5px",
+  margin: "5px 0",
+  padding: "10px",
+  overflowY: "auto",
+  maxHeight: "150px",
+  fontSize: "85%",
+  fontFamily: "monospace",
+  whiteSpace: "pre-wrap",
+  color: COLORS.GRAY_M,
+} as const;
 
 interface Props {
   input: JSX.Element | string;
   style?: CSS;
   scrollBottom?: boolean;
 }
 
-export function RawPrompt({ input, style, scrollBottom = false }: Props) {
+export function RawPrompt({
+  input,
+  style: style0,
+  scrollBottom = false,
+}: Props) {
   const ref = useBottomScroller(scrollBottom, input);
-
-  return (
-    <Paragraph
-      ref={ref}
-      style={{
-        border: "1px solid lightgrey",
-        borderRadius: "5px",
-        margin: "5px 0",
-        padding: "10px",
-        overflowY: "auto",
-        maxHeight: "150px",
-        fontSize: "85%",
-        fontFamily: "monospace",
-        whiteSpace: "pre-wrap",
-        color: COLORS.GRAY_M,
-        ...style,
-      }}
-    >
-      {input}
-    </Paragraph>
-  );
+  const style = { ...STYLE, ...style0 };
+  if (typeof input == "string") {
+    // this looks so much nicer; I realize it doesn't implement scrollBottom.
+    // But just dropping the input as plain text like below just seems 
+    // utterly broken!
+    return <StaticMarkdown style={style} value={input} />;
+  } else {
+    return (
+      <Paragraph ref={ref} style={style}>
+        {input}
+      </Paragraph>
+    );
+  }
 }

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

@@ -1374,8 +1374,7 @@ export class Actions<
       // to make typescript happy
       return;
     }
-    this.set_frame_tree({ id, font_size });
-    this.focus(id);
+    this.set_font_size(id, font_size);
   }
 
   increase_font_size(id: string): void {
@@ -1386,6 +1385,9 @@ export class Actions<
     this.change_font_size(-1, id);
   }
 
+  // ATTN: this is overloaded in some derived classes, eg. latex to adjust settings
+  // based on font size changing. Code should call this to set the font size instead
+  // of directly modifying frame tree.
   set_font_size(id: string, font_size: number): void {
     this.set_frame_tree({ id, font_size });
     this.focus(id);

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

@@ -1597,4 +1597,9 @@ export class Actions extends BaseActions<LatexEditorState> {
   chatgptCodeDescription(): string {
     return "Put any LaTeX you generate in the answer in a fenced code block with info string 'tex'.";
   }
+
+  set_font_size(id: string, font_size: number): void {
+    super.set_font_size(id, font_size);
+    this.update_gutters_soon();
+  }
 }

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

@@ -14,7 +14,6 @@ import { CodemirrorEditor } from "../code-editor/codemirror-editor";
 import { createEditor } from "../frame-tree/editor";
 import { EditorDescription } from "../frame-tree/types";
 import { TableOfContents } from "../markdown-editor/table-of-contents";
-//import { SETTINGS_SPEC } from "../settings/editor";
 import { terminal } from "../terminal-editor/editor";
 import { time_travel } from "../time-travel-editor/editor";
 import { Build } from "./build";

src/packages/frontend/frame-editors/latex-editor/gutters.tsx

@@ -9,15 +9,14 @@
 // one gets a gutter mark, with pref to errors.  The main error log shows everything, so this should be OK.
 
 import { Popover } from "antd";
-
 import { Icon } from "@cocalc/frontend/components";
-//import { Actions } from "@cocalc/frontend/frame-editors/code-editor/actions";
 import { Localize } from "@cocalc/frontend/app/localize";
 import HelpMeFix from "@cocalc/frontend/frame-editors/llm/help-me-fix";
 import { capitalize } from "@cocalc/util/misc";
-import { Actions } from "./actions";
+import type { Actions } from "./actions";
 import { SPEC, SpecItem } from "./errors-and-warnings";
 import { Error, IProcessedLatexLog } from "./latex-log-parser";
+import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 
 export function update_gutters(opts: {
   log: IProcessedLatexLog;
@@ -36,27 +35,36 @@ export function update_gutters(opts: {
       opts.set_gutter(
         item.file,
         item.line - 1,
-        component(
-          item.level,
-          item.message,
-          item.content,
-          opts.actions,
-          group,
-          item.line,
-        ),
+        <Component
+          level={item.level}
+          message={item.message}
+          content={item.content}
+          actions={opts.actions}
+          group={group}
+          line={item.line}
+        />,
       );
     }
   }
 }
 
-function component(
-  level: string,
-  message: string,
-  content: string | undefined,
-  actions: Actions,
-  group: string,
-  line: number,
-) {
+function Component({
+  level,
+  message,
+  content,
+  actions,
+  group,
+  line,
+}: {
+  level: string;
+  message: string;
+  content: string | undefined;
+  actions: Actions;
+  group: string;
+  line: number;
+}) {
+  const { desc } = useFrameContext();
+  const fontSize = desc?.get("font_size");
   const spec: SpecItem = SPEC[level];
   if (content === undefined) {
     content = message;
@@ -69,10 +77,9 @@ function component(
   return (
     <Localize>
       <Popover
-        title={message}
-        content={
-          <div>
-            {content}
+        title={
+          <span style={{ fontSize }}>
+            {message}{" "}
             {group == "errors" && (
               <>
                 <br />
@@ -97,14 +104,26 @@ function component(
                 />
               </>
             )}
+          </span>
+        }
+        content={
+          <div
+            style={{
+              fontSize,
+              maxWidth: "70vw",
+              maxHeight: "70vh",
+              overflow: "auto",
+            }}
+          >
+            {content}
           </div>
         }
         placement={"right"}
         mouseEnterDelay={0}
       >
         <Icon
           name={spec.icon}
-          style={{ color: spec.color, cursor: "pointer" }}
+          style={{ color: spec.color, cursor: "pointer", fontSize }}
         />
       </Popover>
     </Localize>

src/packages/frontend/frame-editors/llm/help-me-fix.tsx

@@ -7,7 +7,6 @@ import { Alert, Button, Space } from "antd";
 import type { BaseButtonProps } from "antd/lib/button/button";
 import { CSSProperties, useState } from "react";
 import useAsyncEffect from "use-async-effect";
-
 import { useLanguageModelSetting } from "@cocalc/frontend/account/useLanguageModelSetting";
 import getChatActions from "@cocalc/frontend/chat/get-actions";
 import { AIAvatar, RawPrompt } from "@cocalc/frontend/components";