frontend/llm/i18n: tell LLMs to translate to user language – unless disabled in account settings

Author: haraldschilly

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

@@ -9,6 +9,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { Checkbox, Panel } from "@cocalc/frontend/antd-bootstrap";
 import { Rendered, redux, useTypedRedux } from "@cocalc/frontend/app-framework";
+import { useLocalizationCtx } from "@cocalc/frontend/app/localize";
 import {
   A,
   HelpIcon,
@@ -22,7 +23,7 @@ import {
 import AIAvatar from "@cocalc/frontend/components/ai-avatar";
 import { IS_MOBILE, IS_TOUCH } from "@cocalc/frontend/feature";
 import LLMSelector from "@cocalc/frontend/frame-editors/llm/llm-selector";
-import { labels } from "@cocalc/frontend/i18n";
+import { LOCALIZATIONS, labels } from "@cocalc/frontend/i18n";
 import {
   VBAR_EXPLANATION,
   VBAR_KEY,
@@ -33,6 +34,7 @@ import { NewFilenameFamilies } from "@cocalc/frontend/project/utils";
 import track from "@cocalc/frontend/user-tracking";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { DEFAULT_NEW_FILENAMES, NEW_FILENAMES } from "@cocalc/util/db-schema";
+import { OTHER_SETTINGS_REPLY_ENGLISH_KEY } from "@cocalc/util/i18n/const";
 import { dark_mode_mins, get_dark_mode_config } from "./dark-mode";
 import { I18NSelector, I18N_MESSAGE, I18N_TITLE } from "./i18n-selector";
 import Tours from "./tours";
@@ -60,6 +62,7 @@ interface Props {
 
 export function OtherSettings(props: Readonly<Props>): JSX.Element {
   const intl = useIntl();
+  const { locale } = useLocalizationCtx();
   const isCoCalcCom = useTypedRedux("customize", "is_cocalc_com");
   const user_defined_llm = useTypedRedux("customize", "user_defined_llm");
 
@@ -552,6 +555,24 @@ export function OtherSettings(props: Readonly<Props>): JSX.Element {
     );
   }
 
+  function render_llm_reply_language(): Rendered {
+    return (
+      <Checkbox
+        checked={!!props.other_settings.get(OTHER_SETTINGS_REPLY_ENGLISH_KEY)}
+        onChange={(e) => {
+          on_change(OTHER_SETTINGS_REPLY_ENGLISH_KEY, e.target.checked);
+        }}
+      >
+        <FormattedMessage
+          id="account.other-settings.llm.reply_language"
+          defaultMessage={`<strong>Always reply in English</strong>,
+          If set, the replies are always in English. Otherwise – the default – it replies in your interface language (currently {lang})`}
+          values={{ lang: intl.formatMessage(LOCALIZATIONS[locale].trans) }}
+        />
+      </Checkbox>
+    );
+  }
+
   function render_custom_llm(): Rendered {
     // on cocalc.com, do not even show that they're disabled
     if (isCoCalcCom && !user_defined_llm) return;
@@ -578,6 +599,7 @@ export function OtherSettings(props: Readonly<Props>): JSX.Element {
       >
         {render_disable_all_llm()}
         {render_language_model()}
+        {render_llm_reply_language()}
         {render_custom_llm()}
       </Panel>
     );

src/packages/frontend/client/llm.ts

@@ -24,6 +24,12 @@ import {
 import * as message from "@cocalc/util/message";
 import type { WebappClient } from "./client";
 import type { History } from "./types";
+import {
+  LOCALIZATIONS,
+  OTHER_SETTINGS_LOCALE_KEY,
+  OTHER_SETTINGS_REPLY_ENGLISH_KEY,
+} from "@cocalc/util/i18n/const";
+import { sanitizeLocale } from "@cocalc/frontend/i18n";
 
 interface QueryLLMProps {
   input: string;
@@ -111,6 +117,19 @@ export class LLMClient {
       }
     }
 
+    // append a sentence to request to translate the output to the user's language – unless disabled
+    const other_settings = redux.getStore("account").get("other_settings");
+    const alwaysEnglish = !!other_settings.get(
+      OTHER_SETTINGS_REPLY_ENGLISH_KEY,
+    );
+    const locale = sanitizeLocale(
+      other_settings.get(OTHER_SETTINGS_LOCALE_KEY),
+    );
+    if (!alwaysEnglish && locale != "en") {
+      const lang = LOCALIZATIONS[locale].name; // name is always in english
+      system = `${system}\n\nYour answer must be written in the language ${lang}.`;
+    }
+
     const is_cocalc_com = redux.getStore("customize").get("is_cocalc_com");
 
     if (!isFreeModel(model, is_cocalc_com)) {

src/packages/frontend/jupyter/llm/cell-tool.tsx

@@ -215,7 +215,8 @@ const ACTIONS: { [mode in Mode]: LLMTool } = {
     label: defineMessage({
       id: "jupyter.llm.cell-tool.actions.document.label",
       defaultMessage: "Document",
-      description: "Label on a button to write a documentation, i.e. to 'document' this",
+      description:
+        "Label on a button to write a documentation, i.e. to 'document' this",
     }),
     descr: defineMessage({
       id: "jupyter.llm.cell-tool.actions.document.descr",

src/packages/util/i18n/const.ts

@@ -39,6 +39,8 @@ export const KEEP_EN_LOCALE = "en-keep";
 
 export const OTHER_SETTINGS_LOCALE_KEY = "i18n";
 
+export const OTHER_SETTINGS_REPLY_ENGLISH_KEY = "llm_reply_english"
+
 // The ordering is a bit "opinionated". The top languages are European ones, and German has the best quality translations.
 // Then come other European languges, kind of alphabetical.