@contractspec/example.integration-hub 3.5.5 → 3.6.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/index.js CHANGED
@@ -1131,6 +1131,38 @@ function useIntegrationData(projectId = "local-project") {
1131
1131
  };
1132
1132
  }
1133
1133
 
1134
+ // src/ui/IntegrationHubChat.tsx
1135
+ import { ChatWithSidebar } from "@contractspec/module.ai-chat";
1136
+ import { jsxDEV } from "react/jsx-dev-runtime";
1137
+ "use client";
1138
+ var DEFAULT_SUGGESTIONS = [
1139
+ "List my integrations",
1140
+ "Show sync status",
1141
+ "Add a connection"
1142
+ ];
1143
+ 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.`;
1144
+ function IntegrationHubChat({
1145
+ proxyUrl = "/api/chat",
1146
+ mcpServers,
1147
+ thinkingLevel = "thinking",
1148
+ suggestions = DEFAULT_SUGGESTIONS,
1149
+ systemPrompt = DEFAULT_SYSTEM_PROMPT,
1150
+ className
1151
+ }) {
1152
+ return /* @__PURE__ */ jsxDEV("div", {
1153
+ className: className ?? "flex h-[500px] flex-col",
1154
+ children: /* @__PURE__ */ jsxDEV(ChatWithSidebar, {
1155
+ className: "flex-1",
1156
+ systemPrompt,
1157
+ proxyUrl,
1158
+ mcpServers,
1159
+ thinkingLevel,
1160
+ suggestions,
1161
+ showSuggestionsWhenEmpty: true
1162
+ }, undefined, false, undefined, this)
1163
+ }, undefined, false, undefined, this);
1164
+ }
1165
+
1134
1166
  // src/ui/IntegrationDashboard.tsx
1135
1167
  import { useState as useState2 } from "react";
1136
1168
  import {
@@ -1140,7 +1172,7 @@ import {
1140
1172
  StatCard,
1141
1173
  StatCardGroup
1142
1174
  } from "@contractspec/lib.design-system";
1143
- import { jsxDEV } from "react/jsx-dev-runtime";
1175
+ import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
1144
1176
  "use client";
1145
1177
  var STATUS_COLORS = {
1146
1178
  ACTIVE: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
@@ -1173,35 +1205,36 @@ function IntegrationDashboard() {
1173
1205
  const tabs = [
1174
1206
  { id: "integrations", label: "Integrations", icon: "\uD83D\uDD0C" },
1175
1207
  { id: "connections", label: "Connections", icon: "\uD83D\uDD17" },
1176
- { id: "syncs", label: "Sync Configs", icon: "\uD83D\uDD04" }
1208
+ { id: "syncs", label: "Sync Configs", icon: "\uD83D\uDD04" },
1209
+ { id: "chat", label: "Chat", icon: "\uD83D\uDCAC" }
1177
1210
  ];
1178
1211
  if (loading) {
1179
- return /* @__PURE__ */ jsxDEV(LoaderBlock, {
1212
+ return /* @__PURE__ */ jsxDEV2(LoaderBlock, {
1180
1213
  label: "Loading Integrations..."
1181
1214
  }, undefined, false, undefined, this);
1182
1215
  }
1183
1216
  if (error) {
1184
- return /* @__PURE__ */ jsxDEV(ErrorState, {
1217
+ return /* @__PURE__ */ jsxDEV2(ErrorState, {
1185
1218
  title: "Failed to load Integrations",
1186
1219
  description: error.message,
1187
1220
  onRetry: refetch,
1188
1221
  retryLabel: "Retry"
1189
1222
  }, undefined, false, undefined, this);
1190
1223
  }
1191
- return /* @__PURE__ */ jsxDEV("div", {
1224
+ return /* @__PURE__ */ jsxDEV2("div", {
1192
1225
  className: "space-y-6",
1193
1226
  children: [
1194
- /* @__PURE__ */ jsxDEV("div", {
1227
+ /* @__PURE__ */ jsxDEV2("div", {
1195
1228
  className: "flex items-center justify-between",
1196
1229
  children: [
1197
- /* @__PURE__ */ jsxDEV("h2", {
1230
+ /* @__PURE__ */ jsxDEV2("h2", {
1198
1231
  className: "text-2xl font-bold",
1199
1232
  children: "Integration Hub"
1200
1233
  }, undefined, false, undefined, this),
1201
- /* @__PURE__ */ jsxDEV(Button, {
1234
+ /* @__PURE__ */ jsxDEV2(Button, {
1202
1235
  onClick: () => alert("Add integration modal"),
1203
1236
  children: [
1204
- /* @__PURE__ */ jsxDEV("span", {
1237
+ /* @__PURE__ */ jsxDEV2("span", {
1205
1238
  className: "mr-2",
1206
1239
  children: "+"
1207
1240
  }, undefined, false, undefined, this),
@@ -1210,66 +1243,66 @@ function IntegrationDashboard() {
1210
1243
  }, undefined, true, undefined, this)
1211
1244
  ]
1212
1245
  }, undefined, true, undefined, this),
1213
- /* @__PURE__ */ jsxDEV(StatCardGroup, {
1246
+ /* @__PURE__ */ jsxDEV2(StatCardGroup, {
1214
1247
  children: [
1215
- /* @__PURE__ */ jsxDEV(StatCard, {
1248
+ /* @__PURE__ */ jsxDEV2(StatCard, {
1216
1249
  label: "Integrations",
1217
1250
  value: stats.totalIntegrations,
1218
1251
  hint: `${stats.activeIntegrations} active`
1219
1252
  }, undefined, false, undefined, this),
1220
- /* @__PURE__ */ jsxDEV(StatCard, {
1253
+ /* @__PURE__ */ jsxDEV2(StatCard, {
1221
1254
  label: "Connections",
1222
1255
  value: stats.totalConnections,
1223
1256
  hint: `${stats.connectedCount} connected`
1224
1257
  }, undefined, false, undefined, this),
1225
- /* @__PURE__ */ jsxDEV(StatCard, {
1258
+ /* @__PURE__ */ jsxDEV2(StatCard, {
1226
1259
  label: "Syncs",
1227
1260
  value: stats.totalSyncs,
1228
1261
  hint: `${stats.activeSyncs} active`
1229
1262
  }, undefined, false, undefined, this)
1230
1263
  ]
1231
1264
  }, undefined, true, undefined, this),
1232
- /* @__PURE__ */ jsxDEV("nav", {
1265
+ /* @__PURE__ */ jsxDEV2("nav", {
1233
1266
  className: "bg-muted flex gap-1 rounded-lg p-1",
1234
1267
  role: "tablist",
1235
- children: tabs.map((tab) => /* @__PURE__ */ jsxDEV(Button, {
1268
+ children: tabs.map((tab) => /* @__PURE__ */ jsxDEV2(Button, {
1236
1269
  type: "button",
1237
1270
  role: "tab",
1238
1271
  "aria-selected": activeTab === tab.id,
1239
1272
  onClick: () => setActiveTab(tab.id),
1240
1273
  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"}`,
