@nyaruka/temba-components 0.136.0 → 0.137.0

package/out-tsc/src/layout/FloatingWindow.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingWindow.js","sourceRoot":"","sources":["../../../src/layout/FloatingWindow.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { getClasses } from '../utils';\nimport { FloatingTab } from '../display/FloatingTab';\n\nexport class FloatingWindow extends RapidElement {\n  static get styles() {\n    return css`\n      .window.hidden {\n        transform: translateX(100%);\n        opacity: 0;\n        pointer-events: none;\n      }\n\n      .window {\n        transition: transform var(--transition-duration, 300ms) ease-in-out,\n          opacity var(--transition-duration, 300ms) ease-in-out;\n        position: fixed;\n        z-index: 5000;\n        top: 100px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.3);\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n\n      .window.chromeless {\n        background: transparent;\n        border-radius: 0;\n        box-shadow: none;\n        pointer-events: none;\n      }\n\n      .window.chromeless .body {\n        pointer-events: none;\n      }\n\n      .window.dragging {\n        user-select: none;\n        cursor: move;\n      }\n\n      .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 6px 6px;\n        background: var(--header-color, var(--color-primary-light, #f3f4f6));\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        cursor: move;\n        user-select: none;\n      }\n\n      .title {\n        font-weight: 600;\n        font-size: 16px;\n        color: white;\n        padding-left: 8px;\n      }\n\n      .close-button {\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 4px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 4px;\n        transition: background-color calc(var(--transition-duration, 150ms) / 2)\n          ease-in-out;\n      }\n\n      .close-button:hover {\n        background-color: rgba(255, 255, 255, 0.2);\n      }\n\n      .close-button temba-icon {\n        --icon-color: white;\n      }\n\n      .body {\n        flex: 1;\n        overflow-y: auto;\n        padding: 16px;\n      }\n\n      .window.chromeless .body {\n        padding: 0;\n      }\n\n      ::slotted(.drag-handle) {\n        cursor: move;\n        user-select: none;\n        border: 1px solid red;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  header = '';\n\n  @property({ type: Number })\n  width = 500;\n\n  @property({ type: Number })\n  minHeight = 200;\n\n  @property({ type: Number })\n  maxHeight = 800;\n\n  @property({ type: Number })\n  top = 100;\n\n  @property({ type: Number })\n  left = -1; // -1 means calculate from right side\n\n  @property({ type: Boolean })\n  hidden = true;\n\n  @property({ type: Boolean })\n  dragging = false;\n\n  @property({ type: Boolean })\n  chromeless = false;\n\n  @property({ type: String })\n  color = '#6B7280';\n\n  @property({ type: Number })\n  leftBoundaryMargin = 0;\n\n  @property({ type: Number })\n  rightBoundaryMargin = 0;\n\n  @property({ type: Number })\n  topBoundaryMargin = 0;\n\n  @property({ type: Number })\n  bottomBoundaryMargin = 0;\n\n  private dragStartX = 0;\n  private dragStartY = 0;\n  private dragOffsetX = 0;\n  private dragOffsetY = 0;\n  private positionFromRight = false;\n  private defaultTop = 100;\n  private defaultLeft = -1;\n\n  public firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n\n    // store the default position from properties\n    this.defaultTop = this.top;\n    this.defaultLeft = this.left;\n\n    // determine if we should position from right side\n    if (this.left === -1) {\n      this.positionFromRight = true;\n    }\n\n    // set up drag handle listeners for chromeless windows\n    if (this.chromeless) {\n      this.setupDragHandles();\n    }\n\n    // listen for window resize to keep window in bounds\n    window.addEventListener('resize', this.handleResize);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('resize', this.handleResize);\n  }\n\n  private setupDragHandles() {\n    // listen for mousedown on slotted content\n    this.addEventListener('mousedown', this.handleSlotMouseDown);\n  }\n\n  private handleSlotMouseDown = (event: MouseEvent) => {\n    // check if the target or any parent has the drag-handle class\n    const target = event.target as HTMLElement;\n    const dragHandle = target.closest('.drag-handle');\n\n    if (!dragHandle) {\n      return;\n    }\n\n    this.dragging = true;\n    this.dragStartX = event.clientX;\n    this.dragStartY = event.clientY;\n    this.dragOffsetX = this.left;\n    this.dragOffsetY = this.top;\n\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n\n    event.preventDefault();\n  };\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('hidden')) {\n      // when hiding, reset positioning behavior to original\n      if (this.hidden && !changes.get('hidden')) {\n        if (this.defaultLeft === -1) {\n          this.positionFromRight = true;\n        }\n      }\n\n      // reset to default position when showing\n      if (!this.hidden && changes.get('hidden')) {\n        // reset top to default\n        this.top = this.defaultTop;\n\n        // if positioned from right, recalculate based on current viewport\n        if (this.positionFromRight) {\n          this.left = window.innerWidth - this.width - 20;\n        } else {\n          // reset left to default\n          this.left = this.defaultLeft;\n        }\n      }\n    }\n\n    // setup drag handles if chromeless changed to true\n    if (changes.has('chromeless') && this.chromeless) {\n      this.setupDragHandles();\n    }\n  }\n\n  private handleClose() {\n    this.hidden = true;\n    // show all tabs when window is closed\n    FloatingTab.showAllTabs();\n    this.fireCustomEvent(CustomEventType.DialogHidden);\n  }\n\n  private handleHeaderMouseDown(event: MouseEvent) {\n    // don't start drag if clicking on close button\n    if ((event.target as HTMLElement).closest('.close-button')) {\n      return;\n    }\n\n    this.dragging = true;\n    this.dragStartX = event.clientX;\n    this.dragStartY = event.clientY;\n    this.dragOffsetX = this.left;\n    this.dragOffsetY = this.top;\n\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n\n    event.preventDefault();\n  }\n\n  private handleMouseMove = (event: MouseEvent) => {\n    if (!this.dragging) return;\n\n    const deltaX = event.clientX - this.dragStartX;\n    const deltaY = event.clientY - this.dragStartY;\n\n    this.left = this.dragOffsetX + deltaX;\n    this.top = this.dragOffsetY + deltaY;\n\n    // keep window within viewport bounds with 20px padding\n    const padding = 20;\n    this.left = Math.max(\n      padding - this.leftBoundaryMargin,\n      Math.min(\n        this.left,\n        window.innerWidth - this.width - padding + this.rightBoundaryMargin\n      )\n    );\n\n    // get the actual rendered height of the window element\n    const windowElement = this.shadowRoot?.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const currentHeight =\n      windowElement?.offsetHeight || this.maxHeight || window.innerHeight;\n    const maxTop = Math.max(\n      padding - this.topBoundaryMargin,\n      window.innerHeight - currentHeight - padding + this.bottomBoundaryMargin\n    );\n    this.top = Math.max(\n      padding - this.topBoundaryMargin,\n      Math.min(this.top, maxTop)\n    );\n  };\n\n  private handleMouseUp = () => {\n    this.dragging = false;\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n\n    // once user drags the window, stop auto-positioning from right\n    this.positionFromRight = false;\n  };\n\n  private handleResize = () => {\n    // only constrain position if window is visible\n    if (this.hidden) return;\n\n    const padding = 20;\n    const windowElement = this.shadowRoot?.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const currentHeight =\n      windowElement?.offsetHeight || this.maxHeight || window.innerHeight;\n\n    // if positioned from right, always recalculate from right edge\n    if (this.positionFromRight) {\n      this.left =\n        window.innerWidth - this.width - padding + this.rightBoundaryMargin;\n    } else {\n      // only adjust left if out of bounds\n      const minLeft = padding - this.leftBoundaryMargin;\n      const maxLeft =\n        window.innerWidth - this.width - padding + this.rightBoundaryMargin;\n\n      if (this.left < minLeft) {\n        this.left = minLeft;\n      } else if (this.left > maxLeft) {\n        this.left = maxLeft;\n      }\n    }\n\n    // only adjust top if out of bounds\n    const minTop = padding - this.topBoundaryMargin;\n    const maxTop = Math.max(\n      padding - this.topBoundaryMargin,\n      window.innerHeight - currentHeight - padding + this.bottomBoundaryMargin\n    );\n\n    if (this.top < minTop) {\n      this.top = minTop;\n    } else if (this.top > maxTop) {\n      this.top = maxTop;\n    }\n  };\n\n  public show() {\n    this.hidden = false;\n  }\n\n  public hide() {\n    this.hidden = true;\n  }\n\n  public close() {\n    this.hidden = true;\n    // show all tabs when window is closed\n    FloatingTab.showAllTabs();\n    this.fireCustomEvent(CustomEventType.DialogHidden);\n  }\n\n  public render(): TemplateResult {\n    const minHeightStyle = this.minHeight\n      ? `min-height: ${this.minHeight}px;`\n      : '';\n    const maxHeightStyle = this.maxHeight\n      ? `max-height: ${this.maxHeight}px;`\n      : '';\n\n    const windowStyle = `\n      width: ${this.width}px;\n      ${minHeightStyle}\n      ${maxHeightStyle}\n      top: ${this.top}px;\n      left: ${this.left}px;\n      --header-color: ${this.color};\n    `;\n\n    const windowClasses = getClasses({\n      window: true,\n      dragging: this.dragging,\n      hidden: this.hidden,\n      chromeless: this.chromeless\n    });\n\n    return html`\n      <div class=\"${windowClasses}\" style=\"${windowStyle}\">\n        ${!this.chromeless\n          ? html`\n              <div class=\"header\" @mousedown=${this.handleHeaderMouseDown}>\n                <div class=\"title\">${this.header}</div>\n                <button class=\"close-button\" @click=${this.handleClose}>\n                  <temba-icon name=\"close\" size=\"1.5\"></temba-icon>\n                </button>\n              </div>\n            `\n          : ''}\n        <div class=\"body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"FloatingWindow.js","sourceRoot":"","sources":["../../../src/layout/FloatingWindow.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { getClasses } from '../utils';\nimport { FloatingTab } from '../display/FloatingTab';\n\nexport class FloatingWindow extends RapidElement {\n  static get styles() {\n    return css`\n      .window.hidden {\n        transform: translateX(100%);\n        opacity: 0;\n        pointer-events: none;\n      }\n\n      .window {\n        transition: transform var(--transition-duration, 300ms) ease-in-out,\n          opacity var(--transition-duration, 300ms) ease-in-out;\n        position: fixed;\n        z-index: 5000;\n        top: 100px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.3);\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n\n      .window.chromeless {\n        background: transparent;\n        border-radius: 0;\n        box-shadow: none;\n        pointer-events: none;\n      }\n\n      .window.chromeless .body {\n        pointer-events: none;\n      }\n\n      .window.dragging {\n        user-select: none;\n        cursor: move;\n      }\n\n      .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 6px 6px;\n        background: var(--header-color, var(--color-primary-light, #f3f4f6));\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        cursor: move;\n        user-select: none;\n      }\n\n      .title {\n        font-weight: 600;\n        font-size: 16px;\n        color: white;\n        padding-left: 8px;\n      }\n\n      .close-button {\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 4px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 4px;\n        transition: background-color calc(var(--transition-duration, 150ms) / 2)\n          ease-in-out;\n      }\n\n      .close-button:hover {\n        background-color: rgba(255, 255, 255, 0.2);\n      }\n\n      .close-button temba-icon {\n        --icon-color: white;\n      }\n\n      .body {\n        flex: 1;\n        overflow-y: auto;\n        padding: 16px;\n      }\n\n      .window.chromeless .body {\n        padding: 0;\n      }\n\n      ::slotted(.drag-handle) {\n        cursor: move;\n        user-select: none;\n        border: 1px solid red;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  header = '';\n\n  @property({ type: Number })\n  width = 500;\n\n  @property({ type: Number })\n  minHeight = 200;\n\n  @property({ type: Number })\n  maxHeight = 800;\n\n  @property({ type: Number })\n  top = 100;\n\n  @property({ type: Number })\n  left = -1; // -1 means calculate from right side\n\n  @property({ type: Boolean })\n  hidden = true;\n\n  @property({ type: Boolean })\n  dragging = false;\n\n  @property({ type: Boolean })\n  chromeless = false;\n\n  @property({ type: String })\n  color = '#6B7280';\n\n  @property({ type: Number })\n  leftBoundaryMargin = 0;\n\n  @property({ type: Number })\n  rightBoundaryMargin = 0;\n\n  @property({ type: Number })\n  topBoundaryMargin = 0;\n\n  @property({ type: Number })\n  bottomBoundaryMargin = 0;\n\n  private dragStartX = 0;\n  private dragStartY = 0;\n  private dragOffsetX = 0;\n  private dragOffsetY = 0;\n  private positionFromRight = false;\n  private defaultTop = 100;\n  private defaultLeft = -1;\n\n  public firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n\n    // store the default position from properties\n    this.defaultTop = this.top;\n    this.defaultLeft = this.left;\n\n    // determine if we should position from right side\n    if (this.left === -1) {\n      this.positionFromRight = true;\n    }\n\n    // set up drag handle listeners for chromeless windows\n    if (this.chromeless) {\n      this.setupDragHandles();\n    }\n\n    // listen for window resize to keep window in bounds\n    window.addEventListener('resize', this.handleResize);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('resize', this.handleResize);\n  }\n\n  private setupDragHandles() {\n    // listen for mousedown on slotted content\n    this.addEventListener('mousedown', this.handleSlotMouseDown);\n  }\n\n  private handleSlotMouseDown = (event: MouseEvent) => {\n    // check if the target or any parent has the drag-handle class\n    const target = event.target as HTMLElement;\n    const dragHandle = target.closest('.drag-handle');\n\n    if (!dragHandle) {\n      return;\n    }\n\n    this.dragging = true;\n    this.dragStartX = event.clientX;\n    this.dragStartY = event.clientY;\n    this.dragOffsetX = this.left;\n    this.dragOffsetY = this.top;\n\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n\n    event.preventDefault();\n  };\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('hidden')) {\n      // when hiding, reset positioning behavior to original\n      if (this.hidden && !changes.get('hidden')) {\n        if (this.defaultLeft === -1) {\n          this.positionFromRight = true;\n        }\n      }\n\n      // reset to default position when showing\n      if (!this.hidden && changes.get('hidden')) {\n        // reset top to default\n        this.top = this.defaultTop;\n\n        // if positioned from right, recalculate based on current viewport\n        if (this.positionFromRight) {\n          this.left = window.innerWidth - this.width - 20;\n        } else {\n          // reset left to default\n          this.left = this.defaultLeft;\n        }\n      }\n    }\n\n    // setup drag handles if chromeless changed to true\n    if (changes.has('chromeless') && this.chromeless) {\n      this.setupDragHandles();\n    }\n  }\n\n  public handleClose() {\n    this.hidden = true;\n    // show all tabs when window is closed\n    FloatingTab.showAllTabs();\n    this.fireCustomEvent(CustomEventType.DialogHidden);\n  }\n\n  private handleHeaderMouseDown(event: MouseEvent) {\n    // don't start drag if clicking on close button\n    if ((event.target as HTMLElement).closest('.close-button')) {\n      return;\n    }\n\n    this.dragging = true;\n    this.dragStartX = event.clientX;\n    this.dragStartY = event.clientY;\n    this.dragOffsetX = this.left;\n    this.dragOffsetY = this.top;\n\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n\n    event.preventDefault();\n  }\n\n  private handleMouseMove = (event: MouseEvent) => {\n    if (!this.dragging) return;\n\n    const deltaX = event.clientX - this.dragStartX;\n    const deltaY = event.clientY - this.dragStartY;\n\n    this.left = this.dragOffsetX + deltaX;\n    this.top = this.dragOffsetY + deltaY;\n\n    // keep window within viewport bounds with 20px padding\n    const padding = 20;\n    this.left = Math.max(\n      padding - this.leftBoundaryMargin,\n      Math.min(\n        this.left,\n        window.innerWidth - this.width - padding + this.rightBoundaryMargin\n      )\n    );\n\n    // get the actual rendered height of the window element\n    const windowElement = this.shadowRoot?.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const currentHeight =\n      windowElement?.offsetHeight || this.maxHeight || window.innerHeight;\n    const maxTop = Math.max(\n      padding - this.topBoundaryMargin,\n      window.innerHeight - currentHeight - padding + this.bottomBoundaryMargin\n    );\n    this.top = Math.max(\n      padding - this.topBoundaryMargin,\n      Math.min(this.top, maxTop)\n    );\n  };\n\n  private handleMouseUp = () => {\n    this.dragging = false;\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n\n    // once user drags the window, stop auto-positioning from right\n    this.positionFromRight = false;\n  };\n\n  private handleResize = () => {\n    // only constrain position if window is visible\n    if (this.hidden) return;\n\n    const padding = 20;\n    const windowElement = this.shadowRoot?.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const currentHeight =\n      windowElement?.offsetHeight || this.maxHeight || window.innerHeight;\n\n    // if positioned from right, always recalculate from right edge\n    if (this.positionFromRight) {\n      this.left =\n        window.innerWidth - this.width - padding + this.rightBoundaryMargin;\n    } else {\n      // only adjust left if out of bounds\n      const minLeft = padding - this.leftBoundaryMargin;\n      const maxLeft =\n        window.innerWidth - this.width - padding + this.rightBoundaryMargin;\n\n      if (this.left < minLeft) {\n        this.left = minLeft;\n      } else if (this.left > maxLeft) {\n        this.left = maxLeft;\n      }\n    }\n\n    // only adjust top if out of bounds\n    const minTop = padding - this.topBoundaryMargin;\n    const maxTop = Math.max(\n      padding - this.topBoundaryMargin,\n      window.innerHeight - currentHeight - padding + this.bottomBoundaryMargin\n    );\n\n    if (this.top < minTop) {\n      this.top = minTop;\n    } else if (this.top > maxTop) {\n      this.top = maxTop;\n    }\n  };\n\n  public show() {\n    this.hidden = false;\n  }\n\n  public hide() {\n    this.hidden = true;\n  }\n\n  public close() {\n    this.hidden = true;\n    // show all tabs when window is closed\n    FloatingTab.showAllTabs();\n    this.fireCustomEvent(CustomEventType.DialogHidden);\n  }\n\n  public render(): TemplateResult {\n    const minHeightStyle = this.minHeight\n      ? `min-height: ${this.minHeight}px;`\n      : '';\n    const maxHeightStyle = this.maxHeight\n      ? `max-height: ${this.maxHeight}px;`\n      : '';\n\n    const windowStyle = `\n      width: ${this.width}px;\n      ${minHeightStyle}\n      ${maxHeightStyle}\n      top: ${this.top}px;\n      left: ${this.left}px;\n      --header-color: ${this.color};\n    `;\n\n    const windowClasses = getClasses({\n      window: true,\n      dragging: this.dragging,\n      hidden: this.hidden,\n      chromeless: this.chromeless\n    });\n\n    return html`\n      <div class=\"${windowClasses}\" style=\"${windowStyle}\">\n        ${!this.chromeless\n          ? html`\n              <div class=\"header\" @mousedown=${this.handleHeaderMouseDown}>\n                <div class=\"title\">${this.header}</div>\n                <button class=\"close-button\" @click=${this.handleClose}>\n                  <temba-icon name=\"close\" size=\"1.5\"></temba-icon>\n                </button>\n              </div>\n            `\n          : ''}\n        <div class=\"body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/list/ShortcutList.js

@@ -59,7 +59,7 @@ export class ShortcutList extends StoreMonitorElement {
         style="
           overflow: hidden;
           text-overflow: ellipsis;
-          width:100px; 
+          width:175px; 
           padding-right: 10px;
           white-space: nowrap;"
       >

package/out-tsc/src/list/ShortcutList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutList.js","sourceRoot":"","sources":["../../../src/list/ShortcutList.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGnE,MAAM,OAAO,YAAa,SAAQ,mBAAmB;IACnD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBT,CAAC;IACJ,CAAC;IAWD;QACE,KAAK,EAAE,CAAC;QANV,sBAAiB,GAAG,EAAE,CAAC;QAGvB,gBAAW,GAAG,CAAC,CAAC;IAIhB,CAAC;IAES,YAAY,CACpB,OAA0D;QAE1D,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEM,YAAY;QACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;IACrD,CAAC;IAEM,OAAO,CACZ,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;YACrD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK;qBAChC,YAAY,EAAE;qBACd,MAAM,CAAC,CAAC,QAAkB,EAAE,EAAE,CAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAChE,CAAC;YACN,CAAC;YACD,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAEM,cAAc,CAAC,QAAkB;QACtC,OAAO,IAAI,CAAA;;;;;;;;;UASL,QAAQ,CAAC,IAAI;;;;;;;;;;;;;;;;;UAiBb,QAAQ,CAAC,IAAI;;WAEZ,CAAC;IACV,CAAC;IAEM,WAAW;QAChB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAY,CAAC;QAC1E,OAAO,OAAO,CAAC,YAAY,EAAE,CAAC;IAChC,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;YACnC,CAAC,CAAC,IAAI,CAAA;cACA,IAAI,CAAC,MAAM;gBACX,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,MAAM,UAAU;gBAClE,CAAC,CAAC,IAAI,CAAA;+BACW;iBACd;YACT,CAAC,CAAC,IAAI;;;yBAGW,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;YAClD,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,MAAM;;;;wBAIM,IAAI,CAAC,cAAc;uBACpB,IAAI,CAAC,WAAW;mBACpB,IAAI,CAAC,iBAAiB;;KAEpC,CAAC;IACJ,CAAC;CACF;AAtGC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uDACH;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACX","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Shortcut } from '../interfaces';\nimport { StoreMonitorElement } from '../store/StoreMonitorElement';\nimport { Options } from '../display/Options';\n\nexport class ShortcutList extends StoreMonitorElement {\n  static get styles() {\n    return css`\n      temba-options {\n        display: block;\n        width: 100%;\n        flex-grow: 1;\n      }\n\n      .options-empty {\n        height: 0;\n        overflow: hidden;\n      }\n\n      .no-match {\n        margin: 5px 10px;\n        padding: 10px;\n      }\n\n      .filter {\n        background: #f3f3f3;\n        padding: 0.1em 0.3em;\n        border-radius: var(--curvature);\n      }\n    `;\n  }\n\n  @property({ type: String })\n  filter: string;\n\n  @property({ type: Array })\n  filteredShortcuts = [];\n\n  @property({ type: Number })\n  cursorIndex = 0;\n\n  constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n  }\n\n  public storeUpdated(): void {\n    this.filteredShortcuts = this.store.getShortcuts();\n  }\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n\n    if (changes.has('filter')) {\n      if (!this.filter) {\n        this.filteredShortcuts = this.store.getShortcuts();\n      } else {\n        this.filteredShortcuts = this.store\n          .getShortcuts()\n          .filter((shortcut: Shortcut) =>\n            shortcut.name.toLowerCase().includes(this.filter.toLowerCase())\n          );\n      }\n      this.cursorIndex = 0;\n    }\n  }\n\n  public renderShortcut(shortcut: Shortcut): TemplateResult {\n    return html`<div style=\"display:flex;align-items: center;min-width:0\">\n      <div\n        style=\"\n          overflow: hidden;\n          text-overflow: ellipsis;\n          width:100px; \n          padding-right: 10px;\n          white-space: nowrap;\"\n      >\n        ${shortcut.name}\n      </div>\n      <div\n        style=\" \n          font-size: 0.9em;\n          color: rgba(0, 0, 0, 0.4);\n          flex:1;\n          overflow: hidden;\n          text-overflow: ellipsis;\n\n          display: -webkit-box;\n          line-height: 16px;\n          max-height: 16px;\n          -webkit-line-clamp: 1;\n          -webkit-box-orient: vertical;\n        \"\n      >\n        ${shortcut.text}\n      </div>\n    </div>`;\n  }\n\n  public getShortcut() {\n    const options = this.shadowRoot.querySelector('temba-options') as Options;\n    return options.getSelection();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.filteredShortcuts.length === 0\n        ? html`<div class=\"no-match\">\n            ${this.filter\n              ? html`No matches for <span class=\"filter\">${this.filter}</span>.`\n              : html`No shortcuts yet, create some to quickly include them in\n                your messages.`}\n          </div>`\n        : null}\n\n      <temba-options\n        class=\"options-${this.filteredShortcuts.length === 0\n          ? 'empty'\n          : 'full'}\"\n        block\n        cursorHover\n        visible\n        .renderOption=${this.renderShortcut}\n        .cursorIndex=${this.cursorIndex}\n        .options=${this.filteredShortcuts}\n      ></temba-options>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ShortcutList.js","sourceRoot":"","sources":["../../../src/list/ShortcutList.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGnE,MAAM,OAAO,YAAa,SAAQ,mBAAmB;IACnD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBT,CAAC;IACJ,CAAC;IAWD;QACE,KAAK,EAAE,CAAC;QANV,sBAAiB,GAAG,EAAE,CAAC;QAGvB,gBAAW,GAAG,CAAC,CAAC;IAIhB,CAAC;IAES,YAAY,CACpB,OAA0D;QAE1D,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEM,YAAY;QACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;IACrD,CAAC;IAEM,OAAO,CACZ,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;YACrD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK;qBAChC,YAAY,EAAE;qBACd,MAAM,CAAC,CAAC,QAAkB,EAAE,EAAE,CAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAChE,CAAC;YACN,CAAC;YACD,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAEM,cAAc,CAAC,QAAkB;QACtC,OAAO,IAAI,CAAA;;;;;;;;;UASL,QAAQ,CAAC,IAAI;;;;;;;;;;;;;;;;;UAiBb,QAAQ,CAAC,IAAI;;WAEZ,CAAC;IACV,CAAC;IAEM,WAAW;QAChB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAY,CAAC;QAC1E,OAAO,OAAO,CAAC,YAAY,EAAE,CAAC;IAChC,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;YACnC,CAAC,CAAC,IAAI,CAAA;cACA,IAAI,CAAC,MAAM;gBACX,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,MAAM,UAAU;gBAClE,CAAC,CAAC,IAAI,CAAA;+BACW;iBACd;YACT,CAAC,CAAC,IAAI;;;yBAGW,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;YAClD,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,MAAM;;;;wBAIM,IAAI,CAAC,cAAc;uBACpB,IAAI,CAAC,WAAW;mBACpB,IAAI,CAAC,iBAAiB;;KAEpC,CAAC;IACJ,CAAC;CACF;AAtGC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uDACH;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACX","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Shortcut } from '../interfaces';\nimport { StoreMonitorElement } from '../store/StoreMonitorElement';\nimport { Options } from '../display/Options';\n\nexport class ShortcutList extends StoreMonitorElement {\n  static get styles() {\n    return css`\n      temba-options {\n        display: block;\n        width: 100%;\n        flex-grow: 1;\n      }\n\n      .options-empty {\n        height: 0;\n        overflow: hidden;\n      }\n\n      .no-match {\n        margin: 5px 10px;\n        padding: 10px;\n      }\n\n      .filter {\n        background: #f3f3f3;\n        padding: 0.1em 0.3em;\n        border-radius: var(--curvature);\n      }\n    `;\n  }\n\n  @property({ type: String })\n  filter: string;\n\n  @property({ type: Array })\n  filteredShortcuts = [];\n\n  @property({ type: Number })\n  cursorIndex = 0;\n\n  constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n  }\n\n  public storeUpdated(): void {\n    this.filteredShortcuts = this.store.getShortcuts();\n  }\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n\n    if (changes.has('filter')) {\n      if (!this.filter) {\n        this.filteredShortcuts = this.store.getShortcuts();\n      } else {\n        this.filteredShortcuts = this.store\n          .getShortcuts()\n          .filter((shortcut: Shortcut) =>\n            shortcut.name.toLowerCase().includes(this.filter.toLowerCase())\n          );\n      }\n      this.cursorIndex = 0;\n    }\n  }\n\n  public renderShortcut(shortcut: Shortcut): TemplateResult {\n    return html`<div style=\"display:flex;align-items: center;min-width:0\">\n      <div\n        style=\"\n          overflow: hidden;\n          text-overflow: ellipsis;\n          width:175px; \n          padding-right: 10px;\n          white-space: nowrap;\"\n      >\n        ${shortcut.name}\n      </div>\n      <div\n        style=\" \n          font-size: 0.9em;\n          color: rgba(0, 0, 0, 0.4);\n          flex:1;\n          overflow: hidden;\n          text-overflow: ellipsis;\n\n          display: -webkit-box;\n          line-height: 16px;\n          max-height: 16px;\n          -webkit-line-clamp: 1;\n          -webkit-box-orient: vertical;\n        \"\n      >\n        ${shortcut.text}\n      </div>\n    </div>`;\n  }\n\n  public getShortcut() {\n    const options = this.shadowRoot.querySelector('temba-options') as Options;\n    return options.getSelection();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.filteredShortcuts.length === 0\n        ? html`<div class=\"no-match\">\n            ${this.filter\n              ? html`No matches for <span class=\"filter\">${this.filter}</span>.`\n              : html`No shortcuts yet, create some to quickly include them in\n                your messages.`}\n          </div>`\n        : null}\n\n      <temba-options\n        class=\"options-${this.filteredShortcuts.length === 0\n          ? 'empty'\n          : 'full'}\"\n        block\n        cursorHover\n        visible\n        .renderOption=${this.renderShortcut}\n        .cursorIndex=${this.cursorIndex}\n        .options=${this.filteredShortcuts}\n      ></temba-options>\n    `;\n  }\n}\n"]}

package/out-tsc/src/live/ContactChat.js

@@ -3,10 +3,11 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
-import { fetchResults, generateUUIDv7, getUrl, oxfordFn, postJSON, postUrl } from '../utils';
+import { fetchResults, generateUUIDv7, getUrl, postJSON, postUrl } from '../utils';
 import { ContactStoreElement } from './ContactStoreElement';
 import { MessageType } from '../display/Chat';
 import { DEFAULT_AVATAR } from '../webchat/assets';
+import { renderEvent, renderTicketAction, renderTicketAssigneeChanged } from '../events/eventRenderers';
 /*
 export const SCROLL_THRESHOLD = 100;
 export const SIMULATED_WEB_SLOWNESS = 0;
@@ -14,213 +15,8 @@ export const MAX_CHAT_REFRESH = 10000;
 export const MIN_CHAT_REFRESH = 500;
 export const BODY_SNIPPET_LENGTH = 250;
 */
-export var Events;
-(function (Events) {
-    Events["AIRTIME_TRANSFERRED"] = "airtime_transferred";
-    Events["BROADCAST_CREATED"] = "broadcast_created";
-    Events["CALL_CREATED"] = "call_created";
-    Events["CALL_MISSED"] = "call_missed";
-    Events["CALL_RECEIVED"] = "call_received";
-    Events["CHAT_STARTED"] = "chat_started";
-    Events["CONTACT_FIELD_CHANGED"] = "contact_field_changed";
-    Events["CONTACT_GROUPS_CHANGED"] = "contact_groups_changed";
-    Events["CONTACT_LANGUAGE_CHANGED"] = "contact_language_changed";
-    Events["CONTACT_NAME_CHANGED"] = "contact_name_changed";
-    Events["CONTACT_STATUS_CHANGED"] = "contact_status_changed";
-    Events["CONTACT_URNS_CHANGED"] = "contact_urns_changed";
-    Events["IVR_CREATED"] = "ivr_created";
-    Events["MSG_CREATED"] = "msg_created";
-    Events["MSG_RECEIVED"] = "msg_received";
-    Events["OPTIN_REQUESTED"] = "optin_requested";
-    Events["OPTIN_STARTED"] = "optin_started";
-    Events["OPTIN_STOPPED"] = "optin_stopped";
-    Events["RUN_ENDED"] = "run_ended";
-    Events["RUN_STARTED"] = "run_started";
-    Events["TICKET_ASSIGNEE_CHANGED"] = "ticket_assignee_changed";
-    Events["TICKET_CLOSED"] = "ticket_closed";
-    Events["TICKET_NOTE_ADDED"] = "ticket_note_added";
-    Events["TICKET_OPENED"] = "ticket_opened";
-    Events["TICKET_REOPENED"] = "ticket_reopened";
-    Events["TICKET_TOPIC_CHANGED"] = "ticket_topic_changed";
-})(Events || (Events = {}));
-const renderInfoList = (singular, plural, items) => {
-    if (items.length === 1) {
-        return html `<div>${singular} <strong>${items[0].name}</strong></div>`;
-    }
-    else {
-        const list = items.map((item) => item.name);
-        if (list.length === 2) {
-            return html `<div>
-        ${plural} <strong>${list[0]}</strong> and <strong>${list[1]}</strong>
-      </div>`;
-        }
-        else {
-            const last = list.pop();
-            const middle = list.map((name, index) => html `<strong>${name}</strong>${index < list.length - 1 ? ', ' : ''}`);
-            return html `<div>${plural} ${middle}, and <strong>${last}</strong></div>`;
-        }
-    }
-};
-const renderRunEvent = (event) => {
-    let verb = 'Started';
-    if (event.type === Events.RUN_ENDED) {
-        if (event.status === 'completed') {
-            verb = 'Completed';
-        }
-        else if (event.status === 'expired') {
-            verb = 'Expired from';
-        }
-        else {
-            verb = 'Interrupted';
-        }
-    }
-    return html `<div>
-    ${verb}
-    <a href="/flow/editor/${event.flow.uuid}/"
-      ><strong>${event.flow.name}</strong></a
-    >
-  </div>`;
-};
-const renderChatStartedEvent = (event) => {
-    if (event.params) {
-        return html `<div>Chat referral</div>`;
-    }
-    else {
-        return html `<div>Chat started</div>`;
-    }
-};
-const renderUpdateEvent = (event) => {
-    return event.value
-        ? html `<div>
-        Updated <strong>${event.field.name}</strong> to
-        <strong>${event.value.text}</strong>
-      </div>`
-        : html `<div>Cleared <strong>${event.field.name}</strong></div>`;
-};
-const renderNameChanged = (event) => {
-    return html `<div>
-    Updated <strong>name</strong> to <strong>${event.name}</strong>
-  </div>`;
-};
-const renderContactURNsChanged = (event) => {
-    return html `<div>
-    Updated <strong>URNs</strong> to
-    ${oxfordFn(event.urns, (urn) => html `<strong>${urn.split(':')[1].split('?')[0]}</strong>`)}
-  </div>`;
-};
-export const renderTicketAction = (event, action) => {
-    var _a;
-    const ticketUUID = ((_a = event.ticket) === null || _a === void 0 ? void 0 : _a.uuid) || event.ticket_uuid;
-    const actionNote = event.note
-        ? html `<div
-        style="width:85%; background: #fffac3; padding: 1em;margin-bottom: 1em;margin-top:1em; border: 1px solid #ffe97f;border-radius: var(--curvature);line-height: 1.2em; word-break: break-word;"
-      >
-        <div style="color: #8e830fff; font-size: 1em;margin-bottom:0.25em; ">
-          <strong>${event._user ? event._user.name : 'Someone'}</strong> added a
-          note
-          <temba-date
-            value=${event.created_on.toISOString()}
-            display="relative"
-          ></temba-date>
-        </div>
-        <div style="white-space: pre-wrap;">${event.note}</div>
-      </div>`
-        : null;
-    if (action === 'noted') {
-        return html `${actionNote}`;
-    }
-    const description = event._user
-        ? html `<div>
-        <strong>${event._user.name}</strong> ${action} a
-        <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong>
-      </div>`
-        : html `<div>
-        A
-        <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong>
-        was <strong>${action}</strong>
-      </div>`;
-    return html `<div style="${actionNote ? 'margin-bottom: 1em;' : ''}">
-      ${description}
-    </div>
-    ${actionNote}`;
-};
-export const renderTicketAssigneeChanged = (event) => {
-    if (event._user) {
-        if (event.assignee) {
-            return html `<div>
-        <strong>${event._user.name}</strong> assigned this ticket to
-        <strong>${event.assignee.name}</strong>
-      </div>`;
-        }
-        else {
-            return html `<div>
-        <strong>${event._user.name}</strong> unassigned this ticket
-      </div>`;
-        }
-    }
-    else {
-        if (event.assignee) {
-            return html `<div>
-        This ticket was assigned to <strong>${event.assignee.name}</strong>
-      </div>`;
-        }
-        else {
-            return html `<div>This ticket was unassigned</div>`;
-        }
-    }
-};
-export const renderTicketOpened = (event) => {
-    return html `<div>${event.ticket.topic.name} ticket was opened</div>`;
-};
-export const renderContactGroupsEvent = (event) => {
-    const groupsEvent = event;
-    if (groupsEvent.groups_added) {
-        return renderInfoList('Added to group', 'Added to groups', groupsEvent.groups_added);
-    }
-    else if (groupsEvent.groups_removed) {
-        return renderInfoList('Removed from group', 'Removed from groups', groupsEvent.groups_removed);
-    }
-};
-export const renderAirtimeTransferredEvent = (event) => {
-    if (parseFloat(event.amount) === 0) {
-        return html `<div>Airtime transfer failed</div>`;
-    }
-    return html `<div>
-    Transferred <strong>${event.amount}</strong> ${event.currency} of airtime
-  </div>`;
-};
-export const renderContactLanguageChangedEvent = (event) => {
-    return html `<div>
-    Language updated to <strong>${event.language}</strong>
-  </div>`;
-};
-export const renderContactStatusChangedEvent = (event) => {
-    return html `<div>Status updated to <strong>${event.status}</strong></div>`;
-};
-export const renderCallEvent = (event) => {
-    if (event.type === Events.CALL_CREATED) {
-        return html `<div>Call started</div>`;
-    }
-    else if (event.type === Events.CALL_MISSED) {
-        return html `<div>Call missed</div>`;
-    }
-    else if (event.type === Events.CALL_RECEIVED) {
-        return html `<div>Call answered</div>`;
-    }
-};
-export const renderOptInEvent = (event) => {
-    if (event.type === Events.OPTIN_REQUESTED) {
-        return html `<div>
-      Requested opt-in for <strong>${event.optin.name}</strong>
-    </div>`;
-    }
-    else if (event.type === Events.OPTIN_STARTED) {
-        return html `<div>Opted in to <strong>${event.optin.name}</strong></div>`;
-    }
-    else if (event.type === Events.OPTIN_STOPPED) {
-        return html `<div>Opted out of <strong>${event.optin.name}</strong></div>`;
-    }
-};
+// re-export for backwards compatibility
+export { renderTicketAction, renderTicketAssigneeChanged };
 export class ContactChat extends ContactStoreElement {
     static get styles() {
         return css `
@@ -584,119 +380,13 @@ export class ContactChat extends ContactStoreElement {
         }, this.pollingInterval);
     }
     prerender(event) {
-        switch (event.type) {
-            case Events.AIRTIME_TRANSFERRED:
-                event._rendered = {
-                    html: renderAirtimeTransferredEvent(event),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.CALL_CREATED:
-            case Events.CALL_MISSED:
-            case Events.CALL_RECEIVED:
-                event._rendered = {
-                    html: renderCallEvent(event),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.CHAT_STARTED:
-                event._rendered = {
-                    html: renderChatStartedEvent(event),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.CONTACT_FIELD_CHANGED:
-                event._rendered = {
-                    html: renderUpdateEvent(event),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.CONTACT_GROUPS_CHANGED:
-                event._rendered = {
-                    html: renderContactGroupsEvent(event),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.CONTACT_LANGUAGE_CHANGED:
-                event._rendered = {
-                    html: renderContactLanguageChangedEvent(event),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.CONTACT_NAME_CHANGED:
-                event._rendered = {
-                    html: renderNameChanged(event),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.CONTACT_STATUS_CHANGED:
-                event._rendered = {
-                    html: renderContactStatusChangedEvent(event),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.CONTACT_URNS_CHANGED:
-                event._rendered = {
-                    html: renderContactURNsChanged(event),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.OPTIN_REQUESTED:
-            case Events.OPTIN_STARTED:
-            case Events.OPTIN_STOPPED:
-                event._rendered = {
-                    html: renderOptInEvent(event),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.RUN_STARTED:
-            case Events.RUN_ENDED:
-                event._rendered = {
-                    html: renderRunEvent(event),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.TICKET_ASSIGNEE_CHANGED:
-                event._rendered = {
-                    html: renderTicketAssigneeChanged(event),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.TICKET_CLOSED:
-                event._rendered = {
-                    html: renderTicketAction(event, 'closed'),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.TICKET_OPENED:
-                event._rendered = {
-                    html: renderTicketAction(event, 'opened'),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.TICKET_NOTE_ADDED:
-                event._rendered = {
-                    html: renderTicketAction(event, 'noted'),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.TICKET_REOPENED:
-                event._rendered = {
-                    html: renderTicketAction(event, 'reopened'),
-                    type: MessageType.Inline
-                };
-                break;
-            case Events.TICKET_TOPIC_CHANGED:
-                event._rendered = {
-                    html: html `<div>
-            Topic changed to
-            <strong>${event.topic.name}</strong>
-          </div>`,
-                    type: MessageType.Inline
-                };
-                break;
-            default:
-            // console.error('Unknown event type', event);
+        // use the unified renderEvent function with isSimulation = false
+        const rendered = renderEvent(event, false);
+        if (rendered) {
+            event._rendered = {
+                html: rendered,
+                type: MessageType.Inline
+            };
         }
     }
     createMessages(page) {
@@ -946,6 +636,7 @@ export class ContactChat extends ContactStoreElement {
               @temba-fetch-complete=${this.fetchComplete}
               avatar=${this.avatar}
               agent
+              avatars
               ?hasFooter=${inFlow}
               .showMessageLogsAfter=${this.showMessageLogsAfter}
             >