@memberjunction/ng-artifacts 5.11.0 → 5.12.0

package/dist/lib/components/plugins/component-feedback-panel/component-feedback-panel.component.js

@@ -0,0 +1,569 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Metadata } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+const _c0 = () => [1, 2, 3, 4, 5];
+const _forTrack0 = ($index, $item) => $item.spec.name;
+function ComponentFeedbackPanelComponent_Conditional_15_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 24);
+    i0.ɵɵlistener("click", function ComponentFeedbackPanelComponent_Conditional_15_For_2_Conditional_1_Template_i_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const item_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.ToggleNode(item_r2.spec, $event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("fa-chevron-right", !ctx_r2.IsNodeExpanded(item_r2.spec))("fa-chevron-down", ctx_r2.IsNodeExpanded(item_r2.spec));
+} }
+function ComponentFeedbackPanelComponent_Conditional_15_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 19);
+} }
+function ComponentFeedbackPanelComponent_Conditional_15_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 23);
+    i0.ɵɵtext(1, "Registry");
+    i0.ɵɵelementEnd();
+} }
+function ComponentFeedbackPanelComponent_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵlistener("click", function ComponentFeedbackPanelComponent_Conditional_15_For_2_Template_div_click_0_listener() { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SelectComponent(item_r2.spec)); })("mouseenter", function ComponentFeedbackPanelComponent_Conditional_15_For_2_Template_div_mouseenter_0_listener() { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.HoverTreeItem(item_r2.spec)); })("mouseleave", function ComponentFeedbackPanelComponent_Conditional_15_For_2_Template_div_mouseleave_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.ClearTreeItemHover()); });
+    i0.ɵɵconditionalCreate(1, ComponentFeedbackPanelComponent_Conditional_15_For_2_Conditional_1_Template, 1, 4, "i", 18)(2, ComponentFeedbackPanelComponent_Conditional_15_For_2_Conditional_2_Template, 1, 0, "span", 19);
+    i0.ɵɵelement(3, "i", 20);
+    i0.ɵɵelementStart(4, "div", 21)(5, "span", 22);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(7, ComponentFeedbackPanelComponent_Conditional_15_For_2_Conditional_7_Template, 2, 0, "span", 23);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("padding-left", ctx_r2.GetIndentation(item_r2.depth));
+    i0.ɵɵclassProp("selected", ctx_r2.IsSelected(item_r2.spec));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r2.hasChildren ? 1 : 2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(item_r2.spec.title || item_r2.spec.name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r2.spec.location === "registry" ? 7 : -1);
+} }
+function ComponentFeedbackPanelComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵrepeaterCreate(1, ComponentFeedbackPanelComponent_Conditional_15_For_2_Template, 8, 7, "div", 16, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.GetTreeItems());
+} }
+function ComponentFeedbackPanelComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No component hierarchy available");
+    i0.ɵɵelementEnd()();
+} }
+function ComponentFeedbackPanelComponent_Conditional_18_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 27);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.SelectedSpec.description);
+} }
+function ComponentFeedbackPanelComponent_Conditional_18_For_11_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 43);
+    i0.ɵɵlistener("click", function ComponentFeedbackPanelComponent_Conditional_18_For_11_Template_i_click_0_listener() { const star_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetRating(star_r7)); })("mouseenter", function ComponentFeedbackPanelComponent_Conditional_18_For_11_Template_i_mouseenter_0_listener() { const star_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetHoverRating(star_r7)); })("mouseleave", function ComponentFeedbackPanelComponent_Conditional_18_For_11_Template_i_mouseleave_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.ClearHoverRating()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const star_r7 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("fa-solid", ctx_r2.IsStarFilled(star_r7))("fa-regular", !ctx_r2.IsStarFilled(star_r7))("fa-star", true);
+} }
+function ComponentFeedbackPanelComponent_Conditional_18_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 32);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r2.StarRating, " out of 5 stars");
+} }
+function ComponentFeedbackPanelComponent_Conditional_18_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 33);
+    i0.ɵɵtext(1, "Click to rate");
+    i0.ɵɵelementEnd();
+} }
+function ComponentFeedbackPanelComponent_Conditional_18_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r2.FeedbackComments.length, "/1000");
+} }
+function ComponentFeedbackPanelComponent_Conditional_18_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 44);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2, "Submitting...");
+    i0.ɵɵelementEnd();
+} }
+function ComponentFeedbackPanelComponent_Conditional_18_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 45);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2, "Submit Feedback");
+    i0.ɵɵelementEnd();
+} }
+function ComponentFeedbackPanelComponent_Conditional_18_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵelement(1, "i", 46);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Feedback submitted successfully!");
+    i0.ɵɵelementEnd()();
+} }
+function ComponentFeedbackPanelComponent_Conditional_18_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r2.SubmitError);
+} }
+function ComponentFeedbackPanelComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 9);
+    i0.ɵɵelement(2, "i", 26);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(5, ComponentFeedbackPanelComponent_Conditional_18_Conditional_5_Template, 2, 1, "p", 27);
+    i0.ɵɵelementStart(6, "div", 28)(7, "label", 29);
+    i0.ɵɵtext(8, "Your Rating");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 30);
+    i0.ɵɵrepeaterCreate(10, ComponentFeedbackPanelComponent_Conditional_18_For_11_Template, 1, 6, "i", 31, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(12, ComponentFeedbackPanelComponent_Conditional_18_Conditional_12_Template, 2, 1, "span", 32)(13, ComponentFeedbackPanelComponent_Conditional_18_Conditional_13_Template, 2, 0, "span", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 34)(15, "label", 35);
+    i0.ɵɵtext(16, " Comments ");
+    i0.ɵɵelementStart(17, "span", 36);
+    i0.ɵɵtext(18, "(optional)");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "textarea", 37);
+    i0.ɵɵtwoWayListener("ngModelChange", function ComponentFeedbackPanelComponent_Conditional_18_Template_textarea_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.FeedbackComments, $event) || (ctx_r2.FeedbackComments = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtext(20, "              ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(21, ComponentFeedbackPanelComponent_Conditional_18_Conditional_21_Template, 2, 1, "span", 38);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "div", 39)(23, "button", 40);
+    i0.ɵɵlistener("click", function ComponentFeedbackPanelComponent_Conditional_18_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SubmitFeedback()); });
+    i0.ɵɵconditionalCreate(24, ComponentFeedbackPanelComponent_Conditional_18_Conditional_24_Template, 3, 0)(25, ComponentFeedbackPanelComponent_Conditional_18_Conditional_25_Template, 3, 0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(26, ComponentFeedbackPanelComponent_Conditional_18_Conditional_26_Template, 4, 0, "div", 41);
+    i0.ɵɵconditionalCreate(27, ComponentFeedbackPanelComponent_Conditional_18_Conditional_27_Template, 4, 1, "div", 42);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Rate: ", ctx_r2.SelectedSpec.title || ctx_r2.SelectedSpec.name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.SelectedSpec.description ? 5 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(9, _c0));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.StarRating > 0 ? 12 : 13);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.FeedbackComments);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.FeedbackComments.length > 0 ? 21 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.CanSubmit());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.IsSubmitting ? 24 : 25);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.SubmitSuccess ? 26 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.SubmitError ? 27 : -1);
+} }
+function ComponentFeedbackPanelComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Select a component from the tree to provide feedback");
+    i0.ɵɵelementEnd()();
+} }
+/**
+ * Component feedback panel that displays component hierarchy tree
+ * and allows users to select components and provide star ratings with comments.
+ * Registry-agnostic: works with any component registry (Skip, MJ Central, etc.)
+ */
+export class ComponentFeedbackPanelComponent {
+    ComponentSpec = null;
+    ReactContainerElement = null;
+    ConversationId = null;
+    ConversationDetailId = null;
+    Closed = new EventEmitter();
+    // Feedback form state
+    SelectedSpec = null;
+    StarRating = 0;
+    HoverRating = 0;
+    FeedbackComments = '';
+    IsSubmitting = false;
+    SubmitSuccess = false;
+    SubmitError = '';
+    // Tree state
+    ExpandedNodes = new Set();
+    // Highlight overlays
+    highlightOverlay = null;
+    hoverOverlay = null;
+    resizeObserver = null;
+    containerClickHandler = null;
+    cdr = inject(ChangeDetectorRef);
+    // --- Tree Methods ---
+    GetTreeItems() {
+        if (!this.ComponentSpec)
+            return [];
+        if (!this.ExpandedNodes.has(this.ComponentSpec.name)) {
+            this.ExpandedNodes.add(this.ComponentSpec.name);
+        }
+        return this.buildTree(this.ComponentSpec, 0);
+    }
+    buildTree(spec, depth) {
+        const items = [{
+                spec,
+                depth,
+                hasChildren: !!(spec.dependencies && spec.dependencies.length > 0)
+            }];
+        if (this.ExpandedNodes.has(spec.name) && spec.dependencies) {
+            for (const child of spec.dependencies) {
+                items.push(...this.buildTree(child, depth + 1));
+            }
+        }
+        return items;
+    }
+    ToggleNode(spec, event) {
+        event.stopPropagation();
+        if (this.ExpandedNodes.has(spec.name)) {
+            this.ExpandedNodes.delete(spec.name);
+        }
+        else {
+            this.ExpandedNodes.add(spec.name);
+        }
+    }
+    IsNodeExpanded(spec) {
+        return this.ExpandedNodes.has(spec.name);
+    }
+    SelectComponent(spec) {
+        this.SelectedSpec = spec;
+        this.ResetForm();
+        this.HighlightComponent(spec.name);
+    }
+    IsSelected(spec) {
+        return this.SelectedSpec?.name === spec.name;
+    }
+    GetIndentation(depth) {
+        return `${depth * 20}px`;
+    }
+    // --- Star Rating ---
+    SetRating(stars) {
+        this.StarRating = stars;
+    }
+    SetHoverRating(stars) {
+        this.HoverRating = stars;
+    }
+    ClearHoverRating() {
+        this.HoverRating = 0;
+    }
+    GetDisplayRating() {
+        return this.HoverRating || this.StarRating;
+    }
+    IsStarFilled(index) {
+        return index <= this.GetDisplayRating();
+    }
+    // --- Form ---
+    ResetForm() {
+        this.StarRating = 0;
+        this.HoverRating = 0;
+        this.FeedbackComments = '';
+        this.SubmitSuccess = false;
+        this.SubmitError = '';
+    }
+    CanSubmit() {
+        return !!this.SelectedSpec && this.StarRating > 0 && !this.IsSubmitting;
+    }
+    async SubmitFeedback() {
+        if (!this.CanSubmit() || !this.SelectedSpec)
+            return;
+        this.IsSubmitting = true;
+        this.SubmitError = '';
+        this.SubmitSuccess = false;
+        this.cdr.detectChanges();
+        try {
+            // Dynamic import to avoid adding graphql-dataprovider as a package dependency.
+            // At runtime in the browser, Metadata.Provider is always a GraphQLDataProvider.
+            const { GraphQLComponentRegistryClient } = await import('@memberjunction/graphql-dataprovider');
+            const provider = Metadata.Provider;
+            const client = new GraphQLComponentRegistryClient(provider);
+            const response = await client.SendComponentFeedback({
+                componentName: this.SelectedSpec.name,
+                componentNamespace: this.SelectedSpec.namespace || this.SelectedSpec.registry || '',
+                componentVersion: this.SelectedSpec.version,
+                registryName: this.SelectedSpec.registry,
+                rating: this.StarRating * 20, // 0-5 -> 0-100
+                comments: this.FeedbackComments.trim() || undefined,
+                conversationID: this.ConversationId || undefined,
+                conversationDetailID: this.ConversationDetailId || undefined
+            });
+            if (response.success) {
+                this.SubmitSuccess = true;
+                setTimeout(() => {
+                    this.ResetForm();
+                    this.cdr.detectChanges();
+                }, 2000);
+            }
+            else {
+                this.SubmitError = response.error || 'Failed to submit feedback.';
+            }
+        }
+        catch (error) {
+            this.SubmitError = 'Failed to submit feedback. Please try again.';
+            console.error('Error submitting component feedback:', error);
+        }
+        finally {
+            this.IsSubmitting = false;
+            this.cdr.detectChanges();
+        }
+    }
+    // --- Hover Highlight (light preview on tree hover) ---
+    HoverTreeItem(spec) {
+        if (!this.ReactContainerElement || this.IsSelected(spec))
+            return;
+        this.showHoverOverlay(spec.name);
+    }
+    ClearTreeItemHover() {
+        this.removeHoverOverlay();
+    }
+    showHoverOverlay(componentName) {
+        if (!this.ReactContainerElement)
+            return;
+        const targetEl = this.ReactContainerElement.querySelector(`[data-mj-component="${componentName}"]`);
+        if (!targetEl) {
+            this.removeHoverOverlay();
+            return;
+        }
+        this.ensureContainerPositioned();
+        if (!this.hoverOverlay) {
+            this.hoverOverlay = document.createElement('div');
+            this.ReactContainerElement.appendChild(this.hoverOverlay);
+        }
+        this.positionOverlay(this.hoverOverlay, targetEl);
+        this.hoverOverlay.style.border = '2px dashed var(--mj-brand-primary, #3B82F6)';
+        this.hoverOverlay.style.background = 'color-mix(in srgb, var(--mj-brand-primary, #3B82F6) 5%, transparent)';
+    }
+    removeHoverOverlay() {
+        if (this.hoverOverlay?.parentNode) {
+            this.hoverOverlay.parentNode.removeChild(this.hoverOverlay);
+        }
+        this.hoverOverlay = null;
+    }
+    // --- Region Highlighting (solid selection) ---
+    HighlightComponent(componentName) {
+        if (!this.ReactContainerElement) {
+            this.ClearHighlight();
+            return;
+        }
+        const targetEl = this.ReactContainerElement.querySelector(`[data-mj-component="${componentName}"]`);
+        if (!targetEl) {
+            this.ClearHighlight();
+            return;
+        }
+        this.ensureContainerPositioned();
+        if (!this.highlightOverlay) {
+            this.highlightOverlay = document.createElement('div');
+            this.ReactContainerElement.appendChild(this.highlightOverlay);
+        }
+        this.positionOverlay(this.highlightOverlay, targetEl);
+        this.highlightOverlay.style.border = '2px solid var(--mj-brand-primary, #3B82F6)';
+        this.highlightOverlay.style.background = 'color-mix(in srgb, var(--mj-brand-primary, #3B82F6) 10%, transparent)';
+        // Watch for resize/layout changes
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.highlightOverlay) {
+                this.positionOverlay(this.highlightOverlay, targetEl);
+            }
+        });
+        this.resizeObserver.observe(targetEl);
+        this.resizeObserver.observe(this.ReactContainerElement);
+        // Set up bidirectional click selection on container
+        this.installContainerClickListener();
+    }
+    ensureContainerPositioned() {
+        if (!this.ReactContainerElement)
+            return;
+        const containerStyle = getComputedStyle(this.ReactContainerElement);
+        if (containerStyle.position === 'static') {
+            this.ReactContainerElement.style.position = 'relative';
+        }
+    }
+    /**
+     * Gets the effective bounding rect for a component marker element.
+     * display:contents elements return zero-size rects, so we compute
+     * the union bounding box of their children instead.
+     */
+    getEffectiveRect(el) {
+        const rect = el.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0)
+            return rect;
+        // display:contents wrapper — union the bounding rects of all children
+        const children = el.children;
+        if (children.length === 0)
+            return rect;
+        let top = Infinity, left = Infinity, bottom = -Infinity, right = -Infinity;
+        for (let i = 0; i < children.length; i++) {
+            const childRect = children[i].getBoundingClientRect();
+            if (childRect.width === 0 && childRect.height === 0)
+                continue;
+            top = Math.min(top, childRect.top);
+            left = Math.min(left, childRect.left);
+            bottom = Math.max(bottom, childRect.bottom);
+            right = Math.max(right, childRect.right);
+        }
+        if (top === Infinity)
+            return rect; // no visible children
+        return new DOMRect(left, top, right - left, bottom - top);
+    }
+    positionOverlay(overlay, targetEl) {
+        if (!this.ReactContainerElement)
+            return;
+        const targetRect = this.getEffectiveRect(targetEl);
+        const containerRect = this.ReactContainerElement.getBoundingClientRect();
+        overlay.style.position = 'absolute';
+        overlay.style.top = `${targetRect.top - containerRect.top + this.ReactContainerElement.scrollTop}px`;
+        overlay.style.left = `${targetRect.left - containerRect.left + this.ReactContainerElement.scrollLeft}px`;
+        overlay.style.width = `${targetRect.width}px`;
+        overlay.style.height = `${targetRect.height}px`;
+        overlay.style.pointerEvents = 'none';
+        overlay.style.zIndex = '10';
+        overlay.style.borderRadius = '4px';
+        overlay.style.transition = 'all 0.2s ease';
+    }
+    // --- Bidirectional click: clicking a component region selects it in the tree ---
+    installContainerClickListener() {
+        if (this.containerClickHandler || !this.ReactContainerElement)
+            return;
+        this.containerClickHandler = (e) => {
+            const target = e.target;
+            if (!target)
+                return;
+            // Walk up from click target to find nearest [data-mj-component]
+            const componentEl = target.closest('[data-mj-component]');
+            if (!componentEl)
+                return;
+            const componentName = componentEl.getAttribute('data-mj-component');
+            if (!componentName)
+                return;
+            // Find matching spec in the tree
+            const matchingSpec = this.findSpecByName(componentName);
+            if (matchingSpec && matchingSpec.name !== this.SelectedSpec?.name) {
+                this.SelectComponent(matchingSpec);
+                this.cdr.detectChanges();
+            }
+        };
+        // Use capture phase so we observe the click without interfering with component handlers
+        this.ReactContainerElement.addEventListener('click', this.containerClickHandler, true);
+    }
+    removeContainerClickListener() {
+        if (this.containerClickHandler && this.ReactContainerElement) {
+            this.ReactContainerElement.removeEventListener('click', this.containerClickHandler, true);
+        }
+        this.containerClickHandler = null;
+    }
+    findSpecByName(name) {
+        if (!this.ComponentSpec)
+            return null;
+        return this.walkSpecTree(this.ComponentSpec, name);
+    }
+    walkSpecTree(spec, name) {
+        if (spec.name === name)
+            return spec;
+        if (spec.dependencies) {
+            for (const child of spec.dependencies) {
+                const found = this.walkSpecTree(child, name);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    ClearHighlight() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+        if (this.highlightOverlay?.parentNode) {
+            this.highlightOverlay.parentNode.removeChild(this.highlightOverlay);
+        }
+        this.highlightOverlay = null;
+        this.removeHoverOverlay();
+        this.removeContainerClickListener();
+    }
+    ClosePanel() {
+        this.ClearHighlight();
+        this.Closed.emit();
+    }
+    ngOnDestroy() {
+        this.ClearHighlight();
+    }
+    static ɵfac = function ComponentFeedbackPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ComponentFeedbackPanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentFeedbackPanelComponent, selectors: [["mj-component-feedback-panel"]], inputs: { ComponentSpec: "ComponentSpec", ReactContainerElement: "ReactContainerElement", ConversationId: "ConversationId", ConversationDetailId: "ConversationDetailId" }, outputs: { Closed: "Closed" }, decls: 20, vars: 2, consts: [[1, "feedback-panel-overlay", 3, "click"], [1, "feedback-panel", 3, "click"], [1, "panel-header"], [1, "panel-title"], [1, "fa-solid", "fa-comment-dots"], [1, "close-button", 3, "click"], [1, "fa-solid", "fa-times"], [1, "panel-content"], [1, "tree-section"], [1, "section-header"], [1, "fa-solid", "fa-sitemap"], [1, "component-tree"], [1, "empty-state"], [1, "feedback-section"], [1, "selected-component-info"], [1, "no-selection-message"], [1, "tree-item", 3, "selected", "padding-left"], [1, "tree-item", 3, "click", "mouseenter", "mouseleave"], [1, "tree-toggle", "fa-solid", 3, "fa-chevron-right", "fa-chevron-down"], [1, "tree-spacer"], [1, "fa-solid", "fa-cube", "component-icon"], [1, "component-info"], [1, "component-name"], [1, "component-badge", "registry"], [1, "tree-toggle", "fa-solid", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-star"], [1, "component-description"], [1, "star-rating-container"], [1, "rating-label"], [1, "star-rating"], [1, "star", 3, "fa-solid", "fa-regular", "fa-star"], [1, "rating-text"], [1, "rating-text", "placeholder"], [1, "comment-container"], [1, "comment-label"], [1, "optional-label"], ["placeholder", "Share your thoughts about this component...", "rows", "4", "maxlength", "1000", 1, "comment-input", 3, "ngModelChange", "ngModel"], [1, "char-count"], [1, "submit-container"], [1, "submit-button", 3, "click", "disabled"], [1, "message", "success-message"], [1, "message", "error-message"], [1, "star", 3, "click", "mouseenter", "mouseleave"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-paper-plane"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-exclamation-circle"], [1, "fa-solid", "fa-hand-pointer"]], template: function ComponentFeedbackPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵlistener("click", function ComponentFeedbackPanelComponent_Template_div_click_0_listener() { return ctx.ClosePanel(); });
+            i0.ɵɵelementStart(1, "div", 1);
+            i0.ɵɵlistener("click", function ComponentFeedbackPanelComponent_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
+            i0.ɵɵelementStart(2, "div", 2)(3, "div", 3);
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵelementStart(5, "span");
+            i0.ɵɵtext(6, "Component Feedback");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "button", 5);
+            i0.ɵɵlistener("click", function ComponentFeedbackPanelComponent_Template_button_click_7_listener() { return ctx.ClosePanel(); });
+            i0.ɵɵelement(8, "i", 6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "div", 7)(10, "div", 8)(11, "div", 9);
+            i0.ɵɵelement(12, "i", 10);
+            i0.ɵɵelementStart(13, "span");
+            i0.ɵɵtext(14, "Select Component");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(15, ComponentFeedbackPanelComponent_Conditional_15_Template, 3, 0, "div", 11)(16, ComponentFeedbackPanelComponent_Conditional_16_Template, 4, 0, "div", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(17, "div", 13);
+            i0.ɵɵconditionalCreate(18, ComponentFeedbackPanelComponent_Conditional_18_Template, 28, 10, "div", 14)(19, ComponentFeedbackPanelComponent_Conditional_19_Template, 4, 0, "div", 15);
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(15);
+            i0.ɵɵconditional(ctx.ComponentSpec ? 15 : 16);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.SelectedSpec ? 18 : 19);
+        } }, dependencies: [CommonModule, FormsModule, i1.DefaultValueAccessor, i1.NgControlStatus, i1.MaxLengthValidator, i1.NgModel], styles: ["\n\n.feedback-panel-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 60px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--mj-bg-overlay, rgba(0, 0, 0, 0.4));\n  z-index: 9999;\n  display: flex;\n  justify-content: flex-start;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n\n\n.feedback-panel[_ngcontent-%COMP%] {\n  width: 450px;\n  height: 100%;\n  background-color: var(--mj-bg-surface, #ffffff);\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);\n  display: flex;\n  flex-direction: column;\n  animation: _ngcontent-%COMP%_slideInFromLeft 0.3s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideInFromLeft {\n  from { transform: translateX(-100%); }\n  to { transform: translateX(0); }\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default, #e0e0e0);\n  background-color: var(--mj-bg-surface-card, #f8f9fa);\n}\n\n.panel-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary, #333);\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary, #3B82F6);\n  font-size: 20px;\n}\n\n.close-button[_ngcontent-%COMP%] {\n  min-width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  background: none;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--mj-text-secondary, #555);\n  font-size: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.close-button[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-hover, #e0e0e0);\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 20px;\n}\n\n\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary, #555);\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 2px solid var(--mj-brand-primary, #3B82F6);\n}\n\n.section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary, #3B82F6);\n}\n\n\n\n.tree-section[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface-card, #f8f9fa);\n  border-radius: 8px;\n  padding: 16px;\n}\n\n.component-tree[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.tree-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n}\n\n.tree-item[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary, #3B82F6) 10%, var(--mj-bg-surface, #ffffff));\n}\n\n.tree-item.selected[_ngcontent-%COMP%] {\n  background-color: var(--mj-brand-primary, #3B82F6);\n  color: var(--mj-text-inverse, #ffffff);\n  font-weight: 500;\n}\n\n.tree-item.selected[_ngcontent-%COMP%]   .component-icon[_ngcontent-%COMP%], \n.tree-item.selected[_ngcontent-%COMP%]   .tree-toggle[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse, #ffffff);\n}\n\n.tree-item.selected[_ngcontent-%COMP%]   .component-badge[_ngcontent-%COMP%] {\n  background-color: rgba(255, 255, 255, 0.2);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n.tree-toggle[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted, #666);\n  cursor: pointer;\n  transition: transform 0.2s ease;\n  width: 16px;\n  text-align: center;\n}\n\n.tree-spacer[_ngcontent-%COMP%] {\n  width: 16px;\n  display: inline-block;\n}\n\n.component-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: var(--mj-brand-primary, #3B82F6);\n}\n\n.component-info[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  overflow: hidden;\n}\n\n.component-name[_ngcontent-%COMP%] {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 14px;\n}\n\n.component-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 10px;\n  background-color: color-mix(in srgb, var(--mj-brand-primary, #3B82F6) 10%, var(--mj-bg-surface, #ffffff));\n  color: var(--mj-brand-primary, #3B82F6);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary, #3B82F6) 30%, var(--mj-bg-surface, #ffffff));\n  white-space: nowrap;\n  font-weight: 500;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 20px;\n  color: var(--mj-text-disabled, #999);\n  font-size: 14px;\n}\n\n\n\n.feedback-section[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface, #ffffff);\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-default, #e0e0e0);\n  padding: 16px;\n  min-height: 300px;\n}\n\n.selected-component-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.component-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary, #666);\n  line-height: 1.5;\n  margin: 0;\n  padding: 12px;\n  background-color: var(--mj-bg-surface-card, #f8f9fa);\n  border-radius: 6px;\n  border-left: 3px solid var(--mj-brand-primary, #3B82F6);\n}\n\n\n\n.star-rating-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.rating-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary, #333);\n}\n\n.star-rating[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.star[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #ffd700;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.star[_ngcontent-%COMP%]:hover {\n  transform: scale(1.2);\n  filter: brightness(1.1);\n}\n\n.star.fa-regular[_ngcontent-%COMP%] {\n  color: var(--mj-border-default, #d0d0d0);\n}\n\n.rating-text[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary, #666);\n  margin-top: 4px;\n}\n\n.rating-text.placeholder[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled, #999);\n  font-style: italic;\n}\n\n\n\n.comment-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  position: relative;\n}\n\n.comment-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary, #333);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.optional-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: normal;\n  color: var(--mj-text-disabled, #999);\n}\n\n.comment-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default, #d0d0d0);\n  border-radius: 6px;\n  font-size: 14px;\n  font-family: inherit;\n  resize: vertical;\n  min-height: 80px;\n  transition: border-color 0.2s ease;\n  background-color: var(--mj-bg-surface, #ffffff);\n  color: var(--mj-text-primary, #333);\n  box-sizing: border-box;\n}\n\n.comment-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary, #3B82F6);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary, #3B82F6) 15%, transparent);\n}\n\n.char-count[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 8px;\n  right: 12px;\n  font-size: 11px;\n  color: var(--mj-text-disabled, #999);\n  background-color: var(--mj-bg-surface, #ffffff);\n  padding: 2px 4px;\n}\n\n\n\n.submit-container[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-start;\n}\n\n.submit-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  font-size: 14px;\n  font-weight: 500;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  background-color: var(--mj-brand-primary, #3B82F6);\n  color: var(--mj-text-inverse, #ffffff);\n  transition: background-color 0.2s ease;\n}\n\n.submit-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-brand-primary-hover, #2563EB);\n}\n\n.submit-button[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  animation: _ngcontent-%COMP%_slideDown 0.3s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from { opacity: 0; transform: translateY(-10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.success-message[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-success-bg, #d4edda);\n  color: var(--mj-status-success-text, #155724);\n  border: 1px solid var(--mj-status-success-border, #c3e6cb);\n}\n\n.success-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success, #28a745);\n}\n\n.error-message[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-error-bg, #f8d7da);\n  color: var(--mj-status-error-text, #721c24);\n  border: 1px solid var(--mj-status-error-border, #f5c6cb);\n}\n\n.error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error, #dc3545);\n}\n\n\n\n.no-selection-message[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: var(--mj-text-disabled, #999);\n  text-align: center;\n}\n\n.no-selection-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  color: var(--mj-border-default, #d0d0d0);\n}\n\n.no-selection-message[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background-color: var(--mj-bg-surface-sunken, #f1f1f1);\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background-color: var(--mj-border-strong, #c0c0c0);\n  border-radius: 4px;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background-color: var(--mj-text-disabled, #a0a0a0);\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentFeedbackPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-component-feedback-panel', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"feedback-panel-overlay\" (click)=\"ClosePanel()\">\n  <div class=\"feedback-panel\" (click)=\"$event.stopPropagation()\">\n    <!-- Header -->\n    <div class=\"panel-header\">\n      <div class=\"panel-title\">\n        <i class=\"fa-solid fa-comment-dots\"></i>\n        <span>Component Feedback</span>\n      </div>\n      <button class=\"close-button\" (click)=\"ClosePanel()\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"panel-content\">\n      <!-- Component Tree Section -->\n      <div class=\"tree-section\">\n        <div class=\"section-header\">\n          <i class=\"fa-solid fa-sitemap\"></i>\n          <span>Select Component</span>\n        </div>\n\n        @if (ComponentSpec) {\n          <div class=\"component-tree\">\n            @for (item of GetTreeItems(); track item.spec.name) {\n              <div\n                class=\"tree-item\"\n                [class.selected]=\"IsSelected(item.spec)\"\n                [style.padding-left]=\"GetIndentation(item.depth)\"\n                (click)=\"SelectComponent(item.spec)\"\n                (mouseenter)=\"HoverTreeItem(item.spec)\"\n                (mouseleave)=\"ClearTreeItemHover()\">\n\n                @if (item.hasChildren) {\n                  <i\n                    class=\"tree-toggle fa-solid\"\n                    [class.fa-chevron-right]=\"!IsNodeExpanded(item.spec)\"\n                    [class.fa-chevron-down]=\"IsNodeExpanded(item.spec)\"\n                    (click)=\"ToggleNode(item.spec, $event)\">\n                  </i>\n                } @else {\n                  <span class=\"tree-spacer\"></span>\n                }\n\n                <i class=\"fa-solid fa-cube component-icon\"></i>\n\n                <div class=\"component-info\">\n                  <span class=\"component-name\">{{ item.spec.title || item.spec.name }}</span>\n                  @if (item.spec.location === 'registry') {\n                    <span class=\"component-badge registry\">Registry</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-info-circle\"></i>\n            <span>No component hierarchy available</span>\n          </div>\n        }\n      </div>\n\n      <!-- Feedback Form Section -->\n      <div class=\"feedback-section\">\n        @if (SelectedSpec) {\n          <div class=\"selected-component-info\">\n            <div class=\"section-header\">\n              <i class=\"fa-solid fa-star\"></i>\n              <span>Rate: {{ SelectedSpec.title || SelectedSpec.name }}</span>\n            </div>\n\n            @if (SelectedSpec.description) {\n              <p class=\"component-description\">{{ SelectedSpec.description }}</p>\n            }\n\n            <!-- Star Rating -->\n            <div class=\"star-rating-container\">\n              <label class=\"rating-label\">Your Rating</label>\n              <div class=\"star-rating\">\n                @for (star of [1, 2, 3, 4, 5]; track star) {\n                  <i\n                    class=\"star\"\n                    [class.fa-solid]=\"IsStarFilled(star)\"\n                    [class.fa-regular]=\"!IsStarFilled(star)\"\n                    [class.fa-star]=\"true\"\n                    (click)=\"SetRating(star)\"\n                    (mouseenter)=\"SetHoverRating(star)\"\n                    (mouseleave)=\"ClearHoverRating()\">\n                  </i>\n                }\n              </div>\n              @if (StarRating > 0) {\n                <span class=\"rating-text\">{{ StarRating }} out of 5 stars</span>\n              } @else {\n                <span class=\"rating-text placeholder\">Click to rate</span>\n              }\n            </div>\n\n            <!-- Comment Input -->\n            <div class=\"comment-container\">\n              <label class=\"comment-label\">\n                Comments\n                <span class=\"optional-label\">(optional)</span>\n              </label>\n              <textarea\n                class=\"comment-input\"\n                [(ngModel)]=\"FeedbackComments\"\n                placeholder=\"Share your thoughts about this component...\"\n                rows=\"4\"\n                maxlength=\"1000\">\n              </textarea>\n              @if (FeedbackComments.length > 0) {\n                <span class=\"char-count\">{{ FeedbackComments.length }}/1000</span>\n              }\n            </div>\n\n            <!-- Submit Button -->\n            <div class=\"submit-container\">\n              <button\n                class=\"submit-button\"\n                [disabled]=\"!CanSubmit()\"\n                (click)=\"SubmitFeedback()\">\n                @if (IsSubmitting) {\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                  <span>Submitting...</span>\n                } @else {\n                  <i class=\"fa-solid fa-paper-plane\"></i>\n                  <span>Submit Feedback</span>\n                }\n              </button>\n            </div>\n\n            <!-- Success/Error Messages -->\n            @if (SubmitSuccess) {\n              <div class=\"message success-message\">\n                <i class=\"fa-solid fa-check-circle\"></i>\n                <span>Feedback submitted successfully!</span>\n              </div>\n            }\n            @if (SubmitError) {\n              <div class=\"message error-message\">\n                <i class=\"fa-solid fa-exclamation-circle\"></i>\n                <span>{{ SubmitError }}</span>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"no-selection-message\">\n            <i class=\"fa-solid fa-hand-pointer\"></i>\n            <p>Select a component from the tree to provide feedback</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/* Overlay */\n.feedback-panel-overlay {\n  position: fixed;\n  top: 60px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--mj-bg-overlay, rgba(0, 0, 0, 0.4));\n  z-index: 9999;\n  display: flex;\n  justify-content: flex-start;\n  animation: fadeIn 0.2s ease-in-out;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n/* Panel Container */\n.feedback-panel {\n  width: 450px;\n  height: 100%;\n  background-color: var(--mj-bg-surface, #ffffff);\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);\n  display: flex;\n  flex-direction: column;\n  animation: slideInFromLeft 0.3s ease-out;\n}\n\n@keyframes slideInFromLeft {\n  from { transform: translateX(-100%); }\n  to { transform: translateX(0); }\n}\n\n/* Header */\n.panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default, #e0e0e0);\n  background-color: var(--mj-bg-surface-card, #f8f9fa);\n}\n\n.panel-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary, #333);\n}\n\n.panel-title i {\n  color: var(--mj-brand-primary, #3B82F6);\n  font-size: 20px;\n}\n\n.close-button {\n  min-width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  background: none;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--mj-text-secondary, #555);\n  font-size: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.close-button:hover {\n  background-color: var(--mj-bg-surface-hover, #e0e0e0);\n}\n\n/* Content */\n.panel-content {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 20px;\n}\n\n/* Section Headers */\n.section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary, #555);\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 2px solid var(--mj-brand-primary, #3B82F6);\n}\n\n.section-header i {\n  color: var(--mj-brand-primary, #3B82F6);\n}\n\n/* Component Tree */\n.tree-section {\n  background-color: var(--mj-bg-surface-card, #f8f9fa);\n  border-radius: 8px;\n  padding: 16px;\n}\n\n.component-tree {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.tree-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n}\n\n.tree-item:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary, #3B82F6) 10%, var(--mj-bg-surface, #ffffff));\n}\n\n.tree-item.selected {\n  background-color: var(--mj-brand-primary, #3B82F6);\n  color: var(--mj-text-inverse, #ffffff);\n  font-weight: 500;\n}\n\n.tree-item.selected .component-icon,\n.tree-item.selected .tree-toggle {\n  color: var(--mj-text-inverse, #ffffff);\n}\n\n.tree-item.selected .component-badge {\n  background-color: rgba(255, 255, 255, 0.2);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n.tree-toggle {\n  font-size: 12px;\n  color: var(--mj-text-muted, #666);\n  cursor: pointer;\n  transition: transform 0.2s ease;\n  width: 16px;\n  text-align: center;\n}\n\n.tree-spacer {\n  width: 16px;\n  display: inline-block;\n}\n\n.component-icon {\n  font-size: 16px;\n  color: var(--mj-brand-primary, #3B82F6);\n}\n\n.component-info {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  overflow: hidden;\n}\n\n.component-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 14px;\n}\n\n.component-badge {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 10px;\n  background-color: color-mix(in srgb, var(--mj-brand-primary, #3B82F6) 10%, var(--mj-bg-surface, #ffffff));\n  color: var(--mj-brand-primary, #3B82F6);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary, #3B82F6) 30%, var(--mj-bg-surface, #ffffff));\n  white-space: nowrap;\n  font-weight: 500;\n}\n\n.empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 20px;\n  color: var(--mj-text-disabled, #999);\n  font-size: 14px;\n}\n\n/* Feedback Form Section */\n.feedback-section {\n  background-color: var(--mj-bg-surface, #ffffff);\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-default, #e0e0e0);\n  padding: 16px;\n  min-height: 300px;\n}\n\n.selected-component-info {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.component-description {\n  font-size: 13px;\n  color: var(--mj-text-secondary, #666);\n  line-height: 1.5;\n  margin: 0;\n  padding: 12px;\n  background-color: var(--mj-bg-surface-card, #f8f9fa);\n  border-radius: 6px;\n  border-left: 3px solid var(--mj-brand-primary, #3B82F6);\n}\n\n/* Star Rating */\n.star-rating-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.rating-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary, #333);\n}\n\n.star-rating {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.star {\n  font-size: 32px;\n  color: #ffd700;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.star:hover {\n  transform: scale(1.2);\n  filter: brightness(1.1);\n}\n\n.star.fa-regular {\n  color: var(--mj-border-default, #d0d0d0);\n}\n\n.rating-text {\n  font-size: 13px;\n  color: var(--mj-text-secondary, #666);\n  margin-top: 4px;\n}\n\n.rating-text.placeholder {\n  color: var(--mj-text-disabled, #999);\n  font-style: italic;\n}\n\n/* Comment Input */\n.comment-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  position: relative;\n}\n\n.comment-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary, #333);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.optional-label {\n  font-size: 12px;\n  font-weight: normal;\n  color: var(--mj-text-disabled, #999);\n}\n\n.comment-input {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default, #d0d0d0);\n  border-radius: 6px;\n  font-size: 14px;\n  font-family: inherit;\n  resize: vertical;\n  min-height: 80px;\n  transition: border-color 0.2s ease;\n  background-color: var(--mj-bg-surface, #ffffff);\n  color: var(--mj-text-primary, #333);\n  box-sizing: border-box;\n}\n\n.comment-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary, #3B82F6);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary, #3B82F6) 15%, transparent);\n}\n\n.char-count {\n  position: absolute;\n  bottom: 8px;\n  right: 12px;\n  font-size: 11px;\n  color: var(--mj-text-disabled, #999);\n  background-color: var(--mj-bg-surface, #ffffff);\n  padding: 2px 4px;\n}\n\n/* Submit Button */\n.submit-container {\n  display: flex;\n  justify-content: flex-start;\n}\n\n.submit-button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  font-size: 14px;\n  font-weight: 500;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  background-color: var(--mj-brand-primary, #3B82F6);\n  color: var(--mj-text-inverse, #ffffff);\n  transition: background-color 0.2s ease;\n}\n\n.submit-button:hover:not(:disabled) {\n  background-color: var(--mj-brand-primary-hover, #2563EB);\n}\n\n.submit-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Messages */\n.message {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  animation: slideDown 0.3s ease-out;\n}\n\n@keyframes slideDown {\n  from { opacity: 0; transform: translateY(-10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.success-message {\n  background-color: var(--mj-status-success-bg, #d4edda);\n  color: var(--mj-status-success-text, #155724);\n  border: 1px solid var(--mj-status-success-border, #c3e6cb);\n}\n\n.success-message i {\n  color: var(--mj-status-success, #28a745);\n}\n\n.error-message {\n  background-color: var(--mj-status-error-bg, #f8d7da);\n  color: var(--mj-status-error-text, #721c24);\n  border: 1px solid var(--mj-status-error-border, #f5c6cb);\n}\n\n.error-message i {\n  color: var(--mj-status-error, #dc3545);\n}\n\n/* No Selection Message */\n.no-selection-message {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: var(--mj-text-disabled, #999);\n  text-align: center;\n}\n\n.no-selection-message i {\n  font-size: 48px;\n  color: var(--mj-border-default, #d0d0d0);\n}\n\n.no-selection-message p {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n/* Scrollbar Styling */\n.panel-content::-webkit-scrollbar {\n  width: 8px;\n}\n\n.panel-content::-webkit-scrollbar-track {\n  background-color: var(--mj-bg-surface-sunken, #f1f1f1);\n}\n\n.panel-content::-webkit-scrollbar-thumb {\n  background-color: var(--mj-border-strong, #c0c0c0);\n  border-radius: 4px;\n}\n\n.panel-content::-webkit-scrollbar-thumb:hover {\n  background-color: var(--mj-text-disabled, #a0a0a0);\n}\n"] }]
+    }], null, { ComponentSpec: [{
+            type: Input
+        }], ReactContainerElement: [{
+            type: Input
+        }], ConversationId: [{
+            type: Input
+        }], ConversationDetailId: [{
+            type: Input
+        }], Closed: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentFeedbackPanelComponent, { className: "ComponentFeedbackPanelComponent", filePath: "src/lib/components/plugins/component-feedback-panel/component-feedback-panel.component.ts", lineNumber: 28 }); })();
+//# sourceMappingURL=component-feedback-panel.component.js.map