@memberjunction/ng-conversations 5.11.0 → 5.13.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.
- package/dist/lib/components/active-tasks/active-tasks-panel.component.js +2 -2
- package/dist/lib/components/active-tasks/active-tasks-panel.component.js.map +1 -1
- package/dist/lib/components/artifact/artifact-share-modal.component.js +2 -2
- package/dist/lib/components/attachment/image-viewer.component.js +2 -2
- package/dist/lib/components/collection/artifact-collection-picker-modal.component.js +4 -4
- package/dist/lib/components/collection/artifact-collection-picker-modal.component.js.map +1 -1
- package/dist/lib/components/collection/artifact-create-modal.component.js +2 -2
- package/dist/lib/components/collection/artifact-create-modal.component.js.map +1 -1
- package/dist/lib/components/collection/collection-artifact-card.component.js +2 -2
- package/dist/lib/components/collection/collection-artifact-card.component.js.map +1 -1
- package/dist/lib/components/collection/collection-form-modal.component.js +2 -2
- package/dist/lib/components/collection/collection-form-modal.component.js.map +1 -1
- package/dist/lib/components/collection/collection-share-modal.component.js +2 -2
- package/dist/lib/components/collection/collection-tree.component.js +2 -2
- package/dist/lib/components/collection/collection-tree.component.js.map +1 -1
- package/dist/lib/components/collection/collection-view.component.js +2 -2
- package/dist/lib/components/collection/collection-view.component.js.map +1 -1
- package/dist/lib/components/collection/collections-full-view.component.js +2 -2
- package/dist/lib/components/collection/collections-full-view.component.js.map +1 -1
- package/dist/lib/components/conversation/conversation-chat-area.component.d.ts +9 -1
- package/dist/lib/components/conversation/conversation-chat-area.component.d.ts.map +1 -1
- package/dist/lib/components/conversation/conversation-chat-area.component.js +32 -6
- package/dist/lib/components/conversation/conversation-chat-area.component.js.map +1 -1
- package/dist/lib/components/conversation/conversation-empty-state.component.d.ts +6 -0
- package/dist/lib/components/conversation/conversation-empty-state.component.d.ts.map +1 -1
- package/dist/lib/components/conversation/conversation-empty-state.component.js +26 -5
- package/dist/lib/components/conversation/conversation-empty-state.component.js.map +1 -1
- package/dist/lib/components/conversation/conversation-list.component.js +2 -2
- package/dist/lib/components/conversation/conversation-list.component.js.map +1 -1
- package/dist/lib/components/export/export-modal.component.d.ts.map +1 -1
- package/dist/lib/components/export/export-modal.component.js +3 -3
- package/dist/lib/components/export/export-modal.component.js.map +1 -1
- package/dist/lib/components/global-tasks/global-tasks-panel.component.js +2 -2
- package/dist/lib/components/global-tasks/global-tasks-panel.component.js.map +1 -1
- package/dist/lib/components/mention/mention-dropdown.component.js +2 -2
- package/dist/lib/components/mention/mention-editor.component.js +2 -2
- package/dist/lib/components/message/actionable-commands.component.js +2 -2
- package/dist/lib/components/message/conversation-message-rating.component.js +2 -2
- package/dist/lib/components/message/conversation-message-rating.component.js.map +1 -1
- package/dist/lib/components/message/message-input-box.component.js +2 -2
- package/dist/lib/components/message/message-input.component.js +2 -2
- package/dist/lib/components/message/message-item.component.d.ts +5 -4
- package/dist/lib/components/message/message-item.component.d.ts.map +1 -1
- package/dist/lib/components/message/message-item.component.js +33 -123
- package/dist/lib/components/message/message-item.component.js.map +1 -1
- package/dist/lib/components/message/message-list.component.js +2 -2
- package/dist/lib/components/message/suggested-responses.component.js +2 -2
- package/dist/lib/components/search/search-panel.component.js +2 -2
- package/dist/lib/components/sidebar/conversation-sidebar.component.js +2 -2
- package/dist/lib/components/sidebar/conversation-sidebar.component.js.map +1 -1
- package/dist/lib/components/task/tasks-full-view.component.js +2 -2
- package/dist/lib/components/task/tasks-full-view.component.js.map +1 -1
- package/dist/lib/components/tasks/task-widget.component.js +2 -2
- package/dist/lib/components/tasks/task-widget.component.js.map +1 -1
- package/dist/lib/components/tasks/tasks-dropdown.component.d.ts.map +1 -1
- package/dist/lib/components/tasks/tasks-dropdown.component.js +3 -3
- package/dist/lib/components/tasks/tasks-dropdown.component.js.map +1 -1
- package/dist/lib/components/thread/thread-panel.component.js +2 -2
- package/dist/lib/components/toast/toast.component.js +2 -2
- package/dist/lib/components/toast/toast.component.js.map +1 -1
- package/dist/lib/components/workspace/conversation-workspace.component.js +2 -2
- package/dist/lib/conversations.module.d.ts +61 -62
- package/dist/lib/conversations.module.d.ts.map +1 -1
- package/dist/lib/conversations.module.js +4 -8
- package/dist/lib/conversations.module.js.map +1 -1
- package/package.json +18 -17
- package/dist/lib/components/message/agent-response-form.component.d.ts +0 -90
- package/dist/lib/components/message/agent-response-form.component.d.ts.map +0 -1
- package/dist/lib/components/message/agent-response-form.component.js +0 -435
- package/dist/lib/components/message/agent-response-form.component.js.map +0 -1
- package/dist/lib/components/message/form-question.component.d.ts +0 -105
- package/dist/lib/components/message/form-question.component.d.ts.map +0 -1
- package/dist/lib/components/message/form-question.component.js +0 -638
- package/dist/lib/components/message/form-question.component.js.map +0 -1
|
@@ -306,7 +306,7 @@ export class TasksDropdownComponent {
|
|
|
306
306
|
i0.ɵɵconditional(ctx.allTasks.length > 0 ? 3 : -1);
|
|
307
307
|
i0.ɵɵadvance();
|
|
308
308
|
i0.ɵɵconditional(ctx.isOpen ? 4 : -1);
|
|
309
|
-
} }, styles: [".tasks-dropdown-container[_ngcontent-%COMP%] {\n position: relative;\n }\n\n .active-tasks-btn[_ngcontent-%COMP%] {\n background: transparent;\n
|
|
309
|
+
} }, styles: [".tasks-dropdown-container[_ngcontent-%COMP%] {\n position: relative;\n }\n\n .active-tasks-btn[_ngcontent-%COMP%] {\n background: transparent;\n padding: 8px 12px;\n border-radius: 6px;\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: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .active-tasks-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .task-count-badge[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\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: var(--mj-shadow-sm);\n }\n\n .active-tasks-dropdown[_ngcontent-%COMP%] {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n box-shadow: var(--mj-shadow-lg);\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 var(--mj-border-default);\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: var(--mj-text-primary);\n }\n\n .header-left[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n }\n\n .close-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\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 var(--mj-border-default);\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: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\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: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\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: var(--mj-brand-primary);\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: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .task-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 12px;\n }\n\n .task-title[_ngcontent-%COMP%] .agent-logo[_ngcontent-%COMP%] {\n width: 14px;\n height: 14px;\n object-fit: contain;\n flex-shrink: 0;\n }\n\n .go-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n color: var(--mj-brand-primary);\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: var(--mj-text-disabled);\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: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .task-elapsed[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-brand-primary);\n font-weight: 600;\n }\n\n .no-tasks[_ngcontent-%COMP%] {\n padding: 40px 16px;\n text-align: center;\n color: var(--mj-text-disabled);\n }\n\n .no-tasks[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 8px;\n opacity: 0.5;\n color: var(--mj-status-success);\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 }"] });
|
|
310
310
|
}
|
|
311
311
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TasksDropdownComponent, [{
|
|
312
312
|
type: Component,
|
|
@@ -425,7 +425,7 @@ export class TasksDropdownComponent {
|
|
|
425
425
|
</div>
|
|
426
426
|
}
|
|
427
427
|
</div>
|
|
428
|
-
`, styles: ["\n .tasks-dropdown-container {\n position: relative;\n }\n\n .active-tasks-btn {\n background: transparent;\n
|
|
428
|
+
`, styles: ["\n .tasks-dropdown-container {\n position: relative;\n }\n\n .active-tasks-btn {\n background: transparent;\n padding: 8px 12px;\n border-radius: 6px;\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: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .active-tasks-btn.active {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .task-count-badge {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\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: var(--mj-shadow-sm);\n }\n\n .active-tasks-dropdown {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n box-shadow: var(--mj-shadow-lg);\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 var(--mj-border-default);\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: var(--mj-text-primary);\n }\n\n .header-left i {\n color: var(--mj-brand-primary);\n }\n\n .close-btn {\n background: none;\n border: none;\n color: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\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 var(--mj-border-default);\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: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\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: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\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: var(--mj-brand-primary);\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: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .task-title i {\n color: var(--mj-brand-primary);\n font-size: 12px;\n }\n\n .task-title .agent-logo {\n width: 14px;\n height: 14px;\n object-fit: contain;\n flex-shrink: 0;\n }\n\n .go-btn {\n margin-left: auto;\n color: var(--mj-brand-primary);\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: var(--mj-text-disabled);\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: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .task-elapsed {\n font-size: 11px;\n color: var(--mj-brand-primary);\n font-weight: 600;\n }\n\n .no-tasks {\n padding: 40px 16px;\n text-align: center;\n color: var(--mj-text-disabled);\n }\n\n .no-tasks i {\n font-size: 32px;\n margin-bottom: 8px;\n opacity: 0.5;\n color: var(--mj-status-success);\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 "] }]
|
|
429
429
|
}], () => [{ type: i1.ActiveTasksService }], { currentUser: [{
|
|
430
430
|
type: Input
|
|
431
431
|
}], conversationId: [{
|
|
@@ -435,5 +435,5 @@ export class TasksDropdownComponent {
|
|
|
435
435
|
}], navigateToConversation: [{
|
|
436
436
|
type: Output
|
|
437
437
|
}] }); })();
|
|
438
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TasksDropdownComponent, { className: "TasksDropdownComponent", filePath: "src/lib/components/tasks/tasks-dropdown.component.ts", lineNumber:
|
|
438
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TasksDropdownComponent, { className: "TasksDropdownComponent", filePath: "src/lib/components/tasks/tasks-dropdown.component.ts", lineNumber: 509 }); })();
|
|
439
439
|
//# sourceMappingURL=tasks-dropdown.component.js.map
|
|
@@ -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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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';\nimport { UserInfo } from '@memberjunction/core';\nimport { ActiveTasksService, ActiveTask } from '../../services/active-tasks.service';\nimport { AIEngineBase } from '@memberjunction/ai-engine-base';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\n/**\n * Enhanced tasks dropdown component for chat header.\n * Shows ALL active tasks across ALL conversations, grouped by current vs other\n */\n@Component({\n standalone: false,\n selector: 'mj-tasks-dropdown',\n template: `\n <div class=\"tasks-dropdown-container\">\n <button\n class=\"active-tasks-btn\"\n (click)=\"toggleDropdown()\"\n [class.active]=\"isOpen\"\n [class.has-tasks]=\"allTasks.length > 0\"\n [title]=\"allTasks.length > 0 ? allTasks.length + ' active task' + (allTasks.length > 1 ? 's' : '') : 'View tasks'\">\n <i class=\"fas fa-bolt\"></i>\n @if (allTasks.length > 0) {\n <span class=\"task-count-badge\">{{ allTasks.length }}</span>\n }\n </button>\n \n @if (isOpen) {\n <div class=\"active-tasks-dropdown\">\n <div class=\"dropdown-header\">\n <div class=\"header-left\">\n @if (allTasks.length > 0) {\n <i class=\"fas fa-circle-notch fa-spin\"></i>\n }\n @if (allTasks.length === 0) {\n <i class=\"fas fa-tasks\"></i>\n }\n <span>Active Tasks ({{ allTasks.length }})</span>\n </div>\n <button class=\"close-btn\" (click)=\"closeDropdown()\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"dropdown-content\">\n <!-- Current Conversation Tasks -->\n @if (currentConversationTasks.length > 0) {\n <div class=\"section\">\n <div class=\"section-header\">\n <i class=\"fas fa-comment\"></i>\n <span>Current Conversation ({{ currentConversationTasks.length }})</span>\n </div>\n @for (task of currentConversationTasks; track task) {\n <div class=\"active-task-item\"\n (click)=\"onTaskClick(task)\">\n <div class=\"task-status-indicator active\"></div>\n <div class=\"task-content\">\n <div class=\"task-title\">\n @if (getAgentLogoUrl(task.agentName)) {\n <img\n [src]=\"getAgentLogoUrl(task.agentName)\"\n class=\"agent-logo\"\n [alt]=\"task.agentName\" />\n }\n @if (!getAgentLogoUrl(task.agentName)) {\n <i\n [class]=\"getAgentIconClass(task.agentName)\"></i>\n }\n {{ task.agentName }}\n </div>\n <div class=\"task-status-text\">{{ getTrimmedStatus(task.status) }}</div>\n <div class=\"task-elapsed\">{{ getElapsedTime(task) }}</div>\n </div>\n </div>\n }\n </div>\n }\n <!-- Other Conversations Tasks -->\n @if (otherConversationTasks.length > 0) {\n <div class=\"section\">\n <div class=\"section-header\">\n <i class=\"fas fa-comments\"></i>\n <span>Other Conversations ({{ otherConversationTasks.length }})</span>\n </div>\n @for (task of otherConversationTasks; track task) {\n <div class=\"active-task-item clickable\"\n (click)=\"onTaskClick(task)\">\n <div class=\"task-status-indicator active\"></div>\n <div class=\"task-content\">\n <div class=\"task-title\">\n @if (getAgentLogoUrl(task.agentName)) {\n <img\n [src]=\"getAgentLogoUrl(task.agentName)\"\n class=\"agent-logo\"\n [alt]=\"task.agentName\" />\n }\n @if (!getAgentLogoUrl(task.agentName)) {\n <i\n [class]=\"getAgentIconClass(task.agentName)\"></i>\n }\n {{ task.agentName }}\n <span class=\"go-btn\">\n <i class=\"fas fa-arrow-right\"></i>\n </span>\n </div>\n @if (task.conversationName) {\n <div class=\"task-conversation\">\n <i class=\"fas fa-message\"></i>\n {{ task.conversationName }}\n </div>\n }\n <div class=\"task-status-text\">{{ getTrimmedStatus(task.status) }}</div>\n <div class=\"task-elapsed\">{{ getElapsedTime(task) }}</div>\n </div>\n </div>\n }\n </div>\n }\n <!-- No Tasks State -->\n @if (allTasks.length === 0) {\n <div class=\"no-tasks\">\n <i class=\"fas fa-check-circle\"></i>\n <p>No active tasks</p>\n </div>\n }\n </div>\n </div>\n }\n </div>\n `,\n 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 .task-title .agent-logo {\n width: 14px;\n height: 14px;\n object-fit: contain;\n flex-shrink: 0;\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 `]\n})\nexport class TasksDropdownComponent implements OnInit, OnDestroy {\n @Input() currentUser!: UserInfo;\n @Input() conversationId: string | null = null;\n @Output() taskClicked = new EventEmitter<ActiveTask>();\n @Output() navigateToConversation = new EventEmitter<{conversationId: string; taskId: string}>();\n\n public isOpen: boolean = false;\n public allTasks: ActiveTask[] = [];\n public currentConversationTasks: ActiveTask[] = [];\n public otherConversationTasks: ActiveTask[] = [];\n\n private destroy$ = new Subject<void>();\n\n constructor(\n private activeTasksService: ActiveTasksService\n ) {}\n\n ngOnInit() {\n // Subscribe to ALL active tasks across ALL conversations\n this.activeTasksService.tasks$\n .pipe(takeUntil(this.destroy$))\n .subscribe(tasks => {\n this.allTasks = tasks;\n this.groupTasks();\n });\n }\n\n ngOnDestroy() {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n private groupTasks(): void {\n this.currentConversationTasks = this.allTasks.filter(\n task => task.conversationId === this.conversationId\n );\n\n this.otherConversationTasks = this.allTasks.filter(\n task => task.conversationId && task.conversationId !== this.conversationId\n );\n }\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n closeDropdown(): void {\n this.isOpen = false;\n }\n\n onTaskClick(task: ActiveTask): void {\n // If task is from another conversation, emit navigation event\n if (task.conversationId && task.conversationId !== this.conversationId) {\n this.navigateToConversation.emit({\n conversationId: task.conversationId,\n taskId: task.id\n });\n }\n\n this.taskClicked.emit(task);\n this.closeDropdown();\n }\n\n getElapsedTime(task: ActiveTask): string {\n const elapsed = Date.now() - task.startTime;\n const seconds = Math.floor(elapsed / 1000);\n\n if (seconds < 60) {\n return `${seconds}s`;\n }\n\n const minutes = Math.floor(seconds / 60);\n const remainingSeconds = seconds % 60;\n return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;\n }\n\n getTrimmedStatus(status: string): string {\n const maxLength = 50;\n if (status.length <= maxLength) {\n return status;\n }\n return status.substring(0, maxLength) + '...';\n }\n\n /**\n * Get agent icon class by looking up agent in AIEngineBase cache\n * Similar to message-item component's aiAgentInfo getter\n */\n getAgentIconClass(agentName: string): string {\n // Look up agent from AIEngineBase cache by name\n if (AIEngineBase.Instance?.Agents) {\n const agent = AIEngineBase.Instance.Agents.find(a => a.Name === agentName);\n if (agent?.IconClass) {\n return agent.IconClass;\n }\n }\n\n // Default fallback icon\n return 'fas fa-robot';\n }\n\n /**\n * Get agent logo URL by looking up agent in AIEngineBase cache\n * Returns null if no logo URL is available\n */\n getAgentLogoUrl(agentName: string): string | null {\n // Look up agent from AIEngineBase cache by name\n if (AIEngineBase.Instance?.Agents) {\n const agent = AIEngineBase.Instance.Agents.find(a => a.Name === agentName);\n if (agent?.LogoURL) {\n return agent.LogoURL;\n }\n }\n\n return null;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tasks-dropdown.component.js","sourceRoot":"","sources":["../../../../src/lib/components/tasks/tasks-dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';\nimport { UserInfo } from '@memberjunction/core';\nimport { ActiveTasksService, ActiveTask } from '../../services/active-tasks.service';\nimport { AIEngineBase } from '@memberjunction/ai-engine-base';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\n/**\n * Enhanced tasks dropdown component for chat header.\n * Shows ALL active tasks across ALL conversations, grouped by current vs other\n */\n@Component({\n standalone: false,\n selector: 'mj-tasks-dropdown',\n template: `\n <div class=\"tasks-dropdown-container\">\n <button\n class=\"active-tasks-btn\"\n (click)=\"toggleDropdown()\"\n [class.active]=\"isOpen\"\n [class.has-tasks]=\"allTasks.length > 0\"\n [title]=\"allTasks.length > 0 ? allTasks.length + ' active task' + (allTasks.length > 1 ? 's' : '') : 'View tasks'\">\n <i class=\"fas fa-bolt\"></i>\n @if (allTasks.length > 0) {\n <span class=\"task-count-badge\">{{ allTasks.length }}</span>\n }\n </button>\n \n @if (isOpen) {\n <div class=\"active-tasks-dropdown\">\n <div class=\"dropdown-header\">\n <div class=\"header-left\">\n @if (allTasks.length > 0) {\n <i class=\"fas fa-circle-notch fa-spin\"></i>\n }\n @if (allTasks.length === 0) {\n <i class=\"fas fa-tasks\"></i>\n }\n <span>Active Tasks ({{ allTasks.length }})</span>\n </div>\n <button class=\"close-btn\" (click)=\"closeDropdown()\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"dropdown-content\">\n <!-- Current Conversation Tasks -->\n @if (currentConversationTasks.length > 0) {\n <div class=\"section\">\n <div class=\"section-header\">\n <i class=\"fas fa-comment\"></i>\n <span>Current Conversation ({{ currentConversationTasks.length }})</span>\n </div>\n @for (task of currentConversationTasks; track task) {\n <div class=\"active-task-item\"\n (click)=\"onTaskClick(task)\">\n <div class=\"task-status-indicator active\"></div>\n <div class=\"task-content\">\n <div class=\"task-title\">\n @if (getAgentLogoUrl(task.agentName)) {\n <img\n [src]=\"getAgentLogoUrl(task.agentName)\"\n class=\"agent-logo\"\n [alt]=\"task.agentName\" />\n }\n @if (!getAgentLogoUrl(task.agentName)) {\n <i\n [class]=\"getAgentIconClass(task.agentName)\"></i>\n }\n {{ task.agentName }}\n </div>\n <div class=\"task-status-text\">{{ getTrimmedStatus(task.status) }}</div>\n <div class=\"task-elapsed\">{{ getElapsedTime(task) }}</div>\n </div>\n </div>\n }\n </div>\n }\n <!-- Other Conversations Tasks -->\n @if (otherConversationTasks.length > 0) {\n <div class=\"section\">\n <div class=\"section-header\">\n <i class=\"fas fa-comments\"></i>\n <span>Other Conversations ({{ otherConversationTasks.length }})</span>\n </div>\n @for (task of otherConversationTasks; track task) {\n <div class=\"active-task-item clickable\"\n (click)=\"onTaskClick(task)\">\n <div class=\"task-status-indicator active\"></div>\n <div class=\"task-content\">\n <div class=\"task-title\">\n @if (getAgentLogoUrl(task.agentName)) {\n <img\n [src]=\"getAgentLogoUrl(task.agentName)\"\n class=\"agent-logo\"\n [alt]=\"task.agentName\" />\n }\n @if (!getAgentLogoUrl(task.agentName)) {\n <i\n [class]=\"getAgentIconClass(task.agentName)\"></i>\n }\n {{ task.agentName }}\n <span class=\"go-btn\">\n <i class=\"fas fa-arrow-right\"></i>\n </span>\n </div>\n @if (task.conversationName) {\n <div class=\"task-conversation\">\n <i class=\"fas fa-message\"></i>\n {{ task.conversationName }}\n </div>\n }\n <div class=\"task-status-text\">{{ getTrimmedStatus(task.status) }}</div>\n <div class=\"task-elapsed\">{{ getElapsedTime(task) }}</div>\n </div>\n </div>\n }\n </div>\n }\n <!-- No Tasks State -->\n @if (allTasks.length === 0) {\n <div class=\"no-tasks\">\n <i class=\"fas fa-check-circle\"></i>\n <p>No active tasks</p>\n </div>\n }\n </div>\n </div>\n }\n </div>\n `,\n styles: [`\n .tasks-dropdown-container {\n position: relative;\n }\n\n .active-tasks-btn {\n background: transparent;\n padding: 8px 12px;\n border-radius: 6px;\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: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .active-tasks-btn.active {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .task-count-badge {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\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: var(--mj-shadow-sm);\n }\n\n .active-tasks-dropdown {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n box-shadow: var(--mj-shadow-lg);\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 var(--mj-border-default);\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: var(--mj-text-primary);\n }\n\n .header-left i {\n color: var(--mj-brand-primary);\n }\n\n .close-btn {\n background: none;\n border: none;\n color: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\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 var(--mj-border-default);\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: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\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: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\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: var(--mj-brand-primary);\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: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .task-title i {\n color: var(--mj-brand-primary);\n font-size: 12px;\n }\n\n .task-title .agent-logo {\n width: 14px;\n height: 14px;\n object-fit: contain;\n flex-shrink: 0;\n }\n\n .go-btn {\n margin-left: auto;\n color: var(--mj-brand-primary);\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: var(--mj-text-disabled);\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: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .task-elapsed {\n font-size: 11px;\n color: var(--mj-brand-primary);\n font-weight: 600;\n }\n\n .no-tasks {\n padding: 40px 16px;\n text-align: center;\n color: var(--mj-text-disabled);\n }\n\n .no-tasks i {\n font-size: 32px;\n margin-bottom: 8px;\n opacity: 0.5;\n color: var(--mj-status-success);\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 `]\n})\nexport class TasksDropdownComponent implements OnInit, OnDestroy {\n @Input() currentUser!: UserInfo;\n @Input() conversationId: string | null = null;\n @Output() taskClicked = new EventEmitter<ActiveTask>();\n @Output() navigateToConversation = new EventEmitter<{conversationId: string; taskId: string}>();\n\n public isOpen: boolean = false;\n public allTasks: ActiveTask[] = [];\n public currentConversationTasks: ActiveTask[] = [];\n public otherConversationTasks: ActiveTask[] = [];\n\n private destroy$ = new Subject<void>();\n\n constructor(\n private activeTasksService: ActiveTasksService\n ) {}\n\n ngOnInit() {\n // Subscribe to ALL active tasks across ALL conversations\n this.activeTasksService.tasks$\n .pipe(takeUntil(this.destroy$))\n .subscribe(tasks => {\n this.allTasks = tasks;\n this.groupTasks();\n });\n }\n\n ngOnDestroy() {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n private groupTasks(): void {\n this.currentConversationTasks = this.allTasks.filter(\n task => task.conversationId === this.conversationId\n );\n\n this.otherConversationTasks = this.allTasks.filter(\n task => task.conversationId && task.conversationId !== this.conversationId\n );\n }\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n closeDropdown(): void {\n this.isOpen = false;\n }\n\n onTaskClick(task: ActiveTask): void {\n // If task is from another conversation, emit navigation event\n if (task.conversationId && task.conversationId !== this.conversationId) {\n this.navigateToConversation.emit({\n conversationId: task.conversationId,\n taskId: task.id\n });\n }\n\n this.taskClicked.emit(task);\n this.closeDropdown();\n }\n\n getElapsedTime(task: ActiveTask): string {\n const elapsed = Date.now() - task.startTime;\n const seconds = Math.floor(elapsed / 1000);\n\n if (seconds < 60) {\n return `${seconds}s`;\n }\n\n const minutes = Math.floor(seconds / 60);\n const remainingSeconds = seconds % 60;\n return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;\n }\n\n getTrimmedStatus(status: string): string {\n const maxLength = 50;\n if (status.length <= maxLength) {\n return status;\n }\n return status.substring(0, maxLength) + '...';\n }\n\n /**\n * Get agent icon class by looking up agent in AIEngineBase cache\n * Similar to message-item component's aiAgentInfo getter\n */\n getAgentIconClass(agentName: string): string {\n // Look up agent from AIEngineBase cache by name\n if (AIEngineBase.Instance?.Agents) {\n const agent = AIEngineBase.Instance.Agents.find(a => a.Name === agentName);\n if (agent?.IconClass) {\n return agent.IconClass;\n }\n }\n\n // Default fallback icon\n return 'fas fa-robot';\n }\n\n /**\n * Get agent logo URL by looking up agent in AIEngineBase cache\n * Returns null if no logo URL is available\n */\n getAgentLogoUrl(agentName: string): string | null {\n // Look up agent from AIEngineBase cache by name\n if (AIEngineBase.Instance?.Agents) {\n const agent = AIEngineBase.Instance.Agents.find(a => a.Name === agentName);\n if (agent?.LogoURL) {\n return agent.LogoURL;\n }\n }\n\n return null;\n }\n}\n"]}
|
|
@@ -307,11 +307,11 @@ export class ThreadPanelComponent {
|
|
|
307
307
|
i0.ɵɵconditional(ctx.errorMessage && !ctx.isLoading ? 10 : -1);
|
|
308
308
|
i0.ɵɵadvance();
|
|
309
309
|
i0.ɵɵconditional(!ctx.isLoading && !ctx.errorMessage && ctx.parentMessage ? 11 : -1);
|
|
310
|
-
} }, dependencies: [i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["\n\n.thread-panel-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background:
|
|
310
|
+
} }, dependencies: [i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["\n\n.thread-panel-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 999;\n animation: _ngcontent-%COMP%_fadeIn 200ms ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.thread-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 450px;\n max-width: 90vw;\n background: var(--mj-bg-surface-card);\n box-shadow: -2px 0 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n z-index: 1000;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_slideIn 250ms ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n\n\n.thread-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n}\n\n.thread-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.thread-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n padding: 6px;\n background: transparent;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-size: 18px;\n transition: all 150ms ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n\n\n.thread-loading[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 40px;\n color: var(--mj-text-secondary);\n}\n\n.thread-loading[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n}\n\n\n\n.thread-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 16px 20px;\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-left: 3px solid var(--mj-status-error);\n color: var(--mj-status-error);\n margin: 16px 20px;\n border-radius: 4px;\n}\n\n\n\n.thread-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n\n\n.parent-message[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n margin-bottom: 20px;\n}\n\n.message-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.message-sender[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n font-size: 14px;\n}\n\n.message-time[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.message-body[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n line-height: 1.6;\n white-space: pre-wrap;\n word-break: break-word;\n font-size: 14px;\n margin-bottom: 12px;\n}\n\n.reply-count[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-border-default);\n font-size: 13px;\n color: var(--mj-text-secondary);\n font-weight: 500;\n}\n\n.reply-count[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n.replies-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.no-replies[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n padding: 40px 20px;\n color: var(--mj-text-muted);\n text-align: center;\n}\n\n.no-replies[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n opacity: 0.5;\n}\n\n.no-replies[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n\n\n.reply-item[_ngcontent-%COMP%] {\n padding: 12px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n transition: all 150ms ease;\n}\n\n.reply-item[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-border-strong);\n box-shadow: 0 1px 3px color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n}\n\n.reply-item.ai-reply[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.reply-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 6px;\n}\n\n.reply-sender[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n font-size: 13px;\n}\n\n.reply-time[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.reply-body[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n line-height: 1.5;\n white-space: pre-wrap;\n word-break: break-word;\n font-size: 13px;\n}\n\n\n\n.reply-input-container[_ngcontent-%COMP%] {\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.reply-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n resize: vertical;\n font-family: inherit;\n font-size: 14px;\n min-height: 60px;\n transition: all 150ms ease;\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n}\n\n.reply-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.reply-input[_ngcontent-%COMP%]:disabled {\n background: var(--mj-bg-surface-sunken);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.reply-actions[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n margin-top: 10px;\n}\n\n.btn-send-reply[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-weight: 600;\n font-size: 13px;\n transition: all 150ms ease;\n}\n\n.btn-send-reply[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-brand-primary-hover);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.btn-send-reply[_ngcontent-%COMP%]:disabled {\n background: var(--mj-border-default);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.btn-send-reply[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n.thread-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 6px;\n}\n\n.thread-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-sunken);\n}\n\n.thread-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--mj-border-default);\n border-radius: 3px;\n}\n\n.thread-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-muted);\n}"] });
|
|
311
311
|
}
|
|
312
312
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ThreadPanelComponent, [{
|
|
313
313
|
type: Component,
|
|
314
|
-
args: [{ standalone: false, selector: 'mj-thread-panel', template: "<div class=\"thread-panel-overlay\" (click)=\"onClose()\"></div>\n\n<div class=\"thread-panel\">\n <div class=\"thread-header\">\n <div class=\"thread-title\">\n <i class=\"fa-solid fa-comments\"></i>\n <span>Thread</span>\n </div>\n <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close thread\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n\n @if (isLoading) {\n <div class=\"thread-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Loading thread...</span>\n </div>\n }\n\n @if (errorMessage && !isLoading) {\n <div class=\"thread-error\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n <span>{{ errorMessage }}</span>\n </div>\n }\n\n @if (!isLoading && !errorMessage && parentMessage) {\n <div class=\"thread-content\">\n <!-- Parent Message -->\n <div class=\"parent-message\">\n <div class=\"message-header\">\n <span class=\"message-sender\">{{ getSenderName(parentMessage) }}</span>\n <span class=\"message-time\">{{ getMessageTime(parentMessage) }}</span>\n </div>\n <div class=\"message-body\">\n {{ getMessageText(parentMessage) }}\n </div>\n <div class=\"reply-count\">\n <i class=\"fa-solid fa-reply\"></i>\n <span>{{ replyCountText }}</span>\n </div>\n </div>\n\n <!-- Replies List -->\n <div class=\"replies-container\">\n @if (replies.length === 0) {\n <div class=\"no-replies\">\n <i class=\"fa-solid fa-message\"></i>\n <span>No replies yet. Be the first to reply!</span>\n </div>\n }\n\n @for (reply of replies; track reply.ID) {\n <div class=\"reply-item\" [class.ai-reply]=\"reply.Role === 'AI'\">\n <div class=\"reply-header\">\n <span class=\"reply-sender\">{{ getSenderName(reply) }}</span>\n <span class=\"reply-time\">{{ getMessageTime(reply) }}</span>\n </div>\n <div class=\"reply-body\">\n {{ getMessageText(reply) }}\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Reply Input -->\n <div class=\"reply-input-container\">\n <textarea\n class=\"reply-input\"\n [(ngModel)]=\"replyText\"\n [disabled]=\"isSending\"\n placeholder=\"Reply to thread...\"\n rows=\"3\"\n (keydown.control.enter)=\"onSendReply()\"\n (keydown.meta.enter)=\"onSendReply()\">\n </textarea>\n <div class=\"reply-actions\">\n <button\n class=\"btn-send-reply\"\n [disabled]=\"!canSendReply\"\n (click)=\"onSendReply()\">\n <i class=\"fa-solid fa-paper-plane\"></i>\n <span>{{ isSending ? 'Sending...' : 'Reply' }}</span>\n </button>\n </div>\n </div>\n }\n</div>\n", styles: ["/* Thread Panel Overlay */\n.thread-panel-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background:
|
|
314
|
+
args: [{ standalone: false, selector: 'mj-thread-panel', template: "<div class=\"thread-panel-overlay\" (click)=\"onClose()\"></div>\n\n<div class=\"thread-panel\">\n <div class=\"thread-header\">\n <div class=\"thread-title\">\n <i class=\"fa-solid fa-comments\"></i>\n <span>Thread</span>\n </div>\n <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close thread\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n\n @if (isLoading) {\n <div class=\"thread-loading\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <span>Loading thread...</span>\n </div>\n }\n\n @if (errorMessage && !isLoading) {\n <div class=\"thread-error\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n <span>{{ errorMessage }}</span>\n </div>\n }\n\n @if (!isLoading && !errorMessage && parentMessage) {\n <div class=\"thread-content\">\n <!-- Parent Message -->\n <div class=\"parent-message\">\n <div class=\"message-header\">\n <span class=\"message-sender\">{{ getSenderName(parentMessage) }}</span>\n <span class=\"message-time\">{{ getMessageTime(parentMessage) }}</span>\n </div>\n <div class=\"message-body\">\n {{ getMessageText(parentMessage) }}\n </div>\n <div class=\"reply-count\">\n <i class=\"fa-solid fa-reply\"></i>\n <span>{{ replyCountText }}</span>\n </div>\n </div>\n\n <!-- Replies List -->\n <div class=\"replies-container\">\n @if (replies.length === 0) {\n <div class=\"no-replies\">\n <i class=\"fa-solid fa-message\"></i>\n <span>No replies yet. Be the first to reply!</span>\n </div>\n }\n\n @for (reply of replies; track reply.ID) {\n <div class=\"reply-item\" [class.ai-reply]=\"reply.Role === 'AI'\">\n <div class=\"reply-header\">\n <span class=\"reply-sender\">{{ getSenderName(reply) }}</span>\n <span class=\"reply-time\">{{ getMessageTime(reply) }}</span>\n </div>\n <div class=\"reply-body\">\n {{ getMessageText(reply) }}\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Reply Input -->\n <div class=\"reply-input-container\">\n <textarea\n class=\"reply-input\"\n [(ngModel)]=\"replyText\"\n [disabled]=\"isSending\"\n placeholder=\"Reply to thread...\"\n rows=\"3\"\n (keydown.control.enter)=\"onSendReply()\"\n (keydown.meta.enter)=\"onSendReply()\">\n </textarea>\n <div class=\"reply-actions\">\n <button\n class=\"btn-send-reply\"\n [disabled]=\"!canSendReply\"\n (click)=\"onSendReply()\">\n <i class=\"fa-solid fa-paper-plane\"></i>\n <span>{{ isSending ? 'Sending...' : 'Reply' }}</span>\n </button>\n </div>\n </div>\n }\n</div>\n", styles: ["/* Thread Panel Overlay */\n.thread-panel-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 999;\n animation: fadeIn 200ms ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Thread Panel Container */\n.thread-panel {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 450px;\n max-width: 90vw;\n background: var(--mj-bg-surface-card);\n box-shadow: -2px 0 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n z-index: 1000;\n display: flex;\n flex-direction: column;\n animation: slideIn 250ms ease;\n}\n\n@keyframes slideIn {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n/* Header */\n.thread-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n}\n\n.thread-title {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.thread-title i {\n color: var(--mj-text-secondary);\n}\n\n.close-btn {\n padding: 6px;\n background: transparent;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-size: 18px;\n transition: all 150ms ease;\n}\n\n.close-btn:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n/* Loading State */\n.thread-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 40px;\n color: var(--mj-text-secondary);\n}\n\n.thread-loading i {\n font-size: 24px;\n}\n\n/* Error State */\n.thread-error {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 16px 20px;\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-left: 3px solid var(--mj-status-error);\n color: var(--mj-status-error);\n margin: 16px 20px;\n border-radius: 4px;\n}\n\n/* Content Container */\n.thread-content {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n/* Parent Message */\n.parent-message {\n padding: 16px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n margin-bottom: 20px;\n}\n\n.message-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.message-sender {\n font-weight: 600;\n color: var(--mj-text-primary);\n font-size: 14px;\n}\n\n.message-time {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.message-body {\n color: var(--mj-text-primary);\n line-height: 1.6;\n white-space: pre-wrap;\n word-break: break-word;\n font-size: 14px;\n margin-bottom: 12px;\n}\n\n.reply-count {\n display: flex;\n align-items: center;\n gap: 6px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-border-default);\n font-size: 13px;\n color: var(--mj-text-secondary);\n font-weight: 500;\n}\n\n.reply-count i {\n font-size: 12px;\n}\n\n/* Replies Container */\n.replies-container {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.no-replies {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n padding: 40px 20px;\n color: var(--mj-text-muted);\n text-align: center;\n}\n\n.no-replies i {\n font-size: 32px;\n opacity: 0.5;\n}\n\n.no-replies span {\n font-size: 14px;\n}\n\n/* Reply Item */\n.reply-item {\n padding: 12px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n transition: all 150ms ease;\n}\n\n.reply-item:hover {\n border-color: var(--mj-border-strong);\n box-shadow: 0 1px 3px color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n}\n\n.reply-item.ai-reply {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.reply-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 6px;\n}\n\n.reply-sender {\n font-weight: 600;\n color: var(--mj-text-primary);\n font-size: 13px;\n}\n\n.reply-time {\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.reply-body {\n color: var(--mj-text-primary);\n line-height: 1.5;\n white-space: pre-wrap;\n word-break: break-word;\n font-size: 13px;\n}\n\n/* Reply Input */\n.reply-input-container {\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.reply-input {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n resize: vertical;\n font-family: inherit;\n font-size: 14px;\n min-height: 60px;\n transition: all 150ms ease;\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n}\n\n.reply-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.reply-input:disabled {\n background: var(--mj-bg-surface-sunken);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.reply-actions {\n display: flex;\n justify-content: flex-end;\n margin-top: 10px;\n}\n\n.btn-send-reply {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-weight: 600;\n font-size: 13px;\n transition: all 150ms ease;\n}\n\n.btn-send-reply:hover:not(:disabled) {\n background: var(--mj-brand-primary-hover);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.btn-send-reply:disabled {\n background: var(--mj-border-default);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.btn-send-reply i {\n font-size: 12px;\n}\n\n/* Scrollbar Styling */\n.thread-content::-webkit-scrollbar {\n width: 6px;\n}\n\n.thread-content::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-sunken);\n}\n\n.thread-content::-webkit-scrollbar-thumb {\n background: var(--mj-border-default);\n border-radius: 3px;\n}\n\n.thread-content::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-muted);\n}\n"] }]
|
|
315
315
|
}], () => [{ type: i1.DataCacheService }, { type: i0.ChangeDetectorRef }], { parentMessageId: [{
|
|
316
316
|
type: Input
|
|
317
317
|
}], conversationId: [{
|
|
@@ -77,7 +77,7 @@ export class ToastComponent {
|
|
|
77
77
|
} if (rf & 2) {
|
|
78
78
|
i0.ɵɵadvance();
|
|
79
79
|
i0.ɵɵrepeater(ctx.toasts);
|
|
80
|
-
} }, styles: [".toast-container[_ngcontent-%COMP%] {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 10000;\n display: flex;\n flex-direction: column;\n gap: 12px;\n pointer-events: none;\n}\n\n.toast[_ngcontent-%COMP%] {\n min-width: 320px;\n max-width: 500px;\n padding: 16px;\n border-radius: 8px;\n box-shadow: 0 4px 12px
|
|
80
|
+
} }, styles: [".toast-container[_ngcontent-%COMP%] {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 10000;\n display: flex;\n flex-direction: column;\n gap: 12px;\n pointer-events: none;\n}\n\n.toast[_ngcontent-%COMP%] {\n min-width: 320px;\n max-width: 500px;\n padding: 16px;\n border-radius: 8px;\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n background-color: var(--mj-bg-surface-elevated);\n backdrop-filter: blur(10px);\n pointer-events: auto;\n border-left: 4px solid;\n transition: all 0.2s ease;\n}\n.toast[_ngcontent-%COMP%]:hover {\n box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-text-primary) 20%, transparent);\n}\n.toast.toast-success[_ngcontent-%COMP%] {\n border-left-color: var(--mj-status-success);\n}\n.toast.toast-success[_ngcontent-%COMP%] .toast-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.toast.toast-error[_ngcontent-%COMP%] {\n border-left-color: var(--mj-status-error);\n}\n.toast.toast-error[_ngcontent-%COMP%] .toast-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n.toast.toast-warning[_ngcontent-%COMP%] {\n border-left-color: var(--mj-status-warning);\n}\n.toast.toast-warning[_ngcontent-%COMP%] .toast-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n.toast.toast-info[_ngcontent-%COMP%] {\n border-left-color: var(--mj-brand-primary);\n}\n.toast.toast-info[_ngcontent-%COMP%] .toast-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.toast-content[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.toast-icon[_ngcontent-%COMP%] {\n font-size: 20px;\n flex-shrink: 0;\n}\n\n.toast-message[_ngcontent-%COMP%] {\n flex: 1;\n color: var(--mj-text-primary);\n font-size: 14px;\n line-height: 1.5;\n word-break: break-word;\n}\n\n.toast-close[_ngcontent-%COMP%] {\n flex-shrink: 0;\n background: none;\n border: none;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-secondary);\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n.toast-close[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n.toast-close[_ngcontent-%COMP%]:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n color: var(--mj-text-primary);\n}\n.toast-close[_ngcontent-%COMP%]:active {\n transform: scale(0.95);\n}\n\n@media (max-width: 640px) {\n .toast-container[_ngcontent-%COMP%] {\n left: 12px;\n right: 12px;\n top: 12px;\n }\n .toast[_ngcontent-%COMP%] {\n min-width: unset;\n max-width: unset;\n width: 100%;\n }\n}"], data: { animation: [
|
|
81
81
|
trigger('slideIn', [
|
|
82
82
|
transition(':enter', [
|
|
83
83
|
style({ transform: 'translateX(100%)', opacity: 0 }),
|
|
@@ -101,7 +101,7 @@ export class ToastComponent {
|
|
|
101
101
|
animate('200ms ease-in', style({ transform: 'translateX(100%)', opacity: 0 }))
|
|
102
102
|
])
|
|
103
103
|
])
|
|
104
|
-
], template: "<div class=\"toast-container\">\n @for (toast of toasts; track trackByToastId($index, toast)) {\n <div\n class=\"toast toast-{{ toast.type }}\"\n [@slideIn]\n >\n <div class=\"toast-content\">\n <i [class]=\"getIconClass(toast.type)\" class=\"toast-icon\"></i>\n <span class=\"toast-message\">{{ toast.message }}</span>\n <button\n class=\"toast-close\"\n (click)=\"dismiss(toast.id)\"\n aria-label=\"Close notification\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [".toast-container {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 10000;\n display: flex;\n flex-direction: column;\n gap: 12px;\n pointer-events: none;\n}\n\n.toast {\n min-width: 320px;\n max-width: 500px;\n padding: 16px;\n border-radius: 8px;\n box-shadow: 0 4px 12px
|
|
104
|
+
], template: "<div class=\"toast-container\">\n @for (toast of toasts; track trackByToastId($index, toast)) {\n <div\n class=\"toast toast-{{ toast.type }}\"\n [@slideIn]\n >\n <div class=\"toast-content\">\n <i [class]=\"getIconClass(toast.type)\" class=\"toast-icon\"></i>\n <span class=\"toast-message\">{{ toast.message }}</span>\n <button\n class=\"toast-close\"\n (click)=\"dismiss(toast.id)\"\n aria-label=\"Close notification\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [".toast-container {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 10000;\n display: flex;\n flex-direction: column;\n gap: 12px;\n pointer-events: none;\n}\n\n.toast {\n min-width: 320px;\n max-width: 500px;\n padding: 16px;\n border-radius: 8px;\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n background-color: var(--mj-bg-surface-elevated);\n backdrop-filter: blur(10px);\n pointer-events: auto;\n border-left: 4px solid;\n transition: all 0.2s ease;\n}\n.toast:hover {\n box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-text-primary) 20%, transparent);\n}\n.toast.toast-success {\n border-left-color: var(--mj-status-success);\n}\n.toast.toast-success .toast-icon {\n color: var(--mj-status-success);\n}\n.toast.toast-error {\n border-left-color: var(--mj-status-error);\n}\n.toast.toast-error .toast-icon {\n color: var(--mj-status-error);\n}\n.toast.toast-warning {\n border-left-color: var(--mj-status-warning);\n}\n.toast.toast-warning .toast-icon {\n color: var(--mj-status-warning);\n}\n.toast.toast-info {\n border-left-color: var(--mj-brand-primary);\n}\n.toast.toast-info .toast-icon {\n color: var(--mj-brand-primary);\n}\n\n.toast-content {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.toast-icon {\n font-size: 20px;\n flex-shrink: 0;\n}\n\n.toast-message {\n flex: 1;\n color: var(--mj-text-primary);\n font-size: 14px;\n line-height: 1.5;\n word-break: break-word;\n}\n\n.toast-close {\n flex-shrink: 0;\n background: none;\n border: none;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-secondary);\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n.toast-close i {\n font-size: 16px;\n}\n.toast-close:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n color: var(--mj-text-primary);\n}\n.toast-close:active {\n transform: scale(0.95);\n}\n\n@media (max-width: 640px) {\n .toast-container {\n left: 12px;\n right: 12px;\n top: 12px;\n }\n .toast {\n min-width: unset;\n max-width: unset;\n width: 100%;\n }\n}\n"] }]
|
|
105
105
|
}], () => [{ type: i1.ToastService }], null); })();
|
|
106
106
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToastComponent, { className: "ToastComponent", filePath: "src/lib/components/toast/toast.component.ts", lineNumber: 23 }); })();
|
|
107
107
|
//# sourceMappingURL=toast.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.component.js","sourceRoot":"","sources":["../../../../src/lib/components/toast/toast.component.ts","../../../../src/lib/components/toast/toast.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;;;;;ICKpE,AAJF,2BAGG,aAC0B;IACzB,uBAA6D;IAC7D,+BAA4B;IAAA,YAAmB;IAAA,iBAAO;IACtD,iCAIG;IAFD,qMAAS,2BAAiB,KAAC;IAG3B,uBAAiC;IAGvC,AADE,AADE,iBAAS,EACL,EACF;;;;IAdJ,cAAA,gDAAoC,CAAA;IACpC,oCAAU;IAGL,eAAkC;IAAlC,iDAAkC;IACT,eAAmB;IAAnB,sCAAmB;;ADcvD,MAAM,OAAO,cAAc;IAIL;IAHb,MAAM,GAAY,EAAE,CAAC;IACpB,YAAY,GAAwB,IAAI,CAAC;IAEjD,YAAoB,YAA0B;QAA1B,iBAAY,GAAZ,YAAY,CAAc;IAAG,CAAC;IAElD,QAAQ;QACN,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE;YAC/D,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;QAClC,CAAC;IACH,CAAC;IAED;;OAEG;IACI,YAAY,CAAC,IAAY;QAC9B,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,SAAS;gBACZ,OAAO,0BAA0B,CAAC;YACpC,KAAK,OAAO;gBACV,OAAO,0BAA0B,CAAC;YACpC,KAAK,SAAS;gBACZ,OAAO,kCAAkC,CAAC;YAC5C,KAAK,MAAM;gBACT,OAAO,yBAAyB,CAAC;YACnC;gBACE,OAAO,yBAAyB,CAAC;QACrC,CAAC;IACH,CAAC;IAED;;OAEG;IACI,OAAO,CAAC,OAAe;QAC5B,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED;;OAEG;IACI,cAAc,CAAC,KAAa,EAAE,KAAY;QAC/C,OAAO,KAAK,CAAC,EAAE,CAAC;IAClB,CAAC;wGAhDU,cAAc;6DAAd,cAAc;YCtB3B,8BAA6B;YAC3B,+FAiBC;YACH,iBAAM;;YAlBJ,cAiBC;YAjBD,yBAiBC;
|
|
1
|
+
{"version":3,"file":"toast.component.js","sourceRoot":"","sources":["../../../../src/lib/components/toast/toast.component.ts","../../../../src/lib/components/toast/toast.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy } from '@angular/core';\nimport { trigger, transition, style, animate } from '@angular/animations';\nimport { Subscription } from 'rxjs';\nimport { ToastService, Toast } from '../../services/toast.service';\n\n@Component({\n standalone: false,\n selector: 'mj-toast',\n templateUrl: './toast.component.html',\n styleUrls: ['./toast.component.css'],\n animations: [\n trigger('slideIn', [\n transition(':enter', [\n style({ transform: 'translateX(100%)', opacity: 0 }),\n animate('300ms ease-out', style({ transform: 'translateX(0)', opacity: 1 }))\n ]),\n transition(':leave', [\n animate('200ms ease-in', style({ transform: 'translateX(100%)', opacity: 0 }))\n ])\n ])\n ]\n})\nexport class ToastComponent implements OnInit, OnDestroy {\n public toasts: Toast[] = [];\n private subscription: Subscription | null = null;\n\n constructor(private toastService: ToastService) {}\n\n ngOnInit(): void {\n this.subscription = this.toastService.toasts$.subscribe(toasts => {\n this.toasts = toasts;\n });\n }\n\n ngOnDestroy(): void {\n if (this.subscription) {\n this.subscription.unsubscribe();\n }\n }\n\n /**\n * Get the icon class for a toast type\n */\n public getIconClass(type: string): string {\n switch (type) {\n case 'success':\n return 'fa-solid fa-circle-check';\n case 'error':\n return 'fa-solid fa-circle-xmark';\n case 'warning':\n return 'fa-solid fa-triangle-exclamation';\n case 'info':\n return 'fa-solid fa-circle-info';\n default:\n return 'fa-solid fa-circle-info';\n }\n }\n\n /**\n * Dismiss a toast\n */\n public dismiss(toastId: string): void {\n this.toastService.dismiss(toastId);\n }\n\n /**\n * Track toasts by ID for performance\n */\n public trackByToastId(index: number, toast: Toast): string {\n return toast.id;\n }\n}\n","<div class=\"toast-container\">\n @for (toast of toasts; track trackByToastId($index, toast)) {\n <div\n class=\"toast toast-{{ toast.type }}\"\n [@slideIn]\n >\n <div class=\"toast-content\">\n <i [class]=\"getIconClass(toast.type)\" class=\"toast-icon\"></i>\n <span class=\"toast-message\">{{ toast.message }}</span>\n <button\n class=\"toast-close\"\n (click)=\"dismiss(toast.id)\"\n aria-label=\"Close notification\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n }\n</div>\n"]}
|
|
@@ -1218,11 +1218,11 @@ export class ConversationWorkspaceComponent extends BaseAngularComponent {
|
|
|
1218
1218
|
i0.ɵɵproperty("isOpen", ctx.isSearchPanelOpen)("environmentId", ctx.environmentId)("currentUser", ctx.currentUser);
|
|
1219
1219
|
i0.ɵɵadvance(2);
|
|
1220
1220
|
i0.ɵɵproperty("isOpen", ctx.isArtifactShareModalOpen)("artifact", ctx.artifactToShare)("currentUser", ctx.currentUser);
|
|
1221
|
-
} }, dependencies: [i9.DialogContainerDirective, i10.ArtifactViewerPanelComponent, i11.LoadingComponent, i12.TasksFullViewComponent, i13.ArtifactShareModalComponent, i14.ConversationNavigationComponent, i15.ConversationSidebarComponent, i16.ConversationChatAreaComponent, i17.CollectionsFullViewComponent, i18.SearchPanelComponent, i19.ToastComponent, i20.SearchShortcutDirective], styles: [".conversation-workspace[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%; \n\n min-height: 0; \n\n background-color:
|
|
1221
|
+
} }, dependencies: [i9.DialogContainerDirective, i10.ArtifactViewerPanelComponent, i11.LoadingComponent, i12.TasksFullViewComponent, i13.ArtifactShareModalComponent, i14.ConversationNavigationComponent, i15.ConversationSidebarComponent, i16.ConversationChatAreaComponent, i17.CollectionsFullViewComponent, i18.SearchPanelComponent, i19.ToastComponent, i20.SearchShortcutDirective], styles: [".conversation-workspace[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%; \n\n min-height: 0; \n\n background-color: var(--mj-bg-surface-sunken);\n position: relative;\n}\n\n.workspace-navigation[_ngcontent-%COMP%] {\n flex-shrink: 0;\n height: 48px;\n background-color: var(--mj-text-primary);\n border-bottom: 1px solid color-mix(in srgb, var(--mj-text-inverse) 10%, transparent);\n}\n\n.workspace-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n overflow: hidden;\n min-height: 0;\n position: relative;\n}\n\n.workspace-sidebar[_ngcontent-%COMP%] {\n flex-shrink: 0;\n background-color: var(--mj-text-primary);\n border-right: 1px solid var(--mj-border-default);\n overflow-y: auto;\n transition: width 0.3s ease;\n}\n\n\n\n.workspace-sidebar.no-transition[_ngcontent-%COMP%] {\n transition: none !important;\n}\n\n.workspace-sidebar.collapsed[_ngcontent-%COMP%] {\n width: 0 !important;\n min-width: 0;\n border-right: none;\n overflow: hidden;\n}\n\n\n\n.sidebar-floating-toggle[_ngcontent-%COMP%] {\n position: absolute;\n top: 12px;\n left: 12px;\n z-index: 100;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-text-primary);\n border: 1px solid color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border-radius: 8px;\n cursor: pointer;\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n transition: all 0.2s ease;\n}\n\n.sidebar-floating-toggle[_ngcontent-%COMP%]:hover {\n background: var(--mj-text-primary);\n border-color: color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 20%, transparent);\n transform: scale(1.05);\n}\n\n.sidebar-floating-toggle[_ngcontent-%COMP%]:active {\n transform: scale(0.98);\n}\n\n.sidebar-floating-toggle[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: color-mix(in srgb, var(--mj-text-inverse) 85%, transparent);\n font-size: 16px;\n transition: color 0.15s ease;\n}\n\n.sidebar-floating-toggle[_ngcontent-%COMP%]:hover i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n}\n\n.sidebar-resize-handle[_ngcontent-%COMP%] {\n width: 4px;\n background: transparent;\n cursor: ew-resize;\n flex-shrink: 0;\n position: relative;\n transition: background-color 0.2s;\n}\n\n.sidebar-resize-handle[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.sidebar-resize-handle[_ngcontent-%COMP%]:active {\n background: var(--mj-brand-primary-hover);\n}\n\n.sidebar-resize-handle[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -4px;\n right: -4px;\n top: 0;\n bottom: 0;\n cursor: ew-resize;\n}\n\n.workspace-main[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n background-color: var(--mj-bg-surface-card);\n overflow: hidden;\n min-height: 0;\n}\n\n.workspace-main[_ngcontent-%COMP%] > mj-conversation-chat-area[_ngcontent-%COMP%] {\n display: flex;\n flex: 1;\n min-height: 0;\n}\n\n.workspace-artifact-panel[_ngcontent-%COMP%] {\n flex-shrink: 0;\n background-color: var(--mj-bg-surface-card);\n overflow: hidden;\n min-width: 300px;\n max-width: 70%;\n}\n\n.artifact-panel-resize-handle[_ngcontent-%COMP%] {\n width: 4px;\n background-color: transparent;\n cursor: ew-resize;\n flex-shrink: 0;\n transition: background-color 0.2s;\n position: relative;\n z-index: 10;\n}\n\n\n\n.artifact-panel-resize-handle[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: -4px;\n right: -4px;\n cursor: ew-resize;\n}\n\n.artifact-panel-resize-handle[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-brand-primary-hover);\n}\n\n.artifact-panel-resize-handle[_ngcontent-%COMP%]:active {\n background-color: var(--mj-brand-primary-hover);\n}\n\n\n\n.workspace-artifact-panel.maximized[_ngcontent-%COMP%] {\n width: 100% !important;\n max-width: 100%;\n}\n\n\n\n.conversation-workspace[data-layout=\"compact\"][_ngcontent-%COMP%] .workspace-sidebar[_ngcontent-%COMP%] {\n width: 240px;\n}\n\n.conversation-workspace[data-layout=\"compact\"][_ngcontent-%COMP%] .workspace-artifact-panel[_ngcontent-%COMP%] {\n width: 400px;\n}\n\n\n\n.conversation-workspace[data-layout=\"embedded\"][_ngcontent-%COMP%] {\n height: 100%;\n}\n\n.conversation-workspace[data-layout=\"embedded\"][_ngcontent-%COMP%] .workspace-navigation[_ngcontent-%COMP%] {\n height: 48px;\n}\n\n\n\n@media (max-width: 1024px) {\n .workspace-sidebar[_ngcontent-%COMP%] {\n position: absolute;\n left: 0;\n top: 60px;\n bottom: 0;\n z-index: 100;\n box-shadow: 2px 0 8px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n }\n\n .workspace-artifact-panel[_ngcontent-%COMP%] {\n position: fixed;\n right: 0;\n top: 60px;\n bottom: 0;\n z-index: 100;\n box-shadow: -2px 0 8px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n }\n}\n\n\n\n@media (min-width: 769px) {\n .workspace-sidebar[_ngcontent-%COMP%] {\n transition: width 0.3s ease, min-width 0.3s ease;\n overflow: hidden;\n }\n\n .workspace-sidebar[_ngcontent-%COMP%]:not(.open) {\n width: 0 !important;\n min-width: 0;\n border-right: none;\n }\n\n .sidebar-resize-handle[_ngcontent-%COMP%] {\n transition: opacity 0.3s ease, width 0.3s ease;\n }\n\n .workspace-sidebar[_ngcontent-%COMP%]:not(.open) ~ .sidebar-resize-handle[_ngcontent-%COMP%] {\n opacity: 0;\n width: 0;\n pointer-events: none;\n }\n}\n\n\n\n@media (max-width: 768px) {\n .workspace-sidebar[_ngcontent-%COMP%] {\n position: fixed;\n left: 0;\n top: 80px;\n z-index: 1000;\n width: 260px !important;\n height: calc(100vh - 80px);\n transform: translateX(-100%);\n transition: transform 0.3s ease;\n }\n\n .workspace-sidebar.open[_ngcontent-%COMP%] {\n transform: translateX(0);\n }\n\n .workspace-artifact-panel[_ngcontent-%COMP%] {\n position: fixed;\n width: 100%;\n left: 0;\n right: 0;\n top: 56px; \n\n bottom: 0;\n z-index: 1000;\n max-width: 100%;\n height: auto;\n }\n\n .sidebar-resize-handle[_ngcontent-%COMP%], \n .artifact-panel-resize-handle[_ngcontent-%COMP%], \n .sidebar-floating-toggle[_ngcontent-%COMP%] {\n display: none;\n }\n\n \n\n .mobile-sidebar-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n z-index: 999;\n }\n\n .mobile-sidebar-backdrop.visible[_ngcontent-%COMP%] {\n opacity: 1;\n pointer-events: auto;\n }\n}\n\n\n\n@media (max-width: 480px) {\n .workspace-navigation[_ngcontent-%COMP%] {\n height: 48px;\n }\n\n .workspace-sidebar[_ngcontent-%COMP%] {\n width: 100%;\n }\n}\n\n\n\n.workspace-loading[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n width: 100%;\n background: var(--mj-bg-surface-card);\n gap: 1rem;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n font-size: 3rem;\n color: var(--mj-brand-primary);\n}\n\n.workspace-loading[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 1rem;\n color: var(--mj-text-secondary);\n margin: 0;\n}"] });
|
|
1222
1222
|
}
|
|
1223
1223
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationWorkspaceComponent, [{
|
|
1224
1224
|
type: Component,
|
|
1225
|
-
args: [{ standalone: false, selector: 'mj-conversation-workspace', template: "<div class=\"conversation-workspace\" [attr.data-layout]=\"layout\" mjSearchShortcut (searchTriggered)=\"openSearch()\" kendoDialogContainer>\n <!-- Top Navigation Bar -->\n <div class=\"workspace-navigation\">\n <mj-conversation-navigation\n [activeTab]=\"activeTab\"\n [environmentId]=\"environmentId\"\n [currentUser]=\"currentUser\"\n [conversationId]=\"selectedConversationId\"\n (tabChanged)=\"onTabChanged($event)\"\n (sidebarToggled)=\"toggleSidebar()\"\n (searchTriggered)=\"openSearch()\"\n (refreshTriggered)=\"onRefreshAgentCache()\">\n </mj-conversation-navigation>\n </div>\n\n <!-- Loading spinner while initializing agents -->\n @if (!isWorkspaceReady) {\n <div class=\"workspace-loading\">\n <mj-loading text=\"Loading agents...\" size=\"large\"></mj-loading>\n </div>\n }\n\n <!-- Main workspace content - only renders when agents are ready -->\n @if (isWorkspaceReady) {\n <div class=\"workspace-content\">\n <!-- Mobile sidebar backdrop -->\n @if (isMobileView && isSidebarVisible && activeTab !== 'collections' && activeTab !== 'tasks') {\n <div class=\"mobile-sidebar-backdrop visible\" (click)=\"closeSidebar()\"></div>\n }\n\n <!-- Left Sidebar (hidden when Collections or Tasks view is active) -->\n @if (activeTab !== 'collections' && activeTab !== 'tasks' && isSidebarSettingsLoaded) {\n <div class=\"workspace-sidebar\"\n [class.open]=\"isSidebarVisible\"\n [class.collapsed]=\"isSidebarCollapsed\"\n [class.no-transition]=\"!sidebarTransitionsEnabled\"\n [style.width.px]=\"isSidebarCollapsed ? 0 : sidebarWidth\">\n <mj-conversation-sidebar\n [activeTab]=\"activeTab\"\n [environmentId]=\"environmentId\"\n [currentUser]=\"currentUser\"\n [selectedConversationId]=\"selectedConversationId\"\n [renamedConversationId]=\"renamedConversationId\"\n [isSidebarPinned]=\"isSidebarPinned\"\n [isMobileView]=\"isMobileView\"\n (conversationSelected)=\"onConversationSelected($event)\"\n (newConversationRequested)=\"startNewConversation()\"\n (pinSidebarRequested)=\"pinSidebar()\"\n (unpinSidebarRequested)=\"unpinSidebar()\">\n </mj-conversation-sidebar>\n </div>\n }\n\n <!-- Floating toggle button (only visible when sidebar is collapsed and settings loaded) -->\n @if (activeTab !== 'collections' && activeTab !== 'tasks' && isSidebarCollapsed && isSidebarSettingsLoaded) {\n <button class=\"sidebar-floating-toggle\"\n (click)=\"expandSidebar()\"\n title=\"Show conversations\">\n <i class=\"fas fa-table-columns\"></i>\n </button>\n }\n\n <!-- Resize handle for sidebar (only when expanded and settings loaded) -->\n @if (isSidebarVisible && !isSidebarCollapsed && activeTab !== 'collections' && activeTab !== 'tasks' && isSidebarSettingsLoaded) {\n <div class=\"sidebar-resize-handle\"\n (mousedown)=\"onSidebarResizeStart($event)\"></div>\n }\n\n <!-- Collections Full-Panel View -->\n @if (activeTab === 'collections') {\n <div class=\"workspace-main\">\n <mj-collections-full-view\n [environmentId]=\"environmentId\"\n [currentUser]=\"currentUser\"\n (collectionNavigated)=\"onCollectionNavigated($event)\">\n </mj-collections-full-view>\n </div>\n }\n\n <!-- Tasks Full-Panel View -->\n @if (activeTab === 'tasks') {\n <div class=\"workspace-main\">\n <mj-tasks-full-view\n [environmentId]=\"environmentId\"\n [currentUser]=\"currentUser\"\n [baseFilter]=\"tasksFilter\"\n [activeTaskId]=\"activeTaskId\"\n (openEntityRecord)=\"onOpenEntityRecordFromTasks($event)\">\n </mj-tasks-full-view>\n </div>\n }\n\n <!-- Main Chat Area (only shown when not in Collections or Tasks view) -->\n @if (activeTab !== 'collections' && activeTab !== 'tasks') {\n <div class=\"workspace-main\">\n <mj-conversation-chat-area\n [environmentId]=\"environmentId\"\n [currentUser]=\"currentUser\"\n [conversationId]=\"selectedConversationId\"\n [conversation]=\"selectedConversation\"\n [threadId]=\"selectedThreadId\"\n [isNewConversation]=\"isNewUnsavedConversation\"\n [pendingMessage]=\"pendingMessageToSend\"\n [pendingAttachments]=\"pendingAttachmentsToSend\"\n [pendingArtifactId]=\"pendingArtifactId\"\n [pendingArtifactVersionNumber]=\"pendingArtifactVersionNumber\"\n (conversationRenamed)=\"onConversationRenamed($event)\"\n (openEntityRecord)=\"onOpenEntityRecord($event)\"\n (navigationRequest)=\"onNavigationRequest($event)\"\n (taskClicked)=\"onTaskClicked($event)\"\n (artifactLinkClicked)=\"onArtifactLinkNavigation($event)\"\n (conversationCreated)=\"onConversationCreated($event)\"\n (threadOpened)=\"onThreadOpened($event)\"\n (threadClosed)=\"onThreadClosed()\"\n (pendingArtifactConsumed)=\"pendingArtifactId = null; pendingArtifactVersionNumber = null\"\n (pendingMessageConsumed)=\"pendingMessageToSend = null; pendingAttachmentsToSend = null\"\n (pendingMessageRequested)=\"onPendingMessageRequested($event)\">\n </mj-conversation-chat-area>\n </div>\n }\n\n <!-- Right Artifact Panel -->\n @if (isArtifactPanelOpen && activeArtifactId) {\n @if (!isArtifactPanelMaximized) {\n <div class=\"artifact-panel-resize-handle\" (mousedown)=\"onArtifactPanelResizeStart($event)\"></div>\n }\n <div class=\"workspace-artifact-panel\"\n [style.width.%]=\"artifactPanelWidth\"\n [class.maximized]=\"isArtifactPanelMaximized\">\n <mj-artifact-viewer-panel\n [artifactId]=\"activeArtifactId\"\n [currentUser]=\"currentUser\"\n [environmentId]=\"environmentId\"\n [versionNumber]=\"activeVersionNumber ?? undefined\"\n [showSaveToCollection]=\"activeTab !== 'collections'\"\n [viewContext]=\"activeTab === 'collections' ? 'collection' : 'conversation'\"\n [contextCollectionId]=\"collectionState.activeCollectionId ?? undefined\"\n [canShare]=\"canShareActiveArtifact\"\n [canEdit]=\"canEditActiveArtifact\"\n [isMaximized]=\"isArtifactPanelMaximized\"\n (closed)=\"closeArtifactPanel()\"\n (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n (shareRequested)=\"onArtifactShareRequested($event)\"\n (maximizeToggled)=\"toggleMaximizeArtifactPanel()\">\n </mj-artifact-viewer-panel>\n </div>\n }\n </div>\n }\n\n <!-- Global Search Panel -->\n <mj-search-panel\n [isOpen]=\"isSearchPanelOpen\"\n [environmentId]=\"environmentId\"\n [currentUser]=\"currentUser\"\n (close)=\"closeSearch()\"\n (resultSelected)=\"handleSearchResult($event)\">\n </mj-search-panel>\n\n <!-- Toast Notifications -->\n <mj-toast></mj-toast>\n\n <!-- Artifact Share Modal -->\n <mj-artifact-share-modal\n [isOpen]=\"isArtifactShareModalOpen\"\n [artifact]=\"artifactToShare\"\n [currentUser]=\"currentUser\"\n (saved)=\"onArtifactShared()\"\n (cancelled)=\"onArtifactShareModalClose()\">\n </mj-artifact-share-modal>\n</div>", styles: [".conversation-workspace {\n display: flex;\n flex-direction: column;\n height: 100%; /* Fill parent container - works in any context (tabs, embedded, etc.) */\n min-height: 0; /* Allow flex shrinking in nested flex containers */\n background-color: #F4F4F4;\n position: relative;\n}\n\n.workspace-navigation {\n flex-shrink: 0;\n height: 48px;\n background-color: #092340;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.workspace-content {\n flex: 1;\n display: flex;\n overflow: hidden;\n min-height: 0;\n position: relative;\n}\n\n.workspace-sidebar {\n flex-shrink: 0;\n background-color: #092340;\n border-right: 1px solid #D9D9D9;\n overflow-y: auto;\n transition: width 0.3s ease;\n}\n\n/* Disable transitions during initial load to prevent jarring animation */\n.workspace-sidebar.no-transition {\n transition: none !important;\n}\n\n.workspace-sidebar.collapsed {\n width: 0 !important;\n min-width: 0;\n border-right: none;\n overflow: hidden;\n}\n\n/* Floating toggle button (only visible when sidebar is collapsed) */\n.sidebar-floating-toggle {\n position: absolute;\n top: 12px;\n left: 12px;\n z-index: 100;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #092340;\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 8px;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n transition: all 0.2s ease;\n}\n\n.sidebar-floating-toggle:hover {\n background: #0a2d4d;\n border-color: rgba(255, 255, 255, 0.3);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n transform: scale(1.05);\n}\n\n.sidebar-floating-toggle:active {\n transform: scale(0.98);\n}\n\n.sidebar-floating-toggle i {\n color: rgba(255, 255, 255, 0.85);\n font-size: 16px;\n transition: color 0.15s ease;\n}\n\n.sidebar-floating-toggle:hover i {\n color: white;\n}\n\n.sidebar-resize-handle {\n width: 4px;\n background: transparent;\n cursor: ew-resize;\n flex-shrink: 0;\n position: relative;\n transition: background-color 0.2s;\n}\n\n.sidebar-resize-handle:hover {\n background: #1e40af;\n}\n\n.sidebar-resize-handle:active {\n background: #1e3a8a;\n}\n\n.sidebar-resize-handle::before {\n content: '';\n position: absolute;\n left: -4px;\n right: -4px;\n top: 0;\n bottom: 0;\n cursor: ew-resize;\n}\n\n.workspace-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n background-color: #FFF;\n overflow: hidden;\n min-height: 0;\n}\n\n.workspace-main > mj-conversation-chat-area {\n display: flex;\n flex: 1;\n min-height: 0;\n}\n\n.workspace-artifact-panel {\n flex-shrink: 0;\n background-color: #FFF;\n overflow: hidden;\n min-width: 300px;\n max-width: 70%;\n}\n\n.artifact-panel-resize-handle {\n width: 4px;\n background-color: transparent;\n cursor: ew-resize;\n flex-shrink: 0;\n transition: background-color 0.2s;\n position: relative;\n z-index: 10;\n}\n\n/* Wider hit area for easier grabbing */\n.artifact-panel-resize-handle::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: -4px;\n right: -4px;\n cursor: ew-resize;\n}\n\n.artifact-panel-resize-handle:hover {\n background-color: #1e40af;\n}\n\n.artifact-panel-resize-handle:active {\n background-color: #1e3a8a;\n}\n\n/* Maximized artifact panel */\n.workspace-artifact-panel.maximized {\n width: 100% !important;\n max-width: 100%;\n}\n\n/* Compact layout */\n.conversation-workspace[data-layout=\"compact\"] .workspace-sidebar {\n width: 240px;\n}\n\n.conversation-workspace[data-layout=\"compact\"] .workspace-artifact-panel {\n width: 400px;\n}\n\n/* Embedded layout */\n.conversation-workspace[data-layout=\"embedded\"] {\n height: 100%;\n}\n\n.conversation-workspace[data-layout=\"embedded\"] .workspace-navigation {\n height: 48px;\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n .workspace-sidebar {\n position: absolute;\n left: 0;\n top: 60px;\n bottom: 0;\n z-index: 100;\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n }\n\n .workspace-artifact-panel {\n position: fixed;\n right: 0;\n top: 60px;\n bottom: 0;\n z-index: 100;\n box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);\n }\n}\n\n/* Desktop sidebar toggle animation */\n@media (min-width: 769px) {\n .workspace-sidebar {\n transition: width 0.3s ease, min-width 0.3s ease;\n overflow: hidden;\n }\n\n .workspace-sidebar:not(.open) {\n width: 0 !important;\n min-width: 0;\n border-right: none;\n }\n\n .sidebar-resize-handle {\n transition: opacity 0.3s ease, width 0.3s ease;\n }\n\n .workspace-sidebar:not(.open) ~ .sidebar-resize-handle {\n opacity: 0;\n width: 0;\n pointer-events: none;\n }\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n .workspace-sidebar {\n position: fixed;\n left: 0;\n top: 80px;\n z-index: 1000;\n width: 260px !important;\n height: calc(100vh - 80px);\n transform: translateX(-100%);\n transition: transform 0.3s ease;\n }\n\n .workspace-sidebar.open {\n transform: translateX(0);\n }\n\n .workspace-artifact-panel {\n position: fixed;\n width: 100%;\n left: 0;\n right: 0;\n top: 56px; /* 48px nav + 8px dark strip above blue border */\n bottom: 0;\n z-index: 1000;\n max-width: 100%;\n height: auto;\n }\n\n .sidebar-resize-handle,\n .artifact-panel-resize-handle,\n .sidebar-floating-toggle {\n display: none;\n }\n\n /* Mobile sidebar backdrop */\n .mobile-sidebar-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n z-index: 999;\n }\n\n .mobile-sidebar-backdrop.visible {\n opacity: 1;\n pointer-events: auto;\n }\n}\n\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n .workspace-navigation {\n height: 48px;\n }\n\n .workspace-sidebar {\n width: 100%;\n }\n}\n\n/* Loading spinner (shown while initializing agents) */\n.workspace-loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n width: 100%;\n background: #FFF;\n gap: 1rem;\n}\n\n.loading-spinner {\n font-size: 3rem;\n color: #0078d4;\n}\n\n.workspace-loading p {\n font-size: 1rem;\n color: #666;\n margin: 0;\n}"] }]
|
|
1225
|
+
args: [{ standalone: false, selector: 'mj-conversation-workspace', template: "<div class=\"conversation-workspace\" [attr.data-layout]=\"layout\" mjSearchShortcut (searchTriggered)=\"openSearch()\" kendoDialogContainer>\n <!-- Top Navigation Bar -->\n <div class=\"workspace-navigation\">\n <mj-conversation-navigation\n [activeTab]=\"activeTab\"\n [environmentId]=\"environmentId\"\n [currentUser]=\"currentUser\"\n [conversationId]=\"selectedConversationId\"\n (tabChanged)=\"onTabChanged($event)\"\n (sidebarToggled)=\"toggleSidebar()\"\n (searchTriggered)=\"openSearch()\"\n (refreshTriggered)=\"onRefreshAgentCache()\">\n </mj-conversation-navigation>\n </div>\n\n <!-- Loading spinner while initializing agents -->\n @if (!isWorkspaceReady) {\n <div class=\"workspace-loading\">\n <mj-loading text=\"Loading agents...\" size=\"large\"></mj-loading>\n </div>\n }\n\n <!-- Main workspace content - only renders when agents are ready -->\n @if (isWorkspaceReady) {\n <div class=\"workspace-content\">\n <!-- Mobile sidebar backdrop -->\n @if (isMobileView && isSidebarVisible && activeTab !== 'collections' && activeTab !== 'tasks') {\n <div class=\"mobile-sidebar-backdrop visible\" (click)=\"closeSidebar()\"></div>\n }\n\n <!-- Left Sidebar (hidden when Collections or Tasks view is active) -->\n @if (activeTab !== 'collections' && activeTab !== 'tasks' && isSidebarSettingsLoaded) {\n <div class=\"workspace-sidebar\"\n [class.open]=\"isSidebarVisible\"\n [class.collapsed]=\"isSidebarCollapsed\"\n [class.no-transition]=\"!sidebarTransitionsEnabled\"\n [style.width.px]=\"isSidebarCollapsed ? 0 : sidebarWidth\">\n <mj-conversation-sidebar\n [activeTab]=\"activeTab\"\n [environmentId]=\"environmentId\"\n [currentUser]=\"currentUser\"\n [selectedConversationId]=\"selectedConversationId\"\n [renamedConversationId]=\"renamedConversationId\"\n [isSidebarPinned]=\"isSidebarPinned\"\n [isMobileView]=\"isMobileView\"\n (conversationSelected)=\"onConversationSelected($event)\"\n (newConversationRequested)=\"startNewConversation()\"\n (pinSidebarRequested)=\"pinSidebar()\"\n (unpinSidebarRequested)=\"unpinSidebar()\">\n </mj-conversation-sidebar>\n </div>\n }\n\n <!-- Floating toggle button (only visible when sidebar is collapsed and settings loaded) -->\n @if (activeTab !== 'collections' && activeTab !== 'tasks' && isSidebarCollapsed && isSidebarSettingsLoaded) {\n <button class=\"sidebar-floating-toggle\"\n (click)=\"expandSidebar()\"\n title=\"Show conversations\">\n <i class=\"fas fa-table-columns\"></i>\n </button>\n }\n\n <!-- Resize handle for sidebar (only when expanded and settings loaded) -->\n @if (isSidebarVisible && !isSidebarCollapsed && activeTab !== 'collections' && activeTab !== 'tasks' && isSidebarSettingsLoaded) {\n <div class=\"sidebar-resize-handle\"\n (mousedown)=\"onSidebarResizeStart($event)\"></div>\n }\n\n <!-- Collections Full-Panel View -->\n @if (activeTab === 'collections') {\n <div class=\"workspace-main\">\n <mj-collections-full-view\n [environmentId]=\"environmentId\"\n [currentUser]=\"currentUser\"\n (collectionNavigated)=\"onCollectionNavigated($event)\">\n </mj-collections-full-view>\n </div>\n }\n\n <!-- Tasks Full-Panel View -->\n @if (activeTab === 'tasks') {\n <div class=\"workspace-main\">\n <mj-tasks-full-view\n [environmentId]=\"environmentId\"\n [currentUser]=\"currentUser\"\n [baseFilter]=\"tasksFilter\"\n [activeTaskId]=\"activeTaskId\"\n (openEntityRecord)=\"onOpenEntityRecordFromTasks($event)\">\n </mj-tasks-full-view>\n </div>\n }\n\n <!-- Main Chat Area (only shown when not in Collections or Tasks view) -->\n @if (activeTab !== 'collections' && activeTab !== 'tasks') {\n <div class=\"workspace-main\">\n <mj-conversation-chat-area\n [environmentId]=\"environmentId\"\n [currentUser]=\"currentUser\"\n [conversationId]=\"selectedConversationId\"\n [conversation]=\"selectedConversation\"\n [threadId]=\"selectedThreadId\"\n [isNewConversation]=\"isNewUnsavedConversation\"\n [pendingMessage]=\"pendingMessageToSend\"\n [pendingAttachments]=\"pendingAttachmentsToSend\"\n [pendingArtifactId]=\"pendingArtifactId\"\n [pendingArtifactVersionNumber]=\"pendingArtifactVersionNumber\"\n (conversationRenamed)=\"onConversationRenamed($event)\"\n (openEntityRecord)=\"onOpenEntityRecord($event)\"\n (navigationRequest)=\"onNavigationRequest($event)\"\n (taskClicked)=\"onTaskClicked($event)\"\n (artifactLinkClicked)=\"onArtifactLinkNavigation($event)\"\n (conversationCreated)=\"onConversationCreated($event)\"\n (threadOpened)=\"onThreadOpened($event)\"\n (threadClosed)=\"onThreadClosed()\"\n (pendingArtifactConsumed)=\"pendingArtifactId = null; pendingArtifactVersionNumber = null\"\n (pendingMessageConsumed)=\"pendingMessageToSend = null; pendingAttachmentsToSend = null\"\n (pendingMessageRequested)=\"onPendingMessageRequested($event)\">\n </mj-conversation-chat-area>\n </div>\n }\n\n <!-- Right Artifact Panel -->\n @if (isArtifactPanelOpen && activeArtifactId) {\n @if (!isArtifactPanelMaximized) {\n <div class=\"artifact-panel-resize-handle\" (mousedown)=\"onArtifactPanelResizeStart($event)\"></div>\n }\n <div class=\"workspace-artifact-panel\"\n [style.width.%]=\"artifactPanelWidth\"\n [class.maximized]=\"isArtifactPanelMaximized\">\n <mj-artifact-viewer-panel\n [artifactId]=\"activeArtifactId\"\n [currentUser]=\"currentUser\"\n [environmentId]=\"environmentId\"\n [versionNumber]=\"activeVersionNumber ?? undefined\"\n [showSaveToCollection]=\"activeTab !== 'collections'\"\n [viewContext]=\"activeTab === 'collections' ? 'collection' : 'conversation'\"\n [contextCollectionId]=\"collectionState.activeCollectionId ?? undefined\"\n [canShare]=\"canShareActiveArtifact\"\n [canEdit]=\"canEditActiveArtifact\"\n [isMaximized]=\"isArtifactPanelMaximized\"\n (closed)=\"closeArtifactPanel()\"\n (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n (shareRequested)=\"onArtifactShareRequested($event)\"\n (maximizeToggled)=\"toggleMaximizeArtifactPanel()\">\n </mj-artifact-viewer-panel>\n </div>\n }\n </div>\n }\n\n <!-- Global Search Panel -->\n <mj-search-panel\n [isOpen]=\"isSearchPanelOpen\"\n [environmentId]=\"environmentId\"\n [currentUser]=\"currentUser\"\n (close)=\"closeSearch()\"\n (resultSelected)=\"handleSearchResult($event)\">\n </mj-search-panel>\n\n <!-- Toast Notifications -->\n <mj-toast></mj-toast>\n\n <!-- Artifact Share Modal -->\n <mj-artifact-share-modal\n [isOpen]=\"isArtifactShareModalOpen\"\n [artifact]=\"artifactToShare\"\n [currentUser]=\"currentUser\"\n (saved)=\"onArtifactShared()\"\n (cancelled)=\"onArtifactShareModalClose()\">\n </mj-artifact-share-modal>\n</div>", styles: [".conversation-workspace {\n display: flex;\n flex-direction: column;\n height: 100%; /* Fill parent container - works in any context (tabs, embedded, etc.) */\n min-height: 0; /* Allow flex shrinking in nested flex containers */\n background-color: var(--mj-bg-surface-sunken);\n position: relative;\n}\n\n.workspace-navigation {\n flex-shrink: 0;\n height: 48px;\n background-color: var(--mj-text-primary);\n border-bottom: 1px solid color-mix(in srgb, var(--mj-text-inverse) 10%, transparent);\n}\n\n.workspace-content {\n flex: 1;\n display: flex;\n overflow: hidden;\n min-height: 0;\n position: relative;\n}\n\n.workspace-sidebar {\n flex-shrink: 0;\n background-color: var(--mj-text-primary);\n border-right: 1px solid var(--mj-border-default);\n overflow-y: auto;\n transition: width 0.3s ease;\n}\n\n/* Disable transitions during initial load to prevent jarring animation */\n.workspace-sidebar.no-transition {\n transition: none !important;\n}\n\n.workspace-sidebar.collapsed {\n width: 0 !important;\n min-width: 0;\n border-right: none;\n overflow: hidden;\n}\n\n/* Floating toggle button (only visible when sidebar is collapsed) */\n.sidebar-floating-toggle {\n position: absolute;\n top: 12px;\n left: 12px;\n z-index: 100;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-text-primary);\n border: 1px solid color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border-radius: 8px;\n cursor: pointer;\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n transition: all 0.2s ease;\n}\n\n.sidebar-floating-toggle:hover {\n background: var(--mj-text-primary);\n border-color: color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 20%, transparent);\n transform: scale(1.05);\n}\n\n.sidebar-floating-toggle:active {\n transform: scale(0.98);\n}\n\n.sidebar-floating-toggle i {\n color: color-mix(in srgb, var(--mj-text-inverse) 85%, transparent);\n font-size: 16px;\n transition: color 0.15s ease;\n}\n\n.sidebar-floating-toggle:hover i {\n color: var(--mj-text-inverse);\n}\n\n.sidebar-resize-handle {\n width: 4px;\n background: transparent;\n cursor: ew-resize;\n flex-shrink: 0;\n position: relative;\n transition: background-color 0.2s;\n}\n\n.sidebar-resize-handle:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.sidebar-resize-handle:active {\n background: var(--mj-brand-primary-hover);\n}\n\n.sidebar-resize-handle::before {\n content: '';\n position: absolute;\n left: -4px;\n right: -4px;\n top: 0;\n bottom: 0;\n cursor: ew-resize;\n}\n\n.workspace-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n background-color: var(--mj-bg-surface-card);\n overflow: hidden;\n min-height: 0;\n}\n\n.workspace-main > mj-conversation-chat-area {\n display: flex;\n flex: 1;\n min-height: 0;\n}\n\n.workspace-artifact-panel {\n flex-shrink: 0;\n background-color: var(--mj-bg-surface-card);\n overflow: hidden;\n min-width: 300px;\n max-width: 70%;\n}\n\n.artifact-panel-resize-handle {\n width: 4px;\n background-color: transparent;\n cursor: ew-resize;\n flex-shrink: 0;\n transition: background-color 0.2s;\n position: relative;\n z-index: 10;\n}\n\n/* Wider hit area for easier grabbing */\n.artifact-panel-resize-handle::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: -4px;\n right: -4px;\n cursor: ew-resize;\n}\n\n.artifact-panel-resize-handle:hover {\n background-color: var(--mj-brand-primary-hover);\n}\n\n.artifact-panel-resize-handle:active {\n background-color: var(--mj-brand-primary-hover);\n}\n\n/* Maximized artifact panel */\n.workspace-artifact-panel.maximized {\n width: 100% !important;\n max-width: 100%;\n}\n\n/* Compact layout */\n.conversation-workspace[data-layout=\"compact\"] .workspace-sidebar {\n width: 240px;\n}\n\n.conversation-workspace[data-layout=\"compact\"] .workspace-artifact-panel {\n width: 400px;\n}\n\n/* Embedded layout */\n.conversation-workspace[data-layout=\"embedded\"] {\n height: 100%;\n}\n\n.conversation-workspace[data-layout=\"embedded\"] .workspace-navigation {\n height: 48px;\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n .workspace-sidebar {\n position: absolute;\n left: 0;\n top: 60px;\n bottom: 0;\n z-index: 100;\n box-shadow: 2px 0 8px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n }\n\n .workspace-artifact-panel {\n position: fixed;\n right: 0;\n top: 60px;\n bottom: 0;\n z-index: 100;\n box-shadow: -2px 0 8px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n }\n}\n\n/* Desktop sidebar toggle animation */\n@media (min-width: 769px) {\n .workspace-sidebar {\n transition: width 0.3s ease, min-width 0.3s ease;\n overflow: hidden;\n }\n\n .workspace-sidebar:not(.open) {\n width: 0 !important;\n min-width: 0;\n border-right: none;\n }\n\n .sidebar-resize-handle {\n transition: opacity 0.3s ease, width 0.3s ease;\n }\n\n .workspace-sidebar:not(.open) ~ .sidebar-resize-handle {\n opacity: 0;\n width: 0;\n pointer-events: none;\n }\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n .workspace-sidebar {\n position: fixed;\n left: 0;\n top: 80px;\n z-index: 1000;\n width: 260px !important;\n height: calc(100vh - 80px);\n transform: translateX(-100%);\n transition: transform 0.3s ease;\n }\n\n .workspace-sidebar.open {\n transform: translateX(0);\n }\n\n .workspace-artifact-panel {\n position: fixed;\n width: 100%;\n left: 0;\n right: 0;\n top: 56px; /* 48px nav + 8px dark strip above blue border */\n bottom: 0;\n z-index: 1000;\n max-width: 100%;\n height: auto;\n }\n\n .sidebar-resize-handle,\n .artifact-panel-resize-handle,\n .sidebar-floating-toggle {\n display: none;\n }\n\n /* Mobile sidebar backdrop */\n .mobile-sidebar-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n z-index: 999;\n }\n\n .mobile-sidebar-backdrop.visible {\n opacity: 1;\n pointer-events: auto;\n }\n}\n\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n .workspace-navigation {\n height: 48px;\n }\n\n .workspace-sidebar {\n width: 100%;\n }\n}\n\n/* Loading spinner (shown while initializing agents) */\n.workspace-loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n width: 100%;\n background: var(--mj-bg-surface-card);\n gap: 1rem;\n}\n\n.loading-spinner {\n font-size: 3rem;\n color: var(--mj-brand-primary);\n}\n\n.workspace-loading p {\n font-size: 1rem;\n color: var(--mj-text-secondary);\n margin: 0;\n}"] }]
|
|
1226
1226
|
}], () => [{ type: i1.ConversationDataService }, { type: i2.ArtifactStateService }, { type: i3.CollectionStateService }, { type: i4.ArtifactPermissionService }, { type: i5.MentionAutocompleteService }, { type: i6.MJNotificationService }, { type: i7.ConversationStreamingService }, { type: i8.UICommandHandlerService }, { type: i0.ChangeDetectorRef }], { environmentId: [{
|
|
1227
1227
|
type: Input
|
|
1228
1228
|
}], initialConversationId: [{
|