@plmbr/notebook-intelligence 5.0.0

package/src/command-ids.ts

@@ -0,0 +1,67 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+
+// Centralized command-id constants for the JupyterLab plugin. Hoisted out
+// of `src/index.ts` so non-JL modules (and Jest tests) can import them
+// without pulling the JupyterLab packages into their dependency graph.
+
+export namespace CommandIDs {
+  export const chatuserInput = 'notebook-intelligence:chat-user-input';
+  export const insertAtCursor = 'notebook-intelligence:insert-at-cursor';
+  export const addCodeAsNewCell = 'notebook-intelligence:add-code-as-new-cell';
+  export const createNewFile = 'notebook-intelligence:create-new-file';
+  export const createNewNotebookFromPython =
+    'notebook-intelligence:create-new-notebook-from-py';
+  export const renameNotebook = 'notebook-intelligence:rename-notebook';
+  export const addCodeCellToNotebook =
+    'notebook-intelligence:add-code-cell-to-notebook';
+  export const addMarkdownCellToNotebook =
+    'notebook-intelligence:add-markdown-cell-to-notebook';
+  export const editorGenerateCode =
+    'notebook-intelligence:editor-generate-code';
+  export const editorExplainThisCode =
+    'notebook-intelligence:editor-explain-this-code';
+  export const editorFixThisCode = 'notebook-intelligence:editor-fix-this-code';
+  export const editorExplainThisOutput =
+    'notebook-intelligence:editor-explain-this-output';
+  export const editorTroubleshootThisOutput =
+    'notebook-intelligence:editor-troubleshoot-this-output';
+  export const editorAskAboutThisOutput =
+    'notebook-intelligence:editor-ask-about-this-output';
+  export const openGitHubCopilotLoginDialog =
+    'notebook-intelligence:open-github-copilot-login-dialog';
+  export const openConfigurationDialog =
+    'notebook-intelligence:open-configuration-dialog';
+  export const addMarkdownCellToActiveNotebook =
+    'notebook-intelligence:add-markdown-cell-to-active-notebook';
+  export const addCodeCellToActiveNotebook =
+    'notebook-intelligence:add-code-cell-to-active-notebook';
+  export const deleteCellAtIndex = 'notebook-intelligence:delete-cell-at-index';
+  export const insertCellAtIndex = 'notebook-intelligence:insert-cell-at-index';
+  export const getCellTypeAndSource =
+    'notebook-intelligence:get-cell-type-and-source';
+  export const setCellTypeAndSource =
+    'notebook-intelligence:set-cell-type-and-source';
+  export const getNumberOfCells = 'notebook-intelligence:get-number-of-cells';
+  export const getCellOutput = 'notebook-intelligence:get-cell-output';
+  export const runCellAtIndex = 'notebook-intelligence:run-cell-at-index';
+  export const getCurrentFileContent =
+    'notebook-intelligence:get-current-file-content';
+  export const setCurrentFileContent =
+    'notebook-intelligence:set-current-file-content';
+  export const openMCPConfigEditor =
+    'notebook-intelligence:open-mcp-config-editor';
+  export const showFormInputDialog =
+    'notebook-intelligence:show-form-input-dialog';
+  export const runCommandInTerminal =
+    'notebook-intelligence:run-command-in-terminal';
+  export const openClaudeCodeLauncher =
+    'notebook-intelligence:open-claude-code-launcher';
+  export const openOpenCodeLauncher =
+    'notebook-intelligence:open-opencode-launcher';
+  export const openPiLauncher = 'notebook-intelligence:open-pi-launcher';
+  export const openGitHubCopilotCliLauncher =
+    'notebook-intelligence:open-github-copilot-cli-launcher';
+  export const openCodexLauncher = 'notebook-intelligence:open-codex-launcher';
+  export const showTour = 'notebook-intelligence:show-tour';
+  export const focusChatInput = 'notebook-intelligence:focus-chat-input';
+}

package/src/components/ask-user-question.tsx

