@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.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 = {
@@ -940,283 +940,298 @@ var ChatBubble = ({
940
940
  }
941
941
  );
942
942
  }
943
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `fixed ${dockClasses.container} z-50`, children: [
944
- isExpanded && isMinimized && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
945
- "div",
946
- {
947
- className: `absolute ${dockClasses.panel} ${glassClasses} rounded-3xl shadow-2xl border p-4 transition-all duration-300`,
948
- style: { width: panelWidth, maxWidth: "400px" },
949
- children: [
950
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
951
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center space-x-2", children: [
952
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { avatar: config.avatar, size: "small" }),
953
- config.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
954
- ] }),
955
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
956
- "button",
957
- {
958
- onClick: () => setIsMinimized(false),
959
- className: "p-1 text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-200 transition-colors",
960
- title: "Expand chat",
961
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
962
- }
963
- )
964
- ] }),
965
- (() => {
966
- const lastAiMessage = [...messages].reverse().find((m) => m.type === "ai");
967
- return lastAiMessage ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: THEME_CLASSES.text.minimizedMessage, style: INLINE_STYLES.minimizedMessage(theme === "dark"), children: "No AI responses yet" }) });
968
- })(),
969
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
970
- InputField,
971
- {
972
- compact: true,
973
- inputValue,
974
- onInputChange: setInputValue,
975
- onSubmit: handleSend,
976
- placeholder: config.placeholder,
977
- glassClasses,
978
- theme,
979
- sendButtonLabel: config.sendButtonLabel
980
- }
981
- )
982
- ]
983
- }
984
- ),
985
- isExpanded && !isMinimized && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
986
- "div",
987
- {
988
- ref: panelRef,
989
- 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`,
990
- style: {
991
- width: panelWidth,
992
- height: dynamicHeight,
993
- ...!isDocked && {
994
- left: "50%",
995
- top: "50%",
996
- transform: `translate(calc(-50% + ${panelPosition.x}px), calc(-50% + ${panelPosition.y}px))`
997
- },
998
- ...isDragging && { cursor: "grabbing" }
999
- },
1000
- children: [
1001
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1002
- "div",
1003
- {
1004
- "data-drag-handle": true,
1005
- className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight} cursor-move`,
1006
- onMouseDown: handlePanelMouseDown,
1007
- children: [
1008
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center space-x-3", children: [
1009
- config.avatar && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex-shrink-0", children: [
1010
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { avatar: config.avatar }),
1011
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
943
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
944
+ "div",
945
+ {
946
+ className: "fixed z-50",
947
+ style: {
948
+ ...dockClasses.container,
949
+ width: panelWidth,
950
+ height: isMinimized ? "auto" : dynamicHeight
951
+ },
952
+ children: [
953
+ isExpanded && isMinimized && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
954
+ "div",
955
+ {
956
+ className: `absolute ${glassClasses} rounded-3xl shadow-2xl border p-4 transition-all duration-300`,
957
+ style: {
958
+ ...dockClasses.panel,
959
+ width: panelWidth,
960
+ maxWidth: "400px"
961
+ },
962
+ children: [
963
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
964
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center space-x-2", children: [
965
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { avatar: config.avatar, size: "small" }),
966
+ config.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: THEME_CLASSES.text.floatingTitle, children: config.title })
967
+ ] }),
968
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
969
+ "button",
970
+ {
971
+ onClick: () => setIsMinimized(false),
972
+ className: "p-1 text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-200 transition-colors",
973
+ title: "Expand chat",
974
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
975
+ }
976
+ )
977
+ ] }),
978
+ (() => {
979
+ const lastAiMessage = [...messages].reverse().find((m) => m.type === "ai");
980
+ return lastAiMessage ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: THEME_CLASSES.text.minimizedMessage, style: INLINE_STYLES.minimizedMessage(theme === "dark"), children: "No AI responses yet" }) });
981
+ })(),
982
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
983
+ InputField,
984
+ {
985
+ compact: true,
986
+ inputValue,
987
+ onInputChange: setInputValue,
988
+ onSubmit: handleSend,
989
+ placeholder: config.placeholder,
990
+ glassClasses,
991
+ theme,
992
+ sendButtonLabel: config.sendButtonLabel
993
+ }
994
+ )
995
+ ]
996
+ }
997
+ ),
998
+ isExpanded && !isMinimized && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
999
+ "div",
1000
+ {
1001
+ ref: panelRef,
1002
+ 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`,
1003
+ style: {
1004
+ width: panelWidth,
1005
+ height: dynamicHeight,
1006
+ ...isDocked ? dockClasses.panel : {
1007
+ left: "50%",
1008
+ top: "50%",
1009
+ transform: `translate(calc(-50% + ${panelPosition.x}px), calc(-50% + ${panelPosition.y}px))`
1010
+ },
1011
+ ...isDragging && { cursor: "grabbing" }
1012
+ },
1013
+ children: [
1014
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1015
+ "div",
1016
+ {
1017
+ "data-drag-handle": true,
1018
+ className: `${THEME_CLASSES.bg.header} ${glassMode ? THEME_CLASSES.bg.headerGradient : THEME_CLASSES.bg.headerLight} cursor-move`,
1019
+ onMouseDown: handlePanelMouseDown,
1020
+ children: [
1021
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center space-x-3", children: [
1022
+ config.avatar && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex-shrink-0", children: [
1023
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Avatar, { avatar: config.avatar }),
1024
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" })
1025
+ ] }),
1026
+ config.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
1027
+ ] }),
1028
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center space-x-1 flex-shrink-0 relative", "data-more-menu": true, children: [
1029
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1030
+ "button",
1031
+ {
1032
+ onClick: () => setShowMoreMenu(!showMoreMenu),
1033
+ className: THEME_CLASSES.button.more,
1034
+ title: "More options",
1035
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" }) })
1036
+ }
1037
+ ),
1038
+ showMoreMenu && /* @__PURE__ */ (0, import_jsx_runtime3.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: [
1039
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1040
+ "button",
1041
+ {
1042
+ onClick: () => {
1043
+ handleToggleTheme();
1044
+ setShowMoreMenu(false);
1045
+ },
1046
+ 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",
1047
+ children: [
1048
+ theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" }) }),
1049
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: theme === "light" ? "Dark mode" : "Light mode" })
1050
+ ]
1051
+ }
1052
+ ),
1053
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1054
+ "button",
1055
+ {
1056
+ onClick: () => {
1057
+ handleHome();
1058
+ setShowMoreMenu(false);
1059
+ },
1060
+ 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",
1061
+ children: [
1062
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" }) }),
1063
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Reset position" })
1064
+ ]
1065
+ }
1066
+ ),
1067
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1068
+ "button",
1069
+ {
1070
+ onClick: () => {
1071
+ setShowInfo(!showInfo);
1072
+ setShowMoreMenu(false);
1073
+ },
1074
+ 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",
1075
+ children: [
1076
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" }) }),
1077
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "How to use" })
1078
+ ]
1079
+ }
1080
+ ),
1081
+ onClearChat && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1082
+ "button",
1083
+ {
1084
+ onClick: () => {
1085
+ handleClearChat();
1086
+ setShowMoreMenu(false);
1087
+ },
1088
+ 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",
1089
+ children: [
1090
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" }) }),
1091
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Clear chat" })
1092
+ ]
1093
+ }
1094
+ )
1095
+ ] }),
1096
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1097
+ "button",
1098
+ {
1099
+ onClick: () => setIsMinimized(true),
1100
+ className: THEME_CLASSES.button.minimize,
1101
+ title: "Minimize",
1102
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
1103
+ }
1104
+ ),
1105
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1106
+ "button",
1107
+ {
1108
+ onClick: handleToggle,
1109
+ className: THEME_CLASSES.button.close,
1110
+ title: "Close",
1111
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
1112
+ }
1113
+ )
1114
+ ] })
1115
+ ]
1116
+ }
1117
+ ),
1118
+ showInfo && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: THEME_CLASSES.text.infoPopup, style: INLINE_STYLES.infoText(theme === "dark"), children: [
1119
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-bold mb-2", children: "How to Use" }),
1120
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-2 text-xs", style: INLINE_STYLES.infoText(theme === "dark"), children: [
1121
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
1122
+ "\u2022 ",
1123
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Theme:" }),
1124
+ " Toggle between light and dark modes"
1125
+ ] }),
1126
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
1127
+ "\u2022 ",
1128
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Home:" }),
1129
+ " Reset chat position to default"
1130
+ ] }),
1131
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
1132
+ "\u2022 ",
1133
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Minimize:" }),
1134
+ " Compact view with last message"
1135
+ ] }),
1136
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
1137
+ "\u2022 ",
1138
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Clear:" }),
1139
+ " Delete all messages and start fresh"
1012
1140
  ] }),
1013
- config.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: THEME_CLASSES.text.title, children: config.title }) })
1141
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
1142
+ "\u2022 ",
1143
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Drag:" }),
1144
+ " Click and drag header to reposition"
1145
+ ] }),
1146
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
1147
+ "\u2022 ",
1148
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Keyboard:" }),
1149
+ ' Press "/" to open, Esc to close'
1150
+ ] })
1014
1151
  ] }),
1015
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center space-x-1 flex-shrink-0 relative", "data-more-menu": true, children: [
1016
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1017
- "button",
1018
- {
1019
- onClick: () => setShowMoreMenu(!showMoreMenu),
1020
- className: THEME_CLASSES.button.more,
1021
- title: "More options",
1022
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" }) })
1023
- }
1024
- ),
1025
- showMoreMenu && /* @__PURE__ */ (0, import_jsx_runtime3.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: [
1026
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1027
- "button",
1028
- {
1029
- onClick: () => {
1030
- handleToggleTheme();
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
- theme === "light" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" }) }),
1036
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: theme === "light" ? "Dark mode" : "Light mode" })
1037
- ]
1038
- }
1039
- ),
1040
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1041
- "button",
1042
- {
1043
- onClick: () => {
1044
- handleHome();
1045
- setShowMoreMenu(false);
1046
- },
1047
- 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",
1048
- children: [
1049
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" }) }),
1050
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Reset position" })
1051
- ]
1052
- }
1053
- ),
1054
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1055
- "button",
1056
- {
1057
- onClick: () => {
1058
- setShowInfo(!showInfo);
1059
- setShowMoreMenu(false);
1060
- },
1061
- 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",
1062
- children: [
1063
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" }) }),
1064
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "How to use" })
1065
- ]
1066
- }
1067
- ),
1068
- onClearChat && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1152
+ config.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-3 pt-3 border-t border-gray-300/30 dark:border-gray-600/30", children: config.description })
1153
+ ] }),
1154
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
1155
+ showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: THEME_CLASSES.welcome.container, children: [
1156
+ config.welcome.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
1157
+ config.welcome.content && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content }),
1158
+ config.welcome.suggestedCommands && config.welcome.suggestedCommands.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: THEME_CLASSES.welcome.commandsContainer, children: [
1159
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: THEME_CLASSES.welcome.commandsHeader, children: "Try these commands:" }),
1160
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "space-y-1", children: config.welcome.suggestedCommands.map((cmd, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1069
1161
  "button",
1070
1162
  {
1071
1163
  onClick: () => {
1072
- handleClearChat();
1073
- setShowMoreMenu(false);
1164
+ setInputValue(cmd.text);
1165
+ setShowWelcome(false);
1166
+ setTimeout(() => inputRef.current?.focus(), 0);
1074
1167
  },
1075
- 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",
1168
+ className: THEME_CLASSES.welcome.commandButton,
1076
1169
  children: [
1077
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" }) }),
1078
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Clear chat" })
1170
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: THEME_CLASSES.welcome.commandText, style: INLINE_STYLES.commandText(theme === "dark"), children: [
1171
+ '"',
1172
+ cmd.text,
1173
+ '"'
1174
+ ] }),
1175
+ cmd.desc && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: THEME_CLASSES.welcome.commandDesc, style: INLINE_STYLES.commandDesc(theme === "dark"), children: cmd.desc })
1079
1176
  ]
1080
- }
1081
- )
1082
- ] }),
1177
+ },
1178
+ idx
1179
+ )) })
1180
+ ] })
1181
+ ] }),
1182
+ messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `group flex items-center gap-2 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
1083
1183
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1084
- "button",
1184
+ "div",
1085
1185
  {
1086
- onClick: () => setIsMinimized(true),
1087
- className: THEME_CLASSES.button.minimize,
1088
- title: "Minimize",
1089
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
1186
+ 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}`,
1187
+ style: message.type === "user" ? INLINE_STYLES.messageUser() : message.type === "ai" ? INLINE_STYLES.messageAI(theme === "dark") : INLINE_STYLES.messageSystem(theme === "dark"),
1188
+ "data-testid": `chat-message-${message.type}`,
1189
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "break-words leading-relaxed", children: message.text })
1090
1190
  }
1091
1191
  ),
1092
1192
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1093
- "button",
1193
+ "div",
1094
1194
  {
1095
- onClick: handleToggle,
1096
- className: THEME_CLASSES.button.close,
1097
- title: "Close",
1098
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
1195
+ 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"}`,
1196
+ title: typeof window !== "undefined" ? new Date(message.timestamp).toLocaleString() : "",
1197
+ children: typeof window !== "undefined" ? formatRelativeTime(message.timestamp) : ""
1099
1198
  }
