@contractspec/example.integration-hub 3.5.5 → 3.7.0

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.
package/dist/ui/index.js CHANGED
@@ -319,6 +319,38 @@ function useIntegrationData(projectId = "local-project") {
319
319
  };
320
320
  }
321
321
 
322
+ // src/ui/IntegrationHubChat.tsx
323
+ import { ChatWithSidebar } from "@contractspec/module.ai-chat";
324
+ import { jsxDEV } from "react/jsx-dev-runtime";
325
+ "use client";
326
+ var DEFAULT_SUGGESTIONS = [
327
+ "List my integrations",
328
+ "Show sync status",
329
+ "Add a connection"
330
+ ];
331
+ var DEFAULT_SYSTEM_PROMPT = `You are an Integration Hub assistant. Help users manage integrations, connections, and sync configurations. When asked about integrations, connections, or syncs, provide clear, actionable guidance.`;
332
+ function IntegrationHubChat({
333
+ proxyUrl = "/api/chat",
334
+ mcpServers,
335
+ thinkingLevel = "thinking",
336
+ suggestions = DEFAULT_SUGGESTIONS,
337
+ systemPrompt = DEFAULT_SYSTEM_PROMPT,
338
+ className
339
+ }) {
340
+ return /* @__PURE__ */ jsxDEV("div", {
341
+ className: className ?? "flex h-[500px] flex-col",
342
+ children: /* @__PURE__ */ jsxDEV(ChatWithSidebar, {
343
+ className: "flex-1",
344
+ systemPrompt,
345
+ proxyUrl,
346
+ mcpServers,
347
+ thinkingLevel,
348
+ suggestions,
349
+ showSuggestionsWhenEmpty: true
350
+ }, undefined, false, undefined, this)
351
+ }, undefined, false, undefined, this);
352
+ }
353
+
322
354
  // src/ui/IntegrationDashboard.tsx
323
355
  import { useState as useState2 } from "react";
