jupyter-chat-components 0.2.0 → 0.3.0

package/lib/components/index.d.ts

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

package/lib/components/index.js

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

package/lib/components/inline-diff.d.ts

@@ -1,11 +1,13 @@
 import { TranslationBundle } from '@jupyterlab/translation';
 import * as React from 'react';
-import { IInlineDiffMetadata } from '../token';
+import { IInlineDiff, IInlineDiffMetadata } from '../token';
 export interface IInlineDiffProps extends IInlineDiffMetadata {
     trans?: TranslationBundle;
 }
 export declare function getDiffFilename(path: string): string;
+export declare function getInlineDiffLabel(diff: IInlineDiff): string;
+export declare function getInlineDiffTitle(diff: IInlineDiff): string;
 /**
- * React component for rendering one or more inline file diffs.
+ * React component for rendering one or more inline diffs.
  */
 export declare const InlineDiff: React.FC<IInlineDiffProps>;

package/lib/components/inline-diff.js

@@ -7,6 +7,50 @@ const MAX_DIFF_LINES = 20;
 export function getDiffFilename(path) {
     return PathExt.basename(path);
 }
+function getNotebookCellLabel(target) {
+    if (typeof target.cellIndex === 'number') {
+        return `Cell ${target.cellIndex + 1}`;
+    }
+    if (target.cellId) {
+        return `Cell ${target.cellId}`;
+    }
+    return 'Notebook Cell';
+}
+function getInlineDiffPatchPath(diff) {
+    var _a;
+    const target = diff.target;
+    if (target.kind === 'file') {
+        return target.path;
+    }
+    return [target.notebookPath, (_a = target.cellId) !== null && _a !== void 0 ? _a : target.cellIndex]
+        .filter(value => value !== undefined && value !== '')
+        .join('#');
+}
+export function getInlineDiffLabel(diff) {
+    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) {
+    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, text, key) {
     switch (type) {
         case 'added':
@@ -51,21 +95,23 @@ function buildDiffLinesFromHunk(hunk, hunkIndex) {
 }
 function buildDiffLines(diff) {
     var _a;
-    const patch = structuredPatch(diff.path, diff.path, (_a = diff.oldText) !== null && _a !== void 0 ? _a : '', diff.newText, undefined, undefined, { context: Infinity });
+    const patchPath = getInlineDiffPatchPath(diff);
+    const patch = structuredPatch(patchPath, patchPath, (_a = diff.oldText) !== null && _a !== void 0 ? _a : '', diff.newText, undefined, undefined, { context: Infinity });
     return patch.hunks.reduce((lines, hunk, index) => {
         lines.push(...buildDiffLinesFromHunk(hunk, index));
         return lines;
     }, []);
 }
 function DiffBlock({ diff, trans }) {
-    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;
     const visibleLines = canTruncate && !expanded ? allLines.slice(0, MAX_DIFF_LINES) : allLines;
     const hiddenCount = allLines.length - MAX_DIFF_LINES;
     return (React.createElement("div", { className: "jp-ai-inline-diff-block" },
-        React.createElement("div", { className: "jp-ai-inline-diff-header", title: diff.path }, filename),
+        React.createElement("div", { className: "jp-ai-inline-diff-header", title: title }, filename),
         React.createElement("div", { className: "jp-ai-inline-diff-content" },
             visibleLines.length ? (visibleLines.map(line => (React.createElement("div", { key: line.key, className: `jp-ai-inline-diff-line ${line.cssClass}` },
                 React.createElement("span", { className: "jp-ai-inline-diff-line-prefix" }, line.prefix),
@@ -74,9 +120,9 @@ function DiffBlock({ diff, trans }) {
             canTruncate && expanded && (React.createElement("button", { className: "jp-ai-inline-diff-toggle", onClick: () => setExpanded(false), type: "button" }, trans.__('Show less'))))));
 }
 /**
- * React component for rendering one or more inline file diffs.
+ * React component for rendering one or more inline diffs.
  */
 export const InlineDiff = ({ diffs, trans }) => {
     const transBundle = trans !== null && trans !== void 0 ? trans : nullTranslator.load('jupyterlab');
-    return (React.createElement("div", { className: "jp-ai-inline-diff-container" }, diffs.map((diff, index) => (React.createElement(DiffBlock, { key: `${diff.path}-${index}`, diff: diff, trans: transBundle })))));
+    return (React.createElement("div", { className: "jp-ai-inline-diff-container" }, diffs.map((diff, index) => (React.createElement(DiffBlock, { key: `${getInlineDiffPatchPath(diff)}-${index}`, diff: diff, trans: transBundle })))));
 };

package/lib/components/message-queue.d.ts

@@ -0,0 +1,13 @@
+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 declare const MessageQueue: React.FC<IMessageQueueProps>;

package/lib/components/message-queue.js

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

package/lib/factory.d.ts

@@ -2,7 +2,7 @@ import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import * as React from 'react';
 import { ComponentRegistry } from './registry';
-import { IComponentRegistry, IComponentsRendererFactory, ToolCallApproval } from './token';
+import { IComponentRegistry, IComponentsRendererFactory, RemoveQueuedMessage, ToolCallApproval } from './token';
 type ReactRenderElement = Array<React.ReactElement<any>> | React.ReactElement<any>;
 /**
  * The options for the chat components renderer.
@@ -12,6 +12,10 @@ interface IComponentsRendererOptions extends IRenderMime.IRendererOptions {
      * The callback to approve or reject a tool.
      */
     toolCallApproval?: ToolCallApproval;
+    /**
+     * The callback to remove a queued message.
+     */
+    removeQueuedMessage?: RemoveQueuedMessage;
     /**
      * The component registry.
      */
@@ -33,6 +37,7 @@ export declare class ComponentsRenderer extends ReactWidget implements IRenderMi
     private _trans;
     private _mimeType;
     private _toolCallApproval?;
+    private _removeQueuedMessage?;
     private _registry;
     private _data;
     private _metadata;
@@ -46,6 +51,7 @@ export declare class RendererFactory implements IComponentsRendererFactory {
     readonly defaultRank = 100;
     readonly registry: ComponentRegistry;
     toolCallApproval: ToolCallApproval;
+    removeQueuedMessage: RemoveQueuedMessage;
     constructor();
     createRenderer: (options: IRenderMime.IRendererOptions) => ComponentsRenderer;
 }

package/lib/factory.js

@@ -1,7 +1,7 @@
 import { nullTranslator } from '@jupyterlab/translation';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import * as React from 'react';
-import { InlineDiff, ToolCall } from './components';
+import { InlineDiff, MessageQueue, ToolCall } from './components';
 import { ComponentRegistry } from './registry';
 /**
  * The default mime type for the extension.
@@ -26,6 +26,7 @@ export class ComponentsRenderer extends ReactWidget {
         this._trans = ((_a = options.translator) !== null && _a !== void 0 ? _a : nullTranslator).load('jupyterlab');
         this._mimeType = options.mimeType;
         this._toolCallApproval = options.toolCallApproval;
+        this._removeQueuedMessage = options.removeQueuedMessage;
         this._registry = options.registry;
         this.addClass(CLASS_NAME);
     }
@@ -53,6 +54,9 @@ export class ComponentsRenderer extends ReactWidget {
         if (this._data === 'tool-call') {
             componentsProps.toolCallApproval = this._toolCallApproval;
         }
+        if (this._data === 'message-queue') {
+            componentsProps.removeQueuedMessage = this._removeQueuedMessage;
+        }
         return React.createElement(Component, { ...componentsProps, trans: this._trans });
     }
 }
@@ -65,15 +69,18 @@ export class RendererFactory {
         this.mimeTypes = [MIME_TYPE];
         this.defaultRank = 100;
         this.toolCallApproval = null;
+        this.removeQueuedMessage = null;
         this.createRenderer = (options) => {
             return new ComponentsRenderer({
                 ...options,
                 toolCallApproval: this.toolCallApproval,
+                removeQueuedMessage: this.removeQueuedMessage,
                 registry: this.registry
             });
         };
         this.registry = new ComponentRegistry();
         this.registry.add('tool-call', ToolCall);
         this.registry.add('inline-diff', InlineDiff);
+        this.registry.add('message-queue', MessageQueue);
     }
 }

package/lib/token.d.ts

@@ -10,6 +10,10 @@ export declare const IComponentsRendererFactory: Token<IComponentsRendererFactor
  * The callback to approve or reject a tool.
  */
 export type ToolCallApproval = ((targetId: string, approvalId: string, approve: boolean) => void) | null;
+/**
+ * The callback to remove a queued message.
+ */
+export type RemoveQueuedMessage = ((targetId: string, messageId: string) => void) | null;
 /**
  * The interface for components renderer factory.
  */
@@ -22,6 +26,10 @@ export interface IComponentsRendererFactory extends IRenderMime.IRendererFactory
      * The callback to approve or reject a tool.
      */
     toolCallApproval: ToolCallApproval;
+    /**
+     * The callback to remove a queued message.
+     */
+    removeQueuedMessage: RemoveQueuedMessage;
 }
 /**
  * The interface for the component registry.
@@ -65,16 +73,84 @@ export interface IComponentProps {
     trans: TranslationBundle;
 }
 /**
- * A single file diff entry.
+ * A file diff target.
  */
-export interface IInlineDiff {
+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;
 }
 /**
  * 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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyter-chat-components",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "Components to displayed in jupyter chat",
     "keywords": [
         "jupyter",

package/src/components/index.ts

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

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,13 +8,14 @@ import { ReadonlyPartialJSONValue } from '@lumino/coreutils';
 
 import * as React from 'react';
 
-import { InlineDiff, ToolCall } from './components';
+import { InlineDiff, MessageQueue, ToolCall } from './components';
 
 import { ComponentRegistry } from './registry';
 
 import {
   IComponentRegistry,
   IComponentsRendererFactory,
+  RemoveQueuedMessage,
   ToolCallApproval
 } from './token';
 
@@ -41,6 +42,11 @@ interface IComponentsRendererOptions extends IRenderMime.IRendererOptions {
    */
   toolCallApproval?: ToolCallApproval;
 
+  /**
+   * The callback to remove a queued message.
+   */
+  removeQueuedMessage?: RemoveQueuedMessage;
+
   /**
    * The component registry.
    */
@@ -62,6 +68,7 @@ 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);
   }
@@ -93,12 +100,17 @@ export class ComponentsRenderer
       componentsProps.toolCallApproval = this._toolCallApproval;
     }
 
+    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 _removeQueuedMessage?: RemoveQueuedMessage;
   private _registry: IComponentRegistry;
   private _data: string | null = null;
   private _metadata: ReadonlyPartialJSONValue | null = null;
@@ -113,17 +125,20 @@ export class RendererFactory implements IComponentsRendererFactory {
   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,
+      removeQueuedMessage: this.removeQueuedMessage,
       registry: this.registry
     });
   };

package/src/token.ts

@@ -21,6 +21,13 @@ export type ToolCallApproval =
   | ((targetId: string, approvalId: string, approve: boolean) => void)
   | null;
 
+/**
+ * The callback to remove a queued message.
+ */
+export type RemoveQueuedMessage =
+  | ((targetId: string, messageId: string) => void)
+  | null;
+
 /**
  * The interface for components renderer factory.
  */
@@ -35,6 +42,11 @@ export interface IComponentsRendererFactory
    * The callback to approve or reject a tool.
    */
   toolCallApproval: ToolCallApproval;
+
+  /**
+   * The callback to remove a queued message.
+   */
+  removeQueuedMessage: RemoveQueuedMessage;
 }
 
 /**
@@ -84,11 +96,67 @@ export interface IComponentProps {
 }
 
 /**
- * A single file diff entry.
+ * A file diff target.
  */
-export interface IInlineDiff {
+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 +164,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;
+}

package/style/base.css

@@ -323,3 +323,61 @@
   color: var(--jp-ui-font-color1);
   text-decoration: underline;
 }
+
+/* Message Queue Styling */
+.jp-chat-message-queue {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+  pointer-events: none;
+  width: 100%;
+}
+
+.jp-chat-message-queue-bubble {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background-color: var(--jp-layout-color2);
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 16px;
+  padding: 4px 28px 4px 12px;
+  pointer-events: auto;
+}
+
+.jp-chat-message-queue-text {
+  font-size: var(--jp-ui-font-size0);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jp-chat-message-queue-remove {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--jp-ui-font-color2);
+  font-size: 10px;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.jp-chat-message-queue-remove:hover {
+  background: var(--jp-layout-color3);
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-chat-message-queue-bubble:hover .jp-chat-message-queue-remove {
+  opacity: 1;
+}