1100
1199
  )
1101
- ] })
1102
- ]
1103
- }
1104
- ),
1105
- showInfo && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: THEME_CLASSES.text.infoPopup, style: INLINE_STYLES.infoText(theme === "dark"), children: [
1106
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-bold mb-2", children: "How to Use" }),
1107
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-2 text-xs", style: INLINE_STYLES.infoText(theme === "dark"), children: [
1108
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
1109
- "\u2022 ",
1110
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Theme:" }),
1111
- " Toggle between light and dark modes"
1112
- ] }),
1113
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
1114
- "\u2022 ",
1115
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Home:" }),
1116
- " Reset chat position to default"
1200
+ ] }, message.id)),
1201
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: messagesEndRef })
1117
1202
  ] }),
1118
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
1119
- "\u2022 ",
1120
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Minimize:" }),
1121
- " Compact view with last message"
1122
- ] }),
1123
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
1124
- "\u2022 ",
1125
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Clear:" }),
1126
- " Delete all messages and start fresh"
1127
- ] }),
1128
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
1129
- "\u2022 ",
1130
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Drag:" }),
1131
- " Click and drag header to reposition"
1132
- ] }),
1133
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
1134
- "\u2022 ",
1135
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Keyboard:" }),
1136
- ' Press "/" to open, Esc to close'
1137
- ] })
1138
- ] }),
1139
- config.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-3 pt-3 border-t border-gray-300/30 dark:border-gray-600/30", children: config.description })
1140
- ] }),
1141
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
1142
- showWelcome && messages.length === 0 && config.welcome?.enabled && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: THEME_CLASSES.welcome.container, children: [
1143
- config.welcome.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: THEME_CLASSES.welcome.title, style: INLINE_STYLES.welcomeTitle(theme === "dark"), children: config.welcome.title }),
1144
- config.welcome.content && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: THEME_CLASSES.welcome.content, style: INLINE_STYLES.welcomeContent(theme === "dark"), children: config.welcome.content }),
1145
- config.welcome.suggestedCommands && config.welcome.suggestedCommands.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: THEME_CLASSES.welcome.commandsContainer, children: [
1146
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: THEME_CLASSES.welcome.commandsHeader, children: "Try these commands:" }),
1147
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "space-y-1", children: config.welcome.suggestedCommands.map((cmd, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1148
- "button",
1149
- {
1150
- onClick: () => {
1151
- setInputValue(cmd.text);
1152
- setShowWelcome(false);
1153
- setTimeout(() => inputRef.current?.focus(), 0);
1154
- },
1155
- className: THEME_CLASSES.welcome.commandButton,
1156
- children: [
1157
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: THEME_CLASSES.welcome.commandText, style: INLINE_STYLES.commandText(theme === "dark"), children: [
1158
- '"',
1159
- cmd.text,
1160
- '"'
1161
- ] }),
1162
- cmd.desc && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: THEME_CLASSES.welcome.commandDesc, style: INLINE_STYLES.commandDesc(theme === "dark"), children: cmd.desc })
1163
- ]
1164
- },
1165
- idx
1166
- )) })
1167
- ] })
1168
- ] }),
1169
- messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `group flex items-center gap-2 mb-2 ${message.type === "user" ? "flex-row-reverse" : "flex-row"}`, children: [
1170
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1171
- "div",
1172
- {
1173
- 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}`,
1174
- style: message.type === "user" ? INLINE_STYLES.messageUser() : message.type === "ai" ? INLINE_STYLES.messageAI(theme === "dark") : INLINE_STYLES.messageSystem(theme === "dark"),
1175
- "data-testid": `chat-message-${message.type}`,
1176
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "break-words leading-relaxed", children: message.text })
1177
- }
1178
- ),
1179
1203
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1180
- "div",
1204
+ InputField,
1181
1205
  {
1182
- 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"}`,
1183
- title: typeof window !== "undefined" ? new Date(message.timestamp).toLocaleString() : "",
1184
- children: typeof window !== "undefined" ? formatRelativeTime(message.timestamp) : ""
1206
+ inputValue,
1207
+ onInputChange: setInputValue,
1208
+ onSubmit: handleSend,
1209
+ placeholder: config.placeholder,
1210
+ glassClasses,
1211
+ theme,
1212
+ inputRef,
1213
+ sendButtonLabel: config.sendButtonLabel
1185
1214
  }
