@supernal/interface-nextjs 1.0.14 → 1.0.18

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 +28 -25
  2. package/dist/index.mjs +28 -25
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -420,32 +420,32 @@ var ChatNames = {
420
420
  };
421
421
  var DOCK_POSITIONS = {
422
422
  "bottom-right": {
423
- container: "bottom-4 right-4 sm:bottom-6 sm:right-6",
424
- panel: "bottom-0 right-0"
423
+ container: { bottom: "1rem", right: "1rem" },
424
+ panel: { bottom: 0, right: 0 }
425
425
  },
426
426
  "bottom-left": {
427
- container: "bottom-4 left-4 sm:bottom-6 sm:left-6",
428
- panel: "bottom-0 left-0"
427
+ container: { bottom: "1rem", left: "1rem" },
428
+ panel: { bottom: 0, left: 0 }
429
429
  },
430
430
  "top-right": {
431
- container: "top-4 right-4 sm:top-6 sm:right-6",
432
- panel: "top-0 right-0"
431
+ container: { top: "1rem", right: "1rem" },
432
+ panel: { top: 0, right: 0 }
433
433
  },
434
434
  "top-left": {
435
- container: "top-4 left-4 sm:top-6 sm:left-6",
436
- panel: "top-0 left-0"
435
+ container: { top: "1rem", left: "1rem" },
436
+ panel: { top: 0, left: 0 }
437
437
  },
438
438
  "left-center": {
439
- container: "left-4 top-1/2 -translate-y-1/2",
440
- panel: "left-0 top-0"
439
+ container: { left: "1rem", top: "50%", transform: "translateY(-50%)" },
440
+ panel: { left: 0, top: 0 }
441
441
  },
442
442
  "right-center": {
443
- container: "right-4 top-1/2 -translate-y-1/2",
444
- panel: "right-0 top-0"
443
+ container: { right: "1rem", top: "50%", transform: "translateY(-50%)" },
444
+ panel: { right: 0, top: 0 }
445
445
  },
446
446
  "bottom-center": {
447
- container: "bottom-4 left-1/2 -translate-x-1/2",
448
- panel: "bottom-0 left-1/2 -translate-x-1/2"
447
+ container: { bottom: "1rem", left: "50%", transform: "translateX(-50%)" },
448
+ panel: { bottom: 0, left: "50%", transform: "translateX(-50%)" }
449
449
  }
450
450
  };
