jupyter-chat-components 0.3.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,4 @@
1
1
  export * from './inline-diff';
2
2
  export * from './message-queue';
3
3
  export * from './tool-call';
4
+ export * from './grouped-tool-calls';
package/src/factory.tsx CHANGED
@@ -8,15 +8,22 @@ import { ReadonlyPartialJSONValue } from '@lumino/coreutils';
8
8
 
9
9
  import * as React from 'react';
10
10
 
11
- import { InlineDiff, MessageQueue, ToolCall } from './components';
11
+ import {
12
+ GroupedToolCalls,
13
+ InlineDiff,
14
+ MessageQueue,
15
+ ToolCall
16
+ } from './components';
12
17
 
13
18
  import { ComponentRegistry } from './registry';
14
19
 
15
20
  import {
16
21
  IComponentRegistry,
17
22
  IComponentsRendererFactory,
23
+ OpenToolCallPath,
18
24
  RemoveQueuedMessage,
19
- ToolCallApproval
25
+ ToolCallApproval,
26
+ ToolCallPermissionDecision
20
27
  } from './token';
21
28
 
22
29
  /**
@@ -47,6 +54,16 @@ interface IComponentsRendererOptions extends IRenderMime.IRendererOptions {
47
54
  */
48
55
  removeQueuedMessage?: RemoveQueuedMessage;
49
56
 
57
+ /**
58
+ * The callback to submit a permission decision for grouped tool calls.
59
+ */
60
+ toolCallPermissionDecision?: ToolCallPermissionDecision;
61
+
62
+ /**
63
+ * The callback to open a path referenced by grouped tool calls.
64
+ */
65
+ openToolCallPath?: OpenToolCallPath;
66
+
50
67
  /**
51
68
  * The component registry.
52
69
  */
@@ -69,6 +86,8 @@ export class ComponentsRenderer
69
86
  this._mimeType = options.mimeType;
70
87
  this._toolCallApproval = options.toolCallApproval;
71
88
  this._removeQueuedMessage = options.removeQueuedMessage;
89
+ this._toolCallPermissionDecision = options.toolCallPermissionDecision;
90
+ this._openToolCallPath = options.openToolCallPath;
72
91
  this._registry = options.registry;
73
92
  this.addClass(CLASS_NAME);
74
93
  }
@@ -104,6 +123,12 @@ export class ComponentsRenderer
104
123
  componentsProps.removeQueuedMessage = this._removeQueuedMessage;
105
124
  }
106
125
 
126
+ if (this._data === 'grouped-tool-calls') {
127
+ componentsProps.toolCallPermissionDecision =
128
+ this._toolCallPermissionDecision;
129
+ componentsProps.openToolCallPath = this._openToolCallPath;
130
+ }
131
+
107
132
  return <Component {...componentsProps} trans={this._trans} />;
108
133
  }
109
134
 
@@ -111,6 +136,8 @@ export class ComponentsRenderer
111
136
  private _mimeType: string;
112
137
  private _toolCallApproval?: ToolCallApproval;
113
138
  private _removeQueuedMessage?: RemoveQueuedMessage;
139
+ private _toolCallPermissionDecision?: ToolCallPermissionDecision;
140
+ private _openToolCallPath?: OpenToolCallPath;
114
141
  private _registry: IComponentRegistry;
115
142
  private _data: string | null = null;
116
143
  private _metadata: ReadonlyPartialJSONValue | null = null;
