Merge pull request #8537 from sagemathinc/help-button-hint

frontend/llm: hint and solution "help me fix" buttons

Author: williamstein

src/.claude/settings.json

@@ -4,7 +4,7 @@
       "Bash(../node_modules/.bin/tsc:*)",
       "Bash(NODE_OPTIONS=--max-old-space-size=8192 ../node_modules/.bin/tsc --noEmit)",
       "Bash(bash:*)",
-      "Bash(curl:*)",
+      "Bash(chmod:*)",
       "Bash(curl:*)",
       "Bash(docker run:*)",
       "Bash(find:*)",
@@ -24,9 +24,11 @@
       "Bash(pnpm list:*)",
       "Bash(pnpm ts-build:*)",
       "Bash(pnpm tsc:*)",
+      "Bash(pnpm update:*)",
       "Bash(pnpm why:*)",
       "Bash(prettier -w:*)",
       "Bash(psql:*)",
+      "Bash(python3:*)",
       "WebFetch(domain:cocalc.com)",
       "WebFetch(domain:doc.cocalc.com)",
       "WebFetch(domain:docs.anthropic.com)",
@@ -36,6 +38,7 @@
       "WebFetch(domain:www.anthropic.com)",
       "WebSearch",
       "mcp__cclsp__find_definition",
+      "mcp__cclsp__find_references",
       "mcp__github__get_issue",
       "mcp__github__get_pull_request_comments",
       "mcp__github__get_pull_request",

src/packages/frontend/course/configuration/customize-student-project-functionality.tsx

