@nyaruka/temba-components 0.113.0 → 0.114.0

package/out-tsc/src/compose/Compose.js.map

@@ -1 +1 @@
-{"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/compose/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Attachment, CustomEventType, Language, Shortcut } from '../interfaces';\nimport { DEFAULT_MEDIA_ENDPOINT, getClasses } from '../utils';\nimport { Completion } from '../completion/Completion';\nimport { Select } from '../select/Select';\nimport { TabPane } from '../tabpane/TabPane';\nimport { MediaPicker } from '../mediapicker/MediaPicker';\nimport { Tab } from '../tabpane/Tab';\nimport { TextInput } from '../textinput/TextInput';\nimport { ShortcutList } from '../list/ShortcutList';\n\nexport interface ComposeValue {\n  text: string;\n  attachments: { uuid: string }[];\n  quick_replies: string[];\n  optin: string;\n  template: string;\n  variables: string[];\n}\n\nexport class Compose extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        overflow: hidden;\n        border-top-right-radius: var(--curvature);\n        border-top-left-radius: var(--curvature);\n      }\n\n      .active-template .chatbox {\n        display: none;\n      }\n\n      .active-template .actions {\n        border: none;\n      }\n\n      .container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        position: relative;\n        overflow: hidden;\n        border-radius: var(--compose-curvature, var(--curvature-widget));\n        background: var(--color-widget-bg);\n        border: var(--compose-border, 1px solid var(--color-widget-border));\n        transition: all ease-in-out var(--transition-speed);\n        box-shadow: var(--compose-shadow, var(--widget-box-shadow));\n        caret-color: var(--input-caret);\n        --color-widget-bg-focused: transparent;\n        --color-widget-bg: transparent;\n      }\n\n      .chatbox {\n        --color-widget-border: none;\n        --curvature-widget: var(\n          --compose-curvature,\n          var(--curvature) var(--curvature) 0px 0px\n        );\n\n        --widget-box-shadow: none;\n        display: block;\n        flex-grow: 1;\n        --widget-box-shadow-focused: none;\n        --temba-textinput-padding: 1em 1em;\n      }\n\n      .actions {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 0em;\n        background: #f9f9f9;\n      }\n\n      .actions-right {\n        display: flex;\n        align-items: center;\n      }\n\n      temba-charcount {\n        margin-right: 5px;\n        overflow: hidden;\n        --temba-charcount-counts-margin-top: 0px;\n        --temba-charcount-summary-margin-top: 0px;\n        --temba-charcount-summary-position: fixed;\n        --temba-charcount-summary-right: 105px;\n        --temba-charcount-summary-bottom: 105px;\n      }\n\n      .send-error {\n        color: rgba(250, 0, 0, 0.75);\n        font-size: var(--help-text-size);\n        padding: 0.5em;\n      }\n\n      .language {\n        margin-bottom: 0.6em;\n        display: block;\n      }\n\n      .top-right {\n        align-items: center;\n        display: flex;\n      }\n\n      .gutter {\n        align-items: center;\n        display: flex;\n        margin: 0.5em;\n      }\n\n      temba-tabs {\n        --focused-tab-color: #f4f4f4;\n        min-height: var(--compose-min-height, 13.5em);\n      }\n\n      .quick-replies {\n        margin: 0.8em;\n      }\n\n      .optins {\n        margin: 0.8em;\n      }\n\n      .templates {\n        margin: 0.8em;\n      }\n\n      .attachments {\n        min-height: 5em;\n        padding: 0.2em;\n        align-items: center;\n        display: flex;\n        background: #f9f9f9;\n        border-radius: var(--curvature);\n        margin: 0.6em;\n        margin-bottom: 0em;\n      }\n\n      .pane-bottom {\n        border: 0px solid red;\n        --color-placeholder: rgba(0, 0, 0, 0.2);\n        flex-grow: 99;\n      }\n\n      .shortcut-wrapper {\n        max-height: var(--shortcuts-height, 12em);\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n        --options-block-shadow: none;\n        --curvature-widget: 0px;\n        --color-options-bg: #fff;\n        border-bottom: 1px solid var(--color-widget-border);\n      }\n\n      temba-shortcuts {\n        flex-grow: 1;\n      }\n\n      .quick-replies {\n        background: #f9f9f9;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  index = 1;\n\n  @property({ type: Number })\n  maxAttachments = 3;\n\n  @property({ type: Number })\n  maxLength = 640;\n\n  @property({ type: Boolean })\n  completion: boolean;\n\n  @property({ type: Boolean })\n  attachments: boolean;\n\n  @property({ type: Boolean })\n  quickReplies: boolean;\n\n  @property({ type: Boolean })\n  optIns: boolean;\n\n  @property({ type: Boolean })\n  templates: boolean;\n\n  @property({ type: Boolean })\n  counter: boolean;\n\n  @property({ type: Boolean })\n  autogrow: boolean;\n\n  @property({ type: Boolean })\n  shortcuts: boolean;\n\n  @property({ type: String })\n  currentText = '';\n\n  @property({ type: String })\n  initialText = '';\n\n  @property({ type: String })\n  accept = ''; //e.g. \".xls,.xlsx\"\n\n  @property({ type: String, attribute: false })\n  endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n  @property({ type: Boolean, attribute: false })\n  uploading: boolean;\n\n  @property({ type: Array })\n  languages: Language[] = [];\n\n  @property({ type: Array })\n  currentAttachments: Attachment[] = [];\n\n  @property({ type: Array })\n  currentQuickReplies: { name: string; value: string }[] = [];\n\n  @property({ type: Array })\n  currentOptin: { name: string; uuid: string }[] = [];\n\n  @property({ type: Array })\n  variables: string[] = [];\n\n  @property({ type: String })\n  template: string;\n\n  @property({ type: Object })\n  currentTemplate: { name: string; uuid: string };\n\n  // locale for the template\n  @property({ type: String })\n  locale: string;\n\n  @property({ type: String })\n  optinEndpoint = '/api/v2/optins.json';\n\n  @property({ type: String })\n  templateEndpoint = '/api/internal/templates.json';\n\n  @property({ type: Boolean, attribute: false })\n  empty = true;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property({ type: Object })\n  langValues: {\n    [lang: string]: {\n      text: string;\n      attachments: Attachment[];\n      quick_replies: string[];\n      optin?: { name: string; uuid: string };\n      template?: string;\n      variables?: string[];\n      locale?: string;\n    };\n  } = {};\n\n  @property({ type: String })\n  currentLanguage = 'und';\n\n  @property({ type: Object })\n  currentTab: Tab;\n\n  @property({ type: Boolean })\n  hasPendingText = false;\n\n  @property({ type: Object })\n  activeShortcut: Shortcut;\n\n  public constructor() {\n    super();\n  }\n\n  private isBaseLanguage(): boolean {\n    return (\n      this.currentLanguage == 'und' ||\n      this.currentLanguage == this.languages[0].iso\n    );\n  }\n\n  private handleTabChanged() {\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    this.currentTab = tabs.getCurrentTab();\n    if (this.currentTab && this.currentTab.name === 'Shortcuts') {\n      const shortcuts = this.shadowRoot.querySelector(\n        'temba-shortcuts'\n      ) as ShortcutList;\n      shortcuts.filter = '';\n    }\n    this.setFocusOnChatbox();\n  }\n\n  public firstUpdated(changes: Map<string, any>): void {\n    super.firstUpdated(changes);\n\n    if (changes.has('languages') && this.languages.length > 0) {\n      this.currentLanguage = this.languages[0].iso;\n    }\n\n    if (changes.has('value')) {\n      this.langValues = this.getDeserializedValue() || {};\n      this.variables = this.langValues[this.currentLanguage]?.variables || [];\n      this.template = this.langValues[this.currentLanguage]?.template || null;\n    }\n    this.setFocusOnChatbox();\n  }\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n\n    if (changes.has('currentLanguage') && this.langValues) {\n      let langValue = {\n        text: '',\n        attachments: [],\n        quick_replies: []\n      };\n\n      if (this.currentLanguage in this.langValues) {\n        langValue = this.langValues[this.currentLanguage];\n      }\n\n      this.currentText = langValue.text;\n      this.initialText = langValue.text;\n      this.currentAttachments = langValue.attachments;\n      this.currentQuickReplies = (langValue.quick_replies || []).map(\n        (value) => {\n          return { name: value, value };\n        }\n      );\n      this.currentOptin = langValue['optin'] ? [langValue['optin']] : [];\n      this.setFocusOnChatbox();\n\n      // TODO: this feels like it shouldn't be needed\n      const chatbox = this.shadowRoot.querySelector('.chatbox') as any;\n      if (chatbox) {\n        chatbox.value = this.initialText;\n      }\n      this.resetTabs();\n      this.requestUpdate('currentAttachments');\n    }\n\n    if (\n      (this.langValues &&\n        (changes.has('currentText') ||\n          changes.has('currentAttachments') ||\n          changes.has('currentQuickReplies'))) ||\n      changes.has('currentOptin') ||\n      changes.has('currentTemplate') ||\n      changes.has('variables')\n    ) {\n      this.checkIfEmpty();\n\n      const trimmed = this.currentText ? this.currentText.trim() : '';\n      if (\n        trimmed ||\n        (this.currentAttachments || []).length > 0 ||\n        this.currentQuickReplies.length > 0 ||\n        this.variables.length > 0\n      ) {\n        this.langValues[this.currentLanguage] = {\n          text: trimmed,\n          attachments: this.currentAttachments,\n          quick_replies: this.currentQuickReplies.map((option) => option.value),\n          optin: this.currentOptin.length > 0 ? this.currentOptin[0] : null,\n          template: this.currentTemplate ? this.currentTemplate.uuid : null,\n          variables: this.variables,\n          locale: this.locale\n        };\n      } else {\n        delete this.langValues[this.currentLanguage];\n      }\n      this.fireCustomEvent(CustomEventType.ContentChanged, this.langValues);\n      this.requestUpdate('langValues');\n      this.setValue(this.langValues);\n    }\n  }\n\n  private handleAttachmentsChanged(event: CustomEvent) {\n    const media = event.target as MediaPicker;\n    this.currentAttachments = media.attachments;\n    this.requestUpdate();\n  }\n\n  private setFocusOnChatbox(): void {\n    const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n    if (completion) {\n      window.setTimeout(() => {\n        completion.focus();\n      }, 0);\n    }\n  }\n\n  public reset(): void {\n    const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n    if (completion) {\n      completion.textInputElement.value = '';\n      completion.value = '';\n      this.initialText = '';\n      this.currentText = '';\n      this.currentQuickReplies = [];\n      this.currentAttachments = [];\n      this.resetTabs();\n    }\n  }\n\n  private handleQuickReplyChange() {\n    this.requestUpdate('currentQuickReplies');\n  }\n\n  private handleOptInChange(event: InputEvent) {\n    this.currentOptin = (event.target as any).values;\n    this.requestUpdate('optIn');\n  }\n\n  private handleChatboxChange(evt: Event) {\n    const chatbox = evt.target as Completion;\n    const inputElement = chatbox.getTextInput().inputElement;\n\n    this.currentText = inputElement.value;\n    this.hasPendingText = inputElement.value.length > 0;\n\n    // is the last character a / and is it at the beginning of the line\n    const cursor = inputElement.selectionStart;\n    const text = inputElement.value;\n    const lineStart = text.lastIndexOf('\\n', cursor - 1) + 1;\n    const line = text.substring(lineStart, cursor);\n\n    if (line.startsWith('/')) {\n      // switch to the shortcuts tab\n      if (this.currentTab.name !== 'Shortcuts') {\n        this.getTabs().focusTab('Shortcuts');\n      }\n      const shortcuts = this.shadowRoot.querySelector(\n        'temba-shortcuts'\n      ) as ShortcutList;\n      shortcuts.filter = line.substring(1);\n    }\n  }\n\n  public checkIfEmpty() {\n    const chatboxEmpty = this.currentText.trim().length === 0;\n    const attachmentsEmpty = this.currentAttachments.length === 0;\n    if (this.attachments) {\n      this.empty = chatboxEmpty && attachmentsEmpty;\n    } else {\n      this.empty = chatboxEmpty;\n    }\n  }\n\n  private getCurrentLine(): { text: string; index: number } {\n    const chatbox = this.shadowRoot.querySelector('.chatbox') as Completion;\n\n    const cursor = chatbox.getTextInput().inputElement.selectionStart - 1;\n    const text = chatbox.value;\n    const start = text.substring(0, cursor).lastIndexOf('\\n') + 1;\n\n    let end = chatbox.value.indexOf('\\n', start);\n    if (end === -1) {\n      end = chatbox.value.length;\n    }\n\n    return { text: chatbox.value.substring(start, end), index: start };\n  }\n\n  private handleKeyDown(evt: KeyboardEvent) {\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    const num = parseInt(evt.key);\n    if (\n      !Number.isNaN(num) &&\n      num > 0 &&\n      evt.ctrlKey &&\n      evt.metaKey &&\n      num <= tabs.tabs.length\n    ) {\n      tabs.index = num - 1;\n    }\n\n    if (evt.key === 'Backspace') {\n      const line = this.getCurrentLine();\n      const text = line.text;\n      if (text === '/') {\n        tabs.focusTab('Reply');\n      }\n    }\n\n    if (this.currentTab.name === 'Shortcuts') {\n      if (evt.key === 'Enter' && !evt.shiftKey) {\n        return;\n      }\n    }\n\n    if (evt.key === 'Enter') {\n      if (!evt.shiftKey) {\n        evt.preventDefault();\n        if (this.completion) {\n          const chat = evt.target as Completion;\n          if (!chat.hasVisibleOptions()) {\n            this.triggerSend();\n          }\n        } else {\n          this.triggerSend();\n        }\n      }\n    }\n  }\n\n  public triggerSend() {\n    if (!this.empty) {\n      this.fireCustomEvent(CustomEventType.Submitted, {\n        langValues: this.langValues\n      });\n    }\n  }\n\n  private handleLanguageChange(evt: Event) {\n    const select = evt.target as Select;\n    this.currentLanguage = select.values[0].iso;\n  }\n\n  public resetTabs() {\n    this.getTabs().focusTab('Reply');\n  }\n\n  public getTabs(): TabPane {\n    return this.shadowRoot.querySelector('temba-tabs') as TabPane;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <temba-field\n        name=${this.name}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .value=${this.value}\n        class=${getClasses({\n          'active-template':\n            !!this.currentTemplate &&\n            this.currentTab &&\n            this.currentTab.name === 'Template'\n        })}\n      >\n        ${this.languages.length > 1\n          ? html`<temba-select\n              @change=${this.handleLanguageChange}\n              class=\"language\"\n              name=\"language\"\n              .staticOptions=${this.languages}\n              valueKey=\"iso\"\n            >\n            </temba-select>`\n          : null}\n        <div class=\"container\">\n          <div class=\"items actions\">${this.getActions()}</div>\n        </div>\n      </temba-field>\n    `;\n  }\n\n  private handleTemplateChanged(evt: CustomEvent) {\n    this.currentTemplate = evt.detail.template;\n    this.locale = evt.detail.translation?.locale;\n    this.requestUpdate();\n  }\n\n  private handleTemplateVariablesChanged(evt: CustomEvent) {\n    this.variables = [...evt.detail.variables];\n  }\n\n  public getTextInput(): TextInput {\n    return (\n      this.shadowRoot.querySelector('.chatbox') as Completion\n    ).getTextInput();\n  }\n\n  public handleShortcutSelection(event: CustomEvent) {\n    this.activeShortcut = event.detail.selected;\n    const line = this.getCurrentLine();\n    const chatbox = this.getTextInput();\n\n    const originalText = chatbox.value;\n\n    if (line.text.startsWith('/')) {\n      const newText =\n        originalText.substring(0, line.index) +\n        this.activeShortcut.text +\n        originalText.substring(line.index + line.text.length);\n\n      chatbox.updateValue(newText);\n\n      // set our cursor to the end of the shortcut\n      const cursor = line.index + this.activeShortcut.text.length;\n      chatbox.inputElement.setSelectionRange(cursor, cursor);\n    } else {\n      // add the text where the cursor is\n      const cursor = chatbox.inputElement.selectionStart;\n      const newText =\n        originalText.substring(0, cursor) +\n        this.activeShortcut.text +\n        originalText.substring(cursor);\n      chatbox.updateValue(newText);\n\n      // set the cursor to the end of the shortcut text\n      const newCursor = cursor + this.activeShortcut.text.length;\n      chatbox.inputElement.setSelectionRange(newCursor, newCursor);\n    }\n\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Reply');\n  }\n\n  private getActions(): TemplateResult {\n    const showOptins = this.optIns && this.isBaseLanguage();\n    const showTemplates = this.templates && this.isBaseLanguage();\n    return html`\n      <temba-tabs\n        embedded\n        focusedname\n        @temba-context-changed=${this.handleTabChanged}\n        refresh=\"${(this.currentAttachments || []).length}|${this.index}|${this\n          .currentQuickReplies.length}|${showOptins}|${this\n          .currentOptin}|${showTemplates}|${this.currentTemplate}\"\n      >\n        <temba-tab\n          name=\"Reply\"\n          icon=\"message\"\n          selectionBackground=\"#fff\"\n        ></temba-tab>\n        ${this.attachments\n          ? html`<temba-tab\n              name=\"Attachments\"\n              icon=\"attachment\"\n              selectionBackground=\"#fff\"\n              .count=${(this.currentAttachments || []).length}\n            >\n              <div class=\"items attachments\">\n                <temba-media-picker\n                  accept=${this.accept}\n                  max=${this.maxAttachments}\n                  attachments=${JSON.stringify(this.currentAttachments || [])}\n                  @change=${this.handleAttachmentsChanged.bind(this)}\n                ></temba-media-picker>\n              </div>\n            </temba-tab>`\n          : null}\n        ${this.quickReplies\n          ? html`<temba-tab\n              name=\"Quick Replies\"\n              icon=\"quick_replies\"\n              selectionBackground=\"#fff\"\n              .count=${this.currentQuickReplies.length}\n            >\n              <temba-select\n                class=\"quick-replies\"\n                @change=${this.handleQuickReplyChange}\n                .values=${this.currentQuickReplies}\n                class=\"quick-replies\"\n                tags\n                multi\n                searchable\n                expressions\n                placeholder=\"Add Quick Reply\"\n              ></temba-select>\n            </temba-tab>`\n          : null}\n        ${showOptins\n          ? html`<temba-tab\n              name=\"Opt-in\"\n              icon=\"channel_fba\"\n              selectionBackground=\"#fff\"\n              ?hidden=${!showOptins}\n              ?checked=${this.currentOptin.length > 0}\n            >\n              <temba-select\n                @change=${this.handleOptInChange}\n                .values=${this.currentOptin}\n                endpoint=\"${this.optinEndpoint}\"\n                class=\"optins\"\n                searchable\n                clearable\n                placeholder=\"Select an opt-in to use for Facebook (optional)\"\n              ></temba-select>\n            </temba-tab>`\n          : null}\n        ${showTemplates\n          ? html`<temba-tab\n              name=\"Template\"\n              icon=\"channel_wa\"\n              selectionBackground=\"#fff\"\n              ?alert=${this.errors &&\n              this.errors.find((error) => error.includes('template'))}\n              ?hidden=${!showTemplates}\n              ?checked=${this.currentTemplate}\n            >\n              <temba-template-editor\n                class=\"templates\"\n                @temba-context-changed=${this.handleTemplateChanged}\n                @temba-content-changed=${this.handleTemplateVariablesChanged}\n                template=${this.template}\n                variables=${JSON.stringify(this.variables)}\n                url=${this.templateEndpoint}\n                lang=${this.currentLanguage}\n              >\n              </temba-template-editor>\n            </temba-tab>`\n          : null}\n\n        <!--temba-tab\n          name=\"Note\"\n          icon=\"notes\"\n          activityColor=\"#ffbd00\"\n          selectionBackground=\"#fff9c2\"\n          borderColor=\"#ebdf6f\"\n        ></temba-tab-->\n\n        ${this.shortcuts\n          ? html`<temba-tab\n              name=\"Shortcuts\"\n              icon=\"shortcut\"\n              selectionBackground=\"#fff\"\n            >\n              <div class=\"shortcut-wrapper\">\n                <temba-shortcuts\n                  @temba-selection=${this.handleShortcutSelection}\n                ></temba-shortcuts>\n              </div>\n            </temba-tab>`\n          : null}\n\n        <div slot=\"tab-right\" class=\"top-right\">\n          ${this.counter ? this.getCounter() : null}\n        </div>\n\n        <div\n          slot=\"pane-bottom\"\n          class=\"pane-bottom ${this.hasPendingText ? 'pending' : ''}\"\n        >\n          <temba-completion\n            class=\"chatbox\"\n            .value=${this.initialText}\n            gsm\n            textarea\n            ?disableCompletion=${!this.completion}\n            ?autogrow=${this.autogrow}\n            maxlength=${this.maxLength}\n            @change=${this.handleChatboxChange}\n            @keydown=${this.handleKeyDown}\n            placeholder=\"Write something here\"\n          >\n          </temba-completion>\n        </div>\n      </temba-tabs>\n    `;\n  }\n\n  private getCounter(): TemplateResult {\n    return html`<temba-charcount\n      .text=\"${this.currentText}\"\n    ></temba-charcount>`;\n  }\n}\n"]}
+{"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/compose/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Attachment, CustomEventType, Language, Shortcut } from '../interfaces';\nimport { DEFAULT_MEDIA_ENDPOINT, getClasses } from '../utils';\nimport { Completion } from '../completion/Completion';\nimport { Select } from '../select/Select';\nimport { TabPane } from '../tabpane/TabPane';\nimport { MediaPicker } from '../mediapicker/MediaPicker';\nimport { Tab } from '../tabpane/Tab';\nimport { TextInput } from '../textinput/TextInput';\nimport { ShortcutList } from '../list/ShortcutList';\n\nexport interface ComposeValue {\n  text: string;\n  attachments: { uuid: string }[];\n  quick_replies: string[];\n  optin: string;\n  template: string;\n  variables: string[];\n}\n\nexport class Compose extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        overflow: hidden;\n        border-top-right-radius: var(--curvature);\n        border-top-left-radius: var(--curvature);\n      }\n\n      .active-template .chatbox {\n        display: none;\n      }\n\n      .active-template .actions {\n        border: none;\n      }\n\n      .container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        position: relative;\n        overflow: hidden;\n        border-radius: var(--compose-curvature, var(--curvature-widget));\n        background: var(--color-widget-bg);\n        border: var(--compose-border, 1px solid var(--color-widget-border));\n        transition: all ease-in-out var(--transition-speed);\n        box-shadow: var(--compose-shadow, var(--widget-box-shadow));\n        caret-color: var(--input-caret);\n        --color-widget-bg-focused: transparent;\n        --color-widget-bg: transparent;\n      }\n\n      .chatbox {\n        --color-widget-border: none;\n        --curvature-widget: var(\n          --compose-curvature,\n          var(--curvature) var(--curvature) 0px 0px\n        );\n\n        --widget-box-shadow: none;\n        display: block;\n        flex-grow: 1;\n        --widget-box-shadow-focused: none;\n        --temba-textinput-padding: 1em 1em;\n      }\n\n      .actions {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 0em;\n        background: #f9f9f9;\n      }\n\n      .actions-right {\n        display: flex;\n        align-items: center;\n      }\n\n      temba-charcount {\n        margin-right: 5px;\n        overflow: hidden;\n        --temba-charcount-counts-margin-top: 0px;\n        --temba-charcount-summary-margin-top: 0px;\n        --temba-charcount-summary-position: fixed;\n        --temba-charcount-summary-right: 105px;\n        --temba-charcount-summary-bottom: 105px;\n      }\n\n      .send-error {\n        color: rgba(250, 0, 0, 0.75);\n        font-size: var(--help-text-size);\n        padding: 0.5em;\n      }\n\n      .language {\n        margin-bottom: 0.6em;\n        display: block;\n      }\n\n      .top-right {\n        align-items: center;\n        display: flex;\n      }\n\n      .gutter {\n        align-items: center;\n        display: flex;\n        margin: 0.5em;\n      }\n\n      temba-tabs {\n        --temba-tabs-border-bottom: none;\n        --temba-tabs-border-left: none;\n        --temba-tabs-border-right: none;\n        --temba-tabs-options-padding: 0.25em 0 0 0.25em;\n      }\n\n      temba-completion {\n        --textarea-min-height: 8em;\n      }\n\n      .quick-replies {\n        margin: 0.8em;\n      }\n\n      .optins {\n        margin: 0.8em;\n      }\n\n      .templates {\n        margin: 0.8em;\n      }\n\n      .attachments {\n        min-height: 5em;\n        padding: 0.2em;\n        align-items: center;\n        display: flex;\n        background: #f9f9f9;\n        border-radius: var(--curvature);\n        margin: 0.6em;\n        margin-bottom: 0em;\n      }\n\n      .pane-bottom {\n        border: 0px solid red;\n        --color-placeholder: rgba(0, 0, 0, 0.2);\n        flex-grow: 99;\n      }\n\n      .shortcut-wrapper {\n        max-height: var(--shortcuts-height, 12em);\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n        --options-block-shadow: none;\n        --curvature-widget: 0px;\n        --color-options-bg: #fff;\n        border-bottom: 1px solid var(--color-widget-border);\n      }\n\n      temba-shortcuts {\n        flex-grow: 1;\n      }\n\n      .quick-replies {\n        background: #f9f9f9;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  index = 1;\n\n  @property({ type: Number })\n  maxAttachments = 3;\n\n  @property({ type: Number })\n  maxLength = 640;\n\n  @property({ type: Boolean })\n  completion: boolean;\n\n  @property({ type: Boolean })\n  attachments: boolean;\n\n  @property({ type: Boolean })\n  quickReplies: boolean;\n\n  @property({ type: Boolean })\n  optIns: boolean;\n\n  @property({ type: Boolean })\n  templates: boolean;\n\n  @property({ type: Boolean })\n  counter: boolean;\n\n  @property({ type: Boolean })\n  autogrow: boolean;\n\n  @property({ type: Boolean })\n  shortcuts: boolean;\n\n  @property({ type: String })\n  currentText = '';\n\n  @property({ type: String })\n  initialText = '';\n\n  @property({ type: String })\n  accept = ''; //e.g. \".xls,.xlsx\"\n\n  @property({ type: String, attribute: false })\n  endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n  @property({ type: Boolean, attribute: false })\n  uploading: boolean;\n\n  @property({ type: Array })\n  languages: Language[] = [];\n\n  @property({ type: Array })\n  currentAttachments: Attachment[] = [];\n\n  @property({ type: Array })\n  currentQuickReplies: { name: string; value: string }[] = [];\n\n  @property({ type: Array })\n  currentOptin: { name: string; uuid: string }[] = [];\n\n  @property({ type: Array })\n  variables: string[] = [];\n\n  @property({ type: String })\n  template: string;\n\n  @property({ type: Object })\n  currentTemplate: { name: string; uuid: string };\n\n  // locale for the template\n  @property({ type: String })\n  locale: string;\n\n  @property({ type: String })\n  optinEndpoint = '/api/v2/optins.json';\n\n  @property({ type: String })\n  templateEndpoint = '/api/internal/templates.json';\n\n  @property({ type: Boolean, attribute: false })\n  empty = true;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property({ type: Object })\n  langValues: {\n    [lang: string]: {\n      text: string;\n      attachments: Attachment[];\n      quick_replies: string[];\n      optin?: { name: string; uuid: string };\n      template?: string;\n      variables?: string[];\n      locale?: string;\n    };\n  } = {};\n\n  @property({ type: String })\n  currentLanguage = 'und';\n\n  @property({ type: Object })\n  currentTab: Tab;\n\n  @property({ type: Boolean })\n  hasPendingText = false;\n\n  @property({ type: Object })\n  activeShortcut: Shortcut;\n\n  public constructor() {\n    super();\n  }\n\n  private isBaseLanguage(): boolean {\n    return (\n      this.currentLanguage == 'und' ||\n      this.currentLanguage == this.languages[0].iso\n    );\n  }\n\n  private handleTabChanged() {\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    this.currentTab = tabs.getCurrentTab();\n    if (this.currentTab && this.currentTab.name === 'Shortcuts') {\n      const shortcuts = this.shadowRoot.querySelector(\n        'temba-shortcuts'\n      ) as ShortcutList;\n      shortcuts.filter = '';\n    }\n    this.setFocusOnChatbox();\n  }\n\n  public firstUpdated(changes: Map<string, any>): void {\n    super.firstUpdated(changes);\n\n    if (changes.has('languages') && this.languages.length > 0) {\n      this.currentLanguage = this.languages[0].iso;\n    }\n\n    if (changes.has('value')) {\n      this.langValues = this.getDeserializedValue() || {};\n      this.variables = this.langValues[this.currentLanguage]?.variables || [];\n      this.template = this.langValues[this.currentLanguage]?.template || null;\n    }\n    this.setFocusOnChatbox();\n  }\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n\n    if (changes.has('currentLanguage') && this.langValues) {\n      let langValue = {\n        text: '',\n        attachments: [],\n        quick_replies: []\n      };\n\n      if (this.currentLanguage in this.langValues) {\n        langValue = this.langValues[this.currentLanguage];\n      }\n\n      this.currentText = langValue.text;\n      this.initialText = langValue.text;\n      this.currentAttachments = langValue.attachments;\n      this.currentQuickReplies = (langValue.quick_replies || []).map(\n        (value) => {\n          return { name: value, value };\n        }\n      );\n      this.currentOptin = langValue['optin'] ? [langValue['optin']] : [];\n      this.setFocusOnChatbox();\n\n      // TODO: this feels like it shouldn't be needed\n      const chatbox = this.shadowRoot.querySelector('.chatbox') as any;\n      if (chatbox) {\n        chatbox.value = this.initialText;\n      }\n      this.resetTabs();\n      this.requestUpdate('currentAttachments');\n    }\n\n    if (\n      (this.langValues &&\n        (changes.has('currentText') ||\n          changes.has('currentAttachments') ||\n          changes.has('currentQuickReplies'))) ||\n      changes.has('currentOptin') ||\n      changes.has('currentTemplate') ||\n      changes.has('variables')\n    ) {\n      this.checkIfEmpty();\n\n      const trimmed = this.currentText ? this.currentText.trim() : '';\n      if (\n        trimmed ||\n        (this.currentAttachments || []).length > 0 ||\n        this.currentQuickReplies.length > 0 ||\n        this.variables.length > 0\n      ) {\n        this.langValues[this.currentLanguage] = {\n          text: trimmed,\n          attachments: this.currentAttachments,\n          quick_replies: this.currentQuickReplies.map((option) => option.value),\n          optin: this.currentOptin.length > 0 ? this.currentOptin[0] : null,\n          template: this.currentTemplate ? this.currentTemplate.uuid : null,\n          variables: this.variables,\n          locale: this.locale\n        };\n      } else {\n        delete this.langValues[this.currentLanguage];\n      }\n      this.fireCustomEvent(CustomEventType.ContentChanged, this.langValues);\n      this.requestUpdate('langValues');\n      this.setValue(this.langValues);\n    }\n  }\n\n  private handleAttachmentsChanged(event: CustomEvent) {\n    const media = event.target as MediaPicker;\n    this.currentAttachments = media.attachments;\n    this.requestUpdate();\n  }\n\n  private setFocusOnChatbox(): void {\n    const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n    if (completion) {\n      window.setTimeout(() => {\n        completion.focus();\n      }, 0);\n    }\n  }\n\n  public reset(): void {\n    const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n    if (completion) {\n      completion.textInputElement.value = '';\n      completion.value = '';\n      this.initialText = '';\n      this.currentText = '';\n      this.currentQuickReplies = [];\n      this.currentAttachments = [];\n      this.resetTabs();\n    }\n  }\n\n  private handleQuickReplyChange() {\n    this.requestUpdate('currentQuickReplies');\n  }\n\n  private handleOptInChange(event: InputEvent) {\n    this.currentOptin = (event.target as any).values;\n    this.requestUpdate('optIn');\n  }\n\n  private handleChatboxChange(evt: Event) {\n    const chatbox = evt.target as Completion;\n    const inputElement = chatbox.getTextInput().inputElement;\n\n    this.currentText = inputElement.value;\n    this.hasPendingText = inputElement.value.length > 0;\n\n    // is the last character a / and is it at the beginning of the line\n    const cursor = inputElement.selectionStart;\n    const text = inputElement.value;\n    const lineStart = text.lastIndexOf('\\n', cursor - 1) + 1;\n    const line = text.substring(lineStart, cursor);\n\n    if (line.startsWith('/')) {\n      // switch to the shortcuts tab\n      if (this.currentTab.name !== 'Shortcuts') {\n        this.getTabs().focusTab('Shortcuts');\n      }\n      const shortcuts = this.shadowRoot.querySelector(\n        'temba-shortcuts'\n      ) as ShortcutList;\n      shortcuts.filter = line.substring(1);\n    }\n  }\n\n  public checkIfEmpty() {\n    const chatboxEmpty = this.currentText.trim().length === 0;\n    const attachmentsEmpty = this.currentAttachments.length === 0;\n    if (this.attachments) {\n      this.empty = chatboxEmpty && attachmentsEmpty;\n    } else {\n      this.empty = chatboxEmpty;\n    }\n  }\n\n  private getCurrentLine(): { text: string; index: number } {\n    const chatbox = this.shadowRoot.querySelector('.chatbox') as Completion;\n\n    const cursor = chatbox.getTextInput().inputElement.selectionStart - 1;\n    const text = chatbox.value;\n    const start = text.substring(0, cursor).lastIndexOf('\\n') + 1;\n\n    let end = chatbox.value.indexOf('\\n', start);\n    if (end === -1) {\n      end = chatbox.value.length;\n    }\n\n    return { text: chatbox.value.substring(start, end), index: start };\n  }\n\n  private handleKeyDown(evt: KeyboardEvent) {\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    const num = parseInt(evt.key);\n    if (\n      !Number.isNaN(num) &&\n      num > 0 &&\n      evt.ctrlKey &&\n      evt.metaKey &&\n      num <= tabs.options.length\n    ) {\n      tabs.index = num - 1;\n    }\n\n    if (evt.key === 'Backspace') {\n      const line = this.getCurrentLine();\n      const text = line.text;\n      if (text === '/') {\n        tabs.focusTab('Reply');\n      }\n    }\n\n    if (this.currentTab.name === 'Shortcuts') {\n      if (evt.key === 'Enter' && !evt.shiftKey) {\n        return;\n      }\n    }\n\n    if (evt.key === 'Enter') {\n      if (!evt.shiftKey) {\n        evt.preventDefault();\n        if (this.completion) {\n          const chat = evt.target as Completion;\n          if (!chat.hasVisibleOptions()) {\n            this.triggerSend();\n          }\n        } else {\n          this.triggerSend();\n        }\n      }\n    }\n  }\n\n  public triggerSend() {\n    if (!this.empty) {\n      this.fireCustomEvent(CustomEventType.Submitted, {\n        langValues: this.langValues\n      });\n    }\n  }\n\n  private handleLanguageChange(evt: Event) {\n    const select = evt.target as Select<any>;\n    this.currentLanguage = select.values[0].iso;\n  }\n\n  public resetTabs() {\n    this.getTabs().focusTab('Reply');\n  }\n\n  public getTabs(): TabPane {\n    return this.shadowRoot.querySelector('temba-tabs') as TabPane;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <temba-field\n        name=${this.name}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .value=${this.value}\n        class=${getClasses({\n          'active-template':\n            !!this.currentTemplate &&\n            this.currentTab &&\n            this.currentTab.name === 'Template'\n        })}\n      >\n        ${this.languages.length > 1\n          ? html`<temba-select\n              @change=${this.handleLanguageChange}\n              class=\"language\"\n              name=\"language\"\n              .staticOptions=${this.languages}\n              valueKey=\"iso\"\n            >\n            </temba-select>`\n          : null}\n        <div class=\"container\">\n          <div class=\"items actions\">${this.getActions()}</div>\n        </div>\n      </temba-field>\n    `;\n  }\n\n  private handleTemplateChanged(evt: CustomEvent) {\n    this.currentTemplate = evt.detail.template;\n    this.locale = evt.detail.translation?.locale;\n    this.requestUpdate();\n  }\n\n  private handleTemplateVariablesChanged(evt: CustomEvent) {\n    this.variables = [...evt.detail.variables];\n  }\n\n  public getTextInput(): TextInput {\n    return (\n      this.shadowRoot.querySelector('.chatbox') as Completion\n    ).getTextInput();\n  }\n\n  public handleShortcutSelection(event: CustomEvent) {\n    this.activeShortcut = event.detail.selected;\n    const line = this.getCurrentLine();\n    const chatbox = this.getTextInput();\n\n    const originalText = chatbox.value;\n\n    if (line.text.startsWith('/')) {\n      const newText =\n        originalText.substring(0, line.index) +\n        this.activeShortcut.text +\n        originalText.substring(line.index + line.text.length);\n\n      chatbox.updateValue(newText);\n\n      // set our cursor to the end of the shortcut\n      const cursor = line.index + this.activeShortcut.text.length;\n      chatbox.inputElement.setSelectionRange(cursor, cursor);\n    } else {\n      // add the text where the cursor is\n      const cursor = chatbox.inputElement.selectionStart;\n      const newText =\n        originalText.substring(0, cursor) +\n        this.activeShortcut.text +\n        originalText.substring(cursor);\n      chatbox.updateValue(newText);\n\n      // set the cursor to the end of the shortcut text\n      const newCursor = cursor + this.activeShortcut.text.length;\n      chatbox.inputElement.setSelectionRange(newCursor, newCursor);\n    }\n\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    tabs.index = tabs.options.findIndex((tab) => tab.name === 'Reply');\n  }\n\n  private getActions(): TemplateResult {\n    const showOptins = this.optIns && this.isBaseLanguage();\n    const showTemplates = this.templates && this.isBaseLanguage();\n    return html`\n      <temba-tabs\n        focusedname\n        @temba-context-changed=${this.handleTabChanged}\n        refresh=\"${(this.currentAttachments || []).length}|${this.index}|${this\n          .currentQuickReplies.length}|${showOptins}|${this\n          .currentOptin}|${showTemplates}|${this.currentTemplate}\"\n      >\n        <temba-tab\n          name=\"Reply\"\n          icon=\"message\"\n          selectionBackground=\"#fff\"\n        ></temba-tab>\n        ${this.attachments\n          ? html`<temba-tab\n              name=\"Attachments\"\n              icon=\"attachment\"\n              selectionBackground=\"#fff\"\n              .count=${(this.currentAttachments || []).length}\n            >\n              <div class=\"items attachments\">\n                <temba-media-picker\n                  accept=${this.accept}\n                  max=${this.maxAttachments}\n                  attachments=${JSON.stringify(this.currentAttachments || [])}\n                  @change=${this.handleAttachmentsChanged.bind(this)}\n                ></temba-media-picker>\n              </div>\n            </temba-tab>`\n          : null}\n        ${this.quickReplies\n          ? html`<temba-tab\n              name=\"Quick Replies\"\n              icon=\"quick_replies\"\n              selectionBackground=\"#fff\"\n              .count=${this.currentQuickReplies.length}\n            >\n              <temba-select\n                class=\"quick-replies\"\n                @change=${this.handleQuickReplyChange}\n                .values=${this.currentQuickReplies}\n                class=\"quick-replies\"\n                tags\n                multi\n                searchable\n                expressions\n                placeholder=\"Add Quick Reply\"\n              ></temba-select>\n            </temba-tab>`\n          : null}\n        ${showOptins\n          ? html`<temba-tab\n              name=\"Opt-in\"\n              icon=\"channel_fba\"\n              selectionBackground=\"#fff\"\n              ?hidden=${!showOptins}\n              ?checked=${this.currentOptin.length > 0}\n            >\n              <temba-select\n                @change=${this.handleOptInChange}\n                .values=${this.currentOptin}\n                endpoint=\"${this.optinEndpoint}\"\n                class=\"optins\"\n                searchable\n                clearable\n                placeholder=\"Select an opt-in to use for Facebook (optional)\"\n              ></temba-select>\n            </temba-tab>`\n          : null}\n        ${showTemplates\n          ? html`<temba-tab\n              name=\"Template\"\n              icon=\"channel_wa\"\n              selectionBackground=\"#fff\"\n              ?alert=${this.errors &&\n              this.errors.find((error) => error.includes('template'))}\n              ?hidden=${!showTemplates}\n              ?checked=${this.currentTemplate}\n            >\n              <temba-template-editor\n                class=\"templates\"\n                @temba-context-changed=${this.handleTemplateChanged}\n                @temba-content-changed=${this.handleTemplateVariablesChanged}\n                template=${this.template}\n                variables=${JSON.stringify(this.variables)}\n                url=${this.templateEndpoint}\n                lang=${this.currentLanguage}\n              >\n              </temba-template-editor>\n            </temba-tab>`\n          : null}\n\n        <!--temba-tab\n          name=\"Note\"\n          icon=\"notes\"\n          activityColor=\"#ffbd00\"\n          selectionBackground=\"#fff9c2\"\n          borderColor=\"#ebdf6f\"\n        ></temba-tab-->\n\n        ${this.shortcuts\n          ? html`<temba-tab\n              name=\"Shortcuts\"\n              icon=\"shortcut\"\n              selectionBackground=\"#fff\"\n            >\n              <div class=\"shortcut-wrapper\">\n                <temba-shortcuts\n                  @temba-selection=${this.handleShortcutSelection}\n                ></temba-shortcuts>\n              </div>\n            </temba-tab>`\n          : null}\n\n        <div slot=\"tab-right\" class=\"top-right\">\n          ${this.counter ? this.getCounter() : null}\n        </div>\n\n        <div\n          slot=\"pane-bottom\"\n          class=\"pane-bottom ${this.hasPendingText ? 'pending' : ''}\"\n        >\n          <temba-completion\n            class=\"chatbox\"\n            .value=${this.initialText}\n            gsm\n            textarea\n            ?disableCompletion=${!this.completion}\n            ?autogrow=${this.autogrow}\n            maxlength=${this.maxLength}\n            @change=${this.handleChatboxChange}\n            @keydown=${this.handleKeyDown}\n            placeholder=\"Write something here\"\n          >\n          </temba-completion>\n        </div>\n      </temba-tabs>\n    `;\n  }\n\n  private getCounter(): TemplateResult {\n    return html`<temba-charcount\n      .text=\"${this.currentText}\"\n    ></temba-charcount>`;\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
-import { oxford, oxfordFn, postJSON } from '../utils';
+import { fetchResults, oxford, oxfordFn, postJSON } from '../utils';
 import { ContactStoreElement } from './ContactStoreElement';
 import { fetchContactHistory, getDisplayName } from './helpers';
 import { MessageType } from '../chat/Chat';
@@ -198,6 +198,8 @@ export class ContactChat extends ContactStoreElement {
         --compose-padding: 3px;
         --compose-curvature: none;
         border-top: 1px inset rgba(0, 0, 0, 0.05);
+
+
       }
 
       .chat-wrapper {
@@ -205,7 +207,7 @@ export class ContactChat extends ContactStoreElement {
         flex-grow: 1;
         flex-direction: column;
         min-height: 0;
-        background: rgb(249, 249, 249);
+        background: #f9f9f9;
       }
 
       temba-contact-history {
@@ -245,9 +247,8 @@ export class ContactChat extends ContactStoreElement {
         color: var(--color-link-primary-hover);
       }
 
-      temba-button#reopen-button {
-        --button-y: 1px;
-        --button-x: 12px;
+      temba-button {
+        margin: 0.1em 0.25em;
       }
 
       temba-completion {
@@ -264,6 +265,10 @@ export class ContactChat extends ContactStoreElement {
       temba-compose {
         border-top-right-radius: 0;
         border-top-left-radius: 0;
+        --temba-tabs-options-padding: 0.5em 0.5em 0 0.5em;
+        --temba-tabs-border-left: none;
+        --temba-tabs-border-right: none;
+        --temba-tabs-border-bottom: none;
       }
 
       .error-gutter {
@@ -282,37 +287,42 @@ export class ContactChat extends ContactStoreElement {
 
       temba-chat {
         border-bottom: 1px solid #ddd;
+        background: linear-gradient(0deg, #fff, #fff);
+        --chat-border-in: 1px solid #eee;
+        --color-chat-out: var(--color-message)
+        );
       }
 
-      .in-ticket-wrapper {
+      .action-bar {
       }
 
       .in-flow {
-        text-align: center;
-
-        display: flex;
-
-        background: var(--color-primary-dark);
-        background: #777;
-        color: #fff;
+        border-radius: 0.8em;
         align-items: center;
-        border-bottom: 1px solid #ddd;
+        background: #666;
+        padding: 0.5em 1em;
+        margin: 1em;
+        margin-right: 2em;
+        display: inline-flex;
+        opacity: 0.9;
+      }
+
+      .in-flow:hover {
+        opacity: 1;
       }
 
       .in-flow .flow-name {
-        padding: 0.5em 1em;
         display: flex;
-        flex-grow: 1;
+        color: #fff;
       }
 
-      .in-flow a,
-      .in-flow .interrupt {
+      .in-flow a {
         font-weight: bold;
         color: #fff;
       }
 
-      .in-flow .interrupt {
-        background: rgba(var(--error-rgb), 1);
+      .in-flow .interrupt-button {
+        margin-left: 1em;
       }
 
       .in-flow .interrupt {
@@ -335,26 +345,46 @@ export class ContactChat extends ContactStoreElement {
         margin-right: 0.5em;
       }
 
+      .in-ticket-wrapper {
+      }
+
       .in-ticket {
-        --color-widget-border: transparent;
-        --color-widget-bg: transparent;
-        --widget-box-shadow: none;
-        --temba-select-selected-padding: 0.2em 0.8em;
-        --temba-select-min-height: 0;
-        --select-wrapper-bg: transparent;
-        --select-wrapper-shadow: none;
         box-shadow: none;
-        padding: 0.5em;
+        padding: 0.5em 0.5em;
         text-align: center;
-
+        align-items: center;
+        border-bottom: 1px solid #ddd;
         display: flex;
         box-shadow: none;
+        margin: 0em;
+        background: rgba(0, 0, 0, 0.03);
+      }
+
+      temba-user {
+        border: 1px solid #ddd;
+        padding: 0.2em 0.5em;
+        border-radius: var(--curvature);
+        min-width: 10em;
+        background: #fff;
+      }
+
+      temba-user:hover {
+        border: 1px solid #ddd;
+        background: #f9f9f9;
       }
 
       .assign-button {
         --button-mask: #ebebeb;
         color: #333;
-        margin-right: 0.5em;
+        margin: 0.25em;
+      }
+
+      temba-user-select {
+        width: 250px;
+      }
+
+      temba-button {
+        --button-border: 1px solid #ddd;
       }
     `;
     }
@@ -389,6 +419,7 @@ export class ContactChat extends ContactStoreElement {
         }
     }
     updated(changedProperties) {
+        var _a, _b;
         super.updated(changedProperties);
         // if we don't have an endpoint infer one
         if (changedProperties.has('data') ||
@@ -400,6 +431,12 @@ export class ContactChat extends ContactStoreElement {
             this.reset();
             this.fetchPreviousMessages();
         }
+        if (changedProperties.has('currentTicket')) {
+            const users = this.shadowRoot.querySelector('temba-user-select');
+            if (users) {
+                users.setValues(((_a = this.currentTicket) === null || _a === void 0 ? void 0 : _a.assignee) ? [(_b = this.currentTicket) === null || _b === void 0 ? void 0 : _b.assignee] : []);
+            }
+        }
     }
     reset() {
         if (this.chat) {
@@ -622,15 +659,16 @@ export class ContactChat extends ContactStoreElement {
     }
     getUserForEvent(event) {
         let user = null;
-        if (event.created_by) {
+        if (event.type === 'msg_received') {
             user = {
-                email: event.created_by.email,
-                name: `${event.created_by.first_name} ${event.created_by.last_name}`.trim()
+                name: this.currentContact.name
             };
         }
-        else if (event.type === 'msg_received') {
+        else if (event.created_by) {
             user = {
-                name: this.currentContact.name
+                email: event.created_by.email,
+                name: `${event.created_by.first_name} ${event.created_by.last_name}`.trim(),
+                avatar: event.created_by.avatar
             };
         }
         return user;
@@ -772,14 +810,6 @@ export class ContactChat extends ContactStoreElement {
     fetchComplete() {
         this.chat.fetching = false;
     }
-    getTembaContactHistory() {
-        return html `<temba-chat
-      @temba-scroll-threshold=${this.fetchPreviousMessages}
-      @temba-fetch-complete=${this.fetchComplete}
-      avatar=${this.avatar}
-      agent
-    ></temba-chat>`;
-    }
     getTembaCompose() {
         if (this.currentTicket) {
             if (this.currentContact && this.currentContact.status !== 'active') {
@@ -813,6 +843,7 @@ export class ContactChat extends ContactStoreElement {
           counter
           autogrow
           shortcuts
+          ?embeddedTabs=${!this.currentTicket}
           @temba-submitted=${this.handleSend.bind(this)}
         >
         </temba-compose>
@@ -827,81 +858,176 @@ export class ContactChat extends ContactStoreElement {
             : null}
       </div>`;
     }
+    handleAssignmentChanged(evt) {
+        const users = evt.currentTarget;
+        const assignee = users.values[0];
+        this.assignTicket(assignee ? assignee.email : null);
+        users.blur();
+    }
+    handleTopicChanged(evt) {
+        const select = evt.target;
+        const topic = select.values[0];
+        if (this.currentTicket.topic.uuid !== topic.uuid) {
+            postJSON(`/api/v2/ticket_actions.json`, {
+                tickets: [this.currentTicket.uuid],
+                action: 'change_topic',
+                topic: topic.uuid
+            })
+                .then(() => {
+                this.refreshTicket();
+            })
+                .catch((response) => {
+                console.error(response);
+            });
+        }
+    }
+    assignTicket(email) {
+        // if its already assigned to use, it's a noop
+        if ((this.currentTicket.assignee &&
+            this.currentTicket.assignee.email === email) ||
+            (this.currentTicket.assignee === null && email === null)) {
+            return;
+        }
+        postJSON(`/api/v2/ticket_actions.json`, {
+            tickets: [this.currentTicket.uuid],
+            action: 'assign',
+            assignee: email
+        })
+            .then(() => {
+            this.refreshTicket();
+        })
+            .catch((response) => {
+            console.error(response);
+        });
+        return true;
+    }
+    refreshTicket() {
+        if (this.currentTicket) {
+            fetchResults(`/api/v2/tickets.json?uuid=${this.currentTicket.uuid}`).then((values) => {
+                if (values.length > 0) {
+                    this.fireCustomEvent(CustomEventType.TicketUpdated, {
+                        ticket: values[0],
+                        previous: this.currentTicket
+                    });
+                    this.currentTicket = values[0];
+                }
+            });
+        }
+    }
+    handleReopen() {
+        const uuid = this.currentTicket.uuid;
+        postJSON(`/api/v2/ticket_actions.json`, {
+            tickets: [uuid],
+            action: 'reopen'
+        })
+            .then(() => {
+            this.refreshTicket();
+        })
+            .catch((response) => {
+            console.error(response);
+        });
+    }
+    handleClose() {
+        const uuid = this.currentTicket.uuid;
+        postJSON(`/api/v2/ticket_actions.json`, {
+            tickets: [uuid],
+            action: 'close'
+        })
+            .then(() => {
+            this.refreshTicket();
+        })
+            .catch((response) => {
+            console.error(response);
+        });
+    }
     render() {
         const inFlow = this.currentContact && this.currentContact.flow;
-        // disable ticket view for now
-        const inTicket = false; // !!this.currentTicket;
-        const contactHistory = this.currentContact
-            ? this.getTembaContactHistory()
-            : null;
-        const tembaCompose = this.currentContact ? this.getTembaCompose() : null;
-        const contactHistoryAndChatbox = html `
-      <div class="chat-wrapper">
-        ${contactHistory}
-        ${inFlow
-            ? html `
-              <div class="in-flow">
-                <div class="flow-name">
-                  <temba-icon name="flow" size="1.2"></temba-icon>
-                  <div style="flex-grow:1;text-align:left">
-                    Currently in
-                    <a href="/flow/editor/${this.currentContact.flow.uuid}/"
-                      >${this.currentContact.flow.name}</a
-                    >
+        const inTicket = this.currentTicket;
+        const ticketClosed = this.currentTicket && this.currentTicket.closed_on;
+        return html `<div class="chat-wrapper">
+      ${this.currentContact
+            ? html `<temba-chat
+              @temba-scroll-threshold=${this.fetchPreviousMessages}
+              @temba-fetch-complete=${this.fetchComplete}
+              avatar=${this.avatar}
+              agent
+            >
+              ${inFlow
+                ? html `
+                    <div slot="footer" style="text-align:center;">
+                      <div class="in-flow">
+                        <div class="flow-name">
+                          <temba-icon name="flow" size="1.2"></temba-icon>
+                          <div>
+                            Currently in
+                            <a
+                              href="/flow/editor/${this.currentContact.flow
+                    .uuid}/"
+                              >${this.currentContact.flow.name}</a
+                            >
+                          </div>
+                        </div>
+                        ${this.showInterrupt
+                    ? html `<temba-button
+                              class="interrupt-button"
+                              destructive
+                              small
+                              @click=${this.handleInterrupt}
+                              name="Interrupt"
+                            >
+                            </temba-button>`
+                    : null}
+                      </div>
+                    </div>
+                  `
+                : null}
+              <div slot="footer"></div>
+            </temba-chat>
+            ${inTicket
+                ? html `<div class="in-ticket-wrapper">
+                  <div class="in-ticket">
+                    <temba-user-select
+                      placeholder="Assign to.."
+                      searchable
+                      searchOnFocus
+                      clearable
+                      .values=${this.currentTicket.assignee
+                    ? [this.currentTicket.assignee]
+                    : []}
+                      @change=${this.handleAssignmentChanged}
+                      ?disabled=${ticketClosed}
+                    ></temba-user-select>
+
+                    <temba-select
+                      style="margin:0 0.5em; flex-grow:1"
+                      endpoint="/api/v2/topics.json"
+                      searchable
+                      valuekey="uuid"
+                      .values=${[this.currentTicket.topic]}
+                      @change=${this.handleTopicChanged}
+                      ?disabled=${ticketClosed}
+                    ></temba-select>
+
+                    ${this.currentTicket.closed_on
+                    ? html `
+                          <temba-button
+                            name="Reopen"
+                            @click=${this.handleReopen}
+                          ></temba-button>
+                        `
+                    : html `
+                          <temba-button
+                            name="Close"
+                            destructive
+                            @click=${this.handleClose}
+                          ></temba-button>
+                        `}
                   </div>
-                </div>
-                ${this.showInterrupt
-                ? html `<div class="interrupt" @click=${this.handleInterrupt}>
-                      Interrupt
-                    </div>`
+                </div> `
                 : null}
-              </div>
-            `
-            : ''}
-        ${inTicket
-            ? html `<div class="in-ticket-wrapper">
-              <div class="in-ticket">
-                ${this.currentTicket.assignee
-                ? html `<temba-user
-                      email=${this.currentTicket.assignee.email}
-                      scale="0.8"
-                      style="margin-right:0.25em;margin-bottom:-0.5em;margin-top:-0.5em;margin-right:0.5em;"
-                    ></temba-user>`
-                : html `<temba-button
-                      name="Assign"
-                      class="assign-button"
-                      light
-                    ></temba-button>`}
-                <temba-select
-                  searchable
-                  endpoint="/api/v2/topics.json"
-                  valueKey="uuid"
-                  .prepareOptions=${(options) => {
-                options.forEach((option) => {
-                    option.icon = 'topic';
-                });
-                return options;
-            }}
-                  values=${JSON.stringify([
-                { ...this.currentTicket.topic, icon: 'topic' }
-            ])}
-                  style="min-width:200px; max-width:300px;margin-right:0.5em;"
-                >
-                </temba-select>
-                <div style="min-width:20px"></div>
-
-                ${this.currentTicket.closed_on
-                ? html `reopen`
-                : html `<div style="text-align:right;flex-grow:1">
-                      <temba-button name="Close"></temba-button>
-                    </div>`}
-              </div>
-            </div>`
-            : ''}
-        ${tembaCompose}
-      </div>
-    `;
-        return html `${contactHistoryAndChatbox}`;
+            ${this.getTembaCompose()}`
+            : null}
+    </div>`;
     }
 }
 __decorate([