@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/canvas/chatbot-trigger/chatbot-trigger-fields.component.js

@@ -0,0 +1,480 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { chatbotTriggerFieldStyles } from './chatbot-trigger-fields.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { CHATBOT_TRIGGER_EVENTS, } from './chatbot-trigger.types.js';
+/**
+ * Trigger Event Selector Component
+ * Multi-select for choosing trigger events
+ */
+let TriggerEventSelectComponent = class TriggerEventSelectComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-checkbox', 'nr-icon'];
+        this.value = [];
+        this.disabled = false;
+        this.label = '';
+        this.description = '';
+    }
+    toggleEvent(event) {
+        if (this.disabled)
+            return;
+        const newValue = this.value.includes(event)
+            ? this.value.filter(e => e !== event)
+            : [...this.value, event];
+        this.value = newValue;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div class="field-container">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        <div class="event-list">
+          ${map(CHATBOT_TRIGGER_EVENTS, eventMeta => {
+            const isSelected = this.value.includes(eventMeta.value);
+            return html `
+              <div
+                class="event-item ${classMap({ selected: isSelected })}"
+                @click=${() => this.toggleEvent(eventMeta.value)}
+              >
+                <nr-checkbox
+                  class="event-item-checkbox"
+                  .checked=${isSelected}
+                  ?disabled=${this.disabled}
+                ></nr-checkbox>
+                <div class="event-item-content">
+                  <div class="event-item-header">
+                    <nr-icon class="event-item-icon" name=${eventMeta.icon} size="small"></nr-icon>
+                    <span class="event-item-label">${eventMeta.label}</span>
+                  </div>
+                  <span class="event-item-description">${eventMeta.description}</span>
+                </div>
+              </div>
+            `;
+        })}
+        </div>
+        ${this.description ? html `<span class="field-description">${this.description}</span>` : nothing}
+      </div>
+    `;
+    }
+};
+TriggerEventSelectComponent.useShadowDom = true;
+TriggerEventSelectComponent.styles = chatbotTriggerFieldStyles;
+__decorate([
+    property({ type: Array })
+], TriggerEventSelectComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], TriggerEventSelectComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], TriggerEventSelectComponent.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TriggerEventSelectComponent.prototype, "description", void 0);
+TriggerEventSelectComponent = __decorate([
+    customElement('nr-trigger-event-select')
+], TriggerEventSelectComponent);
+export { TriggerEventSelectComponent };
+/**
+ * Chatbot Size Selector Component
+ */
+let ChatbotSizeSelectComponent = class ChatbotSizeSelectComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-icon'];
+        this.value = 'medium';
+        this.disabled = false;
+        this.label = '';
+        this.sizes = [
+            { value: 'small', label: 'Small', icon: 'minimize-2' },
+            { value: 'medium', label: 'Medium', icon: 'square' },
+            { value: 'large', label: 'Large', icon: 'maximize-2' },
+            { value: 'full', label: 'Full', icon: 'expand' },
+        ];
+    }
+    selectSize(size) {
+        if (this.disabled)
+            return;
+        this.value = size;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div class="field-container">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        <div class="option-grid">
+          ${map(this.sizes, size => html `
+            <div
+              class="option-card ${classMap({ selected: this.value === size.value })}"
+              @click=${() => this.selectSize(size.value)}
+            >
+              <nr-icon name=${size.icon} size="small"></nr-icon>
+              <span class="option-card-label">${size.label}</span>
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+    }
+};
+ChatbotSizeSelectComponent.useShadowDom = true;
+ChatbotSizeSelectComponent.styles = chatbotTriggerFieldStyles;
+__decorate([
+    property({ type: String })
+], ChatbotSizeSelectComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], ChatbotSizeSelectComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], ChatbotSizeSelectComponent.prototype, "label", void 0);
+ChatbotSizeSelectComponent = __decorate([
+    customElement('nr-chatbot-size-select')
+], ChatbotSizeSelectComponent);
+export { ChatbotSizeSelectComponent };
+/**
+ * Chatbot Variant Selector Component
+ */
+let ChatbotVariantSelectComponent = class ChatbotVariantSelectComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-icon'];
+        this.value = 'default';
+        this.disabled = false;
+        this.label = '';
+        this.variants = [
+            { value: 'default', label: 'Default', icon: 'layout' },
+            { value: 'minimal', label: 'Minimal', icon: 'minus-square' },
+            { value: 'rounded', label: 'Rounded', icon: 'circle' },
+            { value: 'chatgpt', label: 'ChatGPT', icon: 'message-circle' },
+        ];
+    }
+    selectVariant(variant) {
+        if (this.disabled)
+            return;
+        this.value = variant;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div class="field-container">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        <div class="option-grid">
+          ${map(this.variants, variant => html `
+            <div
+              class="option-card ${classMap({ selected: this.value === variant.value })}"
+              @click=${() => this.selectVariant(variant.value)}
+            >
+              <nr-icon name=${variant.icon} size="small"></nr-icon>
+              <span class="option-card-label">${variant.label}</span>
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+    }
+};
+ChatbotVariantSelectComponent.useShadowDom = true;
+ChatbotVariantSelectComponent.styles = chatbotTriggerFieldStyles;
+__decorate([
+    property({ type: String })
+], ChatbotVariantSelectComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], ChatbotVariantSelectComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], ChatbotVariantSelectComponent.prototype, "label", void 0);
+ChatbotVariantSelectComponent = __decorate([
+    customElement('nr-chatbot-variant-select')
+], ChatbotVariantSelectComponent);
+export { ChatbotVariantSelectComponent };
+/**
+ * Feature Toggle Component
+ */
+let FeatureToggleComponent = class FeatureToggleComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.value = false;
+        this.disabled = false;
+        this.label = '';
+        this.description = '';
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.value = !this.value;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div class="toggle-container" @click=${this.toggle}>
+        <div class="toggle-label">
+          <span class="toggle-label-text">${this.label}</span>
+          ${this.description ? html `<span class="toggle-label-desc">${this.description}</span>` : nothing}
+        </div>
+        <div class="toggle-switch ${classMap({ active: this.value })}">
+          <div class="toggle-switch-knob"></div>
+        </div>
+      </div>
+    `;
+    }
+};
+FeatureToggleComponent.useShadowDom = true;
+FeatureToggleComponent.styles = chatbotTriggerFieldStyles;
+__decorate([
+    property({ type: Boolean })
+], FeatureToggleComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], FeatureToggleComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], FeatureToggleComponent.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], FeatureToggleComponent.prototype, "description", void 0);
+FeatureToggleComponent = __decorate([
+    customElement('nr-feature-toggle')
+], FeatureToggleComponent);
+export { FeatureToggleComponent };
+/**
+ * Suggestion List Component
+ */
+let SuggestionListComponent = class SuggestionListComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-input', 'nr-icon'];
+        this.value = [];
+        this.disabled = false;
+        this.label = '';
+        this.description = '';
+    }
+    updateValue(newValue) {
+        this.value = newValue;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    addSuggestion() {
+        const newSuggestion = {
+            id: `suggestion_${Date.now()}`,
+            text: '',
+            icon: 'zap',
+        };
+        this.updateValue([...this.value, newSuggestion]);
+    }
+    removeSuggestion(id) {
+        this.updateValue(this.value.filter(s => s.id !== id));
+    }
+    updateSuggestion(id, updates) {
+        this.updateValue(this.value.map(s => s.id === id ? Object.assign(Object.assign({}, s), updates) : s));
+    }
+    render() {
+        return html `
+      <div class="field-container">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        <div class="suggestion-list">
+          ${this.value.length === 0
+            ? html `
+              <div class="empty-state">
+                <nr-icon name="zap" size="large"></nr-icon>
+                <span class="empty-state-text">No suggestions configured</span>
+              </div>
+            `
+            : map(this.value, suggestion => html `
+              <div class="suggestion-item">
+                <div class="suggestion-item-drag">
+                  <nr-icon name="grip-vertical" size="small"></nr-icon>
+                </div>
+                <nr-input
+                  .value=${suggestion.text}
+                  placeholder="Suggestion text..."
+                  size="small"
+                  ?disabled=${this.disabled}
+                  @nr-input=${(e) => this.updateSuggestion(suggestion.id, { text: e.detail.value })}
+                ></nr-input>
+                <nr-input
+                  .value=${suggestion.icon || ''}
+                  placeholder="Icon"
+                  size="small"
+                  style="width: 80px"
+                  ?disabled=${this.disabled}
+                  @nr-input=${(e) => this.updateSuggestion(suggestion.id, { icon: e.detail.value })}
+                ></nr-input>
+                <button
+                  class="remove-btn"
+                  ?disabled=${this.disabled}
+                  @click=${() => this.removeSuggestion(suggestion.id)}
+                >
+                  <nr-icon name="x" size="small"></nr-icon>
+                </button>
+              </div>
+            `)}
+          <button class="add-btn" ?disabled=${this.disabled} @click=${this.addSuggestion}>
+            <nr-icon name="plus" size="small"></nr-icon>
+            Add suggestion
+          </button>
+        </div>
+        ${this.description ? html `<span class="field-description">${this.description}</span>` : nothing}
+      </div>
+    `;
+    }
+};
+SuggestionListComponent.useShadowDom = true;
+SuggestionListComponent.styles = chatbotTriggerFieldStyles;
+__decorate([
+    property({ type: Array })
+], SuggestionListComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], SuggestionListComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], SuggestionListComponent.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], SuggestionListComponent.prototype, "description", void 0);
+SuggestionListComponent = __decorate([
+    customElement('nr-suggestion-list')
+], SuggestionListComponent);
+export { SuggestionListComponent };
+/**
+ * Chatbot Preview Component
+ */
+let ChatbotPreviewComponent = class ChatbotPreviewComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-icon'];
+        this.size = 'medium';
+        this.variant = 'default';
+        this.placeholder = 'Type your message...';
+        this.triggerEvents = [];
+    }
+    render() {
+        var _a;
+        const eventCount = this.triggerEvents.length;
+        const eventText = eventCount === 0
+            ? 'No triggers configured'
+            : eventCount === 1
+                ? `Triggers on: ${(_a = CHATBOT_TRIGGER_EVENTS.find(e => e.value === this.triggerEvents[0])) === null || _a === void 0 ? void 0 : _a.label}`
+                : `Triggers on ${eventCount} events`;
+        return html `
+      <div class="chatbot-preview">
+        <div class="chatbot-preview-icon">
+          <nr-icon name="message-square" size="large"></nr-icon>
+        </div>
+        <div class="chatbot-preview-title">Chatbot Trigger</div>
+        <div class="chatbot-preview-subtitle">${eventText}</div>
+        <div class="chatbot-preview-subtitle" style="margin-top: 4px;">
+          ${this.size} / ${this.variant}
+        </div>
+      </div>
+    `;
+    }
+};
+ChatbotPreviewComponent.useShadowDom = true;
+ChatbotPreviewComponent.styles = chatbotTriggerFieldStyles;
+__decorate([
+    property({ type: String })
+], ChatbotPreviewComponent.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], ChatbotPreviewComponent.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], ChatbotPreviewComponent.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Array })
+], ChatbotPreviewComponent.prototype, "triggerEvents", void 0);
+ChatbotPreviewComponent = __decorate([
+    customElement('nr-chatbot-preview')
+], ChatbotPreviewComponent);
+export { ChatbotPreviewComponent };
+/**
+ * Loading Indicator Selector Component
+ */
+let LoadingTypeSelectComponent = class LoadingTypeSelectComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-select'];
+        this.value = 'dots';
+        this.disabled = false;
+        this.label = '';
+    }
+    handleChange(e) {
+        this.value = e.detail.value;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const options = [
+            { value: 'dots', label: 'Dots' },
+            { value: 'spinner', label: 'Spinner' },
+            { value: 'wave', label: 'Wave' },
+            { value: 'typing', label: 'Typing' },
+        ];
+        return html `
+      <div class="field-container">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        <nr-select
+          .value=${this.value}
+          .options=${options}
+          ?disabled=${this.disabled}
+          @nr-change=${this.handleChange}
+        ></nr-select>
+      </div>
+    `;
+    }
+};
+LoadingTypeSelectComponent.useShadowDom = true;
+LoadingTypeSelectComponent.styles = chatbotTriggerFieldStyles;
+__decorate([
+    property({ type: String })
+], LoadingTypeSelectComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], LoadingTypeSelectComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], LoadingTypeSelectComponent.prototype, "label", void 0);
+LoadingTypeSelectComponent = __decorate([
+    customElement('nr-loading-type-select')
+], LoadingTypeSelectComponent);
+export { LoadingTypeSelectComponent };
+//# sourceMappingURL=chatbot-trigger-fields.component.js.map

package/dist/src/components/canvas/chatbot-trigger/chatbot-trigger-fields.style.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export declare const chatbotTriggerFieldStyles: import("lit").CSSResult;
+//# sourceMappingURL=chatbot-trigger-fields.style.d.ts.map