jupyter-chat-components 0.2.0 → 0.4.0

package/src/components/inline-diff.tsx

@@ -5,7 +5,11 @@ import * as React from 'react';
 import { structuredPatch } from 'diff';
 import type { StructuredPatchHunk } from 'diff';
 
-import { IInlineDiff, IInlineDiffMetadata } from '../token';
+import {
+  IInlineDiff,
+  IInlineDiffMetadata,
+  IInlineDiffNotebookCellTarget
+} from '../token';
 
 /** Maximum number of rendered lines before truncation. */
 const MAX_DIFF_LINES = 20;
@@ -25,6 +29,65 @@ export function getDiffFilename(path: string): string {
   return PathExt.basename(path);
 }
 
+function getNotebookCellLabel(target: IInlineDiffNotebookCellTarget): string {
+  if (typeof target.cellIndex === 'number') {
+    return `Cell ${target.cellIndex + 1}`;
+  }
+
+  if (target.cellId) {
+    return `Cell ${target.cellId}`;
+  }
+
+  return 'Notebook Cell';
+}
+
+function getInlineDiffPatchPath(diff: IInlineDiff): string {
+  const target = diff.target;
+
+  if (target.kind === 'file') {
+    return target.path;
+  }
+
+  return [target.notebookPath, target.cellId ?? target.cellIndex]
+    .filter(value => value !== undefined && value !== '')
+    .join('#');
+}
+
+export function getInlineDiffLabel(diff: IInlineDiff): string {
+  if (diff.label) {
+    return diff.label;
+  }
+
+  const target = diff.target;
+
+  if (target.kind === 'file') {
+    return getDiffFilename(target.path);
+  }
+
+  const notebookName = getDiffFilename(target.notebookPath);
+  const cellLabel = getNotebookCellLabel(target);
+
+  return [notebookName, cellLabel].join(' · ');
+}
+
+export function getInlineDiffTitle(diff: IInlineDiff): string {
+  const target = diff.target;
+
+  if (target.kind === 'file') {
+    return target.path;
+  }
+
+  const cellLabel = getNotebookCellLabel(target);
+  const cellIdLabel =
+    typeof target.cellIndex === 'number' && target.cellId
+      ? `Cell ID ${target.cellId}`
+      : null;
+
+  return [target.notebookPath, cellLabel, cellIdLabel]
+    .filter(part => part !== null && part !== undefined && part !== '')
+    .join(' · ');
+}
+
 function toLineInfo(
   type: 'added' | 'removed' | 'context',
   text: string,
@@ -79,9 +142,10 @@ function buildDiffLinesFromHunk(
 }
 
 function buildDiffLines(diff: IInlineDiff): IDiffLineInfo[] {
+  const patchPath = getInlineDiffPatchPath(diff);
   const patch = structuredPatch(
-    diff.path,
-    diff.path,
+    patchPath,
+    patchPath,
     diff.oldText ?? '',
     diff.newText,
     undefined,
@@ -102,7 +166,8 @@ function DiffBlock({
   diff: IInlineDiff;
   trans: TranslationBundle;
 }): JSX.Element {
-  const filename = getDiffFilename(diff.path);
+  const filename = getInlineDiffLabel(diff);
+  const title = getInlineDiffTitle(diff);
   const [expanded, setExpanded] = React.useState(false);
   const allLines = React.useMemo(() => buildDiffLines(diff), [diff]);
   const canTruncate = allLines.length > MAX_DIFF_LINES;
@@ -112,7 +177,7 @@ function DiffBlock({
 
   return (
     <div className="jp-ai-inline-diff-block">
-      <div className="jp-ai-inline-diff-header" title={diff.path}>
+      <div className="jp-ai-inline-diff-header" title={title}>
         {filename}
       </div>
       <div className="jp-ai-inline-diff-content">
@@ -157,7 +222,7 @@ function DiffBlock({
 }
 
 /**
- * React component for rendering one or more inline file diffs.
+ * React component for rendering one or more inline diffs.
  */
 export const InlineDiff: React.FC<IInlineDiffProps> = ({ diffs, trans }) => {
   const transBundle = trans ?? nullTranslator.load('jupyterlab');
@@ -166,7 +231,7 @@ export const InlineDiff: React.FC<IInlineDiffProps> = ({ diffs, trans }) => {
     <div className="jp-ai-inline-diff-container">
       {diffs.map((diff, index) => (
         <DiffBlock
-          key={`${diff.path}-${index}`}
+          key={`${getInlineDiffPatchPath(diff)}-${index}`}
           diff={diff}
           trans={transBundle}
         />

package/src/components/message-queue.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+import {
+  IComponentProps,
+  IMessageQueueMetadata,
+  RemoveQueuedMessage
+} from '../token';
+
+/**
+ * Props for the MessageQueue component.
+ */
+export interface IMessageQueueProps
+  extends IComponentProps, IMessageQueueMetadata {
+  removeQueuedMessage?: RemoveQueuedMessage;
+}
+
+/**
+ * React component that displays a list of queued messages by
+ * showing each pending message as a bubble in the chat
+ */
+export const MessageQueue: React.FC<IMessageQueueProps> = ({
+  messages,
+  targetId,
+  trans,
+  removeQueuedMessage
+}) => {
+  if (!messages || messages.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="jp-chat-message-queue">
+      {messages.map(msg => (
+        <div key={msg.id} className="jp-chat-message-queue-bubble">
+          <span className="jp-chat-message-queue-text">{msg.body}</span>
+          {removeQueuedMessage && targetId && (
+            <button
+              className="jp-chat-message-queue-remove"
+              onClick={() => removeQueuedMessage(targetId, msg.id)}
+              title={trans.__('Remove from queue')}
+              type="button"
+            >
+              ✕
+            </button>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/factory.tsx

@@ -8,14 +8,22 @@ import { ReadonlyPartialJSONValue } from '@lumino/coreutils';
 
 import * as React from 'react';
 
-import { InlineDiff, ToolCall } from './components';
+import {
+  GroupedToolCalls,
+  InlineDiff,
+  MessageQueue,
+  ToolCall
+} from './components';
 
 import { ComponentRegistry } from './registry';
 
 import {
   IComponentRegistry,
   IComponentsRendererFactory,
-  ToolCallApproval
+  OpenToolCallPath,
+  RemoveQueuedMessage,
+  ToolCallApproval,
+  ToolCallPermissionDecision
 } from './token';
 
 /**
@@ -41,6 +49,21 @@ interface IComponentsRendererOptions extends IRenderMime.IRendererOptions {
    */
   toolCallApproval?: ToolCallApproval;
 
+  /**
+   * The callback to remove a queued message.
+   */
+  removeQueuedMessage?: RemoveQueuedMessage;
+
+  /**
+   * The callback to submit a permission decision for grouped tool calls.
+   */
+  toolCallPermissionDecision?: ToolCallPermissionDecision;
+
+  /**
+   * The callback to open a path referenced by grouped tool calls.
+   */
+  openToolCallPath?: OpenToolCallPath;
+
   /**
    * The component registry.
    */
@@ -62,6 +85,9 @@ export class ComponentsRenderer
     this._trans = (options.translator ?? nullTranslator).load('jupyterlab');
     this._mimeType = options.mimeType;
     this._toolCallApproval = options.toolCallApproval;
+    this._removeQueuedMessage = options.removeQueuedMessage;
+    this._toolCallPermissionDecision = options.toolCallPermissionDecision;
+    this._openToolCallPath = options.openToolCallPath;
     this._registry = options.registry;
     this.addClass(CLASS_NAME);
   }
@@ -93,12 +119,25 @@ export class ComponentsRenderer
       componentsProps.toolCallApproval = this._toolCallApproval;
     }
 
+    if (this._data === 'message-queue') {
+      componentsProps.removeQueuedMessage = this._removeQueuedMessage;
+    }
+
+    if (this._data === 'grouped-tool-calls') {
+      componentsProps.toolCallPermissionDecision =
+        this._toolCallPermissionDecision;
+      componentsProps.openToolCallPath = this._openToolCallPath;
+    }
+
     return <Component {...componentsProps} trans={this._trans} />;
   }
 
   private _trans: TranslationBundle;
   private _mimeType: string;
   private _toolCallApproval?: ToolCallApproval;
+  private _removeQueuedMessage?: RemoveQueuedMessage;
+  private _toolCallPermissionDecision?: ToolCallPermissionDecision;
+  private _openToolCallPath?: OpenToolCallPath;
   private _registry: IComponentRegistry;
   private _data: string | null = null;
   private _metadata: ReadonlyPartialJSONValue | null = null;
@@ -113,17 +152,25 @@ export class RendererFactory implements IComponentsRendererFactory {
   readonly defaultRank = 100;
   readonly registry: ComponentRegistry;
   toolCallApproval: ToolCallApproval = null;
+  removeQueuedMessage: RemoveQueuedMessage = null;
+  toolCallPermissionDecision: ToolCallPermissionDecision = null;
+  openToolCallPath: OpenToolCallPath = null;
 
   constructor() {
     this.registry = new ComponentRegistry();
     this.registry.add('tool-call', ToolCall);
+    this.registry.add('grouped-tool-calls', GroupedToolCalls);
     this.registry.add('inline-diff', InlineDiff);
+    this.registry.add('message-queue', MessageQueue);
   }
 
   createRenderer = (options: IRenderMime.IRendererOptions) => {
     return new ComponentsRenderer({
       ...options,
       toolCallApproval: this.toolCallApproval,
+      removeQueuedMessage: this.removeQueuedMessage,
+      toolCallPermissionDecision: this.toolCallPermissionDecision,
+      openToolCallPath: this.openToolCallPath,
       registry: this.registry
     });
   };

package/src/token.ts

@@ -21,6 +21,29 @@ export type ToolCallApproval =
   | ((targetId: string, approvalId: string, approve: boolean) => void)
   | null;
 
+/**
+ * The callback to submit a tool-call permission decision.
+ */
+export type ToolCallPermissionDecision =
+  | ((
+      sessionId: string,
+      toolCallId: string,
+      optionId: string
+    ) => Promise<void> | void)
+  | null;
+
+/**
+ * The callback to remove a queued message.
+ */
+export type RemoveQueuedMessage =
+  | ((targetId: string, messageId: string) => void)
+  | null;
+
+/**
+ * The callback to open a file or resource path referenced by a tool call.
+ */
+export type OpenToolCallPath = ((path: string) => void) | null;
+
 /**
  * The interface for components renderer factory.
  */
@@ -35,6 +58,21 @@ export interface IComponentsRendererFactory
    * The callback to approve or reject a tool.
    */
   toolCallApproval: ToolCallApproval;
+
+  /**
+   * The callback to remove a queued message.
+   */
+  removeQueuedMessage: RemoveQueuedMessage;
+
+  /**
+   * The callback to submit a permission decision for grouped tool calls.
+   */
+  toolCallPermissionDecision: ToolCallPermissionDecision;
+
+  /**
+   * The callback to open a path referenced by grouped tool calls.
+   */
+  openToolCallPath: OpenToolCallPath;
 }
 
 /**
@@ -84,11 +122,167 @@ export interface IComponentProps {
 }
 
 /**
- * A single file diff entry.
+ * A file diff entry for grouped tool calls.
  */
-export interface IInlineDiff {
+export interface IToolCallDiff {
+  /**
+   * Path of the file being diffed.
+   */
+  path: string;
+  /**
+   * Updated text content.
+   */
+  newText: string;
+  /**
+   * Previous text content.
+   */
+  oldText?: string;
+}
+
+/**
+ * A permission option for grouped tool calls.
+ */
+export interface IToolCallPermissionOption {
+  /**
+   * Stable permission option identifier.
+   */
+  optionId: string;
+  /**
+   * Human-readable button label.
+   */
+  name: string;
+  /**
+   * Optional semantic option kind, such as allow_once or reject_once.
+   */
+  kind?: string;
+}
+
+/**
+ * A single grouped tool call entry.
+ */
+export interface IToolCallsEntry {
+  /**
+   * Unique tool call identifier.
+   */
+  toolCallId: string;
+  /**
+   * Human-readable title displayed in the UI.
+   */
+  title?: string;
+  /**
+   * Tool operation category.
+   */
+  kind?: string;
+  /**
+   * Current tool call status.
+   */
+  status?: string;
+  /**
+   * Tool input payload.
+   */
+  rawInput?: unknown;
+  /**
+   * Tool output payload.
+   */
+  rawOutput?: unknown;
+  /**
+   * File paths or resource locations referenced by the tool call.
+   */
+  locations?: string[];
+  /**
+   * Permission options presented to the user.
+   */
+  permissionOptions?: IToolCallPermissionOption[];
+  /**
+   * Permission request lifecycle state.
+   */
+  permissionStatus?: 'pending' | 'resolved';
+  /**
+   * Selected permission option identifier.
+   */
+  selectedOptionId?: string;
+  /**
+   * Session identifier used to route permission decisions.
+   */
+  sessionId?: string;
+  /**
+   * Optional inline file diffs associated with the tool call.
+   */
+  diffs?: IToolCallDiff[];
+}
+
+/**
+ * Metadata for rendering grouped tool calls.
+ */
+export interface IToolCallsMetadata {
+  /**
+   * List of tool call entries.
+   */
+  toolCalls: IToolCallsEntry[];
+}
+
+/**
+ * A file diff target.
+ */
+export interface IInlineDiffFileTarget {
+  /**
+   * Discriminator for a regular file diff target.
+   */
+  kind: 'file';
+  /**
+   * Path of the file being diffed.
+   */
   path: string;
+}
+
+/**
+ * A notebook cell diff target.
+ */
+export interface IInlineDiffNotebookCellTarget {
+  /**
+   * Discriminator for a notebook cell source diff target.
+   */
+  kind: 'cell';
+  /**
+   * Path of the notebook containing the cell.
+   */
+  notebookPath: string;
+  /**
+   * Stable cell identifier, when available from the producer.
+   */
+  cellId?: string;
+  /**
+   * Zero-based notebook cell index used for the default display label.
+   */
+  cellIndex?: number;
+}
+
+/**
+ * A supported inline diff target.
+ */
+export type IInlineDiffTarget =
+  | IInlineDiffFileTarget
+  | IInlineDiffNotebookCellTarget;
+
+/**
+ * A single inline diff entry.
+ */
+export interface IInlineDiff {
+  /**
+   * Structured target metadata.
+   */
+  target: IInlineDiffTarget;
+  /**
+   * Optional explicit label for the diff header.
+   */
+  label?: string;
+  /**
+   * Updated text content for the diff target.
+   */
   newText: string;
+  /**
+   * Previous text content for the diff target.
+   */
   oldText?: string;
 }
 
@@ -96,5 +290,24 @@ export interface IInlineDiff {
  * Metadata for rendering inline diffs.
  */
 export interface IInlineDiffMetadata {
+  /**
+   * List of inline diff entries to render.
+   */
   diffs: IInlineDiff[];
 }
+
+/**
+ * A single queued message entry.
+ */
+export interface IQueuedMessage {
+  id: string;
+  body: string;
+}
+
+/**
+ * Metadata for the message queue component.
+ */
+export interface IMessageQueueMetadata {
+  messages: IQueuedMessage[];
+  targetId?: string;
+}