@memberjunction/ng-conversations 2.113.1 → 2.114.0

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 (24) hide show
  1. package/dist/lib/components/conversation/conversation-chat-area.component.d.ts +7 -1
  2. package/dist/lib/components/conversation/conversation-chat-area.component.d.ts.map +1 -1
  3. package/dist/lib/components/conversation/conversation-chat-area.component.js +82 -29
  4. package/dist/lib/components/conversation/conversation-chat-area.component.js.map +1 -1
  5. package/dist/lib/components/conversation/conversation-empty-state.component.js +2 -2
  6. package/dist/lib/components/conversation/conversation-list.component.js +1 -1
  7. package/dist/lib/components/conversation/conversation-list.component.js.map +1 -1
  8. package/dist/lib/components/message/message-input-box.component.js +2 -2
  9. package/dist/lib/components/message/message-input.component.d.ts +7 -1
  10. package/dist/lib/components/message/message-input.component.d.ts.map +1 -1
  11. package/dist/lib/components/message/message-input.component.js +124 -36
  12. package/dist/lib/components/message/message-input.component.js.map +1 -1
  13. package/dist/lib/components/message/message-item.component.js +2 -2
  14. package/dist/lib/components/navigation/conversation-navigation.component.d.ts.map +1 -1
  15. package/dist/lib/components/navigation/conversation-navigation.component.js +3 -3
  16. package/dist/lib/components/navigation/conversation-navigation.component.js.map +1 -1
  17. package/dist/lib/components/tasks/tasks-dropdown.component.d.ts.map +1 -1
  18. package/dist/lib/components/tasks/tasks-dropdown.component.js +3 -3
  19. package/dist/lib/components/tasks/tasks-dropdown.component.js.map +1 -1
  20. package/dist/lib/components/workspace/conversation-workspace.component.d.ts +11 -0
  21. package/dist/lib/components/workspace/conversation-workspace.component.d.ts.map +1 -1
  22. package/dist/lib/components/workspace/conversation-workspace.component.js +134 -46
  23. package/dist/lib/components/workspace/conversation-workspace.component.js.map +1 -1
  24. package/package.json +14 -14
