frontend/latex/gutter+ai_formula: fix context, use Localize context + locale, followup of #7877

Author: haraldschilly

src/packages/frontend/codemirror/extensions/ai-formula.tsx

@@ -9,6 +9,7 @@ import {
   useState,
   useTypedRedux,
 } from "@cocalc/frontend/app-framework";
+import { Localize, useLocalizationCtx } from "@cocalc/frontend/app/localize";
 import type { Message } from "@cocalc/frontend/client/types";
 import {
   HelpIcon,
@@ -27,6 +28,7 @@ import track from "@cocalc/frontend/user-tracking";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { isFreeModel } from "@cocalc/util/db-schema/llm-utils";
 import { unreachable } from "@cocalc/util/misc";
+import { Locale } from "@cocalc/util/i18n";
 
 type Mode = "tex" | "md";
 
@@ -36,23 +38,34 @@ interface Opts {
   mode: Mode;
   text?: string;
   project_id: string;
+  locale?: Locale;
 }
 
 export async function ai_gen_formula({
   mode,
   text = "",
   project_id,
+  locale,
 }: Opts): Promise<string> {
   return await show_react_modal((cb) => (
-    <AiGenFormula mode={mode} text={text} project_id={project_id} cb={cb} />
+    <Localize>
+      <AiGenFormula
+        mode={mode}
+        text={text}
+        project_id={project_id}
+        locale={locale}
+        cb={cb}
+      />
+    </Localize>
   ));
 }
 
 interface Props extends Opts {
   cb: (err?: string, result?: string) => void;
 }
 
-function AiGenFormula({ mode, text = "", project_id, cb }: Props) {
+function AiGenFormula({ mode, text = "", project_id, locale, cb }: Props) {
+  const { setLocale } = useLocalizationCtx();
   const is_cocalc_com = useTypedRedux("customize", "is_cocalc_com");
   const [model, setModel] = useLanguageModelSetting(project_id);
   const [input, setInput] = useState<string>(text);
@@ -62,6 +75,12 @@ function AiGenFormula({ mode, text = "", project_id, cb }: Props) {
   const [error, setError] = useState<string | undefined>(undefined);
   const [tokens, setTokens] = useState<number>(0);
 
+  useEffect(() => {
+    if (typeof locale === "string") {
+      setLocale(locale);
+    }
+  }, [locale]);
+
   useAsyncEffect(
     debounce(
       async () => {

src/packages/frontend/codemirror/extensions/edit-selection.ts

@@ -5,10 +5,12 @@
 
 import * as CodeMirror from "codemirror";
 
+import { redux } from "@cocalc/frontend/app-framework";
 import {
   commands as EDIT_COMMANDS,
   FONT_FACES,
 } from "@cocalc/frontend/editors/editor-button-bar";
+import { getLocale } from "@cocalc/frontend/i18n";
 import { markdown_to_html } from "@cocalc/frontend/markdown";
 import { open_new_tab, sagews_canonical_mode } from "@cocalc/frontend/misc";
 import { defaults, required, startswith } from "@cocalc/util/misc";
@@ -369,7 +371,15 @@ CodeMirror.defineExtension(
 
         case "ai_formula":
           if (project_id != null) {
-            src = await ai_gen_formula({ mode, text: src, project_id });
+            const account_store = redux.getStore("account");
+            const locale = getLocale(account_store.get("other_settings"));
+
+            src = await ai_gen_formula({
+              mode,
+              text: src,
+              project_id,
+              locale,
+            });
           }
           done = true;
           break;

src/packages/frontend/editors/slate/format/commands.ts

@@ -3,7 +3,13 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+import { delay } from "awaiting";
 import { isEqual } from "lodash";
+
+import { redux } from "@cocalc/frontend/app-framework";
+import { commands } from "@cocalc/frontend/editors/editor-button-bar";
+import { getLocale } from "@cocalc/frontend/i18n";
+import { is_array, startswith } from "@cocalc/util/misc";
 import {
   BaseRange,
   Editor,
@@ -15,8 +21,6 @@ import {
   Text,
   Transforms,
 } from "slate";
-import { commands } from "@cocalc/frontend/editors/editor-button-bar";
-import { is_array, startswith } from "@cocalc/util/misc";
 import { getMarks } from "../edit-bar/marks";
 import { SlateEditor } from "../editable-markdown";
 import { markdown_to_slate } from "../markdown-to-slate";
@@ -27,7 +31,6 @@ import { insertAIFormula } from "./insert-ai-formula";
 import { insertImage } from "./insert-image";
 import { insertLink } from "./insert-link";
 import { insertSpecialChar } from "./insert-special-char";
-import { delay } from "awaiting";
 
 // currentWord:
 //
@@ -424,7 +427,9 @@ export async function formatAction(
 
     if (cmd === "ai_formula") {
       if (project_id == null) throw new Error("ai_formula requires project_id");
-      const formula = await insertAIFormula(project_id);
+      const account_store = redux.getStore("account")
+      const locale = getLocale(account_store.get("other_settings"))
+      const formula = await insertAIFormula(project_id, locale);
       const value = removeDollars(removeBlankLines(formula.trim()));
       const node: Node = {
         type: "math_inline",

src/packages/frontend/editors/slate/format/insert-ai-formula.ts

@@ -5,10 +5,14 @@
 
 import { alert_message } from "@cocalc/frontend/alerts";
 import { ai_gen_formula } from "@cocalc/frontend/codemirror/extensions/ai-formula";
+import { Locale } from "@cocalc/util/i18n";
 
-export async function insertAIFormula(project_id: string): Promise<string> {
+export async function insertAIFormula(
+  project_id: string,
+  locale: Locale,
+): Promise<string> {
   try {
-    return await ai_gen_formula({ mode: "md", project_id });
+    return await ai_gen_formula({ mode: "md", project_id, locale });
   } catch (err) {
     alert_message({ type: "error", message: err.errorFields[0]?.errors });
     return "";

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

@@ -9,16 +9,15 @@
 // 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 { IntlProvider } from "react-intl";
 
 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 { SPEC, SpecItem } from "./errors-and-warnings";
 import { Error, IProcessedLatexLog } from "./latex-log-parser";
-import { DEFAULT_LOCALE } from "@cocalc/frontend/i18n";
 
 export function update_gutters(opts: {
   log: IProcessedLatexLog;
@@ -65,10 +64,10 @@ function component(
   }
   // NOTE/BUG: despite allow_touch true below, this still does NOT work on my iPad -- we see the icon, but nothing
   // happens when clicking on it; this may be a codemirror issue.
-  // NOTE: the IntlProvider is necessary, because this is mounted outside the application's overall context.
-  // It's just a default IntlProvider to avoid a crash → TODO: make this part of the application react root.
+  // NOTE: the IntlProvider (in Localize) is necessary, because this is mounted outside the application's overall context.
+  // TODO: maybe make this part of the application react root.
   return (
-    <IntlProvider locale="en" defaultLocale={DEFAULT_LOCALE}>
+    <Localize>
       <Popover
         title={message}
         content={
@@ -108,6 +107,6 @@ function component(
           style={{ color: spec.color, cursor: "pointer" }}
         />
       </Popover>
-    </IntlProvider>
+    </Localize>
   );
 }