@memberjunction/ng-conversations 2.110.1 → 2.111.0

package/dist/lib/components/mention/mention-dropdown.component.js

@@ -84,7 +84,7 @@ function MentionDropdownComponent_div_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("top", ctx_r2.position.top, "px")("left", ctx_r2.position.left, "px");
-    i0.ɵɵclassProp("show-above", ctx_r2.showAbove);
+    i0.ɵɵclassProp("show-above", ctx_r2.showAbove)("fixed-position", ctx_r2.useFixedPositioning);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r2.suggestions.length > 0);
     i0.ɵɵadvance();
@@ -98,6 +98,7 @@ export class MentionDropdownComponent {
     position = { top: 0, left: 0 };
     visible = false;
     showAbove = false; // Controls whether dropdown grows upward
+    useFixedPositioning = false; // Use fixed positioning to escape parent containers
     suggestionSelected = new EventEmitter();
     closed = new EventEmitter();
     selectedIndex = 0;
@@ -187,15 +188,15 @@ export class MentionDropdownComponent {
     static ɵfac = function MentionDropdownComponent_Factory(t) { return new (t || MentionDropdownComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MentionDropdownComponent, selectors: [["mj-mention-dropdown"]], hostBindings: function MentionDropdownComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function MentionDropdownComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyDown($event); }, false, i0.ɵɵresolveDocument);
-        } }, inputs: { suggestions: "suggestions", position: "position", visible: "visible", showAbove: "showAbove" }, outputs: { suggestionSelected: "suggestionSelected", closed: "closed" }, decls: 1, vars: 1, consts: [["class", "mention-dropdown", 3, "show-above", "top", "left", 4, "ngIf"], [1, "mention-dropdown"], ["class", "mention-suggestions", 4, "ngIf"], ["class", "mention-empty-state", 4, "ngIf"], [1, "mention-suggestions"], ["class", "mention-suggestion", 3, "selected", "click", "mouseenter", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "mention-suggestion", 3, "click", "mouseenter"], [1, "suggestion-icon"], [3, "ngClass", 4, "ngIf"], ["class", "fa-solid fa-user", 4, "ngIf"], [1, "suggestion-content"], [1, "suggestion-name"], ["class", "suggestion-type-badge", 4, "ngIf"], ["class", "suggestion-type-badge user", 4, "ngIf"], ["class", "suggestion-description", 4, "ngIf"], [3, "ngClass"], [1, "fa-solid", "fa-user"], [1, "suggestion-type-badge"], [1, "suggestion-type-badge", "user"], [1, "suggestion-description"], [1, "mention-empty-state"], [1, "fa-solid", "fa-robot"]], template: function MentionDropdownComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, MentionDropdownComponent_div_0_Template, 3, 8, "div", 0);
+        } }, inputs: { suggestions: "suggestions", position: "position", visible: "visible", showAbove: "showAbove", useFixedPositioning: "useFixedPositioning" }, outputs: { suggestionSelected: "suggestionSelected", closed: "closed" }, decls: 1, vars: 1, consts: [["class", "mention-dropdown", 3, "show-above", "fixed-position", "top", "left", 4, "ngIf"], [1, "mention-dropdown"], ["class", "mention-suggestions", 4, "ngIf"], ["class", "mention-empty-state", 4, "ngIf"], [1, "mention-suggestions"], ["class", "mention-suggestion", 3, "selected", "click", "mouseenter", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "mention-suggestion", 3, "click", "mouseenter"], [1, "suggestion-icon"], [3, "ngClass", 4, "ngIf"], ["class", "fa-solid fa-user", 4, "ngIf"], [1, "suggestion-content"], [1, "suggestion-name"], ["class", "suggestion-type-badge", 4, "ngIf"], ["class", "suggestion-type-badge user", 4, "ngIf"], ["class", "suggestion-description", 4, "ngIf"], [3, "ngClass"], [1, "fa-solid", "fa-user"], [1, "suggestion-type-badge"], [1, "suggestion-type-badge", "user"], [1, "suggestion-description"], [1, "mention-empty-state"], [1, "fa-solid", "fa-robot"]], template: function MentionDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, MentionDropdownComponent_div_0_Template, 3, 10, "div", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.visible);
-        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf], styles: [".mention-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  z-index: 10000;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 280px;\n  max-width: 400px;\n  max-height: 300px;\n  overflow-y: auto;\n  transform-origin: top left; \n\n}\n\n.mention-dropdown.show-above[_ngcontent-%COMP%] {\n  transform: translateY(-100%); \n\n  transform-origin: bottom left; \n\n}\n\n.mention-suggestions[_ngcontent-%COMP%] {\n  padding: 4px 0;\n}\n\n.mention-suggestion[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n\n.mention-suggestion[_ngcontent-%COMP%]:hover, \n.mention-suggestion.selected[_ngcontent-%COMP%] {\n  background-color: #f5f5f5;\n}\n\n.suggestion-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border-radius: 6px;\n  color: white;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.suggestion-icon[_ngcontent-%COMP%]   i.fa-user[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.suggestion-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.suggestion-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  font-size: 14px;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.suggestion-type-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 6px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border-radius: 3px;\n}\n\n.suggestion-type-badge.user[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.suggestion-description[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n  margin-top: 2px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n\n.mention-dropdown[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.mention-dropdown[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 8px;\n}\n\n.mention-dropdown[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 8px;\n}\n\n.mention-dropdown[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: #a8a8a8;\n}\n\n\n\n.mention-empty-state[_ngcontent-%COMP%] {\n  padding: 24px;\n  text-align: center;\n  color: #9CA3AF;\n}\n\n.mention-empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  margin-bottom: 8px;\n  opacity: 0.5;\n}\n\n.mention-empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 500;\n}", "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n[class^=\"mj-icon-\"][_ngcontent-%COMP%], \n[class*=\" mj-icon-\"][_ngcontent-%COMP%] {\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-size: inherit;\n  line-height: 1;\n}\n\n\n\n\n\n\n\n\n\n\n\n.mj-icon-skip[_ngcontent-%COMP%] {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  \n\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n\n\n\n\n\n.mj-icon-skip-lightning[_ngcontent-%COMP%]::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  font-size: 1.1em;\n}\n\n\n\n\n\n\n.mj-icon-skip-brain[_ngcontent-%COMP%]::before {\n  content: \"\uD83E\uDDE0\";\n  font-size: 1.2em;\n}\n\n\n\n\n\n\n\n\n\n\n.mj-icon-data-analyst[_ngcontent-%COMP%]::before {\n  content: \"\uD83D\uDCCA\";\n  font-size: 1.1em;\n}\n\n\n\n\n\n.mj-icon-api[_ngcontent-%COMP%]::before {\n  content: \"\uD83D\uDD0C\";\n  font-size: 1.1em;\n}\n\n\n\n\n\n.mj-icon-processing[_ngcontent-%COMP%]::before {\n  content: \"\u2699\uFE0F\";\n  display: inline-block;\n  animation: _ngcontent-%COMP%_rotate-icon 2s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_rotate-icon {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n\n\n\n\n\n.mj-icon-monogram-s[_ngcontent-%COMP%]::before {\n  content: \"S\";\n  font-weight: 800;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 1.1em;\n  color: #667eea;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"] });
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf], styles: [".mention-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  z-index: 10000;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 280px;\n  max-width: 400px;\n  max-height: 300px;\n  overflow-y: auto;\n  transform-origin: top left; \n\n}\n\n.mention-dropdown.fixed-position[_ngcontent-%COMP%] {\n  position: fixed; \n\n}\n\n.mention-dropdown.show-above[_ngcontent-%COMP%] {\n  transform: translateY(-100%); \n\n  transform-origin: bottom left; \n\n}\n\n.mention-suggestions[_ngcontent-%COMP%] {\n  padding: 4px 0;\n}\n\n.mention-suggestion[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n\n.mention-suggestion[_ngcontent-%COMP%]:hover, \n.mention-suggestion.selected[_ngcontent-%COMP%] {\n  background-color: #f5f5f5;\n}\n\n.suggestion-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border-radius: 6px;\n  color: white;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.suggestion-icon[_ngcontent-%COMP%]   i.fa-user[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.suggestion-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.suggestion-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  font-size: 14px;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.suggestion-type-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 6px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border-radius: 3px;\n}\n\n.suggestion-type-badge.user[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.suggestion-description[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n  margin-top: 2px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n\n.mention-dropdown[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.mention-dropdown[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 8px;\n}\n\n.mention-dropdown[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 8px;\n}\n\n.mention-dropdown[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: #a8a8a8;\n}\n\n\n\n.mention-empty-state[_ngcontent-%COMP%] {\n  padding: 24px;\n  text-align: center;\n  color: #9CA3AF;\n}\n\n.mention-empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  margin-bottom: 8px;\n  opacity: 0.5;\n}\n\n.mention-empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 500;\n}", "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n[class^=\"mj-icon-\"][_ngcontent-%COMP%], \n[class*=\" mj-icon-\"][_ngcontent-%COMP%] {\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-size: inherit;\n  line-height: 1;\n}\n\n\n\n\n\n\n\n\n\n\n\n.mj-icon-skip[_ngcontent-%COMP%] {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  \n\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n\n\n\n\n\n.mj-icon-skip-lightning[_ngcontent-%COMP%]::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  font-size: 1.1em;\n}\n\n\n\n\n\n\n.mj-icon-skip-brain[_ngcontent-%COMP%]::before {\n  content: \"\uD83E\uDDE0\";\n  font-size: 1.2em;\n}\n\n\n\n\n\n\n\n\n\n\n.mj-icon-data-analyst[_ngcontent-%COMP%]::before {\n  content: \"\uD83D\uDCCA\";\n  font-size: 1.1em;\n}\n\n\n\n\n\n.mj-icon-api[_ngcontent-%COMP%]::before {\n  content: \"\uD83D\uDD0C\";\n  font-size: 1.1em;\n}\n\n\n\n\n\n.mj-icon-processing[_ngcontent-%COMP%]::before {\n  content: \"\u2699\uFE0F\";\n  display: inline-block;\n  animation: _ngcontent-%COMP%_rotate-icon 2s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_rotate-icon {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n\n\n\n\n\n.mj-icon-monogram-s[_ngcontent-%COMP%]::before {\n  content: \"S\";\n  font-weight: 800;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 1.1em;\n  color: #667eea;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MentionDropdownComponent, [{
         type: Component,
-        args: [{ selector: 'mj-mention-dropdown', template: "<div\n  *ngIf=\"visible\"\n  class=\"mention-dropdown\"\n  [class.show-above]=\"showAbove\"\n  [style.top.px]=\"position.top\"\n  [style.left.px]=\"position.left\"\n>\n  <!-- Suggestions List -->\n  <div class=\"mention-suggestions\" *ngIf=\"suggestions.length > 0\">\n    <div\n      *ngFor=\"let suggestion of suggestions; let i = index; trackBy: trackBySuggestion\"\n      class=\"mention-suggestion\"\n      [class.selected]=\"i === selectedIndex\"\n      (click)=\"selectSuggestion(suggestion)\"\n      (mouseenter)=\"selectedIndex = i\"\n    >\n      <div class=\"suggestion-icon\">\n        <i\n          *ngIf=\"suggestion.type === 'agent' && suggestion.icon\"\n          [ngClass]=\"getIconClasses(suggestion.icon)\"\n        ></i>\n        <i\n          *ngIf=\"suggestion.type === 'user'\"\n          class=\"fa-solid fa-user\"\n        ></i>\n      </div>\n      <div class=\"suggestion-content\">\n        <div class=\"suggestion-name\">\n          <span class=\"suggestion-type-badge\" *ngIf=\"suggestion.type === 'agent'\">Agent</span>\n          <span class=\"suggestion-type-badge user\" *ngIf=\"suggestion.type === 'user'\">User</span>\n          {{ suggestion.displayName }}\n        </div>\n        <div class=\"suggestion-description\" *ngIf=\"suggestion.description\">\n          {{ suggestion.description }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Empty State -->\n  <div class=\"mention-empty-state\" *ngIf=\"suggestions.length === 0\">\n    <i class=\"fa-solid fa-robot\"></i>\n    <p>No agents or users available</p>\n  </div>\n</div>\n", styles: [".mention-dropdown {\n  position: absolute;\n  z-index: 10000;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 280px;\n  max-width: 400px;\n  max-height: 300px;\n  overflow-y: auto;\n  transform-origin: top left; /* Default: grows downward from top-left */\n}\n\n.mention-dropdown.show-above {\n  transform: translateY(-100%); /* Shift entire dropdown up by its own height */\n  transform-origin: bottom left; /* Grows upward from bottom-left */\n}\n\n.mention-suggestions {\n  padding: 4px 0;\n}\n\n.mention-suggestion {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n\n.mention-suggestion:hover,\n.mention-suggestion.selected {\n  background-color: #f5f5f5;\n}\n\n.suggestion-icon {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border-radius: 6px;\n  color: white;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.suggestion-icon i.fa-user {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.suggestion-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.suggestion-name {\n  font-weight: 500;\n  font-size: 14px;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.suggestion-type-badge {\n  display: inline-block;\n  padding: 2px 6px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border-radius: 3px;\n}\n\n.suggestion-type-badge.user {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.suggestion-description {\n  font-size: 12px;\n  color: #666;\n  margin-top: 2px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Scrollbar styling */\n.mention-dropdown::-webkit-scrollbar {\n  width: 8px;\n}\n\n.mention-dropdown::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 8px;\n}\n\n.mention-dropdown::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 8px;\n}\n\n.mention-dropdown::-webkit-scrollbar-thumb:hover {\n  background: #a8a8a8;\n}\n\n/* Empty State */\n.mention-empty-state {\n  padding: 24px;\n  text-align: center;\n  color: #9CA3AF;\n}\n\n.mention-empty-state i {\n  font-size: 32px;\n  margin-bottom: 8px;\n  opacity: 0.5;\n}\n\n.mention-empty-state p {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 500;\n}\n", "/**\n * Custom Agent Icons for MemberJunction\n *\n * This file contains custom icon definitions for agents that need unique branding\n * beyond Font Awesome icons. Icons can be CSS-based (emoji, Unicode, SVG data URIs)\n * or reference external image files.\n *\n * USAGE IN AGENT METADATA:\n * \"IconClass\": \"mj-icon-skip\"  (references .mj-icon-skip class below)\n *\n * EXTENSIBILITY FOR 3RD PARTY DEVELOPERS:\n * Third-party developers have TWO options:\n *\n * 1. CSS CLASS APPROACH (Recommended for developers):\n *    - Add your own global CSS with custom icon classes\n *    - Reference your class in agent metadata: \"IconClass\": \"your-custom-class\"\n *    - Works with any CSS available to the application\n *    - Example: If you have a global stylesheet with .acme-icon-analyzer { ... }\n *      then use \"IconClass\": \"acme-icon-analyzer\"\n *\n * 2. LOGO URL APPROACH (Recommended for end users):\n *    - Use the LogoURL field in agent metadata\n *    - Provide a URL or data URI: \"LogoURL\": \"https://example.com/logo.png\"\n *    - Supports: HTTP URLs, data URIs (data:image/png;base64,...)\n *    - LogoURL takes precedence over IconClass in the UI\n *    - Perfect for non-technical users or external/uploaded images\n *\n * BEST PRACTICES:\n * - Use mj-icon-* prefix for MJ core icons\n * - Use your own prefix for 3rd party icons (e.g., acme-icon-*)\n * - Keep icons simple and recognizable at 16-36px sizes\n * - Test in both light and dark themes\n * - Prefer CSS classes over LogoURL for version-controlled icons\n */\n\n/* ============================================\n   BASE STYLES FOR CUSTOM ICONS\n   ============================================ */\n\n/* Base styling for all custom MJ icons */\n[class^=\"mj-icon-\"],\n[class*=\" mj-icon-\"] {\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-size: inherit;\n  line-height: 1;\n}\n\n/* ============================================\n   MJ CORE ICONS\n   ============================================ */\n\n/**\n * Skip Brain Icon - Analytics/Intelligence Agent\n * Official Skip logo from Skip SaaS branding\n */\n.mj-icon-skip {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  /* Official Skip logo SVG */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n/**\n * Alternative Skip Icon - Lightning Bolt\n * Simple emoji-based icon for quick setup\n */\n.mj-icon-skip-lightning::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  font-size: 1.1em;\n}\n\n/**\n * Skip Icon - Brain Emoji\n * Fallback emoji option\n */\n.mj-icon-skip-brain::before {\n  content: \"\uD83E\uDDE0\";\n  font-size: 1.2em;\n}\n\n/* ============================================\n   EXAMPLE CUSTOM ICONS FOR OTHER AGENTS\n   ============================================ */\n\n/**\n * Data Analysis Icon - Chart emoji\n */\n.mj-icon-data-analyst::before {\n  content: \"\uD83D\uDCCA\";\n  font-size: 1.1em;\n}\n\n/**\n * API/Integration Icon - Plug emoji\n */\n.mj-icon-api::before {\n  content: \"\uD83D\uDD0C\";\n  font-size: 1.1em;\n}\n\n/**\n * Processing/Workflow Icon - Gear emoji with animation\n */\n.mj-icon-processing::before {\n  content: \"\u2699\uFE0F\";\n  display: inline-block;\n  animation: rotate-icon 2s linear infinite;\n}\n\n@keyframes rotate-icon {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/**\n * Text/Letter-based Icon\n * Simple monogram icon\n */\n.mj-icon-monogram-s::before {\n  content: \"S\";\n  font-weight: 800;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 1.1em;\n  color: #667eea;\n}\n\n/* ============================================\n   TEMPLATE FOR NEW ICONS\n   ============================================ */\n\n/*\n// EMOJI-BASED ICON (Simplest)\n.mj-icon-my-agent::before {\n  content: \"\uD83C\uDFAF\";  // Use any emoji\n  font-size: 1.2em;\n}\n\n// UNICODE SYMBOL ICON\n.mj-icon-my-agent::before {\n  content: \"\\2022\";  // Unicode character\n  font-size: 1.2em;\n  color: #667eea;\n}\n\n// TEXT/LETTER ICON\n.mj-icon-my-agent::before {\n  content: \"MA\";  // Initials/text\n  font-weight: 800;\n  font-size: 0.9em;\n  color: #667eea;\n}\n\n// SVG DATA URI ICON (Most Control)\n.mj-icon-my-agent {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');\n  vertical-align: middle;\n}\n\n// EXTERNAL IMAGE FILE (For existing assets)\n.mj-icon-my-agent {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('/assets/icons/my-agent.svg');\n  vertical-align: middle;\n}\n\n// GRADIENT TEXT ICON\n.mj-icon-my-agent::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n*/\n\n/* ============================================\n   3RD PARTY EXAMPLES\n   These would typically be in EXTERNAL CSS files\n   ============================================ */\n\n/*\n// Example: Acme Corp custom agent icons\n// This would be in acme-corp-styles.css loaded by the application\n\n.acme-icon-analyzer {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-image: url('https://acme.com/icons/analyzer.svg');\n}\n\n.acme-icon-reporter::before {\n  content: \"A\";\n  font-weight: 800;\n  color: #FF6B35;\n}\n*/\n"] }]
+        args: [{ selector: 'mj-mention-dropdown', template: "<div\n  *ngIf=\"visible\"\n  class=\"mention-dropdown\"\n  [class.show-above]=\"showAbove\"\n  [class.fixed-position]=\"useFixedPositioning\"\n  [style.top.px]=\"position.top\"\n  [style.left.px]=\"position.left\"\n>\n  <!-- Suggestions List -->\n  <div class=\"mention-suggestions\" *ngIf=\"suggestions.length > 0\">\n    <div\n      *ngFor=\"let suggestion of suggestions; let i = index; trackBy: trackBySuggestion\"\n      class=\"mention-suggestion\"\n      [class.selected]=\"i === selectedIndex\"\n      (click)=\"selectSuggestion(suggestion)\"\n      (mouseenter)=\"selectedIndex = i\"\n    >\n      <div class=\"suggestion-icon\">\n        <i\n          *ngIf=\"suggestion.type === 'agent' && suggestion.icon\"\n          [ngClass]=\"getIconClasses(suggestion.icon)\"\n        ></i>\n        <i\n          *ngIf=\"suggestion.type === 'user'\"\n          class=\"fa-solid fa-user\"\n        ></i>\n      </div>\n      <div class=\"suggestion-content\">\n        <div class=\"suggestion-name\">\n          <span class=\"suggestion-type-badge\" *ngIf=\"suggestion.type === 'agent'\">Agent</span>\n          <span class=\"suggestion-type-badge user\" *ngIf=\"suggestion.type === 'user'\">User</span>\n          {{ suggestion.displayName }}\n        </div>\n        <div class=\"suggestion-description\" *ngIf=\"suggestion.description\">\n          {{ suggestion.description }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Empty State -->\n  <div class=\"mention-empty-state\" *ngIf=\"suggestions.length === 0\">\n    <i class=\"fa-solid fa-robot\"></i>\n    <p>No agents or users available</p>\n  </div>\n</div>\n", styles: [".mention-dropdown {\n  position: absolute;\n  z-index: 10000;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  min-width: 280px;\n  max-width: 400px;\n  max-height: 300px;\n  overflow-y: auto;\n  transform-origin: top left; /* Default: grows downward from top-left */\n}\n\n.mention-dropdown.fixed-position {\n  position: fixed; /* Escape parent containers and use viewport coordinates */\n}\n\n.mention-dropdown.show-above {\n  transform: translateY(-100%); /* Shift entire dropdown up by its own height */\n  transform-origin: bottom left; /* Grows upward from bottom-left */\n}\n\n.mention-suggestions {\n  padding: 4px 0;\n}\n\n.mention-suggestion {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n\n.mention-suggestion:hover,\n.mention-suggestion.selected {\n  background-color: #f5f5f5;\n}\n\n.suggestion-icon {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border-radius: 6px;\n  color: white;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.suggestion-icon i.fa-user {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.suggestion-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.suggestion-name {\n  font-weight: 500;\n  font-size: 14px;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.suggestion-type-badge {\n  display: inline-block;\n  padding: 2px 6px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  border-radius: 3px;\n}\n\n.suggestion-type-badge.user {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.suggestion-description {\n  font-size: 12px;\n  color: #666;\n  margin-top: 2px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Scrollbar styling */\n.mention-dropdown::-webkit-scrollbar {\n  width: 8px;\n}\n\n.mention-dropdown::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 8px;\n}\n\n.mention-dropdown::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 8px;\n}\n\n.mention-dropdown::-webkit-scrollbar-thumb:hover {\n  background: #a8a8a8;\n}\n\n/* Empty State */\n.mention-empty-state {\n  padding: 24px;\n  text-align: center;\n  color: #9CA3AF;\n}\n\n.mention-empty-state i {\n  font-size: 32px;\n  margin-bottom: 8px;\n  opacity: 0.5;\n}\n\n.mention-empty-state p {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 500;\n}\n", "/**\n * Custom Agent Icons for MemberJunction\n *\n * This file contains custom icon definitions for agents that need unique branding\n * beyond Font Awesome icons. Icons can be CSS-based (emoji, Unicode, SVG data URIs)\n * or reference external image files.\n *\n * USAGE IN AGENT METADATA:\n * \"IconClass\": \"mj-icon-skip\"  (references .mj-icon-skip class below)\n *\n * EXTENSIBILITY FOR 3RD PARTY DEVELOPERS:\n * Third-party developers have TWO options:\n *\n * 1. CSS CLASS APPROACH (Recommended for developers):\n *    - Add your own global CSS with custom icon classes\n *    - Reference your class in agent metadata: \"IconClass\": \"your-custom-class\"\n *    - Works with any CSS available to the application\n *    - Example: If you have a global stylesheet with .acme-icon-analyzer { ... }\n *      then use \"IconClass\": \"acme-icon-analyzer\"\n *\n * 2. LOGO URL APPROACH (Recommended for end users):\n *    - Use the LogoURL field in agent metadata\n *    - Provide a URL or data URI: \"LogoURL\": \"https://example.com/logo.png\"\n *    - Supports: HTTP URLs, data URIs (data:image/png;base64,...)\n *    - LogoURL takes precedence over IconClass in the UI\n *    - Perfect for non-technical users or external/uploaded images\n *\n * BEST PRACTICES:\n * - Use mj-icon-* prefix for MJ core icons\n * - Use your own prefix for 3rd party icons (e.g., acme-icon-*)\n * - Keep icons simple and recognizable at 16-36px sizes\n * - Test in both light and dark themes\n * - Prefer CSS classes over LogoURL for version-controlled icons\n */\n\n/* ============================================\n   BASE STYLES FOR CUSTOM ICONS\n   ============================================ */\n\n/* Base styling for all custom MJ icons */\n[class^=\"mj-icon-\"],\n[class*=\" mj-icon-\"] {\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-size: inherit;\n  line-height: 1;\n}\n\n/* ============================================\n   MJ CORE ICONS\n   ============================================ */\n\n/**\n * Skip Brain Icon - Analytics/Intelligence Agent\n * Official Skip logo from Skip SaaS branding\n */\n.mj-icon-skip {\n  width: 1.4em;\n  height: 1.4em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  /* Official Skip logo SVG */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 101.89918457031249 96.83947368421053'%3E%3Cg transform='translate(-0.1288232421875,-0.0)'%3E%3Cpath d='M93.85,41.56c-.84,0-1.62.2-2.37.55-3-4.35-7.49-8.12-13.04-11.04l.04-7.18v-14.44h-10.24v17.6c-1.52-.43-3.07-.8-4.67-1.11V0h-10.24v24.72s-.09,0-.14,0h-4.38s-.1,0-.14,0V7.3h-10.24v18.62c-1.6.32-3.15.69-4.67,1.11v-11.67h-10.24v6.09l.04,9.6c-5.55,2.92-10.04,6.7-13.04,11.04-.75-.35-1.53-.55-2.37-.55-4.5,0-8.14,5.61-8.14,12.51s3.64,12.53,8.14,12.53c.58,0,1.14-.12,1.67-.29,4.1,6.62,11.54,12.06,20.98,15.28l.79.13v7.05c0,2.97,1.45,5.58,3.87,6.99,1.18.69,2.5,1.04,3.85,1.03,1.4,0,2.83-.37,4.15-1.12l7.54-4.29,7.56,4.3c1.31.74,2.73,1.12,4.13,1.12s2.67-.35,3.85-1.04c2.42-1.41,3.86-4.02,3.86-6.98v-7.05l.79-.13c9.44-3.22,16.89-8.66,20.98-15.28.54.17,1.09.29,1.68.29,4.5,0,8.14-5.61,8.14-12.53s-3.63-12.51-8.14-12.51' fill='%23AAAAAA'/%3E%3Cpath d='M86.69,50.87c0-12.22-13.6-19.1-28.94-20.66-4.48-.47-9.19-.54-13.52,0-15.34,1.53-28.93,8.41-28.93,20.66,0,8.55,5.7,15.55,12.68,15.55h7.94c3.05,2.5,6.93,4.1,11.08,4.71,2.65.4,5.44.46,8.01,0,4.15-.6,8.05-2.2,11.1-4.71h7.92c6.97,0,12.68-7,12.68-15.55' fill='white' opacity='0.9'/%3E%3Cpath d='M57.83,55.82c-1.19,2.58-3.8,4.35-6.84,4.35s-5.65-1.77-6.84-4.35h13.68Z' fill='%23AAAAAA'/%3E%3Cpath d='M32.52,41.14c1.74,0,3.18,2.13,3.18,4.76s-1.44,4.74-3.18,4.74-3.16-2.13-3.16-4.74,1.41-4.76,3.16-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M69.46,41.14c1.74,0,3.16,2.13,3.16,4.76s-1.41,4.74-3.16,4.74-3.18-2.13-3.18-4.74,1.41-4.76,3.18-4.76' fill='%23AAAAAA'/%3E%3Cpath d='M63.91,76.15c-.82-.48-1.84-.43-2.8.12l-10.13,5.75-10.11-5.75c-.96-.55-1.98-.59-2.8-.12-.82.47-1.29,1.38-1.29,2.49v10.12c0,1.11.47,2.02,1.28,2.49.38.22.8.33,1.24.33.51,0,1.05-.15,1.57-.44l10.12-5.75,10.11,5.75c.52.29,1.05.44,1.56.44.44,0,.86-.11,1.24-.33.81-.48,1.28-1.38,1.28-2.49v-10.12c0-1.11-.47-2.02-1.28-2.49' fill='white' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E\");\n  vertical-align: middle;\n}\n\n/**\n * Alternative Skip Icon - Lightning Bolt\n * Simple emoji-based icon for quick setup\n */\n.mj-icon-skip-lightning::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  font-size: 1.1em;\n}\n\n/**\n * Skip Icon - Brain Emoji\n * Fallback emoji option\n */\n.mj-icon-skip-brain::before {\n  content: \"\uD83E\uDDE0\";\n  font-size: 1.2em;\n}\n\n/* ============================================\n   EXAMPLE CUSTOM ICONS FOR OTHER AGENTS\n   ============================================ */\n\n/**\n * Data Analysis Icon - Chart emoji\n */\n.mj-icon-data-analyst::before {\n  content: \"\uD83D\uDCCA\";\n  font-size: 1.1em;\n}\n\n/**\n * API/Integration Icon - Plug emoji\n */\n.mj-icon-api::before {\n  content: \"\uD83D\uDD0C\";\n  font-size: 1.1em;\n}\n\n/**\n * Processing/Workflow Icon - Gear emoji with animation\n */\n.mj-icon-processing::before {\n  content: \"\u2699\uFE0F\";\n  display: inline-block;\n  animation: rotate-icon 2s linear infinite;\n}\n\n@keyframes rotate-icon {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/**\n * Text/Letter-based Icon\n * Simple monogram icon\n */\n.mj-icon-monogram-s::before {\n  content: \"S\";\n  font-weight: 800;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 1.1em;\n  color: #667eea;\n}\n\n/* ============================================\n   TEMPLATE FOR NEW ICONS\n   ============================================ */\n\n/*\n// EMOJI-BASED ICON (Simplest)\n.mj-icon-my-agent::before {\n  content: \"\uD83C\uDFAF\";  // Use any emoji\n  font-size: 1.2em;\n}\n\n// UNICODE SYMBOL ICON\n.mj-icon-my-agent::before {\n  content: \"\\2022\";  // Unicode character\n  font-size: 1.2em;\n  color: #667eea;\n}\n\n// TEXT/LETTER ICON\n.mj-icon-my-agent::before {\n  content: \"MA\";  // Initials/text\n  font-weight: 800;\n  font-size: 0.9em;\n  color: #667eea;\n}\n\n// SVG DATA URI ICON (Most Control)\n.mj-icon-my-agent {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');\n  vertical-align: middle;\n}\n\n// EXTERNAL IMAGE FILE (For existing assets)\n.mj-icon-my-agent {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('/assets/icons/my-agent.svg');\n  vertical-align: middle;\n}\n\n// GRADIENT TEXT ICON\n.mj-icon-my-agent::before {\n  content: \"\u26A1\";\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n*/\n\n/* ============================================\n   3RD PARTY EXAMPLES\n   These would typically be in EXTERNAL CSS files\n   ============================================ */\n\n/*\n// Example: Acme Corp custom agent icons\n// This would be in acme-corp-styles.css loaded by the application\n\n.acme-icon-analyzer {\n  width: 1em;\n  height: 1em;\n  display: inline-block;\n  background-size: contain;\n  background-image: url('https://acme.com/icons/analyzer.svg');\n}\n\n.acme-icon-reporter::before {\n  content: \"A\";\n  font-weight: 800;\n  color: #FF6B35;\n}\n*/\n"] }]
     }], () => [], { suggestions: [{
             type: Input
         }], position: [{
@@ -204,6 +205,8 @@ export class MentionDropdownComponent {
             type: Input
         }], showAbove: [{
             type: Input
+        }], useFixedPositioning: [{
+            type: Input
         }], suggestionSelected: [{
             type: Output
         }], closed: [{

package/dist/lib/components/mention/mention-dropdown.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"mention-dropdown.component.js","sourceRoot":"","sources":["../../../../src/lib/components/mention/mention-dropdown.component.ts","../../../../src/lib/components/mention/mention-dropdown.component.html"],"names":[],"mappings":"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"}
+{"version":3,"file":"mention-dropdown.component.js","sourceRoot":"","sources":["../../../../src/lib/components/mention/mention-dropdown.component.ts","../../../../src/lib/components/mention/mention-dropdown.component.html"],"names":[],"mappings":"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"}

package/dist/lib/components/message/message-input-box.component.d.ts

@@ -0,0 +1,72 @@
+import { EventEmitter, ElementRef, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { UserInfo } from '@memberjunction/core';
+import { MentionAutocompleteService, MentionSuggestion } from '../../services/mention-autocomplete.service';
+import * as i0 from "@angular/core";
+/**
+ * Reusable message input box component (presentational)
+ * Handles:
+ * - Text input with keyboard shortcuts
+ * - @mention autocomplete (optional)
+ * - Send button
+ * - Character count (optional)
+ *
+ * Does NOT handle:
+ * - Saving messages to database
+ * - Agent invocation
+ * - Artifact creation
+ * - Conversation management
+ */
+export declare class MessageInputBoxComponent implements OnInit, AfterViewInit, OnDestroy {
+    private mentionAutocomplete;
+    placeholder: string;
+    disabled: boolean;
+    value: string;
+    showCharacterCount: boolean;
+    enableMentions: boolean;
+    currentUser?: UserInfo;
+    rows: number;
+    textSubmitted: EventEmitter<string>;
+    valueChange: EventEmitter<string>;
+    messageTextarea?: ElementRef;
+    showMentionDropdown: boolean;
+    mentionSuggestions: MentionSuggestion[];
+    mentionDropdownPosition: {
+        top: number;
+        left: number;
+    };
+    mentionDropdownShowAbove: boolean;
+    private mentionStartIndex;
+    private mentionQuery;
+    constructor(mentionAutocomplete: MentionAutocompleteService);
+    ngOnInit(): Promise<void>;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    get canSend(): boolean;
+    onKeyDown(event: KeyboardEvent): void;
+    onInput(event: Event): void;
+    onSendClick(): void;
+    /**
+     * Handle @mention autocomplete
+     */
+    private handleMentionInput;
+    /**
+     * Position the mention dropdown near the textarea
+     * Uses viewport-relative positioning (fixed) to avoid clipping by parent containers
+     */
+    private positionMentionDropdown;
+    /**
+     * Insert selected mention into text
+     */
+    onMentionSelected(suggestion: MentionSuggestion): void;
+    /**
+     * Close mention dropdown
+     */
+    closeMentionDropdown(): void;
+    /**
+     * Focus the input
+     */
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageInputBoxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageInputBoxComponent, "mj-message-input-box", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; }; "enableMentions": { "alias": "enableMentions"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, { "textSubmitted": "textSubmitted"; "valueChange": "valueChange"; }, never, never, false, never>;
+}
+//# sourceMappingURL=message-input-box.component.d.ts.map

package/dist/lib/components/message/message-input-box.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-input-box.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/message/message-input-box.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAa,UAAU,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAChI,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;;AAE5G;;;;;;;;;;;;;GAaG;AACH,qBAKa,wBAAyB,YAAW,MAAM,EAAE,aAAa,EAAE,SAAS;IAuB7E,OAAO,CAAC,mBAAmB;IAtBpB,WAAW,EAAE,MAAM,CAAsD;IACzE,QAAQ,EAAE,OAAO,CAAS;IAC1B,KAAK,EAAE,MAAM,CAAM;IACnB,kBAAkB,EAAE,OAAO,CAAS;IACpC,cAAc,EAAE,OAAO,CAAQ;IAC/B,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,IAAI,EAAE,MAAM,CAAK;IAEhB,aAAa,uBAA8B;IAC3C,WAAW,uBAA8B;IAErB,eAAe,CAAC,EAAE,UAAU,CAAC;IAGpD,mBAAmB,EAAE,OAAO,CAAS;IACrC,kBAAkB,EAAE,iBAAiB,EAAE,CAAM;IAC7C,uBAAuB,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAuB;IAC7E,wBAAwB,EAAE,OAAO,CAAS;IACjD,OAAO,CAAC,iBAAiB,CAAc;IACvC,OAAO,CAAC,YAAY,CAAc;gBAGxB,mBAAmB,EAAE,0BAA0B;IAGnD,QAAQ;IASd,eAAe;IAOf,WAAW;IAIX,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAerC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAa3B,WAAW,IAAI,IAAI;IAWnB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA+C1B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IA+B/B;;OAEG;IACH,iBAAiB,CAAC,UAAU,EAAE,iBAAiB,GAAG,IAAI;IAsBtD;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAO5B;;OAEG;IACI,KAAK,IAAI,IAAI;yCApNT,wBAAwB;2CAAxB,wBAAwB;CAuNpC"}

package/dist/lib/components/message/message-input-box.component.js

@@ -0,0 +1,267 @@
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/mention-autocomplete.service";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "../mention/mention-dropdown.component";
+const _c0 = ["messageTextarea"];
+function MessageInputBoxComponent_mj_mention_dropdown_6_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-mention-dropdown", 7);
+    i0.ɵɵlistener("suggestionSelected", function MessageInputBoxComponent_mj_mention_dropdown_6_Template_mj_mention_dropdown_suggestionSelected_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onMentionSelected($event)); })("closed", function MessageInputBoxComponent_mj_mention_dropdown_6_Template_mj_mention_dropdown_closed_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeMentionDropdown()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("suggestions", ctx_r2.mentionSuggestions)("position", ctx_r2.mentionDropdownPosition)("showAbove", ctx_r2.mentionDropdownShowAbove)("useFixedPositioning", true)("visible", true);
+} }
+/**
+ * Reusable message input box component (presentational)
+ * Handles:
+ * - Text input with keyboard shortcuts
+ * - @mention autocomplete (optional)
+ * - Send button
+ * - Character count (optional)
+ *
+ * Does NOT handle:
+ * - Saving messages to database
+ * - Agent invocation
+ * - Artifact creation
+ * - Conversation management
+ */
+export class MessageInputBoxComponent {
+    mentionAutocomplete;
+    placeholder = 'Type your message to start a new conversation...';
+    disabled = false;
+    value = '';
+    showCharacterCount = false;
+    enableMentions = true;
+    currentUser;
+    rows = 3;
+    textSubmitted = new EventEmitter();
+    valueChange = new EventEmitter();
+    messageTextarea;
+    // Mention autocomplete state
+    showMentionDropdown = false;
+    mentionSuggestions = [];
+    mentionDropdownPosition = { top: 0, left: 0 };
+    mentionDropdownShowAbove = false;
+    mentionStartIndex = -1;
+    mentionQuery = '';
+    constructor(mentionAutocomplete) {
+        this.mentionAutocomplete = mentionAutocomplete;
+    }
+    async ngOnInit() {
+        // Initialize mention autocomplete if enabled and currentUser is available
+        console.log('[MessageInputBox] ngOnInit - enableMentions:', this.enableMentions, 'currentUser:', !!this.currentUser);
+        if (this.enableMentions && this.currentUser) {
+            await this.mentionAutocomplete.initialize(this.currentUser);
+            console.log('[MessageInputBox] Mention autocomplete initialized');
+        }
+    }
+    ngAfterViewInit() {
+        // Auto-focus the textarea
+        setTimeout(() => {
+            this.messageTextarea?.nativeElement?.focus();
+        }, 100);
+    }
+    ngOnDestroy() {
+        // Cleanup if needed
+    }
+    get canSend() {
+        return !this.disabled && this.value.trim().length > 0;
+    }
+    onKeyDown(event) {
+        // Handle mention dropdown navigation
+        if (this.showMentionDropdown) {
+            // Implement arrow key navigation if needed in future
+            // For now, just let the dropdown handle it
+        }
+        // Enter alone: Send message
+        if (event.key === 'Enter' && !event.shiftKey && !this.showMentionDropdown) {
+            event.preventDefault();
+            this.onSendClick();
+        }
+        // Shift+Enter: Allow default behavior (add newline)
+    }
+    onInput(event) {
+        const textarea = event.target;
+        this.value = textarea.value;
+        this.valueChange.emit(this.value);
+        console.log('[MessageInputBox] onInput - value:', this.value, 'enableMentions:', this.enableMentions, 'currentUser:', !!this.currentUser);
+        // Handle @mention autocomplete
+        if (this.enableMentions && this.currentUser) {
+            this.handleMentionInput();
+        }
+    }
+    onSendClick() {
+        if (this.canSend) {
+            const textToSend = this.value.trim();
+            console.log('[MessageInputBox] onSendClick - emitting text:', textToSend);
+            this.textSubmitted.emit(textToSend);
+            this.value = ''; // Clear input after sending
+            this.valueChange.emit(this.value);
+            this.closeMentionDropdown();
+        }
+    }
+    /**
+     * Handle @mention autocomplete
+     */
+    handleMentionInput() {
+        const textarea = this.messageTextarea?.nativeElement;
+        if (!textarea) {
+            console.log('[MessageInputBox] No textarea element');
+            return;
+        }
+        const cursorPos = textarea.selectionStart;
+        const textBeforeCursor = this.value.substring(0, cursorPos);
+        console.log('[MessageInputBox] handleMentionInput - textBeforeCursor:', textBeforeCursor);
+        // Find the last @ before cursor
+        const lastAtIndex = textBeforeCursor.lastIndexOf('@');
+        if (lastAtIndex === -1) {
+            this.closeMentionDropdown();
+            return;
+        }
+        // Check if there's a space between @ and cursor (means mention was completed)
+        const textAfterAt = textBeforeCursor.substring(lastAtIndex + 1);
+        if (textAfterAt.includes(' ')) {
+            this.closeMentionDropdown();
+            return;
+        }
+        // Extract query
+        this.mentionQuery = textAfterAt;
+        this.mentionStartIndex = lastAtIndex;
+        console.log('[MessageInputBox] Mention detected - query:', this.mentionQuery);
+        // Get suggestions (include users if we have currentUser)
+        this.mentionSuggestions = this.mentionAutocomplete.getSuggestions(this.mentionQuery, !!this.currentUser);
+        console.log('[MessageInputBox] Got suggestions:', this.mentionSuggestions.length, this.mentionSuggestions);
+        if (this.mentionSuggestions.length > 0) {
+            this.showMentionDropdown = true;
+            this.positionMentionDropdown();
+            console.log('[MessageInputBox] Showing dropdown at position:', this.mentionDropdownPosition);
+        }
+        else {
+            this.closeMentionDropdown();
+        }
+    }
+    /**
+     * Position the mention dropdown near the textarea
+     * Uses viewport-relative positioning (fixed) to avoid clipping by parent containers
+     */
+    positionMentionDropdown() {
+        const textarea = this.messageTextarea?.nativeElement;
+        if (!textarea)
+            return;
+        const textareaRect = textarea.getBoundingClientRect();
+        // Check if there's enough space below the textarea
+        const spaceBelow = window.innerHeight - textareaRect.bottom;
+        const spaceAbove = textareaRect.top;
+        const dropdownHeight = Math.min(this.mentionSuggestions.length * 48, 240);
+        this.mentionDropdownShowAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
+        // Use viewport-relative coordinates (dropdown will be positioned fixed to viewport)
+        if (this.mentionDropdownShowAbove) {
+            // Show above the textarea - anchor to top of textarea
+            this.mentionDropdownPosition = {
+                top: textareaRect.top + window.scrollY - 4,
+                left: textareaRect.left + window.scrollX
+            };
+        }
+        else {
+            // Show below the textarea (default) - anchor to bottom of textarea
+            this.mentionDropdownPosition = {
+                top: textareaRect.bottom + window.scrollY + 4,
+                left: textareaRect.left + window.scrollX
+            };
+        }
+        console.log('[MessageInputBox] Dropdown position calculated (viewport coords):', this.mentionDropdownPosition, 'showAbove:', this.mentionDropdownShowAbove);
+    }
+    /**
+     * Insert selected mention into text
+     */
+    onMentionSelected(suggestion) {
+        const textarea = this.messageTextarea?.nativeElement;
+        if (!textarea)
+            return;
+        const beforeMention = this.value.substring(0, this.mentionStartIndex);
+        const afterCursor = this.value.substring(textarea.selectionStart);
+        // Insert mention with @ prefix and space after
+        this.value = `${beforeMention}@${suggestion.name} ${afterCursor}`;
+        this.valueChange.emit(this.value);
+        // Close dropdown
+        this.closeMentionDropdown();
+        // Restore focus and set cursor position
+        setTimeout(() => {
+            const newCursorPos = this.mentionStartIndex + suggestion.name.length + 2; // +2 for @ and space
+            textarea.focus();
+            textarea.setSelectionRange(newCursorPos, newCursorPos);
+        }, 0);
+    }
+    /**
+     * Close mention dropdown
+     */
+    closeMentionDropdown() {
+        this.showMentionDropdown = false;
+        this.mentionSuggestions = [];
+        this.mentionStartIndex = -1;
+        this.mentionQuery = '';
+    }
+    /**
+     * Focus the input
+     */
+    focus() {
+        this.messageTextarea?.nativeElement?.focus();
+    }
+    static ɵfac = function MessageInputBoxComponent_Factory(t) { return new (t || MessageInputBoxComponent)(i0.ɵɵdirectiveInject(i1.MentionAutocompleteService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MessageInputBoxComponent, selectors: [["mj-message-input-box"]], viewQuery: function MessageInputBoxComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messageTextarea = _t.first);
+        } }, inputs: { placeholder: "placeholder", disabled: "disabled", value: "value", showCharacterCount: "showCharacterCount", enableMentions: "enableMentions", currentUser: "currentUser", rows: "rows" }, outputs: { textSubmitted: "textSubmitted", valueChange: "valueChange" }, decls: 7, vars: 6, consts: [["messageTextarea", ""], [1, "message-input-box-container"], [1, "input-wrapper"], [1, "message-input-box-textarea", 3, "ngModelChange", "keydown", "input", "ngModel", "disabled", "placeholder", "rows"], ["title", "Send message (Enter)", 1, "send-button-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-paper-plane"], [3, "suggestions", "position", "showAbove", "useFixedPositioning", "visible", "suggestionSelected", "closed", 4, "ngIf"], [3, "suggestionSelected", "closed", "suggestions", "position", "showAbove", "useFixedPositioning", "visible"]], template: function MessageInputBoxComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "textarea", 3, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function MessageInputBoxComponent_Template_textarea_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.value, $event) || (ctx.value = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("keydown", function MessageInputBoxComponent_Template_textarea_keydown_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); })("input", function MessageInputBoxComponent_Template_textarea_input_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInput($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "button", 4);
+            i0.ɵɵlistener("click", function MessageInputBoxComponent_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSendClick()); });
+            i0.ɵɵelement(5, "i", 5);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(6, MessageInputBoxComponent_mj_mention_dropdown_6_Template, 1, 5, "mj-mention-dropdown", 6);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.value);
+            i0.ɵɵproperty("disabled", ctx.disabled)("placeholder", ctx.placeholder)("rows", ctx.rows);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", !ctx.canSend);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.showMentionDropdown && ctx.enableMentions);
+        } }, dependencies: [i2.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.MentionDropdownComponent], styles: [".message-input-box-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 2px solid var(--border-color, #e0e0e0);\n  border-radius: 12px;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);\n  transition: all 0.2s ease;\n  overflow: visible; // Allow mention dropdown to escape container\n  position: relative;\n\n  &:focus-within {\n    border-color: var(--primary-color, #007bff);\n    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.15);\n  }\n}\n\n.input-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-end; // Align send button to bottom\n}\n\n.message-input-box-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem; // Space for send button\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n\n  &::placeholder {\n    color: var(--text-tertiary, #999);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background: var(--background-disabled, #f5f5f5);\n  }\n\n  &:focus,\n  &:active,\n  &:focus-visible {\n    border: 0 !important;\n    outline: 0 !important;\n    box-shadow: none !important;\n  }\n}\n\n.send-button-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n\n  i {\n    font-size: 1rem;\n  }\n\n  &:hover:not(:disabled) {\n    background: var(--primary-color-dark, #0056b3);\n    transform: scale(1.05);\n  }\n\n  &:active:not(:disabled) {\n    transform: scale(0.95);\n  }\n\n  &:disabled {\n    background: var(--background-disabled, #d0d0d0);\n    color: var(--text-disabled, #999);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageInputBoxComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-message-input-box', template: "<div class=\"message-input-box-container\">\n  <div class=\"input-wrapper\">\n    <textarea\n      #messageTextarea\n      class=\"message-input-box-textarea\"\n      [(ngModel)]=\"value\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [rows]=\"rows\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n    ></textarea>\n\n    <!-- Send Button (Icon Only) - Inside textarea area -->\n    <button\n      class=\"send-button-icon\"\n      [disabled]=\"!canSend\"\n      (click)=\"onSendClick()\"\n      title=\"Send message (Enter)\"\n    >\n      <i class=\"fa-solid fa-paper-plane\"></i>\n    </button>\n  </div>\n\n  <!-- Mention Dropdown -->\n  <mj-mention-dropdown\n    *ngIf=\"showMentionDropdown && enableMentions\"\n    [suggestions]=\"mentionSuggestions\"\n    [position]=\"mentionDropdownPosition\"\n    [showAbove]=\"mentionDropdownShowAbove\"\n    [useFixedPositioning]=\"true\"\n    [visible]=\"true\"\n    (suggestionSelected)=\"onMentionSelected($event)\"\n    (closed)=\"closeMentionDropdown()\">\n  </mj-mention-dropdown>\n</div>\n", styles: [".message-input-box-container {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 2px solid var(--border-color, #e0e0e0);\n  border-radius: 12px;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);\n  transition: all 0.2s ease;\n  overflow: visible; // Allow mention dropdown to escape container\n  position: relative;\n\n  &:focus-within {\n    border-color: var(--primary-color, #007bff);\n    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.15);\n  }\n}\n\n.input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: flex-end; // Align send button to bottom\n}\n\n.message-input-box-textarea {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem; // Space for send button\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n\n  &::placeholder {\n    color: var(--text-tertiary, #999);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background: var(--background-disabled, #f5f5f5);\n  }\n\n  &:focus,\n  &:active,\n  &:focus-visible {\n    border: 0 !important;\n    outline: 0 !important;\n    box-shadow: none !important;\n  }\n}\n\n.send-button-icon {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n\n  i {\n    font-size: 1rem;\n  }\n\n  &:hover:not(:disabled) {\n    background: var(--primary-color-dark, #0056b3);\n    transform: scale(1.05);\n  }\n\n  &:active:not(:disabled) {\n    transform: scale(0.95);\n  }\n\n  &:disabled {\n    background: var(--background-disabled, #d0d0d0);\n    color: var(--text-disabled, #999);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}\n"] }]
+    }], () => [{ type: i1.MentionAutocompleteService }], { placeholder: [{
+            type: Input
+        }], disabled: [{
+            type: Input
+        }], value: [{
+            type: Input
+        }], showCharacterCount: [{
+            type: Input
+        }], enableMentions: [{
+            type: Input
+        }], currentUser: [{
+            type: Input
+        }], rows: [{
+            type: Input
+        }], textSubmitted: [{
+            type: Output
+        }], valueChange: [{
+            type: Output
+        }], messageTextarea: [{
+            type: ViewChild,
+            args: ['messageTextarea']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MessageInputBoxComponent, { className: "MessageInputBoxComponent", filePath: "src/lib/components/message/message-input-box.component.ts", lineNumber: 24 }); })();
+//# sourceMappingURL=message-input-box.component.js.map

package/dist/lib/components/message/message-input-box.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-input-box.component.js","sourceRoot":"","sources":["../../../../src/lib/components/message/message-input-box.component.ts","../../../../src/lib/components/message/message-input-box.component.html"],"names":[],"mappings":"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"}