jupyterlab-codex-sidebar 0.1.4 → 0.1.6

package/src/codexChatRender.tsx

@@ -0,0 +1,376 @@
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import DOMPurify from 'dompurify';
+import hljs from 'highlight.js/lib/core';
+import bashLang from 'highlight.js/lib/languages/bash';
+import cssLang from 'highlight.js/lib/languages/css';
+import diffLang from 'highlight.js/lib/languages/diff';
+import javascriptLang from 'highlight.js/lib/languages/javascript';
+import jsonLang from 'highlight.js/lib/languages/json';
+import markdownLang from 'highlight.js/lib/languages/markdown';
+import pythonLang from 'highlight.js/lib/languages/python';
+import sqlLang from 'highlight.js/lib/languages/sql';
+import typescriptLang from 'highlight.js/lib/languages/typescript';
+import xmlLang from 'highlight.js/lib/languages/xml';
+import yamlLang from 'highlight.js/lib/languages/yaml';
+import { formatSelectionPreviewTextForDisplay } from './codexChatDocumentUtils';
+
+hljs.registerLanguage('bash', bashLang);
+hljs.registerLanguage('css', cssLang);
+hljs.registerLanguage('diff', diffLang);
+hljs.registerLanguage('javascript', javascriptLang);
+hljs.registerLanguage('json', jsonLang);
+hljs.registerLanguage('markdown', markdownLang);
+hljs.registerLanguage('python', pythonLang);
+hljs.registerLanguage('sql', sqlLang);
+hljs.registerLanguage('typescript', typescriptLang);
+hljs.registerLanguage('xml', xmlLang);
+hljs.registerLanguage('yaml', yamlLang);
+
+type MarkdownParser = {
+  parse: (markdown: string) => string;
+};
+
+let markdownParser: MarkdownParser | null = null;
+let markdownParserPromise: Promise<MarkdownParser> | null = null;
+
+async function ensureMarkdownParser(): Promise<MarkdownParser> {
+  if (markdownParser) {
+    return markdownParser;
+  }
+  if (!markdownParserPromise) {
+    markdownParserPromise = Promise.all([import('marked'), import('marked-katex-extension')])
+      .then(([markedModule, katexModule]) => {
+        const marked = markedModule.marked;
+        const markedKatex = katexModule.default;
+        marked.use(
+          markedKatex({
+            throwOnError: false
+          })
+        );
+        const parser: MarkdownParser = {
+          parse(markdown: string): string {
+            return marked.parse(normalizeMathDelimiters(markdown), {
+              gfm: true,
+              breaks: true
+            }) as string;
+          }
+        };
+        markdownParser = parser;
+        return parser;
+      })
+      .catch(error => {
+        markdownParserPromise = null;
+        throw error;
+      });
+  }
+  return markdownParserPromise;
+}
+
+type MessageBlock =
+  | { kind: 'text'; text: string }
+  | { kind: 'code'; lang: string; code: string };
+
+async function copyToClipboard(text: string): Promise<boolean> {
+  if (!text) {
+    return false;
+  }
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    try {
+      const textarea = document.createElement('textarea');
+      textarea.value = text;
+      textarea.setAttribute('readonly', 'true');
+      textarea.style.position = 'fixed';
+      textarea.style.left = '-9999px';
+      document.body.appendChild(textarea);
+      textarea.select();
+      const ok = document.execCommand('copy');
+      document.body.removeChild(textarea);
+      return ok;
+    } catch {
+      return false;
+    }
+  }
+}
+
+export async function blobToDataUrl(blob: Blob): Promise<string> {
+  return await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ''));
+    reader.onerror = () => reject(reader.error || new Error('Failed to read blob'));
+    reader.readAsDataURL(blob);
+  });
+}
+
+export function splitFencedCodeBlocks(text: string): MessageBlock[] {
+  const blocks: MessageBlock[] = [];
+  let rest = text;
+
+  while (rest.length > 0) {
+    const fenceStart = rest.indexOf('```');
+    if (fenceStart === -1) {
+      blocks.push({ kind: 'text', text: rest });
+      break;
+    }
+
+    if (fenceStart > 0) {
+      blocks.push({ kind: 'text', text: rest.slice(0, fenceStart) });
+    }
+
+    const afterFence = rest.slice(fenceStart + 3);
+    const fenceEnd = afterFence.indexOf('```');
+    if (fenceEnd === -1) {
+      blocks.push({ kind: 'text', text: rest.slice(fenceStart) });
+      break;
+    }
+
+    const raw = afterFence.slice(0, fenceEnd);
+    rest = afterFence.slice(fenceEnd + 3);
+
+    let lang = '';
+    let code = raw;
+    const firstNewline = raw.indexOf('\n');
+    if (firstNewline !== -1) {
+      const candidate = raw.slice(0, firstNewline).trim();
+      if (candidate.length > 0 && candidate.length <= 20 && /^[A-Za-z0-9+#_.-]+$/.test(candidate)) {
+        lang = candidate;
+        code = raw.slice(firstNewline + 1);
+      }
+    }
+    blocks.push({ kind: 'code', lang, code: code.replace(/\n$/, '') });
+  }
+
+  return blocks.filter(block => (block.kind === 'text' ? block.text.length > 0 : true));
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function normalizeHighlightLanguage(lang: string): string {
+  const normalized = lang.trim().toLowerCase();
+  if (!normalized) {
+    return '';
+  }
+  const aliasMap: Record<string, string> = {
+    js: 'javascript',
+    jsx: 'javascript',
+    mjs: 'javascript',
+    cjs: 'javascript',
+    ts: 'typescript',
+    tsx: 'typescript',
+    py: 'python',
+    sh: 'bash',
+    shell: 'bash',
+    zsh: 'bash',
+    yml: 'yaml',
+    'c++': 'cpp',
+    'c#': 'csharp',
+    'objective-c': 'objectivec',
+    objc: 'objectivec'
+  };
+  return aliasMap[normalized] ?? normalized;
+}
+
+function inferHighlightLanguage(code: string): string {
+  const source = code.trim();
+  if (!source) {
+    return '';
+  }
+  const pythonSignals = [
+    /^\s*from\s+[A-Za-z0-9_.]+\s+import\s+/m,
+    /^\s*import\s+[A-Za-z0-9_.]+/m,
+    /^\s*def\s+[A-Za-z_][A-Za-z0-9_]*\s*\(/m,
+    /^\s*class\s+[A-Za-z_][A-Za-z0-9_]*\s*(\(|:)/m,
+    /\bNone\b|\bTrue\b|\bFalse\b/,
+    /:\s*$/m
+  ];
+  if (pythonSignals.some(pattern => pattern.test(source))) {
+    return 'python';
+  }
+  return '';
+}
+
+export function renderHighlightedCodeToSafeHtml(code: string, lang: string): string {
+  const fallback = escapeHtml(code);
+  let highlighted = fallback;
+  try {
+    const normalizedLang = normalizeHighlightLanguage(lang);
+    if (normalizedLang && hljs.getLanguage(normalizedLang)) {
+      highlighted = hljs.highlight(code, { language: normalizedLang, ignoreIllegals: true }).value;
+    } else {
+      const inferredLang = inferHighlightLanguage(code);
+      if (inferredLang && hljs.getLanguage(inferredLang)) {
+        highlighted = hljs.highlight(code, { language: inferredLang, ignoreIllegals: true }).value;
+      } else {
+        highlighted = hljs.highlightAuto(code).value;
+      }
+    }
+  } catch {
+    highlighted = fallback;
+  }
+  try {
+    return DOMPurify.sanitize(highlighted, { USE_PROFILES: { html: true } });
+  } catch {
+    return escapeHtml(highlighted);
+  }
+}
+
+export function renderMarkdownToSafeHtml(markdown: string): string {
+  if (!markdown) {
+    return '';
+  }
+  const parser = markdownParser;
+  if (!parser) {
+    return escapeHtml(markdown).replace(/\n/g, '<br />');
+  }
+  let html = '';
+  try {
+    html = parser.parse(markdown);
+  } catch {
+    return escapeHtml(markdown).replace(/\n/g, '<br />');
+  }
+  try {
+    return DOMPurify.sanitize(html, { USE_PROFILES: { html: true } });
+  } catch {
+    return escapeHtml(markdown).replace(/\n/g, '<br />');
+  }
+}
+
+function normalizeMathDelimiters(markdown: string): string {
+  const normalizedEscapedBlock = markdown.replace(
+    /(^|[^\\])\\\[([\s\S]*?)\\\]/g,
+    (_match, prefix: string, body: string) => `${prefix}\n$$\n${body}\n$$\n`
+  );
+
+  const normalizedEscapedInline = normalizedEscapedBlock.replace(
+    /(^|[^\\])\\\((.+?)\\\)/g,
+    (_match, prefix: string, body: string) => `${prefix}$${body}$`
+  );
+
+  return normalizedEscapedInline.replace(
+    /(^|\n)[ \t]*\[\s*\n([\s\S]*?)\n[ \t]*\](?=\n|$)/g,
+    (_match, prefix: string, body: string) => {
+      const trimmed = body.trim();
+      if (!looksLikeLatexMath(trimmed)) {
+        return `${prefix}[\n${body}\n]`;
+      }
+      return `${prefix}\n$$\n${trimmed}\n$$\n`;
+    }
+  );
+}
+
+function looksLikeLatexMath(value: string): boolean {
+  if (!value) {
+    return false;
+  }
+  return /\\[A-Za-z]+/.test(value) || /[_^{}]/.test(value);
+}
+
+export function StatusPill(props: { status: 'disconnected' | 'ready' | 'running' }): JSX.Element {
+  const label =
+    props.status === 'disconnected' ? 'Disconnected' : props.status === 'running' ? 'Running' : 'Ready';
+  return (
+    <span
+      className={`jp-CodexStatusPill jp-CodexStatusPill-${props.status}`}
+      role="img"
+      aria-label={label}
+      title={label}
+    >
+      <span className="jp-CodexStatusPill-dot" aria-hidden="true" />
+    </span>
+  );
+}
+
+const CodeBlock = memo(function CodeBlock(props: { lang: string; code: string; canCopy: boolean }): JSX.Element {
+  const [copied, setCopied] = useState(false);
+  const highlightedCode = useMemo(
+    () => renderHighlightedCodeToSafeHtml(props.code, props.lang),
+    [props.code, props.lang]
+  );
+
+  async function onCopy(): Promise<void> {
+    const ok = await copyToClipboard(props.code);
+    if (!ok) {
+      return;
+    }
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 900);
+  }
+
+  return (
+    <div className="jp-CodexCodeBlockWrap">
+      <div className="jp-CodexCodeBlockBar">
+        <span className="jp-CodexCodeBlockMeta">
+          {props.lang ? <span className="jp-CodexCodeBlockLang">{props.lang}</span> : <span />}
+        </span>
+        {props.canCopy && (
+          <button
+            className="jp-CodexBtn jp-CodexBtn-ghost jp-CodexBtn-xs jp-CodexCodeBlockCopyBtn"
+            onClick={() => void onCopy()}
+          >
+            {copied ? 'Copied' : 'Copy'}
+          </button>
+        )}
+      </div>
+      <pre className="jp-CodexCodeBlock">
+        <code className="hljs" dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+      </pre>
+    </div>
+  );
+});
+
+CodeBlock.displayName = 'CodeBlock';
+
+export const MessageText = memo(function MessageText(props: { text: string; canCopyCode?: boolean }): JSX.Element {
+  const [, setMarkdownParserVersion] = useState(0);
+
+  useEffect(() => {
+    let disposed = false;
+    void ensureMarkdownParser()
+      .then(() => {
+        if (!disposed) {
+          setMarkdownParserVersion(version => version + 1);
+        }
+      })
+      .catch(() => undefined);
+    return () => {
+      disposed = true;
+    };
+  }, []);
+
+  const blocks = splitFencedCodeBlocks(props.text);
+  return (
+    <div className="jp-CodexChat-text">
+      {blocks.map((block, idx) => {
+        if (block.kind === 'code') {
+          return <CodeBlock key={idx} lang={block.lang} code={block.code} canCopy={Boolean(props.canCopyCode)} />;
+        }
+        const html = renderMarkdownToSafeHtml(block.text);
+        return <div key={idx} className="jp-CodexMarkdown" dangerouslySetInnerHTML={{ __html: html }} />;
+      })}
+    </div>
+  );
+}, (a, b) => a.text === b.text && Boolean(a.canCopyCode) === Boolean(b.canCopyCode));
+
+MessageText.displayName = 'MessageText';
+
+export function SelectionPreviewCode(props: { code: string }): JSX.Element {
+  const displayCode = formatSelectionPreviewTextForDisplay(props.code);
+  const highlightedCode = useMemo(
+    () => renderHighlightedCodeToSafeHtml(displayCode, ''),
+    [displayCode]
+  );
+  return (
+    <pre className="jp-CodexCodeBlock jp-CodexChat-selectionCode">
+      <code className="hljs" dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+    </pre>
+  );
+}

package/src/codexChatSessionFactory.ts

@@ -0,0 +1,79 @@
+export type TextRole = 'user' | 'assistant' | 'system';
+
+export type SessionCreateOptions = {
+  threadId?: string;
+  reuseStoredThread?: boolean;
+  sessionKey?: string;
+};
+
+export type SessionFactoryDefaults<TModelOption extends string, TReasoningOption extends string, TSandboxMode extends string> = {
+  readStoredThreadId: (path: string, sessionKey: string) => string;
+  readDefaultModelOption: () => TModelOption;
+  readDefaultReasoningEffortOption: () => TReasoningOption;
+  readDefaultSandboxModeOption: () => TSandboxMode;
+  normalizeSystemText: (role: TextRole, text: string) => string;
+};
+
+export function createSession<TSession, TModelOption extends string, TReasoningOption extends string, TSandboxMode extends string>(
+  path: string,
+  intro: string,
+  options: SessionCreateOptions | undefined,
+  defaults: SessionFactoryDefaults<TModelOption, TReasoningOption, TSandboxMode>
+): TSession {
+  const generateId = () =>
+    typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+      ? crypto.randomUUID()
+      : `${Date.now()}-${Math.floor(Math.random() * 0x100000000).toString(16)}`;
+
+  const defaultIntro = 'Session started';
+  const systemText = defaults.normalizeSystemText('system', intro || defaultIntro);
+  const requestedThreadId = (options?.threadId || '').trim();
+  const storedThreadId = options?.reuseStoredThread === false ? '' : defaults.readStoredThreadId(path, options?.sessionKey || '');
+  const threadId = requestedThreadId || storedThreadId || generateId();
+
+  return {
+    threadId,
+    runState: 'ready',
+    activeRunId: null,
+    runStartedAt: null,
+    progress: '',
+    progressKind: '',
+    messages: [
+      {
+        kind: 'text',
+        id: generateId(),
+        role: 'system',
+        text: systemText
+      }
+    ],
+    pairedOk: null,
+    pairedPath: '',
+    pairedOsPath: '',
+    pairedMessage: '',
+    notebookMode: null,
+    selectedModelOption: defaults.readDefaultModelOption(),
+    selectedReasoningEffort: defaults.readDefaultReasoningEffortOption(),
+    selectedSandboxMode: defaults.readDefaultSandboxModeOption(),
+    effectiveSandboxMode: null,
+    conversationMode: 'resume'
+  } as unknown as TSession;
+}
+
+export function createThreadResetSession<TSession, TModelOption extends string, TReasoningOption extends string, TSandboxMode extends string>(
+  path: string,
+  sessionKey: string,
+  threadId: string,
+  defaults: SessionFactoryDefaults<TModelOption, TReasoningOption, TSandboxMode>
+): TSession {
+  const time = new Date().toLocaleTimeString();
+  return createSession<TSession, TModelOption, TReasoningOption, TSandboxMode>(
+    path,
+    `Session started (${time})`,
+    {
+      threadId,
+      reuseStoredThread: false,
+      sessionKey
+    },
+    defaults
+  );
+}

package/src/codexChatSessionKey.ts

@@ -0,0 +1,16 @@
+export function makeSessionKey(path: string): string {
+  const normalizedPath = (path || '').trim();
+  if (!normalizedPath) {
+    return '';
+  }
+  return normalizedPath;
+}
+
+export function resolveSessionKey(path: string): string {
+  return makeSessionKey(path || '');
+}
+
+export function resolveCurrentSessionKey(path: string): string {
+  return resolveSessionKey(path);
+}
+

package/src/codexChatStorage.ts

@@ -0,0 +1,36 @@
+export function safeLocalStorageGet(key: string): string | null {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+export function hasStoredValue(key: string): boolean {
+  return safeLocalStorageGet(key) !== null;
+}
+
+export function safeLocalStorageSet(key: string, value: string): void {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+    // Ignore storage failures; settings still work for current session.
+  }
+}
+
+export function safeLocalStorageRemove(key: string): void {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  try {
+    window.localStorage.removeItem(key);
+  } catch {
+    // Ignore storage failures; settings still work for current session.
+  }
+}

package/src/codexSessionResolver.ts

@@ -0,0 +1,56 @@
+import { makeSessionKey } from './codexChatSessionKey';
+
+export type MessageLike = {
+  notebookPath?: unknown;
+  sessionContextKey?: unknown;
+  runId?: unknown;
+};
+
+export type ResolveMessageSessionKeyParams = {
+  message: MessageLike;
+  runToSessionKey: Map<string, string>;
+  activeSessionKeyByPath: Map<string, string>;
+  currentSessionKey: string;
+};
+
+export function resolveMessageSessionKey(params: ResolveMessageSessionKeyParams): string {
+  const { message, runToSessionKey, activeSessionKeyByPath, currentSessionKey } = params;
+  const messagePath = typeof message?.notebookPath === 'string' ? message.notebookPath : '';
+  const sessionContextKey = typeof message?.sessionContextKey === 'string' ? message.sessionContextKey : '';
+  if (sessionContextKey) {
+    return sessionContextKey;
+  }
+
+  const runId = typeof message?.runId === 'string' ? message.runId : '';
+  if (runId) {
+    const mapped = runToSessionKey.get(runId);
+    if (mapped) {
+      return mapped;
+    }
+  }
+
+  if (messagePath) {
+    if (runId) {
+      const activeSessionKey = activeSessionKeyByPath.get(messagePath);
+      if (activeSessionKey) {
+        runToSessionKey.set(runId, activeSessionKey);
+        return activeSessionKey;
+      }
+    }
+    const activeSessionKey = activeSessionKeyByPath.get(messagePath);
+    if (activeSessionKey) {
+      return activeSessionKey;
+    }
+    return makeSessionKey(messagePath);
+  }
+
+  if (runId) {
+    const mapped = runToSessionKey.get(runId);
+    if (mapped) {
+      return mapped;
+    }
+  }
+
+  return currentSessionKey;
+}
+