Built motion from commit (unavailable).|2.5.23
[motion2.git] / snippet / 3.0.0 / templates / chat / index.tpl.html / index.tpl.html
diff --git a/snippet/3.0.0/templates/chat/index.tpl.html/index.tpl.html b/snippet/3.0.0/templates/chat/index.tpl.html/index.tpl.html
new file mode 100644 (file)
index 0000000..d9ba2f9
--- /dev/null
@@ -0,0 +1,148 @@
+<!-- CHAT CONTENT -->
+<md-content
+  id="chatContent1"
+  class="chat-messages"
+  ng-style="{'background-color': '{{settings.backgroundColor}}'}"
+>
+  <div
+    layout="row"
+    ng-if="!$first"
+    ng-repeat="(key, message) in messages track by $index"
+    class="md-padding message-row"
+    ng-style="{'font-size': '{{settings.messageFontSize}}px'}"
+    ng-class="{'in':( message.direction === 'in' && settings.messagesAlignment === 'alternate'), 'in2': ( message.direction === 'in' && settings.messagesAlignment === 'centered'), 'out': message.direction === 'out' && message.UserId, 'auto': message.direction === 'out' && !message.UserId}"
+  >
+    <img
+      ng-if="message.direction ==='out' && !message.UserId"
+      ng-src="{{settings.remote}}/api/chat/websites/{{settings.id}}/system_avatar?token={{settings.token}}"
+      class="avatar"
+      alt="system"
+    />
+    <img
+      ng-if="message.direction ==='out' && message.UserId"
+      ng-src="{{settings.remote}}/api/{{settings.showAgentAvatar ? 'users/' + visitor.interaction.UserId + '/avatar' : 'chat/websites/' + settings.id + '/avatar'}}?token={{settings.token}}"
+      class="avatar"
+      alt="agent"
+    />
+    <img
+      ng-if="message.direction ==='in'"
+      ng-src="{{settings.remote}}/api/chat/websites/{{settings.id}}/customer_avatar?token={{settings.token}}"
+      class="avatar"
+      alt="customer"
+    />
+
+    <div class="bubble">
+      <div layout="row" layout-align="end center">
+        <div class="time secondary-text" ng-switch="settings.agentIdentifier">
+          <span ng-switch-when="website_alias">
+            {{message.direction === 'out' ? (message.UserId ?
+            (settings.agentAlias + message.UserId) : settings.systemAlias) :
+            (settings.customerAlias ||erAlias || visitor.from || 'Visitor' +
+            message.ContactId)}} - {{message.createdAt | date : 'h:mm'}}
+          </span>
+          <span ng-switch-when="agent_alias">
+            {{message.direction === 'out' ? (message.UserId ?
+            (message.User.alias || message.User.fullname) :
+            settings.systemAlias) : (settings.customerAlias || visitor.from ||
+            'Visitor' + message.ContactId)}} - {{message.createdAt | date :
+            'h:mm'}}
+          </span>
+          <span ng-switch-when="agent_fullname">
+            {{message.direction === 'out' ? (message.UserId ?
+            message.User.fullname : settings.systemAlias) :
+            (settings.customerAlias || visitor.from || 'Visitor' +
+            message.ContactId)}} - {{message.createdAt | date : 'h:mm'}}
+          </span>
+          <span ng-switch-default>
+            {{message.direction === 'out' ? (message.UserId ?
+            ((settings.agentAlias || 'Agent') + message.UserId) :
+            settings.systemAlias) : (settings.customerAlias || visitor.from ||
+            'Visitor' + message.ContactId)}} - {{message.createdAt | date :
+            'h:mm'}}
+          </span>
+        </div>
+        <div
+          style="padding-left: 5px"
+          ng-if="message.direction === 'in' && settings.enableCustomerCheckmarks"
+        >
+          <i
+            ng-if="!message.read"
+            class="mdi mdi-18px mdi-check"
+            style="color: grey"
+          ></i>
+          <i
+            ng-if="message.read"
+            class="mdi mdi-18px mdi-check-all"
+            style="color: #34b7f1"
+          ></i>
+        </div>
+      </div>
+      <div
+        ng-class="{'in': message.direction === 'in', 'out': message.direction ==='out' && message.UserId, 'auto': message.direction ==='out' && !message.UserId}"
+      >
+        <div
+          ng-if="message.AttachmentId"
+          ng-bind-html="message.body"
+          class="message"
+        ></div>
+        <div
+          ng-if="!message.AttachmentId"
+          ng-bind-html="message.body | embed:vm.emojiOptions"
+          class="message"
+        ></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- CHAT ERROR -->
+  <div
+    class="chat-error"
+    ng-repeat="error in vm.errors"
+    layout="row"
+    layout-align="center end"
+    layout-margin
+  >
+    <i class="mdi mdi-alert mdi-24px mdi-light"></i>
+    <md-tooltip md-direction="top"
+      >{{error.message || 'Service temporarily unavailable.'}}</md-tooltip
+    >
+    <span class="chat-error-message"
+      >{{error.message || 'Service temporarily unavailable.'}}</span
+    >
+  </div>
+  <!-- CHAT ERROR -->
+</md-content>
+<!-- / CHAT CONTENT -->
+
+<!-- CHAT FOOTER -->
+<div layout="row" layout-align="center center" class="chat-footer md-padding">
+  <div id="input_text" layout="row" layout-align="end center">
+    <input id="emojionearea" />
+
+    <md-button
+      id="attachmentButton"
+      ng-if="settings.enableCustomerAttachment"
+      class="md-fab md-mini md-warn"
+      type="button"
+      flow-init
+      flow-btn
+      flow-file-added="vm.fileAdded($file, $event, $flow)"
+    >
+      <i class="mdi mdi-attachment mdi-24px mdi-light"></i>
+    </md-button>
+  </div>
+
+  <md-button
+    id="sendButton"
+    ng-if="settings.enableSendButton"
+    class="md-fab md-mini md-warn"
+    type="button"
+    ng-click="vm.reply_button($event)"
+  >
+    <i
+      id="sendButton_icon"
+      class="mdi mdi-send mdi-24px mdi-light icon_color"
+    ></i>
+  </md-button>
+</div>
+<!-- / CHAT FOOTER -->