frontend/jupyter/llm: add Assistant dialog to markdown cells

Author: haraldschilly

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

@@ -4,11 +4,20 @@
  */
 
 /*
-Basically a drop-down to change the langauge (i18n localization)
+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: string) => 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/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/jupyter/cell-buttonbar.tsx

@@ -192,8 +192,8 @@ 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 +204,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 +230,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"}
             />

src/packages/frontend/jupyter/insert-cell/ai-cell-generator.tsx

@@ -33,15 +33,13 @@ import {
 import AIAvatar from "@cocalc/frontend/components/ai-avatar";
 import { Icon } from "@cocalc/frontend/components/icon";
 import { NotebookFrameActions } from "@cocalc/frontend/frame-editors/jupyter-editor/cell-notebook/actions";
-import { CUTOFF } from "@cocalc/frontend/frame-editors/llm/consts";
 import { LLMQueryDropdownButton } from "@cocalc/frontend/frame-editors/llm/llm-query-dropdown";
 import LLMSelector, {
   modelToName,
 } from "@cocalc/frontend/frame-editors/llm/llm-selector";
 import { labels } from "@cocalc/frontend/i18n";
 import { JupyterActions } from "@cocalc/frontend/jupyter/browser-actions";
 import { splitCells } from "@cocalc/frontend/jupyter/llm/split-cells";
-import { backtickSequence } from "@cocalc/frontend/markdown/util";
 import { LLMCostEstimation } from "@cocalc/frontend/misc/llm-cost-estimation";
 import { useProjectContext } from "@cocalc/frontend/project/context";
 import { LLMEvent } from "@cocalc/frontend/project/history/types";
@@ -62,6 +60,7 @@ import {
 } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import NBViewer from "../nbviewer/nbviewer";
+import { getPreviousNonemptyCellContents } from "../util/cell-content";
 import { Position } from "./types";
 import { insertCell } from "./util";
 
@@ -713,7 +712,7 @@ export function AIGenerateCodeCell({
       open={open}
       content={renderContent}
       trigger={[]}
-      destroyTooltipOnHide
+      destroyOnHidden
     >
       {children}
     </Popover>
@@ -772,46 +771,3 @@ function getInput({
     system: `Create one or more code cells in a Jupyter Notebook.\n\nKernel: "${kernel_name}".\n\nProgramming language: "${lang}".\n\nEach code cell must be wrapped in triple backticks. Do not say what the output will be. Be brief.`,
   };
 }
-
-function getPreviousNonemptyCellContents(
-  actions: NotebookFrameActions | undefined,
-  id: string,
-  position,
-  prevCells: PrevCells,
-  cellTypes: "all" | "code" | "markdown" = "code",
-  lang,
-): string {
-  if (actions == null) return "";
-  if (prevCells === "none") return "";
-  const jupyterActionsStore = actions?.jupyter_actions.store;
-  const start = position === "below" ? 0 : -1;
-  let delta: number = start;
-  const cells: string[] = [];
-  let length = 0;
-
-  while (true) {
-    const prevId = jupyterActionsStore.get_cell_id(delta, id);
-    if (!prevId) break;
-    const prevCell = actions.get_cell_by_id(prevId);
-    if (!prevCell) break;
-    const code = actions.get_cell_input(prevId)?.trim();
-    const cellType = prevCell.get("cell_type", "code");
-    if (code && (cellTypes === "all" || cellType === cellTypes)) {
-      // we found a cell of given type
-      length += code.length;
-      if (length > CUTOFF) break;
-      const delim = backtickSequence(code);
-      cells.unshift(
-        cellTypes === "all" && cellType === "code"
-          ? `${delim}${lang}\n${code}\n${delim}`
-          : code,
-      );
-      if (typeof prevCells === "number") {
-        prevCells -= 1;
-        if (prevCells <= 0) break;
-      }
-    }
-    delta -= 1;
-  }
-  return cells.join("\n\n");
-}