package/dist/lib/components/message/message-item.component.js CHANGED
@@ -1167,11 +1167,11 @@ export class MessageItemComponent extends BaseAngularComponent {
1167
1167
  i0.ɵɵconditional(ctx.messageStatus === "Error" && ctx.isAIMessage && !ctx.isProcessing && !ctx.isEditing ? 22 : -1);
1168
1168
  i0.ɵɵadvance();
1169
1169
  i0.ɵɵproperty("ngIf", !ctx.isProcessing && !ctx.isInProgressAIMessage && !ctx.isEditing);
1170
- } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, i5.ArtifactMessageCardComponent, i6.MarkdownComponent, i7.SuggestedResponsesComponent, i8.ConversationMessageRatingComponent, i9.TaskWidgetComponent, i3.DatePipe], styles: [".message-item[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 8px 24px;\n transition: background-color 150ms ease;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n position: relative;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.message-item.ai-message[_ngcontent-%COMP%] {\n background-color: transparent;\n}\n\n.message-item.user-message[_ngcontent-%COMP%] {\n background-color: transparent;\n}\n\n.message-item.pinned[_ngcontent-%COMP%] {\n border-left: 3px solid #0076B6;\n background-color: rgba(0, 118, 182, 0.08);\n}\n\n.message-item.in-progress[_ngcontent-%COMP%] {\n background: linear-gradient(90deg,\n rgba(59, 130, 246, 0.08) 0%,\n rgba(59, 130, 246, 0.12) 50%,\n rgba(59, 130, 246, 0.08) 100%);\n background-size: 200% 100%;\n animation: _ngcontent-%COMP%_shimmer 2s ease-in-out infinite;\n border-left: 3px solid #3B82F6;\n position: relative;\n}\n\n@keyframes _ngcontent-%COMP%_shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n\n\n.message-item.in-progress[_ngcontent-%COMP%] .message-text[_ngcontent-%COMP%] {\n color: #1F2937;\n font-weight: 500;\n max-height: 150px;\n overflow-y: auto;\n display: block;\n}\n\n\n\n\n.message-item.in-progress[_ngcontent-%COMP%] .avatar-circle[_ngcontent-%COMP%] {\n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n }\n 50% {\n box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);\n }\n}\n\n.message-item[_ngcontent-%COMP%]:hover {\n background-color: rgba(0, 0, 0, 0.02);\n}\n\n\n\n[_nghost-%COMP%] .mention-badge {\n display: inline-block;\n padding: 2px 8px;\n margin: 0 2px;\n border-radius: 4px;\n font-weight: 500;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .mention-badge.agent {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n}\n\n[_nghost-%COMP%] .mention-badge.user {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n}\n\n[_nghost-%COMP%] .mention-badge:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.message-avatar[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n.avatar-circle[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n color: white;\n}\n\n\n\n.avatar-circle.user-avatar[_ngcontent-%COMP%] {\n border-radius: 50%;\n background-color: #333;\n}\n\n\n\n.avatar-circle.ai-avatar[_ngcontent-%COMP%] {\n border-radius: 8px;\n background-color: #9333EA; \n\n}\n\n\n\n.avatar-image[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n}\n\n\n\n.artifact-wrapper.system-artifact[_ngcontent-%COMP%] {\n opacity: 0.85;\n position: relative;\n}\n\n.artifact-wrapper.system-artifact[_ngcontent-%COMP%]::before {\n content: 'SYSTEM';\n position: absolute;\n top: 8px;\n right: 8px;\n font-size: 9px;\n font-weight: 600;\n color: #9CA3AF;\n background: #F3F4F6;\n padding: 2px 6px;\n border-radius: 3px;\n letter-spacing: 0.5px;\n z-index: 10;\n}\n\n.message-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n position: relative;\n}\n\n.message-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 4px;\n font-size: 13px;\n}\n\n.message-sender[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #333;\n}\n\n\n\n.agent-badge[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 10px;\n font-size: 11px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.message-time[_ngcontent-%COMP%] {\n color: #9CA3AF;\n font-size: 12px;\n font-weight: 400;\n}\n\n\n\n.time-pill[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 500;\n margin-left: auto;\n transition: all 0.3s ease;\n}\n\n.time-pill[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n.time-pill.complete[_ngcontent-%COMP%] {\n background: #E0F2FE;\n color: #0369A1;\n}\n\n\n\n.time-pill.in-progress[_ngcontent-%COMP%] {\n background: #F3E8FF;\n color: #7C3AED;\n}\n\n\n\n.time-pill.active[_ngcontent-%COMP%] {\n background: #E0E7FF;\n color: #4F46E5;\n}\n\n\n\n.time-pill.failed[_ngcontent-%COMP%] {\n background: #FEE2E2;\n color: #DC2626;\n}\n\n@keyframes _ngcontent-%COMP%_pillPulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.85;\n }\n}\n\n\n\n.generation-time[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n background: #E0F2FE;\n border-radius: 10px;\n font-size: 11px;\n color: #0369A1;\n font-weight: 500;\n margin-left: auto;\n}\n\n.generation-time[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n.message-elapsed[_ngcontent-%COMP%] {\n color: #AAA;\n font-size: 11px;\n font-style: italic;\n}\n\n.message-body[_ngcontent-%COMP%] {\n margin-bottom: 0;\n}\n\n.message-text[_ngcontent-%COMP%] {\n color: #333;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n\n\n.message-text[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:first-child {\n margin-top: 0;\n}\n\n.message-text[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n\n\n.message-item.user-message[_ngcontent-%COMP%] .message-content[_ngcontent-%COMP%] {\n border-radius: 12px 12px 12px 4px;\n}\n\n.message-item.ai-message[_ngcontent-%COMP%] .message-content[_ngcontent-%COMP%] {\n border-radius: 4px 12px 12px 12px;\n}\n\n\n\n.message-reactions[_ngcontent-%COMP%] {\n display: none; \n\n}\n\n\n\n.artifact-card[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 12px;\n padding: 16px;\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 8px;\n background: linear-gradient(135deg, #F8F7FF 0%, #F3F2FF 100%);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n max-width: 500px;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n position: relative;\n overflow: hidden;\n}\n\n.artifact-card[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(180deg, #8B5CF6 0%, #6366F1 100%);\n opacity: 1;\n}\n\n.artifact-card[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #F3F2FF 0%, #EBE9FF 100%);\n border-color: rgba(139, 92, 246, 0.3);\n box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);\n transform: translateY(-1px);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n}\n\n.artifact-card-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #8B5CF6;\n flex-shrink: 0;\n background: rgba(139, 92, 246, 0.1);\n border-radius: 6px;\n transition: all 0.2s ease;\n}\n\n.artifact-card[_ngcontent-%COMP%]:hover .artifact-card-icon[_ngcontent-%COMP%] {\n background: rgba(139, 92, 246, 0.15);\n transform: scale(1.05);\n}\n\n.artifact-card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n}\n\n.artifact-card-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.artifact-card-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #374151;\n letter-spacing: -0.01em;\n margin-bottom: 4px;\n}\n\n.artifact-card-description[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6B7280;\n line-height: 1.5;\n}\n\n.message-actions[_ngcontent-%COMP%] {\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: flex;\n gap: 2px;\n opacity: 0;\n transform: translateY(4px);\n transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);\n background: white;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n padding: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n pointer-events: none;\n}\n\n.message-item[_ngcontent-%COMP%]:hover .message-actions[_ngcontent-%COMP%] {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n.message-action-btn[_ngcontent-%COMP%] {\n padding: 6px 8px;\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n color: #6B7280;\n font-size: 13px;\n transition: all 150ms ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n height: 32px;\n}\n\n.message-action-btn[_ngcontent-%COMP%]:hover {\n background-color: #F3F4F6;\n color: #111827;\n}\n\n.message-action-btn.danger[_ngcontent-%COMP%]:hover {\n background-color: #FEE2E2;\n color: #DC2626;\n}\n\n.message-action-btn.retry-btn[_ngcontent-%COMP%] {\n color: #3B82F6;\n background: #EFF6FF;\n font-weight: 600;\n gap: 6px;\n padding: 6px 12px;\n min-width: auto;\n}\n\n.message-action-btn.retry-btn[_ngcontent-%COMP%]:hover {\n background-color: #DBEAFE;\n color: #2563EB;\n}\n\n\n\n.thread-indicator[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n margin-top: 8px;\n background: #EFF6FF;\n border: 1px solid #DBEAFE;\n border-radius: 16px;\n cursor: pointer;\n transition: all 150ms ease;\n font-size: 12px;\n color: #1E40AF;\n font-weight: 500;\n}\n\n.thread-indicator[_ngcontent-%COMP%]:hover {\n background: #DBEAFE;\n border-color: #93C5FD;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);\n}\n\n.thread-indicator[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.thread-count[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n\n\n\n.message-item.editing[_ngcontent-%COMP%] {\n background-color: rgba(255, 243, 205, 0.3);\n border-left: 3px solid #FFA726;\n}\n\n.message-edit-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.message-edit-textarea[_ngcontent-%COMP%] {\n width: 100%;\n padding: 12px;\n border: 1px solid #D9D9D9;\n border-radius: 6px;\n font-family: inherit;\n font-size: 14px;\n line-height: 1.6;\n resize: vertical;\n min-height: 80px;\n transition: border-color 150ms ease;\n}\n\n.message-edit-textarea[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #0076B6;\n box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\n}\n\n.edit-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.edit-action-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.edit-action-btn.save[_ngcontent-%COMP%] {\n background-color: #0076B6;\n color: white;\n}\n\n.edit-action-btn.save[_ngcontent-%COMP%]:hover {\n background-color: #005A8F;\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%] {\n background-color: #F4F4F4;\n color: #666;\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%]:hover {\n background-color: #E0E0E0;\n color: #333;\n}\n\n.edit-hint[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #AAA;\n font-style: italic;\n}\n\n.edited-badge[_ngcontent-%COMP%] {\n margin-left: 8px;\n font-size: 11px;\n color: #AAA;\n font-style: italic;\n font-weight: normal;\n}\n\n\n\n.message-status[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: #6B7280;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 4px;\n margin-left: 8px;\n animation: _ngcontent-%COMP%_statusPulse 2s ease-in-out infinite;\n}\n\n.message-status[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #0076B6;\n font-size: 11px;\n}\n\n.message-status.error[_ngcontent-%COMP%] {\n background: #FEE2E2;\n color: #DC2626;\n}\n\n.message-status.error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #DC2626;\n}\n\n.status-text[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n@keyframes _ngcontent-%COMP%_statusPulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n}\n\n\n\n\n\n\n\n\n.agent-run-icon[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n color: #9CA3AF;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n margin-left: 8px;\n}\n\n.agent-run-icon[_ngcontent-%COMP%] i.fa-cog[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n.agent-run-icon[_ngcontent-%COMP%]:hover {\n color: #6B7280;\n}\n\n.agent-run-icon.expanded[_ngcontent-%COMP%] {\n color: #9333EA;\n transform: scale(1.1);\n}\n\n@keyframes _ngcontent-%COMP%_rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n\n\n.agent-details-panel[_ngcontent-%COMP%] {\n margin-top: 12px;\n padding: 16px;\n background: #F9FAFB;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n animation: _ngcontent-%COMP%_slideDown 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\n\n.agent-details-loading[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #6B7280;\n font-size: 13px;\n}\n\n.agent-details-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #9333EA;\n}\n\n\n\n.agent-details-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #DC2626;\n font-size: 13px;\n}\n\n.agent-details-error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #DC2626;\n}\n\n\n\n.agent-details-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n padding-bottom: 8px;\n border-bottom: 1px solid #E5E7EB;\n font-weight: 600;\n font-size: 13px;\n color: #374151;\n}\n\n.agent-details-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #9333EA;\n}\n\n.agent-name-link[_ngcontent-%COMP%] {\n color: #9333EA;\n cursor: pointer;\n text-decoration: none;\n font-weight: 600;\n transition: all 0.2s ease;\n}\n\n.agent-name-link[_ngcontent-%COMP%]:hover {\n color: #7C3AED;\n text-decoration: underline;\n}\n\n\n\n.agent-details-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n margin-bottom: 12px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 8px 12px;\n background: white;\n border-radius: 6px;\n border: 1px solid #E5E7EB;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #111827;\n font-weight: 600;\n font-family: 'Monaco', 'Menlo', 'Consolas', monospace;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n padding: 3px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n background: #FEF3C7;\n color: #92400E;\n}\n\n.status-badge.status-running[_ngcontent-%COMP%] {\n background: #DBEAFE;\n color: #1E40AF;\n}\n\n.status-badge.status-complete[_ngcontent-%COMP%] {\n background: #D1FAE5;\n color: #065F46;\n}\n\n.status-badge.status-failed[_ngcontent-%COMP%], \n.status-badge.status-error[_ngcontent-%COMP%] {\n background: #FEE2E2;\n color: #991B1B;\n}\n\n.status-badge.status-cancelled[_ngcontent-%COMP%] {\n background: #F3F4F6;\n color: #4B5563;\n}\n\n\n\n.run-id-link[_ngcontent-%COMP%] {\n color: #3B82F6;\n cursor: pointer;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n transition: all 0.2s ease;\n}\n\n.run-id-link[_ngcontent-%COMP%]:hover {\n color: #2563EB;\n text-decoration: underline;\n}\n\n.run-id-link[_ngcontent-%COMP%] i.fa-external-link-alt[_ngcontent-%COMP%] {\n font-size: 10px;\n opacity: 0.7;\n}\n\n\n\n.agent-details-tasks[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #E5E7EB;\n}\n\n.tasks-section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-weight: 600;\n font-size: 12px;\n color: #374151;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.tasks-section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3B82F6;\n font-size: 11px;\n}\n\n.tasks-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.tasks-list[_ngcontent-%COMP%] mj-task-widget[_ngcontent-%COMP%] {\n display: block;\n}\n\n\n\n.artifact-version-badge[_ngcontent-%COMP%] {\n display: inline-block;\n margin-left: 8px;\n padding: 2px 8px;\n background: #EEF2FF;\n color: #4F46E5;\n font-size: 11px;\n font-weight: 600;\n font-family: monospace;\n border-radius: 4px;\n vertical-align: middle;\n}\n\n\n.message-action-bar[_ngcontent-%COMP%] {\n margin-top: 12px;\n margin-bottom: 8px;\n background: #F9FAFB;\n border: 1px solid #D1D5DB;\n border-radius: 8px;\n padding: 12px;\n}\n\n.action-bar-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n margin-left: 16px;\n padding-left: 16px;\n border-left: 1px solid #E5E7EB;\n}\n\n.action-bar-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 6px 10px;\n background: white;\n border: 1px solid #9CA3AF;\n border-radius: 6px;\n font-size: 16px;\n line-height: 1;\n color: #6B7280;\n cursor: pointer;\n transition: all 0.2s;\n min-width: 36px;\n height: 32px;\n opacity: 0.6;\n}\n\n.action-bar-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n line-height: 1;\n}\n\n.action-bar-btn[_ngcontent-%COMP%]:hover {\n opacity: 1;\n border-color: #6B7280;\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%] {\n color: #DC2626;\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%]:hover {\n opacity: 1;\n background: #FEF2F2;\n border-color: #DC2626;\n}\n\n.action-bar-btn[_ngcontent-%COMP%] i.pinned[_ngcontent-%COMP%] {\n color: #3B82F6;\n}\n\n\n\n.agent-run-icon[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.rating-badge[_ngcontent-%COMP%] {\n position: absolute;\n top: -6px;\n right: -6px;\n background: #3B82F6;\n color: white;\n font-size: 10px;\n font-weight: 600;\n padding: 2px 5px;\n border-radius: 10px;\n min-width: 16px;\n text-align: center;\n line-height: 1;\n}\n\n\n\n.message-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid #F3F4F6;\n}\n\n.rating-counts[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: #6B7280;\n}\n\n.rating-count[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.rating-count.thumbs-up[_ngcontent-%COMP%] {\n color: #16A34A;\n}\n\n.rating-count.thumbs-down[_ngcontent-%COMP%] {\n color: #DC2626;\n}\n\n.rating-total[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #9CA3AF;\n}\n\n.inline-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n align-items: center;\n}\n\n\n\n.agent-details-section[_ngcontent-%COMP%] {\n margin-top: 8px;\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"] });
1170
+ } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, i5.ArtifactMessageCardComponent, i6.MarkdownComponent, i7.SuggestedResponsesComponent, i8.ConversationMessageRatingComponent, i9.TaskWidgetComponent, i3.DatePipe], styles: [".message-item[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 8px 24px;\n transition: background-color 150ms ease;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n position: relative;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.message-item.ai-message[_ngcontent-%COMP%] {\n background-color: transparent;\n}\n\n.message-item.user-message[_ngcontent-%COMP%] {\n background-color: transparent;\n}\n\n.message-item.pinned[_ngcontent-%COMP%] {\n border-left: 3px solid #0076B6;\n background-color: rgba(0, 118, 182, 0.08);\n}\n\n.message-item.in-progress[_ngcontent-%COMP%] {\n background: linear-gradient(90deg,\n rgba(59, 130, 246, 0.08) 0%,\n rgba(59, 130, 246, 0.12) 50%,\n rgba(59, 130, 246, 0.08) 100%);\n background-size: 200% 100%;\n animation: _ngcontent-%COMP%_shimmer 2s ease-in-out infinite;\n border-left: 3px solid #3B82F6;\n position: relative;\n}\n\n@keyframes _ngcontent-%COMP%_shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n\n\n.message-item.in-progress[_ngcontent-%COMP%] .message-text[_ngcontent-%COMP%] {\n color: #1F2937;\n font-weight: 500;\n max-height: 150px;\n overflow-y: auto;\n display: block;\n}\n\n\n\n\n.message-item.in-progress[_ngcontent-%COMP%] .avatar-circle[_ngcontent-%COMP%] {\n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n }\n 50% {\n box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);\n }\n}\n\n.message-item[_ngcontent-%COMP%]:hover {\n background-color: rgba(0, 0, 0, 0.02);\n}\n\n\n\n[_nghost-%COMP%] .mention-badge {\n display: inline-block;\n padding: 2px 8px;\n margin: 0 2px;\n border-radius: 4px;\n font-weight: 500;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%] .mention-badge.agent {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n}\n\n[_nghost-%COMP%] .mention-badge.user {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n}\n\n[_nghost-%COMP%] .mention-badge:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.message-avatar[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n.avatar-circle[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n color: white;\n}\n\n\n\n.avatar-circle.user-avatar[_ngcontent-%COMP%] {\n border-radius: 50%;\n background-color: #333;\n}\n\n\n\n.avatar-circle.ai-avatar[_ngcontent-%COMP%] {\n border-radius: 8px;\n background-color: #9333EA; \n\n}\n\n\n\n.avatar-image[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n}\n\n\n\n.artifact-wrapper.system-artifact[_ngcontent-%COMP%] {\n opacity: 0.85;\n position: relative;\n}\n\n.artifact-wrapper.system-artifact[_ngcontent-%COMP%]::before {\n content: 'SYSTEM';\n position: absolute;\n top: 8px;\n right: 8px;\n font-size: 9px;\n font-weight: 600;\n color: #9CA3AF;\n background: #F3F4F6;\n padding: 2px 6px;\n border-radius: 3px;\n letter-spacing: 0.5px;\n z-index: 10;\n}\n\n.message-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n position: relative;\n}\n\n.message-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 4px;\n font-size: 13px;\n}\n\n.message-sender[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #333;\n}\n\n\n\n.agent-badge[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 10px;\n font-size: 11px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.message-time[_ngcontent-%COMP%] {\n color: #9CA3AF;\n font-size: 12px;\n font-weight: 400;\n}\n\n\n\n.time-pill[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 500;\n margin-left: auto;\n transition: all 0.3s ease;\n}\n\n.time-pill[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n.time-pill.complete[_ngcontent-%COMP%] {\n background: #E0F2FE;\n color: #0369A1;\n}\n\n\n\n.time-pill.in-progress[_ngcontent-%COMP%] {\n background: #F3E8FF;\n color: #7C3AED;\n}\n\n\n\n.time-pill.active[_ngcontent-%COMP%] {\n background: #E0E7FF;\n color: #4F46E5;\n}\n\n\n\n.time-pill.failed[_ngcontent-%COMP%] {\n background: #FEE2E2;\n color: #DC2626;\n}\n\n@keyframes _ngcontent-%COMP%_pillPulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.85;\n }\n}\n\n\n\n.generation-time[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n background: #E0F2FE;\n border-radius: 10px;\n font-size: 11px;\n color: #0369A1;\n font-weight: 500;\n margin-left: auto;\n}\n\n.generation-time[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n.message-elapsed[_ngcontent-%COMP%] {\n color: #AAA;\n font-size: 11px;\n font-style: italic;\n}\n\n.message-body[_ngcontent-%COMP%] {\n margin-bottom: 0;\n}\n\n.message-text[_ngcontent-%COMP%] {\n color: #333;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n\n\n.message-text[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:first-child {\n margin-top: 0;\n}\n\n.message-text[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n\n\n.message-item.user-message[_ngcontent-%COMP%] .message-content[_ngcontent-%COMP%] {\n border-radius: 12px 12px 12px 4px;\n}\n\n.message-item.ai-message[_ngcontent-%COMP%] .message-content[_ngcontent-%COMP%] {\n border-radius: 4px 12px 12px 12px;\n}\n\n\n\n.message-reactions[_ngcontent-%COMP%] {\n display: none; \n\n}\n\n\n\n.artifact-card[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 12px;\n padding: 16px;\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 8px;\n background: linear-gradient(135deg, #F8F7FF 0%, #F3F2FF 100%);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n max-width: 500px;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n position: relative;\n overflow: hidden;\n}\n\n.artifact-card[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(180deg, #8B5CF6 0%, #6366F1 100%);\n opacity: 1;\n}\n\n.artifact-card[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #F3F2FF 0%, #EBE9FF 100%);\n border-color: rgba(139, 92, 246, 0.3);\n box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);\n transform: translateY(-1px);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n}\n\n.artifact-card-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #8B5CF6;\n flex-shrink: 0;\n background: rgba(139, 92, 246, 0.1);\n border-radius: 6px;\n transition: all 0.2s ease;\n}\n\n.artifact-card[_ngcontent-%COMP%]:hover .artifact-card-icon[_ngcontent-%COMP%] {\n background: rgba(139, 92, 246, 0.15);\n transform: scale(1.05);\n}\n\n.artifact-card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n}\n\n.artifact-card-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.artifact-card-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #374151;\n letter-spacing: -0.01em;\n margin-bottom: 4px;\n}\n\n.artifact-card-description[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6B7280;\n line-height: 1.5;\n}\n\n.message-actions[_ngcontent-%COMP%] {\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: flex;\n gap: 2px;\n opacity: 0;\n transform: translateY(4px);\n transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);\n background: white;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n padding: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n pointer-events: none;\n}\n\n.message-item[_ngcontent-%COMP%]:hover .message-actions[_ngcontent-%COMP%] {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n.message-action-btn[_ngcontent-%COMP%] {\n padding: 6px 8px;\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n color: #6B7280;\n font-size: 13px;\n transition: all 150ms ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n height: 32px;\n}\n\n.message-action-btn[_ngcontent-%COMP%]:hover {\n background-color: #F3F4F6;\n color: #111827;\n}\n\n.message-action-btn.danger[_ngcontent-%COMP%]:hover {\n background-color: #FEE2E2;\n color: #DC2626;\n}\n\n.message-action-btn.retry-btn[_ngcontent-%COMP%] {\n color: #3B82F6;\n background: #EFF6FF;\n font-weight: 600;\n gap: 6px;\n padding: 6px 12px;\n min-width: auto;\n}\n\n.message-action-btn.retry-btn[_ngcontent-%COMP%]:hover {\n background-color: #DBEAFE;\n color: #2563EB;\n}\n\n\n\n.thread-indicator[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n margin-top: 8px;\n background: #EFF6FF;\n border: 1px solid #DBEAFE;\n border-radius: 16px;\n cursor: pointer;\n transition: all 150ms ease;\n font-size: 12px;\n color: #1E40AF;\n font-weight: 500;\n}\n\n.thread-indicator[_ngcontent-%COMP%]:hover {\n background: #DBEAFE;\n border-color: #93C5FD;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);\n}\n\n.thread-indicator[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.thread-count[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n\n\n\n.message-item.editing[_ngcontent-%COMP%] {\n background-color: rgba(255, 243, 205, 0.3);\n border-left: 3px solid #FFA726;\n}\n\n.message-edit-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.message-edit-textarea[_ngcontent-%COMP%] {\n width: 100%;\n padding: 12px;\n border: 1px solid #D9D9D9;\n border-radius: 6px;\n font-family: inherit;\n font-size: 14px;\n line-height: 1.6;\n resize: vertical;\n min-height: 80px;\n transition: border-color 150ms ease;\n}\n\n.message-edit-textarea[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #0076B6;\n box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\n}\n\n.edit-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.edit-action-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.edit-action-btn.save[_ngcontent-%COMP%] {\n background-color: #0076B6;\n color: white;\n}\n\n.edit-action-btn.save[_ngcontent-%COMP%]:hover {\n background-color: #005A8F;\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%] {\n background-color: #F4F4F4;\n color: #666;\n}\n\n.edit-action-btn.cancel[_ngcontent-%COMP%]:hover {\n background-color: #E0E0E0;\n color: #333;\n}\n\n.edit-hint[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #AAA;\n font-style: italic;\n}\n\n.edited-badge[_ngcontent-%COMP%] {\n margin-left: 8px;\n font-size: 11px;\n color: #AAA;\n font-style: italic;\n font-weight: normal;\n}\n\n\n\n.message-action-bar[_ngcontent-%COMP%] {\n margin-top: 12px;\n margin-bottom: 8px;\n background: #F9FAFB;\n border: 1px solid #D1D5DB;\n border-radius: 8px;\n padding: 12px;\n}\n\n.action-bar-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n margin-left: 16px;\n padding-left: 16px;\n border-left: 1px solid #E5E7EB;\n}\n\n.action-bar-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 6px 10px;\n background: white;\n border: 1px solid #9CA3AF;\n border-radius: 6px;\n font-size: 16px;\n line-height: 1;\n color: #6B7280;\n cursor: pointer;\n transition: all 0.2s;\n min-width: 36px;\n height: 32px;\n opacity: 0.6;\n}\n\n.action-bar-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n line-height: 1;\n}\n\n.action-bar-btn[_ngcontent-%COMP%]:hover {\n opacity: 1;\n border-color: #6B7280;\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%] {\n color: #DC2626;\n}\n\n.action-bar-btn.danger[_ngcontent-%COMP%]:hover {\n opacity: 1;\n background: #FEF2F2;\n border-color: #DC2626;\n}\n\n.action-bar-btn[_ngcontent-%COMP%] i.pinned[_ngcontent-%COMP%] {\n color: #3B82F6;\n}\n\n\n\n.message-status[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: #6B7280;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 4px;\n margin-left: 8px;\n animation: _ngcontent-%COMP%_statusPulse 2s ease-in-out infinite;\n}\n\n.message-status[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #0076B6;\n font-size: 11px;\n}\n\n.message-status.error[_ngcontent-%COMP%] {\n background: #FEE2E2;\n color: #DC2626;\n}\n\n.message-status.error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #DC2626;\n}\n\n.status-text[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n@keyframes _ngcontent-%COMP%_statusPulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n}\n\n\n\n\n\n\n\n\n.agent-run-icon[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n color: #9CA3AF;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n margin-left: 8px;\n}\n\n.agent-run-icon[_ngcontent-%COMP%] i.fa-cog[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n.agent-run-icon[_ngcontent-%COMP%]:hover {\n color: #6B7280;\n}\n\n.agent-run-icon.expanded[_ngcontent-%COMP%] {\n color: #9333EA;\n transform: scale(1.1);\n}\n\n@keyframes _ngcontent-%COMP%_rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n\n\n.agent-details-panel[_ngcontent-%COMP%] {\n margin-top: 12px;\n padding: 16px;\n background: #F9FAFB;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n animation: _ngcontent-%COMP%_slideDown 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\n\n.agent-details-loading[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #6B7280;\n font-size: 13px;\n}\n\n.agent-details-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #9333EA;\n}\n\n\n\n.agent-details-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #DC2626;\n font-size: 13px;\n}\n\n.agent-details-error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #DC2626;\n}\n\n\n\n.agent-details-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n padding-bottom: 8px;\n border-bottom: 1px solid #E5E7EB;\n font-weight: 600;\n font-size: 13px;\n color: #374151;\n}\n\n.agent-details-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #9333EA;\n}\n\n.agent-name-link[_ngcontent-%COMP%] {\n color: #9333EA;\n cursor: pointer;\n text-decoration: none;\n font-weight: 600;\n transition: all 0.2s ease;\n}\n\n.agent-name-link[_ngcontent-%COMP%]:hover {\n color: #7C3AED;\n text-decoration: underline;\n}\n\n\n\n.agent-details-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n margin-bottom: 12px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 8px 12px;\n background: white;\n border-radius: 6px;\n border: 1px solid #E5E7EB;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #111827;\n font-weight: 600;\n font-family: 'Monaco', 'Menlo', 'Consolas', monospace;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n padding: 3px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.status-pending[_ngcontent-%COMP%] {\n background: #FEF3C7;\n color: #92400E;\n}\n\n.status-badge.status-running[_ngcontent-%COMP%] {\n background: #DBEAFE;\n color: #1E40AF;\n}\n\n.status-badge.status-complete[_ngcontent-%COMP%] {\n background: #D1FAE5;\n color: #065F46;\n}\n\n.status-badge.status-failed[_ngcontent-%COMP%], \n.status-badge.status-error[_ngcontent-%COMP%] {\n background: #FEE2E2;\n color: #991B1B;\n}\n\n.status-badge.status-cancelled[_ngcontent-%COMP%] {\n background: #F3F4F6;\n color: #4B5563;\n}\n\n\n\n.run-id-link[_ngcontent-%COMP%] {\n color: #3B82F6;\n cursor: pointer;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n transition: all 0.2s ease;\n}\n\n.run-id-link[_ngcontent-%COMP%]:hover {\n color: #2563EB;\n text-decoration: underline;\n}\n\n.run-id-link[_ngcontent-%COMP%] i.fa-external-link-alt[_ngcontent-%COMP%] {\n font-size: 10px;\n opacity: 0.7;\n}\n\n\n\n.agent-details-tasks[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #E5E7EB;\n}\n\n.tasks-section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-weight: 600;\n font-size: 12px;\n color: #374151;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.tasks-section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3B82F6;\n font-size: 11px;\n}\n\n.tasks-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.tasks-list[_ngcontent-%COMP%] mj-task-widget[_ngcontent-%COMP%] {\n display: block;\n}\n\n\n\n.artifact-version-badge[_ngcontent-%COMP%] {\n display: inline-block;\n margin-left: 8px;\n padding: 2px 8px;\n background: #EEF2FF;\n color: #4F46E5;\n font-size: 11px;\n font-weight: 600;\n font-family: monospace;\n border-radius: 4px;\n vertical-align: middle;\n}\n\n\n\n.message-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid #F3F4F6;\n}\n\n.rating-counts[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: #6B7280;\n}\n\n.rating-count[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.rating-count.thumbs-up[_ngcontent-%COMP%] {\n color: #16A34A;\n}\n\n.rating-count.thumbs-down[_ngcontent-%COMP%] {\n color: #DC2626;\n}\n\n.rating-total[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #9CA3AF;\n}\n\n.inline-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n align-items: center;\n}\n\n\n\n.agent-details-section[_ngcontent-%COMP%] {\n margin-top: 8px;\n}\n\n\n\n@media (max-width: 768px) {\n .message-item[_ngcontent-%COMP%] {\n padding: 8px 12px;\n gap: 8px;\n }\n\n .avatar-circle[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n font-size: 14px;\n }\n\n .artifact-card[_ngcontent-%COMP%] {\n max-width: 90vw;\n padding: 12px;\n }\n\n .artifact-card-icon[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n }\n\n .artifact-card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .message-header[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .message-sender[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .message-time[_ngcontent-%COMP%] {\n font-size: 11px;\n }\n\n .agent-badge[_ngcontent-%COMP%] {\n font-size: 10px;\n padding: 1px 6px;\n }\n\n .time-pill[_ngcontent-%COMP%] {\n font-size: 10px;\n padding: 2px 6px;\n }\n\n .message-actions[_ngcontent-%COMP%] {\n gap: 1px;\n padding: 3px;\n }\n\n .message-action-btn[_ngcontent-%COMP%] {\n min-width: 28px;\n height: 28px;\n font-size: 12px;\n }\n}\n\n\n\n@media (max-width: 480px) {\n .message-item[_ngcontent-%COMP%] {\n padding: 6px 8px;\n gap: 6px;\n }\n\n .avatar-circle[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n font-size: 12px;\n }\n\n .avatar-circle.ai-avatar[_ngcontent-%COMP%] {\n border-radius: 6px;\n }\n\n .artifact-card[_ngcontent-%COMP%] {\n padding: 10px;\n margin-top: 8px;\n }\n\n .artifact-card-header[_ngcontent-%COMP%] {\n gap: 8px;\n }\n\n .artifact-card-icon[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n }\n\n .artifact-card-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n }\n\n .artifact-card-label[_ngcontent-%COMP%] {\n font-size: 13px;\n }\n\n .artifact-card-description[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .message-header[_ngcontent-%COMP%] {\n font-size: 11px;\n gap: 6px;\n }\n\n .message-sender[_ngcontent-%COMP%] {\n font-size: 11px;\n }\n\n .message-time[_ngcontent-%COMP%] {\n font-size: 10px;\n }\n\n .agent-badge[_ngcontent-%COMP%] {\n font-size: 9px;\n padding: 1px 5px;\n }\n\n .time-pill[_ngcontent-%COMP%] {\n font-size: 9px;\n padding: 1px 5px;\n }\n\n .thread-indicator[_ngcontent-%COMP%] {\n padding: 4px 8px;\n font-size: 11px;\n margin-top: 6px;\n }\n\n .agent-details-panel[_ngcontent-%COMP%] {\n padding: 12px;\n margin-top: 8px;\n }\n\n .agent-details-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 8px;\n }\n\n .detail-row[_ngcontent-%COMP%] {\n padding: 6px 8px;\n }\n\n .detail-label[_ngcontent-%COMP%], \n .detail-value[_ngcontent-%COMP%] {\n font-size: 11px;\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[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"] });
1171
1171
  }
