Merge branch 'master' of github.com:sagemathinc/cocalc

Author: williamstein

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, it replies in your language ({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/account/types.ts

@@ -14,6 +14,7 @@ import {
   OTHER_SETTINGS_USERDEFINED_LLM,
 } from "@cocalc/util/db-schema/defaults";
 import { LanguageModel } from "@cocalc/util/db-schema/llm-utils";
+import { OTHER_SETTINGS_REPLY_ENGLISH_KEY } from "@cocalc/util/i18n/const";
 import { PassportStrategyFrontend } from "@cocalc/util/types/passport-types";
 import { SETTINGS_LANGUAGE_MODEL_KEY } from "./useLanguageModelSetting";
 
@@ -50,6 +51,7 @@ export interface AccountState {
     news_read_until: number; // JavaScript timestamp in milliseconds
     [OTHER_SETTINGS_USERDEFINED_LLM]: string; // string is JSON: CustomLLM[]
     [OTHER_SETTINGS_LOCALE_KEY]?: string;
+    [OTHER_SETTINGS_REPLY_ENGLISH_KEY]?: string;
   }>;
   stripe_customer?: TypedMap<{
     subscriptions: { data: Map<string, any> };

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

src/packages/frontend/i18n/trans/ar_EG.json

@@ -46,6 +46,7 @@
   "account.other-settings.katex": "<strong>KaTeX:</strong> محاولة عرض الصيغ باستخدام {katex} (أسرع بكثير، ولكن بدون خيارات قائمة السياق)",
   "account.other-settings.llm.default_llm": "نموذج اللغة الافتراضي AI",
   "account.other-settings.llm.disable_all": "<strong>تعطيل جميع تكاملات الذكاء الاصطناعي</strong>، مثل أزرار توليد أو شرح الأكواد في Jupyter، وذكر @chatgpt، إلخ.",
+  "account.other-settings.llm.reply_language": "<strong>الرد دائمًا باللغة الإنجليزية:</strong> إذا تم التعيين، تكون الردود دائمًا باللغة الإنجليزية. وإلا، فإنه يرد بلغتك ({lang}).",
   "account.other-settings.llm.title": "إعدادات AI",
   "account.other-settings.markdown_codebar": "<strong>تعطيل شريط كود العلامات</strong> في جميع مستندات العلامات. يؤدي تحديد هذا إلى إخفاء أزرار التشغيل والنسخ والشرح الإضافية في كتل الكود المسورة.",
   "account.other-settings.mask_files": "<strong>إخفاء الملفات:</strong> تظليل الملفات في عارض الملفات التي ربما لا تريد فتحها",
@@ -600,6 +601,7 @@
   "labels.connection": "الاتصال",
   "labels.copied": "تم النسخ",
   "labels.copy": "نسخ",
+  "labels.create": "إنشاء",
   "labels.create_project": "إنشاء مشروع...",
   "labels.created": "تم الإنشاء",
   "labels.created_file": "تم الإنشاء",
@@ -621,7 +623,7 @@
   "labels.idle_timeout": "مهلة الخمول",
   "labels.insert": "إدراج",
   "labels.language": "اللغة",
-  "labels.latex_document": "مستند LaTeX",
+  "labels.latex_document": "LaTeX",
   "labels.license": "رخصة",
   "labels.licenses": "التراخيص",
   "labels.line_numbers": "أرقام الأسطر",
@@ -887,14 +889,16 @@
   "project.settings.control.idle_timeout.always_running.info": "سيتم <b>تشغيل المشروع تلقائيًا</b> إذا توقف لأي سبب (سيقوم بتشغيل أي <A>برامج تهيئة</A>).",
   "project.settings.control.idle_timeout.info": "<b>حول {ago}</b> سيتوقف المشروع ما لم يقم شخص ما بتحريره بنشاط.",
   "project.settings.control.uptime.info": "المشروع بدأ <b>{ago}</b> منذ",
+  "project.settings.hide-delete-box.delete.confirm.yes": "نعم، يرجى حذف هذا المشروع!",
   "project.settings.hide-delete-box.delete.disclaimer": "المشاريع لا تُحذف فورًا. إذا كنت بحاجة إلى حذف بعض المعلومات الحساسة بشكل دائم وفوري في هذا المشروع، اتصل بـ {help}",
   "project.settings.hide-delete-box.delete.explanation": "حذف هذا المشروع للجميع. يمكنك التراجع عن هذا لبضعة أيام وبعدها يصبح دائمًا ويتم فقدان جميع البيانات في هذا المشروع. تتوقف أي خوادم حساب جارية بعد فترة قصيرة من حذف المشروع، وسيتم حذف خوادم الحساب بشكل دائم خلال بضعة أيام إذا لم يتم استعادة المشروع.",
-  "project.settings.hide-delete-box.delete.label": "{is_deleted, select, true {استعادة المشروع} other {حذف المشروع...}} مشروع",
+  "project.settings.hide-delete-box.delete.label": "{is_deleted, select, true {استعادة المشروع} other {حذف المشروع}}",
   "project.settings.hide-delete-box.delete.warning.confirmation": "نعم، يرجى حذف هذا المشروع",
   "project.settings.hide-delete-box.delete.warning.info": "سيتم إزالة جميع الترقيات الخاصة بك من هذا المشروع تلقائيًا. لن يؤدي استعادة المشروع إلى استعادتها تلقائيًا. لن يؤثر هذا على الترقيات التي طبقها الآخرون.",
   "project.settings.hide-delete-box.delete.warning.title": "هل أنت متأكد أنك تريد حذف هذا المشروع؟",
   "project.settings.hide-delete-box.hide.explanation": "{hide, select, true { أظهر هذا المشروع، بحيث يظهر في قائمة المشاريع الافتراضية الخاصة بك. في الوقت الحالي، يظهر فقط عند تحديد المخفي. } other { أخفِ هذا المشروع، بحيث لا يظهر في قائمة المشاريع الافتراضية الخاصة بك. هذا يؤثر عليك فقط، وليس على المتعاونين معك، ويمكنك بسهولة إظهاره. }}",
-  "project.settings.hide-delete-box.hide.label": "{hidden, select, true {إظهار} other {إخفاء}} مشروع",
+  "project.settings.hide-delete-box.hide.label": "{hidden, select, true {إظهار المشروع} other {إخفاء المشروع}}",
+  "project.settings.hide-delete-box.hide.switch": "{hidden, select, true {مخفي} other {مرئي}}",
   "project.settings.hide-delete-box.title": "إخفاء أو حذف المشروع",
   "project.settings.restart-project.button.label": "{is_running, select, true {إعادة التشغيل} other {بدء}}",
   "project.settings.site-license.button.label": "الترقية باستخدام مفتاح الترخيص...",