@@ -227,7 +227,7 @@ const OPTIONS: Option[] = [
     description: defineMessage({
       id: "course.customize-student-project-functionality.disableSomeChatGPT.description",
       defaultMessage:
-        "Disable AI integration (ChatGPT & co.) except that 'Help me fix' and 'Explain' buttons.  Use this if you only want the students to use AI assistance to get unstuck.",
+        "Disable AI integration (ChatGPT & co.) except for 'Hint', 'Explain' buttons, and chat replies. Students can get hints to help them get unstuck, but cannot get complete solutions from 'Help me fix'.",
     }),
   },
   {
@@ -406,7 +406,7 @@ export const useStudentProjectFunctionality: Hook = (project_id?: string) => {
   return state;
 };
 
-// Getting the information known right now about studnet project functionality.
+// Getting the information known right now about student project functionality.
 // Similar to the above hook, but just a point in time snapshot.  Use this
 // for old components that haven't been converted to react hooks yet.
 export function getStudentProjectFunctionality(

src/packages/frontend/cspell.json

@@ -49,6 +49,7 @@
     "syncstring",
     "synctable",
     "synctables",
+    "synctex",
     "tidymodels",
     "tidyverse",
     "timetravel",

src/packages/frontend/frame-editors/frame-tree/format-error.tsx

@@ -1,4 +1,4 @@
-// A dismissable error message that appears when formatting code.
+// A dismissible error message that appears when formatting code.
 
 import { Alert, Button } from "antd";
 import { useMemo } from "react";

src/packages/frontend/frame-editors/latex-editor/errors-and-warnings.tsx

@@ -143,9 +143,8 @@ const Item: React.FC<ItemProps> = React.memo(
           style={{ float: "right", marginLeft: "10px" }}
           size="small"
           task={"ran latex"}
-          error={
-            (item.get("message") ?? "") + "\n" + (item.get("content") ?? "")
-          }
+          error={item.get("message") ?? ""}
+          line={item.get("content") ?? ""}
           input={() => {
             const s = actions._syncstring.to_str();
             const v = s

src/packages/frontend/frame-editors/latex-editor/gutters.tsx

@@ -87,7 +87,8 @@ function Component({
                   size="small"
                   style={{ marginTop: "5px" }}
                   task={"ran latex"}
-                  error={content}
+                  error={message}
+                  line={content}
                   input={() => {
                     const s = actions._syncstring.to_str();
                     const v = s
@@ -100,7 +101,7 @@ function Component({
                   language={"latex"}
                   extraFileInfo={actions.languageModelExtraFileInfo()}
                   tag={"latex-error-popover"}
-                  prioritize="end"
+                  prioritize="start-end"
                 />
               </>
             )}

src/packages/frontend/frame-editors/llm/help-me-fix-button.tsx

@@ -0,0 +1,114 @@
+import { Button, Space } from "antd";
+import React from "react";
+import { defineMessage, useIntl } from "react-intl";
+
+import { AIAvatar, RawPrompt } from "@cocalc/frontend/components";
+import { Icon } from "@cocalc/frontend/components/icon";
+import PopconfirmKeyboard from "@cocalc/frontend/components/popconfirm-keyboard";
+import { LLMCostEstimation } from "@cocalc/frontend/misc/llm-cost-estimation";
+import LLMSelector, { modelToName } from "./llm-selector";
+
+const messages = {
+  buttonText: defineMessage({
+    id: "frame-editors.llm.help-me-fix-button.button-text",
+    defaultMessage:
+      "{isHint, select, true {Give me a Hint...} other {Fix this Problem...}}",
+    description:
+      "Button text for help-me-fix functionality - hint vs complete solution",
+  }),
+  okText: defineMessage({
+    id: "frame-editors.llm.help-me-fix-button.ok-text",
+    defaultMessage:
+      "{isHint, select, true {Get Hint [Return]} other {Get Solution [Return]}}",
+    description:
+      "Confirmation button text in help-me-fix dialog - hint vs complete solution",
+  }),
+  title: defineMessage({
+    id: "frame-editors.llm.help-me-fix-button.title",
+    defaultMessage:
+      "{isHint, select, true {Get Hint from} other {Get Complete Solution from}}",
+    description: "Title text in help-me-fix dialog - hint vs complete solution",
+  }),
+};
+
+interface HelpMeFixButtonProps {
+  mode: "hint" | "solution";
+  model: string;
+  setModel: (model: string) => void;
+  project_id: string;
+  inputText: string;
+  tokens: number;
+  size?: any;
+  style?: React.CSSProperties;
+  gettingHelp: boolean;
+  onConfirm: () => void;
+}
+
+export default function HelpMeFixButton({
+  mode,
+  model,
+  setModel,
+  project_id,
+  inputText,
+  tokens,
+  size,
+  style,
+  gettingHelp,
+  onConfirm,
+}: HelpMeFixButtonProps) {
+  const intl = useIntl();
+  const isHint = mode === "hint";
+  const title = intl.formatMessage(messages.title, { isHint });
+  const buttonText = intl.formatMessage(messages.buttonText, { isHint });
+  const okText = intl.formatMessage(messages.okText, { isHint });
+  const buttonIcon = isHint ? "lightbulb" : "wrench";
+  const okIcon = isHint ? "lightbulb" : "paper-plane";
+
+  return (
+    <PopconfirmKeyboard
+      icon={<AIAvatar size={20} />}
+      title={
+        <>
+          {title}{" "}
+          <LLMSelector
+            model={model}
+            setModel={setModel}
+            project_id={project_id}
+          />
+        </>
+      }
+      description={() => (
+        <div
+          style={{
+            width: "550px",
+            overflow: "auto",
+            maxWidth: "90vw",
+            maxHeight: "400px",
+          }}
+        >
+          The following will be sent to {modelToName(model)}:
+          <RawPrompt input={inputText} />
+          <LLMCostEstimation
+            model={model}
+            tokens={tokens}
+            type="secondary"
+            paragraph
+          />
+        </div>
+      )}
+      okText={
+        <>
+          <Icon name={okIcon} /> {okText}
+        </>
+      }
+      onConfirm={onConfirm}
+    >
+      <Button size={size} style={style} disabled={gettingHelp}>
+        <Space>
+          <Icon name={buttonIcon} />
+          {buttonText}
+        </Space>
+      </Button>
+    </PopconfirmKeyboard>
+  );
+}

src/packages/frontend/frame-editors/llm/help-me-fix-utils.ts

@@ -0,0 +1,170 @@
+import getChatActions from "@cocalc/frontend/chat/get-actions";
+import { backtickSequence } from "@cocalc/frontend/markdown/util";
+import { trunc, trunc_left, trunc_middle } from "@cocalc/util/misc";
+import { CUTOFF } from "./consts";
+import { modelToMention } from "./llm-selector";
+import shortenError from "./shorten-error";
+
+export interface GetHelpOptions {
+  project_id: string;
+  path: string;
+  tag?: string;
+  error: string;
+  input?: string;
+  task?: string;
+  line?: string;
+  language?: string;
+  extraFileInfo?: string;
+  redux: any;
+  prioritize?: "start" | "start-end" | "end";
+  model: string;
+}
+
+export interface CreateMessageOpts {
+  tag?: string;
+  error: string;
+  line: string;
+  input?: string;
+  task?: string;
+  language?: string;
+  extraFileInfo?: string;
+  prioritize?: "start" | "start-end" | "end";
+  model: string;
+  open: boolean;
+  full: boolean;
+  isHint?: boolean;
+}
+
+export async function getHelp(options: GetHelpOptions) {
+  const {
+    project_id,
+    path,
+    tag,
+    line = "",
+    error,
+    input,
+    task,
+    language,
+    extraFileInfo,
+    redux,
+    prioritize,
+    model,
+  } = options;
+
+  const solutionText = createMessage({
+    error,
+    task,
+    line,
+    input,
+    language,
+    extraFileInfo,
+    model,
+    prioritize,
+    open: false,
+    full: false,
+    isHint: false,
+  });
+
+  try {
+    const actions = await getChatActions(redux, project_id, path);
+    setTimeout(() => actions.scrollToBottom(), 100);
+    await actions.sendChat({
+      input: solutionText,
+      tag: `help-me-fix-solution${tag ? `:${tag}` : ""}`,
+      noNotification: true,
+    });
+  } catch (err) {
+    console.error("Error getting help:", err);
+    throw err;
+  }
+}
+
+export function createMessage({
+  error,
+  line,
+  language,
+  input,
+  model,
+  task,
+  extraFileInfo,
+  prioritize,
+  open,
+  full,
+  isHint = false,
+}: CreateMessageOpts): string {
+  const message: string[] = [];
+  const prefix = full ? modelToMention(model) + " " : "";
+  if (isHint) {
+    message.push(
+      `${prefix}Please give me a hint to help me fix my code. Do not provide the complete solution - just point me in the right direction.`,
+    );
+  } else {
+    message.push(`${prefix}Help me fix my code.`);
+  }
+
+  if (full)
+    message.push(`<details${open ? " open" : ""}><summary>Context</summary>`);
+
+  if (task) {
+    message.push(`I ${task}.`);
+  }
+
+  error = trimStr(error, language);
+  line = trimStr(line, language);
+
+  message.push(`I received the following error:`);
+  const delimE = backtickSequence(error);
+  message.push(`${delimE}${language}\n${error}\n${delimE}`);
+
+  if (line) {
+    message.push(`For the following line:`);
+    const delimL = backtickSequence(line);
+    message.push(`${delimL}${language}\n${line}\n${delimL}`);
+  }
+
+  // We put the input last, since it could be huge and get truncated.
+  // It's much more important to show the error, obviously.
+  if (input) {
+    if (input.length < CUTOFF) {
+      message.push(`My ${extraFileInfo ?? ""} contains:`);
+    } else {
+      if (prioritize === "start-end") {
+        input = trunc_middle(input, CUTOFF, "\n\n[...]\n\n");
+      } else if (prioritize === "end") {
+        input = trunc_left(input, CUTOFF);
+      } else {
+        input = trunc(input, CUTOFF);
+      }
+      const describe =
+        prioritize === "start"
+          ? "starts"
+          : prioritize === "end"
+          ? "ends"
+          : "starts and ends";
+      message.push(
+        `My ${
+          extraFileInfo ?? ""
+        } code ${describe} as follows, but is too long to fully include here:`,
+      );
+    }
+    const delimI = backtickSequence(input);
+    message.push(`${delimI}${language}\n${input}\n${delimI}`);
+  }
+
+  if (full) message.push("</details>");
+
+  return message.join("\n\n");
+}
+
+function trimStr(s: string, language): string {
+  if (s.length > 3000) {
+    // 3000 is about 500 tokens
+    // This uses structure:
+    s = shortenError(s, language);
+    if (s.length > 3000) {
+      // this just puts ... in the middle.
+      s = trunc_middle(s, 3000);
+    }
+  }
+  return s;
+}