@nyaruka/temba-components 0.25.2 → 0.26.2

package/out-tsc/src/completion/Completion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Completion.js","sourceRoot":"","sources":["../../../src/completion/Completion.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, property, html } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { TextInput } from '../textinput/TextInput';\nimport {\n  renderCompletionOption,\n  updateInputElementWithCompletion,\n  executeCompletionQuery,\n} from './helpers';\n\nimport { FormElement } from '../FormElement';\nimport { CompletionOption, Position } from '../interfaces';\nimport { Store } from '../store/Store';\nimport { styleMap } from 'lit-html/directives/style-map';\n\n/**\n * Completion is a text input that handles excellent completion options in a popup\n */\nexport class Completion extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n      }\n\n      temba-options {\n        --widget-box-shadow-focused: 0 0 4px rgba(0, 0, 0, 0.15);\n        --color-focus: #e6e6e6;\n      }\n\n      .comp-container {\n        position: relative;\n        height: 100%;\n      }\n\n      #anchor {\n        /* background: rgba(132, 40, 158, .1); */\n        position: absolute;\n        visibility: hidden;\n        width: 250px;\n        height: 20px;\n      }\n\n      .fn-marker {\n        font-weight: bold;\n        font-size: 42px;\n      }\n\n      .option-slot {\n        background: #fff;\n      }\n\n      .current-fn {\n        padding: 10px;\n        margin: 5px;\n        background: var(--color-primary-light);\n        color: rgba(0, 0, 0, 0.5);\n        border-radius: var(--curvature-widget);\n        font-size: 90%;\n      }\n\n      .footer {\n        padding: 5px 10px;\n        background: var(--color-primary-light);\n        color: rgba(0, 0, 0, 0.5);\n        font-size: 80%;\n        border-bottom-left-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n      }\n\n      code {\n        background: rgba(0, 0, 0, 0.1);\n        padding: 1px 5px;\n        border-radius: var(--curvature);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  session: boolean;\n\n  @property({ type: Boolean })\n  submitOnEnter = false;\n\n  @property({ type: Object })\n  anchorPosition: Position = { left: 0, top: 0 };\n\n  @property({ attribute: false })\n  currentFunction: CompletionOption;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ attribute: false })\n  textInputElement: TextInput;\n\n  @property({ attribute: false })\n  anchorElement: HTMLDivElement;\n\n  @property({ type: Array })\n  options: any[] = [];\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: Boolean })\n  textarea: boolean;\n\n  @property({ type: Boolean })\n  gsm: boolean;\n\n  @property({ type: String })\n  counter: string;\n\n  private hiddenElement: HTMLInputElement;\n  private query: string;\n\n  public firstUpdated() {\n    this.textInputElement = this.shadowRoot.querySelector(\n      'temba-textinput'\n    ) as TextInput;\n    this.anchorElement = this.shadowRoot.querySelector('#anchor');\n\n    // create our hidden container so it gets included in our host element's form\n    this.hiddenElement = document.createElement('input');\n    this.hiddenElement.setAttribute('type', 'hidden');\n    this.hiddenElement.setAttribute('name', this.getAttribute('name'));\n    this.hiddenElement.setAttribute('value', this.getAttribute('value') || '');\n    this.appendChild(this.hiddenElement);\n  }\n\n  private handleKeyUp(evt: KeyboardEvent) {\n    // if we have options, ignore keys that are meant for them\n    if (this.options && this.options.length > 0) {\n      if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {\n        return;\n      }\n\n      if (evt.ctrlKey) {\n        if (evt.key === 'n' || evt.key === 'p') {\n          return;\n        }\n      }\n\n      if (\n        evt.key === 'Enter' ||\n        evt.key === 'Escape' ||\n        evt.key === 'Tab' ||\n        evt.key.startsWith('Control')\n      ) {\n        evt.stopPropagation();\n        evt.preventDefault();\n        return;\n      }\n\n      this.executeQuery(evt.currentTarget as TextInput);\n    }\n  }\n\n  public hasVisibleOptions() {\n    return this.options.length > 0;\n  }\n\n  private executeQuery(ele: TextInput) {\n    const store: Store = document.querySelector('temba-store');\n    const result = executeCompletionQuery(\n      ele.inputElement,\n      store,\n      this.session\n    );\n\n    this.query = result.query;\n    this.options = result.options;\n    this.anchorPosition = result.anchorPosition;\n  }\n\n  private handleClick(evt: MouseEvent) {\n    this.executeQuery(evt.currentTarget as TextInput);\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if our cursor changed, lets make sure our scrollbox is showing it\n    if (changedProperties.has('value')) {\n      this.hiddenElement.setAttribute('value', this.value);\n    }\n  }\n\n  private handleInput(evt: KeyboardEvent) {\n    const ele = evt.currentTarget as TextInput;\n    this.executeQuery(ele);\n    this.value = ele.inputElement.value;\n    this.fireEvent('change');\n  }\n\n  private handleOptionCanceled() {\n    // delay in case we are actively selecting\n    window.setTimeout(() => {\n      this.options = [];\n      this.query = '';\n    }, 100);\n  }\n\n  private handleOptionSelection(evt: CustomEvent) {\n    const option = evt.detail.selected as CompletionOption;\n    const tabbed = evt.detail.tabbed;\n\n    updateInputElementWithCompletion(\n      this.query,\n      this.textInputElement.inputElement,\n      option\n    );\n    this.query = '';\n    this.options = [];\n\n    if (tabbed) {\n      this.executeQuery(this.textInputElement);\n    }\n  }\n\n  public click() {\n    super.click();\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n    if (input) {\n      input.click();\n    }\n  }\n\n  public render(): TemplateResult {\n    const anchorStyles = this.anchorPosition\n      ? {\n          top: `${this.anchorPosition.top}px`,\n          left: `${this.anchorPosition.left}px`,\n        }\n      : {};\n\n    return html`\n      <temba-field\n        name=${this.name}\n        .label=${this.label}\n        .helpText=${this.helpText}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n      >\n        <div class=\"comp-container\">\n          <div id=\"anchor\" style=${styleMap(anchorStyles)}></div>\n          <temba-textinput\n            name=${this.name}\n            placeholder=${this.placeholder}\n            gsm=${this.gsm}\n            counter=${ifDefined(this.counter)}\n            @keyup=${this.handleKeyUp}\n            @click=${this.handleClick}\n            @input=${this.handleInput}\n            @blur=${this.handleOptionCanceled}\n            .value=${this.value}\n            ?textarea=${this.textarea}\n            ?submitOnEnter=${this.submitOnEnter}\n          >\n          </temba-textinput>\n          <temba-options\n            @temba-selection=${this.handleOptionSelection}\n            @temba-canceled=${this.handleOptionCanceled}\n            .renderOption=${renderCompletionOption}\n            .anchorTo=${this.anchorElement}\n            .options=${this.options}\n            ?visible=${this.options && this.options.length > 0}\n          >\n            ${this.currentFunction\n              ? html`\n                  <div class=\"current-fn\">\n                    ${renderCompletionOption(this.currentFunction, true)}\n                  </div>\n                `\n              : null}\n            <div class=\"footer\">Tab to complete, enter to select</div>\n          </temba-options>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Completion.js","sourceRoot":"","sources":["../../../src/completion/Completion.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { TextInput } from '../textinput/TextInput';\nimport {\n  renderCompletionOption,\n  updateInputElementWithCompletion,\n  executeCompletionQuery,\n} from './helpers';\n\nimport { FormElement } from '../FormElement';\nimport { CompletionOption, Position } from '../interfaces';\nimport { Store } from '../store/Store';\nimport { styleMap } from 'lit-html/directives/style-map';\n\n/**\n * Completion is a text input that handles excellent completion options in a popup\n */\nexport class Completion extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n      }\n\n      temba-options {\n        --widget-box-shadow-focused: 0 0 4px rgba(0, 0, 0, 0.15);\n        --color-focus: #e6e6e6;\n      }\n\n      .comp-container {\n        position: relative;\n        height: 100%;\n      }\n\n      #anchor {\n        /* background: rgba(132, 40, 158, .1); */\n        position: absolute;\n        visibility: hidden;\n        width: 250px;\n        height: 20px;\n      }\n\n      .fn-marker {\n        font-weight: bold;\n        font-size: 42px;\n      }\n\n      .option-slot {\n        background: #fff;\n      }\n\n      .current-fn {\n        padding: 10px;\n        margin: 5px;\n        background: var(--color-primary-light);\n        color: rgba(0, 0, 0, 0.5);\n        border-radius: var(--curvature-widget);\n        font-size: 90%;\n      }\n\n      .footer {\n        padding: 5px 10px;\n        background: var(--color-primary-light);\n        color: rgba(0, 0, 0, 0.5);\n        font-size: 80%;\n        border-bottom-left-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n      }\n\n      code {\n        background: rgba(0, 0, 0, 0.1);\n        padding: 1px 5px;\n        border-radius: var(--curvature);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  session: boolean;\n\n  @property({ type: Boolean })\n  submitOnEnter = false;\n\n  @property({ type: Object })\n  anchorPosition: Position = { left: 0, top: 0 };\n\n  @property({ attribute: false })\n  currentFunction: CompletionOption;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ attribute: false })\n  textInputElement: TextInput;\n\n  @property({ attribute: false })\n  anchorElement: HTMLDivElement;\n\n  @property({ type: Array })\n  options: any[] = [];\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: Boolean })\n  textarea: boolean;\n\n  @property({ type: Boolean })\n  gsm: boolean;\n\n  @property({ type: String })\n  counter: string;\n\n  private hiddenElement: HTMLInputElement;\n  private query: string;\n\n  public firstUpdated() {\n    this.textInputElement = this.shadowRoot.querySelector(\n      'temba-textinput'\n    ) as TextInput;\n    this.anchorElement = this.shadowRoot.querySelector('#anchor');\n\n    // create our hidden container so it gets included in our host element's form\n    this.hiddenElement = document.createElement('input');\n    this.hiddenElement.setAttribute('type', 'hidden');\n    this.hiddenElement.setAttribute('name', this.getAttribute('name'));\n    this.hiddenElement.setAttribute('value', this.getAttribute('value') || '');\n    this.appendChild(this.hiddenElement);\n  }\n\n  private handleKeyUp(evt: KeyboardEvent) {\n    // if we have options, ignore keys that are meant for them\n    if (this.options && this.options.length > 0) {\n      if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {\n        return;\n      }\n\n      if (evt.ctrlKey) {\n        if (evt.key === 'n' || evt.key === 'p') {\n          return;\n        }\n      }\n\n      if (\n        evt.key === 'Enter' ||\n        evt.key === 'Escape' ||\n        evt.key === 'Tab' ||\n        evt.key.startsWith('Control')\n      ) {\n        evt.stopPropagation();\n        evt.preventDefault();\n        return;\n      }\n\n      this.executeQuery(evt.currentTarget as TextInput);\n    }\n  }\n\n  public hasVisibleOptions() {\n    return this.options.length > 0;\n  }\n\n  private executeQuery(ele: TextInput) {\n    const store: Store = document.querySelector('temba-store');\n    const result = executeCompletionQuery(\n      ele.inputElement,\n      store,\n      this.session\n    );\n\n    this.query = result.query;\n    this.options = result.options;\n    this.anchorPosition = result.anchorPosition;\n  }\n\n  private handleClick(evt: MouseEvent) {\n    this.executeQuery(evt.currentTarget as TextInput);\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if our cursor changed, lets make sure our scrollbox is showing it\n    if (changedProperties.has('value')) {\n      this.hiddenElement.setAttribute('value', this.value);\n    }\n  }\n\n  private handleInput(evt: KeyboardEvent) {\n    const ele = evt.currentTarget as TextInput;\n    this.executeQuery(ele);\n    this.value = ele.inputElement.value;\n    this.fireEvent('change');\n  }\n\n  private handleOptionCanceled() {\n    // delay in case we are actively selecting\n    window.setTimeout(() => {\n      this.options = [];\n      this.query = '';\n    }, 100);\n  }\n\n  private handleOptionSelection(evt: CustomEvent) {\n    const option = evt.detail.selected as CompletionOption;\n    const tabbed = evt.detail.tabbed;\n\n    updateInputElementWithCompletion(\n      this.query,\n      this.textInputElement.inputElement,\n      option\n    );\n    this.query = '';\n    this.options = [];\n\n    if (tabbed) {\n      this.executeQuery(this.textInputElement);\n    }\n  }\n\n  public click() {\n    super.click();\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n    if (input) {\n      input.click();\n    }\n  }\n\n  public render(): TemplateResult {\n    const anchorStyles = this.anchorPosition\n      ? {\n          top: `${this.anchorPosition.top}px`,\n          left: `${this.anchorPosition.left}px`,\n        }\n      : {};\n\n    return html`\n      <temba-field\n        name=${this.name}\n        .label=${this.label}\n        .helpText=${this.helpText}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n      >\n        <div class=\"comp-container\">\n          <div id=\"anchor\" style=${styleMap(anchorStyles)}></div>\n          <temba-textinput\n            name=${this.name}\n            placeholder=${this.placeholder}\n            gsm=${this.gsm}\n            counter=${ifDefined(this.counter)}\n            @keyup=${this.handleKeyUp}\n            @click=${this.handleClick}\n            @input=${this.handleInput}\n            @blur=${this.handleOptionCanceled}\n            .value=${this.value}\n            ?textarea=${this.textarea}\n            ?submitOnEnter=${this.submitOnEnter}\n          >\n          </temba-textinput>\n          <temba-options\n            @temba-selection=${this.handleOptionSelection}\n            @temba-canceled=${this.handleOptionCanceled}\n            .renderOption=${renderCompletionOption}\n            .anchorTo=${this.anchorElement}\n            .options=${this.options}\n            ?visible=${this.options && this.options.length > 0}\n          >\n            ${this.currentFunction\n              ? html`\n                  <div class=\"current-fn\">\n                    ${renderCompletionOption(this.currentFunction, true)}\n                  </div>\n                `\n              : null}\n            <div class=\"footer\">Tab to complete, enter to select</div>\n          </temba-options>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}

package/out-tsc/src/completion/helpers.js

@@ -1,5 +1,6 @@
-import { html, directive } from 'lit-html';
+import { html } from 'lit';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { directive, Directive, PartType } from 'lit/directive';
 import ExcellentParser from './ExcellentParser';
 import { Remarkable } from 'remarkable';
 const md = new Remarkable();
@@ -25,9 +26,31 @@ const sessionParser = new ExcellentParser('@', [
     'trigger',
     'resume',
 ]);
-export const renderMarkdown = directive((contents) => (part) => {
-    part.setValue(unsafeHTML(md.render(contents)));
-});
+// Class-based directive API
+export class RenderMarkdown extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        // When necessary, validate part in constructor using `part.type`
+        if (partInfo.type !== PartType.CHILD) {
+            throw new Error('renderMarkdown only supports child expressions');
+        }
+    }
+    // Optional: override update to perform any direct DOM manipulation
+    // DirectiveParameters<this>
+    update(part, [initialValue]) {
+        /* Any imperative updates to DOM/parts would go here */
+        return this.render(initialValue);
+    }
+    // Do SSR-compatible rendering (arguments are passed from call site)
+    render(initialValue) {
+        // Previous state available on class field
+        if (this.value === undefined) {
+            this.value = initialValue;
+        }
+        return html `${unsafeHTML(md.render(this.value))}`;
+    }
+}
+export const renderMarkdown = directive(RenderMarkdown);
 export const renderCompletionOption = (option, selected) => {
     if (option.signature) {
         const argStart = option.signature.indexOf('(');

package/out-tsc/src/completion/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/completion/helpers.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, directive, Part, TemplateResult } from 'lit-html';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport ExcellentParser, { Expression } from './ExcellentParser';\nimport {\n  CompletionOption,\n  CompletionProperty,\n  CompletionResult,\n  CompletionSchema,\n  CompletionType,\n  KeyedAssets,\n} from '../interfaces';\nimport { Store } from '../store/Store';\nimport { Remarkable } from 'remarkable';\n\nconst md = new Remarkable();\n\nconst messageParser = new ExcellentParser('@', [\n  'contact',\n  'fields',\n  'globals',\n  'urns',\n]);\n\nconst sessionParser = new ExcellentParser('@', [\n  'contact',\n  'fields',\n  'globals',\n  'urns',\n  'results',\n  'input',\n  'run',\n  'child',\n  'parent',\n  'node',\n  'webhook',\n  'ticket',\n  'trigger',\n  'resume',\n]);\n\nexport const renderMarkdown = directive((contents: string) => (part: Part) => {\n  part.setValue(unsafeHTML(md.render(contents)));\n});\n\nexport const renderCompletionOption = (\n  option: CompletionOption,\n  selected: boolean\n): TemplateResult => {\n  if (option.signature) {\n    const argStart = option.signature.indexOf('(');\n    const name = option.signature.substr(0, argStart);\n    const args = option.signature.substr(argStart);\n\n    return html`\n      <div style=\"${selected ? 'font-weight: 400' : ''}\">\n        <div style=\"display:inline-block;margin-right: 5px\">ƒ</div>\n        <div style=\"display:inline-block\">${name}</div>\n        ${selected\n          ? html`\n              <div\n                style=\"display:inline-block; font-weight: 300; font-size: 85%\"\n              >\n                ${args}\n              </div>\n              <div class=\"detail\">${renderMarkdown(option.summary)}</div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  return html`\n    <div>\n      <div style=\"${selected ? 'font-weight: 400' : ''}\">${option.name}</div>\n      ${selected\n        ? html` <div style=\"font-size: 85%\">${option.summary}</div> `\n        : null}\n    </div>\n  `;\n};\n\nexport const getFunctions = (\n  functions: CompletionOption[],\n  query: string\n): CompletionOption[] => {\n  if (!query) {\n    return functions;\n  }\n  return functions.filter((option: CompletionOption) => {\n    if (option.signature) {\n      return option.signature.indexOf((query || '').toLowerCase()) === 0;\n    }\n    return false;\n  });\n};\n\n/**\n * Takes a dot query and returns the completions options at the current level\n * @param dotQuery query such as \"contact.first_n\"\n */\nexport const getCompletions = (\n  schema: CompletionSchema,\n  dotQuery: string,\n  keyedAssets: KeyedAssets = {},\n  session: boolean\n): CompletionOption[] => {\n  const parts = (dotQuery || '').split('.');\n  let currentProps: CompletionProperty[] = session\n    ? schema.root\n    : schema.root_no_session;\n\n  if (!currentProps) {\n    return [];\n  }\n\n  let prefix = '';\n  let part = '';\n  while (parts.length > 0) {\n    part = parts.shift();\n    if (part) {\n      // eslint-disable-next-line\n      const nextProp = currentProps.find(\n        (prop: CompletionProperty) => prop.key === part\n      );\n      if (nextProp) {\n        // eslint-disable-next-line\n        const nextType = schema.types.find(\n          (type: CompletionType) => type.name === nextProp.type\n        );\n        if (nextType && nextType.properties) {\n          currentProps = nextType.properties;\n          prefix += part + '.';\n        } else if (nextType && nextType.property_template) {\n          prefix += part + '.';\n          const template = nextType.property_template;\n          if (keyedAssets[nextType.name]) {\n            currentProps = keyedAssets[nextType.name].map((key: string) => ({\n              key: template.key.replace('{key}', key),\n              help: template.help.replace('{key}', key),\n              type: template.type,\n            }));\n          } else {\n            currentProps = [];\n          }\n        } else {\n          // eslint-disable-next-line\n          currentProps = currentProps.filter((prop: CompletionProperty) =>\n            prop.key.startsWith(part.toLowerCase())\n          );\n          break;\n        }\n      } else {\n        // eslint-disable-next-line\n        currentProps = currentProps.filter((prop: CompletionProperty) =>\n          prop.key.startsWith(part.toLowerCase())\n        );\n        break;\n      }\n    }\n  }\n\n  return currentProps.map((prop: CompletionProperty) => {\n    const name =\n      prop.key === '__default__'\n        ? prefix.substr(0, prefix.length - 1)\n        : prefix + prop.key;\n    return { name, summary: prop.help };\n  });\n};\n\nexport const getOffset = (el: HTMLElement) => {\n  const rect = el.getBoundingClientRect(),\n    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,\n    scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n  return { top: rect.top + scrollTop, left: rect.left + scrollLeft };\n};\n\nexport const getVerticalScroll = (ele: Node) => {\n  let current = ele;\n  const verticalScroll = 0;\n  while (current) {\n    current = current.parentNode;\n  }\n  return verticalScroll;\n};\n\nexport const getCompletionName = (option: CompletionOption): string => {\n  return (\n    option.name || option.signature.substr(0, option.signature.indexOf('('))\n  );\n};\n\nexport const getCompletionSignature = (option: CompletionOption): string => {\n  return option.signature.substr(option.signature.indexOf('('));\n};\n\n/**\n * Determines the pixel position of position inside a textarea or input\n * TODO: Explore somethign like contenteditable to avoid this madness\n * see: https://jh3y.medium.com/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a\n */\nconst getCursorXY = (input, selectionPoint) => {\n  const { offsetLeft: inputX, offsetTop: inputY } = input;\n  const div = document.createElement('div');\n  const copyStyle = getComputedStyle(input);\n  for (const prop of copyStyle) {\n    div.style[prop] = copyStyle[prop];\n  }\n  div.style.position = 'relative';\n  const swap = '.';\n  const inputValue =\n    input.tagName === 'INPUT' ? input.value.replace(/ /g, swap) : input.value;\n  const textContent = inputValue.substr(0, selectionPoint);\n  div.textContent = textContent;\n  if (input.tagName === 'TEXTAREA') div.style.height = 'auto';\n  if (input.tagName === 'INPUT') div.style.width = 'auto';\n  const span = document.createElement('span');\n  span.textContent = inputValue.substr(selectionPoint) || '.';\n  div.appendChild(span);\n  document.body.appendChild(div);\n  const { offsetLeft: spanX, offsetTop: spanY } = span;\n  document.body.removeChild(div);\n  return {\n    left: inputX + spanX,\n    top: inputY + spanY,\n  };\n};\n\nexport const updateInputElementWithCompletion = (\n  currentQuery: string,\n  ele: HTMLInputElement,\n  option: CompletionOption\n) => {\n  let insertText = '';\n\n  if (option.signature) {\n    // they selected a function\n    insertText = option.signature.substr(0, option.signature.indexOf('(') + 1);\n  } else {\n    insertText = option.name;\n  }\n\n  const queryLength = currentQuery.length;\n\n  if (ele) {\n    const value = ele.value;\n    const insertionPoint = ele.selectionStart - queryLength;\n\n    // strip out our query\n    // const insertionPoint = value.lastIndexOf(value.substring(0, this.inputElement.selectionStart));\n    const leftSide = value.substr(0, insertionPoint);\n    const remaining = value.substr(insertionPoint + queryLength);\n    const caret = leftSide.length + insertText.length;\n\n    // set our value and our new caret\n    ele.value = leftSide + insertText + remaining;\n    ele.setSelectionRange(caret, caret);\n\n    // now scroll our text box if necessary\n    const position = getCursorXY(ele, caret);\n    if (position.left > ele.width) {\n      ele.scrollLeft = position.left;\n    }\n\n    ele.dispatchEvent(new Event('input'));\n  }\n};\n\nexport const executeCompletionQuery = (\n  ele: HTMLInputElement,\n  store: Store,\n  session: boolean\n): CompletionResult => {\n  const result: CompletionResult = {\n    currentFunction: null,\n    options: [],\n    anchorPosition: null,\n    query: null,\n  };\n\n  // we need a store to do anything useful\n  if (!store) {\n    return result;\n  }\n\n  const cursor = ele.selectionStart;\n  const input = ele.value.substring(0, cursor);\n\n  const parser = session ? sessionParser : messageParser;\n  const expressions = parser.findExpressions(input);\n  const currentExpression = expressions.find(\n    (expr: Expression) =>\n      expr.start <= cursor &&\n      (expr.end > cursor || (expr.end === cursor && !expr.closed))\n  );\n\n  if (currentExpression) {\n    const includeFunctions = currentExpression.text.indexOf('(') > -1;\n    if (includeFunctions) {\n      const functionQuery = parser.functionContext(currentExpression.text);\n      if (functionQuery) {\n        const fns = getFunctions(store.getFunctions(), functionQuery);\n        if (fns.length > 0) {\n          result.currentFunction = fns[0];\n        }\n      }\n    }\n\n    for (let i = currentExpression.text.length; i >= 0; i--) {\n      const curr = currentExpression.text[i];\n      if (\n        curr === '@' ||\n        curr === '(' ||\n        curr === ' ' ||\n        curr === ',' ||\n        curr === ')' ||\n        i === 0\n      ) {\n        // don't include non-expression chars\n        if (\n          curr === '(' ||\n          curr === ' ' ||\n          curr === ',' ||\n          curr === ')' ||\n          curr === '@'\n        ) {\n          i++;\n        }\n\n        const caret = getCursorXY(ele, currentExpression.start + i);\n\n        result.anchorPosition = {\n          left: caret.left - 2 - ele.scrollLeft,\n          top: caret.top - ele.scrollTop,\n        };\n\n        result.query = currentExpression.text.substr(\n          i,\n          currentExpression.text.length - i\n        );\n\n        result.options = [\n          ...getCompletions(\n            store.getCompletionSchema(),\n            result.query,\n            store.getKeyedAssets(),\n            session\n          ),\n          ...(includeFunctions\n            ? getFunctions(store.getFunctions(), result.query)\n            : []),\n        ];\n\n        return result;\n      }\n    }\n  } else {\n    result.options = [];\n    result.query = '';\n  }\n  return result;\n};\n"]}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/completion/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,SAAS,EAAkB,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,eAA+B,MAAM,mBAAmB,CAAC;AAUhE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,EAAE,GAAG,IAAI,UAAU,EAAE,CAAC;AAE5B,MAAM,aAAa,GAAG,IAAI,eAAe,CAAC,GAAG,EAAE;IAC7C,SAAS;IACT,QAAQ;IACR,SAAS;IACT,MAAM;CACP,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,IAAI,eAAe,CAAC,GAAG,EAAE;IAC7C,SAAS;IACT,QAAQ;IACR,SAAS;IACT,MAAM;IACN,SAAS;IACT,OAAO;IACP,KAAK;IACL,OAAO;IACP,QAAQ;IACR,MAAM;IACN,SAAS;IACT,QAAQ;IACR,SAAS;IACT,QAAQ;CACT,CAAC,CAAC;AAEH,4BAA4B;AAC5B,MAAM,OAAO,cAAe,SAAQ,SAAS;IAG3C,YAAY,QAAkB;QAC5B,KAAK,CAAC,QAAQ,CAAC,CAAC;QAChB,iEAAiE;QACjE,IAAI,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC,KAAK,EAAE;YACpC,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;SACnE;IACH,CAAC;IACD,mEAAmE;IACnE,4BAA4B;IAC5B,MAAM,CAAC,IAAU,EAAE,CAAC,YAAY,CAAM;QACpC,uDAAuD;QACvD,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IACnC,CAAC;IACD,oEAAoE;IACpE,MAAM,CAAC,YAAoB;QACzB,0CAA0C;QAC1C,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC5B,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;SAC3B;QACD,OAAO,IAAI,CAAA,GAAG,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;IACpD,CAAC;CACF;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CAAC,cAAc,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,MAAwB,EACxB,QAAiB,EACD,EAAE;IAClB,IAAI,MAAM,CAAC,SAAS,EAAE;QACpB,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAC/C,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;QAClD,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAE/C,OAAO,IAAI,CAAA;oBACK,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;;4CAEV,IAAI;UACtC,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;;;;kBAIE,IAAI;;oCAEc,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC;aACrD;YACH,CAAC,CAAC,IAAI;;KAEX,CAAC;KACH;IAED,OAAO,IAAI,CAAA;;oBAEO,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,IAAI;QAC9D,QAAQ;QACR,CAAC,CAAC,IAAI,CAAA,gCAAgC,MAAM,CAAC,OAAO,SAAS;QAC7D,CAAC,CAAC,IAAI;;GAEX,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,SAA6B,EAC7B,KAAa,EACO,EAAE;IACtB,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,SAAS,CAAC;KAClB;IACD,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,MAAwB,EAAE,EAAE;QACnD,IAAI,MAAM,CAAC,SAAS,EAAE;YACpB,OAAO,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;SACpE;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,MAAwB,EACxB,QAAgB,EAChB,cAA2B,EAAE,EAC7B,OAAgB,EACI,EAAE;IACtB,MAAM,KAAK,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC1C,IAAI,YAAY,GAAyB,OAAO;QAC9C,CAAC,CAAC,MAAM,CAAC,IAAI;QACb,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC;IAE3B,IAAI,CAAC,YAAY,EAAE;QACjB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,IAAI,IAAI,GAAG,EAAE,CAAC;IACd,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACvB,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,IAAI,EAAE;YACR,2BAA2B;YAC3B,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAChC,CAAC,IAAwB,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,KAAK,IAAI,CAChD,CAAC;YACF,IAAI,QAAQ,EAAE;gBACZ,2BAA2B;gBAC3B,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAChC,CAAC,IAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,CACtD,CAAC;gBACF,IAAI,QAAQ,IAAI,QAAQ,CAAC,UAAU,EAAE;oBACnC,YAAY,GAAG,QAAQ,CAAC,UAAU,CAAC;oBACnC,MAAM,IAAI,IAAI,GAAG,GAAG,CAAC;iBACtB;qBAAM,IAAI,QAAQ,IAAI,QAAQ,CAAC,iBAAiB,EAAE;oBACjD,MAAM,IAAI,IAAI,GAAG,GAAG,CAAC;oBACrB,MAAM,QAAQ,GAAG,QAAQ,CAAC,iBAAiB,CAAC;oBAC5C,IAAI,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;wBAC9B,YAAY,GAAG,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAW,EAAE,EAAE,CAAC,CAAC;4BAC9D,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC;4BACvC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC;4BACzC,IAAI,EAAE,QAAQ,CAAC,IAAI;yBACpB,CAAC,CAAC,CAAC;qBACL;yBAAM;wBACL,YAAY,GAAG,EAAE,CAAC;qBACnB;iBACF;qBAAM;oBACL,2BAA2B;oBAC3B,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,IAAwB,EAAE,EAAE,CAC9D,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CACxC,CAAC;oBACF,MAAM;iBACP;aACF;iBAAM;gBACL,2BAA2B;gBAC3B,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,IAAwB,EAAE,EAAE,CAC9D,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CACxC,CAAC;gBACF,MAAM;aACP;SACF;KACF;IAED,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,IAAwB,EAAE,EAAE;QACnD,MAAM,IAAI,GACR,IAAI,CAAC,GAAG,KAAK,aAAa;YACxB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YACrC,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC;QACxB,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAe,EAAE,EAAE;IAC3C,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE,EACrC,UAAU,GAAG,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,UAAU,EACtE,SAAS,GAAG,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC;IACvE,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,UAAU,EAAE,CAAC;AACrE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,GAAS,EAAE,EAAE;IAC7C,IAAI,OAAO,GAAG,GAAG,CAAC;IAClB,MAAM,cAAc,GAAG,CAAC,CAAC;IACzB,OAAO,OAAO,EAAE;QACd,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC;KAC9B;IACD,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,MAAwB,EAAU,EAAE;IACpE,OAAO,CACL,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CACzE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,MAAwB,EAAU,EAAE;IACzE,OAAO,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;AAChE,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,cAAc,EAAE,EAAE;IAC5C,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACxD,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC1C,KAAK,MAAM,IAAI,IAAI,SAAS,EAAE;QAC5B,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;KACnC;IACD,GAAG,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;IAChC,MAAM,IAAI,GAAG,GAAG,CAAC;IACjB,MAAM,UAAU,GACd,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;IAC5E,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;IACzD,GAAG,CAAC,WAAW,GAAG,WAAW,CAAC;IAC9B,IAAI,KAAK,CAAC,OAAO,KAAK,UAAU;QAAE,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;IAC5D,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO;QAAE,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;IACxD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,GAAG,CAAC;IAC5D,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAC/B,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACrD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAC/B,OAAO;QACL,IAAI,EAAE,MAAM,GAAG,KAAK;QACpB,GAAG,EAAE,MAAM,GAAG,KAAK;KACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAC9C,YAAoB,EACpB,GAAqB,EACrB,MAAwB,EACxB,EAAE;IACF,IAAI,UAAU,GAAG,EAAE,CAAC;IAEpB,IAAI,MAAM,CAAC,SAAS,EAAE;QACpB,2BAA2B;QAC3B,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;KAC5E;SAAM;QACL,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC;KAC1B;IAED,MAAM,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC;IAExC,IAAI,GAAG,EAAE;QACP,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;QACxB,MAAM,cAAc,GAAG,GAAG,CAAC,cAAc,GAAG,WAAW,CAAC;QAExD,sBAAsB;QACtB,kGAAkG;QAClG,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;QACjD,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,cAAc,GAAG,WAAW,CAAC,CAAC;QAC7D,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAElD,kCAAkC;QAClC,GAAG,CAAC,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;QAC9C,GAAG,CAAC,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAEpC,uCAAuC;QACvC,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACzC,IAAI,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC,KAAK,EAAE;YAC7B,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC;SAChC;QAED,GAAG,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KACvC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,GAAqB,EACrB,KAAY,EACZ,OAAgB,EACE,EAAE;IACpB,MAAM,MAAM,GAAqB;QAC/B,eAAe,EAAE,IAAI;QACrB,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,IAAI;QACpB,KAAK,EAAE,IAAI;KACZ,CAAC;IAEF,wCAAwC;IACxC,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,MAAM,CAAC;KACf;IAED,MAAM,MAAM,GAAG,GAAG,CAAC,cAAc,CAAC;IAClC,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IAE7C,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC;IACvD,MAAM,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,iBAAiB,GAAG,WAAW,CAAC,IAAI,CACxC,CAAC,IAAgB,EAAE,EAAE,CACnB,IAAI,CAAC,KAAK,IAAI,MAAM;QACpB,CAAC,IAAI,CAAC,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAC/D,CAAC;IAEF,IAAI,iBAAiB,EAAE;QACrB,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAClE,IAAI,gBAAgB,EAAE;YACpB,MAAM,aAAa,GAAG,MAAM,CAAC,eAAe,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;YACrE,IAAI,aAAa,EAAE;gBACjB,MAAM,GAAG,GAAG,YAAY,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE,aAAa,CAAC,CAAC;gBAC9D,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE;oBAClB,MAAM,CAAC,eAAe,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;iBACjC;aACF;SACF;QAED,KAAK,IAAI,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;YACvD,MAAM,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACvC,IACE,IAAI,KAAK,GAAG;gBACZ,IAAI,KAAK,GAAG;gBACZ,IAAI,KAAK,GAAG;gBACZ,IAAI,KAAK,GAAG;gBACZ,IAAI,KAAK,GAAG;gBACZ,CAAC,KAAK,CAAC,EACP;gBACA,qCAAqC;gBACrC,IACE,IAAI,KAAK,GAAG;oBACZ,IAAI,KAAK,GAAG;oBACZ,IAAI,KAAK,GAAG;oBACZ,IAAI,KAAK,GAAG;oBACZ,IAAI,KAAK,GAAG,EACZ;oBACA,CAAC,EAAE,CAAC;iBACL;gBAED,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,iBAAiB,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;gBAE5D,MAAM,CAAC,cAAc,GAAG;oBACtB,IAAI,EAAE,KAAK,CAAC,IAAI,GAAG,CAAC,GAAG,GAAG,CAAC,UAAU;oBACrC,GAAG,EAAE,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,SAAS;iBAC/B,CAAC;gBAEF,MAAM,CAAC,KAAK,GAAG,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAC1C,CAAC,EACD,iBAAiB,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAClC,CAAC;gBAEF,MAAM,CAAC,OAAO,GAAG;oBACf,GAAG,cAAc,CACf,KAAK,CAAC,mBAAmB,EAAE,EAC3B,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,cAAc,EAAE,EACtB,OAAO,CACR;oBACD,GAAG,CAAC,gBAAgB;wBAClB,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC;wBAClD,CAAC,CAAC,EAAE,CAAC;iBACR,CAAC;gBAEF,OAAO,MAAM,CAAC;aACf;SACF;KACF;SAAM;QACL,MAAM,CAAC,OAAO,GAAG,EAAE,CAAC;QACpB,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;KACnB;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport { directive, Directive, Part, PartInfo, PartType } from 'lit/directive';\nimport ExcellentParser, { Expression } from './ExcellentParser';\nimport {\n  CompletionOption,\n  CompletionProperty,\n  CompletionResult,\n  CompletionSchema,\n  CompletionType,\n  KeyedAssets,\n} from '../interfaces';\nimport { Store } from '../store/Store';\nimport { Remarkable } from 'remarkable';\n\nconst md = new Remarkable();\n\nconst messageParser = new ExcellentParser('@', [\n  'contact',\n  'fields',\n  'globals',\n  'urns',\n]);\n\nconst sessionParser = new ExcellentParser('@', [\n  'contact',\n  'fields',\n  'globals',\n  'urns',\n  'results',\n  'input',\n  'run',\n  'child',\n  'parent',\n  'node',\n  'webhook',\n  'ticket',\n  'trigger',\n  'resume',\n]);\n\n// Class-based directive API\nexport class RenderMarkdown extends Directive {\n  // State stored in class field\n  value: string | undefined;\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    // When necessary, validate part in constructor using `part.type`\n    if (partInfo.type !== PartType.CHILD) {\n      throw new Error('renderMarkdown only supports child expressions');\n    }\n  }\n  // Optional: override update to perform any direct DOM manipulation\n  // DirectiveParameters<this>\n  update(part: Part, [initialValue]: any) {\n    /* Any imperative updates to DOM/parts would go here */\n    return this.render(initialValue);\n  }\n  // Do SSR-compatible rendering (arguments are passed from call site)\n  render(initialValue: string) {\n    // Previous state available on class field\n    if (this.value === undefined) {\n      this.value = initialValue;\n    }\n    return html`${unsafeHTML(md.render(this.value))}`;\n  }\n}\n\nexport const renderMarkdown = directive(RenderMarkdown);\n\nexport const renderCompletionOption = (\n  option: CompletionOption,\n  selected: boolean\n): TemplateResult => {\n  if (option.signature) {\n    const argStart = option.signature.indexOf('(');\n    const name = option.signature.substr(0, argStart);\n    const args = option.signature.substr(argStart);\n\n    return html`\n      <div style=\"${selected ? 'font-weight: 400' : ''}\">\n        <div style=\"display:inline-block;margin-right: 5px\">ƒ</div>\n        <div style=\"display:inline-block\">${name}</div>\n        ${selected\n          ? html`\n              <div\n                style=\"display:inline-block; font-weight: 300; font-size: 85%\"\n              >\n                ${args}\n              </div>\n              <div class=\"detail\">${renderMarkdown(option.summary)}</div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  return html`\n    <div>\n      <div style=\"${selected ? 'font-weight: 400' : ''}\">${option.name}</div>\n      ${selected\n        ? html` <div style=\"font-size: 85%\">${option.summary}</div> `\n        : null}\n    </div>\n  `;\n};\n\nexport const getFunctions = (\n  functions: CompletionOption[],\n  query: string\n): CompletionOption[] => {\n  if (!query) {\n    return functions;\n  }\n  return functions.filter((option: CompletionOption) => {\n    if (option.signature) {\n      return option.signature.indexOf((query || '').toLowerCase()) === 0;\n    }\n    return false;\n  });\n};\n\n/**\n * Takes a dot query and returns the completions options at the current level\n * @param dotQuery query such as \"contact.first_n\"\n */\nexport const getCompletions = (\n  schema: CompletionSchema,\n  dotQuery: string,\n  keyedAssets: KeyedAssets = {},\n  session: boolean\n): CompletionOption[] => {\n  const parts = (dotQuery || '').split('.');\n  let currentProps: CompletionProperty[] = session\n    ? schema.root\n    : schema.root_no_session;\n\n  if (!currentProps) {\n    return [];\n  }\n\n  let prefix = '';\n  let part = '';\n  while (parts.length > 0) {\n    part = parts.shift();\n    if (part) {\n      // eslint-disable-next-line\n      const nextProp = currentProps.find(\n        (prop: CompletionProperty) => prop.key === part\n      );\n      if (nextProp) {\n        // eslint-disable-next-line\n        const nextType = schema.types.find(\n          (type: CompletionType) => type.name === nextProp.type\n        );\n        if (nextType && nextType.properties) {\n          currentProps = nextType.properties;\n          prefix += part + '.';\n        } else if (nextType && nextType.property_template) {\n          prefix += part + '.';\n          const template = nextType.property_template;\n          if (keyedAssets[nextType.name]) {\n            currentProps = keyedAssets[nextType.name].map((key: string) => ({\n              key: template.key.replace('{key}', key),\n              help: template.help.replace('{key}', key),\n              type: template.type,\n            }));\n          } else {\n            currentProps = [];\n          }\n        } else {\n          // eslint-disable-next-line\n          currentProps = currentProps.filter((prop: CompletionProperty) =>\n            prop.key.startsWith(part.toLowerCase())\n          );\n          break;\n        }\n      } else {\n        // eslint-disable-next-line\n        currentProps = currentProps.filter((prop: CompletionProperty) =>\n          prop.key.startsWith(part.toLowerCase())\n        );\n        break;\n      }\n    }\n  }\n\n  return currentProps.map((prop: CompletionProperty) => {\n    const name =\n      prop.key === '__default__'\n        ? prefix.substr(0, prefix.length - 1)\n        : prefix + prop.key;\n    return { name, summary: prop.help };\n  });\n};\n\nexport const getOffset = (el: HTMLElement) => {\n  const rect = el.getBoundingClientRect(),\n    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,\n    scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n  return { top: rect.top + scrollTop, left: rect.left + scrollLeft };\n};\n\nexport const getVerticalScroll = (ele: Node) => {\n  let current = ele;\n  const verticalScroll = 0;\n  while (current) {\n    current = current.parentNode;\n  }\n  return verticalScroll;\n};\n\nexport const getCompletionName = (option: CompletionOption): string => {\n  return (\n    option.name || option.signature.substr(0, option.signature.indexOf('('))\n  );\n};\n\nexport const getCompletionSignature = (option: CompletionOption): string => {\n  return option.signature.substr(option.signature.indexOf('('));\n};\n\n/**\n * Determines the pixel position of position inside a textarea or input\n * TODO: Explore somethign like contenteditable to avoid this madness\n * see: https://jh3y.medium.com/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a\n */\nconst getCursorXY = (input, selectionPoint) => {\n  const { offsetLeft: inputX, offsetTop: inputY } = input;\n  const div = document.createElement('div');\n  const copyStyle = getComputedStyle(input);\n  for (const prop of copyStyle) {\n    div.style[prop] = copyStyle[prop];\n  }\n  div.style.position = 'relative';\n  const swap = '.';\n  const inputValue =\n    input.tagName === 'INPUT' ? input.value.replace(/ /g, swap) : input.value;\n  const textContent = inputValue.substr(0, selectionPoint);\n  div.textContent = textContent;\n  if (input.tagName === 'TEXTAREA') div.style.height = 'auto';\n  if (input.tagName === 'INPUT') div.style.width = 'auto';\n  const span = document.createElement('span');\n  span.textContent = inputValue.substr(selectionPoint) || '.';\n  div.appendChild(span);\n  document.body.appendChild(div);\n  const { offsetLeft: spanX, offsetTop: spanY } = span;\n  document.body.removeChild(div);\n  return {\n    left: inputX + spanX,\n    top: inputY + spanY,\n  };\n};\n\nexport const updateInputElementWithCompletion = (\n  currentQuery: string,\n  ele: HTMLInputElement,\n  option: CompletionOption\n) => {\n  let insertText = '';\n\n  if (option.signature) {\n    // they selected a function\n    insertText = option.signature.substr(0, option.signature.indexOf('(') + 1);\n  } else {\n    insertText = option.name;\n  }\n\n  const queryLength = currentQuery.length;\n\n  if (ele) {\n    const value = ele.value;\n    const insertionPoint = ele.selectionStart - queryLength;\n\n    // strip out our query\n    // const insertionPoint = value.lastIndexOf(value.substring(0, this.inputElement.selectionStart));\n    const leftSide = value.substr(0, insertionPoint);\n    const remaining = value.substr(insertionPoint + queryLength);\n    const caret = leftSide.length + insertText.length;\n\n    // set our value and our new caret\n    ele.value = leftSide + insertText + remaining;\n    ele.setSelectionRange(caret, caret);\n\n    // now scroll our text box if necessary\n    const position = getCursorXY(ele, caret);\n    if (position.left > ele.width) {\n      ele.scrollLeft = position.left;\n    }\n\n    ele.dispatchEvent(new Event('input'));\n  }\n};\n\nexport const executeCompletionQuery = (\n  ele: HTMLInputElement,\n  store: Store,\n  session: boolean\n): CompletionResult => {\n  const result: CompletionResult = {\n    currentFunction: null,\n    options: [],\n    anchorPosition: null,\n    query: null,\n  };\n\n  // we need a store to do anything useful\n  if (!store) {\n    return result;\n  }\n\n  const cursor = ele.selectionStart;\n  const input = ele.value.substring(0, cursor);\n\n  const parser = session ? sessionParser : messageParser;\n  const expressions = parser.findExpressions(input);\n  const currentExpression = expressions.find(\n    (expr: Expression) =>\n      expr.start <= cursor &&\n      (expr.end > cursor || (expr.end === cursor && !expr.closed))\n  );\n\n  if (currentExpression) {\n    const includeFunctions = currentExpression.text.indexOf('(') > -1;\n    if (includeFunctions) {\n      const functionQuery = parser.functionContext(currentExpression.text);\n      if (functionQuery) {\n        const fns = getFunctions(store.getFunctions(), functionQuery);\n        if (fns.length > 0) {\n          result.currentFunction = fns[0];\n        }\n      }\n    }\n\n    for (let i = currentExpression.text.length; i >= 0; i--) {\n      const curr = currentExpression.text[i];\n      if (\n        curr === '@' ||\n        curr === '(' ||\n        curr === ' ' ||\n        curr === ',' ||\n        curr === ')' ||\n        i === 0\n      ) {\n        // don't include non-expression chars\n        if (\n          curr === '(' ||\n          curr === ' ' ||\n          curr === ',' ||\n          curr === ')' ||\n          curr === '@'\n        ) {\n          i++;\n        }\n\n        const caret = getCursorXY(ele, currentExpression.start + i);\n\n        result.anchorPosition = {\n          left: caret.left - 2 - ele.scrollLeft,\n          top: caret.top - ele.scrollTop,\n        };\n\n        result.query = currentExpression.text.substr(\n          i,\n          currentExpression.text.length - i\n        );\n\n        result.options = [\n          ...getCompletions(\n            store.getCompletionSchema(),\n            result.query,\n            store.getKeyedAssets(),\n            session\n          ),\n          ...(includeFunctions\n            ? getFunctions(store.getFunctions(), result.query)\n            : []),\n        ];\n\n        return result;\n      }\n    }\n  } else {\n    result.options = [];\n    result.query = '';\n  }\n  return result;\n};\n"]}

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

@@ -1,5 +1,6 @@
 import { __decorate } from "tslib";
-import { css, html, property } from 'lit-element';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators';
 import { RapidElement } from '../RapidElement';
 import { CustomEventType } from '../interfaces';
 import { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';
@@ -12,6 +13,7 @@ export class ContactChat extends RapidElement {
         this.currentChat = '';
         this.currentNote = '';
         this.showDetails = true;
+        this.toolbar = false;
         this.monitor = false;
         this.currentTicket = null;
         this.currentContact = null;
@@ -21,35 +23,36 @@ export class ContactChat extends RapidElement {
     }
     static get styles() {
         return css `
-      :host {
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2),
-          0 1px 2px 0 rgba(0, 0, 0, 0.06);
-
-        height: 100%;
-        border-radius: var(--curvature);
-
-        flex-grow: 1;
-        width: 100%;
-        display: block;
-        background: #f2f2f2;
-        overflow: hidden;
-      }
-
       .left-pane {
         box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);
         transition: box-shadow 600ms linear;
       }
 
       .left-pane.open {
-        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0.15);
         z-index: 1000;
       }
 
+      :host {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: row;
+        min-height: 0;
+        border-radius: var(--curvature);
+      }
+
       .chat-wrapper {
         display: flex;
+        flex-grow: 1;
         flex-direction: column;
-        height: 100%;
         overflow: hidden;
+        min-height: 0;
+      }
+
+      temba-contact-history {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
       }
 
       .chatbox {
@@ -60,6 +63,11 @@ export class ContactChat extends RapidElement {
         flex-direction: column;
         z-index: 3;
         border-bottom-left-radius: var(--curvature);
+        border-bottom-right-radius: var(--curvature);
+      }
+
+      .chatbox.full {
+        border-bottom-right-radius: 0 !important;
       }
 
       .closed-footer {
@@ -267,14 +275,13 @@ export class ContactChat extends RapidElement {
     }
     render() {
         return html `
-      <div style="display: flex; height: 100%;">
-        <div
-          style="flex-grow: 1; margin-right: 0em;"
-          class="left-pane  ${this.showDetails ? 'open' : ''}"
-        >
-          <div class="chat-wrapper">
-            ${this.currentContact
-            ? html ` <temba-contact-history
+      <div
+        style="flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;"
+        class="left-pane  ${this.showDetails ? 'open' : ''}"
+      >
+        <div class="chat-wrapper">
+          ${this.currentContact
+            ? html `<temba-contact-history
                     .uuid=${this.currentContact.uuid}
                     .contact=${this.currentContact}
                     .ticket=${this.currentTicket ? this.currentTicket.uuid : null}
@@ -290,7 +297,9 @@ export class ContactChat extends RapidElement {
                             @click=${this.handleReopen}
                           ></temba-button>
                         </div>`
-                : html ` <div class="chatbox">
+                : html ` <div
+                          class="chatbox ${this.toolbar ? 'full' : ''}"
+                        >
                           <temba-completion
                             @change=${this.handleChatChange}
                             .value=${this.currentChat}
@@ -316,76 +325,78 @@ export class ContactChat extends RapidElement {
                         </div>`}
                   </div>`
             : null}
-          </div>
         </div>
-        ${this.currentContact
-            ? html `<temba-contact-details
-              style="z-index: 10"
-              class="${this.showDetails ? '' : 'hidden'}"
-              showGroups="true"
-              .visible=${this.showDetails}
-              .ticket=${this.currentTicket}
-              .contact=${this.currentContact}
-            ></temba-contact-details>`
-            : null}
+      </div>
+
+      ${this.toolbar
+            ? html `${this.currentContact
+                ? html `<temba-contact-details
+                  style="z-index: 10"
+                  class="${this.showDetails ? '' : 'hidden'}"
+                  showGroups="true"
+                  .visible=${this.showDetails}
+                  .ticket=${this.currentTicket}
+                  .contact=${this.currentContact}
+                ></temba-contact-details>`
+                : null}
 
         <div class="toolbar ${this.showDetails ? '' : 'closed'}">
           ${this.currentContact
-            ? html `
-                <temba-tip
-                  style="margin-top:5px"
-                  text="${this.showDetails ? 'Hide Details' : 'Show Details'}"
-                  position="left"
-                  hideOnChange
-                >
-                  <temba-icon
-                    id="details-button"
-                    name="${this.showDetails ? 'chevrons-left' : 'sidebar'}"
-                    @click="${this.handleDetailSlider}"
-                    clickable
-                    animatechange="spin"
-                  ></temba-icon>
-                </temba-tip>
+                ? html `
+                  <temba-tip
+                    style="margin-top:5px"
+                    text="${this.showDetails ? 'Hide Details' : 'Show Details'}"
+                    position="left"
+                    hideOnChange
+                  >
+                    <temba-icon
+                      id="details-button"
+                      name="${this.showDetails ? 'chevrons-left' : 'sidebar'}"
+                      @click="${this.handleDetailSlider}"
+                      clickable
+                      animatechange="spin"
+                    ></temba-icon>
+                  </temba-tip>
 
-                ${this.currentTicket
-                ? html `<temba-tip
-                        style="margin-top:5px"
-                        text="Assign"
-                        position="left"
-                      >
-                        <temba-icon
-                          id="assign-button"
-                          name="user"
-                          @click="${() => {
-                    const modax = this.shadowRoot.getElementById('assign-dialog');
-                    modax.open = true;
-                }}"
-                          clickable
-                        ></temba-icon>
-                      </temba-tip>
-                      <temba-tip
-                        style="margin-top:5px"
-                        text="Add Note"
-                        position="left"
-                      >
-                        <temba-icon
-                          id="add-note-button"
-                          name="edit"
-                          @click="${() => {
-                    const note = this.shadowRoot.getElementById('note-dialog');
-                    note.open = true;
-                }}"
-                          clickable
-                        ></temba-icon>
-                      </temba-tip>`
+                  ${this.currentTicket
+                    ? html `<temba-tip
+                          style="margin-top:5px"
+                          text="Assign"
+                          position="left"
+                        >
+                          <temba-icon
+                            id="assign-button"
+                            name="user"
+                            @click="${() => {
+                        const modax = this.shadowRoot.getElementById('assign-dialog');
+                        modax.open = true;
+                    }}"
+                            clickable
+                          ></temba-icon>
+                        </temba-tip>
+                        <temba-tip
+                          style="margin-top:5px"
+                          text="Add Note"
+                          position="left"
+                        >
+                          <temba-icon
+                            id="add-note-button"
+                            name="edit"
+                            @click="${() => {
+                        const note = this.shadowRoot.getElementById('note-dialog');
+                        note.open = true;
+                    }}"
+                            clickable
+                          ></temba-icon>
+                        </temba-tip>`
+                    : null}
+                `
                 : null}
-              `
-            : null}
         </div>
       </div>
 
       ${this.currentTicket
-            ? html `<temba-modax
+                ? html `<temba-modax
               header="Add Note"
               id="note-dialog"
               @temba-submitted=${this.refresh}
@@ -397,6 +408,7 @@ export class ContactChat extends RapidElement {
               @temba-submitted=${this.handleTicketAssigned}
               endpoint="/ticket/assign/${this.currentTicket.uuid}/"
             /></temba-modax>`
+                : null}`
             : null}
     `;
     }
@@ -419,6 +431,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ContactChat.prototype, "showDetails", void 0);
+__decorate([
+    property({ type: Boolean })
+], ContactChat.prototype, "toolbar", void 0);
 __decorate([
     property({ type: Boolean })
 ], ContactChat.prototype, "monitor", void 0);

package/out-tsc/src/contacts/ContactChat.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, property, TemplateResult } from 'lit-element';\nimport { RapidElement } from '../RapidElement';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport { Completion } from '../completion/Completion';\nimport { ContactHistory } from './ContactHistory';\nimport { Modax } from '../dialog/Modax';\nimport { fetchContact } from './helpers';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends RapidElement {\n  public static get styles() {\n    return css`\n      :host {\n        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2),\n          0 1px 2px 0 rgba(0, 0, 0, 0.06);\n\n        height: 100%;\n        border-radius: var(--curvature);\n\n        flex-grow: 1;\n        width: 100%;\n        display: block;\n        background: #f2f2f2;\n        overflow: hidden;\n      }\n\n      .left-pane {\n        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);\n        transition: box-shadow 600ms linear;\n      }\n\n      .left-pane.open {\n        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0.15);\n        z-index: 1000;\n      }\n\n      .chat-wrapper {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        overflow: hidden;\n      }\n\n      .chatbox {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        z-index: 3;\n        border-bottom-left-radius: var(--curvature);\n      }\n\n      .closed-footer {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      temba-completion {\n        --textarea-height: 2.5em;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      a:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      temba-button#send-button {\n        --button-y: 1px;\n        --button-x: 12px;\n        margin-top: 0.8em;\n        align-self: flex-end;\n      }\n\n      temba-button#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      .toolbar {\n        position: relative;\n        width: 2.5em;\n        background: #e6e6e6;\n        transition: all 600ms ease-in;\n        z-index: 10;\n        flex-shrink: 0;\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        padding: 0.5em 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .toolbar temba-icon {\n        fill: rgb(60, 60, 60);\n        margin-bottom: 0.5em;\n      }\n\n      .toolbar.closed {\n        box-shadow: inset 10px 0px 10px -11px rgb(0 0 0 / 15%);\n      }\n\n      temba-contact-details {\n        flex-basis: 16em;\n        flex-grow: 0;\n        flex-shrink: 0;\n        transition: margin 600ms cubic-bezier(0.68, -0.55, 0.265, 1.05),\n          opacity 600ms ease-in-out 200ms;\n        z-index: 5;\n      }\n\n      temba-contact-details.hidden {\n        margin-right: -16em;\n        opacity: 0;\n      }\n\n      @media only screen and (max-width: 768px) {\n        temba-contact-details {\n          flex-basis: 12em;\n          flex-shrink: 0;\n        }\n\n        temba-contact-details.hidden {\n          margin-right: -12em;\n        }\n      }\n\n      #close-button,\n      #open-button {\n        margin-top: 1em;\n      }\n\n      #details-button {\n        margin-top: 0.25em;\n        transform: rotate(180deg);\n      }\n\n      #note-dialog,\n      #assign-dialog {\n        --header-bg: rgb(255, 249, 194);\n        --header-text: #555;\n        --textarea-height: 5em;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'contact' })\n  contactUUID: string;\n\n  @property({ type: String, attribute: 'ticket' })\n  ticketUUID: string;\n\n  @property({ type: String })\n  contactsEndpoint = '/api/v2/contacts.json';\n\n  @property({ type: String })\n  currentChat = '';\n\n  @property({ type: String })\n  currentNote = '';\n\n  @property({ type: Boolean })\n  showDetails = true;\n\n  @property({ type: Boolean })\n  monitor = false;\n\n  @property({ type: Object })\n  currentTicket: Ticket = null;\n\n  @property({ type: Object })\n  currentContact: Contact = null;\n\n  @property({ type: String })\n  agent = '';\n\n  constructor() {\n    super();\n    this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this.monitor) {\n      this.refreshInterval = setInterval(() => {\n        if (this.currentTicket && this.currentTicket.closed_on) {\n          return;\n        }\n        this.refresh();\n      }, DEFAULT_REFRESH);\n    }\n  }\n\n  public disconnectedCallback() {\n    if (this.refreshInterval) {\n      clearInterval(this.refreshInterval);\n    }\n  }\n\n  public getContactHistory(): ContactHistory {\n    return this.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as ContactHistory;\n  }\n\n  public refresh(scrollToBottom = false): void {\n    const contactHistory = this.getContactHistory();\n    if (contactHistory) {\n      if (scrollToBottom) {\n        contactHistory.scrollToBottom();\n      }\n      contactHistory.refresh();\n    }\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // we were provided a uuid, fetch our contact details\n    if (changedProperties.has('contactUUID') && this.contactUUID) {\n      fetchContact(this.contactsEndpoint + '?uuid=' + this.contactUUID).then(\n        contact => {\n          this.currentContact = contact;\n        }\n      );\n    }\n\n    // if we don't have an endpoint infer one\n    if (changedProperties.has('currentContact')) {\n      // focus our completion on load\n      const prevContact = changedProperties.get('contact');\n      if (\n        !prevContact ||\n        (this.currentContact &&\n          this.currentContact.ticket &&\n          this.currentContact.ticket.uuid !== prevContact.ticket.uuid)\n      ) {\n        const completion = this.shadowRoot.querySelector(\n          'temba-completion'\n        ) as Completion;\n        if (completion) {\n          window.setTimeout(() => {\n            completion.click();\n          }, 0);\n        }\n      }\n    }\n  }\n\n  private handleChatChange(event: Event) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const chat = event.currentTarget as TextInput;\n    this.currentChat = chat.value;\n  }\n\n  private handleReopen() {\n    const uuid = this.currentTicket.uuid;\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'reopen',\n    })\n      .then(() => {\n        this.refresh();\n        this.fireCustomEvent(CustomEventType.ContentChanged, {\n          ticket: { uuid, status: 'open' },\n        });\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  private handleSend() {\n    const payload = {\n      contacts: [this.currentContact.uuid],\n      text: this.currentChat,\n    };\n\n    if (this.currentTicket) {\n      payload['ticket'] = this.currentTicket.uuid;\n    }\n\n    postJSON(`/api/v2/broadcasts.json`, payload)\n      .then(() => {\n        this.currentChat = '';\n        this.refresh(true);\n      })\n      .catch(err => {\n        // error message dialog?\n        console.error(err);\n      });\n  }\n\n  private handleTicketAssigned() {\n    this.refresh();\n    this.getContactHistory().checkForAgentAssignmentEvent(this.agent);\n  }\n\n  private handleDetailSlider(): void {\n    this.showDetails = !this.showDetails;\n    setCookie(COOKIE_KEYS.TICKET_SHOW_DETAILS, this.showDetails);\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div style=\"display: flex; height: 100%;\">\n        <div\n          style=\"flex-grow: 1; margin-right: 0em;\"\n          class=\"left-pane  ${this.showDetails ? 'open' : ''}\"\n        >\n          <div class=\"chat-wrapper\">\n            ${this.currentContact\n              ? html` <temba-contact-history\n                    .uuid=${this.currentContact.uuid}\n                    .contact=${this.currentContact}\n                    .ticket=${\n                      this.currentTicket ? this.currentTicket.uuid : null\n                    }\n                    .endDate=${\n                      this.currentTicket ? this.currentTicket.closed_on : null\n                    }\n                    .agent=${this.agent}\n                  ></temba-contact-history>\n\n                  ${\n                    this.currentTicket && this.currentTicket.closed_on\n                      ? html`<div class=\"closed-footer\">\n                          <temba-button\n                            id=\"reopen-button\"\n                            name=\"Reopen\"\n                            @click=${this.handleReopen}\n                          ></temba-button>\n                        </div>`\n                      : html` <div class=\"chatbox\">\n                          <temba-completion\n                            @change=${this.handleChatChange}\n                            .value=${this.currentChat}\n                            @keydown=${(e: KeyboardEvent) => {\n                              if (e.key === 'Enter' && !e.shiftKey) {\n                                const chat = e.target as Completion;\n                                if (!chat.hasVisibleOptions()) {\n                                  this.handleSend();\n                                  e.preventDefault();\n                                  e.stopPropagation();\n                                }\n                              }\n                            }}\n                            textarea\n                          >\n                          </temba-completion>\n                          <temba-button\n                            id=\"send-button\"\n                            name=\"Send\"\n                            @click=${this.handleSend}\n                            ?disabled=${this.currentChat.trim().length === 0}\n                          ></temba-button>\n                        </div>`\n                  }\n                  </div>`\n              : null}\n          </div>\n        </div>\n        ${this.currentContact\n          ? html`<temba-contact-details\n              style=\"z-index: 10\"\n              class=\"${this.showDetails ? '' : 'hidden'}\"\n              showGroups=\"true\"\n              .visible=${this.showDetails}\n              .ticket=${this.currentTicket}\n              .contact=${this.currentContact}\n            ></temba-contact-details>`\n          : null}\n\n        <div class=\"toolbar ${this.showDetails ? '' : 'closed'}\">\n          ${this.currentContact\n            ? html`\n                <temba-tip\n                  style=\"margin-top:5px\"\n                  text=\"${this.showDetails ? 'Hide Details' : 'Show Details'}\"\n                  position=\"left\"\n                  hideOnChange\n                >\n                  <temba-icon\n                    id=\"details-button\"\n                    name=\"${this.showDetails ? 'chevrons-left' : 'sidebar'}\"\n                    @click=\"${this.handleDetailSlider}\"\n                    clickable\n                    animatechange=\"spin\"\n                  ></temba-icon>\n                </temba-tip>\n\n                ${this.currentTicket\n                  ? html`<temba-tip\n                        style=\"margin-top:5px\"\n                        text=\"Assign\"\n                        position=\"left\"\n                      >\n                        <temba-icon\n                          id=\"assign-button\"\n                          name=\"user\"\n                          @click=\"${() => {\n                            const modax = this.shadowRoot.getElementById(\n                              'assign-dialog'\n                            ) as Modax;\n                            modax.open = true;\n                          }}\"\n                          clickable\n                        ></temba-icon>\n                      </temba-tip>\n                      <temba-tip\n                        style=\"margin-top:5px\"\n                        text=\"Add Note\"\n                        position=\"left\"\n                      >\n                        <temba-icon\n                          id=\"add-note-button\"\n                          name=\"edit\"\n                          @click=\"${() => {\n                            const note = this.shadowRoot.getElementById(\n                              'note-dialog'\n                            ) as Modax;\n                            note.open = true;\n                          }}\"\n                          clickable\n                        ></temba-icon>\n                      </temba-tip>`\n                  : null}\n              `\n            : null}\n        </div>\n      </div>\n\n      ${this.currentTicket\n        ? html`<temba-modax\n              header=\"Add Note\"\n              id=\"note-dialog\"\n              @temba-submitted=${this.refresh}\n              endpoint=\"/ticket/note/${this.currentTicket.uuid}/\"\n            ></temba-modax>\n            <temba-modax\n              header=\"Assign Ticket\"\n              id=\"assign-dialog\"\n              @temba-submitted=${this.handleTicketAssigned}\n              endpoint=\"/ticket/assign/${this.currentTicket.uuid}/\"\n            /></temba-modax>`\n        : null}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport { Completion } from '../completion/Completion';\nimport { ContactHistory } from './ContactHistory';\nimport { Modax } from '../dialog/Modax';\nimport { fetchContact } from './helpers';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends RapidElement {\n  public static get styles() {\n    return css`\n      .left-pane {\n        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);\n        transition: box-shadow 600ms linear;\n      }\n\n      .left-pane.open {\n        z-index: 1000;\n      }\n\n      :host {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: row;\n        min-height: 0;\n        border-radius: var(--curvature);\n      }\n\n      .chat-wrapper {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        overflow: hidden;\n        min-height: 0;\n      }\n\n      temba-contact-history {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .chatbox {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        z-index: 3;\n        border-bottom-left-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .chatbox.full {\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .closed-footer {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      temba-completion {\n        --textarea-height: 2.5em;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      a:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      temba-button#send-button {\n        --button-y: 1px;\n        --button-x: 12px;\n        margin-top: 0.8em;\n        align-self: flex-end;\n      }\n\n      temba-button#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      .toolbar {\n        position: relative;\n        width: 2.5em;\n        background: #e6e6e6;\n        transition: all 600ms ease-in;\n        z-index: 10;\n        flex-shrink: 0;\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        padding: 0.5em 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .toolbar temba-icon {\n        fill: rgb(60, 60, 60);\n        margin-bottom: 0.5em;\n      }\n\n      .toolbar.closed {\n        box-shadow: inset 10px 0px 10px -11px rgb(0 0 0 / 15%);\n      }\n\n      temba-contact-details {\n        flex-basis: 16em;\n        flex-grow: 0;\n        flex-shrink: 0;\n        transition: margin 600ms cubic-bezier(0.68, -0.55, 0.265, 1.05),\n          opacity 600ms ease-in-out 200ms;\n        z-index: 5;\n      }\n\n      temba-contact-details.hidden {\n        margin-right: -16em;\n        opacity: 0;\n      }\n\n      @media only screen and (max-width: 768px) {\n        temba-contact-details {\n          flex-basis: 12em;\n          flex-shrink: 0;\n        }\n\n        temba-contact-details.hidden {\n          margin-right: -12em;\n        }\n      }\n\n      #close-button,\n      #open-button {\n        margin-top: 1em;\n      }\n\n      #details-button {\n        margin-top: 0.25em;\n        transform: rotate(180deg);\n      }\n\n      #note-dialog,\n      #assign-dialog {\n        --header-bg: rgb(255, 249, 194);\n        --header-text: #555;\n        --textarea-height: 5em;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'contact' })\n  contactUUID: string;\n\n  @property({ type: String, attribute: 'ticket' })\n  ticketUUID: string;\n\n  @property({ type: String })\n  contactsEndpoint = '/api/v2/contacts.json';\n\n  @property({ type: String })\n  currentChat = '';\n\n  @property({ type: String })\n  currentNote = '';\n\n  @property({ type: Boolean })\n  showDetails = true;\n\n  @property({ type: Boolean })\n  toolbar = false;\n\n  @property({ type: Boolean })\n  monitor = false;\n\n  @property({ type: Object })\n  currentTicket: Ticket = null;\n\n  @property({ type: Object })\n  currentContact: Contact = null;\n\n  @property({ type: String })\n  agent = '';\n\n  constructor() {\n    super();\n    this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this.monitor) {\n      this.refreshInterval = setInterval(() => {\n        if (this.currentTicket && this.currentTicket.closed_on) {\n          return;\n        }\n        this.refresh();\n      }, DEFAULT_REFRESH);\n    }\n  }\n\n  public disconnectedCallback() {\n    if (this.refreshInterval) {\n      clearInterval(this.refreshInterval);\n    }\n  }\n\n  public getContactHistory(): ContactHistory {\n    return this.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as ContactHistory;\n  }\n\n  public refresh(scrollToBottom = false): void {\n    const contactHistory = this.getContactHistory();\n    if (contactHistory) {\n      if (scrollToBottom) {\n        contactHistory.scrollToBottom();\n      }\n      contactHistory.refresh();\n    }\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // we were provided a uuid, fetch our contact details\n    if (changedProperties.has('contactUUID') && this.contactUUID) {\n      fetchContact(this.contactsEndpoint + '?uuid=' + this.contactUUID).then(\n        contact => {\n          this.currentContact = contact;\n        }\n      );\n    }\n\n    // if we don't have an endpoint infer one\n    if (changedProperties.has('currentContact')) {\n      // focus our completion on load\n      const prevContact = changedProperties.get('contact');\n      if (\n        !prevContact ||\n        (this.currentContact &&\n          this.currentContact.ticket &&\n          this.currentContact.ticket.uuid !== prevContact.ticket.uuid)\n      ) {\n        const completion = this.shadowRoot.querySelector(\n          'temba-completion'\n        ) as Completion;\n        if (completion) {\n          window.setTimeout(() => {\n            completion.click();\n          }, 0);\n        }\n      }\n    }\n  }\n\n  private handleChatChange(event: Event) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const chat = event.currentTarget as TextInput;\n    this.currentChat = chat.value;\n  }\n\n  private handleReopen() {\n    const uuid = this.currentTicket.uuid;\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'reopen',\n    })\n      .then(() => {\n        this.refresh();\n        this.fireCustomEvent(CustomEventType.ContentChanged, {\n          ticket: { uuid, status: 'open' },\n        });\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  private handleSend() {\n    const payload = {\n      contacts: [this.currentContact.uuid],\n      text: this.currentChat,\n    };\n\n    if (this.currentTicket) {\n      payload['ticket'] = this.currentTicket.uuid;\n    }\n\n    postJSON(`/api/v2/broadcasts.json`, payload)\n      .then(() => {\n        this.currentChat = '';\n        this.refresh(true);\n      })\n      .catch(err => {\n        // error message dialog?\n        console.error(err);\n      });\n  }\n\n  private handleTicketAssigned() {\n    this.refresh();\n    this.getContactHistory().checkForAgentAssignmentEvent(this.agent);\n  }\n\n  private handleDetailSlider(): void {\n    this.showDetails = !this.showDetails;\n    setCookie(COOKIE_KEYS.TICKET_SHOW_DETAILS, this.showDetails);\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        style=\"flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;\"\n        class=\"left-pane  ${this.showDetails ? 'open' : ''}\"\n      >\n        <div class=\"chat-wrapper\">\n          ${this.currentContact\n            ? html`<temba-contact-history\n                    .uuid=${this.currentContact.uuid}\n                    .contact=${this.currentContact}\n                    .ticket=${\n                      this.currentTicket ? this.currentTicket.uuid : null\n                    }\n                    .endDate=${\n                      this.currentTicket ? this.currentTicket.closed_on : null\n                    }\n                    .agent=${this.agent}\n                  ></temba-contact-history>\n\n                  ${\n                    this.currentTicket && this.currentTicket.closed_on\n                      ? html`<div class=\"closed-footer\">\n                          <temba-button\n                            id=\"reopen-button\"\n                            name=\"Reopen\"\n                            @click=${this.handleReopen}\n                          ></temba-button>\n                        </div>`\n                      : html` <div\n                          class=\"chatbox ${this.toolbar ? 'full' : ''}\"\n                        >\n                          <temba-completion\n                            @change=${this.handleChatChange}\n                            .value=${this.currentChat}\n                            @keydown=${(e: KeyboardEvent) => {\n                              if (e.key === 'Enter' && !e.shiftKey) {\n                                const chat = e.target as Completion;\n                                if (!chat.hasVisibleOptions()) {\n                                  this.handleSend();\n                                  e.preventDefault();\n                                  e.stopPropagation();\n                                }\n                              }\n                            }}\n                            textarea\n                          >\n                          </temba-completion>\n                          <temba-button\n                            id=\"send-button\"\n                            name=\"Send\"\n                            @click=${this.handleSend}\n                            ?disabled=${this.currentChat.trim().length === 0}\n                          ></temba-button>\n                        </div>`\n                  }\n                  </div>`\n            : null}\n        </div>\n      </div>\n\n      ${this.toolbar\n        ? html`${\n            this.currentContact\n              ? html`<temba-contact-details\n                  style=\"z-index: 10\"\n                  class=\"${this.showDetails ? '' : 'hidden'}\"\n                  showGroups=\"true\"\n                  .visible=${this.showDetails}\n                  .ticket=${this.currentTicket}\n                  .contact=${this.currentContact}\n                ></temba-contact-details>`\n              : null\n          }\n\n        <div class=\"toolbar ${this.showDetails ? '' : 'closed'}\">\n          ${\n            this.currentContact\n              ? html`\n                  <temba-tip\n                    style=\"margin-top:5px\"\n                    text=\"${this.showDetails ? 'Hide Details' : 'Show Details'}\"\n                    position=\"left\"\n                    hideOnChange\n                  >\n                    <temba-icon\n                      id=\"details-button\"\n                      name=\"${this.showDetails ? 'chevrons-left' : 'sidebar'}\"\n                      @click=\"${this.handleDetailSlider}\"\n                      clickable\n                      animatechange=\"spin\"\n                    ></temba-icon>\n                  </temba-tip>\n\n                  ${this.currentTicket\n                    ? html`<temba-tip\n                          style=\"margin-top:5px\"\n                          text=\"Assign\"\n                          position=\"left\"\n                        >\n                          <temba-icon\n                            id=\"assign-button\"\n                            name=\"user\"\n                            @click=\"${() => {\n                              const modax = this.shadowRoot.getElementById(\n                                'assign-dialog'\n                              ) as Modax;\n                              modax.open = true;\n                            }}\"\n                            clickable\n                          ></temba-icon>\n                        </temba-tip>\n                        <temba-tip\n                          style=\"margin-top:5px\"\n                          text=\"Add Note\"\n                          position=\"left\"\n                        >\n                          <temba-icon\n                            id=\"add-note-button\"\n                            name=\"edit\"\n                            @click=\"${() => {\n                              const note = this.shadowRoot.getElementById(\n                                'note-dialog'\n                              ) as Modax;\n                              note.open = true;\n                            }}\"\n                            clickable\n                          ></temba-icon>\n                        </temba-tip>`\n                    : null}\n                `\n              : null\n          }\n        </div>\n      </div>\n\n      ${\n        this.currentTicket\n          ? html`<temba-modax\n              header=\"Add Note\"\n              id=\"note-dialog\"\n              @temba-submitted=${this.refresh}\n              endpoint=\"/ticket/note/${this.currentTicket.uuid}/\"\n            ></temba-modax>\n            <temba-modax\n              header=\"Assign Ticket\"\n              id=\"assign-dialog\"\n              @temba-submitted=${this.handleTicketAssigned}\n              endpoint=\"/ticket/assign/${this.currentTicket.uuid}/\"\n            /></temba-modax>`\n          : null\n      }`\n        : null}\n    `;\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactDetails.js

@@ -1,5 +1,6 @@
 import { __decorate } from "tslib";
-import { css, html, property } from 'lit-element';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators';
 import { RapidElement } from '../RapidElement';
 import { isDate, timeSince, truncate } from '../utils';
 import { BODY_SNIPPET_LENGTH, fetchContact } from './helpers';