Merge pull request #7588 from sagemathinc/ai-doc-gen-7578

AI Generator tweaks

Author: williamstein

src/packages/frontend/frame-editors/frame-tree/commands/const.ts

@@ -1,2 +1,3 @@
 export const SEARCH_COMMANDS = "search_commands";
 export const APPLICATION_MENU = "__title__";
+export const AI_GEN_TEXT = "Help me write...";

src/packages/frontend/frame-editors/frame-tree/commands/editor-menus.ts

@@ -6,10 +6,10 @@ This is basically a more user friendly and compact interface to the addMenus
 and addCommands functions.
 */
 
+import { capitalize } from "@cocalc/util/misc";
 import { addCommands } from "./commands";
 import { addMenus } from "./menus";
 import type { Command, Menus } from "./types";
-import { capitalize } from "@cocalc/util/misc";
 
 type Command0 = {
   icon?: string;

src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx

@@ -1,22 +1,26 @@
-import { get_default_font_size } from "@cocalc/frontend/frame-editors/generic/client";
-import {
-  undo as chatUndo,
-  redo as chatRedo,
-} from "@cocalc/frontend/frame-editors/generic/chat";
-import { Icon } from "@cocalc/frontend/components";
-import { redux } from "@cocalc/frontend/app-framework";
+import { Input } from "antd";
 import { debounce } from "lodash";
 import { useEffect, useRef } from "react";
-import { FORMAT_SOURCE_ICON } from "@cocalc/frontend/frame-editors/frame-tree/config";
-import { IS_MACOS } from "@cocalc/frontend/feature";
-import userTracking from "@cocalc/frontend/user-tracking";
-import openSupportTab from "@cocalc/frontend/support/open";
-import { Input } from "antd";
-import { SEARCH_COMMANDS } from "./const";
-import { addCommands } from "./commands";
+
 import { set_account_table } from "@cocalc/frontend/account/util";
+import { redux } from "@cocalc/frontend/app-framework";
+import { Icon } from "@cocalc/frontend/components";
 import AIAvatar from "@cocalc/frontend/components/ai-avatar";
+import { IS_MACOS } from "@cocalc/frontend/feature";
+import { FORMAT_SOURCE_ICON } from "@cocalc/frontend/frame-editors/frame-tree/config";
+import {
+  redo as chatRedo,
+  undo as chatUndo,
+} from "@cocalc/frontend/frame-editors/generic/chat";
+import { get_default_font_size } from "@cocalc/frontend/frame-editors/generic/client";
 import { open_new_tab as openNewTab } from "@cocalc/frontend/misc/open-browser-tab";
+import { isSupportedExtension } from "@cocalc/frontend/project/page/home-page/ai-generate-examples";
+import { AI_GENERATE_DOC_TAG } from "@cocalc/frontend/project/page/home-page/ai-generate-utils";
+import openSupportTab from "@cocalc/frontend/support/open";
+import userTracking from "@cocalc/frontend/user-tracking";
+import { filename_extension } from "@cocalc/util/misc";
+import { addCommands } from "./commands";
+import { AI_GEN_TEXT, SEARCH_COMMANDS } from "./const";
 
 addCommands({
   "split-row": {
@@ -628,6 +632,22 @@ addCommands({
     label: "New File",
     ...fileAction("new"),
   },
+  new_ai: {
+    pos: 0.5,
+    group: "new-open",
+    icon: <AIAvatar size={16} />,
+    title: "Create a new file with the help of AI",
+    label: AI_GEN_TEXT,
+    onClick: ({ setShowNewAI }) => setShowNewAI?.(true),
+    isVisible: ({ props }) => {
+      const { path, project_id } = props;
+      const ext = filename_extension(path);
+      if (!isSupportedExtension(ext)) return false;
+      return redux
+        .getStore("projects")
+        .hasLanguageModelEnabled(project_id, AI_GENERATE_DOC_TAG);
+    },
+  },
   open: {
     pos: 1,
     group: "new-open",

src/packages/frontend/frame-editors/frame-tree/commands/manage.tsx

@@ -1,15 +1,16 @@
-import { COMMANDS } from "./commands";
-import { GROUPS, MENUS } from "./menus";
-import { APPLICATION_MENU, SEARCH_COMMANDS } from "./const";
-import type { Command } from "./types";
-import { Icon, IconName } from "@cocalc/frontend/components/icon";
-import { cmp, filename_extension, trunc_middle } from "@cocalc/util/misc";
 import { Button, Tooltip } from "antd";
-import { STAY_OPEN_ON_CLICK } from "@cocalc/frontend/components/dropdown-menu";
-import type { MenuItem } from "@cocalc/frontend/components/dropdown-menu";
+
 import { set_account_table } from "@cocalc/frontend/account/util";
 import { redux } from "@cocalc/frontend/app-framework";
+import type { MenuItem } from "@cocalc/frontend/components/dropdown-menu";
+import { STAY_OPEN_ON_CLICK } from "@cocalc/frontend/components/dropdown-menu";
+import { Icon, IconName } from "@cocalc/frontend/components/icon";
 import { IS_MOBILE } from "@cocalc/frontend/feature";
+import { cmp, filename_extension, trunc_middle } from "@cocalc/util/misc";
+import { COMMANDS } from "./commands";
+import { APPLICATION_MENU, SEARCH_COMMANDS } from "./const";
+import { GROUPS, MENUS } from "./menus";
+import type { Command } from "./types";
 
 const MAX_TITLE_WIDTH = 20;
 const MAX_SEARCH_RESULTS = 10;
@@ -18,7 +19,8 @@ const ICON_WIDTH = "24px";
 export class ManageCommands {
   readonly props;
   readonly studentProjectFunctionality;
-  readonly setShowAI;
+  readonly setShowAI: (val: boolean) => void;
+  readonly setShowNewAI: (val: boolean) => void;
   readonly helpSearch: string;
   readonly setHelpSearch;
   readonly readOnly: boolean;
@@ -30,6 +32,7 @@ export class ManageCommands {
     props,
     studentProjectFunctionality,
     setShowAI,
+    setShowNewAI,
     helpSearch,
     setHelpSearch,
     readOnly,
@@ -38,6 +41,7 @@ export class ManageCommands {
     this.props = props;
     this.studentProjectFunctionality = studentProjectFunctionality;
     this.setShowAI = setShowAI;
+    this.setShowNewAI = setShowNewAI;
     this.helpSearch = helpSearch;
     this.setHelpSearch = setHelpSearch;
     this.readOnly = readOnly;

src/packages/frontend/frame-editors/frame-tree/commands/menus.ts

@@ -28,7 +28,6 @@ export function addMenus(menus: Menus) {
     }
   }
 }
-// window.x = { MENUS };
 
 export function addCommandsToMenus(commands: { [command: string]: Command }) {
   for (const name in commands) {

src/packages/frontend/frame-editors/frame-tree/commands/types.ts

@@ -1,6 +1,7 @@
-import { MENUS } from "./menus";
 import type { ReactNode } from "react";
+
 import type { ManageCommands } from "./manage";
+import { MENUS } from "./menus";
 
 interface MenuSpec {
   label: string;

src/packages/frontend/frame-editors/frame-tree/title-bar.tsx

@@ -11,6 +11,7 @@ FrameTitleBar - title bar in a frame, in the frame tree
 import { Button, Input, InputNumber, Popover, Tooltip } from "antd";
 import { List } from "immutable";
 import { useMemo, useRef } from "react";
+
 import { ButtonGroup } from "@cocalc/frontend/antd-bootstrap";
 import {
   CSS,
@@ -20,37 +21,46 @@ import {
   useState,
 } from "@cocalc/frontend/app-framework";
 import {
+  Gap,
   Icon,
   MenuItem,
   MenuItems,
   r_join,
-  Gap,
   VisibleMDLG,
 } from "@cocalc/frontend/components";
 import { DropdownMenu } from "@cocalc/frontend/components/dropdown-menu";
+import { computeServersEnabled } from "@cocalc/frontend/compute/config";
+import SelectComputeServerForFile from "@cocalc/frontend/compute/select-server-for-file";
+import { StandaloneComputeServerDocStatus } from "@cocalc/frontend/compute/standalone-doc-status";
 import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
-import { copy, path_split, trunc_middle, field_cmp } from "@cocalc/util/misc";
+import { IS_MOBILE } from "@cocalc/frontend/feature";
+import { excludeFromComputeServer } from "@cocalc/frontend/file-associations";
+import { AIGenerateDocumentModal } from "@cocalc/frontend/project/page/home-page/ai-generate-document";
+import { isSupportedExtension } from "@cocalc/frontend/project/page/home-page/ai-generate-examples";
+import { AvailableFeatures } from "@cocalc/frontend/project_configuration";
+import userTracking from "@cocalc/frontend/user-tracking";
+import {
+  copy,
+  field_cmp,
+  filename_extension,
+  path_split,
+  trunc_middle,
+} from "@cocalc/util/misc";
+import { COLORS } from "@cocalc/util/theme";
 import { Actions } from "../code-editor/actions";
 import { is_safari } from "../generic/browser";
-import { SaveButton } from "./save-button";
-import { ConnectionStatus, EditorDescription, EditorSpec } from "./types";
 import LanguageModelTitleBarButton from "../llm/title-bar-button";
-import userTracking from "@cocalc/frontend/user-tracking";
-import TitleBarTour from "./title-bar-tour";
-import { IS_MOBILE } from "@cocalc/frontend/feature";
-import SelectComputeServerForFile from "@cocalc/frontend/compute/select-server-for-file";
-import { computeServersEnabled } from "@cocalc/frontend/compute/config";
-import { excludeFromComputeServer } from "@cocalc/frontend/file-associations";
 import {
   APPLICATION_MENU,
   COMMANDS,
-  MENUS,
   GROUPS,
-  SEARCH_COMMANDS,
   ManageCommands,
+  MENUS,
+  SEARCH_COMMANDS,
 } from "./commands";
-const MAX_SEARCH_RESULTS = 10;
-import { StandaloneComputeServerDocStatus } from "@cocalc/frontend/compute/standalone-doc-status";
+import { SaveButton } from "./save-button";
+import TitleBarTour from "./title-bar-tour";
+import { ConnectionStatus, EditorDescription, EditorSpec } from "./types";
 
 // Certain special frame editors (e.g., for latex) have extra
 // actions that are not defined in the base code editor actions.
@@ -75,8 +85,7 @@ interface EditorActions extends Actions {
   halt_jupyter?: () => void;
 }
 
-import { AvailableFeatures } from "@cocalc/frontend/project_configuration";
-import { COLORS } from "@cocalc/util/theme";
+const MAX_SEARCH_RESULTS = 10;
 
 const COL_BAR_BACKGROUND = "#f8f8f8";
 const COL_BAR_BACKGROUND_DARK = COL_BAR_BACKGROUND;
@@ -183,6 +192,7 @@ export function FrameTitleBar(props: Props) {
     useState<boolean>(false);
 
   const [showAI, setShowAI] = useState<boolean>(false);
+  const [showNewAI, setShowNewAI] = useState<boolean>(false);
 
   const [helpSearch, setHelpSearch] = useState<string>("");
 
@@ -212,6 +222,7 @@ export function FrameTitleBar(props: Props) {
         props,
         studentProjectFunctionality: student_project_functionality,
         setShowAI,
+        setShowNewAI,
         helpSearch,
         setHelpSearch,
         readOnly: read_only,
@@ -223,11 +234,11 @@ export function FrameTitleBar(props: Props) {
       helpSearch,
       setHelpSearch,
       setShowAI,
+      setShowNewAI,
       read_only,
       editorSettings,
     ],
   );
-  // window.x = { manageCommands };
 
   const has_unsaved_changes: boolean = useRedux([
     props.editor_actions.name,
@@ -511,6 +522,22 @@ export function FrameTitleBar(props: Props) {
     );
   }
 
+  function renderNewAI() {
+    const { path, project_id } = props;
+    const ext = filename_extension(path);
+    if (!isSupportedExtension(ext)) return;
+
+    return (
+      <AIGenerateDocumentModal
+        key={"new-ai"}
+        ext={ext}
+        show={showNewAI}
+        setShow={setShowNewAI}
+        project_id={project_id}
+      />
+    );
+  }
+
   function renderAssistant(noLabel): Rendered {
     if (
       !manageCommands.isVisible("chatgpt") ||
@@ -716,6 +743,7 @@ export function FrameTitleBar(props: Props) {
         v.push(renderTitle());
       }
       v.push(renderPage());
+      v.push(renderNewAI());
       v.push(renderMenus());
       v.push(renderSwitchToFile());
 

src/packages/frontend/frame-editors/jupyter-editor/editor.ts

@@ -8,26 +8,29 @@ Spec for editing Jupyter notebooks via a frame tree.
 */
 
 import { createElement } from "react";
+
+import type { Command } from "@cocalc/frontend/frame-editors/frame-tree/commands";
+import { addEditorMenus } from "@cocalc/frontend/frame-editors/frame-tree/commands";
+import { FORMAT_SOURCE_ICON } from "@cocalc/frontend/frame-editors/frame-tree/config";
+import { AllActions, commands } from "@cocalc/frontend/jupyter/commands";
+import { shortcut_to_string } from "@cocalc/frontend/jupyter/keyboard-shortcuts";
 import { capitalize, field_cmp, set } from "@cocalc/util/misc";
 import { createEditor } from "../frame-tree/editor";
 import { EditorDescription } from "../frame-tree/types";
 import { terminal } from "../terminal-editor/editor";
 import { time_travel } from "../time-travel-editor/editor";
 import { CellNotebook } from "./cell-notebook/cell-notebook";
-import { RawIPynb } from "./raw-ipynb";
+import { Introspect } from "./introspect/introspect";
 import JSONIPynb from "./json-ipynb";
+import KernelMenuItem from "./kernel-menu-item";
+import { RawIPynb } from "./raw-ipynb";
 import { Slideshow } from "./slideshow-revealjs/slideshow";
-import { TableOfContents } from "./table-of-contents";
-import { Introspect } from "./introspect/introspect";
-const SNIPPET_ICON_NAME =
-  require("@cocalc/frontend/assistant/common").ICON_NAME;
 import { JupyterSnippets } from "./snippets";
-import { addEditorMenus } from "@cocalc/frontend/frame-editors/frame-tree/commands";
-import type { Command } from "@cocalc/frontend/frame-editors/frame-tree/commands";
-import { commands, AllActions } from "@cocalc/frontend/jupyter/commands";
-import { shortcut_to_string } from "@cocalc/frontend/jupyter/keyboard-shortcuts";
-import KernelMenuItem from "./kernel-menu-item";
-import { FORMAT_SOURCE_ICON } from "@cocalc/frontend/frame-editors/frame-tree/config";
+import { TableOfContents } from "./table-of-contents";
+
+const {
+  ICON_NAME: SNIPPET_ICON_NAME,
+} = require("@cocalc/frontend/assistant/common");
 
 const jupyterCommands = set([
   "about",