1172
1172
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageItemComponent, [{
1173
1173
  type: Component,
1174
- args: [{ selector: 'mj-conversation-message-item', template: "<div [class]=\"messageClasses\" [attr.data-message-id]=\"message.ID\">\n <div class=\"message-avatar\">\n <div class=\"avatar-circle\" [class.ai-avatar]=\"isAIMessage\" [class.user-avatar]=\"isUserMessage\">\n @if (isUserMessage) {\n @if (userAvatarUrl) {\n <img [src]=\"userAvatarUrl\" alt=\"User avatar\" class=\"avatar-image\" />\n } @else if (userAvatarIconClass) {\n <i [class]=\"userAvatarIconClass\"></i>\n } @else {\n <i class=\"fas fa-user\"></i>\n }\n } @else if (isAIMessage) {\n <i class=\"fas\" [ngClass]=\"aiAgentInfo?.iconClass || 'fa-robot'\"></i>\n }\n </div>\n </div>\n\n <div class=\"message-content\">\n <div class=\"message-header\">\n <span class=\"message-sender\" [title]=\"isAIMessage ? (aiAgentInfo?.role || 'AI Assistant') : ''\">\n {{ isAIMessage ? (aiAgentInfo?.name || 'AI Assistant') : messageSenderName }}\n </span>\n <span class=\"message-time\">{{ message.__mj_CreatedAt | date:'short' }}</span>\n\n <!-- Status indicator for user messages -->\n <span *ngIf=\"isUserMessage && messageStatus !== 'Complete'\" class=\"message-status\" [class.error]=\"messageStatus === 'Error'\">\n <i class=\"fas\" [ngClass]=\"messageStatus === 'Error' ? 'fa-exclamation-triangle' : 'fa-circle-notch fa-spin'\"></i>\n <span class=\"status-text\">{{ getStatusText() }}</span>\n </span>\n\n <!-- Time pill - shows for AI messages in all states (in-progress, active, complete, failed) -->\n <span *ngIf=\"!isUserMessage && timePillText\"\n class=\"time-pill\"\n [class.in-progress]=\"isInProgressAIMessage\"\n [class.active]=\"!isInProgressAIMessage && isAgentRunActive\"\n [class.complete]=\"!isInProgressAIMessage && !isAgentRunActive && messageStatus === 'Complete'\"\n [class.failed]=\"messageStatus === 'Error'\">\n <i class=\"fas fa-clock\"></i>\n {{ timePillText }}\n </span>\n\n <!-- Agent run icon (clickable to expand details) - always rightmost when present -->\n <span *ngIf=\"hasAgentRun\"\n class=\"agent-run-icon\"\n (click)=\"toggleAgentDetails()\"\n [class.expanded]=\"isAgentDetailsExpanded\"\n [title]=\"hasRatings() ? 'Agent details & ' + getRatingCount() + ' rating(s)' : 'Click to view agent execution details'\">\n <i class=\"fas fa-cog\"></i>\n <span class=\"rating-badge\" *ngIf=\"hasRatings()\">{{ getRatingCount() }}</span>\n </span>\n </div>\n\n <div class=\"message-body\">\n @if (!isEditing) {\n <div class=\"message-text\">\n <markdown [data]=\"displayMessage\"></markdown>\n @if (isMessageEdited) {\n <span class=\"edited-badge\">(edited)</span>\n }\n </div>\n\n <!-- Artifact Message Card -->\n @if (hasArtifact && artifact && artifactVersion) {\n <div class=\"artifact-wrapper\" [class.system-artifact]=\"isSystemArtifact\">\n <mj-artifact-message-card\n [artifactId]=\"artifact.ID\"\n [artifact]=\"artifact\"\n [artifactVersion]=\"artifactVersion\"\n [currentUser]=\"currentUser\"\n (actionPerformed)=\"onArtifactActionPerformed($event)\">\n </mj-artifact-message-card>\n </div>\n }\n\n <!-- Suggested Responses (shown only for last message by owner) -->\n @if (isLastMessageInConversation && isConversationOwner && suggestedResponses.length > 0) {\n <mj-suggested-responses\n [suggestedResponses]=\"suggestedResponses\"\n [disabled]=\"isProcessing\"\n [isLastMessage]=\"isLastMessageInConversation\"\n [isConversationOwner]=\"isConversationOwner\"\n (responseSelected)=\"onSuggestedResponseSelected($event)\">\n </mj-suggested-responses>\n }\n }\n\n @if (isEditing) {\n <div class=\"message-edit-container\">\n <textarea\n class=\"message-edit-textarea\"\n [(ngModel)]=\"editedText\"\n (keydown)=\"onEditKeydown($event)\"\n rows=\"4\"\n placeholder=\"Edit your message...\"></textarea>\n <div class=\"edit-actions\">\n <button class=\"edit-action-btn save\" (click)=\"saveEdit()\">\n <i class=\"fas fa-check\"></i>\n Save\n </button>\n <button class=\"edit-action-btn cancel\" (click)=\"cancelEditing()\">\n <i class=\"fas fa-times\"></i>\n Cancel\n </button>\n </div>\n <div class=\"edit-hint\">\n Press Enter to save, Shift+Enter for new line, Escape to cancel\n </div>\n </div>\n }\n </div>\n\n <!-- Message Footer: Rating buttons and action buttons for last completed AI message -->\n @if (isAIMessage && !isEditing && messageStatus === 'Complete' && (isLastMessage || hasRatings())) {\n <div class=\"message-footer\">\n <!-- Rating component (thumbs up/down) -->\n <mj-conversation-message-rating\n [conversationDetailId]=\"message.ID\"\n [currentUser]=\"currentUser\"\n [ratingsData]=\"ratings\">\n </mj-conversation-message-rating>\n\n <!-- Pin/Delete buttons (only for last message) -->\n @if (isLastMessage) {\n <div class=\"inline-actions\">\n <button class=\"action-bar-btn\" (click)=\"onPinClick()\" [title]=\"message.IsPinned ? 'Unpin Message' : 'Pin Message'\">\n <i class=\"fas fa-thumbtack\" [class.pinned]=\"message.IsPinned\"></i>\n </button>\n <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete Message\">\n <i class=\"fas fa-trash\"></i>\n </button>\n </div>\n }\n </div>\n }\n\n <!-- Agent details content section -->\n <div class=\"agent-details-section\">\n <!-- Message Action Bar (appears when gear expanded for non-last messages) -->\n @if (isAgentDetailsExpanded && !isLastMessage && isAIMessage && messageStatus === 'Complete') {\n <div class=\"message-action-bar\">\n <div class=\"action-bar-container\">\n <mj-conversation-message-rating\n [conversationDetailId]=\"message.ID\"\n [currentUser]=\"currentUser\"\n [ratingsData]=\"ratings\">\n </mj-conversation-message-rating>\n\n <div class=\"action-buttons\">\n <button class=\"action-bar-btn\" (click)=\"onPinClick()\" [title]=\"message.IsPinned ? 'Unpin Message' : 'Pin Message'\">\n <i class=\"fas fa-thumbtack\" [class.pinned]=\"message.IsPinned\"></i>\n </button>\n <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete Message\">\n <i class=\"fas fa-trash\"></i>\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Agent Run Details Panel (expandable) -->\n @if (isAgentDetailsExpanded && hasAgentRun) {\n <!-- Agent Run Details Panel -->\n <div class=\"agent-details-panel\">\n @if (agentRun) {\n <div class=\"agent-details-content\">\n <div class=\"agent-details-header\">\n <i class=\"fas fa-chart-line\"></i>\n <span>\n <a class=\"agent-name-link\" (click)=\"openAgentRecord()\" title=\"Open agent details\">\n {{ aiAgentInfo?.name || 'Agent' }}\n </a>\n Run Details\n </span>\n </div>\n\n <div class=\"agent-details-grid\">\n <div class=\"detail-row\">\n <span class=\"detail-label\">Run ID:</span>\n <span class=\"detail-value\">\n <a class=\"run-id-link\" (click)=\"openAgentRunRecord()\" title=\"Open agent run details\">\n {{ agentRun.ID }}\n <i class=\"fas fa-external-link-alt\"></i>\n </a>\n </span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRunStepCount > 0\">\n <span class=\"detail-label\">Steps:</span>\n <span class=\"detail-value\">{{ agentRunStepCount }}</span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRunTotalTokens > 0\">\n <span class=\"detail-label\">Tokens:</span>\n <span class=\"detail-value\">{{ formatNumber(agentRunTotalTokens) }}</span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRunTotalCost > 0\">\n <span class=\"detail-label\">Cost:</span>\n <span class=\"detail-value\">\\${{ agentRunTotalCost.toFixed(4) }}</span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRun.Status\">\n <span class=\"detail-label\">Status:</span>\n <span class=\"detail-value status-badge\" [class]=\"'status-' + agentRun.Status.toLowerCase()\">\n {{ agentRun.Status }}\n </span>\n </div>\n </div>\n </div>\n }\n\n <!-- Tasks Section -->\n @if (detailTasks.length > 0) {\n <div class=\"agent-details-tasks\">\n <div class=\"tasks-section-header\">\n <i class=\"fas fa-tasks\"></i>\n <span>Associated Tasks ({{ detailTasks.length }})</span>\n </div>\n <div class=\"tasks-list\">\n <mj-task-widget\n *ngFor=\"let task of detailTasks\"\n [task]=\"task\"\n [compact]=\"false\"\n [clickable]=\"false\"\n [showProgress]=\"true\"\n [showDuration]=\"true\">\n </mj-task-widget>\n </div>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Rating component moved to message footer (lines 113-134) -->\n\n <!-- Removed message-actions hover panel - actions now in gear icon dropdown -->\n <!-- Retry button kept for critical error recovery on failed messages -->\n @if (messageStatus === 'Error' && isAIMessage && !isProcessing && !isEditing) {\n <div class=\"message-actions\">\n <button class=\"message-action-btn retry-btn\" (click)=\"onRetryClick()\" title=\"Retry\">\n <i class=\"fas fa-redo\"></i>\n Retry\n </button>\n </div>\n }\n\n <!-- Reaction Buttons -->\n <div class=\"message-reactions\" *ngIf=\"!isProcessing && !isInProgressAIMessage && !isEditing\">\n <button class=\"reaction-btn\" (click)=\"toggleReaction('like')\">\n <i class=\"far fa-thumbs-up\"></i>\n <span class=\"reaction-count\">0</span>\n </button>\n <button class=\"reaction-btn\" (click)=\"toggleReaction('comment')\">\n <i class=\"far fa-comment\"></i>\n <span class=\"reaction-count\">0</span>\n </button>\n </div>\n </div>\n</div>", styles: [".message-item {\n display: flex;\n gap: 12px;\n padding: 8px 24px;\n transition: background-color 150ms ease;\n animation: fadeIn 0.3s ease;\n position: relative;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.message-item.ai-message {\n background-color: transparent;\n}\n\n.message-item.user-message {\n background-color: transparent;\n}\n\n.message-item.pinned {\n border-left: 3px solid #0076B6;\n background-color: rgba(0, 118, 182, 0.08);\n}\n\n.message-item.in-progress {\n background: linear-gradient(90deg,\n rgba(59, 130, 246, 0.08) 0%,\n rgba(59, 130, 246, 0.12) 50%,\n rgba(59, 130, 246, 0.08) 100%);\n background-size: 200% 100%;\n animation: shimmer 2s ease-in-out infinite;\n border-left: 3px solid #3B82F6;\n position: relative;\n}\n\n@keyframes shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n/* Progress message styling - make it visually distinct */\n.message-item.in-progress .message-text {\n color: #1F2937;\n font-weight: 500;\n max-height: 150px;\n overflow-y: auto;\n display: block;\n}\n\n\n/* Pulse effect for avatar */\n.message-item.in-progress .avatar-circle {\n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n }\n 50% {\n box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);\n }\n}\n\n.message-item:hover {\n background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Mention Pills */\n:host ::ng-deep .mention-badge {\n display: inline-block;\n padding: 2px 8px;\n margin: 0 2px;\n border-radius: 4px;\n font-weight: 500;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n:host ::ng-deep .mention-badge.agent {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n}\n\n:host ::ng-deep .mention-badge.user {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n}\n\n:host ::ng-deep .mention-badge:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.message-avatar {\n flex-shrink: 0;\n}\n\n.avatar-circle {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n color: white;\n}\n\n/* User avatars are circular */\n.avatar-circle.user-avatar {\n border-radius: 50%;\n background-color: #333;\n}\n\n/* Agent avatars are square with rounded corners */\n.avatar-circle.ai-avatar {\n border-radius: 8px;\n background-color: #9333EA; /* Purple for agents */\n}\n\n/* Avatar images (for users with uploaded photos or URLs) */\n.avatar-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n}\n\n/* System artifact styling - subtle visual distinction */\n.artifact-wrapper.system-artifact {\n opacity: 0.85;\n position: relative;\n}\n\n.artifact-wrapper.system-artifact::before {\n content: 'SYSTEM';\n position: absolute;\n top: 8px;\n right: 8px;\n font-size: 9px;\n font-weight: 600;\n color: #9CA3AF;\n background: #F3F4F6;\n padding: 2px 6px;\n border-radius: 3px;\n letter-spacing: 0.5px;\n z-index: 10;\n}\n\n.message-content {\n flex: 1;\n min-width: 0;\n position: relative;\n}\n\n.message-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 4px;\n font-size: 13px;\n}\n\n.message-sender {\n font-weight: 600;\n color: #333;\n}\n\n/* Agent role badge */\n.agent-badge {\n display: inline-block;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 10px;\n font-size: 11px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.message-time {\n color: #9CA3AF;\n font-size: 12px;\n font-weight: 400;\n}\n\n/* Time pill - unified styling for all AI message states */\n.time-pill {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 500;\n margin-left: auto;\n transition: all 0.3s ease;\n}\n\n.time-pill i {\n font-size: 10px;\n}\n\n/* Complete state - light blue (default) */\n.time-pill.complete {\n background: #E0F2FE;\n color: #0369A1;\n}\n\n/* In-progress state - purple/violet with subtle pulse */\n.time-pill.in-progress {\n background: #F3E8FF;\n color: #7C3AED;\n}\n\n/* Active agent run state - indigo with subtle pulse */\n.time-pill.active {\n background: #E0E7FF;\n color: #4F46E5;\n}\n\n/* Failed state - red */\n.time-pill.failed {\n background: #FEE2E2;\n color: #DC2626;\n}\n\n@keyframes pillPulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.85;\n }\n}\n\n/* Deprecated - keeping for backward compatibility but no longer used */\n.generation-time {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n background: #E0F2FE;\n border-radius: 10px;\n font-size: 11px;\n color: #0369A1;\n font-weight: 500;\n margin-left: auto;\n}\n\n.generation-time i {\n font-size: 10px;\n}\n\n/* Deprecated - keeping for backward compatibility but no longer used */\n.message-elapsed {\n color: #AAA;\n font-size: 11px;\n font-style: italic;\n}\n\n.message-body {\n margin-bottom: 0;\n}\n\n.message-text {\n color: #333;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n/* Remove extra margin from markdown paragraphs */\n.message-text markdown > :first-child {\n margin-top: 0;\n}\n\n.message-text markdown > :last-child {\n margin-bottom: 0;\n}\n\n/* Asymmetric bubble shapes for message content */\n.message-item.user-message .message-content {\n border-radius: 12px 12px 12px 4px;\n}\n\n.message-item.ai-message .message-content {\n border-radius: 4px 12px 12px 12px;\n}\n\n/* Reaction Buttons */\n.message-reactions {\n display: none; /* Hide reactions for now - not implemented */\n}\n\n/* Artifact Card - Claude.ai Style */\n.artifact-card {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 12px;\n padding: 16px;\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 8px;\n background: linear-gradient(135deg, #F8F7FF 0%, #F3F2FF 100%);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n max-width: 500px;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n position: relative;\n overflow: hidden;\n}\n\n.artifact-card::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(180deg, #8B5CF6 0%, #6366F1 100%);\n opacity: 1;\n}\n\n.artifact-card:hover {\n background: linear-gradient(135deg, #F3F2FF 0%, #EBE9FF 100%);\n border-color: rgba(139, 92, 246, 0.3);\n box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);\n transform: translateY(-1px);\n}\n\n.artifact-card-header {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n}\n\n.artifact-card-icon {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #8B5CF6;\n flex-shrink: 0;\n background: rgba(139, 92, 246, 0.1);\n border-radius: 6px;\n transition: all 0.2s ease;\n}\n\n.artifact-card:hover .artifact-card-icon {\n background: rgba(139, 92, 246, 0.15);\n transform: scale(1.05);\n}\n\n.artifact-card-icon i {\n font-size: 18px;\n}\n\n.artifact-card-content {\n flex: 1;\n min-width: 0;\n}\n\n.artifact-card-label {\n font-size: 14px;\n font-weight: 600;\n color: #374151;\n letter-spacing: -0.01em;\n margin-bottom: 4px;\n}\n\n.artifact-card-description {\n font-size: 13px;\n color: #6B7280;\n line-height: 1.5;\n}\n\n.message-actions {\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: flex;\n gap: 2px;\n opacity: 0;\n transform: translateY(4px);\n transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);\n background: white;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n padding: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n pointer-events: none;\n}\n\n.message-item:hover .message-actions {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n.message-action-btn {\n padding: 6px 8px;\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n color: #6B7280;\n font-size: 13px;\n transition: all 150ms ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n height: 32px;\n}\n\n.message-action-btn:hover {\n background-color: #F3F4F6;\n color: #111827;\n}\n\n.message-action-btn.danger:hover {\n background-color: #FEE2E2;\n color: #DC2626;\n}\n\n.message-action-btn.retry-btn {\n color: #3B82F6;\n background: #EFF6FF;\n font-weight: 600;\n gap: 6px;\n padding: 6px 12px;\n min-width: auto;\n}\n\n.message-action-btn.retry-btn:hover {\n background-color: #DBEAFE;\n color: #2563EB;\n}\n\n/* Thread indicator badge */\n.thread-indicator {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n margin-top: 8px;\n background: #EFF6FF;\n border: 1px solid #DBEAFE;\n border-radius: 16px;\n cursor: pointer;\n transition: all 150ms ease;\n font-size: 12px;\n color: #1E40AF;\n font-weight: 500;\n}\n\n.thread-indicator:hover {\n background: #DBEAFE;\n border-color: #93C5FD;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);\n}\n\n.thread-indicator i {\n font-size: 14px;\n}\n\n.thread-count {\n font-weight: 600;\n}\n\n/* Edit mode styles */\n.message-item.editing {\n background-color: rgba(255, 243, 205, 0.3);\n border-left: 3px solid #FFA726;\n}\n\n.message-edit-container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.message-edit-textarea {\n width: 100%;\n padding: 12px;\n border: 1px solid #D9D9D9;\n border-radius: 6px;\n font-family: inherit;\n font-size: 14px;\n line-height: 1.6;\n resize: vertical;\n min-height: 80px;\n transition: border-color 150ms ease;\n}\n\n.message-edit-textarea:focus {\n outline: none;\n border-color: #0076B6;\n box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\n}\n\n.edit-actions {\n display: flex;\n gap: 8px;\n}\n\n.edit-action-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.edit-action-btn.save {\n background-color: #0076B6;\n color: white;\n}\n\n.edit-action-btn.save:hover {\n background-color: #005A8F;\n}\n\n.edit-action-btn.cancel {\n background-color: #F4F4F4;\n color: #666;\n}\n\n.edit-action-btn.cancel:hover {\n background-color: #E0E0E0;\n color: #333;\n}\n\n.edit-hint {\n font-size: 12px;\n color: #AAA;\n font-style: italic;\n}\n\n.edited-badge {\n margin-left: 8px;\n font-size: 11px;\n color: #AAA;\n font-style: italic;\n font-weight: normal;\n}\n\n/* Message status indicator */\n.message-status {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: #6B7280;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 4px;\n margin-left: 8px;\n animation: statusPulse 2s ease-in-out infinite;\n}\n\n.message-status i {\n color: #0076B6;\n font-size: 11px;\n}\n\n.message-status.error {\n background: #FEE2E2;\n color: #DC2626;\n}\n\n.message-status.error i {\n color: #DC2626;\n}\n\n.status-text {\n font-weight: 500;\n}\n\n@keyframes statusPulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n}\n\n/* ============================================\n Agent Run Icon & Details Panel\n ============================================ */\n\n/* Agent run gear icon in header - muted style for power users */\n.agent-run-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n color: #9CA3AF;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n margin-left: 8px;\n}\n\n.agent-run-icon i.fa-cog {\n font-size: 13px;\n}\n\n.agent-run-icon:hover {\n color: #6B7280;\n}\n\n.agent-run-icon.expanded {\n color: #9333EA;\n transform: scale(1.1);\n}\n\n@keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Agent details panel */\n.agent-details-panel {\n margin-top: 12px;\n padding: 16px;\n background: #F9FAFB;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Loading state */\n.agent-details-loading {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #6B7280;\n font-size: 13px;\n}\n\n.agent-details-loading i {\n color: #9333EA;\n}\n\n/* Error state */\n.agent-details-error {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #DC2626;\n font-size: 13px;\n}\n\n.agent-details-error i {\n color: #DC2626;\n}\n\n/* Content header */\n.agent-details-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n padding-bottom: 8px;\n border-bottom: 1px solid #E5E7EB;\n font-weight: 600;\n font-size: 13px;\n color: #374151;\n}\n\n.agent-details-header i {\n color: #9333EA;\n}\n\n.agent-name-link {\n color: #9333EA;\n cursor: pointer;\n text-decoration: none;\n font-weight: 600;\n transition: all 0.2s ease;\n}\n\n.agent-name-link:hover {\n color: #7C3AED;\n text-decoration: underline;\n}\n\n/* Details grid */\n.agent-details-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n margin-bottom: 12px;\n}\n\n.detail-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 8px 12px;\n background: white;\n border-radius: 6px;\n border: 1px solid #E5E7EB;\n}\n\n.detail-label {\n font-size: 12px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.detail-value {\n font-size: 13px;\n color: #111827;\n font-weight: 600;\n font-family: 'Monaco', 'Menlo', 'Consolas', monospace;\n}\n\n/* Status badge in details */\n.status-badge {\n padding: 3px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.status-pending {\n background: #FEF3C7;\n color: #92400E;\n}\n\n.status-badge.status-running {\n background: #DBEAFE;\n color: #1E40AF;\n}\n\n.status-badge.status-complete {\n background: #D1FAE5;\n color: #065F46;\n}\n\n.status-badge.status-failed,\n.status-badge.status-error {\n background: #FEE2E2;\n color: #991B1B;\n}\n\n.status-badge.status-cancelled {\n background: #F3F4F6;\n color: #4B5563;\n}\n\n/* Run ID link styling */\n.run-id-link {\n color: #3B82F6;\n cursor: pointer;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n transition: all 0.2s ease;\n}\n\n.run-id-link:hover {\n color: #2563EB;\n text-decoration: underline;\n}\n\n.run-id-link i.fa-external-link-alt {\n font-size: 10px;\n opacity: 0.7;\n}\n\n/* Tasks section in agent details */\n.agent-details-tasks {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #E5E7EB;\n}\n\n.tasks-section-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-weight: 600;\n font-size: 12px;\n color: #374151;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.tasks-section-header i {\n color: #3B82F6;\n font-size: 11px;\n}\n\n.tasks-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.tasks-list mj-task-widget {\n display: block;\n}\n\n/* Artifact version badge */\n.artifact-version-badge {\n display: inline-block;\n margin-left: 8px;\n padding: 2px 8px;\n background: #EEF2FF;\n color: #4F46E5;\n font-size: 11px;\n font-weight: 600;\n font-family: monospace;\n border-radius: 4px;\n vertical-align: middle;\n}\n/* Message Action Bar (separate panel above agent details) */\n.message-action-bar {\n margin-top: 12px;\n margin-bottom: 8px;\n background: #F9FAFB;\n border: 1px solid #D1D5DB;\n border-radius: 8px;\n padding: 12px;\n}\n\n.action-bar-container {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.action-buttons {\n display: flex;\n gap: 4px;\n margin-left: 16px;\n padding-left: 16px;\n border-left: 1px solid #E5E7EB;\n}\n\n.action-bar-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 6px 10px;\n background: white;\n border: 1px solid #9CA3AF;\n border-radius: 6px;\n font-size: 16px;\n line-height: 1;\n color: #6B7280;\n cursor: pointer;\n transition: all 0.2s;\n min-width: 36px;\n height: 32px;\n opacity: 0.6;\n}\n\n.action-bar-btn i {\n font-size: 16px;\n line-height: 1;\n}\n\n.action-bar-btn:hover {\n opacity: 1;\n border-color: #6B7280;\n}\n\n.action-bar-btn.danger {\n color: #DC2626;\n}\n\n.action-bar-btn.danger:hover {\n opacity: 1;\n background: #FEF2F2;\n border-color: #DC2626;\n}\n\n.action-bar-btn i.pinned {\n color: #3B82F6;\n}\n\n/* Rating badge on gear icon */\n.agent-run-icon {\n position: relative;\n}\n\n.rating-badge {\n position: absolute;\n top: -6px;\n right: -6px;\n background: #3B82F6;\n color: white;\n font-size: 10px;\n font-weight: 600;\n padding: 2px 5px;\n border-radius: 10px;\n min-width: 16px;\n text-align: center;\n line-height: 1;\n}\n\n/* Message Footer (rating counts and inline actions) */\n.message-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid #F3F4F6;\n}\n\n.rating-counts {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: #6B7280;\n}\n\n.rating-count {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.rating-count.thumbs-up {\n color: #16A34A;\n}\n\n.rating-count.thumbs-down {\n color: #DC2626;\n}\n\n.rating-total {\n font-size: 12px;\n color: #9CA3AF;\n}\n\n.inline-actions {\n display: flex;\n gap: 4px;\n align-items: center;\n}\n\n/* Agent details section wrapper */\n.agent-details-section {\n margin-top: 8px;\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"] }]
1174
+ args: [{ selector: 'mj-conversation-message-item', template: "<div [class]=\"messageClasses\" [attr.data-message-id]=\"message.ID\">\n <div class=\"message-avatar\">\n <div class=\"avatar-circle\" [class.ai-avatar]=\"isAIMessage\" [class.user-avatar]=\"isUserMessage\">\n @if (isUserMessage) {\n @if (userAvatarUrl) {\n <img [src]=\"userAvatarUrl\" alt=\"User avatar\" class=\"avatar-image\" />\n } @else if (userAvatarIconClass) {\n <i [class]=\"userAvatarIconClass\"></i>\n } @else {\n <i class=\"fas fa-user\"></i>\n }\n } @else if (isAIMessage) {\n <i class=\"fas\" [ngClass]=\"aiAgentInfo?.iconClass || 'fa-robot'\"></i>\n }\n </div>\n </div>\n\n <div class=\"message-content\">\n <div class=\"message-header\">\n <span class=\"message-sender\" [title]=\"isAIMessage ? (aiAgentInfo?.role || 'AI Assistant') : ''\">\n {{ isAIMessage ? (aiAgentInfo?.name || 'AI Assistant') : messageSenderName }}\n </span>\n <span class=\"message-time\">{{ message.__mj_CreatedAt | date:'short' }}</span>\n\n <!-- Status indicator for user messages -->\n <span *ngIf=\"isUserMessage && messageStatus !== 'Complete'\" class=\"message-status\" [class.error]=\"messageStatus === 'Error'\">\n <i class=\"fas\" [ngClass]=\"messageStatus === 'Error' ? 'fa-exclamation-triangle' : 'fa-circle-notch fa-spin'\"></i>\n <span class=\"status-text\">{{ getStatusText() }}</span>\n </span>\n\n <!-- Time pill - shows for AI messages in all states (in-progress, active, complete, failed) -->\n <span *ngIf=\"!isUserMessage && timePillText\"\n class=\"time-pill\"\n [class.in-progress]=\"isInProgressAIMessage\"\n [class.active]=\"!isInProgressAIMessage && isAgentRunActive\"\n [class.complete]=\"!isInProgressAIMessage && !isAgentRunActive && messageStatus === 'Complete'\"\n [class.failed]=\"messageStatus === 'Error'\">\n <i class=\"fas fa-clock\"></i>\n {{ timePillText }}\n </span>\n\n <!-- Agent run icon (clickable to expand details) - always rightmost when present -->\n <span *ngIf=\"hasAgentRun\"\n class=\"agent-run-icon\"\n (click)=\"toggleAgentDetails()\"\n [class.expanded]=\"isAgentDetailsExpanded\"\n [title]=\"hasRatings() ? 'Agent details & ' + getRatingCount() + ' rating(s)' : 'Click to view agent execution details'\">\n <i class=\"fas fa-cog\"></i>\n <span class=\"rating-badge\" *ngIf=\"hasRatings()\">{{ getRatingCount() }}</span>\n </span>\n </div>\n\n <div class=\"message-body\">\n @if (!isEditing) {\n <div class=\"message-text\">\n <markdown [data]=\"displayMessage\"></markdown>\n @if (isMessageEdited) {\n <span class=\"edited-badge\">(edited)</span>\n }\n </div>\n\n <!-- Artifact Message Card -->\n @if (hasArtifact && artifact && artifactVersion) {\n <div class=\"artifact-wrapper\" [class.system-artifact]=\"isSystemArtifact\">\n <mj-artifact-message-card\n [artifactId]=\"artifact.ID\"\n [artifact]=\"artifact\"\n [artifactVersion]=\"artifactVersion\"\n [currentUser]=\"currentUser\"\n (actionPerformed)=\"onArtifactActionPerformed($event)\">\n </mj-artifact-message-card>\n </div>\n }\n\n <!-- Suggested Responses (shown only for last message by owner) -->\n @if (isLastMessageInConversation && isConversationOwner && suggestedResponses.length > 0) {\n <mj-suggested-responses\n [suggestedResponses]=\"suggestedResponses\"\n [disabled]=\"isProcessing\"\n [isLastMessage]=\"isLastMessageInConversation\"\n [isConversationOwner]=\"isConversationOwner\"\n (responseSelected)=\"onSuggestedResponseSelected($event)\">\n </mj-suggested-responses>\n }\n }\n\n @if (isEditing) {\n <div class=\"message-edit-container\">\n <textarea\n class=\"message-edit-textarea\"\n [(ngModel)]=\"editedText\"\n (keydown)=\"onEditKeydown($event)\"\n rows=\"4\"\n placeholder=\"Edit your message...\"></textarea>\n <div class=\"edit-actions\">\n <button class=\"edit-action-btn save\" (click)=\"saveEdit()\">\n <i class=\"fas fa-check\"></i>\n Save\n </button>\n <button class=\"edit-action-btn cancel\" (click)=\"cancelEditing()\">\n <i class=\"fas fa-times\"></i>\n Cancel\n </button>\n </div>\n <div class=\"edit-hint\">\n Press Enter to save, Shift+Enter for new line, Escape to cancel\n </div>\n </div>\n }\n </div>\n\n <!-- Message Footer: Rating buttons and action buttons for last completed AI message -->\n @if (isAIMessage && !isEditing && messageStatus === 'Complete' && (isLastMessage || hasRatings())) {\n <div class=\"message-footer\">\n <!-- Rating component (thumbs up/down) -->\n <mj-conversation-message-rating\n [conversationDetailId]=\"message.ID\"\n [currentUser]=\"currentUser\"\n [ratingsData]=\"ratings\">\n </mj-conversation-message-rating>\n\n <!-- Pin/Delete buttons (only for last message) -->\n @if (isLastMessage) {\n <div class=\"inline-actions\">\n <button class=\"action-bar-btn\" (click)=\"onPinClick()\" [title]=\"message.IsPinned ? 'Unpin Message' : 'Pin Message'\">\n <i class=\"fas fa-thumbtack\" [class.pinned]=\"message.IsPinned\"></i>\n </button>\n <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete Message\">\n <i class=\"fas fa-trash\"></i>\n </button>\n </div>\n }\n </div>\n }\n\n <!-- Agent details content section -->\n <div class=\"agent-details-section\">\n <!-- Message Action Bar (appears when gear expanded for non-last messages) -->\n @if (isAgentDetailsExpanded && !isLastMessage && isAIMessage && messageStatus === 'Complete') {\n <div class=\"message-action-bar\">\n <div class=\"action-bar-container\">\n <mj-conversation-message-rating\n [conversationDetailId]=\"message.ID\"\n [currentUser]=\"currentUser\"\n [ratingsData]=\"ratings\">\n </mj-conversation-message-rating>\n\n <div class=\"action-buttons\">\n <button class=\"action-bar-btn\" (click)=\"onPinClick()\" [title]=\"message.IsPinned ? 'Unpin Message' : 'Pin Message'\">\n <i class=\"fas fa-thumbtack\" [class.pinned]=\"message.IsPinned\"></i>\n </button>\n <button class=\"action-bar-btn danger\" (click)=\"onDeleteClick()\" title=\"Delete Message\">\n <i class=\"fas fa-trash\"></i>\n </button>\n </div>\n </div>\n </div>\n }\n\n <!-- Agent Run Details Panel (expandable) -->\n @if (isAgentDetailsExpanded && hasAgentRun) {\n <!-- Agent Run Details Panel -->\n <div class=\"agent-details-panel\">\n @if (agentRun) {\n <div class=\"agent-details-content\">\n <div class=\"agent-details-header\">\n <i class=\"fas fa-chart-line\"></i>\n <span>\n <a class=\"agent-name-link\" (click)=\"openAgentRecord()\" title=\"Open agent details\">\n {{ aiAgentInfo?.name || 'Agent' }}\n </a>\n Run Details\n </span>\n </div>\n\n <div class=\"agent-details-grid\">\n <div class=\"detail-row\">\n <span class=\"detail-label\">Run ID:</span>\n <span class=\"detail-value\">\n <a class=\"run-id-link\" (click)=\"openAgentRunRecord()\" title=\"Open agent run details\">\n {{ agentRun.ID }}\n <i class=\"fas fa-external-link-alt\"></i>\n </a>\n </span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRunStepCount > 0\">\n <span class=\"detail-label\">Steps:</span>\n <span class=\"detail-value\">{{ agentRunStepCount }}</span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRunTotalTokens > 0\">\n <span class=\"detail-label\">Tokens:</span>\n <span class=\"detail-value\">{{ formatNumber(agentRunTotalTokens) }}</span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRunTotalCost > 0\">\n <span class=\"detail-label\">Cost:</span>\n <span class=\"detail-value\">\\${{ agentRunTotalCost.toFixed(4) }}</span>\n </div>\n\n <div class=\"detail-row\" *ngIf=\"agentRun.Status\">\n <span class=\"detail-label\">Status:</span>\n <span class=\"detail-value status-badge\" [class]=\"'status-' + agentRun.Status.toLowerCase()\">\n {{ agentRun.Status }}\n </span>\n </div>\n </div>\n </div>\n }\n\n <!-- Tasks Section -->\n @if (detailTasks.length > 0) {\n <div class=\"agent-details-tasks\">\n <div class=\"tasks-section-header\">\n <i class=\"fas fa-tasks\"></i>\n <span>Associated Tasks ({{ detailTasks.length }})</span>\n </div>\n <div class=\"tasks-list\">\n <mj-task-widget\n *ngFor=\"let task of detailTasks\"\n [task]=\"task\"\n [compact]=\"false\"\n [clickable]=\"false\"\n [showProgress]=\"true\"\n [showDuration]=\"true\">\n </mj-task-widget>\n </div>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Rating component moved to message footer (lines 113-134) -->\n\n <!-- Removed message-actions hover panel - actions now in gear icon dropdown -->\n <!-- Retry button kept for critical error recovery on failed messages -->\n @if (messageStatus === 'Error' && isAIMessage && !isProcessing && !isEditing) {\n <div class=\"message-actions\">\n <button class=\"message-action-btn retry-btn\" (click)=\"onRetryClick()\" title=\"Retry\">\n <i class=\"fas fa-redo\"></i>\n Retry\n </button>\n </div>\n }\n\n <!-- Reaction Buttons -->\n <div class=\"message-reactions\" *ngIf=\"!isProcessing && !isInProgressAIMessage && !isEditing\">\n <button class=\"reaction-btn\" (click)=\"toggleReaction('like')\">\n <i class=\"far fa-thumbs-up\"></i>\n <span class=\"reaction-count\">0</span>\n </button>\n <button class=\"reaction-btn\" (click)=\"toggleReaction('comment')\">\n <i class=\"far fa-comment\"></i>\n <span class=\"reaction-count\">0</span>\n </button>\n </div>\n </div>\n</div>", styles: [".message-item {\n display: flex;\n gap: 12px;\n padding: 8px 24px;\n transition: background-color 150ms ease;\n animation: fadeIn 0.3s ease;\n position: relative;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.message-item.ai-message {\n background-color: transparent;\n}\n\n.message-item.user-message {\n background-color: transparent;\n}\n\n.message-item.pinned {\n border-left: 3px solid #0076B6;\n background-color: rgba(0, 118, 182, 0.08);\n}\n\n.message-item.in-progress {\n background: linear-gradient(90deg,\n rgba(59, 130, 246, 0.08) 0%,\n rgba(59, 130, 246, 0.12) 50%,\n rgba(59, 130, 246, 0.08) 100%);\n background-size: 200% 100%;\n animation: shimmer 2s ease-in-out infinite;\n border-left: 3px solid #3B82F6;\n position: relative;\n}\n\n@keyframes shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n/* Progress message styling - make it visually distinct */\n.message-item.in-progress .message-text {\n color: #1F2937;\n font-weight: 500;\n max-height: 150px;\n overflow-y: auto;\n display: block;\n}\n\n\n/* Pulse effect for avatar */\n.message-item.in-progress .avatar-circle {\n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\n }\n 50% {\n box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);\n }\n}\n\n.message-item:hover {\n background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Mention Pills */\n:host ::ng-deep .mention-badge {\n display: inline-block;\n padding: 2px 8px;\n margin: 0 2px;\n border-radius: 4px;\n font-weight: 500;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n:host ::ng-deep .mention-badge.agent {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n}\n\n:host ::ng-deep .mention-badge.user {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n}\n\n:host ::ng-deep .mention-badge:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.message-avatar {\n flex-shrink: 0;\n}\n\n.avatar-circle {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n color: white;\n}\n\n/* User avatars are circular */\n.avatar-circle.user-avatar {\n border-radius: 50%;\n background-color: #333;\n}\n\n/* Agent avatars are square with rounded corners */\n.avatar-circle.ai-avatar {\n border-radius: 8px;\n background-color: #9333EA; /* Purple for agents */\n}\n\n/* Avatar images (for users with uploaded photos or URLs) */\n.avatar-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n}\n\n/* System artifact styling - subtle visual distinction */\n.artifact-wrapper.system-artifact {\n opacity: 0.85;\n position: relative;\n}\n\n.artifact-wrapper.system-artifact::before {\n content: 'SYSTEM';\n position: absolute;\n top: 8px;\n right: 8px;\n font-size: 9px;\n font-weight: 600;\n color: #9CA3AF;\n background: #F3F4F6;\n padding: 2px 6px;\n border-radius: 3px;\n letter-spacing: 0.5px;\n z-index: 10;\n}\n\n.message-content {\n flex: 1;\n min-width: 0;\n position: relative;\n}\n\n.message-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 4px;\n font-size: 13px;\n}\n\n.message-sender {\n font-weight: 600;\n color: #333;\n}\n\n/* Agent role badge */\n.agent-badge {\n display: inline-block;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 10px;\n font-size: 11px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.message-time {\n color: #9CA3AF;\n font-size: 12px;\n font-weight: 400;\n}\n\n/* Time pill - unified styling for all AI message states */\n.time-pill {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 500;\n margin-left: auto;\n transition: all 0.3s ease;\n}\n\n.time-pill i {\n font-size: 10px;\n}\n\n/* Complete state - light blue (default) */\n.time-pill.complete {\n background: #E0F2FE;\n color: #0369A1;\n}\n\n/* In-progress state - purple/violet with subtle pulse */\n.time-pill.in-progress {\n background: #F3E8FF;\n color: #7C3AED;\n}\n\n/* Active agent run state - indigo with subtle pulse */\n.time-pill.active {\n background: #E0E7FF;\n color: #4F46E5;\n}\n\n/* Failed state - red */\n.time-pill.failed {\n background: #FEE2E2;\n color: #DC2626;\n}\n\n@keyframes pillPulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.85;\n }\n}\n\n/* Deprecated - keeping for backward compatibility but no longer used */\n.generation-time {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n background: #E0F2FE;\n border-radius: 10px;\n font-size: 11px;\n color: #0369A1;\n font-weight: 500;\n margin-left: auto;\n}\n\n.generation-time i {\n font-size: 10px;\n}\n\n/* Deprecated - keeping for backward compatibility but no longer used */\n.message-elapsed {\n color: #AAA;\n font-size: 11px;\n font-style: italic;\n}\n\n.message-body {\n margin-bottom: 0;\n}\n\n.message-text {\n color: #333;\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n/* Remove extra margin from markdown paragraphs */\n.message-text markdown > :first-child {\n margin-top: 0;\n}\n\n.message-text markdown > :last-child {\n margin-bottom: 0;\n}\n\n/* Asymmetric bubble shapes for message content */\n.message-item.user-message .message-content {\n border-radius: 12px 12px 12px 4px;\n}\n\n.message-item.ai-message .message-content {\n border-radius: 4px 12px 12px 12px;\n}\n\n/* Reaction Buttons */\n.message-reactions {\n display: none; /* Hide reactions for now - not implemented */\n}\n\n/* Artifact Card - Claude.ai Style */\n.artifact-card {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 12px;\n padding: 16px;\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 8px;\n background: linear-gradient(135deg, #F8F7FF 0%, #F3F2FF 100%);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n max-width: 500px;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n position: relative;\n overflow: hidden;\n}\n\n.artifact-card::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(180deg, #8B5CF6 0%, #6366F1 100%);\n opacity: 1;\n}\n\n.artifact-card:hover {\n background: linear-gradient(135deg, #F3F2FF 0%, #EBE9FF 100%);\n border-color: rgba(139, 92, 246, 0.3);\n box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);\n transform: translateY(-1px);\n}\n\n.artifact-card-header {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n}\n\n.artifact-card-icon {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #8B5CF6;\n flex-shrink: 0;\n background: rgba(139, 92, 246, 0.1);\n border-radius: 6px;\n transition: all 0.2s ease;\n}\n\n.artifact-card:hover .artifact-card-icon {\n background: rgba(139, 92, 246, 0.15);\n transform: scale(1.05);\n}\n\n.artifact-card-icon i {\n font-size: 18px;\n}\n\n.artifact-card-content {\n flex: 1;\n min-width: 0;\n}\n\n.artifact-card-label {\n font-size: 14px;\n font-weight: 600;\n color: #374151;\n letter-spacing: -0.01em;\n margin-bottom: 4px;\n}\n\n.artifact-card-description {\n font-size: 13px;\n color: #6B7280;\n line-height: 1.5;\n}\n\n.message-actions {\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: flex;\n gap: 2px;\n opacity: 0;\n transform: translateY(4px);\n transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);\n background: white;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n padding: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n pointer-events: none;\n}\n\n.message-item:hover .message-actions {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n.message-action-btn {\n padding: 6px 8px;\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n color: #6B7280;\n font-size: 13px;\n transition: all 150ms ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n height: 32px;\n}\n\n.message-action-btn:hover {\n background-color: #F3F4F6;\n color: #111827;\n}\n\n.message-action-btn.danger:hover {\n background-color: #FEE2E2;\n color: #DC2626;\n}\n\n.message-action-btn.retry-btn {\n color: #3B82F6;\n background: #EFF6FF;\n font-weight: 600;\n gap: 6px;\n padding: 6px 12px;\n min-width: auto;\n}\n\n.message-action-btn.retry-btn:hover {\n background-color: #DBEAFE;\n color: #2563EB;\n}\n\n/* Thread indicator badge */\n.thread-indicator {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n margin-top: 8px;\n background: #EFF6FF;\n border: 1px solid #DBEAFE;\n border-radius: 16px;\n cursor: pointer;\n transition: all 150ms ease;\n font-size: 12px;\n color: #1E40AF;\n font-weight: 500;\n}\n\n.thread-indicator:hover {\n background: #DBEAFE;\n border-color: #93C5FD;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);\n}\n\n.thread-indicator i {\n font-size: 14px;\n}\n\n.thread-count {\n font-weight: 600;\n}\n\n/* Edit mode styles */\n.message-item.editing {\n background-color: rgba(255, 243, 205, 0.3);\n border-left: 3px solid #FFA726;\n}\n\n.message-edit-container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.message-edit-textarea {\n width: 100%;\n padding: 12px;\n border: 1px solid #D9D9D9;\n border-radius: 6px;\n font-family: inherit;\n font-size: 14px;\n line-height: 1.6;\n resize: vertical;\n min-height: 80px;\n transition: border-color 150ms ease;\n}\n\n.message-edit-textarea:focus {\n outline: none;\n border-color: #0076B6;\n box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\n}\n\n.edit-actions {\n display: flex;\n gap: 8px;\n}\n\n.edit-action-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.edit-action-btn.save {\n background-color: #0076B6;\n color: white;\n}\n\n.edit-action-btn.save:hover {\n background-color: #005A8F;\n}\n\n.edit-action-btn.cancel {\n background-color: #F4F4F4;\n color: #666;\n}\n\n.edit-action-btn.cancel:hover {\n background-color: #E0E0E0;\n color: #333;\n}\n\n.edit-hint {\n font-size: 12px;\n color: #AAA;\n font-style: italic;\n}\n\n.edited-badge {\n margin-left: 8px;\n font-size: 11px;\n color: #AAA;\n font-style: italic;\n font-weight: normal;\n}\n\n/* Message Action Bar (separate panel above agent details) */\n.message-action-bar {\n margin-top: 12px;\n margin-bottom: 8px;\n background: #F9FAFB;\n border: 1px solid #D1D5DB;\n border-radius: 8px;\n padding: 12px;\n}\n\n.action-bar-container {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.action-buttons {\n display: flex;\n gap: 4px;\n margin-left: 16px;\n padding-left: 16px;\n border-left: 1px solid #E5E7EB;\n}\n\n.action-bar-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 6px 10px;\n background: white;\n border: 1px solid #9CA3AF;\n border-radius: 6px;\n font-size: 16px;\n line-height: 1;\n color: #6B7280;\n cursor: pointer;\n transition: all 0.2s;\n min-width: 36px;\n height: 32px;\n opacity: 0.6;\n}\n\n.action-bar-btn i {\n font-size: 16px;\n line-height: 1;\n}\n\n.action-bar-btn:hover {\n opacity: 1;\n border-color: #6B7280;\n}\n\n.action-bar-btn.danger {\n color: #DC2626;\n}\n\n.action-bar-btn.danger:hover {\n opacity: 1;\n background: #FEF2F2;\n border-color: #DC2626;\n}\n\n.action-bar-btn i.pinned {\n color: #3B82F6;\n}\n\n/* Message status indicator */\n.message-status {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: #6B7280;\n padding: 2px 8px;\n background: #F3F4F6;\n border-radius: 4px;\n margin-left: 8px;\n animation: statusPulse 2s ease-in-out infinite;\n}\n\n.message-status i {\n color: #0076B6;\n font-size: 11px;\n}\n\n.message-status.error {\n background: #FEE2E2;\n color: #DC2626;\n}\n\n.message-status.error i {\n color: #DC2626;\n}\n\n.status-text {\n font-weight: 500;\n}\n\n@keyframes statusPulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n}\n\n/* ============================================\n Agent Run Icon & Details Panel\n ============================================ */\n\n/* Agent run gear icon in header - muted style for power users */\n.agent-run-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n color: #9CA3AF;\n cursor: pointer;\n transition: all 0.2s ease;\n user-select: none;\n margin-left: 8px;\n}\n\n.agent-run-icon i.fa-cog {\n font-size: 13px;\n}\n\n.agent-run-icon:hover {\n color: #6B7280;\n}\n\n.agent-run-icon.expanded {\n color: #9333EA;\n transform: scale(1.1);\n}\n\n@keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Agent details panel */\n.agent-details-panel {\n margin-top: 12px;\n padding: 16px;\n background: #F9FAFB;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Loading state */\n.agent-details-loading {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #6B7280;\n font-size: 13px;\n}\n\n.agent-details-loading i {\n color: #9333EA;\n}\n\n/* Error state */\n.agent-details-error {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #DC2626;\n font-size: 13px;\n}\n\n.agent-details-error i {\n color: #DC2626;\n}\n\n/* Content header */\n.agent-details-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n padding-bottom: 8px;\n border-bottom: 1px solid #E5E7EB;\n font-weight: 600;\n font-size: 13px;\n color: #374151;\n}\n\n.agent-details-header i {\n color: #9333EA;\n}\n\n.agent-name-link {\n color: #9333EA;\n cursor: pointer;\n text-decoration: none;\n font-weight: 600;\n transition: all 0.2s ease;\n}\n\n.agent-name-link:hover {\n color: #7C3AED;\n text-decoration: underline;\n}\n\n/* Details grid */\n.agent-details-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n margin-bottom: 12px;\n}\n\n.detail-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 8px 12px;\n background: white;\n border-radius: 6px;\n border: 1px solid #E5E7EB;\n}\n\n.detail-label {\n font-size: 12px;\n color: #6B7280;\n font-weight: 500;\n}\n\n.detail-value {\n font-size: 13px;\n color: #111827;\n font-weight: 600;\n font-family: 'Monaco', 'Menlo', 'Consolas', monospace;\n}\n\n/* Status badge in details */\n.status-badge {\n padding: 3px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.status-pending {\n background: #FEF3C7;\n color: #92400E;\n}\n\n.status-badge.status-running {\n background: #DBEAFE;\n color: #1E40AF;\n}\n\n.status-badge.status-complete {\n background: #D1FAE5;\n color: #065F46;\n}\n\n.status-badge.status-failed,\n.status-badge.status-error {\n background: #FEE2E2;\n color: #991B1B;\n}\n\n.status-badge.status-cancelled {\n background: #F3F4F6;\n color: #4B5563;\n}\n\n/* Run ID link styling */\n.run-id-link {\n color: #3B82F6;\n cursor: pointer;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n transition: all 0.2s ease;\n}\n\n.run-id-link:hover {\n color: #2563EB;\n text-decoration: underline;\n}\n\n.run-id-link i.fa-external-link-alt {\n font-size: 10px;\n opacity: 0.7;\n}\n\n/* Tasks section in agent details */\n.agent-details-tasks {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #E5E7EB;\n}\n\n.tasks-section-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-weight: 600;\n font-size: 12px;\n color: #374151;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.tasks-section-header i {\n color: #3B82F6;\n font-size: 11px;\n}\n\n.tasks-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.tasks-list mj-task-widget {\n display: block;\n}\n\n/* Artifact version badge */\n.artifact-version-badge {\n display: inline-block;\n margin-left: 8px;\n padding: 2px 8px;\n background: #EEF2FF;\n color: #4F46E5;\n font-size: 11px;\n font-weight: 600;\n font-family: monospace;\n border-radius: 4px;\n vertical-align: middle;\n}\n\n/* Message Footer (rating counts and inline actions) */\n.message-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid #F3F4F6;\n}\n\n.rating-counts {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 13px;\n color: #6B7280;\n}\n\n.rating-count {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.rating-count.thumbs-up {\n color: #16A34A;\n}\n\n.rating-count.thumbs-down {\n color: #DC2626;\n}\n\n.rating-total {\n font-size: 12px;\n color: #9CA3AF;\n}\n\n.inline-actions {\n display: flex;\n gap: 4px;\n align-items: center;\n}\n\n/* Agent details section wrapper */\n.agent-details-section {\n margin-top: 8px;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n .message-item {\n padding: 8px 12px;\n gap: 8px;\n }\n\n .avatar-circle {\n width: 32px;\n height: 32px;\n font-size: 14px;\n }\n\n .artifact-card {\n max-width: 90vw;\n padding: 12px;\n }\n\n .artifact-card-icon {\n width: 32px;\n height: 32px;\n }\n\n .artifact-card-icon i {\n font-size: 16px;\n }\n\n .message-header {\n font-size: 12px;\n }\n\n .message-sender {\n font-size: 12px;\n }\n\n .message-time {\n font-size: 11px;\n }\n\n .agent-badge {\n font-size: 10px;\n padding: 1px 6px;\n }\n\n .time-pill {\n font-size: 10px;\n padding: 2px 6px;\n }\n\n .message-actions {\n gap: 1px;\n padding: 3px;\n }\n\n .message-action-btn {\n min-width: 28px;\n height: 28px;\n font-size: 12px;\n }\n}\n\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n .message-item {\n padding: 6px 8px;\n gap: 6px;\n }\n\n .avatar-circle {\n width: 28px;\n height: 28px;\n font-size: 12px;\n }\n\n .avatar-circle.ai-avatar {\n border-radius: 6px;\n }\n\n .artifact-card {\n padding: 10px;\n margin-top: 8px;\n }\n\n .artifact-card-header {\n gap: 8px;\n }\n\n .artifact-card-icon {\n width: 28px;\n height: 28px;\n }\n\n .artifact-card-icon i {\n font-size: 14px;\n }\n\n .artifact-card-label {\n font-size: 13px;\n }\n\n .artifact-card-description {\n font-size: 12px;\n }\n\n .message-header {\n font-size: 11px;\n gap: 6px;\n }\n\n .message-sender {\n font-size: 11px;\n }\n\n .message-time {\n font-size: 10px;\n }\n\n .agent-badge {\n font-size: 9px;\n padding: 1px 5px;\n }\n\n .time-pill {\n font-size: 9px;\n padding: 1px 5px;\n }\n\n .thread-indicator {\n padding: 4px 8px;\n font-size: 11px;\n margin-top: 6px;\n }\n\n .agent-details-panel {\n padding: 12px;\n margin-top: 8px;\n }\n\n .agent-details-grid {\n grid-template-columns: 1fr;\n gap: 8px;\n }\n\n .detail-row {\n padding: 6px 8px;\n }\n\n .detail-label,\n .detail-value {\n font-size: 11px;\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"] }]
1175
1175
  }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.MentionParserService }, { type: i2.MentionAutocompleteService }], { message: [{
1176
1176
  type: Input
1177
1177
  }], conversation: [{
package/dist/lib/components/navigation/conversation-navigation.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"conversation-navigation.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/navigation/conversation-navigation.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;;AAEhD,qBA2Ga,+BAA+B;IACjC,SAAS,EAAE,aAAa,CAAmB;IAC3C,aAAa,EAAG,MAAM,CAAC;IACvB,WAAW,EAAG,QAAQ,CAAC;IACtB,UAAU,8BAAqC;IAC/C,cAAc,qBAA4B;IAC1C,eAAe,qBAA4B;IAC3C,gBAAgB,qBAA4B;IAC5C,sBAAsB;wBAAqC,MAAM;gBAAU,MAAM;OAAK;yCARrF,+BAA+B;2CAA/B,+BAA+B;CAS3C"}
1
+ {"version":3,"file":"conversation-navigation.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/navigation/conversation-navigation.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;;AAEhD,qBAiKa,+BAA+B;IACjC,SAAS,EAAE,aAAa,CAAmB;IAC3C,aAAa,EAAG,MAAM,CAAC;IACvB,WAAW,EAAG,QAAQ,CAAC;IACtB,UAAU,8BAAqC;IAC/C,cAAc,qBAA4B;IAC1C,eAAe,qBAA4B;IAC3C,gBAAgB,qBAA4B;IAC5C,sBAAsB;wBAAqC,MAAM;gBAAU,MAAM;OAAK;yCARrF,+BAA+B;2CAA/B,+BAA+B;CAS3C"}
package/dist/lib/components/navigation/conversation-navigation.component.js CHANGED
@@ -54,7 +54,7 @@ export class ConversationNavigationComponent {
54
54
  i0.ɵɵclassProp("active", ctx.activeTab === "tasks");
55
55
  i0.ɵɵadvance(5);
56
56
  i0.ɵɵproperty("currentUser", ctx.currentUser);
57
- } }, dependencies: [i1.TasksDropdownComponent], styles: [".conversation-navigation[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 20px;\n gap: 24px;\n color: white;\n }\n .nav-left[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 12px; }\n .nav-title[_ngcontent-%COMP%] { margin: 0; font-size: 18px; font-weight: 600; }\n .nav-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n flex: 1;\n height: 100%;\n }\n .nav-tab[_ngcontent-%COMP%] {\n padding: 0 20px;\n height: 100%;\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 500;\n transition: all 0.2s;\n border-bottom: 3px solid transparent;\n }\n .nav-tab[_ngcontent-%COMP%]:hover {\n background: rgba(255,255,255,0.05);\n color: white;\n }\n .nav-tab.active[_ngcontent-%COMP%] {\n color: white;\n background: rgba(255,255,255,0.1);\n border-bottom-color: #AAE7FD;\n }\n .nav-right[_ngcontent-%COMP%] { display: flex; gap: 8px; }\n .nav-btn[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: 6px;\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n }\n .nav-btn[_ngcontent-%COMP%]:hover {\n background: rgba(255,255,255,0.1);\n color: white;\n }"] });
57
+ } }, dependencies: [i1.TasksDropdownComponent], styles: [".conversation-navigation[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 20px;\n gap: 24px;\n color: white;\n }\n .nav-left[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 12px; }\n .nav-title[_ngcontent-%COMP%] { margin: 0; font-size: 18px; font-weight: 600; }\n .nav-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n flex: 1;\n height: 100%;\n }\n .nav-tab[_ngcontent-%COMP%] {\n padding: 0 20px;\n height: 100%;\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 500;\n transition: all 0.2s;\n border-bottom: 3px solid transparent;\n }\n .nav-tab[_ngcontent-%COMP%]:hover {\n background: rgba(255,255,255,0.05);\n color: white;\n }\n .nav-tab.active[_ngcontent-%COMP%] {\n color: white;\n background: rgba(255,255,255,0.1);\n border-bottom-color: #AAE7FD;\n }\n .nav-right[_ngcontent-%COMP%] { display: flex; gap: 8px; }\n .nav-btn[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: 6px;\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n }\n .nav-btn[_ngcontent-%COMP%]:hover {\n background: rgba(255,255,255,0.1);\n color: white;\n }\n .sidebar-toggle[_ngcontent-%COMP%] {\n display: none;\n }\n\n \n\n @media (max-width: 768px) {\n .conversation-navigation[_ngcontent-%COMP%] {\n padding: 0 12px;\n gap: 12px;\n }\n .sidebar-toggle[_ngcontent-%COMP%] {\n display: flex;\n }\n .nav-tab[_ngcontent-%COMP%] {\n padding: 0 12px;\n font-size: 13px;\n gap: 6px;\n }\n .nav-tab[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n display: none;\n }\n .nav-tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n .nav-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n }\n .nav-right[_ngcontent-%COMP%] {\n gap: 4px;\n }\n }\n\n \n\n @media (max-width: 480px) {\n .conversation-navigation[_ngcontent-%COMP%] {\n padding: 0 8px;\n gap: 8px;\n }\n .nav-tab[_ngcontent-%COMP%] {\n padding: 0 8px;\n font-size: 12px;\n }\n .nav-btn[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n }\n .nav-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n }\n .nav-right[_ngcontent-%COMP%] .nav-btn[_ngcontent-%COMP%]:last-child {\n display: none;\n }\n }"] });
58
58
  }
