Merge pull request #8558 from sagemathinc/fix-hint-button-sagews-8546

frontend/sagews: add "give me a hint" button to aid users

Author: williamstein

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

@@ -18,6 +18,7 @@ export interface GetHelpOptions {
   redux: any;
   prioritize?: "start" | "start-end" | "end";
   model: string;
+  isHint?: boolean;
 }
 
 export interface CreateMessageOpts {
@@ -35,23 +36,22 @@ export interface CreateMessageOpts {
   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({
+export async function getHelp({
+  project_id,
+  path,
+  tag,
+  line = "",
+  error,
+  input,
+  task,
+  language,
+  extraFileInfo,
+  redux,
+  prioritize,
+  model,
+  isHint = false,
+}: GetHelpOptions) {
+  const messageText = createMessage({
     error,
     task,
     line,
@@ -60,17 +60,18 @@ export async function getHelp(options: GetHelpOptions) {
     extraFileInfo,
     model,
     prioritize,
-    open: false,
-    full: false,
-    isHint: false,
+    open: true,
+    full: true,
+    isHint,
   });
 
   try {
     const actions = await getChatActions(redux, project_id, path);
     setTimeout(() => actions.scrollToBottom(), 100);
+    const tagSuffix = isHint ? "hint" : "solution";
     await actions.sendChat({
-      input: solutionText,
-      tag: `help-me-fix-solution${tag ? `:${tag}` : ""}`,
+      input: messageText,
+      tag: `help-me-fix-${tagSuffix}${tag ? `:${tag}` : ""}`,
       noNotification: true,
     });
   } catch (err) {
@@ -139,8 +140,8 @@ export function createMessage({
         prioritize === "start"
           ? "starts"
           : prioritize === "end"
-          ? "ends"
-          : "starts and ends";
+            ? "ends"
+            : "starts and ends";
       message.push(
         `My ${
           extraFileInfo ?? ""

src/packages/frontend/sagews/chatgpt.ts

@@ -7,21 +7,41 @@ import { SETTINGS_LANGUAGE_MODEL_KEY } from "../account/useLanguageModelSetting"
 export function isEnabled(project_id: string): boolean {
   return redux
     .getStore("projects")
-    .hasLanguageModelEnabled(project_id, "help-me-fix");
+    .hasLanguageModelEnabled(project_id, "help-me-fix-solution");
 }
-export function helpMeFix({
-  codemirror,
-  stderr,
-  uuid,
-  project_id,
-  path,
-}): void {
+
+export function isHintEnabled(project_id: string): boolean {
+  return redux
+    .getStore("projects")
+    .hasLanguageModelEnabled(project_id, "help-me-fix-hint");
+}
+
+interface HelpParams {
+  codemirror: any;
+  stderr: string;
+  uuid: string;
+  project_id: string;
+  path: string;
+}
+
+function getHelpCommon(params: HelpParams, isHint: boolean): void {
+  const { codemirror, stderr, uuid, project_id, path } = params;
+
+  // Show confirmation dialog
+  const action = isHint ? "get a hint" : "get help to fix this error";
+  const confirmMessage = `This will query a language model to ${action}. The error message and your code will be sent to the AI service for analysis. Do you want to continue?`;
+
+  if (!window.confirm(confirmMessage)) {
+    return; // User cancelled
+  }
+
   const val = codemirror.getValue();
   const i = val.indexOf(uuid);
   if (i == -1) return;
   const j = val.lastIndexOf(MARKERS.cell, i);
   const k = val.lastIndexOf(MARKERS.output, i);
   const input = val.slice(j + 1, k).trim();
+
   // use the currently set language model from the account store
   // https://github.com/sagemathinc/cocalc/pull/7278
   const other_settings = redux.getStore("account").get("other_settings");
@@ -41,6 +61,7 @@ export function helpMeFix({
     custom_openai: Object.keys(customOpenAI),
     selectable_llms: selectableLLMs,
   });
+
   getHelp({
     project_id,
     path,
@@ -53,5 +74,14 @@ export function helpMeFix({
     redux,
     prioritize: "end",
     model,
+    isHint,
   });
 }
+
+export function helpMeFix(params: HelpParams): void {
+  getHelpCommon(params, false);
+}
+
+export function giveMeAHint(params: HelpParams): void {
+  getHelpCommon(params, true);
+}

src/packages/frontend/sagews/sagews.coffee

@@ -1261,23 +1261,41 @@ class SynchronizedWorksheet extends SynchronizedDocument2
             output.append($("<span class='sagews-output-stdout'>").text(mesg.stdout))
 
         if mesg.stderr?
-            # This is entirely for the ChatGPT help button:
-            # TODO: don't show if chatgpt disabled.
-            if chatgpt.isEnabled(@project_id)
-                cur = output.data('stderr')
-                if not cur
-                    button = $("<div><span title='@ChatGPT, help fix this...' style='font-family:sans-serif;' class='btn btn-default'>Help me fix this...</span></div>")
-                    button.click () =>
+            # This is entirely for the ChatGPT help buttons:
+            cur = output.data('stderr')
+            if not cur
+                buttonsContainer = $("<div style='margin: 10px 0;'>")
+
+                # Add hint button if enabled
+                if chatgpt.isHintEnabled(@project_id)
+                    hintButton = $("<span title='Get a hint to help fix this...' style='font-family:sans-serif; margin-right: 5px;' class='btn btn-default'>Give me a hint...</span>")
+                    hintButton.click () =>
+                        chatgpt.giveMeAHint
+                            codemirror : @focused_codemirror()
+                            stderr     : output.data('stderr')
+                            uuid       : output.data('uuid')
+                            project_id : @project_id
+                            path       : @filename
+                    buttonsContainer.append(hintButton)
+
+                # Add solution button if enabled
+                if chatgpt.isEnabled(@project_id)
+                    solutionButton = $("<span title='Get help to fix this...' style='font-family:sans-serif;' class='btn btn-default'>Help me fix this...</span>")
+                    solutionButton.click () =>
                         chatgpt.helpMeFix
                             codemirror : @focused_codemirror()
                             stderr     : output.data('stderr')
                             uuid       : output.data('uuid')
                             project_id : @project_id
                             path       : @filename
-                    output.append(button);
+                    buttonsContainer.append(solutionButton)
+
+                # Only append container if it has buttons
+                if buttonsContainer.children().length > 0
+                    output.append(buttonsContainer)
                     output.data('stderr', mesg.stderr)
-                else
-                    output.data('stderr', cur + mesg.stderr)
+            else
+                output.data('stderr', cur + mesg.stderr)
 
             output.append($("<span class='sagews-output-stderr'>").text(mesg.stderr))