Fix tags-input:

* the code handling `separators` was buggy, so i simplified to use only
  one separator
* was not practical for bot quotes (can't edit), so replaced by a
  textarea

client/common/configuration/elements/templates/channel-configuration.ts

@@ -62,7 +62,7 @@ export function tplChannelConfiguration (el: ChannelConfigurationElement): Templ
       entries: {
         inputType: 'tags',
         default: [],
-        separators: ['\n', '\t', ';']
+        separator: '\n'
       },
       regexp: {
         inputType: 'checkbox',
@@ -87,9 +87,9 @@ export function tplChannelConfiguration (el: ChannelConfigurationElement): Templ
     },
     quotes: {
       messages: {
-        inputType: 'tags',
+        inputType: 'textarea',
         default: [],
-        separators: ['\n', '\t', ';']
+        separator: '\n'
       },
       delay: {
         inputType: 'number',

client/common/lib/elements/dynamic-table-form.ts

@@ -67,7 +67,7 @@ interface CellDataSchema {
   label?: TemplateResult | string
   options?: { [key: string]: string }
   datalist?: DynamicTableAcceptedTypes[]
-  separators?: string[]
+  separator?: string
   inputType?: DynamicTableAcceptedInputTypes
   default?: DynamicTableAcceptedTypes
   colClassList?: string[] // CSS classes to add to the <td> element.
@@ -148,7 +148,9 @@ export class DynamicTableFormElement extends LivechatElement {
     // Note: we make multiple querySelector, to be sure to not get a nested table.
     // We want the top level table associated tr.
     const input = this.querySelector('table')?.querySelector(
-      '&>tbody>tr:last-child>td input:not([type=hidden]),&>tbody>tr:last-child>td livechat-tags-input'
+      '&>tbody>tr:last-child>td input:not([type=hidden]),' +
+      '&>tbody>tr:last-child>td livechat-tags-input,' +
+      '&>tbody>tr:last-child>td textarea'
     )
     if (input) {
       (input as HTMLElement).focus()
@@ -462,7 +464,7 @@ export class DynamicTableFormElement extends LivechatElement {
               inputName,
               propertyName,
               propertySchema,
-              (propertyValue)?.join(propertySchema.separators?.[0] ?? ',') ??
+              (propertyValue)?.join(propertySchema.separator ?? ',') ??
                 propertyValue ?? propertySchema.default ?? '',
               originalIndex)}
               ${feedback}
@@ -477,7 +479,7 @@ export class DynamicTableFormElement extends LivechatElement {
               inputName,
               propertyName,
               propertySchema,
-              (propertyValue)?.join(propertySchema.separators?.[0] ?? ',') ??
+              (propertyValue)?.join(propertySchema.separator ?? ',') ??
                 propertyValue ?? propertySchema.default ?? '',
               originalIndex)}
               ${feedback}
@@ -568,7 +570,7 @@ export class DynamicTableFormElement extends LivechatElement {
       .minlength=${propertySchema.minlength}
       .maxlength=${propertySchema.maxlength}
       .datalist=${propertySchema.datalist as any}
-      .separators=${propertySchema.separators}
+      .separator=${propertySchema.separator}
       @change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
       .value=${propertyValue as any}
       ></livechat-tags-input>`
@@ -725,13 +727,11 @@ export class DynamicTableFormElement extends LivechatElement {
         if (rowById._id === rowId) {
           switch (propertySchema.default?.constructor) {
             case Array:
-              if (value.constructor === Array) {
+              if (value.constructor === Array || !propertySchema.separator) {
                 rowById.row[propertyName] = value
               } else {
                 rowById.row[propertyName] = (value as string)
-                  .split(new RegExp(`(?:${propertySchema.separators
+                  .split(propertySchema.separator)
-                    ?.map((c: string) => c.replace(/^[.\\+*?[^\]$(){}=!<>|:-]$/, '\\'))
-                    .join('|') ?? ''})+)`))
               }
               break
             default:

client/common/lib/elements/tags-input.ts

@@ -46,7 +46,7 @@ export class TagsInputElement extends LivechatElement {
   private readonly _isPressingKey: string[] = []
 
   @property({ attribute: false })
-  public separators?: string[] = ['\n']
+  public separator: string = '\n'
 
   @property({ attribute: false })
   public animDuration: number = 200
@@ -145,15 +145,13 @@ export class TagsInputElement extends LivechatElement {
           target?.value?.slice(target.selectionEnd ?? target?.value?.length ?? 0) ?? ''
         }`
 
-      let values = newValue.split(new RegExp(`(?:${this.separators
+      let values = newValue.split(this.separator)
-        ?.map((c: string) => c.replace(/^[.\\+*?[^\]$(){}=!<>|:-]$/, '\\'))
-        .join('|') ?? ''})+`))
 
       values = values.map(v => v.trim()).filter(v => v !== '')
 
       if (values.length > 0) {
         // Keep last value in input if value doesn't finish with a separator
-        if (!this.separators?.some(separator => newValue.match(/\s+$/m)?.[0]?.includes(separator))) {
+        if (!newValue.match(/\s+$/m)?.[0]?.includes(this.separator)) {
           target.value = values.pop() ?? ''
         } else {
           target.value = ''
@@ -257,7 +255,7 @@ export class TagsInputElement extends LivechatElement {
 
     if (target) {
       this._inputValue = target.value
-      if (this.separators?.includes(target.value.slice(-1))) {
+      if (this.separator === target.value.slice(-1)) {
         e.preventDefault()
         target.value = target.value.slice(0, -1)
         this._handleNewTag(e)