59
59
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationNavigationComponent, [{
60
60
  type: Component,
@@ -101,7 +101,7 @@ export class ConversationNavigationComponent {
101
101
  </button>
102
102
  </div>
103
103
  </div>
104
- `, styles: ["\n .conversation-navigation {\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 20px;\n gap: 24px;\n color: white;\n }\n .nav-left { display: flex; align-items: center; gap: 12px; }\n .nav-title { margin: 0; font-size: 18px; font-weight: 600; }\n .nav-tabs {\n display: flex;\n gap: 4px;\n flex: 1;\n height: 100%;\n }\n .nav-tab {\n padding: 0 20px;\n height: 100%;\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 500;\n transition: all 0.2s;\n border-bottom: 3px solid transparent;\n }\n .nav-tab:hover {\n background: rgba(255,255,255,0.05);\n color: white;\n }\n .nav-tab.active {\n color: white;\n background: rgba(255,255,255,0.1);\n border-bottom-color: #AAE7FD;\n }\n .nav-right { display: flex; gap: 8px; }\n .nav-btn {\n width: 36px;\n height: 36px;\n border-radius: 6px;\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n }\n .nav-btn:hover {\n background: rgba(255,255,255,0.1);\n color: white;\n }\n "] }]
104
+ `, styles: ["\n .conversation-navigation {\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 20px;\n gap: 24px;\n color: white;\n }\n .nav-left { display: flex; align-items: center; gap: 12px; }\n .nav-title { margin: 0; font-size: 18px; font-weight: 600; }\n .nav-tabs {\n display: flex;\n gap: 4px;\n flex: 1;\n height: 100%;\n }\n .nav-tab {\n padding: 0 20px;\n height: 100%;\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 500;\n transition: all 0.2s;\n border-bottom: 3px solid transparent;\n }\n .nav-tab:hover {\n background: rgba(255,255,255,0.05);\n color: white;\n }\n .nav-tab.active {\n color: white;\n background: rgba(255,255,255,0.1);\n border-bottom-color: #AAE7FD;\n }\n .nav-right { display: flex; gap: 8px; }\n .nav-btn {\n width: 36px;\n height: 36px;\n border-radius: 6px;\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n }\n .nav-btn:hover {\n background: rgba(255,255,255,0.1);\n color: white;\n }\n .sidebar-toggle {\n display: none;\n }\n\n /* Mobile adjustments: 481px - 768px */\n @media (max-width: 768px) {\n .conversation-navigation {\n padding: 0 12px;\n gap: 12px;\n }\n .sidebar-toggle {\n display: flex;\n }\n .nav-tab {\n padding: 0 12px;\n font-size: 13px;\n gap: 6px;\n }\n .nav-tab span {\n display: none;\n }\n .nav-tab i {\n font-size: 16px;\n }\n .nav-btn {\n width: 32px;\n height: 32px;\n }\n .nav-right {\n gap: 4px;\n }\n }\n\n /* Small Phone adjustments: <= 480px */\n @media (max-width: 480px) {\n .conversation-navigation {\n padding: 0 8px;\n gap: 8px;\n }\n .nav-tab {\n padding: 0 8px;\n font-size: 12px;\n }\n .nav-btn {\n width: 28px;\n height: 28px;\n }\n .nav-btn i {\n font-size: 14px;\n }\n .nav-right .nav-btn:last-child {\n display: none;\n }\n }\n "] }]
105
105
  }], null, { activeTab: [{
106
106
  type: Input
107
107
  }], environmentId: [{
@@ -119,5 +119,5 @@ export class ConversationNavigationComponent {
119
119
  }], navigateToConversation: [{
120
120
  type: Output
121
121
  }] }); })();
