Feature: Typing Indicator on widget and dashboard (#811)

* Adds typing indicator for widget
* typing indicator for agents in dashboard

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

app/javascript/widget/components/AgentTypingBubble.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="agent-message-wrap">
+    <div class="agent-message">
+      <div class="avatar-wrap"></div>
+      <div class="message-wrap">
+        <div class="typing-bubble chat-bubble agent">
+          <img
+            src="~widget/assets/images/typing.gif"
+            alt="Agent is typing a message"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentTypingBubble',
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import '~widget/assets/scss/variables.scss';
+
+.typing-bubble {
+  max-width: $space-medium;
+  padding: $space-smaller $space-small;
+  border-bottom-left-radius: $space-two;
+  border-top-left-radius: $space-small;
+
+  img {
+    width: 100%;
+  }
+}
+</style>