451
451
  var INLINE_STYLES = {
@@ -876,8 +876,6 @@ var ChatBubble = ({
876
876
  const maxHeightVh = 80;
877
877
  const dynamicHeight = `min(${maxHeightVh}vh, 700px)`;
878
878
  const panelWidth = "min(650px, calc(100vw - 2rem))";
879
- const glassClasses = glassMode ? "backdrop-blur-xl bg-white/70 dark:bg-gray-900/70 border border-white/20 dark:border-white/10" : "bg-white dark:bg-gray-900 border-gray-200";
880
- const glassGradient = glassMode ? "bg-gradient-to-br from-white/90 via-white/70 to-white/50 dark:from-gray-900/80 dark:via-gray-900/70 dark:to-gray-900/60" : "bg-white dark:bg-gray-900";
881
879
  if (variant === "floating") {
882
880
  const recentMessage = messages[messages.length - 1];
883
881
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -889,7 +887,7 @@ var ChatBubble = ({
889
887
  ...!isDragging && { transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)" }
890
888
  },
891
889
  onMouseDown: handlePanelMouseDown,
892
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `${glassClasses} rounded-2xl shadow-2xl border p-3 max-w-xs`, children: [
890
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: glassMode ? "backdrop-blur-xl bg-white/70 dark:bg-gray-900/70 border border-white/20 dark:border-white/10 rounded-2xl shadow-2xl p-3 max-w-xs" : "bg-white dark:bg-gray-900 border-gray-200 rounded-2xl shadow-2xl border p-3 max-w-xs", children: [
893
891
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
894
892
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center space-x-2", children: [
895
893
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { avatar: config.avatar, size: "small" }),
@@ -931,7 +929,7 @@ var ChatBubble = ({
931
929
  onInputChange: setInputValue,
932
930
  onSubmit: handleSend,
933
931
  placeholder: config.placeholder,
934
- glassClasses,
932
+ glassClasses: "",
935
933
  theme,
936
934
  sendButtonLabel: config.sendButtonLabel
937
935
  }
@@ -943,8 +941,9 @@ var ChatBubble = ({
943
941
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
944
942
  "div",
945
943
  {
946
- className: `fixed ${dockClasses.container} z-50`,
944
+ className: "fixed z-50",
947
945
  style: {
946
+ ...dockClasses.container,
948
947
  width: panelWidth,
949
948
  height: isMinimized ? "auto" : dynamicHeight
950
949
  },
@@ -952,8 +951,12 @@ var ChatBubble = ({
952
951
  isExpanded && isMinimized && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
953
952
  "div",
954
953
  {
955
- className: `absolute ${dockClasses.panel} ${glassClasses} rounded-3xl shadow-2xl border p-4 transition-all duration-300`,
956
- style: { width: panelWidth, maxWidth: "400px" },
954
+ className: glassMode ? "absolute backdrop-blur-xl bg-white/70 dark:bg-gray-900/70 border border-white/20 dark:border-white/10 rounded-3xl shadow-2xl p-4 transition-all duration-300" : "absolute bg-white dark:bg-gray-900 border-gray-200 rounded-3xl shadow-2xl border p-4 transition-all duration-300",
955
+ style: {
956
+ ...dockClasses.panel,
957
+ width: panelWidth,
958
+ maxWidth: "400px"
959
+ },
957
960
  children: [
958
961
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
959
962
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center space-x-2", children: [
@@ -982,7 +985,7 @@ var ChatBubble = ({
982
985
  onInputChange: setInputValue,
983
986
  onSubmit: handleSend,
984
987
  placeholder: config.placeholder,
985
- glassClasses,
988
+ glassClasses: "",
986
989
  theme,
987
990
  sendButtonLabel: config.sendButtonLabel
988
991
  }
@@ -994,11 +997,11 @@ var ChatBubble = ({
994
997
  "div",
995
998
  {
996
999
  ref: panelRef,
997
- className: `${isDocked ? "absolute " + dockClasses.panel : "fixed"} ${glassGradient} rounded-3xl shadow-2xl border border-white/20 dark:border-white/10 backdrop-blur-xl flex flex-col overflow-hidden transition-all duration-300`,
1000
+ className: `${isDocked ? "absolute" : "fixed"} ${glassMode ? "bg-gradient-to-br from-white/90 via-white/70 to-white/50 dark:from-gray-900/80 dark:via-gray-900/70 dark:to-gray-900/60" : "bg-white dark:bg-gray-900"} rounded-3xl shadow-2xl border border-white/20 dark:border-white/10 backdrop-blur-xl flex flex-col overflow-hidden transition-all duration-300`,
998
1001
  style: {
999
1002
  width: panelWidth,
1000
1003
  height: dynamicHeight,
1001
- ...!isDocked && {
1004
+ ...isDocked ? dockClasses.panel : {
1002
1005
  left: "50%",
1003
1006
  top: "50%",
1004
1007
  transform: `translate(calc(-50% + ${panelPosition.x}px), calc(-50% + ${panelPosition.y}px))`
@@ -1202,7 +1205,7 @@ var ChatBubble = ({
1202
1205
  onInputChange: setInputValue,
1203
1206
  onSubmit: handleSend,
1204
1207
  placeholder: config.placeholder,
1205
- glassClasses,
1208
+ glassClasses: "",
1206
1209
  theme,
1207
1210
  inputRef,
1208
1211
  sendButtonLabel: config.sendButtonLabel
package/dist/index.mjs CHANGED
@@ -379,32 +379,32 @@ var ChatNames = {
379
379
  };
380
380
  var DOCK_POSITIONS = {
381
381
  "bottom-right": {
382
- container: "bottom-4 right-4 sm:bottom-6 sm:right-6",
383
- panel: "bottom-0 right-0"
382
+ container: { bottom: "1rem", right: "1rem" },
383
+ panel: { bottom: 0, right: 0 }
384
384
  },
385
385
  "bottom-left": {
386
- container: "bottom-4 left-4 sm:bottom-6 sm:left-6",
387
- panel: "bottom-0 left-0"
386
+ container: { bottom: "1rem", left: "1rem" },
387
+ panel: { bottom: 0, left: 0 }
388
388
  },
389
389
  "top-right": {
390
- container: "top-4 right-4 sm:top-6 sm:right-6",
391
- panel: "top-0 right-0"
390
+ container: { top: "1rem", right: "1rem" },
391
+ panel: { top: 0, right: 0 }
392
392
  },
393
393
  "top-left": {
394
- container: "top-4 left-4 sm:top-6 sm:left-6",
395
- panel: "top-0 left-0"
394
+ container: { top: "1rem", left: "1rem" },
395
+ panel: { top: 0, left: 0 }
396
396
  },
397
397
  "left-center": {
398
- container: "left-4 top-1/2 -translate-y-1/2",
399
- panel: "left-0 top-0"
398
+ container: { left: "1rem", top: "50%", transform: "translateY(-50%)" },
399
+ panel: { left: 0, top: 0 }
400
400
  },
401
401
  "right-center": {
402
- container: "right-4 top-1/2 -translate-y-1/2",
403
- panel: "right-0 top-0"
402
+ container: { right: "1rem", top: "50%", transform: "translateY(-50%)" },
403
+ panel: { right: 0, top: 0 }
404
404
  },
405
405
  "bottom-center": {
406
- container: "bottom-4 left-1/2 -translate-x-1/2",
407
- panel: "bottom-0 left-1/2 -translate-x-1/2"
406
+ container: { bottom: "1rem", left: "50%", transform: "translateX(-50%)" },
407
+ panel: { bottom: 0, left: "50%", transform: "translateX(-50%)" }
408
408
  }
409
409
  };
410
410
  var INLINE_STYLES = {
@@ -835,8 +835,6 @@ var ChatBubble = ({
835
835
  const maxHeightVh = 80;
836
836
  const dynamicHeight = `min(${maxHeightVh}vh, 700px)`;
837
837
  const panelWidth = "min(650px, calc(100vw - 2rem))";
838
- const glassClasses = glassMode ? "backdrop-blur-xl bg-white/70 dark:bg-gray-900/70 border border-white/20 dark:border-white/10" : "bg-white dark:bg-gray-900 border-gray-200";
839
- const glassGradient = glassMode ? "bg-gradient-to-br from-white/90 via-white/70 to-white/50 dark:from-gray-900/80 dark:via-gray-900/70 dark:to-gray-900/60" : "bg-white dark:bg-gray-900";
840
838
  if (variant === "floating") {
841
839
  const recentMessage = messages[messages.length - 1];
842
840
  return /* @__PURE__ */ jsx3(
@@ -848,7 +846,7 @@ var ChatBubble = ({
848
846
  ...!isDragging && { transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)" }
849
847
  },
850
848
  onMouseDown: handlePanelMouseDown,
851
- children: /* @__PURE__ */ jsxs("div", { className: `${glassClasses} rounded-2xl shadow-2xl border p-3 max-w-xs`, children: [
849
+ children: /* @__PURE__ */ jsxs("div", { className: glassMode ? "backdrop-blur-xl bg-white/70 dark:bg-gray-900/70 border border-white/20 dark:border-white/10 rounded-2xl shadow-2xl p-3 max-w-xs" : "bg-white dark:bg-gray-900 border-gray-200 rounded-2xl shadow-2xl border p-3 max-w-xs", children: [
852
850
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
853
851
  /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
854
852
  /* @__PURE__ */ jsx3(Avatar, { avatar: config.avatar, size: "small" }),
@@ -890,7 +888,7 @@ var ChatBubble = ({
890
888
  onInputChange: setInputValue,
891
889
  onSubmit: handleSend,
892
890
  placeholder: config.placeholder,
893
- glassClasses,
891
+ glassClasses: "",
894
892
  theme,
895
893
  sendButtonLabel: config.sendButtonLabel
896
894
  }
@@ -902,8 +900,9 @@ var ChatBubble = ({
902
900
  return /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs(
903
901
  "div",
904
902
  {
905
- className: `fixed ${dockClasses.container} z-50`,
903
+ className: "fixed z-50",
906
904
  style: {
905
+ ...dockClasses.container,
907
906
  width: panelWidth,
908
907
  height: isMinimized ? "auto" : dynamicHeight
909
908
  },
@@ -911,8 +910,12 @@ var ChatBubble = ({
911
910
  isExpanded && isMinimized && /* @__PURE__ */ jsxs(
912
911
  "div",
913
912
  {
914
- className: `absolute ${dockClasses.panel} ${glassClasses} rounded-3xl shadow-2xl border p-4 transition-all duration-300`,
915
- style: { width: panelWidth, maxWidth: "400px" },
913
+ className: glassMode ? "absolute backdrop-blur-xl bg-white/70 dark:bg-gray-900/70 border border-white/20 dark:border-white/10 rounded-3xl shadow-2xl p-4 transition-all duration-300" : "absolute bg-white dark:bg-gray-900 border-gray-200 rounded-3xl shadow-2xl border p-4 transition-all duration-300",
914
+ style: {
915
+ ...dockClasses.panel,
916
+ width: panelWidth,
917
+ maxWidth: "400px"
918
+ },
916
919
  children: [
917
920
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
918
921
  /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
@@ -941,7 +944,7 @@ var ChatBubble = ({
941
944
  onInputChange: setInputValue,
942
945
  onSubmit: handleSend,
943
946
  placeholder: config.placeholder,
944
- glassClasses,
947
+ glassClasses: "",
945
948
  theme,
946
949
  sendButtonLabel: config.sendButtonLabel
947
950
  }
@@ -953,11 +956,11 @@ var ChatBubble = ({
953
956
  "div",
954
957
  {
955
958
  ref: panelRef,
956
- className: `${isDocked ? "absolute " + dockClasses.panel : "fixed"} ${glassGradient} rounded-3xl shadow-2xl border border-white/20 dark:border-white/10 backdrop-blur-xl flex flex-col overflow-hidden transition-all duration-300`,
959
+ className: `${isDocked ? "absolute" : "fixed"} ${glassMode ? "bg-gradient-to-br from-white/90 via-white/70 to-white/50 dark:from-gray-900/80 dark:via-gray-900/70 dark:to-gray-900/60" : "bg-white dark:bg-gray-900"} rounded-3xl shadow-2xl border border-white/20 dark:border-white/10 backdrop-blur-xl flex flex-col overflow-hidden transition-all duration-300`,
957
960
  style: {
958
961
  width: panelWidth,
959
962
  height: dynamicHeight,
960
- ...!isDocked && {
963
+ ...isDocked ? dockClasses.panel : {
961
964
  left: "50%",
962
965
  top: "50%",
963
966
  transform: `translate(calc(-50% + ${panelPosition.x}px), calc(-50% + ${panelPosition.y}px))`
@@ -1161,7 +1164,7 @@ var ChatBubble = ({
1161
1164
  onInputChange: setInputValue,
1162
1165
  onSubmit: handleSend,
1163
1166
  placeholder: config.placeholder,
1164
- glassClasses,
1167
+ glassClasses: "",
1165
1168
  theme,
1166
1169
  inputRef,
1167
1170
  sendButtonLabel: config.sendButtonLabel
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@supernal/interface-nextjs",
3
- "version": "1.0.14",
3
+ "version": "1.0.18",
4
4
  "description": "Next.js integration for Supernal Intelligence Interface - enables agentic UX with one line of code",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",