122
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationNavigationComponent, { className: "ConversationNavigationComponent", filePath: "src/lib/components/navigation/conversation-navigation.component.ts", lineNumber: 112 }); })();
122
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationNavigationComponent, { className: "ConversationNavigationComponent", filePath: "src/lib/components/navigation/conversation-navigation.component.ts", lineNumber: 166 }); })();
123
123
  //# sourceMappingURL=conversation-navigation.component.js.map
package/dist/lib/components/navigation/conversation-navigation.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"conversation-navigation.component.js","sourceRoot":"","sources":["../../../../src/lib/components/navigation/conversation-navigation.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;;;AA+GvE,MAAM,OAAO,+BAA+B;IACjC,SAAS,GAAkB,eAAe,CAAC;IAC3C,aAAa,CAAU;IACvB,WAAW,CAAY;IACtB,UAAU,GAAG,IAAI,YAAY,EAAiB,CAAC;IAC/C,cAAc,GAAG,IAAI,YAAY,EAAQ,CAAC;IAC1C,eAAe,GAAG,IAAI,YAAY,EAAQ,CAAC;IAC3C,gBAAgB,GAAG,IAAI,YAAY,EAAQ,CAAC;IAC5C,sBAAsB,GAAG,IAAI,YAAY,EAA4C,CAAC;yFARrF,+BAA+B;6DAA/B,+BAA+B;YAtGpC,AADF,AADF,8BAAqC,aACb,gBACmD;YAAhC,4GAAS,yBAAqB,IAAC;YACpE,uBAA2B;YAE/B,AADE,iBAAS,EACL;YAEJ,AADF,8BAAsB,gBAIyB;YAA3C,4GAAS,oBAAgB,eAAe,CAAC,IAAC;YAC1C,uBAA+B;YAC/B,4BAAM;YAAA,qBAAK;YACb,AADa,iBAAO,EACX;YACT,iCAG2C;YAAzC,4GAAS,oBAAgB,aAAa,CAAC,IAAC;YACxC,wBAA6B;YAC7B,6BAAM;YAAA,4BAAW;YACnB,AADmB,iBAAO,EACjB;YACT,kCAGqC;YAAnC,6GAAS,oBAAgB,OAAO,CAAC,IAAC;YAClC,wBAA4B;YAC5B,6BAAM;YAAA,sBAAK;YAEf,AADE,AADa,iBAAO,EACX,EACL;YAEJ,AADF,+BAAuB,6BAG4C;YAA/D,gKAA0B,uCAAmC,IAAC;YAChE,iBAAoB;YACpB,mCAA4F;YAAzD,6GAAS,0BAAsB,IAAC;YACjE,yBAA6B;YAC/B,iBAAS;YACT,mCAAkG;YAA9D,6GAAS,2BAAuB,IAAC;YACnE,yBAA+B;YAGrC,AADE,AADE,iBAAS,EACL,EACF;;YAhCA,eAA8C;YAA9C,2DAA8C;YAO9C,eAA4C;YAA5C,yDAA4C;YAO5C,eAAsC;YAAtC,mDAAsC;YAQtC,eAA2B;YAA3B,6CAA2B;;;iFAyExB,+BAA+B;cA3G3C,SAAS;2BACE,4BAA4B,YAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CT;gBA+DQ,SAAS;kBAAjB,KAAK;YACG,aAAa;kBAArB,KAAK;YACG,WAAW;kBAAnB,KAAK;YACI,UAAU;kBAAnB,MAAM;YACG,cAAc;kBAAvB,MAAM;YACG,eAAe;kBAAxB,MAAM;YACG,gBAAgB;kBAAzB,MAAM;YACG,sBAAsB;kBAA/B,MAAM;;kFARI,+BAA+B"}
1
+ {"version":3,"file":"conversation-navigation.component.js","sourceRoot":"","sources":["../../../../src/lib/components/navigation/conversation-navigation.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;;;AAqKvE,MAAM,OAAO,+BAA+B;IACjC,SAAS,GAAkB,eAAe,CAAC;IAC3C,aAAa,CAAU;IACvB,WAAW,CAAY;IACtB,UAAU,GAAG,IAAI,YAAY,EAAiB,CAAC;IAC/C,cAAc,GAAG,IAAI,YAAY,EAAQ,CAAC;IAC1C,eAAe,GAAG,IAAI,YAAY,EAAQ,CAAC;IAC3C,gBAAgB,GAAG,IAAI,YAAY,EAAQ,CAAC;IAC5C,sBAAsB,GAAG,IAAI,YAAY,EAA4C,CAAC;yFARrF,+BAA+B;6DAA/B,+BAA+B;YA5JpC,AADF,AADF,8BAAqC,aACb,gBACmD;YAAhC,4GAAS,yBAAqB,IAAC;YACpE,uBAA2B;YAE/B,AADE,iBAAS,EACL;YAEJ,AADF,8BAAsB,gBAIyB;YAA3C,4GAAS,oBAAgB,eAAe,CAAC,IAAC;YAC1C,uBAA+B;YAC/B,4BAAM;YAAA,qBAAK;YACb,AADa,iBAAO,EACX;YACT,iCAG2C;YAAzC,4GAAS,oBAAgB,aAAa,CAAC,IAAC;YACxC,wBAA6B;YAC7B,6BAAM;YAAA,4BAAW;YACnB,AADmB,iBAAO,EACjB;YACT,kCAGqC;YAAnC,6GAAS,oBAAgB,OAAO,CAAC,IAAC;YAClC,wBAA4B;YAC5B,6BAAM;YAAA,sBAAK;YAEf,AADE,AADa,iBAAO,EACX,EACL;YAEJ,AADF,+BAAuB,6BAG4C;YAA/D,gKAA0B,uCAAmC,IAAC;YAChE,iBAAoB;YACpB,mCAA4F;YAAzD,6GAAS,0BAAsB,IAAC;YACjE,yBAA6B;YAC/B,iBAAS;YACT,mCAAkG;YAA9D,6GAAS,2BAAuB,IAAC;YACnE,yBAA+B;YAGrC,AADE,AADE,iBAAS,EACL,EACF;;YAhCA,eAA8C;YAA9C,2DAA8C;YAO9C,eAA4C;YAA5C,yDAA4C;YAO5C,eAAsC;YAAtC,mDAAsC;YAQtC,eAA2B;YAA3B,6CAA2B;;;iFA+HxB,+BAA+B;cAjK3C,SAAS;2BACE,4BAA4B,YAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CT;gBAqHQ,SAAS;kBAAjB,KAAK;YACG,aAAa;kBAArB,KAAK;YACG,WAAW;kBAAnB,KAAK;YACI,UAAU;kBAAnB,MAAM;YACG,cAAc;kBAAvB,MAAM;YACG,eAAe;kBAAxB,MAAM;YACG,gBAAgB;kBAAzB,MAAM;YACG,sBAAsB;kBAA/B,MAAM;;kFARI,+BAA+B"}
package/dist/lib/components/tasks/tasks-dropdown.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tasks-dropdown.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tasks/tasks-dropdown.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACrF,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;;AAIrF;;;GAGG;AACH,qBAyWa,sBAAuB,YAAW,MAAM,EAAE,SAAS;IAa5D,OAAO,CAAC,kBAAkB;IAC1B,OAAO,CAAC,iBAAiB;IAblB,WAAW,EAAG,QAAQ,CAAC;IACtB,WAAW,2BAAkC;IAC7C,sBAAsB;wBAAqC,MAAM;gBAAU,MAAM;OAAK;IAEzF,MAAM,EAAE,OAAO,CAAS;IACxB,QAAQ,EAAE,UAAU,EAAE,CAAM;IAC5B,wBAAwB,EAAE,UAAU,EAAE,CAAM;IAC5C,sBAAsB,EAAE,UAAU,EAAE,CAAM;IAEjD,OAAO,CAAC,QAAQ,CAAuB;gBAG7B,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,wBAAwB;IAGrD,QAAQ;IAUR,WAAW;IAKX,OAAO,CAAC,UAAU;IAYlB,cAAc,IAAI,IAAI;IAItB,aAAa,IAAI,IAAI;IAIrB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAcnC,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM;IAaxC,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;yCA/E7B,sBAAsB;2CAAtB,sBAAsB;CAsFlC"}
1
+ {"version":3,"file":"tasks-dropdown.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tasks/tasks-dropdown.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACrF,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;;AAIrF;;;GAGG;AACH,qBA0ca,sBAAuB,YAAW,MAAM,EAAE,SAAS;IAa5D,OAAO,CAAC,kBAAkB;IAC1B,OAAO,CAAC,iBAAiB;IAblB,WAAW,EAAG,QAAQ,CAAC;IACtB,WAAW,2BAAkC;IAC7C,sBAAsB;wBAAqC,MAAM;gBAAU,MAAM;OAAK;IAEzF,MAAM,EAAE,OAAO,CAAS;IACxB,QAAQ,EAAE,UAAU,EAAE,CAAM;IAC5B,wBAAwB,EAAE,UAAU,EAAE,CAAM;IAC5C,sBAAsB,EAAE,UAAU,EAAE,CAAM;IAEjD,OAAO,CAAC,QAAQ,CAAuB;gBAG7B,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,wBAAwB;IAGrD,QAAQ;IAUR,WAAW;IAKX,OAAO,CAAC,UAAU;IAYlB,cAAc,IAAI,IAAI;IAItB,aAAa,IAAI,IAAI;IAIrB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAcnC,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM;IAaxC,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;yCA/E7B,sBAAsB;2CAAtB,sBAAsB;CAsFlC"}
package/dist/lib/components/tasks/tasks-dropdown.component.js CHANGED
@@ -240,7 +240,7 @@ export class TasksDropdownComponent {
240
240
  i0.ɵɵproperty("ngIf", ctx.allTasks.length > 0);
241
241
  i0.ɵɵadvance();
242
242
  i0.ɵɵproperty("ngIf", ctx.isOpen);
243
- } }, dependencies: [i3.NgForOf, i3.NgIf], styles: [".tasks-dropdown-container[_ngcontent-%COMP%] {\n position: relative;\n }\n\n .active-tasks-btn[_ngcontent-%COMP%] {\n position: relative;\n width: 36px;\n height: 36px;\n border-radius: 6px;\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n transition: all 0.2s;\n }\n\n .active-tasks-btn[_ngcontent-%COMP%]:hover {\n background: rgba(255,255,255,0.1);\n color: white;\n }\n\n .active-tasks-btn.active[_ngcontent-%COMP%] {\n background: rgba(255,255,255,0.15);\n color: white;\n }\n\n .active-tasks-btn.has-tasks[_ngcontent-%COMP%] {\n color: #fb923c;\n }\n\n .active-tasks-btn.has-tasks[_ngcontent-%COMP%]:hover {\n color: #f97316;\n }\n\n .task-count-badge[_ngcontent-%COMP%] {\n position: absolute;\n top: -2px;\n right: -2px;\n background: #fb923c;\n color: white;\n padding: 2px 5px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: bold;\n min-width: 16px;\n text-align: center;\n line-height: 1;\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n\n .active-tasks-dropdown[_ngcontent-%COMP%] {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n background: white;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n z-index: 1000;\n min-width: 420px;\n max-width: 500px;\n }\n\n .dropdown-header[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-bottom: 1px solid #E5E7EB;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n color: #111827;\n }\n\n .header-left[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--accent, #1e40af);\n }\n\n .close-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #6B7280;\n cursor: pointer;\n font-size: 18px;\n padding: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n }\n\n .close-btn[_ngcontent-%COMP%]:hover {\n background: #F3F4F6;\n color: #111827;\n }\n\n .dropdown-content[_ngcontent-%COMP%] {\n max-height: 500px;\n overflow-y: auto;\n }\n\n .section[_ngcontent-%COMP%] {\n padding: 12px;\n border-bottom: 1px solid #F3F4F6;\n }\n\n .section[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n }\n\n .section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n font-weight: 600;\n color: #6B7280;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 12px;\n padding: 0 4px;\n }\n\n .section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n }\n\n .active-task-item[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 10px 12px;\n border-radius: 6px;\n background: #F9FAFB;\n border: 1px solid #E5E7EB;\n margin-bottom: 8px;\n transition: all 0.2s ease;\n }\n\n .active-task-item.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n }\n\n .active-task-item.clickable[_ngcontent-%COMP%]:hover {\n background: #EEF2FF;\n border-color: #C7D2FE;\n transform: translateX(2px);\n }\n\n .active-task-item[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n }\n\n .task-status-indicator[_ngcontent-%COMP%] {\n width: 4px;\n border-radius: 2px;\n flex-shrink: 0;\n }\n\n .task-status-indicator.active[_ngcontent-%COMP%] {\n background: #3B82F6;\n animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n }\n\n @keyframes _ngcontent-%COMP%_pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n }\n\n .task-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .task-title[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #111827;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .task-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3B82F6;\n font-size: 12px;\n }\n\n .go-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n color: #3B82F6;\n font-size: 10px;\n opacity: 0.7;\n }\n\n .active-task-item.clickable[_ngcontent-%COMP%]:hover .go-btn[_ngcontent-%COMP%] {\n opacity: 1;\n }\n\n .task-conversation[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #9CA3AF;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .task-conversation[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n }\n\n .task-status-text[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6B7280;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .task-elapsed[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #3B82F6;\n font-weight: 600;\n }\n\n .no-tasks[_ngcontent-%COMP%] {\n padding: 40px 16px;\n text-align: center;\n color: #9CA3AF;\n }\n\n .no-tasks[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 8px;\n opacity: 0.5;\n color: #10B981;\n }\n\n .no-tasks[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n }\n\n \n\n .dropdown-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 6px;\n }\n\n .dropdown-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: #F9FAFB;\n }\n\n .dropdown-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: #D1D5DB;\n border-radius: 3px;\n }\n\n .dropdown-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: #9CA3AF;\n }"] });
243
+ } }, dependencies: [i3.NgForOf, i3.NgIf], styles: [".tasks-dropdown-container[_ngcontent-%COMP%] {\n position: relative;\n }\n\n .active-tasks-btn[_ngcontent-%COMP%] {\n background: transparent;\n color: #6B7280;\n padding: 8px 12px;\n border-radius: 6px;\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n transition: all 0.2s;\n }\n\n .active-tasks-btn[_ngcontent-%COMP%]:hover {\n background: #F9FAFB;\n color: #111827;\n }\n\n .active-tasks-btn.active[_ngcontent-%COMP%] {\n background: #F9FAFB;\n color: #111827;\n }\n\n .task-count-badge[_ngcontent-%COMP%] {\n background: #EF4444;\n color: white;\n padding: 2px 5px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n min-width: 18px;\n text-align: center;\n line-height: 1;\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n\n .active-tasks-dropdown[_ngcontent-%COMP%] {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n background: white;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n z-index: 1000;\n min-width: 420px;\n max-width: 500px;\n }\n\n .dropdown-header[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-bottom: 1px solid #E5E7EB;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n color: #111827;\n }\n\n .header-left[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--accent, #1e40af);\n }\n\n .close-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #6B7280;\n cursor: pointer;\n font-size: 18px;\n padding: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n }\n\n .close-btn[_ngcontent-%COMP%]:hover {\n background: #F3F4F6;\n color: #111827;\n }\n\n .dropdown-content[_ngcontent-%COMP%] {\n max-height: 500px;\n overflow-y: auto;\n }\n\n .section[_ngcontent-%COMP%] {\n padding: 12px;\n border-bottom: 1px solid #F3F4F6;\n }\n\n .section[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n }\n\n .section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n font-weight: 600;\n color: #6B7280;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 12px;\n padding: 0 4px;\n }\n\n .section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n }\n\n .active-task-item[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 10px 12px;\n border-radius: 6px;\n background: #F9FAFB;\n border: 1px solid #E5E7EB;\n margin-bottom: 8px;\n transition: all 0.2s ease;\n }\n\n .active-task-item.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n }\n\n .active-task-item.clickable[_ngcontent-%COMP%]:hover {\n background: #EEF2FF;\n border-color: #C7D2FE;\n transform: translateX(2px);\n }\n\n .active-task-item[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n }\n\n .task-status-indicator[_ngcontent-%COMP%] {\n width: 4px;\n border-radius: 2px;\n flex-shrink: 0;\n }\n\n .task-status-indicator.active[_ngcontent-%COMP%] {\n background: #3B82F6;\n animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n }\n\n @keyframes _ngcontent-%COMP%_pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n }\n\n .task-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .task-title[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #111827;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .task-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3B82F6;\n font-size: 12px;\n }\n\n .go-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n color: #3B82F6;\n font-size: 10px;\n opacity: 0.7;\n }\n\n .active-task-item.clickable[_ngcontent-%COMP%]:hover .go-btn[_ngcontent-%COMP%] {\n opacity: 1;\n }\n\n .task-conversation[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #9CA3AF;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .task-conversation[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n }\n\n .task-status-text[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6B7280;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .task-elapsed[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #3B82F6;\n font-weight: 600;\n }\n\n .no-tasks[_ngcontent-%COMP%] {\n padding: 40px 16px;\n text-align: center;\n color: #9CA3AF;\n }\n\n .no-tasks[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 8px;\n opacity: 0.5;\n color: #10B981;\n }\n\n .no-tasks[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n }\n\n mj-task-widget[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 8px;\n }\n\n mj-task-widget[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n }\n\n \n\n @media (max-width: 768px) {\n .active-tasks-btn[_ngcontent-%COMP%] {\n padding: 6px 10px;\n font-size: 12px;\n }\n\n .active-tasks-dropdown[_ngcontent-%COMP%] {\n position: fixed;\n top: auto;\n right: 8px;\n left: 8px;\n bottom: 8px;\n min-width: unset;\n max-width: unset;\n max-height: 60vh;\n }\n\n .dropdown-header[_ngcontent-%COMP%] {\n padding: 10px 12px;\n }\n\n .dropdown-content[_ngcontent-%COMP%] {\n max-height: calc(60vh - 48px);\n }\n\n .section[_ngcontent-%COMP%] {\n padding: 10px;\n }\n\n .section-header[_ngcontent-%COMP%] {\n font-size: 11px;\n margin-bottom: 10px;\n }\n\n .active-task-item[_ngcontent-%COMP%] {\n padding: 8px 10px;\n }\n\n .task-title[_ngcontent-%COMP%] {\n font-size: 13px;\n }\n\n .task-status-text[_ngcontent-%COMP%] {\n font-size: 11px;\n }\n\n .task-elapsed[_ngcontent-%COMP%] {\n font-size: 10px;\n }\n }\n\n \n\n @media (max-width: 480px) {\n .active-tasks-btn[_ngcontent-%COMP%] {\n padding: 4px 8px;\n font-size: 11px;\n }\n\n .active-tasks-dropdown[_ngcontent-%COMP%] {\n right: 4px;\n left: 4px;\n bottom: 4px;\n max-height: 70vh;\n }\n\n .dropdown-header[_ngcontent-%COMP%] {\n padding: 8px 10px;\n }\n\n .header-left[_ngcontent-%COMP%] {\n font-size: 13px;\n }\n\n .dropdown-content[_ngcontent-%COMP%] {\n max-height: calc(70vh - 44px);\n }\n\n .section[_ngcontent-%COMP%] {\n padding: 8px;\n }\n\n .section-header[_ngcontent-%COMP%] {\n font-size: 10px;\n margin-bottom: 8px;\n }\n\n .active-task-item[_ngcontent-%COMP%] {\n padding: 6px 8px;\n gap: 8px;\n }\n\n .task-title[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .task-status-text[_ngcontent-%COMP%] {\n font-size: 10px;\n }\n\n .task-elapsed[_ngcontent-%COMP%] {\n font-size: 9px;\n }\n\n .no-tasks[_ngcontent-%COMP%] {\n padding: 30px 12px;\n }\n\n .no-tasks[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 28px;\n }\n\n .no-tasks[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 13px;\n }\n }"] });
244
244
  }