@@ -126,10 +153,13 @@ export class RendererFactory implements IComponentsRendererFactory {
126
153
  readonly registry: ComponentRegistry;
127
154
  toolCallApproval: ToolCallApproval = null;
128
155
  removeQueuedMessage: RemoveQueuedMessage = null;
156
+ toolCallPermissionDecision: ToolCallPermissionDecision = null;
157
+ openToolCallPath: OpenToolCallPath = null;
129
158
 
130
159
  constructor() {
131
160
  this.registry = new ComponentRegistry();
132
161
  this.registry.add('tool-call', ToolCall);
162
+ this.registry.add('grouped-tool-calls', GroupedToolCalls);
133
163
  this.registry.add('inline-diff', InlineDiff);
134
164
  this.registry.add('message-queue', MessageQueue);
135
165
  }
@@ -139,6 +169,8 @@ export class RendererFactory implements IComponentsRendererFactory {
139
169
  ...options,
140
170
  toolCallApproval: this.toolCallApproval,
141
171
  removeQueuedMessage: this.removeQueuedMessage,
172
+ toolCallPermissionDecision: this.toolCallPermissionDecision,
173
+ openToolCallPath: this.openToolCallPath,
142
174
  registry: this.registry
143
175
  });
144
176
  };
package/src/token.ts CHANGED
@@ -21,6 +21,17 @@ export type ToolCallApproval =
21
21
  | ((targetId: string, approvalId: string, approve: boolean) => void)
22
22
  | null;
23
23
 
24
+ /**
25
+ * The callback to submit a tool-call permission decision.
26
+ */
27
+ export type ToolCallPermissionDecision =
28
+ | ((
29
+ sessionId: string,
30
+ toolCallId: string,
31
+ optionId: string
32
+ ) => Promise<void> | void)
33
+ | null;
34
+
24
35
  /**
25
36
  * The callback to remove a queued message.
26
37
  */
@@ -28,6 +39,11 @@ export type RemoveQueuedMessage =
28
39
  | ((targetId: string, messageId: string) => void)
29
40
  | null;
30
41
 
42
+ /**
43
+ * The callback to open a file or resource path referenced by a tool call.
44
+ */
45
+ export type OpenToolCallPath = ((path: string) => void) | null;
46
+
31
47
  /**
32
48
  * The interface for components renderer factory.
33
49
  */
@@ -47,6 +63,16 @@ export interface IComponentsRendererFactory
47
63
  * The callback to remove a queued message.
48
64
  */
49
65
  removeQueuedMessage: RemoveQueuedMessage;
66
+
67
+ /**
68
+ * The callback to submit a permission decision for grouped tool calls.
69
+ */
70
+ toolCallPermissionDecision: ToolCallPermissionDecision;
71
+
72
+ /**
73
+ * The callback to open a path referenced by grouped tool calls.
74
+ */
75
+ openToolCallPath: OpenToolCallPath;
50
76
  }
51
77
 
