jupyter-chat-components 0.1.3 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyter-chat-components",
-    "version": "0.1.3",
+    "version": "0.3.0",
     "description": "Components to displayed in jupyter chat",
     "keywords": [
         "jupyter",
@@ -57,11 +57,13 @@
     },
     "dependencies": {
         "@jupyterlab/application": "^4.5.0",
+        "@jupyterlab/coreutils": "^6.5.4",
         "@jupyterlab/rendermime": "^4.5.0",
         "@jupyterlab/rendermime-interfaces": "^3.8.0",
         "@jupyterlab/translation": "^4.5.0",
         "@lumino/coreutils": "^2.2.2",
-        "@lumino/widgets": "^2.1.0"
+        "@lumino/widgets": "^2.1.0",
+        "diff": "^8.0.0"
     },
     "devDependencies": {
         "@jupyterlab/builder": "^4.0.0",

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './inline-diff';
+export * from './message-queue';
+export * from './tool-call';

package/src/components/inline-diff.tsx

@@ -0,0 +1,241 @@
+import { PathExt } from '@jupyterlab/coreutils';
+import { nullTranslator, TranslationBundle } from '@jupyterlab/translation';
+
+import * as React from 'react';
+import { structuredPatch } from 'diff';
+import type { StructuredPatchHunk } from 'diff';
+
+import {
+  IInlineDiff,
+  IInlineDiffMetadata,
+  IInlineDiffNotebookCellTarget
+} from '../token';
+
+/** Maximum number of rendered lines before truncation. */
+const MAX_DIFF_LINES = 20;
+
+interface IDiffLineInfo {
+  cssClass: string;
+  prefix: string;
+  text: string;
+  key: string;
+}
+
+export interface IInlineDiffProps extends IInlineDiffMetadata {
+  trans?: TranslationBundle;
+}
+
+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,
+  key: string
+): IDiffLineInfo {
+  switch (type) {
+    case 'added':
+      return {
+        cssClass: 'jp-mod-added',
+        prefix: '+',
+        text,
+        key
+      };
+    case 'removed':
+      return {
+        cssClass: 'jp-mod-removed',
+        prefix: '-',
+        text,
+        key
+      };
+    case 'context':
+      return {
+        cssClass: 'jp-mod-context',
+        prefix: ' ',
+        text,
+        key
+      };
+  }
+}
+
+function buildDiffLinesFromHunk(
+  hunk: StructuredPatchHunk,
+  hunkIndex: number
+): IDiffLineInfo[] {
+  return hunk.lines
+    .filter(line => !line.startsWith('\\'))
+    .map((line, lineIndex) => {
+      const prefix = line[0] ?? ' ';
+      const text = line.slice(1);
+      const key = `${hunkIndex}-${hunk.oldStart}-${hunk.newStart}-${lineIndex}`;
+
+      if (prefix === '+') {
+        return toLineInfo('added', text, key);
+      }
+
+      if (prefix === '-') {
+        return toLineInfo('removed', text, key);
+      }
+
+      return toLineInfo('context', text, key);
+    });
+}
+
+function buildDiffLines(diff: IInlineDiff): IDiffLineInfo[] {
+  const patchPath = getInlineDiffPatchPath(diff);
+  const patch = structuredPatch(
+    patchPath,
+    patchPath,
+    diff.oldText ?? '',
+    diff.newText,
+    undefined,
+    undefined,
+    { context: Infinity }
+  );
+
+  return patch.hunks.reduce<IDiffLineInfo[]>((lines, hunk, index) => {
+    lines.push(...buildDiffLinesFromHunk(hunk, index));
+    return lines;
+  }, []);
+}
+
+function DiffBlock({
+  diff,
+  trans
+}: {
+  diff: IInlineDiff;
+  trans: TranslationBundle;
+}): JSX.Element {
+  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;
+  const visibleLines =
+    canTruncate && !expanded ? allLines.slice(0, MAX_DIFF_LINES) : allLines;
+  const hiddenCount = allLines.length - MAX_DIFF_LINES;
+
+  return (
+    <div className="jp-ai-inline-diff-block">
+      <div className="jp-ai-inline-diff-header" title={title}>
+        {filename}
+      </div>
+      <div className="jp-ai-inline-diff-content">
+        {visibleLines.length ? (
+          visibleLines.map(line => (
+            <div
+              key={line.key}
+              className={`jp-ai-inline-diff-line ${line.cssClass}`}
+            >
+              <span className="jp-ai-inline-diff-line-prefix">
+                {line.prefix}
+              </span>
+              <span className="jp-ai-inline-diff-line-text">{line.text}</span>
+            </div>
+          ))
+        ) : (
+          <div className="jp-ai-inline-diff-empty">
+            {trans.__('No changes')}
+          </div>
+        )}
+        {canTruncate && !expanded && (
+          <button
+            className="jp-ai-inline-diff-toggle"
+            onClick={() => setExpanded(true)}
+            type="button"
+          >
+            {trans.__('... %1 more lines', hiddenCount)}
+          </button>
+        )}
+        {canTruncate && expanded && (
+          <button
+            className="jp-ai-inline-diff-toggle"
+            onClick={() => setExpanded(false)}
+            type="button"
+          >
+            {trans.__('Show less')}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * React component for rendering one or more inline diffs.
+ */
+export const InlineDiff: React.FC<IInlineDiffProps> = ({ diffs, trans }) => {
+  const transBundle = trans ?? nullTranslator.load('jupyterlab');
+
+  return (
+    <div className="jp-ai-inline-diff-container">
+      {diffs.map((diff, index) => (
+        <DiffBlock
+          key={`${getInlineDiffPatchPath(diff)}-${index}`}
+          diff={diff}
+          trans={transBundle}
+        />
+      ))}
+    </div>
+  );
+};

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/components/tool-call.tsx

@@ -2,7 +2,7 @@ import { TranslationBundle } from '@jupyterlab/translation';
 
 import * as React from 'react';
 
-import { IToolCallMetadata, ToolCallApproval, ToolCallStatus } from '../token';
+import { IComponentProps, ToolCallApproval } from '../token';
 
 /**
  * Configuration for rendering tool call status.
@@ -13,6 +13,17 @@ interface IStatusConfig {
   open?: boolean;
 }
 
+/**
+ * Tool call status types.
+ */
+export type ToolCallStatus =
+  | 'pending'
+  | 'awaiting_approval'
+  | 'approved'
+  | 'rejected'
+  | 'completed'
+  | 'error';
+
 const STATUS_CONFIG: Record<ToolCallStatus, IStatusConfig> = {
   pending: {
     cssClass: 'jp-ai-tool-pending',
@@ -44,9 +55,21 @@ const STATUS_CONFIG: Record<ToolCallStatus, IStatusConfig> = {
 /**
  * Options for building tool call HTML.
  */
-export interface IToolCallHtmlOptions extends IToolCallMetadata {
-  trans: TranslationBundle;
-  toolCallApproval: ToolCallApproval;
+export interface IToolCallMetadata {
+  toolName: string;
+  input: string;
+  status: ToolCallStatus;
+  summary?: string;
+  output?: string;
+  targetId?: string;
+  approvalId?: string;
+}
+
+/**
+ * Options for building tool call HTML.
+ */
+export interface IToolCallProps extends IComponentProps, IToolCallMetadata {
+  toolCallApproval?: ToolCallApproval;
 }
 
 export function escapeHtml(value: string): string {
@@ -90,11 +113,6 @@ const getStatusText = (
   }
 };
 
-/**
- * React component props for ToolCall.
- */
-export interface IToolCallProps extends IToolCallHtmlOptions {}
-
 /**
  * React functional component for displaying a tool call.
  *
@@ -117,6 +135,12 @@ export const ToolCall: React.FC<IToolCallProps> = ({
   const resultLabel =
     status === 'error' ? trans.__('Error') : trans.__('Result');
 
+  if (status === 'awaiting_approval' && !toolCallApproval) {
+    console.error(
+      'The tool call has no approval function, approval, it will not work as expected'
+    );
+  }
+
   return (
     <details
       className={`jp-ai-tool-call ${config.cssClass}`}

package/src/factory.tsx

@@ -4,17 +4,21 @@ import { nullTranslator, TranslationBundle } from '@jupyterlab/translation';
 
 import { ReactWidget } from '@jupyterlab/ui-components';
 
+import { ReadonlyPartialJSONValue } from '@lumino/coreutils';
+
 import * as React from 'react';
 
+import { InlineDiff, MessageQueue, ToolCall } from './components';
+
+import { ComponentRegistry } from './registry';
+
 import {
+  IComponentRegistry,
   IComponentsRendererFactory,
-  IToolCallMetadata,
+  RemoveQueuedMessage,
   ToolCallApproval
 } from './token';
 
-import { IToolCallHtmlOptions, ToolCall } from './components/tool-call';
-import { ReadonlyPartialJSONValue } from '@lumino/coreutils';
-
 /**
  * The default mime type for the extension.
  */
@@ -36,11 +40,21 @@ interface IComponentsRendererOptions extends IRenderMime.IRendererOptions {
   /**
    * The callback to approve or reject a tool.
    */
-  toolCallApproval: ToolCallApproval;
+  toolCallApproval?: ToolCallApproval;
+
+  /**
+   * The callback to remove a queued message.
+   */
+  removeQueuedMessage?: RemoveQueuedMessage;
+
+  /**
+   * The component registry.
+   */
+  registry: IComponentRegistry;
 }
 
 /**
- * A widget for rendering .
+ * A widget for rendering components from mime bundle.
  */
 export class ComponentsRenderer
   extends ReactWidget
@@ -54,6 +68,8 @@ export class ComponentsRenderer
     this._trans = (options.translator ?? nullTranslator).load('jupyterlab');
     this._mimeType = options.mimeType;
     this._toolCallApproval = options.toolCallApproval;
+    this._removeQueuedMessage = options.removeQueuedMessage;
+    this._registry = options.registry;
     this.addClass(CLASS_NAME);
   }
 
@@ -62,25 +78,40 @@ export class ComponentsRenderer
    */
   async renderModel(model: IRenderMime.IMimeModel): Promise<void> {
     this._data = model.data[this._mimeType] as string;
-    this._metadata = { ...model.metadata };
+    const metadata = model.metadata;
+    this._metadata = (metadata[this._mimeType] as ReadonlyPartialJSONValue) ?? {
+      ...metadata
+    };
     return this.update();
   }
 
   protected render(): ReactRenderElement | null {
+    if (!this._data) {
+      return null;
+    }
+    const Component = this._registry.get(this._data);
+    if (!Component) {
+      return null;
+    }
+
+    const componentsProps = { ...(this._metadata as any) };
+
     if (this._data === 'tool-call') {
-      const toolCallOptions: IToolCallHtmlOptions = {
-        ...(this._metadata as unknown as IToolCallMetadata),
-        trans: this._trans,
-        toolCallApproval: this._toolCallApproval
-      };
-      return <ToolCall {...toolCallOptions} />;
+      componentsProps.toolCallApproval = this._toolCallApproval;
     }
-    return null;
+
+    if (this._data === 'message-queue') {
+      componentsProps.removeQueuedMessage = this._removeQueuedMessage;
+    }
+
+    return <Component {...componentsProps} trans={this._trans} />;
   }
 
   private _trans: TranslationBundle;
   private _mimeType: string;
-  private _toolCallApproval: ToolCallApproval;
+  private _toolCallApproval?: ToolCallApproval;
+  private _removeQueuedMessage?: RemoveQueuedMessage;
+  private _registry: IComponentRegistry;
   private _data: string | null = null;
   private _metadata: ReadonlyPartialJSONValue | null = null;
 }
@@ -92,11 +123,23 @@ export class RendererFactory implements IComponentsRendererFactory {
   readonly safe = true;
   readonly mimeTypes = [MIME_TYPE];
   readonly defaultRank = 100;
+  readonly registry: ComponentRegistry;
   toolCallApproval: ToolCallApproval = null;
+  removeQueuedMessage: RemoveQueuedMessage = null;
+
+  constructor() {
+    this.registry = new ComponentRegistry();
+    this.registry.add('tool-call', ToolCall);
+    this.registry.add('inline-diff', InlineDiff);
+    this.registry.add('message-queue', MessageQueue);
+  }
+
   createRenderer = (options: IRenderMime.IRendererOptions) => {
     return new ComponentsRenderer({
       ...options,
-      toolCallApproval: this.toolCallApproval
+      toolCallApproval: this.toolCallApproval,
+      removeQueuedMessage: this.removeQueuedMessage,
+      registry: this.registry
     });
   };
 }

package/src/index.ts

@@ -5,10 +5,10 @@ import {
 
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
-import { IComponentsRendererFactory } from './token';
-
 import { RendererFactory } from './factory';
 
+import { IComponentsRendererFactory } from './token';
+
 /**
  * The plugin providing the chat component renderer.
  */
@@ -30,4 +30,7 @@ const factory: JupyterFrontEndPlugin<IComponentsRendererFactory> = {
 
 export * from './token';
 export * from './factory';
+export * from './registry';
+export * from './components';
+
 export default factory;

package/src/registry.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+import { IComponentRegistry } from './token';
+
+/**
+ * A registry for React components.
+ */
+export class ComponentRegistry implements IComponentRegistry {
+  /**
+   * Register a React component.
+   *
+   * @param name - The unique name/identifier for the component
+   * @param component - The React component
+   */
+  add(name: string, component: React.ComponentType<any>): void {
+    if (this._components.has(name)) {
+      console.warn(
+        `Component '${name}' is already registered and will be overwritten.`
+      );
+    }
+    this._components.set(name, component);
+  }
+
+  /**
+   * Get a registered component by name.
+   *
+   * @param name - The name of the component
+   * @returns the React component, or undefined if not found
+   */
+  get(name: string): React.ComponentType<any> | undefined {
+    return this._components.get(name);
+  }
+
+  /**
+   * Check if a component is registered.
+   *
+   * @param name - The name of the component
+   * @returns whether the component is registered
+   */
+  has(name: string): boolean {
+    return this._components.has(name);
+  }
+
+  /**
+   * Get all registered component names.
+   *
+   * @returns the component names
+   */
+  getNames(): string[] {
+    return Array.from(this._components.keys());
+  }
+
+  private _components: Map<string, React.ComponentType<any>> = new Map();
+}