1186
1215
  )
1187
- ] }, message.id)),
1188
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: messagesEndRef })
1189
- ] }),
1190
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1191
- InputField,
1192
- {
1193
- inputValue,
1194
- onInputChange: setInputValue,
1195
- onSubmit: handleSend,
1196
- placeholder: config.placeholder,
1197
- glassClasses,
1198
- theme,
1199
- inputRef,
1200
- sendButtonLabel: config.sendButtonLabel
1201
- }
1202
- )
1203
- ]
1204
- }
1205
- ),
1206
- !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1207
- "button",
1208
- {
1209
- onClick: handleToggle,
1210
- className: THEME_CLASSES.bg.bubble,
1211
- "data-testid": ChatNames.bubble,
1212
- title: "Open chat",
1213
- children: [
1214
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src: "/logo.svg", alt: "Supernal", className: "w-8 h-8" }),
1215
- hasUnread && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
1216
- ]
1217
- }
1218
- )
1219
- ] }) });
1216
+ ]
1217
+ }
1218
+ ),
1219
+ !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1220
+ "button",
1221
+ {
1222
+ onClick: handleToggle,
1223
+ className: THEME_CLASSES.bg.bubble,
1224
+ "data-testid": ChatNames.bubble,
1225
+ title: "Open chat",
1226
+ children: [
1227
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src: "/logo.svg", alt: "Supernal", className: "w-8 h-8" }),
1228
+ hasUnread && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
1229
+ ]
1230
+ }
1231
+ )
1232
+ ]
1233
+ }
1234
+ ) });
1220
1235
  };
1221
1236
 
1222
1237
  // src/components/AutoNavigationContext.tsx