title: How styling and set good position of component RasaHQ/chatroom in angular application
body: <p>I want use this component <a href="https://github.com/RasaHQ/chatroom" rel="nofollow noreferrer">https://github.com/RasaHQ/chatroom</a> with angular.I added .css and .js files. The component is available on page, but not look good. I want change position of component. Should I change something in css or in react component also?</p>
  <p>index.html from angular</p>
  <pre><code>&lt;body&gt;
  &lt;div class=&quot;chat-container&quot;&gt;&lt;/div&gt;
  &lt;script src=&quot;assets/js/chatreact/Chatroom.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    var chatroom = new window.Chatroom({
      host: &quot;http://localhost:5005&quot;,
      title: &quot;Financial Demo&quot;,
      container: document.querySelector(&quot;.chat-container&quot;),
      welcomeMessage: &quot;Hi, how may I help you?&quot;
      // speechRecognition: &quot;en-US&quot;,
      // voiceLang: &quot;en-US&quot;
    });
    chatroom.openChat();
  &lt;/script&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  </code></pre>
  <p>Current position:
  <a href="https://i.stack.imgur.com/rJTTo.png" rel="nofollow noreferrer">position</a></p>
  <p>Expected position:
  <a href="https://i.stack.imgur.com/nF3ZI.png" rel="nofollow noreferrer">Expected position</a></p>
  <pre><code>.chatroom {
    width: 300px;
    height: 300px;
    color: #343d4e;
    /*max-height: 90vh;*/
    background-color: rgba(200, 200, 200, 0.9);
    border-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    letter-spacing: normal;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); }
    .chatroom * {
      box-sizing: border-box; }
    .chatroom.closed {
      height: 40px; }
    .chatroom h3 {
      background-color: #343d4e;
      color: #fff;
      margin: 0;
      height: 40px;
      font-weight: 600;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer; }
    .chatroom .chats {
      box-sizing: border-box;
      padding: 20px;
      margin: 0;
      height: calc(100% - 80px);
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch; }
      .chatroom .chats .chat {
        background: rgba(255, 255, 255, 0.8);
        position: relative;
        padding: 5px 13px;
        font-size: 14px;
        border-radius: 10px;
        list-style: none;
        float: left;
        clear: both;
        margin: 10px 0 0 0;
        max-width: 90%; }
        .chatroom .chats .chat img {
          max-width: 100%;
          vertical-align: middle; }
        .chatroom .chats .chat.left {
          border-bottom-left-radius: 0; }
        .chatroom .chats .chat.right {
          float: right;
          clear: both;
          border-bottom-right-radius: 0; }
        .chatroom .chats .chat .text {
          word-wrap: break-word; }
        .chatroom .chats .chat.chat-img {
          padding: 5px; }
        .chatroom .chats .chat a {
          text-decoration: none;
          color: #3498db; }
        .chatroom .chats .chat ul,
        .chatroom .chats .chat ol {
          margin: 0;
          padding-left: 1.5em; }
        .chatroom .chats .chat ul li,
        .chatroom .chats .chat ol li {
          padding-left: 0; }
        .chatroom .chats .chat.waiting {
          margin: 10px 0;
          background: transparent;
          padding: 0; }
  
  @keyframes fade {
    from {
      opacity: 1; }
    to {
      opacity: 0.3; } }
          .chatroom .chats .chat.waiting span {
            font-size: 1.5em;
            animation-name: fade;
            animation-duration: 0.8s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: ease-in-out; }
          .chatroom .chats .chat.waiting span:nth-child(1) {
            animation-delay: 0s; }
          .chatroom .chats .chat.waiting span:nth-child(2) {
            animation-delay: 0.4s; }
          .chatroom .chats .chat.waiting span:nth-child(3) {
            animation-delay: 0.8s; }
      .chatroom .chats .time {
        list-style: none;
        clear: both;
        height: 10px;
        font-size: 10px;
        color: #414141;
        margin: 5px 0 20px 0; }
        .chatroom .chats .time.left {
          float: left; }
        .chatroom .chats .time.right {
          float: right; }
      .chatroom .chats .chat-buttons {
        position: relative;
        padding: 0;
        font-size: 14px;
        list-style: none;
        clear: both;
        margin: 10px 0;
        text-align: center; }
        .chatroom .chats .chat-buttons .chat-button {
          display: inline-block;
          transition: all 0.3s ease;
          cursor: pointer;
          margin: 3px;
          background-color: #343d4e;
          color: white;
          border: 2px solid white;
          padding: 5px 10px;
          letter-spacing: normal;
          border-radius: 5px; }
          .chatroom .chats .chat-buttons .chat-button:hover, .chatroom .chats .chat-buttons .chat-button.chat-button-selected {
            background-color: rgba(52, 61, 78, 0.6);
            color: white; }
          .chatroom .chats .chat-buttons .chat-button.chat-button-disabled {
            color: grey;
            border: 2px solid grey; }
    .chatroom .input {
      height: 40px;
      width: 100%;
      margin: 0;
      padding: 0 5px;
      background-color: #343d4e;
      display: flex;
      flex-direction: row;
      align-items: center; }
      .chatroom .input input[type=&quot;text&quot;] {
        background-color: rgba(255, 255, 255, 0.8);
        outline: 0;
        border: 1px solid white;
        border-right: none;
        color: #343d4e;
        padding: 0 5px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        height: 30px;
        flex: 4;
        box-sizing: border-box;
        font-size: 14px;
        transition: background-color 0.2s ease; }
        .chatroom .input input[type=&quot;text&quot;]:focus {
          box-shadow: none;
          background-color: white; }
      .chatroom .input input[type=&quot;submit&quot;] {
        display: inline-block;
        background: #343d4e;
        border: 1px solid white;
        color: white;
        height: 30px;
        min-width: 70px;
        line-height: 1;
        text-align: center;
        padding: 0;
        font-size: 12px;
        flex: 1;
        box-shadow: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        outline: none;
        font-weight: 600;
        text-transform: uppercase; }
        .chatroom .input input[type=&quot;submit&quot;]:hover {
          background: rgba(255, 255, 255, 0.8); }
    .chatroom #speech-input {
      height: 30px;
      width: 30px;
      margin-left: 5px;
      background: #343d4e;
      border: 1px solid white;
      color: white;
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.3s ease; }
      .chatroom #speech-input:hover {
        background: rgba(255, 255, 255, 0.8); }
    .chatroom .vertical-center {
      vertical-align: middle; }
  
  
  /*# sourceMappingURL=/Chatroom.css.map */
  </code></pre>