@informedai/react 0.4.24 → 0.4.25

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.
Files changed (3) hide show
  1. package/dist/index.js +177 -1
  2. package/dist/index.mjs +177 -1
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2472,6 +2472,168 @@ function MatchCard({ match, theme }) {
2472
2472
  const name = match.name || "Match";
2473
2473
  const score = match.score;
2474
2474
  const reasons = match.matchReasons || [];
2475
+ const cardMarkerStr = match.cardMarker;
2476
+ const parsedCard = cardMarkerStr ? parseCardMarker(cardMarkerStr) : null;
2477
+ const cardData = parsedCard ? extractCardDisplayData(parsedCard) : null;
2478
+ if (cardData) {
2479
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2480
+ "div",
2481
+ {
2482
+ style: {
2483
+ border: "1px solid #e5e7eb",
2484
+ borderRadius: "8px",
2485
+ overflow: "hidden",
2486
+ backgroundColor: "#fff"
2487
+ },
2488
+ children: [
2489
+ cardData.imageUrl && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2490
+ "div",
2491
+ {
2492
+ style: {
2493
+ width: "100%",
2494
+ height: "140px",
2495
+ backgroundColor: "#f3f4f6",
2496
+ overflow: "hidden"
2497
+ },
2498
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2499
+ "img",
2500
+ {
2501
+ src: cardData.imageUrl,
2502
+ alt: cardData.title,
2503
+ style: {
2504
+ width: "100%",
2505
+ height: "100%",
2506
+ objectFit: "cover"
2507
+ },
2508
+ onError: (e) => {
2509
+ e.target.style.display = "none";
2510
+ }
2511
+ }
2512
+ )
2513
+ }
2514
+ ),
2515
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: "12px" }, children: [
2516
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "6px" }, children: [
2517
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2518
+ "div",
2519
+ {
2520
+ style: {
2521
+ display: "inline-block",
2522
+ fontSize: "10px",
2523
+ fontWeight: 600,
2524
+ textTransform: "uppercase",
2525
+ letterSpacing: "0.5px",
2526
+ color: theme.primaryColor,
2527
+ backgroundColor: `${theme.primaryColor}15`,
2528
+ padding: "2px 6px",
2529
+ borderRadius: "4px"
2530
+ },
2531
+ children: parsedCard.type
2532
+ }
2533
+ ),
2534
+ score != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2535
+ "div",
2536
+ {
2537
+ style: {
2538
+ fontSize: "11px",
2539
+ fontWeight: 600,
2540
+ color: theme.primaryColor,
2541
+ backgroundColor: `${theme.primaryColor}15`,
2542
+ padding: "2px 8px",
2543
+ borderRadius: "10px"
2544
+ },
2545
+ children: [
2546
+ score,
2547
+ "%"
2548
+ ]
2549
+ }
2550
+ )
2551
+ ] }),
2552
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2553
+ "div",
2554
+ {
2555
+ style: {
2556
+ fontSize: "15px",
2557
+ fontWeight: 600,
2558
+ color: "#1f2937",
2559
+ marginBottom: "4px",
2560
+ lineHeight: "1.3"
2561
+ },
2562
+ children: cardData.title
2563
+ }
2564
+ ),
2565
+ cardData.subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2566
+ "div",
2567
+ {
2568
+ style: {
2569
+ fontSize: "13px",
2570
+ color: "#6b7280",
2571
+ marginBottom: "6px"
2572
+ },
2573
+ children: cardData.subtitle
2574
+ }
2575
+ ),
2576
+ cardData.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2577
+ "div",
2578
+ {
2579
+ style: {
2580
+ fontSize: "13px",
2581
+ color: "#4b5563",
2582
+ lineHeight: "1.4",
2583
+ marginBottom: "8px"
2584
+ },
2585
+ children: cardData.description
2586
+ }
2587
+ ),
2588
+ cardData.actionUrl && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2589
+ "a",
2590
+ {
2591
+ href: cardData.actionUrl,
2592
+ target: "_blank",
2593
+ rel: "noopener noreferrer",
2594
+ style: {
2595
+ display: "inline-flex",
2596
+ alignItems: "center",
2597
+ gap: "4px",
2598
+ fontSize: "13px",
2599
+ fontWeight: 500,
2600
+ color: theme.primaryColor,
2601
+ textDecoration: "none",
2602
+ padding: "6px 12px",
2603
+ borderRadius: "6px",
2604
+ backgroundColor: `${theme.primaryColor}10`,
2605
+ marginBottom: "8px"
2606
+ },
2607
+ children: [
2608
+ cardData.actionLabel || "View",
2609
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
2610
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
2611
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "15 3 21 3 21 9" }),
2612
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
2613
+ ] })
2614
+ ]
2615
+ }
2616
+ ),
2617
+ reasons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px", marginTop: cardData.actionUrl ? "0" : "4px" }, children: reasons.map((reason, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2618
+ "span",
2619
+ {
2620
+ style: {
2621
+ fontSize: "11px",
2622
+ color: "#4b5563",
2623
+ backgroundColor: "#f3f4f6",
2624
+ padding: "3px 8px",
2625
+ borderRadius: "10px",
2626
+ lineHeight: "1.3"
2627
+ },
2628
+ children: reason
2629
+ },
2630
+ i
2631
+ )) })
2632
+ ] })
2633
+ ]
2634
+ }
2635
+ );
2636
+ }
2475
2637
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2476
2638
  "div",