245
245
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TasksDropdownComponent, [{
246
246
  type: Component,
@@ -326,7 +326,7 @@ export class TasksDropdownComponent {
326
326
  </div>
327
327
  </div>
328
328
  </div>
329
- `, styles: ["\n .tasks-dropdown-container {\n position: relative;\n }\n\n .active-tasks-btn {\n position: relative;\n width: 36px;\n height: 36px;\n border-radius: 6px;\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n transition: all 0.2s;\n }\n\n .active-tasks-btn:hover {\n background: rgba(255,255,255,0.1);\n color: white;\n }\n\n .active-tasks-btn.active {\n background: rgba(255,255,255,0.15);\n color: white;\n }\n\n .active-tasks-btn.has-tasks {\n color: #fb923c;\n }\n\n .active-tasks-btn.has-tasks:hover {\n color: #f97316;\n }\n\n .task-count-badge {\n position: absolute;\n top: -2px;\n right: -2px;\n background: #fb923c;\n color: white;\n padding: 2px 5px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: bold;\n min-width: 16px;\n text-align: center;\n line-height: 1;\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n\n .active-tasks-dropdown {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n background: white;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n z-index: 1000;\n min-width: 420px;\n max-width: 500px;\n }\n\n .dropdown-header {\n padding: 12px 16px;\n border-bottom: 1px solid #E5E7EB;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header-left {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n color: #111827;\n }\n\n .header-left i {\n color: var(--accent, #1e40af);\n }\n\n .close-btn {\n background: none;\n border: none;\n color: #6B7280;\n cursor: pointer;\n font-size: 18px;\n padding: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n }\n\n .close-btn:hover {\n background: #F3F4F6;\n color: #111827;\n }\n\n .dropdown-content {\n max-height: 500px;\n overflow-y: auto;\n }\n\n .section {\n padding: 12px;\n border-bottom: 1px solid #F3F4F6;\n }\n\n .section:last-child {\n border-bottom: none;\n }\n\n .section-header {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n font-weight: 600;\n color: #6B7280;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 12px;\n padding: 0 4px;\n }\n\n .section-header i {\n font-size: 11px;\n }\n\n .active-task-item {\n display: flex;\n gap: 12px;\n padding: 10px 12px;\n border-radius: 6px;\n background: #F9FAFB;\n border: 1px solid #E5E7EB;\n margin-bottom: 8px;\n transition: all 0.2s ease;\n }\n\n .active-task-item.clickable {\n cursor: pointer;\n }\n\n .active-task-item.clickable:hover {\n background: #EEF2FF;\n border-color: #C7D2FE;\n transform: translateX(2px);\n }\n\n .active-task-item:last-child {\n margin-bottom: 0;\n }\n\n .task-status-indicator {\n width: 4px;\n border-radius: 2px;\n flex-shrink: 0;\n }\n\n .task-status-indicator.active {\n background: #3B82F6;\n animation: pulse 2s ease-in-out infinite;\n }\n\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n }\n\n .task-content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .task-title {\n font-size: 14px;\n font-weight: 600;\n color: #111827;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .task-title i {\n color: #3B82F6;\n font-size: 12px;\n }\n\n .go-btn {\n margin-left: auto;\n color: #3B82F6;\n font-size: 10px;\n opacity: 0.7;\n }\n\n .active-task-item.clickable:hover .go-btn {\n opacity: 1;\n }\n\n .task-conversation {\n font-size: 11px;\n color: #9CA3AF;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .task-conversation i {\n font-size: 10px;\n }\n\n .task-status-text {\n font-size: 12px;\n color: #6B7280;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .task-elapsed {\n font-size: 11px;\n color: #3B82F6;\n font-weight: 600;\n }\n\n .no-tasks {\n padding: 40px 16px;\n text-align: center;\n color: #9CA3AF;\n }\n\n .no-tasks i {\n font-size: 32px;\n margin-bottom: 8px;\n opacity: 0.5;\n color: #10B981;\n }\n\n .no-tasks p {\n margin: 0;\n font-size: 14px;\n }\n\n /* Scrollbar Styling */\n .dropdown-content::-webkit-scrollbar {\n width: 6px;\n }\n\n .dropdown-content::-webkit-scrollbar-track {\n background: #F9FAFB;\n }\n\n .dropdown-content::-webkit-scrollbar-thumb {\n background: #D1D5DB;\n border-radius: 3px;\n }\n\n .dropdown-content::-webkit-scrollbar-thumb:hover {\n background: #9CA3AF;\n }\n "] }]
329
+ `, styles: ["\n .tasks-dropdown-container {\n position: relative;\n }\n\n .active-tasks-btn {\n background: transparent;\n color: #6B7280;\n padding: 8px 12px;\n border-radius: 6px;\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n transition: all 0.2s;\n }\n\n .active-tasks-btn:hover {\n background: #F9FAFB;\n color: #111827;\n }\n\n .active-tasks-btn.active {\n background: #F9FAFB;\n color: #111827;\n }\n\n .task-count-badge {\n background: #EF4444;\n color: white;\n padding: 2px 5px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n min-width: 18px;\n text-align: center;\n line-height: 1;\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n\n .active-tasks-dropdown {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n background: white;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n z-index: 1000;\n min-width: 420px;\n max-width: 500px;\n }\n\n .dropdown-header {\n padding: 12px 16px;\n border-bottom: 1px solid #E5E7EB;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header-left {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n color: #111827;\n }\n\n .header-left i {\n color: var(--accent, #1e40af);\n }\n\n .close-btn {\n background: none;\n border: none;\n color: #6B7280;\n cursor: pointer;\n font-size: 18px;\n padding: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n }\n\n .close-btn:hover {\n background: #F3F4F6;\n color: #111827;\n }\n\n .dropdown-content {\n max-height: 500px;\n overflow-y: auto;\n }\n\n .section {\n padding: 12px;\n border-bottom: 1px solid #F3F4F6;\n }\n\n .section:last-child {\n border-bottom: none;\n }\n\n .section-header {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n font-weight: 600;\n color: #6B7280;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 12px;\n padding: 0 4px;\n }\n\n .section-header i {\n font-size: 11px;\n }\n\n .active-task-item {\n display: flex;\n gap: 12px;\n padding: 10px 12px;\n border-radius: 6px;\n background: #F9FAFB;\n border: 1px solid #E5E7EB;\n margin-bottom: 8px;\n transition: all 0.2s ease;\n }\n\n .active-task-item.clickable {\n cursor: pointer;\n }\n\n .active-task-item.clickable:hover {\n background: #EEF2FF;\n border-color: #C7D2FE;\n transform: translateX(2px);\n }\n\n .active-task-item:last-child {\n margin-bottom: 0;\n }\n\n .task-status-indicator {\n width: 4px;\n border-radius: 2px;\n flex-shrink: 0;\n }\n\n .task-status-indicator.active {\n background: #3B82F6;\n animation: pulse 2s ease-in-out infinite;\n }\n\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n }\n\n .task-content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .task-title {\n font-size: 14px;\n font-weight: 600;\n color: #111827;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .task-title i {\n color: #3B82F6;\n font-size: 12px;\n }\n\n .go-btn {\n margin-left: auto;\n color: #3B82F6;\n font-size: 10px;\n opacity: 0.7;\n }\n\n .active-task-item.clickable:hover .go-btn {\n opacity: 1;\n }\n\n .task-conversation {\n font-size: 11px;\n color: #9CA3AF;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .task-conversation i {\n font-size: 10px;\n }\n\n .task-status-text {\n font-size: 12px;\n color: #6B7280;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .task-elapsed {\n font-size: 11px;\n color: #3B82F6;\n font-weight: 600;\n }\n\n .no-tasks {\n padding: 40px 16px;\n text-align: center;\n color: #9CA3AF;\n }\n\n .no-tasks i {\n font-size: 32px;\n margin-bottom: 8px;\n opacity: 0.5;\n color: #10B981;\n }\n\n .no-tasks p {\n margin: 0;\n font-size: 14px;\n }\n\n mj-task-widget {\n display: block;\n margin-bottom: 8px;\n }\n\n mj-task-widget:last-child {\n margin-bottom: 0;\n }\n\n /* Mobile adjustments: 481px - 768px */\n @media (max-width: 768px) {\n .active-tasks-btn {\n padding: 6px 10px;\n font-size: 12px;\n }\n\n .active-tasks-dropdown {\n position: fixed;\n top: auto;\n right: 8px;\n left: 8px;\n bottom: 8px;\n min-width: unset;\n max-width: unset;\n max-height: 60vh;\n }\n\n .dropdown-header {\n padding: 10px 12px;\n }\n\n .dropdown-content {\n max-height: calc(60vh - 48px);\n }\n\n .section {\n padding: 10px;\n }\n\n .section-header {\n font-size: 11px;\n margin-bottom: 10px;\n }\n\n .active-task-item {\n padding: 8px 10px;\n }\n\n .task-title {\n font-size: 13px;\n }\n\n .task-status-text {\n font-size: 11px;\n }\n\n .task-elapsed {\n font-size: 10px;\n }\n }\n\n /* Small Phone adjustments: <= 480px */\n @media (max-width: 480px) {\n .active-tasks-btn {\n padding: 4px 8px;\n font-size: 11px;\n }\n\n .active-tasks-dropdown {\n right: 4px;\n left: 4px;\n bottom: 4px;\n max-height: 70vh;\n }\n\n .dropdown-header {\n padding: 8px 10px;\n }\n\n .header-left {\n font-size: 13px;\n }\n\n .dropdown-content {\n max-height: calc(70vh - 44px);\n }\n\n .section {\n padding: 8px;\n }\n\n .section-header {\n font-size: 10px;\n margin-bottom: 8px;\n }\n\n .active-task-item {\n padding: 6px 8px;\n gap: 8px;\n }\n\n .task-title {\n font-size: 12px;\n }\n\n .task-status-text {\n font-size: 10px;\n }\n\n .task-elapsed {\n font-size: 9px;\n }\n\n .no-tasks {\n padding: 30px 12px;\n }\n\n .no-tasks i {\n font-size: 28px;\n }\n\n .no-tasks p {\n font-size: 13px;\n }\n }\n "] }]
330
330
  }], () => [{ type: i1.ActiveTasksService }, { type: i2.ConversationStateService }], { currentUser: [{
331
331
  type: Input
332
332
  }], taskClicked: [{
@@ -334,5 +334,5 @@ export class TasksDropdownComponent {
334
334
  }], navigateToConversation: [{
335
335
  type: Output
336
336
  }] }); })();
