@supernal/interface-nextjs 1.0.13 → 1.0.16

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 +285 -270
  2. package/dist/index.mjs +285 -270
  3. package/package.json +1 -1
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 = {
@@ -899,283 +899,298 @@ var ChatBubble = ({
899
899
  }
900
900
  );
901
901
  }
902
- return /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: `fixed ${dockClasses.container} z-50`, children: [
903
- isExpanded && isMinimized && /* @__PURE__ */ jsxs(
904
- "div",
905
- {
906
- className: `absolute ${dockClasses.panel} ${glassClasses} rounded-3xl shadow-2xl border p-4 transition-all duration-300`,
907
- style: { width: panelWidth, maxWidth: "400px" },
908
- children: [
909
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
910
- /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
911
- /* @__PURE__ */ jsx3(Avatar, { avatar: config.avatar, size: "small" }),
912
- config.title && /* @__PURE__ */ jsx3("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
913
- ] }),
914
- /* @__PURE__ */ jsx3(
915
- "button",
916
- {
917
- onClick: () => setIsMinimized(false),
918
- className: "p-1 text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-200 transition-colors",
919
- title: "Expand chat",
920
- children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
921
- }
922
- )
923
- ] }),
924
- (() => {
925
- const lastAiMessage = [...messages].reverse().find((m) => m.type === "ai");
926
- return lastAiMessage ? /* @__PURE__ */ jsx3("div", { className: "mb-3", children: /* @__PURE__ */ jsx3("div", { className: `text-xs px-3 py-2 rounded-xl ${THEME_CLASSES.message.ai}`, style: INLINE_STYLES.messageAI(theme === "dark"), children: lastAiMessage.text.length > 100 ? `${lastAiMessage.text.slice(0, 100)}...` : lastAiMessage.text }) }) : /* @__PURE__ */ jsx3("div", { className: "mb-3", children: /* @__PURE__ */ jsx3("div", { className: THEME_CLASSES.text.minimizedMessage, style: INLINE_STYLES.minimizedMessage(theme === "dark"), children: "No AI responses yet" }) });
927
- })(),
928
- /* @__PURE__ */ jsx3(
929
- InputField,
930
- {
931
- compact: true,
932
- inputValue,
933
- onInputChange: setInputValue,
934
- onSubmit: handleSend,
935
- placeholder: config.placeholder,
936
- glassClasses,
937
- theme,
938
- sendButtonLabel: config.sendButtonLabel
939
- }
940
- )
941
- ]
942
- }
943
- ),
944
- isExpanded && !isMinimized && /* @__PURE__ */ jsxs(
945
- "div",
946
- {
947
- ref: panelRef,
948
- 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`,
949
- style: {
950
- width: panelWidth,
951
- height: dynamicHeight,
952
- ...!isDocked && {
953
- left: "50%",
954
- top: "50%",
955
- transform: `translate(calc(-50% + ${panelPosition.x}px), calc(-50% + ${panelPosition.y}px))`
956
- },
957
- ...isDragging && { cursor: "grabbing" }
958
- },
959
- children: [
960
- /* @__PURE__ */ jsxs(
961
- "div",
962
- {
963
- "data-drag-handle": true,
964
- className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight} cursor-move`,
965
- onMouseDown: handlePanelMouseDown,
966
- children: [
967
- /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
968
- config.avatar && /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
969
- /* @__PURE__ */ jsx3(Avatar, { avatar: config.avatar }),
970
- /* @__PURE__ */ jsx3("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
902
+ return /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs(
903
+ "div",
904
+ {
905
+ className: "fixed z-50",
906
+ style: {
907
+ ...dockClasses.container,
908
+ width: panelWidth,
909
+ height: isMinimized ? "auto" : dynamicHeight
910
+ },
911
+ children: [
912
+ isExpanded && isMinimized && /* @__PURE__ */ jsxs(
913
+ "div",
914
+ {
915
+ className: `absolute ${glassClasses} rounded-3xl shadow-2xl border p-4 transition-all duration-300`,
916
+ style: {
917
+ ...dockClasses.panel,
918
+ width: panelWidth,
919
+ maxWidth: "400px"
920
+ },
921
+ children: [
922
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
923
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
924
+ /* @__PURE__ */ jsx3(Avatar, { avatar: config.avatar, size: "small" }),
925
+ config.title && /* @__PURE__ */ jsx3("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
926
+ ] }),
927
+ /* @__PURE__ */ jsx3(
928
+ "button",
929
+ {
930
+ onClick: () => setIsMinimized(false),
931
+ className: "p-1 text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-200 transition-colors",
932
+ title: "Expand chat",
933
+ children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
934
+ }
935
+ )
936
+ ] }),
937
+ (() => {
938
+ const lastAiMessage = [...messages].reverse().find((m) => m.type === "ai");
939
+ return lastAiMessage ? /* @__PURE__ */ jsx3("div", { className: "mb-3", children: /* @__PURE__ */ jsx3("div", { className: `text-xs px-3 py-2 rounded-xl ${THEME_CLASSES.message.ai}`, style: INLINE_STYLES.messageAI(theme === "dark"), children: lastAiMessage.text.length > 100 ? `${lastAiMessage.text.slice(0, 100)}...` : lastAiMessage.text }) }) : /* @__PURE__ */ jsx3("div", { className: "mb-3", children: /* @__PURE__ */ jsx3("div", { className: THEME_CLASSES.text.minimizedMessage, style: INLINE_STYLES.minimizedMessage(theme === "dark"), children: "No AI responses yet" }) });
940
+ })(),
941
+ /* @__PURE__ */ jsx3(
942
+ InputField,
943
+ {
944
+ compact: true,
945
+ inputValue,
946
+ onInputChange: setInputValue,
947
+ onSubmit: handleSend,
948
+ placeholder: config.placeholder,
949
+ glassClasses,
950
+ theme,
951
+ sendButtonLabel: config.sendButtonLabel
952
+ }
953
+ )
954
+ ]
955
+ }
956
+ ),
957
+ isExpanded && !isMinimized && /* @__PURE__ */ jsxs(
958
+ "div",
959
+ {
960
+ ref: panelRef,
961
+ className: `${isDocked ? "absolute" : "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`,
962
+ style: {
963
+ width: panelWidth,
964
+ height: dynamicHeight,
965
+ ...isDocked ? dockClasses.panel : {
966
+ left: "50%",
967
+ top: "50%",
968
+ transform: `translate(calc(-50% + ${panelPosition.x}px), calc(-50% + ${panelPosition.y}px))`
969
+ },
970
+ ...isDragging && { cursor: "grabbing" }
971
+ },
972
+ children: [
973
+ /* @__PURE__ */ jsxs(
974
+ "div",
975
+ {
976
+ "data-drag-handle": true,
977
+ className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight} cursor-move`,
978
+ onMouseDown: handlePanelMouseDown,
979
+ children: [
980
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
981
+ config.avatar && /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
982
+ /* @__PURE__ */ jsx3(Avatar, { avatar: config.avatar }),
983
+ /* @__PURE__ */ jsx3("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
984
+ ] }),
985
+ config.title && /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx3("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
986
+ ] }),
987
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1 flex-shrink-0 relative", "data-more-menu": true, children: [
988
+ /* @__PURE__ */ jsx3(
989
+ "button",
990
+ {
991
+ onClick: () => setShowMoreMenu(!showMoreMenu),
992
+ className: THEME_CLASSES.button.more,
993
+ title: "More options",
994
+ children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) })
995
+ }
996
+ ),
997
+ showMoreMenu && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-10 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600 p-2 z-[100] min-w-[160px]", "data-more-menu": true, children: [
998
+ /* @__PURE__ */ jsxs(
999
+ "button",
1000
+ {
1001
+ onClick: () => {
1002
+ handleToggleTheme();
1003
+ setShowMoreMenu(false);
1004
+ },
1005
+ className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
1006
+ children: [
1007
+ theme === "light" ? /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) }) : /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) }),
1008
+ /* @__PURE__ */ jsx3("span", { children: theme === "light" ? "Dark mode" : "Light mode" })
1009
+ ]
1010
+ }
1011
+ ),
1012
+ /* @__PURE__ */ jsxs(
1013
+ "button",
1014
+ {
1015
+ onClick: () => {
1016
+ handleHome();
1017
+ setShowMoreMenu(false);
1018
+ },
1019
+ className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
1020
+ children: [
1021
+ /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }),
1022
+ /* @__PURE__ */ jsx3("span", { children: "Reset position" })
1023
+ ]
1024
+ }
1025
+ ),
1026
+ /* @__PURE__ */ jsxs(
1027
+ "button",
1028
+ {
1029
+ onClick: () => {
1030
+ setShowInfo(!showInfo);
1031
+ setShowMoreMenu(false);
1032
+ },
1033
+ className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
1034
+ children: [
1035
+ /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
1036
+ /* @__PURE__ */ jsx3("span", { children: "How to use" })
1037
+ ]
1038
+ }
1039
+ ),
1040
+ onClearChat && /* @__PURE__ */ jsxs(
1041
+ "button",
1042
+ {
1043
+ onClick: () => {
1044
+ handleClearChat();
1045
+ setShowMoreMenu(false);
1046
+ },
1047
+ className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
1048
+ children: [
1049
+ /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
1050
+ /* @__PURE__ */ jsx3("span", { children: "Clear chat" })
1051
+ ]
1052
+ }
1053
+ )
1054
+ ] }),
1055
+ /* @__PURE__ */ jsx3(
1056
+ "button",
1057
+ {
1058
+ onClick: () => setIsMinimized(true),
1059
+ className: THEME_CLASSES.button.minimize,
1060
+ title: "Minimize",
1061
+ children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
1062
+ }
1063
+ ),
1064
+ /* @__PURE__ */ jsx3(
1065
+ "button",
1066
+ {
1067
+ onClick: handleToggle,
1068
+ className: THEME_CLASSES.button.close,
1069
+ title: "Close",
1070
+ children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
1071
+ }
1072
+ )
1073
+ ] })
1074
+ ]
1075
+ }
1076
+ ),
1077
+ showInfo && /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.text.infoPopup, style: INLINE_STYLES.infoText(theme === "dark"), children: [
1078
+ /* @__PURE__ */ jsx3("div", { className: "font-bold mb-2", children: "How to Use" }),
1079
+ /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-xs", style: INLINE_STYLES.infoText(theme === "dark"), children: [
1080
+ /* @__PURE__ */ jsxs("div", { children: [
1081
+ "\u2022 ",
1082
+ /* @__PURE__ */ jsx3("strong", { children: "Theme:" }),
1083
+ " Toggle between light and dark modes"
1084
+ ] }),
1085
+ /* @__PURE__ */ jsxs("div", { children: [
1086
+ "\u2022 ",
1087
+ /* @__PURE__ */ jsx3("strong", { children: "Home:" }),
1088
+ " Reset chat position to default"
1089
+ ] }),
1090
+ /* @__PURE__ */ jsxs("div", { children: [
1091
+ "\u2022 ",
1092
+ /* @__PURE__ */ jsx3("strong", { children: "Minimize:" }),
1093
+ " Compact view with last message"
1094
+ ] }),
1095
+ /* @__PURE__ */ jsxs("div", { children: [
1096
+ "\u2022 ",
1097
+ /* @__PURE__ */ jsx3("strong", { children: "Clear:" }),
1098
+ " Delete all messages and start fresh"
971
1099
  ] }),
972
- config.title && /* @__PURE__ */ jsx3("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx3("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
1100
+ /* @__PURE__ */ jsxs("div", { children: [
1101
+ "\u2022 ",
1102
+ /* @__PURE__ */ jsx3("strong", { children: "Drag:" }),
1103
+ " Click and drag header to reposition"
1104
+ ] }),
1105
+ /* @__PURE__ */ jsxs("div", { children: [
1106
+ "\u2022 ",
1107
+ /* @__PURE__ */ jsx3("strong", { children: "Keyboard:" }),
1108
+ ' Press "/" to open, Esc to close'
1109
+ ] })
973
1110
  ] }),
974
- /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1 flex-shrink-0 relative", "data-more-menu": true, children: [
975
- /* @__PURE__ */ jsx3(
976
- "button",
977
- {
978
- onClick: () => setShowMoreMenu(!showMoreMenu),
979
- className: THEME_CLASSES.button.more,
980
- title: "More options",
981
- children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) })
982
- }
983
- ),
984
- showMoreMenu && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-10 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600 p-2 z-[100] min-w-[160px]", "data-more-menu": true, children: [
985
- /* @__PURE__ */ jsxs(
986
- "button",
987
- {
988
- onClick: () => {
989
- handleToggleTheme();
990
- setShowMoreMenu(false);
991
- },
992
- className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
993
- children: [
994
- theme === "light" ? /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) }) : /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) }),
995
- /* @__PURE__ */ jsx3("span", { children: theme === "light" ? "Dark mode" : "Light mode" })
996
- ]
997
- }
998
- ),
999
- /* @__PURE__ */ jsxs(
1000
- "button",
1001
- {
1002
- onClick: () => {
1003
- handleHome();
1004
- setShowMoreMenu(false);
1005
- },
1006
- className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
1007
- children: [
1008
- /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }),
1009
- /* @__PURE__ */ jsx3("span", { children: "Reset position" })
1010
- ]
1011
- }
1012
- ),
1013
- /* @__PURE__ */ jsxs(
1014
- "button",
1015
- {
1016
- onClick: () => {
1017
- setShowInfo(!showInfo);
1018
- setShowMoreMenu(false);
1019
- },
1020
- className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
1021
- children: [
1022
- /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
1023
- /* @__PURE__ */ jsx3("span", { children: "How to use" })
1024
- ]
1025
- }
1026
- ),
1027
- onClearChat && /* @__PURE__ */ jsxs(
1111
+ config.description && /* @__PURE__ */ jsx3("div", { className: "mt-3 pt-3 border-t border-gray-300/30 dark:border-gray-600/30", children: config.description })
1112
+ ] }),
1113
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
1114
+ showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.welcome.container, children: [
1115
+ config.welcome.title && /* @__PURE__ */ jsx3("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
1116
+ config.welcome.content && /* @__PURE__ */ jsx3("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content }),
1117
+ config.welcome.suggestedCommands && config.welcome.suggestedCommands.length > 0 && /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.welcome.commandsContainer, children: [
1118
+ /* @__PURE__ */ jsx3("p", { className: THEME_CLASSES.welcome.commandsHeader, children: "Try these commands:" }),
1119
+ /* @__PURE__ */ jsx3("div", { className: "space-y-1", children: config.welcome.suggestedCommands.map((cmd, idx) => /* @__PURE__ */ jsxs(
1028
1120
  "button",
1029
1121
  {
1030
1122
  onClick: () => {
1031
- handleClearChat();
1032
- setShowMoreMenu(false);
1123
+ setInputValue(cmd.text);
1124
+ setShowWelcome(false);
1125
+ setTimeout(() => inputRef.current?.focus(), 0);
1033
1126
  },
1034
- className: "w-full flex items-center space-x-2 px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
1127
+ className: THEME_CLASSES.welcome.commandButton,
1035
1128
  children: [
1036
- /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
1037
- /* @__PURE__ */ jsx3("span", { children: "Clear chat" })
1129
+ /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.welcome.commandText, style: INLINE_STYLES.commandText(theme === "dark"), children: [
1130
+ '"',
1131
+ cmd.text,
1132
+ '"'
1133
+ ] }),
1134
+ cmd.desc && /* @__PURE__ */ jsx3("div", { className: THEME_CLASSES.welcome.commandDesc, style: INLINE_STYLES.commandDesc(theme === "dark"), children: cmd.desc })
1038
1135
  ]
1039
- }
1040
- )
1041
- ] }),
1136
+ },
1137
+ idx
1138
+ )) })
1139
+ ] })
1140
+ ] }),
1141
+ messages.map((message) => /* @__PURE__ */ jsxs("div", { className: `group flex items-center gap-2 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
1042
1142
  /* @__PURE__ */ jsx3(
1043
- "button",
1143
+ "div",
1044
1144
  {
1045
- onClick: () => setIsMinimized(true),
1046
- className: THEME_CLASSES.button.minimize,
1047
- title: "Minimize",
1048
- children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
1145
+ className: `inline-block px-4 py-2.5 rounded-2xl max-w-[80%] text-sm shadow-sm transition-all ${message.type === "user" ? THEME_CLASSES.message.user : message.type === "ai" ? THEME_CLASSES.message.ai : THEME_CLASSES.message.system}`,
1146
+ style: message.type === "user" ? INLINE_STYLES.messageUser() : message.type === "ai" ? INLINE_STYLES.messageAI(theme === "dark") : INLINE_STYLES.messageSystem(theme === "dark"),
1147
+ "data-testid": `chat-message-${message.type}`,
1148
+ children: /* @__PURE__ */ jsx3("div", { className: "break-words leading-relaxed", children: message.text })
1049
1149
  }
1050
1150
  ),
1051
1151
  /* @__PURE__ */ jsx3(
1052
- "button",
1152
+ "div",
1053
1153
  {
1054
- onClick: handleToggle,
1055
- className: THEME_CLASSES.button.close,
1056
- title: "Close",
1057
- children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
1154
+ className: `text-xs opacity-0 group-hover:opacity-70 transition-opacity whitespace-nowrap flex-shrink-0 ${message.type === "user" ? "text-gray-400 dark:text-gray-500 text-left" : "text-gray-600 dark:text-gray-400 text-right"}`,
1155
+ title: typeof window !== "undefined" ? new Date(message.timestamp).toLocaleString() : "",
1156
+ children: typeof window !== "undefined" ? formatRelativeTime(message.timestamp) : ""
1058
1157
  }
1059
1158
  )
1060
- ] })
1061
- ]
1062
- }
1063
- ),
1064
- showInfo && /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.text.infoPopup, style: INLINE_STYLES.infoText(theme === "dark"), children: [
1065
- /* @__PURE__ */ jsx3("div", { className: "font-bold mb-2", children: "How to Use" }),
1066
- /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-xs", style: INLINE_STYLES.infoText(theme === "dark"), children: [
1067
- /* @__PURE__ */ jsxs("div", { children: [
1068
- "\u2022 ",
1069
- /* @__PURE__ */ jsx3("strong", { children: "Theme:" }),
1070
- " Toggle between light and dark modes"
1071
- ] }),
1072
- /* @__PURE__ */ jsxs("div", { children: [
1073
- "\u2022 ",
1074
- /* @__PURE__ */ jsx3("strong", { children: "Home:" }),
1075
- " Reset chat position to default"
1159
+ ] }, message.id)),
1160
+ /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
1076
1161
  ] }),