@@ -0,0 +1,151 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+
+import React, { useId, useState } from 'react';
+
+export function AskUserQuestion(props: any) {
+  const userQuestions = props.userQuestions.content;
+  const [selectedAnswers, setSelectedAnswers] = useState<{
+    [key: string]: string[];
+  }>({});
+
+  // Form-scoped id prefix so DOM ids stay unique even when two questions
+  // share label text (or several AskUserQuestion forms render in the
+  // same chat transcript). React.useId() is the purpose-built primitive
+  // here: stable for the component's lifetime, SSR-safe, and survives
+  // StrictMode double-render without producing mismatched id/htmlFor
+  // pairs (a Math.random fallback could mis-pair under cache eviction).
+  // The server-provided identifier is preferred when present so two
+  // remounts of the same form keep the same DOM ids.
+  const reactId = useId();
+  const serverId = userQuestions.identifier?.id;
+  const formIdPrefix =
+    typeof serverId === 'string' && serverId.length > 0
+      ? `nbi-auq-${serverId}`
+      : `nbi-auq${reactId}`;
+
+  const onOptionSelected = (question: any, option: any) => {
+    if (question.multiSelect) {
+      if (selectedAnswers[question.question]?.includes(option.label)) {
+        setSelectedAnswers({
+          ...selectedAnswers,
+          [question.question]: (
+            selectedAnswers[question.question] ?? []
+          ).filter((o: any) => o !== option.label)
+        });
+      } else {
+        setSelectedAnswers({
+          ...selectedAnswers,
+          [question.question]: [
+            ...(selectedAnswers[question.question] ?? []),
+            option.label
+          ]
+        });
+      }
+    } else {
+      setSelectedAnswers({
+        ...selectedAnswers,
+        [question.question]: [option.label]
+      });
+    }
+  };
+
+  return (
+    <>
+      {userQuestions.title ? (
+        <div>
+          <b>{userQuestions.title}</b>
+        </div>
+      ) : null}
+      {userQuestions.message ? <div>{userQuestions.message}</div> : null}
+      <form
+        className="ask-user-question-form"
+        onSubmit={event => {
+          event.preventDefault();
+          props.onSubmit(selectedAnswers);
+        }}
+      >
+        {userQuestions.questions.map((question: any, qIndex: number) => {
+          const questionDomId = `${formIdPrefix}-q${qIndex}`;
+          // A single-select group is a radio group with a shared name so
+          // screen readers announce "1 of N selected" rather than
+          // treating each option as an independent checkbox. The wrapper
+          // role mirrors the input type: radiogroup for radios, group
+          // (the ARIA-1.2 fallback when no dedicated checkbox-group role
+          // exists) for checkboxes.
+          const inputType = question.multiSelect ? 'checkbox' : 'radio';
+          const groupRole = question.multiSelect ? 'group' : 'radiogroup';
+          return (
+            <div
+              className="ask-user-question-container"
+              key={questionDomId}
+              role={groupRole}
+              aria-labelledby={`${questionDomId}-label`}
+            >
+              <div
+                className="ask-user-question-question"
+                id={`${questionDomId}-label`}
+              >
+                {question.question}
+              </div>
+              <div className="ask-user-question-header">{question.header}</div>
+              <div className="ask-user-question-options">
+                {question.options.map((option: any, oIndex: number) => {
+                  const optionDomId = `${questionDomId}-o${oIndex}`;
+                  return (
+                    <div className="ask-user-question-option" key={optionDomId}>
+                      <div className="ask-user-question-option-input-container">
+                        <input
+                          id={optionDomId}
+                          name={questionDomId}
+                          type={inputType}
+                          checked={
+                            selectedAnswers[question.question]?.includes(
+                              option.label
+                            ) ?? false
+                          }
+                          onChange={() => onOptionSelected(question, option)}
+                        />
+                        <label
+                          htmlFor={optionDomId}
+                          className="ask-user-question-option-label-container"
+                        >
+                          <div className="ask-user-question-option-label">
+                            {option.label}
+                          </div>
+                          <div className="ask-user-question-option-description">
+                            {option.description}
+                          </div>
+                        </label>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+        <div className="ask-user-question-footer">
+          <button
+            type="submit"
+            className="jp-Dialog-button jp-mod-accept jp-mod-styled"
+          >
+            <div className="jp-Dialog-buttonLabel">
+              {userQuestions.submitLabel}
+            </div>
+          </button>
+          <button
+            type="button"
+            className="jp-Dialog-button jp-mod-reject jp-mod-styled"
+            onClick={() => {
+              props.onCancel();
+            }}
+          >
+            <div className="jp-Dialog-buttonLabel">
+              {userQuestions.cancelLabel}
+            </div>
+          </button>
+        </div>
+      </form>
+    </>
+  );
+}

package/src/components/checkbox.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+
+import React from 'react';
+
+import { MdOutlineCheckBoxOutlineBlank, MdCheckBox } from '../icons';
+
+export function CheckBoxItem(props: any) {
+  const indent = props.indent || 0;
+  const disabled = props.disabled || false;
+  const checked = !!props.checked;
+
+  const activate = (event: React.SyntheticEvent) => {
+    if (!disabled) {
+      props.onClick(event);
+    }
+  };
+
+  // Custom checkbox widget. Tracks the WAI-ARIA pattern: role='checkbox'
+  // + aria-checked + tabIndex=0 + Space/Enter to toggle. Disabled state
+  // is exposed via aria-disabled so the element stays focusable; a
+  // screen reader user can still announce "checkbox, disabled" and hear
+  // what's off without being able to toggle it.
+  return (
+    <div
+      className={`checkbox-item checkbox-item-indent-${indent} ${props.header ? 'checkbox-item-header' : ''}`}
+      title={props.tooltip || props.title || ''}
+      role="checkbox"
+      aria-checked={checked}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : 0}
+      onClick={activate}
+      onKeyDown={event => {
+        if (event.key === ' ' || event.key === 'Enter') {
+          // Space scrolls the page by default, Enter is a no-op on a
+          // <div>; prevent both so the checkbox can own them.
+          event.preventDefault();
+          activate(event);
+        }
+      }}
+    >
+      <div className="checkbox-item-toggle">
+        {checked ? (
+          <MdCheckBox
+            className="checkbox-icon"
+            style={{ opacity: disabled ? 0.5 : 1 }}
+            aria-hidden="true"
+          />
+        ) : (
+          <MdOutlineCheckBoxOutlineBlank
+            className="checkbox-icon"
+            style={{ opacity: disabled ? 0.5 : 1 }}
+            aria-hidden="true"
+          />
+        )}
+        <span style={{ opacity: disabled ? 0.5 : 1 }}>{props.label}</span>
+      </div>
+      {props.title && (
+        <div className="checkbox-item-description">{props.title}</div>
+      )}
+    </div>
+  );
+}