2477
2639
  {
@@ -2502,7 +2664,21 @@ function MatchCard({ match, theme }) {
2502
2664
  }
2503
2665
  )
2504
2666
  ] }),
2505
- reasons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "13px", color: "#6b7280", lineHeight: "1.4" }, children: reasons.join(" \u2022 ") })
2667
+ reasons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px", marginTop: "4px" }, children: reasons.map((reason, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2668
+ "span",
2669
+ {
2670
+ style: {
2671
+ fontSize: "11px",
2672
+ color: "#4b5563",
2673
+ backgroundColor: "#f3f4f6",
2674
+ padding: "3px 8px",
2675
+ borderRadius: "10px",
2676
+ lineHeight: "1.3"
2677
+ },
2678
+ children: reason
2679
+ },
2680
+ i
2681
+ )) })
2506
2682
  ] })
2507
2683
  }
2508
2684
  );
package/dist/index.mjs CHANGED
@@ -2439,6 +2439,168 @@ function MatchCard({ match, theme }) {
2439
2439
  const name = match.name || "Match";
2440
2440
  const score = match.score;
2441
2441
  const reasons = match.matchReasons || [];
2442
+ const cardMarkerStr = match.cardMarker;
2443
+ const parsedCard = cardMarkerStr ? parseCardMarker(cardMarkerStr) : null;
2444
+ const cardData = parsedCard ? extractCardDisplayData(parsedCard) : null;
2445
+ if (cardData) {
2446
+ return /* @__PURE__ */ jsxs4(
2447
+ "div",
2448
+ {
2449
+ style: {
2450
+ border: "1px solid #e5e7eb",
2451
+ borderRadius: "8px",
2452
+ overflow: "hidden",
2453
+ backgroundColor: "#fff"
2454
+ },
2455
+ children: [
2456
+ cardData.imageUrl && /* @__PURE__ */ jsx5(
2457
+ "div",
2458
+ {
2459
+ style: {
2460
+ width: "100%",
2461
+ height: "140px",
2462
+ backgroundColor: "#f3f4f6",
2463
+ overflow: "hidden"
2464
+ },
2465
+ children: /* @__PURE__ */ jsx5(
2466
+ "img",
2467
+ {
2468
+ src: cardData.imageUrl,
2469
+ alt: cardData.title,
2470
+ style: {
2471
+ width: "100%",
2472
+ height: "100%",
2473
+ objectFit: "cover"
2474
+ },
2475
+ onError: (e) => {
2476
+ e.target.style.display = "none";
2477
+ }
2478
+ }
2479
+ )
2480
+ }
2481
+ ),
2482
+ /* @__PURE__ */ jsxs4("div", { style: { padding: "12px" }, children: [
2483
+ /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "6px" }, children: [
2484
+ /* @__PURE__ */ jsx5(
2485
+ "div",
2486
+ {
2487
+ style: {
2488
+ display: "inline-block",
2489
+ fontSize: "10px",
2490
+ fontWeight: 600,
2491
+ textTransform: "uppercase",
2492
+ letterSpacing: "0.5px",
2493
+ color: theme.primaryColor,
2494
+ backgroundColor: `${theme.primaryColor}15`,
2495
+ padding: "2px 6px",
2496
+ borderRadius: "4px"
2497
+ },
2498
+ children: parsedCard.type
2499
+ }
2500
+ ),
2501
+ score != null && /* @__PURE__ */ jsxs4(
2502
+ "div",
2503
+ {
2504
+ style: {
2505
+ fontSize: "11px",
2506
+ fontWeight: 600,
2507
+ color: theme.primaryColor,
2508
+ backgroundColor: `${theme.primaryColor}15`,
2509
+ padding: "2px 8px",
2510
+ borderRadius: "10px"
2511
+ },
2512
+ children: [
2513
+ score,
2514
+ "%"
2515
+ ]
2516
+ }
2517
+ )
2518
+ ] }),
2519
+ /* @__PURE__ */ jsx5(
2520
+ "div",
2521
+ {
2522
+ style: {
2523
+ fontSize: "15px",
2524
+ fontWeight: 600,
2525
+ color: "#1f2937",
2526
+ marginBottom: "4px",
2527
+ lineHeight: "1.3"
2528
+ },
2529
+ children: cardData.title
2530
+ }
2531
+ ),
2532
+ cardData.subtitle && /* @__PURE__ */ jsx5(
2533
+ "div",
2534
+ {
2535
+ style: {
2536
+ fontSize: "13px",
2537
+ color: "#6b7280",
2538
+ marginBottom: "6px"
2539
+ },
2540
+ children: cardData.subtitle
2541
+ }
2542
+ ),
2543
+ cardData.description && /* @__PURE__ */ jsx5(
2544
+ "div",
2545
+ {
2546
+ style: {
2547
+ fontSize: "13px",
2548
+ color: "#4b5563",
2549
+ lineHeight: "1.4",
2550
+ marginBottom: "8px"
2551
+ },
2552
+ children: cardData.description
2553
+ }
2554
+ ),
2555
+ cardData.actionUrl && /* @__PURE__ */ jsxs4(
2556
+ "a",
2557
+ {
2558
+ href: cardData.actionUrl,
2559
+ target: "_blank",
2560
+ rel: "noopener noreferrer",
2561
+ style: {
2562
+ display: "inline-flex",
2563
+ alignItems: "center",
2564
+ gap: "4px",
2565
+ fontSize: "13px",
2566
+ fontWeight: 500,
2567
+ color: theme.primaryColor,
2568
+ textDecoration: "none",
2569
+ padding: "6px 12px",
2570
+ borderRadius: "6px",
2571
+ backgroundColor: `${theme.primaryColor}10`,
2572
+ marginBottom: "8px"
2573
+ },
2574
+ children: [
2575
+ cardData.actionLabel || "View",
2576
+ /* @__PURE__ */ jsxs4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
2577
+ /* @__PURE__ */ jsx5("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
2578
+ /* @__PURE__ */ jsx5("polyline", { points: "15 3 21 3 21 9" }),
2579
+ /* @__PURE__ */ jsx5("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
2580
+ ] })
2581
+ ]
2582
+ }
2583
+ ),
2584
+ reasons.length > 0 && /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px", marginTop: cardData.actionUrl ? "0" : "4px" }, children: reasons.map((reason, i) => /* @__PURE__ */ jsx5(
2585
+ "span",
2586
+ {
2587
+ style: {
2588
+ fontSize: "11px",
2589
+ color: "#4b5563",
2590
+ backgroundColor: "#f3f4f6",
2591
+ padding: "3px 8px",
2592
+ borderRadius: "10px",
2593
+ lineHeight: "1.3"
2594
+ },
2595
+ children: reason
2596
+ },
2597
+ i
2598
+ )) })
2599
+ ] })
2600
+ ]
2601
+ }
2602
+ );
2603
+ }
2442
2604
  return /* @__PURE__ */ jsx5(
2443
2605
  "div",
2444
2606
  {
@@ -2469,7 +2631,21 @@ function MatchCard({ match, theme }) {
2469
2631
  }
2470
2632
  )
2471
2633
  ] }),
2472
- reasons.length > 0 && /* @__PURE__ */ jsx5("div", { style: { fontSize: "13px", color: "#6b7280", lineHeight: "1.4" }, children: reasons.join(" \u2022 ") })
2634
+ reasons.length > 0 && /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px", marginTop: "4px" }, children: reasons.map((reason, i) => /* @__PURE__ */ jsx5(
2635
+ "span",
2636
+ {
2637
+ style: {
2638
+ fontSize: "11px",
2639
+ color: "#4b5563",
2640
+ backgroundColor: "#f3f4f6",
2641
+ padding: "3px 8px",
2642
+ borderRadius: "10px",
2643
+ lineHeight: "1.3"
2644
+ },
2645
+ children: reason
2646
+ },
2647
+ i
2648
+ )) })
2473
2649
  ] })
2474
2650
  }
2475
2651
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@informedai/react",
3
- "version": "0.4.24",
3
+ "version": "0.4.25",
4
4
  "description": "React SDK for InformedAI Assistant - AI-powered content creation widget",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",