1077
- /* @__PURE__ */ jsxs("div", { children: [
1078
- "\u2022 ",
1079
- /* @__PURE__ */ jsx3("strong", { children: "Minimize:" }),
1080
- " Compact view with last message"
1081
- ] }),
1082
- /* @__PURE__ */ jsxs("div", { children: [
1083
- "\u2022 ",
1084
- /* @__PURE__ */ jsx3("strong", { children: "Clear:" }),
1085
- " Delete all messages and start fresh"
1086
- ] }),
1087
- /* @__PURE__ */ jsxs("div", { children: [
1088
- "\u2022 ",
1089
- /* @__PURE__ */ jsx3("strong", { children: "Drag:" }),
1090
- " Click and drag header to reposition"
1091
- ] }),
1092
- /* @__PURE__ */ jsxs("div", { children: [
1093
- "\u2022 ",
1094
- /* @__PURE__ */ jsx3("strong", { children: "Keyboard:" }),
1095
- ' Press "/" to open, Esc to close'
1096
- ] })
1097
- ] }),
1098
- config.description && /* @__PURE__ */ jsx3("div", { className: "mt-3 pt-3 border-t border-gray-300/30 dark:border-gray-600/30", children: config.description })
1099
- ] }),
1100
- /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
1101
- showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.welcome.container, children: [
1102
- config.welcome.title && /* @__PURE__ */ jsx3("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
1103
- config.welcome.content && /* @__PURE__ */ jsx3("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content }),
1104
- config.welcome.suggestedCommands && config.welcome.suggestedCommands.length > 0 && /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.welcome.commandsContainer, children: [
1105
- /* @__PURE__ */ jsx3("p", { className: THEME_CLASSES.welcome.commandsHeader, children: "Try these commands:" }),
1106
- /* @__PURE__ */ jsx3("div", { className: "space-y-1", children: config.welcome.suggestedCommands.map((cmd, idx) => /* @__PURE__ */ jsxs(
1107
- "button",
1108
- {
1109
- onClick: () => {
1110
- setInputValue(cmd.text);
1111
- setShowWelcome(false);
1112
- setTimeout(() => inputRef.current?.focus(), 0);
1113
- },
1114
- className: THEME_CLASSES.welcome.commandButton,
1115
- children: [
1116
- /* @__PURE__ */ jsxs("div", { className: THEME_CLASSES.welcome.commandText, style: INLINE_STYLES.commandText(theme === "dark"), children: [
1117
- '"',
1118
- cmd.text,
1119
- '"'
1120
- ] }),
1121
- cmd.desc && /* @__PURE__ */ jsx3("div", { className: THEME_CLASSES.welcome.commandDesc, style: INLINE_STYLES.commandDesc(theme === "dark"), children: cmd.desc })
1122
- ]
1123
- },
1124
- idx
1125
- )) })
1126
- ] })
1127
- ] }),
1128
- messages.map((message) => /* @__PURE__ */ jsxs("div", { className: `group flex items-center gap-2 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
1129
- /* @__PURE__ */ jsx3(
1130
- "div",
1131
- {
1132
- className: `inline-block px-4 py-2.5 rounded-2xl max-w-[80%] text-sm shadow-sm transition-all ${message.type === "user" ? THEME_CLASSES.message.user : message.type === "ai" ? THEME_CLASSES.message.ai : THEME_CLASSES.message.system}`,
1133
- style: message.type === "user" ? INLINE_STYLES.messageUser() : message.type === "ai" ? INLINE_STYLES.messageAI(theme === "dark") : INLINE_STYLES.messageSystem(theme === "dark"),
1134
- "data-testid": `chat-message-${message.type}`,
1135
- children: /* @__PURE__ */ jsx3("div", { className: "break-words leading-relaxed", children: message.text })
1136
- }
1137
- ),
1138
1162
  /* @__PURE__ */ jsx3(
1139
- "div",
1163
+ InputField,
1140
1164
  {
1141
- className: `text-xs opacity-0 group-hover:opacity-70 transition-opacity whitespace-nowrap flex-shrink-0 ${message.type === "user" ? "text-gray-400 dark:text-gray-500 text-left" : "text-gray-600 dark:text-gray-400 text-right"}`,
1142
- title: typeof window !== "undefined" ? new Date(message.timestamp).toLocaleString() : "",
1143
- children: typeof window !== "undefined" ? formatRelativeTime(message.timestamp) : ""
1165
+ inputValue,
1166
+ onInputChange: setInputValue,
1167
+ onSubmit: handleSend,
1168
+ placeholder: config.placeholder,
1169
+ glassClasses,
1170
+ theme,
1171
+ inputRef,
1172
+ sendButtonLabel: config.sendButtonLabel
1144
1173
  }
1145
1174
  )
1146
- ] }, message.id)),
1147
- /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
1148
- ] }),
1149
- /* @__PURE__ */ jsx3(
1150
- InputField,
1151
- {
1152
- inputValue,
1153
- onInputChange: setInputValue,
1154
- onSubmit: handleSend,
1155
- placeholder: config.placeholder,
1156
- glassClasses,
1157
- theme,
1158
- inputRef,
1159
- sendButtonLabel: config.sendButtonLabel
1160
- }
1161
- )
1162
- ]
1163
- }
1164
- ),
1165
- !isExpanded && /* @__PURE__ */ jsxs(
1166
- "button",
1167
- {
1168
- onClick: handleToggle,
1169
- className: THEME_CLASSES.bg.bubble,
1170
- "data-testid": ChatNames.bubble,
1171
- title: "Open chat",
1172
- children: [
1173
- /* @__PURE__ */ jsx3("img", { src: "/logo.svg", alt: "Supernal", className: "w-8 h-8" }),
1174
- hasUnread && /* @__PURE__ */ jsx3("div", { className: "absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center animate-pulse shadow-lg", "data-testid": "unread-indicator", children: /* @__PURE__ */ jsx3("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
1175
- ]
1176
- }
1177
- )
1178
- ] }) });
1175
+ ]
1176
+ }
1177
+ ),
1178
+ !isExpanded && /* @__PURE__ */ jsxs(
1179
+ "button",
1180
+ {
1181
+ onClick: handleToggle,
1182
+ className: THEME_CLASSES.bg.bubble,
1183
+ "data-testid": ChatNames.bubble,
1184
+ title: "Open chat",
1185
+ children: [
1186
+ /* @__PURE__ */ jsx3("img", { src: "/logo.svg", alt: "Supernal", className: "w-8 h-8" }),
1187
+ hasUnread && /* @__PURE__ */ jsx3("div", { className: "absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center animate-pulse shadow-lg", "data-testid": "unread-indicator", children: /* @__PURE__ */ jsx3("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
1188
+ ]
1189
+ }
1190
+ )
1191
+ ]
1192
+ }
1193
+ ) });
1179
1194
  };
1180
1195
 
1181
1196
  // src/components/AutoNavigationContext.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@supernal/interface-nextjs",
3
- "version": "1.0.13",
3
+ "version": "1.0.16",
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",