Merge pull request #8503 from sagemathinc/jupyter-llm-8500

frontend/jupyter/llm: add "Ask a Question" and Markdown Assistant

Author: williamstein

src/packages/frontend/account/i18n-selector.tsx

@@ -8,7 +8,16 @@ Basically a drop-down to change the language (i18n localization)
 */
 
 import { DownOutlined } from "@ant-design/icons";
-import { Button, Dropdown, MenuProps, Modal, Space, Tooltip } from "antd";
+import {
+  Button,
+  Dropdown,
+  MenuProps,
+  Modal,
+  Select,
+  SelectProps,
+  Space,
+  Tooltip,
+} from "antd";
 import { SizeType } from "antd/es/config-provider/SizeContext";
 import { useState } from "react";
 import { defineMessage, useIntl } from "react-intl";
@@ -54,6 +63,50 @@ Thank you for your patience and understanding as we work to make our application
   description: "Content of translation information modal",
 });
 
+interface LanguageSelectorProps
+  extends Omit<SelectProps, "options" | "onChange"> {
+  value?: string;
+  onChange?: (language: Locale) => void;
+}
+
+/**
+ * A reusable language selector component for translation purposes.
+ */
+export function LanguageSelector({
+  value,
+  onChange,
+  ...props
+}: LanguageSelectorProps) {
+  const intl = useIntl();
+
+  let availableLocales = Object.keys(LOCALIZATIONS) as Locale[];
+
+  const options = availableLocales.map((locale) => {
+    const localization = LOCALIZATIONS[locale];
+    const other =
+      locale === value
+        ? localization.name
+        : intl.formatMessage(localization.trans);
+    return {
+      value: locale,
+      label: `${localization.flag} ${localization.native} (${other})`,
+    };
+  });
+
+  return (
+    <Select
+      value={value}
+      onChange={onChange}
+      options={options}
+      placeholder="Select a language..."
+      showSearch
+      optionFilterProp="label"
+      popupMatchSelectWidth={false}
+      {...props}
+    />
+  );
+}
+
 export function I18NSelector(props: Readonly<Props>) {
   const { isWide = true, size, confirm = false } = props;
 

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

@@ -1,8 +1,8 @@
 import { CSS } from "@cocalc/frontend/app-framework";
 import { useBottomScroller } from "@cocalc/frontend/app-framework/use-bottom-scroller";
-import { COLORS } from "@cocalc/util/theme";
-import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
 import { Paragraph } from "@cocalc/frontend/components";
+import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
+import { COLORS } from "@cocalc/util/theme";
 
 const STYLE = {
   border: "1px solid lightgrey",
@@ -21,18 +21,20 @@ interface Props {
   input: React.JSX.Element | string;
   style?: CSS;
   scrollBottom?: boolean;
+  rawText?: boolean;
 }
 
 export function RawPrompt({
   input,
   style: style0,
   scrollBottom = false,
+  rawText = false,
 }: Props) {
   const ref = useBottomScroller(scrollBottom, input);
   const style = { ...STYLE, ...style0 };
-  if (typeof input == "string") {
+  if (typeof input == "string" && !rawText) {
     // this looks so much nicer; I realize it doesn't implement scrollBottom.
-    // But just dropping the input as plain text like below just seems 
+    // But just dropping the input as plain text like below just seems
     // utterly broken!
     return <StaticMarkdown style={style} value={input} />;
   } else {

src/packages/frontend/cspell.json

@@ -3,13 +3,18 @@
   "language": "en",
   "enabled": true,
   "words": [
+    "ANOVA",
+    "ARIMA",
     "autograde",
     "autograding",
     "Bioconductor",
+    "bioinformatics",
     "CoCalc",
     "conat",
     "dplyr",
     "dstream",
+    "formatjs",
+    "geospatial",
     "ggplot",
     "ipython",
     "ipywidgets",
@@ -35,14 +40,16 @@
     "sagetex",
     "sagews",
     "scikit",
+    "simplelocalize",
+    "sklearn",
     "SocketIO",
     "statsmodels",
     "syncdb",
     "syncdoc",
-    "syncdoc",
     "syncstring",
     "synctable",
     "synctables",
+    "tidymodels",
     "tidyverse",
     "timetravel",
     "tolerations",

src/packages/frontend/frame-editors/llm/consts.ts

@@ -1,5 +1,5 @@
 // number of characters we send to an LLM for context
-export const CUTOFF = 3000;
+export const CUTOFF = 5000;
 
 // this came from ./create-chat, but for all frame types
 export const AI_ASSIST_TAG = "code-editor";

src/packages/frontend/i18n/bin/common.sh

@@ -6,3 +6,31 @@ check_api_key() {
         exit 1
     fi
 }
+
+# Execute a function for each language, optionally in parallel
+# Usage: run_for_each_lang <function_name>
+run_for_each_lang() {
+    local func_name="$1"
+
+    if [ -z "$func_name" ]; then
+        echo "Error: function name is required" >&2
+        exit 1
+    fi
+
+    start_time=$(date +%s)
+
+    if command -v parallel &>/dev/null; then
+        echo "Parallel is installed. Running $func_name in parallel."
+        export -f "$func_name"
+        echo "$LANGS" | tr ' ' '\n' | parallel -j8 --delay 0.1 --will-cite "$func_name"
+    else
+        echo "Parallel is not installed. Running $func_name sequentially."
+        for L in $LANGS; do
+            "$func_name" "$L"
+        done
+    fi
+
+    end_time=$(date +%s)
+    execution_time=$((end_time - start_time))
+    echo "$func_name completed in ${execution_time} seconds."
+}

src/packages/frontend/i18n/bin/compile.sh

@@ -4,10 +4,16 @@
 # It was necessary to write a custom formatter (see formatter.js) – not clear why, but it works. It's just a trivial mapping.
 # "--ast" this is the main point of compiling: we use ICU messages, which no longer need to be parsed each time.
 # This compile step is called by the `pnpm build` step as well, hence there is no need to keep the compiled files in the sources.
-for L in $LANGS; do
+
+# Each language is compiled into a separate file – this allows for dynamic imports.
+compile() {
+  local lang="$1"
+  echo "compiling '$lang'"
   pnpm exec formatjs compile \
     --ast \
     --format i18n/formatter.js \
-    --out-file ./i18n/trans/$L.compiled.json \
-    ./i18n/trans/$L.json
-done
+    --out-file ./i18n/trans/$lang.compiled.json \
+    ./i18n/trans/$lang.json
+}
+
+run_for_each_lang compile

src/packages/frontend/i18n/bin/download.sh

@@ -3,7 +3,7 @@
 
 check_api_key
 
-# Each language is downloaded into a spearate file and compiled – this allows for dynamic imports.
+# Each language is downloaded into a separate file and compiled – this allows for dynamic imports.
 download() {
   local lang="$1"
   echo "calling download '$lang'"
@@ -14,13 +14,4 @@ download() {
     --languageKey="$lang"
 }
 
-if command -v parallel &>/dev/null; then
-  echo "Parallel is installed. Running downloads in parallel."
-  export -f download
-  echo "$LANGS" | tr ' ' '\n' | parallel -j8 --delay 0.1 --will-cite download
-else
-  echo "Parallel is not installed. Running downloads sequentially."
-  for L in $LANGS; do
-    download "$L"
-  done
-fi
+run_for_each_lang download

src/packages/frontend/jupyter/_jupyter.sass

@@ -68,7 +68,7 @@
 .cocalc-jupyter-insert-cell
   margin-bottom: 10px
   height: 8px
-  margin-top: 8px
+  margin-top: 10px
   cursor: pointer
   text-align: center
   &:hover
@@ -111,4 +111,4 @@
 // %matplotlib widgets
 // from pylab import plot; plot([1,2],[3,4])
 cocalc-lumino-adapter
-  position: relative
+  position: relative

src/packages/frontend/jupyter/cell-buttonbar.tsx

@@ -31,7 +31,7 @@ import {
   RUN_ALL_CELLS_ABOVE_ICON,
   RUN_ALL_CELLS_BELOW_ICON,
 } from "./consts";
-import { LLMCellTool } from "./llm";
+import { LLMCellTool } from "./llm/cell-tool";
 
 interface Props {
   id: string;
@@ -192,8 +192,15 @@ export const CellButtonBar: React.FC<Props> = React.memo(
     }
 
     function renderCodeBarLLMButtons() {
-      if (!isCodeCell || !llmTools || !haveLLMCellTools || is_readonly) return;
-      return <LLMCellTool id={id} actions={actions} llmTools={llmTools} />;
+      if (!llmTools || !haveLLMCellTools || is_readonly) return;
+      return (
+        <LLMCellTool
+          id={id}
+          actions={actions}
+          llmTools={llmTools}
+          cellType={isCodeCell ? "code" : "markdown"}
+        />
+      );
     }
 
     function renderCodeBarFormatButton() {
@@ -204,7 +211,7 @@ export const CellButtonBar: React.FC<Props> = React.memo(
       return (
         <Tooltip
           title={intl.formatMessage({
-            id: "jupyter.cell-buttonbr.format-button.tooltip",
+            id: "jupyter.cell-buttonbar.format-button.tooltip",
             defaultMessage: "Format this code to look nice",
             description: "Code cell in a Jupyter Notebook",
           })}
@@ -230,7 +237,7 @@ export const CellButtonBar: React.FC<Props> = React.memo(
           >
             <Icon name={formatting ? "spinner" : "sitemap"} spin={formatting} />{" "}
             <FormattedMessage
-              id="jupyter.cell-buttonbr.format-button.label"
+              id="jupyter.cell-buttonbar.format-button.label"
               defaultMessage={"Format"}
               description={"Code cell in a Jupyter Notebook"}
             />