Merge pull request #7875 from sagemathinc/i18n-20240924

I18n: util, project state, vbar, ...

Author: williamstein

src/packages/frontend/account/actions.ts

@@ -5,7 +5,7 @@
 
 import { fromJS } from "immutable";
 import { join } from "path";
-import { once } from "@cocalc/util/async-utils";
+
 import { alert_message } from "@cocalc/frontend/alerts";
 import { AccountClient } from "@cocalc/frontend/client/account";
 import { appBasePath } from "@cocalc/frontend/customize/app-base-path";
@@ -14,6 +14,7 @@ import { track_conversion } from "@cocalc/frontend/misc";
 import { deleteRememberMe } from "@cocalc/frontend/misc/remember-me";
 import track from "@cocalc/frontend/user-tracking";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
+import { once } from "@cocalc/util/async-utils";
 import { define, required } from "@cocalc/util/fill";
 import { encode_path } from "@cocalc/util/misc";
 import { Actions } from "@cocalc/util/redux/Actions";

src/packages/frontend/account/other-settings.tsx

@@ -381,13 +381,21 @@ export function OtherSettings(props: Readonly<Props>): JSX.Element {
 
   function render_vertical_fixed_bar_options(): Rendered {
     const selected = getValidVBAROption(props.other_settings.get(VBAR_KEY));
+    const options = Object.fromEntries(
+      Object.entries(VBAR_OPTIONS).map(([k, v]) => [k, intl.formatMessage(v)]),
+    );
     return (
-      <LabeledRow label="Vertical Project Bar">
+      <LabeledRow
+        label={intl.formatMessage({
+          id: "account.other-settings.vbar.title",
+          defaultMessage: "Vertical Project Bar",
+        })}
+      >
         <div>
           <SelectorInput
             style={{ marginBottom: "10px" }}
             selected={selected}
-            options={VBAR_OPTIONS}
+            options={options}
             on_change={(value) => {
               on_change(VBAR_KEY, value);
               track("flyout", { aspect: "layout", how: "account", value });
@@ -397,7 +405,7 @@ export function OtherSettings(props: Readonly<Props>): JSX.Element {
             type="secondary"
             ellipsis={{ expandable: true, symbol: "more" }}
           >
-            {VBAR_EXPLANATION}
+            {intl.formatMessage(VBAR_EXPLANATION)}
           </Paragraph>
         </div>
       </LabeledRow>

src/packages/frontend/account/store.ts

@@ -5,9 +5,10 @@
 
 import { List, Map } from "immutable";
 import { reduce } from "lodash";
-import { Store } from "@cocalc/util/redux/Store";
+
 import { store as customizeStore } from "@cocalc/frontend/customize";
 import { make_valid_name } from "@cocalc/util/misc";
+import { Store } from "@cocalc/util/redux/Store";
 import { get_total_upgrades } from "@cocalc/util/upgrades";
 import { AccountState } from "./types";
 

src/packages/frontend/app/i18n-banner.tsx

@@ -15,7 +15,9 @@ import {
   CSS,
   React,
   redux,
+  useAsyncEffect,
   useMemo,
+  useState,
   useTypedRedux,
 } from "@cocalc/frontend/app-framework";
 import { useLocalizationCtx } from "@cocalc/frontend/app/localize";
@@ -31,6 +33,7 @@ import {
   DEFAULT_LOCALE,
   OTHER_SETTINGS_LOCALE_KEY,
 } from "@cocalc/frontend/i18n";
+import { once } from "@cocalc/util/async-utils";
 import { KEEP_EN_LOCALE } from "@cocalc/util/consts/locale";
 import { COLORS } from "@cocalc/util/theme";
 
@@ -63,13 +66,26 @@ export const I18NBanner: React.FC<{}> = () => {
   const intl = useIntl();
   const { setLocale } = useLocalizationCtx();
 
+  const [loaded, setLoaded] = useState<boolean>(false);
+
+  // wait until the account settings are loaded to show the banner
+  useAsyncEffect(async () => {
+    const store = redux.getStore("account");
+    if (!store.get("is_ready")) {
+      await once(store, "is_ready");
+    }
+    setLoaded(true);
+  }, []);
+
   function keep_english() {
     redux
       .getActions("account")
       .set_other_settings(OTHER_SETTINGS_LOCALE_KEY, KEEP_EN_LOCALE);
     setLocale(KEEP_EN_LOCALE);
   }
 
+  if (!loaded) return;
+
   return (
     <div style={I18N_BANNER_STYLE}>
       <Text strong>

src/packages/frontend/app/localize.tsx

@@ -158,6 +158,12 @@ function loadAntdLocale(locale: Locale): Promise<AntdLocale> {
         return import("antd/locale/tr_TR");
       case "he":
         return import("antd/locale/he_IL");
+      case "hi":
+        return import("antd/locale/hi_IN");
+      case "hu":
+        return import("antd/locale/hu_HU");
+      case "ar":
+        return import("antd/locale/ar_EG");
       default:
         unreachable(locale);
         throw new Error(`Unknown locale '${locale}.`);

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/components/project-state.tsx

@@ -3,12 +3,16 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { React, useTypedRedux } from "../app-framework";
+import { useIntl } from "react-intl";
+
+import { React, useTypedRedux } from "@cocalc/frontend/app-framework";
+import { IntlMessage, isIntlMessage } from "@cocalc/frontend/i18n";
+import { ProjectStatus } from "@cocalc/frontend/todo-types";
+import { ComputeState } from "@cocalc/util/compute-states";
+import { KUCALC_COCALC_COM } from "@cocalc/util/db-schema/site-defaults";
 import { COMPUTE_STATES } from "@cocalc/util/schema";
-import { ProjectStatus } from "../todo-types";
 import { Gap } from "./gap";
 import { Icon } from "./icon";
-import { KUCALC_COCALC_COM } from "@cocalc/util/db-schema/site-defaults";
 
 interface Props {
   state?: ProjectStatus;
@@ -18,6 +22,7 @@ interface Props {
 export const ProjectState: React.FC<Props> = (props: Props) => {
   const { state, show_desc } = props;
 
+  const intl = useIntl();
   const kucalc = useTypedRedux("customize", "kucalc");
   const showCoCalcCom = kucalc === KUCALC_COCALC_COM;
 
@@ -29,27 +34,37 @@ export const ProjectState: React.FC<Props> = (props: Props) => {
     );
   }
 
-  function renderDescription({ desc, desc_cocalccom }) {
+  function renderI18N(msg: string | IntlMessage): string {
+    if (isIntlMessage(msg)) {
+      return intl.formatMessage(msg);
+    } else {
+      return msg;
+    }
+  }
+
+  function renderDescription({ desc_cocalccom, desc }: ComputeState) {
     if (!show_desc) {
       return;
     }
     const text =
       showCoCalcCom && desc_cocalccom != null ? desc_cocalccom : desc;
+
     return (
       <span>
-        <span style={{ fontSize: "11pt" }}>{text}</span>
+        <span style={{ fontSize: "11pt" }}>{renderI18N(text)}</span>
       </span>
     );
   }
 
-  const s = COMPUTE_STATES[state?.get("state") ?? ""];
+  const current_state = state?.get("state") ?? "";
+  const s: ComputeState = COMPUTE_STATES[current_state];
   if (s == null) {
     return <></>;
   }
   const { display, icon, stable } = s;
   return (
     <span>
-      <Icon name={icon} /> {display}
+      <Icon name={icon} /> {renderI18N(display)}
       <Gap />
       {!stable && renderSpinner()}
       {renderDescription(s)}

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 "";