52
78
  /**
@@ -95,6 +121,110 @@ export interface IComponentProps {
95
121
  trans: TranslationBundle;
96
122
  }
97
123
 
124
+ /**
125
+ * A file diff entry for grouped tool calls.
126
+ */
127
+ export interface IToolCallDiff {
128
+ /**
129
+ * Path of the file being diffed.
130
+ */
131
+ path: string;
132
+ /**
133
+ * Updated text content.
134
+ */
135
+ newText: string;
136
+ /**
137
+ * Previous text content.
138
+ */
139
+ oldText?: string;
140
+ }
141
+
142
+ /**
143
+ * A permission option for grouped tool calls.
144
+ */
145
+ export interface IToolCallPermissionOption {
146
+ /**
147
+ * Stable permission option identifier.
148
+ */
149
+ optionId: string;
150
+ /**
151
+ * Human-readable button label.
152
+ */
153
+ name: string;
154
+ /**
155
+ * Optional semantic option kind, such as allow_once or reject_once.
156
+ */
157
+ kind?: string;
158
+ }
159
+
160
+ /**
161
+ * A single grouped tool call entry.
162
+ */
163
+ export interface IToolCallsEntry {
164
+ /**
165
+ * Unique tool call identifier.
166
+ */
167
+ toolCallId: string;
168
+ /**
169
+ * Human-readable title displayed in the UI.
170
+ */
171
+ title?: string;
172
+ /**
173
+ * Human-readable summary from tool input displayed with the title
174
+ */
175
+ summary?: string;
176
+ /**
177
+ * Tool operation category.
178
+ */
179
+ kind?: string;
180
+ /**
181
+ * Current tool call status.
182
+ */
183
+ status?: string;
184
+ /**
185
+ * Tool input payload.
186
+ */
187
+ rawInput?: unknown;
188
+ /**
189
+ * Tool output payload.
190
+ */
191
+ rawOutput?: unknown;
192
+ /**
193
+ * File paths or resource locations referenced by the tool call.
194
+ */
195
+ locations?: string[];
196
+ /**
197
+ * Permission options presented to the user.
198
+ */
199
+ permissionOptions?: IToolCallPermissionOption[];
200
+ /**
201
+ * Permission request lifecycle state.
202
+ */
203
+ permissionStatus?: 'pending' | 'resolved';
204
+ /**
205
+ * Selected permission option identifier.
206
+ */
207
+ selectedOptionId?: string;
208
+ /**
209
+ * Session identifier used to route permission decisions.
210
+ */
211
+ sessionId?: string;
212
+ /**
213
+ * Optional inline file diffs associated with the tool call.
214
+ */
215
+ diffs?: IToolCallDiff[];
216
+ }
217
+
218
+ /**
219
+ * Metadata for rendering grouped tool calls.
220
+ */
221
+ export interface IToolCallsMetadata {
222
+ /**
223
+ * List of tool call entries.
224
+ */
225
+ toolCalls: IToolCallsEntry[];
226
+ }
227
+
98
228
  /**
99
229
  * A file diff target.
100
230
  */
package/style/base.css CHANGED
@@ -222,6 +222,269 @@
222
222
  opacity: 0.5;
223
223
  }
224
224
 
