feat(chatbot): added new component

__snapshots__/alc-chatbot.md

@@ -0,0 +1,155 @@
+# `alc-chatbot`
+
+## `Basic`
+
+#### `DOM`
+
+```html
+<alc-chatbot
+  bot-icon="/components/chatbot/assets/avatar-chatbot.svg"
+  chatbot-icon="/components/chatbot/assets/avatar-chatbot.svg"
+  close-image="/components/chatbot/assets/icon-close-default.svg"
+  logo="/components/chatbot/assets/avatar-default.svg"
+  send-icon="/components/chatbot/assets/icon-send-default.svg"
+  user-icon="/components/chatbot/assets/avatar-chatbot.svg"
+>
+</alc-chatbot>
+```
+
+#### `Shadow DOM`
+
+```html
+<button
+  aria-label="Abrir conversación con Chatbot"
+  class="pointer"
+  part="bubble-btn"
+  style='background-image: url("/components/chatbot/assets/avatar-chatbot.svg");'
+></button>
+<div class="hidden" id="bubble" part="bubble">
+  <div part="header">
+    <img part="icon" src="/components/chatbot/assets/avatar-default.svg" title="Logo" />
+    <img
+      class="close pointer"
+      part="icon"
+      src="/components/chatbot/assets/icon-close-default.svg"
+      title="Close"
+    />
+  </div>
+  <div id="container" part="container"></div>
+  <div part="footer">
+    <alc-chat-form icon="/components/chatbot/assets/icon-send-default.svg"> </alc-chat-form>
+  </div>
+</div>
+```
+
+#### `Light DOM`
+
+```html
+
+```
+
+## `Basic with input`
+
+#### `DOM`
+
+```html
+<alc-chatbot
+  bot-icon="/components/chatbot/assets/avatar-chatbot.svg"
+  chatbot-icon="/components/chatbot/assets/avatar-chatbot.svg"
+  close-image="/components/chatbot/assets/icon-close-default.svg"
+  default-text-input="Hola!"
+  is-open=""
+  logo="/components/chatbot/assets/avatar-default.svg"
+  send-icon="/components/chatbot/assets/icon-send-default.svg"
+  user-icon="/components/chatbot/assets/avatar-chatbot.svg"
+>
+</alc-chatbot>
+```
+
+#### `Shadow DOM`
+
+```html
+<button
+  aria-label="Abrir conversación con Chatbot"
+  class="hidden pointer"
+  part="bubble-btn"
+  style='background-image: url("/components/chatbot/assets/avatar-chatbot.svg");'
+></button>
+<div id="bubble" part="bubble">
+  <div part="header">
+    <img part="icon" src="/components/chatbot/assets/avatar-default.svg" title="Logo" />
+    <img
+      class="close pointer"
+      part="icon"
+      src="/components/chatbot/assets/icon-close-default.svg"
+      title="Close"
+    />
+  </div>
+  <div id="container" part="container"></div>
+  <div part="footer">
+    <alc-chat-form icon="/components/chatbot/assets/icon-send-default.svg"> </alc-chat-form>
+  </div>
+</div>
+```
+
+#### `Light DOM`
+
+```html
+
+```
+
+## `Basic with messages`
+
+#### `DOM`
+
+```html
+<alc-chatbot
+  bot-icon="/components/chatbot/assets/avatar-chatbot.svg"
+  chatbot-icon="/components/chatbot/assets/avatar-chatbot.svg"
+  close-image="/components/chatbot/assets/icon-close-default.svg"
+  is-open=""
+  logo="/components/chatbot/assets/avatar-default.svg"
+  send-icon="/components/chatbot/assets/icon-send-default.svg"
+  user-icon="/components/chatbot/assets/avatar-chatbot.svg"
+>
+</alc-chatbot>
+```
+
+#### `Shadow DOM`
+
+```html
+<button
+  aria-label="Abrir conversación con Chatbot"
+  class="hidden pointer"
+  part="bubble-btn"
+  style='background-image: url("/components/chatbot/assets/avatar-chatbot.svg");'
+></button>
+<div id="bubble" part="bubble">
+  <div part="header">
+    <img part="icon" src="/components/chatbot/assets/avatar-default.svg" title="Logo" />
+    <img
+      class="close pointer"
+      part="icon"
+      src="/components/chatbot/assets/icon-close-default.svg"
+      title="Close"
+    />
+  </div>
+  <div id="container" part="container">
+    <alc-chat-text avatar="/components/chatbot/assets/avatar-chatbot.svg">
+      ¡Hola!
+    </alc-chat-text>
+    <alc-chat-text avatar="/components/chatbot/assets/avatar-chatbot.svg" bot="">
+      Hola :-)
+    </alc-chat-text>
+  </div>
+  <div part="footer">
+    <alc-chat-form icon="/components/chatbot/assets/icon-send-default.svg"> </alc-chat-form>
+  </div>
+</div>
+```
+
+#### `Light DOM`
+
+```html
+
+```