web-mojo 2.1.458 → 2.1.498

package/dist/chunks/{FilePreviewView-CehLQVJa.js → ChatView-DkK2PBny.js}

@@ -1,8 +1,8 @@
-import { M as Model, C as Collection, T as ToastService, G as GroupList, d as UserList } from "./ContextMenu-BjQymcpo.js";
-import { r as rest, V as View, d as dataFormatter, M as Mustache } from "./WebApp-BONphh_h.js";
-import { P as Page } from "./Page-q5Gme_r0.js";
-import Dialog from "./Dialog-upGYwvdZ.js";
-import { F as FormView } from "./FormView-C9PgTIH2.js";
+import { M as Model, C as Collection, T as ToastService, G as GroupList, d as UserList } from "./ContextMenu-A1PxR6Zt.js";
+import { r as rest, V as View, d as dataFormatter, M as Mustache } from "./WebApp-BdmNWAj2.js";
+import { P as Page } from "./Page-dP8b4UdB.js";
+import Dialog from "./Dialog-DtSluuiz.js";
+import { F as FormView, a as applyFileDropMixin } from "./FormView-DrvkHPA-.js";
 class S3Bucket extends Model {
   constructor(data = {}) {
     super(data, {
@@ -2566,13 +2566,55 @@ const TicketForms = {
   create: {
     title: "Create Ticket",
     fields: [
-      { name: "title", type: "text", label: "Title", required: true, cols: 12 },
+      {
+        name: "title",
+        type: "text",
+        label: "Title",
+        required: true,
+        cols: 12
+      },
       { name: "description", type: "textarea", label: "Description", required: false, cols: 12 },
-      { name: "category", type: "select", label: "Category", options: TicketCategoriesOptions, cols: 12 },
-      { name: "priority", type: "number", label: "Priority", value: 5, cols: 6 },
-      { name: "status", type: "select", label: "Status", value: "open", options: ["new", "open", "paused", "resolved", "qa", "ignored"], cols: 6 },
-      { type: "collection", name: "assignee", label: "Assignee", Collection: UserList, labelField: "display_name", valueField: "id", cols: 12 },
-      { type: "collection", name: "incident", label: "Incident", Collection: IncidentList, labelField: "title", valueField: "id", cols: 12 }
+      {
+        name: "category",
+        type: "select",
+        label: "Category",
+        options: TicketCategoriesOptions,
+        cols: 12,
+        value: "ticket"
+      },
+      {
+        name: "priority",
+        type: "number",
+        label: "Priority",
+        value: 5,
+        cols: 6
+      },
+      {
+        name: "status",
+        type: "select",
+        label: "Status",
+        options: ["new", "open", "paused", "resolved", "qa", "ignored"],
+        cols: 6,
+        value: "new"
+      },
+      {
+        type: "collection",
+        name: "assignee",
+        label: "Assignee",
+        Collection: UserList,
+        labelField: "display_name",
+        valueField: "id",
+        cols: 12
+      },
+      {
+        type: "collection",
+        name: "incident",
+        label: "Incident",
+        Collection: IncidentList,
+        labelField: "title",
+        valueField: "id",
+        cols: 12
+      }
     ]
   },
   edit: {
@@ -6533,90 +6575,584 @@ class FilePreviewView extends View {
     }
   }
 }
+class ChatMessageView extends View {
+  constructor(options = {}) {
+    super({
+      className: "chat-message",
+      ...options
+    });
+    this.message = options.message || {};
+    this.theme = options.theme || "compact";
+    this.isCurrentUser = options.isCurrentUser || false;
+    if (this.theme === "bubbles") {
+      this.className += this.isCurrentUser ? " message-right" : " message-left";
+    }
+  }
+  getTemplate() {
+    if (this.message.type === "system_event") {
+      return `
+                <div class="chat-message-system text-center text-muted small py-2">
+                    <i class="bi bi-info-circle me-1"></i>
+                    {{message.content}} on {{message.timestamp|datetime}}
+                </div>
+            `;
+    }
+    if (this.theme === "bubbles") {
+      return this.getBubblesTemplate();
+    } else {
+      return this.getCompactTemplate();
+    }
+  }
+  /**
+   * Get compact theme template (Option 4 - Admin/Activity Feed Style)
+   */
+  getCompactTemplate() {
+    const userClass = this.isCurrentUser ? "bg-primary" : "bg-secondary";
+    return `
+            <div class="message-item">
+                <div class="message-avatar ${userClass}">
+                    {{#message.author.avatarUrl}}
+                        <img src="{{message.author.avatarUrl}}" alt="{{message.author.name}}" class="w-100 h-100 rounded-circle">
+                    {{/message.author.avatarUrl}}
+                    {{^message.author.avatarUrl}}
+                        {{message.author.name|initials}}
+                    {{/message.author.avatarUrl}}
+                </div>
+                <div class="message-content">
+                    <div class="message-header">
+                        <div class="message-author">
+                            {{message.author.name}}
+                            {{#isCurrentUser}}
+                                <span class="badge bg-primary badge-sm ms-1">You</span>
+                            {{/isCurrentUser}}
+                        </div>
+                        <div class="message-time text-muted">{{message.timestamp|relative}}</div>
+                    </div>
+                    <div class="message-text">{{{message.content}}}</div>
+                    <div data-container="attachments"></div>
+                </div>
+            </div>
+        `;
+  }
+  /**
+   * Get bubbles theme template (Option 1 - Modern Chat Bubbles)
+   */
+  getBubblesTemplate() {
+    return `
+            <div class="message-bubble-wrapper">
+                <div class="message-meta">
+                    <strong>{{message.author.name}}</strong>
+                    <span class="text-muted">· {{message.timestamp|relative}}</span>
+                </div>
+                <div class="message-bubble">
+                    <div class="message-text">{{{message.content}}}</div>
+                    <div data-container="attachments"></div>
+                </div>
+            </div>
+        `;
+  }
+  async onAfterRender() {
+    if (this.message.attachments && this.message.attachments.length > 0) {
+      const attachmentsContainer = this.element.querySelector('[data-container="attachments"]');
+      if (attachmentsContainer) {
+        this.message.attachments.forEach((file) => {
+          const filePreview = new FilePreviewView({ file });
+          this.addChild(filePreview);
+          filePreview.render(true, attachmentsContainer);
+        });
+      }
+    }
+  }
+}
+class ChatInputView extends View {
+  constructor(options = {}) {
+    super({
+      className: "chat-input-view",
+      ...options
+    });
+    this.placeholder = options.placeholder || "Type a message...";
+    this.buttonText = options.buttonText || "Send";
+    this.attachments = [];
+    this.pendingUploads = /* @__PURE__ */ new Map();
+  }
+  getTemplate() {
+    return `
+            <div class="chat-input-container">
+                <div class="chat-input-attachments" data-container="attachments"></div>
+                <div class="chat-input-wrapper">
+                    <textarea 
+                        class="chat-input form-control" 
+                        placeholder="${this.placeholder}" 
+                        rows="1"></textarea>
+                    <button class="chat-send-btn btn btn-primary" data-action="send-message" type="button">
+                        <i class="bi bi-send-fill"></i>
+                    </button>
+                </div>
+                <div class="chat-input-footer">
+                    <small class="text-muted">
+                        <i class="bi bi-paperclip"></i> 
+                        Drag & drop files to attach
+                    </small>
+                </div>
+            </div>
+        `;
+  }
+  async onAfterRender() {
+    this.enableFileDrop({
+      dropZoneSelector: ".chat-input-container",
+      multiple: true,
+      acceptedTypes: ["*/*"],
+      // Accept all file types
+      visualFeedback: true,
+      dragOverClass: "drag-over",
+      dragActiveClass: "drag-active"
+    });
+    const textarea = this.element.querySelector(".chat-input");
+    if (textarea) {
+      textarea.addEventListener("input", () => this.autoResizeTextarea(textarea));
+      textarea.addEventListener("keydown", (e) => this.handleKeydown(e));
+    }
+  }
+  /**
+   * Handle textarea keydown (send on Enter without Shift)
+   */
+  handleKeydown(event) {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      this.onActionSendMessage(event, event.target);
+    }
+  }
+  /**
+   * Handle file drop
+   * @param {File[]} files - Dropped files
+   */
+  async onFileDrop(files) {
+    for (const file of files) {
+      await this.uploadFile(file);
+    }
+  }
+  /**
+   * Upload a file
+   * @param {File} file - File to upload
+   */
+  async uploadFile(file) {
+    const fileModel = new File$1();
+    const uploadId = Date.now() + Math.random();
+    this.addFilePreview(uploadId, file, 0);
+    this.pendingUploads.set(uploadId, { file, fileModel });
+    try {
+      const result = await fileModel.upload({
+        file,
+        onProgress: (progress) => {
+          this.updateFileProgress(uploadId, progress);
+        },
+        onComplete: (uploadResult) => {
+          this.handleUploadComplete(uploadId, uploadResult);
+        }
+      });
+      if (result && result.success) {
+        this.handleUploadComplete(uploadId, result.data);
+      }
+    } catch (error) {
+      console.error("File upload failed:", error);
+      this.handleUploadError(uploadId, error);
+    }
+  }
+  /**
+   * Add file preview to UI
+   * @param {string} uploadId - Unique upload ID
+   * @param {File} file - File object
+   * @param {number} progress - Upload progress (0-100)
+   */
+  addFilePreview(uploadId, file, progress) {
+    const container = this.element.querySelector('[data-container="attachments"]');
+    if (!container) return;
+    const preview = document.createElement("div");
+    preview.className = "attachment-preview";
+    preview.dataset.uploadId = uploadId;
+    preview.innerHTML = `
+            <div class="attachment-info">
+                <i class="bi bi-file-earmark"></i>
+                <span class="attachment-name">${this.escapeHtml(file.name)}</span>
+                <span class="attachment-size">(${this.formatFileSize(file.size)})</span>
+            </div>
+            <div class="attachment-progress">
+                <div class="progress" style="height: 4px;">
+                    <div class="progress-bar" role="progressbar" style="width: ${progress}%"></div>
+                </div>
+            </div>
+            <button class="attachment-remove btn btn-sm btn-link text-danger" data-action="remove-attachment" data-upload-id="${uploadId}" type="button">
+                <i class="bi bi-x"></i>
+            </button>
+        `;
+    container.appendChild(preview);
+  }
+  /**
+   * Update file upload progress
+   * @param {string} uploadId - Upload ID
+   * @param {number} progress - Progress (0-100)
+   */
+  updateFileProgress(uploadId, progress) {
+    const preview = this.element.querySelector(`[data-upload-id="${uploadId}"]`);
+    if (preview) {
+      const progressBar = preview.querySelector(".progress-bar");
+      if (progressBar) {
+        progressBar.style.width = `${progress}%`;
+      }
+    }
+  }
+  /**
+   * Handle upload completion
+   * @param {string} uploadId - Upload ID
+   * @param {Object} result - Upload result data
+   */
+  handleUploadComplete(uploadId, result) {
+    this.attachments.push(result);
+    this.pendingUploads.delete(uploadId);
+    const preview = this.element.querySelector(`[data-upload-id="${uploadId}"]`);
+    if (preview) {
+      preview.classList.add("upload-complete");
+      const progressContainer = preview.querySelector(".attachment-progress");
+      if (progressContainer) {
+        progressContainer.remove();
+      }
+    }
+  }
+  /**
+   * Handle upload error
+   * @param {string} uploadId - Upload ID
+   * @param {Error} error - Error object
+   */
+  handleUploadError(uploadId, error) {
+    this.pendingUploads.delete(uploadId);
+    const preview = this.element.querySelector(`[data-upload-id="${uploadId}"]`);
+    if (preview) {
+      preview.classList.add("upload-error");
+      preview.querySelector(".attachment-info").innerHTML += `<span class="text-danger ms-2">Upload failed</span>`;
+    }
+  }
+  /**
+   * Remove attachment
+   */
+  async onActionRemoveAttachment(event, element) {
+    const uploadId = element.dataset.uploadId;
+    this.pendingUploads.delete(uploadId);
+    const preview = this.element.querySelector(`[data-upload-id="${uploadId}"]`);
+    if (preview) {
+      preview.remove();
+    }
+  }
+  /**
+   * Send message
+   */
+  async onActionSendMessage(event, element) {
+    const textarea = this.element.querySelector(".chat-input");
+    const text = textarea.value.trim();
+    if (!text && this.attachments.length === 0) {
+      return;
+    }
+    if (this.pendingUploads.size > 0) {
+      return;
+    }
+    this.emit("message:send", {
+      text,
+      files: this.attachments
+    });
+  }
+  /**
+   * Clear input and attachments
+   */
+  clearInput() {
+    const textarea = this.element.querySelector(".chat-input");
+    if (textarea) {
+      textarea.value = "";
+      textarea.style.height = "auto";
+    }
+    const container = this.element.querySelector('[data-container="attachments"]');
+    if (container) {
+      container.innerHTML = "";
+    }
+    this.attachments = [];
+    this.pendingUploads.clear();
+  }
+  /**
+   * Auto-resize textarea based on content
+   * @param {HTMLTextAreaElement} textarea
+   */
+  autoResizeTextarea(textarea) {
+    textarea.style.height = "auto";
+    textarea.style.height = Math.min(textarea.scrollHeight, 150) + "px";
+  }
+  /**
+   * Format file size for display
+   * @param {number} bytes
+   * @returns {string}
+   */
+  formatFileSize(bytes) {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+  }
+  /**
+   * Escape HTML to prevent XSS
+   * @param {string} text
+   * @returns {string}
+   */
+  escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}
+applyFileDropMixin(ChatInputView);
+class ChatView extends View {
+  constructor(options = {}) {
+    super({
+      className: "chat-view",
+      ...options
+    });
+    this.adapter = options.adapter;
+    this.theme = options.theme || "compact";
+    this.currentUserId = options.currentUserId;
+    this.inputPlaceholder = options.inputPlaceholder || "Type a message...";
+    this.inputButtonText = options.inputButtonText || "Send";
+    this.messages = [];
+    this.messageViews = /* @__PURE__ */ new Map();
+  }
+  getTemplate() {
+    return `
+            <div class="chat-container chat-theme-${this.theme}">
+                <div class="chat-messages" data-container="messages"></div>
+                <div class="chat-input-wrapper" data-container="input"></div>
+            </div>
+        `;
+  }
+  async onInit() {
+    this.messages = await this.adapter.fetch();
+    this.inputView = new ChatInputView({
+      containerId: "input",
+      placeholder: this.inputPlaceholder,
+      buttonText: this.inputButtonText
+    });
+    this.addChild(this.inputView);
+    this.inputView.on("message:send", async (data) => {
+      await this.handleSendMessage(data);
+    });
+  }
+  async onAfterRender() {
+    this._buildMessageViews();
+    await this._renderChildren();
+    this.scrollToBottom();
+  }
+  /**
+   * Render child message views (similar to ListView._renderChildren)
+   * @private
+   */
+  async _renderChildren() {
+    await super._renderChildren();
+    const messagesContainer = this.element.querySelector('[data-container="messages"]');
+    if (!messagesContainer) {
+      console.error("ChatView: messages container not found");
+      return;
+    }
+    this.messageViews.forEach((messageView) => {
+      messagesContainer.appendChild(messageView.element);
+      messageView.render(false);
+    });
+  }
+  /**
+   * Build message views for all messages (similar to ListView._buildItems)
+   * @private
+   */
+  _buildMessageViews() {
+    if (!this.messages || this.messages.length === 0) return;
+    this.messages.forEach((message) => {
+      if (!this.messageViews.has(message.id)) {
+        this._createMessageView(message);
+      }
+    });
+  }
+  /**
+   * Create a message view (similar to ListView._createItemView)
+   * @private
+   */
+  _createMessageView(message) {
+    if (this.messageViews.has(message.id)) return;
+    const isCurrentUser = message.author && message.author.id === this.currentUserId;
+    const messageView = new ChatMessageView({
+      message,
+      theme: this.theme,
+      isCurrentUser
+    });
+    this.addChild(messageView);
+    this.messageViews.set(message.id, messageView);
+    return messageView;
+  }
+  /**
+   * Add a new message to the chat (for real-time updates)
+   * @param {Object} message - Message data
+   * @param {boolean} scroll - Whether to scroll to bottom after adding
+   */
+  addMessage(message, scroll = true) {
+    if (this.messageViews.has(message.id)) return;
+    const messageView = this._createMessageView(message);
+    if (this.isMounted()) {
+      const messagesContainer = this.element.querySelector('[data-container="messages"]');
+      if (messagesContainer) {
+        messagesContainer.appendChild(messageView.element);
+        messageView.render(false);
+      }
+    }
+    if (scroll) {
+      this.scrollToBottom();
+    }
+  }
+  /**
+   * Handle sending a new message
+   * @param {Object} data - Message data {text, files}
+   * @private
+   */
+  async handleSendMessage(data) {
+    try {
+      const result = await this.adapter.addNote(data);
+      if (result.success) {
+        this.messages = await this.adapter.fetch();
+        this.messages.forEach((message) => {
+          if (!this.messageViews.has(message.id)) {
+            this.addMessage(message, true);
+          }
+        });
+        this.inputView.clearInput();
+      }
+    } catch (error) {
+      console.error("Failed to send message:", error);
+    }
+  }
+  /**
+   * Scroll chat to bottom
+   */
+  scrollToBottom() {
+    const container = this.element.querySelector(".chat-messages");
+    if (container) {
+      requestAnimationFrame(() => {
+        container.scrollTop = container.scrollHeight;
+      });
+    }
+  }
+  /**
+   * Clear all messages
+   */
+  clearMessages() {
+    this.messageViews.forEach((view) => view.destroy());
+    this.messageViews.clear();
+    this.messages = [];
+    const container = this.element.querySelector('[data-container="messages"]');
+    if (container) {
+      container.innerHTML = "";
+    }
+  }
+  /**
+   * Refresh messages from adapter
+   */
+  async refresh() {
+    this.clearMessages();
+    this.messages = await this.adapter.fetch();
+    this._buildMessageViews();
+    if (this.isMounted()) {
+      await this._renderChildren();
+      this.scrollToBottom();
+    }
+  }
+}
 export {
-  JobEvent as $,
-  Incident as A,
-  IncidentList as B,
-  IncidentForms as C,
-  IncidentRuleSet as D,
+  JobForms as $,
+  IncidentEventList as A,
+  IncidentEventForms as B,
+  ChatView as C,
+  Incident as D,
   EmailDomain as E,
   FilePreviewView as F,
-  IncidentRuleSetList as G,
-  IncidentRule as H,
+  IncidentList as G,
+  IncidentForms as H,
   IncidentEvent as I,
-  IncidentRuleList as J,
-  IncidentHistory as K,
+  IncidentRuleSet as J,
+  IncidentRuleSetList as K,
   ListView as L,
   Member as M,
-  IncidentHistoryList as N,
-  RuleSetList as O,
+  IncidentRule as N,
+  IncidentRuleList as O,
   ProgressView as P,
-  Rule as Q,
-  RuleSet as R,
+  IncidentHistory as Q,
+  IncidentHistoryList as R,
   S3Bucket as S,
   TableView as T,
-  RuleList as U,
-  IncidentStats as V,
-  Job as W,
-  JobList as X,
-  JobForms as Y,
-  JobLog as Z,
-  JobLogList as _,
+  RuleSet as U,
+  RuleSetList as V,
+  Rule as W,
+  RuleList as X,
+  IncidentStats as Y,
+  Job as Z,
+  JobList as _,
   TableRow as a,
-  JobEventList as a0,
-  JobsEngineStats as a1,
-  JobRunner as a2,
-  JobRunnerList as a3,
-  JobRunnerForms as a4,
-  Log as a5,
-  LogList as a6,
-  MemberList as a7,
-  MemberForms as a8,
-  MetricsPermission as a9,
-  MetricsPermissionList as aa,
-  MetricsForms as ab,
-  PushDevice as ac,
-  PushDeviceList as ad,
-  PushTemplate as ae,
-  PushTemplateList as af,
-  PushConfig as ag,
-  PushConfigList as ah,
-  PushDelivery as ai,
-  PushDeliveryList as aj,
-  PushConfigForms as ak,
-  PushTemplateForms as al,
-  GeoLocatedIP as am,
-  GeoLocatedIPList as an,
-  Ticket as ao,
-  TicketList as ap,
-  TicketNote as aq,
-  TicketNoteList as ar,
-  TicketForms as as,
-  TicketCategories as at,
+  JobLog as a0,
+  JobLogList as a1,
+  JobEvent as a2,
+  JobEventList as a3,
+  JobsEngineStats as a4,
+  JobRunner as a5,
+  JobRunnerList as a6,
+  JobRunnerForms as a7,
+  Log as a8,
+  LogList as a9,
+  MemberList as aa,
+  MemberForms as ab,
+  MetricsPermission as ac,
+  MetricsPermissionList as ad,
+  MetricsForms as ae,
+  PushDevice as af,
+  PushDeviceList as ag,
+  PushTemplate as ah,
+  PushTemplateList as ai,
+  PushConfig as aj,
+  PushConfigList as ak,
+  PushDelivery as al,
+  PushDeliveryList as am,
+  PushConfigForms as an,
+  PushTemplateForms as ao,
+  GeoLocatedIP as ap,
+  GeoLocatedIPList as aq,
+  Ticket as ar,
+  TicketList as as,
+  TicketNote as at,
+  TicketNoteList as au,
+  TicketForms as av,
+  TicketCategories as aw,
   TablePage as b,
   ListViewItem as c,
   TabView as d,
-  FileUpload as e,
-  S3BucketList as f,
-  S3BucketForms as g,
-  EmailDomainList as h,
-  EmailDomainForms as i,
-  Mailbox as j,
-  MailboxList as k,
-  MailboxForms as l,
-  SentMessage as m,
-  SentMessageList as n,
-  SentMessageForms as o,
-  EmailTemplate as p,
-  EmailTemplateList as q,
-  EmailTemplateForms as r,
-  FileManager as s,
-  FileManagerList as t,
-  FileManagerForms as u,
-  File$1 as v,
-  FileList as w,
-  FileForms as x,
-  IncidentEventList as y,
-  IncidentEventForms as z
+  ChatMessageView as e,
+  ChatInputView as f,
+  FileUpload as g,
+  S3BucketList as h,
+  S3BucketForms as i,
+  EmailDomainList as j,
+  EmailDomainForms as k,
+  Mailbox as l,
+  MailboxList as m,
+  MailboxForms as n,
+  SentMessage as o,
+  SentMessageList as p,
+  SentMessageForms as q,
+  EmailTemplate as r,
+  EmailTemplateList as s,
+  EmailTemplateForms as t,
+  FileManager as u,
+  FileManagerList as v,
+  FileManagerForms as w,
+  File$1 as x,
+  FileList as y,
+  FileForms as z
 };
-//# sourceMappingURL=FilePreviewView-CehLQVJa.js.map
+//# sourceMappingURL=ChatView-DkK2PBny.js.map