225
+ /* ACP-style Tool Calls */
226
+ .jp-ai-tool-calls {
227
+ padding: 4px 0;
228
+ font-size: var(--jp-content-font-size1);
229
+ line-height: var(--jp-content-line-height);
230
+ margin-bottom: 4px;
231
+ }
232
+
233
+ .jp-ai-tool-call-item {
234
+ padding: 1px 0;
235
+ font-family: var(--jp-content-font-family);
236
+ color: var(--jp-ui-font-color2);
237
+ }
238
+
239
+ .jp-ai-tool-call-item-completed .jp-ai-tool-call-item-icon {
240
+ color: var(--jp-success-color1, #388e3c);
241
+ }
242
+
243
+ .jp-ai-tool-call-item-failed .jp-ai-tool-call-item-icon {
244
+ color: var(--jp-error-color1, #d32f2f);
245
+ }
246
+
247
+ details.jp-ai-tool-call-item summary,
248
+ .jp-ai-tool-call-item details summary {
249
+ cursor: pointer;
250
+ }
251
+
252
+ details.jp-ai-tool-call-item summary,
253
+ .jp-ai-tool-call-item details summary,
254
+ .jp-ai-tool-call-item.jp-ai-tool-call-item-no-detail {
255
+ list-style: none;
256
+ display: flex;
257
+ align-items: center;
258
+ padding: 4px 8px;
259
+ background: var(--jp-layout-color1);
260
+ gap: 8px;
261
+ transition: background-color 0.2s ease;
262
+ }
263
+
264
+ .jp-ai-tool-call-item-title {
265
+ font-size: var(--jp-ui-font-size1);
266
+ font-weight: 500;
267
+ flex: 1;
268
+ }
269
+
270
+ .jp-ai-tool-call-item-summary {
271
+ font-weight: 400;
272
+ opacity: 0.8;
273
+ font-size: var(--jp-ui-font-size0);
274
+ }
275
+
276
+ details.jp-ai-tool-call-item summary::-webkit-details-marker,
277
+ .jp-ai-tool-call-item details summary::-webkit-details-marker {
278
+ display: none;
279
+ }
280
+
281
+ details.jp-ai-tool-call-item summary::after,
282
+ .jp-ai-tool-call-item details summary::after {
283
+ content: '';
284
+ display: inline-block;
285
+ border-left: 4px solid transparent;
286
+ border-right: 4px solid transparent;
287
+ border-top: 5px solid currentcolor;
288
+ margin-left: 6px;
289
+ vertical-align: middle;
290
+ opacity: 0.5;
291
+ }
292
+
293
+ details[open].jp-ai-tool-call-item summary::after,
294
+ .jp-ai-tool-call-item details[open] summary::after {
295
+ border-top: none;
296
+ border-bottom: 5px solid currentcolor;
297
+ }
298
+
299
+ .jp-ai-tool-call-item-detail {
300
+ margin: 2px 0 2px 20px;
301
+ font-size: var(--jp-ui-font-size1);
302
+ font-family: var(--jp-code-font-family);
303
+ white-space: pre-wrap;
304
+ word-break: break-all;
305
+ padding-left: 5px;
306
+ }
307
+
308
+ .jp-ai-tool-call-detail-section {
309
+ margin-bottom: 8px;
310
+ }
311
+
312
+ .jp-ai-tool-call-detail-section:last-child {
313
+ margin-bottom: 0;
314
+ }
315
+
316
+ .jp-ai-tool-call-detail-label {
317
+ font-family: var(--jp-ui-font-family);
318
+ font-size: var(--jp-ui-font-size0);
319
+ font-weight: 600;
320
+ margin-bottom: 4px;
321
+ text-transform: uppercase;
322
+ letter-spacing: 0.5px;
323
+ }
324
+
325
+ .jp-ai-tool-call-detail-code {
326
+ background: var(--jp-layout-color2) !important;
327
+ border: 1px solid var(--jp-border-color1) !important;
328
+ border-radius: 4px !important;
329
+ padding: 8px !important;
330
+ margin: 0 !important;
331
+ font-size: var(--jp-ui-font-size1) !important;
332
+ overflow: auto;
333
+ }
334
+
335
+ .jp-ai-tool-call-detail-code code {
336
+ font-size: var(--jp-ui-font-size1) !important;
337
+ }
338
+
339
+ .jp-ai-tool-call-permission-buttons {
340
+ display: flex;
341
+ gap: 6px;
342
+ margin: 4px 0;
343
+ align-items: center;
344
+ flex-wrap: wrap;
345
+ padding-left: 5px;
346
+ }
347
+
348
+ .jp-ai-tool-call-permission-tree {
349
+ color: var(--jp-ui-font-color2);
350
+ font-family: monospace;
351
+ }
352
+
353
+ .jp-ai-tool-call-permission-btn {
354
+ padding: 2px 6px;
355
+ font-size: var(--jp-ui-font-size1);
356
+ font-family: var(--jp-ui-font-family);
357
+ border-radius: 3px;
358
+ border: 1px solid var(--jp-border-color1);
359
+ cursor: pointer;
360
+ background: var(--jp-layout-color1);
361
+ color: var(--jp-ui-font-color1);
362
+ }
363
+
364
+ .jp-ai-tool-call-permission-btn:disabled {
365
+ opacity: 0.5;
366
+ cursor: not-allowed;
367
+ }
368
+
369
+ .jp-ai-tool-call-permission-btn:hover:not(:disabled) {
370
+ background: var(--jp-layout-color2);
371
+ }
372
+
373
+ .jp-ai-tool-call-permission-btn-allow-once,
374
+ .jp-ai-tool-call-permission-btn-allow-always {
375
+ border-color: var(--jp-success-color1, #388e3c);
376
+ color: var(--jp-success-color1, #388e3c);
377
+ }
378
+
379
+ .jp-ai-tool-call-permission-btn-reject-once {
380
+ border-color: var(--jp-error-color1, #d32f2f);
381
+ color: var(--jp-error-color1, #d32f2f);
382
+ }
383
+
384
+ .jp-ai-tool-call-permission-label {
385
+ font-size: var(--jp-ui-font-size0);
386
+ color: var(--jp-ui-font-color2);
387
+ }
388
+
389
+ .jp-ai-tool-call-diff-container {
390
+ margin: 4px 0 4px 20px;
391
+ }
392
+
393
+ .jp-ai-tool-call-diff-block {
394
+ margin-bottom: 4px;
395
+ border: 1px solid var(--jp-border-color2);
396
+ border-radius: 3px;
397
+ overflow: hidden;
398
+ }
399
+
400
+ .jp-ai-tool-call-diff-header {
401
+ padding: 0 8px;
402
+ font-size: var(--jp-ui-font-size0);
403
+ font-family: var(--jp-code-font-family);
404
+ color: var(--jp-ui-font-color2);
405
+ }
406
+
407
+ .jp-ai-tool-call-diff-header-clickable {
408
+ cursor: pointer;
409
+ }
410
+
411
+ .jp-ai-tool-call-diff-header-clickable:hover {
412
+ text-decoration: underline;
413
+ }
414
+
415
+ .jp-ai-tool-call-diff-content {
416
+ margin: 0;
417
+ padding: 0;
418
+ font-size: var(--jp-code-font-size);
419
+ font-family: var(--jp-code-font-family);
420
+ line-height: var(--jp-code-line-height);
421
+ }
422
+
423
+ .jp-ai-tool-call-diff-line {
424
+ display: grid;
425
+ grid-template-columns: auto minmax(0, 1fr);
426
+ column-gap: 8px;
427
+ align-items: start;
428
+ padding: 0 8px;
429
+ min-height: calc(var(--jp-code-line-height) * 1em);
430
+ }
431
+
432
+ .jp-ai-tool-call-diff-line-prefix {
433
+ width: 1ch;
434
+ color: var(--jp-ui-font-color3);
435
+ user-select: none;
436
+ text-align: center;
437
+ }
438
+
439
+ .jp-ai-tool-call-diff-line-text {
440
+ min-width: 0;
441
+ white-space: pre-wrap;
442
+ word-break: break-word;
443
+ }
444
+
445
+ .jp-ai-tool-call-diff-line-text:empty::before {
446
+ content: '·';
447
+ opacity: 0.35;
448
+ }
449
+
450
+ .jp-ai-tool-call-diff-line.jp-mod-added {
451
+ background: color-mix(
452
+ in srgb,
453
+ var(--jp-success-color1, #388e3c) 15%,
454
+ transparent
455
+ );
456
+ }
457
+
458
+ .jp-ai-tool-call-diff-line.jp-mod-removed {
459
+ background: color-mix(
460
+ in srgb,
461
+ var(--jp-error-color1, #d32f2f) 15%,
462
+ transparent
463
+ );
464
+ }
465
+
466
+ .jp-ai-tool-call-diff-line.jp-mod-context {
467
+ color: var(--jp-ui-font-color2);
468
+ }
469
+
470
+ .jp-ai-tool-call-diff-empty {
471
+ padding: 6px 8px;
472
+ color: var(--jp-ui-font-color2);
473
+ font-style: italic;
474
+ }
475
+
476
+ .jp-ai-tool-call-diff-toggle {
477
+ padding: 4px 8px 8px;
478
+ border: none;
479
+ background: none;
480
+ color: var(--jp-ui-font-color2);
481
+ font-family: var(--jp-ui-font-family);
482
+ font-size: var(--jp-ui-font-size0);
483
+ font-style: italic;
484
+ cursor: pointer;
485
+ text-align: left;
486
+ }
487
+
225
488
  /* Inline Diff */
226
489
  .jp-ai-inline-diff-container {
227
490
  display: flex;