@supernal/interface-nextjs 1.0.13 → 1.0.14

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