324
356
  import {
@@ -328,7 +360,7 @@ import {
328
360
  StatCard,
329
361
  StatCardGroup
330
362
  } from "@contractspec/lib.design-system";
331
- import { jsxDEV } from "react/jsx-dev-runtime";
363
+ import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
332
364
  "use client";
333
365
  var STATUS_COLORS = {
334
366
  ACTIVE: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
@@ -361,35 +393,36 @@ function IntegrationDashboard() {
361
393
  const tabs = [
362
394
  { id: "integrations", label: "Integrations", icon: "\uD83D\uDD0C" },
363
395
  { id: "connections", label: "Connections", icon: "\uD83D\uDD17" },
364
- { id: "syncs", label: "Sync Configs", icon: "\uD83D\uDD04" }
396
+ { id: "syncs", label: "Sync Configs", icon: "\uD83D\uDD04" },
397
+ { id: "chat", label: "Chat", icon: "\uD83D\uDCAC" }
365
398
  ];
366
399
  if (loading) {
367
- return /* @__PURE__ */ jsxDEV(LoaderBlock, {
400
+ return /* @__PURE__ */ jsxDEV2(LoaderBlock, {
368
401
  label: "Loading Integrations..."
369
402
  }, undefined, false, undefined, this);
370
403
  }
371
404
  if (error) {
372
- return /* @__PURE__ */ jsxDEV(ErrorState, {
405
+ return /* @__PURE__ */ jsxDEV2(ErrorState, {
373
406
  title: "Failed to load Integrations",
374
407
  description: error.message,
375
408
  onRetry: refetch,
376
409
  retryLabel: "Retry"
377
410
  }, undefined, false, undefined, this);
378
411
  }
379
- return /* @__PURE__ */ jsxDEV("div", {
412
+ return /* @__PURE__ */ jsxDEV2("div", {
380
413
  className: "space-y-6",
381
414
  children: [
382
- /* @__PURE__ */ jsxDEV("div", {
415
+ /* @__PURE__ */ jsxDEV2("div", {
383
416
  className: "flex items-center justify-between",
384
417
  children: [
385
- /* @__PURE__ */ jsxDEV("h2", {
418
+ /* @__PURE__ */ jsxDEV2("h2", {
386
419
  className: "text-2xl font-bold",
387
420
  children: "Integration Hub"
388
421
  }, undefined, false, undefined, this),
389
- /* @__PURE__ */ jsxDEV(Button, {
422
+ /* @__PURE__ */ jsxDEV2(Button, {
390
423
  onClick: () => alert("Add integration modal"),
391
424
  children: [
392
- /* @__PURE__ */ jsxDEV("span", {
425
+ /* @__PURE__ */ jsxDEV2("span", {
393
426
  className: "mr-2",
394
427
  children: "+"
395
428
  }, undefined, false, undefined, this),
@@ -398,66 +431,66 @@ function IntegrationDashboard() {
398
431
  }, undefined, true, undefined, this)
399
432
  ]
400
433
  }, undefined, true, undefined, this),
401
- /* @__PURE__ */ jsxDEV(StatCardGroup, {
434
+ /* @__PURE__ */ jsxDEV2(StatCardGroup, {
402
435
  children: [
403
- /* @__PURE__ */ jsxDEV(StatCard, {
436
+ /* @__PURE__ */ jsxDEV2(StatCard, {
404
437
  label: "Integrations",
405
438
  value: stats.totalIntegrations,
406
439
  hint: `${stats.activeIntegrations} active`
407
440
  }, undefined, false, undefined, this),
408
- /* @__PURE__ */ jsxDEV(StatCard, {
441
+ /* @__PURE__ */ jsxDEV2(StatCard, {
409
442
  label: "Connections",
410
443
  value: stats.totalConnections,
411
444
  hint: `${stats.connectedCount} connected`
412
445
  }, undefined, false, undefined, this),
413
- /* @__PURE__ */ jsxDEV(StatCard, {
446
+ /* @__PURE__ */ jsxDEV2(StatCard, {
414
447
  label: "Syncs",
415
448
  value: stats.totalSyncs,
416
449
  hint: `${stats.activeSyncs} active`
417
450
  }, undefined, false, undefined, this)
418
451
  ]
419
452
  }, undefined, true, undefined, this),
420
- /* @__PURE__ */ jsxDEV("nav", {
453
+ /* @__PURE__ */ jsxDEV2("nav", {
421
454
  className: "bg-muted flex gap-1 rounded-lg p-1",
422
455
  role: "tablist",
423
- children: tabs.map((tab) => /* @__PURE__ */ jsxDEV(Button, {
456
+ children: tabs.map((tab) => /* @__PURE__ */ jsxDEV2(Button, {
424
457
  type: "button",
425
458
  role: "tab",
426
459
  "aria-selected": activeTab === tab.id,
427
460
  onClick: () => setActiveTab(tab.id),
428
461
  className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
429
462
  children: [
430
- /* @__PURE__ */ jsxDEV("span", {
463
+ /* @__PURE__ */ jsxDEV2("span", {
431
464
  children: tab.icon
432
465
  }, undefined, false, undefined, this),
433
466
  tab.label
434
467
  ]
435
468
  }, tab.id, true, undefined, this))
436
469
  }, undefined, false, undefined, this),
437
- /* @__PURE__ */ jsxDEV("div", {
470
+ /* @__PURE__ */ jsxDEV2("div", {
438
471
  className: "min-h-[400px]",
439
472
  role: "tabpanel",
440
473
  children: [
441
- activeTab === "integrations" && /* @__PURE__ */ jsxDEV("div", {
474
+ activeTab === "integrations" && /* @__PURE__ */ jsxDEV2("div", {
442
475
  className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
443
476
  children: [
444
- integrations.map((integration) => /* @__PURE__ */ jsxDEV("div", {
477
+ integrations.map((integration) => /* @__PURE__ */ jsxDEV2("div", {
445
478
  className: "border-border bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-4 transition-colors",
446
479
  children: [
447
- /* @__PURE__ */ jsxDEV("div", {
480
+ /* @__PURE__ */ jsxDEV2("div", {
448
481
  className: "mb-3 flex items-center gap-3",
449
482
  children: [
450
- /* @__PURE__ */ jsxDEV("span", {
483
+ /* @__PURE__ */ jsxDEV2("span", {
451
484
  className: "text-2xl",
452
485
  children: TYPE_ICONS[integration.type] ?? "\u2699\uFE0F"
453
486
  }, undefined, false, undefined, this),
454
- /* @__PURE__ */ jsxDEV("div", {
487
+ /* @__PURE__ */ jsxDEV2("div", {
455
488
  children: [
456
- /* @__PURE__ */ jsxDEV("h3", {
489
+ /* @__PURE__ */ jsxDEV2("h3", {
457
490
  className: "font-medium",
458
491
  children: integration.name
459
492
  }, undefined, false, undefined, this),
460
- /* @__PURE__ */ jsxDEV("p", {
493
+ /* @__PURE__ */ jsxDEV2("p", {
461
494
  className: "text-muted-foreground text-sm",
462
495
  children: integration.type
463
496
  }, undefined, false, undefined, this)
@@ -465,14 +498,14 @@ function IntegrationDashboard() {
465
498
  }, undefined, true, undefined, this)
466
499
  ]
467
500
  }, undefined, true, undefined, this),
468
- /* @__PURE__ */ jsxDEV("div", {
501
+ /* @__PURE__ */ jsxDEV2("div", {
469
502
  className: "flex items-center justify-between",
470
503
  children: [
471
- /* @__PURE__ */ jsxDEV("span", {
504
+ /* @__PURE__ */ jsxDEV2("span", {
472
505
  className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[integration.status] ?? ""}`,
473
506
  children: integration.status
474
507
  }, undefined, false, undefined, this),
475
- /* @__PURE__ */ jsxDEV("span", {
508
+ /* @__PURE__ */ jsxDEV2("span", {
476
509
  className: "text-muted-foreground text-xs",
477
510
  children: integration.createdAt.toLocaleDateString()
478
511
  }, undefined, false, undefined, this)
@@ -480,64 +513,64 @@ function IntegrationDashboard() {
480
513
  }, undefined, true, undefined, this)
481
514
  ]
482
515
  }, integration.id, true, undefined, this)),
483
- integrations.length === 0 && /* @__PURE__ */ jsxDEV("div", {
516
+ integrations.length === 0 && /* @__PURE__ */ jsxDEV2("div", {
484
517
  className: "text-muted-foreground col-span-full flex h-64 items-center justify-center",
485
518
  children: "No integrations configured"
486
519
  }, undefined, false, undefined, this)
487
520
  ]
488
521
  }, undefined, true, undefined, this),
489
- activeTab === "connections" && /* @__PURE__ */ jsxDEV("div", {
522
+ activeTab === "connections" && /* @__PURE__ */ jsxDEV2("div", {
490
523
  className: "border-border rounded-lg border",
491
- children: /* @__PURE__ */ jsxDEV("table", {
524
+ children: /* @__PURE__ */ jsxDEV2("table", {
492
525
  className: "w-full",
493
526
  children: [
494
- /* @__PURE__ */ jsxDEV("thead", {
527
+ /* @__PURE__ */ jsxDEV2("thead", {
495
528
  className: "border-border bg-muted/30 border-b",
496
- children: /* @__PURE__ */ jsxDEV("tr", {
529
+ children: /* @__PURE__ */ jsxDEV2("tr", {
497
530
  children: [
498
- /* @__PURE__ */ jsxDEV("th", {
531
+ /* @__PURE__ */ jsxDEV2("th", {
499
532
  className: "px-4 py-3 text-left text-sm font-medium",
500
533
  children: "Connection"
501
534
  }, undefined, false, undefined, this),
502
- /* @__PURE__ */ jsxDEV("th", {
535
+ /* @__PURE__ */ jsxDEV2("th", {
503
536
  className: "px-4 py-3 text-left text-sm font-medium",
504
537
  children: "Status"
505
538
  }, undefined, false, undefined, this),
506
- /* @__PURE__ */ jsxDEV("th", {
539
+ /* @__PURE__ */ jsxDEV2("th", {
507
540
  className: "px-4 py-3 text-left text-sm font-medium",
508
541
  children: "Last Sync"
509
542
  }, undefined, false, undefined, this)
510
543
  ]
511
544
  }, undefined, true, undefined, this)
512
545
  }, undefined, false, undefined, this),
513
- /* @__PURE__ */ jsxDEV("tbody", {
546
+ /* @__PURE__ */ jsxDEV2("tbody", {
514
547
  className: "divide-border divide-y",
515
548
  children: [
516
- connections.map((conn) => /* @__PURE__ */ jsxDEV("tr", {
549
+ connections.map((conn) => /* @__PURE__ */ jsxDEV2("tr", {
517
550
  className: "hover:bg-muted/50",
518
551
  children: [
519
- /* @__PURE__ */ jsxDEV("td", {
552
+ /* @__PURE__ */ jsxDEV2("td", {
520
553
  className: "px-4 py-3",
521
- children: /* @__PURE__ */ jsxDEV("div", {
554
+ children: /* @__PURE__ */ jsxDEV2("div", {
522
555
  className: "font-medium",
523
556
  children: conn.name
524
557
  }, undefined, false, undefined, this)
525
558
  }, undefined, false, undefined, this),
526
- /* @__PURE__ */ jsxDEV("td", {
559
+ /* @__PURE__ */ jsxDEV2("td", {
527
560
  className: "px-4 py-3",
528
- children: /* @__PURE__ */ jsxDEV("span", {
561
+ children: /* @__PURE__ */ jsxDEV2("span", {
529
562
  className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[conn.status] ?? ""}`,
530
563
  children: conn.status
531
564
  }, undefined, false, undefined, this)
532
565
  }, undefined, false, undefined, this),
533
- /* @__PURE__ */ jsxDEV("td", {
566
+ /* @__PURE__ */ jsxDEV2("td", {
534
567
  className: "text-muted-foreground px-4 py-3 text-sm",
535
568
  children: conn.lastSyncAt?.toLocaleString() ?? "Never"
536
569
  }, undefined, false, undefined, this)
537
570
  ]
538
571
  }, conn.id, true, undefined, this)),
539
- connections.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
540
- children: /* @__PURE__ */ jsxDEV("td", {
572
+ connections.length === 0 && /* @__PURE__ */ jsxDEV2("tr", {
573
+ children: /* @__PURE__ */ jsxDEV2("td", {
541
574
  colSpan: 3,
542
575
  className: "text-muted-foreground px-4 py-8 text-center",
543
576
  children: "No connections found"
@@ -548,48 +581,58 @@ function IntegrationDashboard() {
548
581
  ]
549
582
  }, undefined, true, undefined, this)
550
583
  }, undefined, false, undefined, this),
551
- activeTab === "syncs" && /* @__PURE__ */ jsxDEV("div", {
584
+ activeTab === "chat" && /* @__PURE__ */ jsxDEV2(IntegrationHubChat, {
585
+ proxyUrl: "/api/chat",
586
+ thinkingLevel: "thinking",
587
+ suggestions: [
588
+ "List my integrations",
589
+ "Show sync status",
590
+ "Add a connection"
591
+ ],
592
+ className: "min-h-[400px]"
593
+ }, undefined, false, undefined, this),
594
+ activeTab === "syncs" && /* @__PURE__ */ jsxDEV2("div", {
552
595
  className: "border-border rounded-lg border",
553
- children: /* @__PURE__ */ jsxDEV("table", {
596
+ children: /* @__PURE__ */ jsxDEV2("table", {
554
597
  className: "w-full",
555
598
  children: [
556
- /* @__PURE__ */ jsxDEV("thead", {
599
+ /* @__PURE__ */ jsxDEV2("thead", {
557
600
  className: "border-border bg-muted/30 border-b",
558
- children: /* @__PURE__ */ jsxDEV("tr", {
601
+ children: /* @__PURE__ */ jsxDEV2("tr", {
559
602
  children: [
560
- /* @__PURE__ */ jsxDEV("th", {
603
+ /* @__PURE__ */ jsxDEV2("th", {
561
604
  className: "px-4 py-3 text-left text-sm font-medium",
562
605
  children: "Sync Config"
563
606
  }, undefined, false, undefined, this),
564
- /* @__PURE__ */ jsxDEV("th", {
607
+ /* @__PURE__ */ jsxDEV2("th", {
565
608
  className: "px-4 py-3 text-left text-sm font-medium",
566
609
  children: "Frequency"
567
610
  }, undefined, false, undefined, this),
568
- /* @__PURE__ */ jsxDEV("th", {
611
+ /* @__PURE__ */ jsxDEV2("th", {
569
612
  className: "px-4 py-3 text-left text-sm font-medium",
570
613
  children: "Status"
571
614
  }, undefined, false, undefined, this),
572
- /* @__PURE__ */ jsxDEV("th", {
615
+ /* @__PURE__ */ jsxDEV2("th", {
573
616
  className: "px-4 py-3 text-left text-sm font-medium",
574
617
  children: "Records"
575
618
  }, undefined, false, undefined, this)
576
619
  ]
577
620
  }, undefined, true, undefined, this)
578
621
  }, undefined, false, undefined, this),
579
- /* @__PURE__ */ jsxDEV("tbody", {
622
+ /* @__PURE__ */ jsxDEV2("tbody", {
580
623
  className: "divide-border divide-y",
581
624
  children: [
582
- syncConfigs.map((sync) => /* @__PURE__ */ jsxDEV("tr", {
625
+ syncConfigs.map((sync) => /* @__PURE__ */ jsxDEV2("tr", {
583
626
  className: "hover:bg-muted/50",
584
627
  children: [
585
- /* @__PURE__ */ jsxDEV("td", {
628
+ /* @__PURE__ */ jsxDEV2("td", {
586
629
  className: "px-4 py-3",
587
630
  children: [
588
- /* @__PURE__ */ jsxDEV("div", {
631
+ /* @__PURE__ */ jsxDEV2("div", {
589
632
  className: "font-medium",
590
633
  children: sync.name
591
634
  }, undefined, false, undefined, this),
592
- /* @__PURE__ */ jsxDEV("div", {
635
+ /* @__PURE__ */ jsxDEV2("div", {
593
636
  className: "text-muted-foreground text-sm",
594
637
  children: [
595
638
  sync.sourceEntity,
@@ -599,25 +642,25 @@ function IntegrationDashboard() {
599
642
  }, undefined, true, undefined, this)
600
643
  ]
601
644
  }, undefined, true, undefined, this),
602
- /* @__PURE__ */ jsxDEV("td", {
645
+ /* @__PURE__ */ jsxDEV2("td", {
603
646
  className: "px-4 py-3 text-sm",
604
647
  children: sync.frequency
605
648
  }, undefined, false, undefined, this),
606
- /* @__PURE__ */ jsxDEV("td", {
649
+ /* @__PURE__ */ jsxDEV2("td", {
607
650
  className: "px-4 py-3",
608
- children: /* @__PURE__ */ jsxDEV("span", {
651
+ children: /* @__PURE__ */ jsxDEV2("span", {
609
652
  className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[sync.status] ?? ""}`,
610
653
  children: sync.status
611
654
  }, undefined, false, undefined, this)
612
655
  }, undefined, false, undefined, this),
613
- /* @__PURE__ */ jsxDEV("td", {
656
+ /* @__PURE__ */ jsxDEV2("td", {
614
657
  className: "text-muted-foreground px-4 py-3 text-sm",
615
658
  children: sync.recordsSynced.toLocaleString()
616
659
  }, undefined, false, undefined, this)
617
660
  ]
618
661
  }, sync.id, true, undefined, this)),
619
- syncConfigs.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
620
- children: /* @__PURE__ */ jsxDEV("td", {
662
+ syncConfigs.length === 0 && /* @__PURE__ */ jsxDEV2("tr", {
663
+ children: /* @__PURE__ */ jsxDEV2("td", {
621
664
  colSpan: 4,
622
665
  className: "text-muted-foreground px-4 py-8 text-center",
623
666
  children: "No sync configurations found"
@@ -641,5 +684,6 @@ export {
641
684
  syncConfigMarkdownRenderer,
642
685
  integrationDashboardMarkdownRenderer,
643
686
  connectionListMarkdownRenderer,
687
+ IntegrationHubChat,
644
688
  IntegrationDashboard
645
689
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contractspec/example.integration-hub",
3
- "version": "3.5.5",
3
+ "version": "3.7.0",
4
4
  "description": "Integration Hub example with sync engine and field mappings for ContractSpec",
5
5
  "types": "./dist/index.d.ts",
6
6
  "type": "module",
@@ -21,21 +21,22 @@
21
21
  "typecheck": "tsc --noEmit"
22
22
  },
23
23
  "dependencies": {
24
- "@contractspec/lib.ai-agent": "5.0.5",
25
- "@contractspec/lib.schema": "3.5.5",
26
- "@contractspec/lib.contracts-spec": "3.5.5",
27
- "@contractspec/lib.example-shared-ui": "4.0.5",
28
- "@contractspec/lib.design-system": "3.5.5",
29
- "@contractspec/lib.runtime-sandbox": "2.5.5",
30
- "react": "19.2.4",
31
- "react-dom": "19.2.4"
24
+ "@contractspec/lib.ai-agent": "7.0.0",
25
+ "@contractspec/module.ai-chat": "4.3.0",
26
+ "@contractspec/lib.schema": "3.7.0",
27
+ "@contractspec/lib.contracts-spec": "3.7.0",
28
+ "@contractspec/lib.example-shared-ui": "6.0.0",
29
+ "@contractspec/lib.design-system": "3.7.0",
30
+ "@contractspec/lib.runtime-sandbox": "2.7.0",
31
+ "react": "19.2.0",
32
+ "react-dom": "19.2.0"
32
33
  },
33
34
  "devDependencies": {
34
- "@contractspec/tool.typescript": "3.5.5",
35
+ "@contractspec/tool.typescript": "3.7.0",
35
36
  "typescript": "^5.9.3",
36
37
  "@types/react": "^19.2.14",
37
38
  "@types/react-dom": "^19.2.2",
38
- "@contractspec/tool.bun": "3.5.5"
39
+ "@contractspec/tool.bun": "3.7.0"
39
40
  },
40
41
  "exports": {
41
42
  ".": {
@@ -290,6 +291,12 @@
290
291
  "node": "./dist/node/ui/IntegrationDashboard.js",
291
292
  "default": "./dist/ui/IntegrationDashboard.js"
292
293
  },
294
+ "./ui/IntegrationHubChat": {
295
+ "types": "./dist/ui/IntegrationHubChat.d.ts",
296
+ "bun": "./dist/ui/IntegrationHubChat.js",
297
+ "node": "./dist/node/ui/IntegrationHubChat.js",
298
+ "default": "./dist/ui/IntegrationHubChat.js"
299
+ },
293
300
  "./ui/renderers": {
294
301
  "types": "./dist/ui/renderers/index.d.ts",
295
302
  "bun": "./dist/ui/renderers/index.js",
@@ -568,6 +575,12 @@
568
575
  "node": "./dist/node/ui/IntegrationDashboard.js",
569
576
  "default": "./dist/ui/IntegrationDashboard.js"
570
577
  },
578
+ "./ui/IntegrationHubChat": {
579
+ "types": "./dist/ui/IntegrationHubChat.d.ts",
580
+ "bun": "./dist/ui/IntegrationHubChat.js",
581
+ "node": "./dist/node/ui/IntegrationHubChat.js",
582
+ "default": "./dist/ui/IntegrationHubChat.js"
583
+ },
571
584
  "./ui/renderers": {
572
585
  "types": "./dist/ui/renderers/index.d.ts",
573
586
  "bun": "./dist/ui/renderers/index.js",