1241
1274
  children: [
1242
- /* @__PURE__ */ jsxDEV("span", {
1275
+ /* @__PURE__ */ jsxDEV2("span", {
1243
1276
  children: tab.icon
1244
1277
  }, undefined, false, undefined, this),
1245
1278
  tab.label
1246
1279
  ]
1247
1280
  }, tab.id, true, undefined, this))
1248
1281
  }, undefined, false, undefined, this),
1249
- /* @__PURE__ */ jsxDEV("div", {
1282
+ /* @__PURE__ */ jsxDEV2("div", {
1250
1283
  className: "min-h-[400px]",
1251
1284
  role: "tabpanel",
1252
1285
  children: [
1253
- activeTab === "integrations" && /* @__PURE__ */ jsxDEV("div", {
1286
+ activeTab === "integrations" && /* @__PURE__ */ jsxDEV2("div", {
1254
1287
  className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
1255
1288
  children: [
1256
- integrations.map((integration) => /* @__PURE__ */ jsxDEV("div", {
1289
+ integrations.map((integration) => /* @__PURE__ */ jsxDEV2("div", {
1257
1290
  className: "border-border bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-4 transition-colors",
1258
1291
  children: [
1259
- /* @__PURE__ */ jsxDEV("div", {
1292
+ /* @__PURE__ */ jsxDEV2("div", {
1260
1293
  className: "mb-3 flex items-center gap-3",
1261
1294
  children: [
1262
- /* @__PURE__ */ jsxDEV("span", {
1295
+ /* @__PURE__ */ jsxDEV2("span", {
1263
1296
  className: "text-2xl",
1264
1297
  children: TYPE_ICONS[integration.type] ?? "\u2699\uFE0F"
1265
1298
  }, undefined, false, undefined, this),
1266
- /* @__PURE__ */ jsxDEV("div", {
1299
+ /* @__PURE__ */ jsxDEV2("div", {
1267
1300
  children: [
1268
- /* @__PURE__ */ jsxDEV("h3", {
1301
+ /* @__PURE__ */ jsxDEV2("h3", {
1269
1302
  className: "font-medium",
1270
1303
  children: integration.name
1271
1304
  }, undefined, false, undefined, this),
1272
- /* @__PURE__ */ jsxDEV("p", {
1305
+ /* @__PURE__ */ jsxDEV2("p", {
1273
1306
  className: "text-muted-foreground text-sm",
1274
1307
  children: integration.type
1275
1308
  }, undefined, false, undefined, this)
@@ -1277,14 +1310,14 @@ function IntegrationDashboard() {
1277
1310
  }, undefined, true, undefined, this)
1278
1311
  ]
1279
1312
  }, undefined, true, undefined, this),
1280
- /* @__PURE__ */ jsxDEV("div", {
1313
+ /* @__PURE__ */ jsxDEV2("div", {
1281
1314
  className: "flex items-center justify-between",
1282
1315
  children: [
1283
- /* @__PURE__ */ jsxDEV("span", {
1316
+ /* @__PURE__ */ jsxDEV2("span", {
1284
1317
  className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[integration.status] ?? ""}`,
1285
1318
  children: integration.status
1286
1319
  }, undefined, false, undefined, this),
1287
- /* @__PURE__ */ jsxDEV("span", {
1320
+ /* @__PURE__ */ jsxDEV2("span", {
1288
1321
  className: "text-muted-foreground text-xs",
1289
1322
  children: integration.createdAt.toLocaleDateString()
1290
1323
  }, undefined, false, undefined, this)
@@ -1292,64 +1325,64 @@ function IntegrationDashboard() {
1292
1325
  }, undefined, true, undefined, this)
1293
1326
  ]
1294
1327
  }, integration.id, true, undefined, this)),
1295
- integrations.length === 0 && /* @__PURE__ */ jsxDEV("div", {
1328
+ integrations.length === 0 && /* @__PURE__ */ jsxDEV2("div", {
1296
1329
  className: "text-muted-foreground col-span-full flex h-64 items-center justify-center",
1297
1330
  children: "No integrations configured"
1298
1331
  }, undefined, false, undefined, this)
1299
1332
  ]
1300
1333
  }, undefined, true, undefined, this),
1301
- activeTab === "connections" && /* @__PURE__ */ jsxDEV("div", {
1334
+ activeTab === "connections" && /* @__PURE__ */ jsxDEV2("div", {
1302
1335
  className: "border-border rounded-lg border",
1303
- children: /* @__PURE__ */ jsxDEV("table", {
1336
+ children: /* @__PURE__ */ jsxDEV2("table", {
1304
1337
  className: "w-full",
1305
1338
  children: [
1306
- /* @__PURE__ */ jsxDEV("thead", {
1339
+ /* @__PURE__ */ jsxDEV2("thead", {
1307
1340
  className: "border-border bg-muted/30 border-b",
1308
- children: /* @__PURE__ */ jsxDEV("tr", {
1341
+ children: /* @__PURE__ */ jsxDEV2("tr", {
1309
1342
  children: [
1310
- /* @__PURE__ */ jsxDEV("th", {
1343
+ /* @__PURE__ */ jsxDEV2("th", {
1311
1344
  className: "px-4 py-3 text-left text-sm font-medium",
1312
1345
  children: "Connection"
1313
1346
  }, undefined, false, undefined, this),
1314
- /* @__PURE__ */ jsxDEV("th", {
1347
+ /* @__PURE__ */ jsxDEV2("th", {
1315
1348
  className: "px-4 py-3 text-left text-sm font-medium",
1316
1349
  children: "Status"
1317
1350
  }, undefined, false, undefined, this),
1318
- /* @__PURE__ */ jsxDEV("th", {
1351
+ /* @__PURE__ */ jsxDEV2("th", {
1319
1352
  className: "px-4 py-3 text-left text-sm font-medium",
1320
1353
  children: "Last Sync"
1321
1354
  }, undefined, false, undefined, this)
1322
1355
  ]
1323
1356
  }, undefined, true, undefined, this)
1324
1357
  }, undefined, false, undefined, this),
1325
- /* @__PURE__ */ jsxDEV("tbody", {
1358
+ /* @__PURE__ */ jsxDEV2("tbody", {
1326
1359
  className: "divide-border divide-y",
1327
1360
  children: [
1328
- connections.map((conn) => /* @__PURE__ */ jsxDEV("tr", {
1361
+ connections.map((conn) => /* @__PURE__ */ jsxDEV2("tr", {
1329
1362
  className: "hover:bg-muted/50",
1330
1363
  children: [
1331
- /* @__PURE__ */ jsxDEV("td", {
1364
+ /* @__PURE__ */ jsxDEV2("td", {
1332
1365
  className: "px-4 py-3",
1333
- children: /* @__PURE__ */ jsxDEV("div", {
1366
+ children: /* @__PURE__ */ jsxDEV2("div", {
1334
1367
  className: "font-medium",
1335
1368
  children: conn.name
1336
1369
  }, undefined, false, undefined, this)
1337
1370
  }, undefined, false, undefined, this),
1338
- /* @__PURE__ */ jsxDEV("td", {
1371
+ /* @__PURE__ */ jsxDEV2("td", {
1339
1372
  className: "px-4 py-3",
1340
- children: /* @__PURE__ */ jsxDEV("span", {
1373
+ children: /* @__PURE__ */ jsxDEV2("span", {
1341
1374
  className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[conn.status] ?? ""}`,
1342
1375
  children: conn.status
1343
1376
  }, undefined, false, undefined, this)
1344
1377
  }, undefined, false, undefined, this),
1345
- /* @__PURE__ */ jsxDEV("td", {
1378
+ /* @__PURE__ */ jsxDEV2("td", {
1346
1379
  className: "text-muted-foreground px-4 py-3 text-sm",
1347
1380
  children: conn.lastSyncAt?.toLocaleString() ?? "Never"
1348
1381
  }, undefined, false, undefined, this)
1349
1382
  ]
1350
1383
  }, conn.id, true, undefined, this)),
1351
- connections.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
1352
- children: /* @__PURE__ */ jsxDEV("td", {
1384
+ connections.length === 0 && /* @__PURE__ */ jsxDEV2("tr", {
1385
+ children: /* @__PURE__ */ jsxDEV2("td", {
1353
1386
  colSpan: 3,
1354
1387
  className: "text-muted-foreground px-4 py-8 text-center",
1355
1388
  children: "No connections found"
@@ -1360,48 +1393,58 @@ function IntegrationDashboard() {
1360
1393
  ]
1361
1394
  }, undefined, true, undefined, this)
1362
1395
  }, undefined, false, undefined, this),
1363
- activeTab === "syncs" && /* @__PURE__ */ jsxDEV("div", {
1396
+ activeTab === "chat" && /* @__PURE__ */ jsxDEV2(IntegrationHubChat, {
1397
+ proxyUrl: "/api/chat",
1398
+ thinkingLevel: "thinking",
1399
+ suggestions: [
1400
+ "List my integrations",
1401
+ "Show sync status",
1402
+ "Add a connection"
1403
+ ],
1404
+ className: "min-h-[400px]"
1405
+ }, undefined, false, undefined, this),
1406
+ activeTab === "syncs" && /* @__PURE__ */ jsxDEV2("div", {
1364
1407
  className: "border-border rounded-lg border",
1365
- children: /* @__PURE__ */ jsxDEV("table", {
1408
+ children: /* @__PURE__ */ jsxDEV2("table", {
1366
1409
  className: "w-full",
1367
1410
  children: [
1368
- /* @__PURE__ */ jsxDEV("thead", {
1411
+ /* @__PURE__ */ jsxDEV2("thead", {
1369
1412
  className: "border-border bg-muted/30 border-b",
1370
- children: /* @__PURE__ */ jsxDEV("tr", {
1413
+ children: /* @__PURE__ */ jsxDEV2("tr", {
1371
1414
  children: [
1372
- /* @__PURE__ */ jsxDEV("th", {
1415
+ /* @__PURE__ */ jsxDEV2("th", {
1373
1416
  className: "px-4 py-3 text-left text-sm font-medium",
1374
1417
  children: "Sync Config"
1375
1418
  }, undefined, false, undefined, this),
1376
- /* @__PURE__ */ jsxDEV("th", {
1419
+ /* @__PURE__ */ jsxDEV2("th", {
1377
1420
  className: "px-4 py-3 text-left text-sm font-medium",
1378
1421
  children: "Frequency"
1379
1422
  }, undefined, false, undefined, this),
1380
- /* @__PURE__ */ jsxDEV("th", {
1423
+ /* @__PURE__ */ jsxDEV2("th", {
1381
1424
  className: "px-4 py-3 text-left text-sm font-medium",
1382
1425
  children: "Status"
1383
1426
  }, undefined, false, undefined, this),
1384
- /* @__PURE__ */ jsxDEV("th", {
1427
+ /* @__PURE__ */ jsxDEV2("th", {
1385
1428
  className: "px-4 py-3 text-left text-sm font-medium",
1386
1429
  children: "Records"
1387
1430
  }, undefined, false, undefined, this)
1388
1431
  ]
1389
1432
  }, undefined, true, undefined, this)
1390
1433
  }, undefined, false, undefined, this),
1391
- /* @__PURE__ */ jsxDEV("tbody", {
1434
+ /* @__PURE__ */ jsxDEV2("tbody", {
1392
1435
  className: "divide-border divide-y",
1393
1436
  children: [
1394
- syncConfigs.map((sync) => /* @__PURE__ */ jsxDEV("tr", {
1437
+ syncConfigs.map((sync) => /* @__PURE__ */ jsxDEV2("tr", {
1395
1438
  className: "hover:bg-muted/50",
1396
1439
  children: [
1397
- /* @__PURE__ */ jsxDEV("td", {
1440
+ /* @__PURE__ */ jsxDEV2("td", {
1398
1441
  className: "px-4 py-3",
1399
1442
  children: [
1400
- /* @__PURE__ */ jsxDEV("div", {
1443
+ /* @__PURE__ */ jsxDEV2("div", {
1401
1444
  className: "font-medium",
1402
1445
  children: sync.name
1403
1446
  }, undefined, false, undefined, this),
1404
- /* @__PURE__ */ jsxDEV("div", {
1447
+ /* @__PURE__ */ jsxDEV2("div", {
1405
1448
  className: "text-muted-foreground text-sm",
1406
1449
  children: [
1407
1450
  sync.sourceEntity,
@@ -1411,25 +1454,25 @@ function IntegrationDashboard() {
1411
1454
  }, undefined, true, undefined, this)
1412
1455
  ]
1413
1456
  }, undefined, true, undefined, this),
1414
- /* @__PURE__ */ jsxDEV("td", {
1457
+ /* @__PURE__ */ jsxDEV2("td", {
1415
1458
  className: "px-4 py-3 text-sm",
1416
1459
  children: sync.frequency
1417
1460
  }, undefined, false, undefined, this),
1418
- /* @__PURE__ */ jsxDEV("td", {
1461
+ /* @__PURE__ */ jsxDEV2("td", {
1419
1462
  className: "px-4 py-3",
1420
- children: /* @__PURE__ */ jsxDEV("span", {
1463
+ children: /* @__PURE__ */ jsxDEV2("span", {
1421
1464
  className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[sync.status] ?? ""}`,
1422
1465
  children: sync.status
1423
1466
  }, undefined, false, undefined, this)
1424
1467
  }, undefined, false, undefined, this),
1425
- /* @__PURE__ */ jsxDEV("td", {
1468
+ /* @__PURE__ */ jsxDEV2("td", {
1426
1469
  className: "text-muted-foreground px-4 py-3 text-sm",
1427
1470
  children: sync.recordsSynced.toLocaleString()
1428
1471
  }, undefined, false, undefined, this)
1429
1472
  ]
1430
1473
  }, sync.id, true, undefined, this)),
1431
- syncConfigs.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
1432
- children: /* @__PURE__ */ jsxDEV("td", {
1474
+ syncConfigs.length === 0 && /* @__PURE__ */ jsxDEV2("tr", {
1475
+ children: /* @__PURE__ */ jsxDEV2("td", {
1433
1476
  colSpan: 4,
1434
1477
  className: "text-muted-foreground px-4 py-8 text-center",
1435
1478
  children: "No sync configurations found"
@@ -1801,6 +1844,7 @@ export {
1801
1844
  ListSyncRunsContract,
1802
1845
  IntegrationStatusEnum,
1803
1846
  IntegrationModel,
1847
+ IntegrationHubChat,
1804
1848
  IntegrationDashboard,
1805
1849
  FieldMappingModel,
1806
1850
  CreateSyncConfigInputModel,