337
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TasksDropdownComponent, { className: "TasksDropdownComponent", filePath: "src/lib/components/tasks/tasks-dropdown.component.ts", lineNumber: 373 }); })();
337
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TasksDropdownComponent, { className: "TasksDropdownComponent", filePath: "src/lib/components/tasks/tasks-dropdown.component.ts", lineNumber: 470 }); })();
338
338
  //# sourceMappingURL=tasks-dropdown.component.js.map
package/dist/lib/components/tasks/tasks-dropdown.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tasks-dropdown.component.js","sourceRoot":"","sources":["../../../../src/lib/components/tasks/tasks-dropdown.component.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"tasks-dropdown.component.js","sourceRoot":"","sources":["../../../../src/lib/components/tasks/tasks-dropdown.component.ts"],"names":[],"mappings":"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"}
package/dist/lib/components/workspace/conversation-workspace.component.d.ts CHANGED
@@ -57,6 +57,7 @@ export declare class ConversationWorkspaceComponent extends BaseAngularComponent
57
57
  activeArtifactId: string | null;
58
58
  activeVersionNumber: number | null;
59
59
  activeVersionId: string | null;
60
+ isMobileView: boolean;
60
61
  canShareActiveArtifact: boolean;
61
62
  canEditActiveArtifact: boolean;
