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