62
63
  isArtifactShareModalOpen: boolean;
@@ -85,8 +86,11 @@ export declare class ConversationWorkspaceComponent extends BaseAngularComponent
85
86
  private buildTasksFilter;
86
87
  ngDoCheck(): void;
87
88
  ngOnDestroy(): void;
89
+ onWindowResize(): void;
90
+ private checkMobileView;
88
91
  onTabChanged(tab: NavigationTab): void;
89
92
  toggleSidebar(): void;
93
+ closeSidebar(): void;
90
94
  closeArtifactPanel(): void;
91
95
  openSearch(): void;
92
96
  closeSearch(): void;
@@ -102,6 +106,13 @@ export declare class ConversationWorkspaceComponent extends BaseAngularComponent
102
106
  onArtifactPanelResizeStart(event: MouseEvent): void;
103
107
  private onResizeMove;
104
108
  private onResizeEnd;
109
+ /**
110
+ * Touch event handlers for mobile resize support
111
+ */
112
+ onSidebarResizeTouchStart(event: TouchEvent): void;
113
+ onArtifactPanelResizeTouchStart(event: TouchEvent): void;
114
+ private onResizeTouchMove;
115
+ private onResizeTouchEnd;
105
116
  /**
106
117
  * LocalStorage persistence methods
107
118
  */
package/dist/lib/components/workspace/conversation-workspace.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"conversation-workspace.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/workspace/conversation-workspace.component.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"conversation-workspace.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/workspace/conversation-workspace.component.ts"],"names":[],"mappings":"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"}