{"version":3,"file":"CYnCwpKs.js","sources":["../../../../components/messenger-parts/MessageIn.vue","../../../../components/messenger-parts/MessageIn.vue","../../../../components/messenger-parts/MessageOut.vue","../../../../components/messenger-parts/MessageOut.vue","../../../../components/dropdown/Dropdown4.vue","../../../../components/dropdown/Dropdown4.vue","../../../../layouts/default-layout/components/extras/MessengerDrawer.vue","../../../../layouts/default-layout/components/extras/MessengerDrawer.vue"],"sourcesContent":["<template>\n  <div class=\"d-flex justify-content-start mb-10\">\n    <!--begin::Wrapper-->\n    <div class=\"d-flex flex-column align-items-start\">\n      <!--begin::User-->\n      <div class=\"d-flex align-items-center mb-2\">\n        <div class=\"symbol symbol-35px symbol-circle\">\n          <img alt=\"Pic\" :src=\"image\" />\n        </div>\n\n        <!--begin::Details-->\n        <div class=\"ms-3\">\n          <a\n            href=\"#\"\n            class=\"fs-5 fw-bold text-gray-900 text-hover-primary me-1\"\n            >{{ name }}</a\n          >\n          <span class=\"text-muted fs-7 mb-1\">{{ time }}</span>\n        </div>\n        <!--end::Details-->\n      </div>\n      <!--end::User-->\n\n      <!--begin::Text-->\n      <div\n        class=\"p-5 rounded bg-light-info text-gray-900 fw-semibold mw-lg-400px text-start\"\n        data-kt-element=\"message-text\"\n      >\n        {{ text }}\n      </div>\n      <!--end::Text-->\n    </div>\n  </div>\n  <!--end::Wrapper-->\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  name: \"message-out\",\n  props: {\n    name: String,\n    image: String,\n    time: String,\n    text: String,\n  },\n});\n</script>\n","<template>\n  <div class=\"d-flex justify-content-start mb-10\">\n    <!--begin::Wrapper-->\n    <div class=\"d-flex flex-column align-items-start\">\n      <!--begin::User-->\n      <div class=\"d-flex align-items-center mb-2\">\n        <div class=\"symbol symbol-35px symbol-circle\">\n          <img alt=\"Pic\" :src=\"image\" />\n        </div>\n\n        <!--begin::Details-->\n        <div class=\"ms-3\">\n          <a\n            href=\"#\"\n            class=\"fs-5 fw-bold text-gray-900 text-hover-primary me-1\"\n            >{{ name }}</a\n          >\n          <span class=\"text-muted fs-7 mb-1\">{{ time }}</span>\n        </div>\n        <!--end::Details-->\n      </div>\n      <!--end::User-->\n\n      <!--begin::Text-->\n      <div\n        class=\"p-5 rounded bg-light-info text-gray-900 fw-semibold mw-lg-400px text-start\"\n        data-kt-element=\"message-text\"\n      >\n        {{ text }}\n      </div>\n      <!--end::Text-->\n    </div>\n  </div>\n  <!--end::Wrapper-->\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  name: \"message-out\",\n  props: {\n    name: String,\n    image: String,\n    time: String,\n    text: String,\n  },\n});\n</script>\n","<template>\n  <div class=\"d-flex justify-content-end mb-10\">\n    <!--begin::Wrapper-->\n    <div class=\"d-flex flex-column align-items-end\">\n      <!--begin::User-->\n      <div class=\"d-flex align-items-center mb-2\">\n        <!--begin::Details-->\n        <div class=\"me-3\">\n          <span class=\"text-muted fs-7 mb-1\">{{ time }}</span>\n          <a href=\"#\" class=\"fs-5 fw-bold text-gray-900 text-hover-primary ms-1\"\n            >You</a\n          >\n        </div>\n        <!--end::Details-->\n\n        <div class=\"symbol symbol-35px symbol-circle\">\n          <img alt=\"Pic\" :src=\"image\" />\n        </div>\n      </div>\n      <!--end::User-->\n\n      <!--begin::Text-->\n      <div\n        class=\"p-5 rounded bg-light-info text-gray-900 fw-semibold mw-lg-400px text-start\"\n        data-kt-element=\"message-text\"\n      >\n        {{ text }}\n      </div>\n      <!--end::Text-->\n    </div>\n    <!--end::Wrapper-->\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  name: \"message-out\",\n  props: {\n    image: String,\n    time: String,\n    text: String,\n  },\n});\n</script>\n","<template>\n  <div class=\"d-flex justify-content-end mb-10\">\n    <!--begin::Wrapper-->\n    <div class=\"d-flex flex-column align-items-end\">\n      <!--begin::User-->\n      <div class=\"d-flex align-items-center mb-2\">\n        <!--begin::Details-->\n        <div class=\"me-3\">\n          <span class=\"text-muted fs-7 mb-1\">{{ time }}</span>\n          <a href=\"#\" class=\"fs-5 fw-bold text-gray-900 text-hover-primary ms-1\"\n            >You</a\n          >\n        </div>\n        <!--end::Details-->\n\n        <div class=\"symbol symbol-35px symbol-circle\">\n          <img alt=\"Pic\" :src=\"image\" />\n        </div>\n      </div>\n      <!--end::User-->\n\n      <!--begin::Text-->\n      <div\n        class=\"p-5 rounded bg-light-info text-gray-900 fw-semibold mw-lg-400px text-start\"\n        data-kt-element=\"message-text\"\n      >\n        {{ text }}\n      </div>\n      <!--end::Text-->\n    </div>\n    <!--end::Wrapper-->\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  name: \"message-out\",\n  props: {\n    image: String,\n    time: String,\n    text: String,\n  },\n});\n</script>\n","<template>\n  <!--begin::Menu 3-->\n  <div\n    class=\"menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3\"\n    data-kt-menu=\"true\"\n  >\n    <!--begin::Heading-->\n    <div class=\"menu-item px-3\">\n      <div class=\"menu-content text-muted pb-2 px-3 fs-7 text-uppercase\">\n        Contacts\n      </div>\n    </div>\n    <!--end::Heading-->\n\n    <!--begin::Menu item-->\n    <div class=\"menu-item px-3\">\n      <a\n        href=\"#\"\n        class=\"menu-link px-3\"\n        data-bs-toggle=\"modal\"\n        data-bs-target=\"#kt_modal_users_search\"\n      >\n        Add Contact\n      </a>\n    </div>\n    <!--end::Menu item-->\n\n    <!--begin::Menu item-->\n    <div class=\"menu-item px-3\">\n      <a\n        href=\"#\"\n        class=\"menu-link flex-stack px-3\"\n        data-bs-toggle=\"modal\"\n        data-bs-target=\"#kt_modal_invite_friends\"\n      >\n        Invite Contacts\n\n        <i\n          class=\"fas fa-exclamation-circle ms-2 fs-7\"\n          data-bs-toggle=\"tooltip\"\n          title=\"Specify a contact email to send an invitation\"\n        ></i>\n      </a>\n    </div>\n    <!--end::Menu item-->\n\n    <!--begin::Menu item-->\n    <div\n      class=\"menu-item px-3\"\n      data-kt-menu-trigger=\"hover\"\n      data-kt-menu-placement=\"right-start\"\n      data-kt-menu-flip=\"left, center, top\"\n    >\n      <a href=\"#\" class=\"menu-link px-3\">\n        <span class=\"menu-title\">Groups</span>\n        <span class=\"menu-arrow\"></span>\n      </a>\n\n      <!--begin::Menu sub-->\n      <div class=\"menu-sub menu-sub-dropdown w-175px py-4\">\n        <!--begin::Menu item-->\n        <div class=\"menu-item px-3\">\n          <a\n            href=\"#\"\n            class=\"menu-link px-3\"\n            data-bs-toggle=\"tooltip\"\n            title=\"Coming soon\"\n          >\n            Create Group\n          </a>\n        </div>\n        <!--end::Menu item-->\n\n        <!--begin::Menu item-->\n        <div class=\"menu-item px-3\">\n          <a\n            href=\"#\"\n            class=\"menu-link px-3\"\n            data-bs-toggle=\"tooltip\"\n            title=\"Coming soon\"\n          >\n            Invite Members\n          </a>\n        </div>\n        <!--end::Menu item-->\n\n        <!--begin::Menu item-->\n        <div class=\"menu-item px-3\">\n          <a\n            href=\"#\"\n            class=\"menu-link px-3\"\n            data-bs-toggle=\"tooltip\"\n            title=\"Coming soon\"\n          >\n            Settings\n          </a>\n        </div>\n        <!--end::Menu item-->\n      </div>\n      <!--end::Menu sub-->\n    </div>\n    <!--end::Menu item-->\n\n    <!--begin::Menu item-->\n    <div class=\"menu-item px-3 my-1\">\n      <a\n        href=\"#\"\n        class=\"menu-link px-3\"\n        data-bs-toggle=\"tooltip\"\n        title=\"Coming soon\"\n      >\n        Settings\n      </a>\n    </div>\n    <!--end::Menu item-->\n  </div>\n  <!--end::Menu 3-->\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  name: \"dropdown-5\",\n  components: {},\n});\n</script>\n","<template>\n  <!--begin::Menu 3-->\n  <div\n    class=\"menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3\"\n    data-kt-menu=\"true\"\n  >\n    <!--begin::Heading-->\n    <div class=\"menu-item px-3\">\n      <div class=\"menu-content text-muted pb-2 px-3 fs-7 text-uppercase\">\n        Contacts\n      </div>\n    </div>\n    <!--end::Heading-->\n\n    <!--begin::Menu item-->\n    <div class=\"menu-item px-3\">\n      <a\n        href=\"#\"\n        class=\"menu-link px-3\"\n        data-bs-toggle=\"modal\"\n        data-bs-target=\"#kt_modal_users_search\"\n      >\n        Add Contact\n      </a>\n    </div>\n    <!--end::Menu item-->\n\n    <!--begin::Menu item-->\n    <div class=\"menu-item px-3\">\n      <a\n        href=\"#\"\n        class=\"menu-link flex-stack px-3\"\n        data-bs-toggle=\"modal\"\n        data-bs-target=\"#kt_modal_invite_friends\"\n      >\n        Invite Contacts\n\n        <i\n          class=\"fas fa-exclamation-circle ms-2 fs-7\"\n          data-bs-toggle=\"tooltip\"\n          title=\"Specify a contact email to send an invitation\"\n        ></i>\n      </a>\n    </div>\n    <!--end::Menu item-->\n\n    <!--begin::Menu item-->\n    <div\n      class=\"menu-item px-3\"\n      data-kt-menu-trigger=\"hover\"\n      data-kt-menu-placement=\"right-start\"\n      data-kt-menu-flip=\"left, center, top\"\n    >\n      <a href=\"#\" class=\"menu-link px-3\">\n        <span class=\"menu-title\">Groups</span>\n        <span class=\"menu-arrow\"></span>\n      </a>\n\n      <!--begin::Menu sub-->\n      <div class=\"menu-sub menu-sub-dropdown w-175px py-4\">\n        <!--begin::Menu item-->\n        <div class=\"menu-item px-3\">\n          <a\n            href=\"#\"\n            class=\"menu-link px-3\"\n            data-bs-toggle=\"tooltip\"\n            title=\"Coming soon\"\n          >\n            Create Group\n          </a>\n        </div>\n        <!--end::Menu item-->\n\n        <!--begin::Menu item-->\n        <div class=\"menu-item px-3\">\n          <a\n            href=\"#\"\n            class=\"menu-link px-3\"\n            data-bs-toggle=\"tooltip\"\n            title=\"Coming soon\"\n          >\n            Invite Members\n          </a>\n        </div>\n        <!--end::Menu item-->\n\n        <!--begin::Menu item-->\n        <div class=\"menu-item px-3\">\n          <a\n            href=\"#\"\n            class=\"menu-link px-3\"\n            data-bs-toggle=\"tooltip\"\n            title=\"Coming soon\"\n          >\n            Settings\n          </a>\n        </div>\n        <!--end::Menu item-->\n      </div>\n      <!--end::Menu sub-->\n    </div>\n    <!--end::Menu item-->\n\n    <!--begin::Menu item-->\n    <div class=\"menu-item px-3 my-1\">\n      <a\n        href=\"#\"\n        class=\"menu-link px-3\"\n        data-bs-toggle=\"tooltip\"\n        title=\"Coming soon\"\n      >\n        Settings\n      </a>\n    </div>\n    <!--end::Menu item-->\n  </div>\n  <!--end::Menu 3-->\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  name: \"dropdown-5\",\n  components: {},\n});\n</script>\n","<template>\n  <!--begin::Chat drawer-->\n  <div\n    id=\"kt_drawer_chat\"\n    class=\"bg-body\"\n    data-kt-drawer=\"true\"\n    data-kt-drawer-name=\"chat\"\n    data-kt-drawer-activate=\"true\"\n    data-kt-drawer-overlay=\"true\"\n    data-kt-drawer-width=\"{default:'300px', 'md': '500px'}\"\n    data-kt-drawer-direction=\"end\"\n    data-kt-drawer-toggle=\"#kt_drawer_chat_toggle\"\n    data-kt-drawer-close=\"#kt_drawer_chat_close\"\n  >\n    <!--begin::Messenger-->\n    <div class=\"card w-100\" id=\"kt_drawer_chat_messenger\">\n      <!--begin::Card header-->\n      <div class=\"card-header pe-5\" id=\"kt_drawer_chat_messenger_header\">\n        <!--begin::Title-->\n        <div class=\"card-title\">\n          <!--begin::User-->\n          <div class=\"d-flex justify-content-center flex-column me-3\">\n            <a\n              href=\"#\"\n              class=\"fs-4 fw-bold text-gray-900 text-hover-primary me-1 mb-2 lh-1\"\n              >Brian Cox</a\n            >\n\n            <!--begin::Info-->\n            <div class=\"mb-0 lh-1\">\n              <span\n                class=\"badge badge-success badge-circle w-10px h-10px me-1\"\n              ></span>\n              <span class=\"fs-7 fw-semibold text-gray-500\">Active</span>\n            </div>\n            <!--end::Info-->\n          </div>\n          <!--end::User-->\n        </div>\n        <!--end::Title-->\n\n        <!--begin::Card toolbar-->\n        <div class=\"card-toolbar\">\n          <!--begin::Menu-->\n          <div class=\"me-2\">\n            <button\n              class=\"btn btn-sm btn-icon btn-active-icon-primary\"\n              data-kt-menu-trigger=\"click\"\n              data-kt-menu-placement=\"bottom-end\"\n              data-kt-menu-flip=\"top-end\"\n            >\n              <i class=\"bi bi-three-dots fs-3\"></i>\n            </button>\n            <Dropdown4></Dropdown4>\n          </div>\n          <!--end::Menu-->\n\n          <!--begin::Close-->\n          <div\n            class=\"btn btn-sm btn-icon btn-active-icon-primary\"\n            id=\"kt_drawer_chat_close\"\n          >\n            <KTIcon icon-name=\"cross\" icon-class=\"fs-2x\" />\n          </div>\n          <!--end::Close-->\n        </div>\n        <!--end::Card toolbar-->\n      </div>\n      <!--end::Card header-->\n\n      <!--begin::Card body-->\n      <div class=\"card-body\" id=\"kt_drawer_chat_messenger_body\">\n        <!--begin::Messages-->\n        <div\n          class=\"scroll-y me-n5 pe-5\"\n          ref=\"messagesRef\"\n          data-kt-element=\"messages\"\n          data-kt-scroll=\"true\"\n          data-kt-scroll-activate=\"true\"\n          data-kt-scroll-height=\"auto\"\n          data-kt-scroll-dependencies=\"#kt_drawer_chat_messenger_header, #kt_drawer_chat_messenger_footer\"\n          data-kt-scroll-wrappers=\"#kt_drawer_chat_messenger_body\"\n          data-kt-scroll-offset=\"0px\"\n        >\n          <template v-for=\"(item, index) in messages\" :key=\"index\">\n            <MessageIn\n              ref=\"messagesInRef\"\n              v-if=\"item.type === 'in'\"\n              :name=\"item.name\"\n              :image=\"item.image\"\n              :time=\"item.time\"\n              :text=\"item.text\"\n            ></MessageIn>\n            <MessageOut\n              ref=\"messagesOutRef\"\n              v-if=\"item.type === 'out'\"\n              :image=\"item.image\"\n              :time=\"item.time\"\n              :text=\"item.text\"\n            ></MessageOut>\n          </template>\n        </div>\n        <!--end::Messages-->\n      </div>\n      <!--end::Card body-->\n\n      <!--begin::Card footer-->\n      <div class=\"card-footer pt-4\" id=\"kt_drawer_chat_messenger_footer\">\n        <!--begin::Input-->\n        <input\n          class=\"form-control form-control-flush mb-3\"\n          data-kt-element=\"input\"\n          placeholder=\"Type a message\"\n          v-model=\"newMessageText\"\n          @keydown.enter=\"addNewMessage\"\n        />\n        <!--end::Input-->\n\n        <!--begin:Toolbar-->\n        <div class=\"d-flex flex-stack\">\n          <!--begin::Actions-->\n          <div class=\"d-flex align-items-center me-2\">\n            <button\n              class=\"btn btn-sm btn-icon btn-active-light-primary me-1\"\n              type=\"button\"\n              data-bs-toggle=\"tooltip\"\n              title=\"Coming soon\"\n            >\n              <i class=\"bi bi-paperclip fs-3\"></i>\n            </button>\n            <button\n              class=\"btn btn-sm btn-icon btn-active-light-primary me-1\"\n              type=\"button\"\n              data-bs-toggle=\"tooltip\"\n              title=\"Coming soon\"\n            >\n              <i class=\"bi bi-upload fs-3\"></i>\n            </button>\n          </div>\n          <!--end::Actions-->\n\n          <!--begin::Send-->\n          <button\n            @click=\"addNewMessage\"\n            class=\"btn btn-primary\"\n            type=\"button\"\n            data-kt-element=\"send\"\n          >\n            Send\n          </button>\n          <!--end::Send-->\n        </div>\n        <!--end::Toolbar-->\n      </div>\n      <!--end::Card footer-->\n    </div>\n    <!--end::Messenger-->\n  </div>\n  <!--end::Chat drawer-->\n</template>\n\n<script lang=\"ts\">\nimport { getAssetPath } from \"@/core/helpers/assets\";\nimport { defineComponent, ref } from \"vue\";\nimport MessageIn from \"@/components/messenger-parts/MessageIn.vue\";\nimport MessageOut from \"@/components/messenger-parts/MessageOut.vue\";\nimport Dropdown4 from \"@/components/dropdown/Dropdown4.vue\";\n\ninterface KTMessage {\n  type: string;\n  name?: string;\n  image: string;\n  time: string;\n  text: string;\n}\n\nexport default defineComponent({\n  name: \"upgrade-to-pro\",\n  components: {\n    MessageIn,\n    MessageOut,\n    Dropdown4,\n  },\n  setup() {\n    const messagesRef = ref<null | HTMLElement>(null);\n    const messagesInRef = ref<null | HTMLElement>(null);\n    const messagesOutRef = ref<null | HTMLElement>(null);\n\n    const messages = ref<Array<KTMessage>>([\n      {\n        type: \"in\",\n        name: \"Brian Cox\",\n        image: getAssetPath(\"media/avatars/300-25.jpg\"),\n        time: \"5 Hours\",\n        text: \"How likely are you to recommend our company to your friends and family ?\",\n      },\n      {\n        type: \"out\",\n        image: getAssetPath(\"media/avatars/300-1.jpg\"),\n        time: \"2 Hours\",\n        text: \"Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.\",\n      },\n      {\n        type: \"in\",\n        name: \"Brian Cox\",\n        image: getAssetPath(\"media/avatars/300-25.jpg\"),\n        time: \"2 Hour\",\n        text: \"Ok, Understood!\",\n      },\n      {\n        type: \"out\",\n        image: getAssetPath(\"media/avatars/300-1.jpg\"),\n        time: \"2 Hours\",\n        text: \"You’ll receive notifications for all issues, pull requests!\",\n      },\n      {\n        type: \"in\",\n        name: \"Brian Cox\",\n        image: getAssetPath(\"media/avatars/300-25.jpg\"),\n        time: \"1 Hour\",\n        text: \"You can unwatch this repository immediately by clicking here: Keenthemes.com\",\n      },\n      {\n        type: \"out\",\n        image: getAssetPath(\"media/avatars/300-1.jpg\"),\n        time: \"4 mins\",\n        text: \"Most purchased Business courses during this sale!\",\n      },\n      {\n        type: \"in\",\n        name: \"Brian Cox\",\n        image: getAssetPath(\"media/avatars/300-25.jpg\"),\n        time: \"2 mins\",\n        text: \"Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided\",\n      },\n    ]);\n\n    const newMessageText = ref(\"\");\n\n    const addNewMessage = () => {\n      if (!newMessageText.value) {\n        return;\n      }\n      messages.value.push({\n        type: \"out\",\n        image: getAssetPath(\"media/avatars/300-1.jpg\"),\n        time: \"Just now\",\n        text: newMessageText.value,\n      });\n\n      setTimeout(() => {\n        if (messagesRef.value) {\n          messagesRef.value.scrollTop = messagesRef.value.scrollHeight;\n        }\n      }, 1);\n\n      newMessageText.value = \"\";\n      setTimeout(() => {\n        messages.value.push({\n          type: \"in\",\n          name: \"Ja Morant\",\n          image: getAssetPath(\"media/avatars/300-25.jpg\"),\n          time: \"Just now\",\n          text: \"Thank you for your awesome support!\",\n        });\n\n        setTimeout(() => {\n          if (messagesRef.value) {\n            messagesRef.value.scrollTop = messagesRef.value.scrollHeight;\n          }\n        }, 1);\n      }, 2000);\n    };\n\n    return {\n      messages,\n      messagesRef,\n      newMessageText,\n      addNewMessage,\n      messagesInRef,\n      messagesOutRef,\n      getAssetPath,\n    };\n  },\n});\n</script>\n","<template>\n  <!--begin::Chat drawer-->\n  <div\n    id=\"kt_drawer_chat\"\n    class=\"bg-body\"\n    data-kt-drawer=\"true\"\n    data-kt-drawer-name=\"chat\"\n    data-kt-drawer-activate=\"true\"\n    data-kt-drawer-overlay=\"true\"\n    data-kt-drawer-width=\"{default:'300px', 'md': '500px'}\"\n    data-kt-drawer-direction=\"end\"\n    data-kt-drawer-toggle=\"#kt_drawer_chat_toggle\"\n    data-kt-drawer-close=\"#kt_drawer_chat_close\"\n  >\n    <!--begin::Messenger-->\n    <div class=\"card w-100\" id=\"kt_drawer_chat_messenger\">\n      <!--begin::Card header-->\n      <div class=\"card-header pe-5\" id=\"kt_drawer_chat_messenger_header\">\n        <!--begin::Title-->\n        <div class=\"card-title\">\n          <!--begin::User-->\n          <div class=\"d-flex justify-content-center flex-column me-3\">\n            <a\n              href=\"#\"\n              class=\"fs-4 fw-bold text-gray-900 text-hover-primary me-1 mb-2 lh-1\"\n              >Brian Cox</a\n            >\n\n            <!--begin::Info-->\n            <div class=\"mb-0 lh-1\">\n              <span\n                class=\"badge badge-success badge-circle w-10px h-10px me-1\"\n              ></span>\n              <span class=\"fs-7 fw-semibold text-gray-500\">Active</span>\n            </div>\n            <!--end::Info-->\n          </div>\n          <!--end::User-->\n        </div>\n        <!--end::Title-->\n\n        <!--begin::Card toolbar-->\n        <div class=\"card-toolbar\">\n          <!--begin::Menu-->\n          <div class=\"me-2\">\n            <button\n              class=\"btn btn-sm btn-icon btn-active-icon-primary\"\n              data-kt-menu-trigger=\"click\"\n              data-kt-menu-placement=\"bottom-end\"\n              data-kt-menu-flip=\"top-end\"\n            >\n              <i class=\"bi bi-three-dots fs-3\"></i>\n            </button>\n            <Dropdown4></Dropdown4>\n          </div>\n          <!--end::Menu-->\n\n          <!--begin::Close-->\n          <div\n            class=\"btn btn-sm btn-icon btn-active-icon-primary\"\n            id=\"kt_drawer_chat_close\"\n          >\n            <KTIcon icon-name=\"cross\" icon-class=\"fs-2x\" />\n          </div>\n          <!--end::Close-->\n        </div>\n        <!--end::Card toolbar-->\n      </div>\n      <!--end::Card header-->\n\n      <!--begin::Card body-->\n      <div class=\"card-body\" id=\"kt_drawer_chat_messenger_body\">\n        <!--begin::Messages-->\n        <div\n          class=\"scroll-y me-n5 pe-5\"\n          ref=\"messagesRef\"\n          data-kt-element=\"messages\"\n          data-kt-scroll=\"true\"\n          data-kt-scroll-activate=\"true\"\n          data-kt-scroll-height=\"auto\"\n          data-kt-scroll-dependencies=\"#kt_drawer_chat_messenger_header, #kt_drawer_chat_messenger_footer\"\n          data-kt-scroll-wrappers=\"#kt_drawer_chat_messenger_body\"\n          data-kt-scroll-offset=\"0px\"\n        >\n          <template v-for=\"(item, index) in messages\" :key=\"index\">\n            <MessageIn\n              ref=\"messagesInRef\"\n              v-if=\"item.type === 'in'\"\n              :name=\"item.name\"\n              :image=\"item.image\"\n              :time=\"item.time\"\n              :text=\"item.text\"\n            ></MessageIn>\n            <MessageOut\n              ref=\"messagesOutRef\"\n              v-if=\"item.type === 'out'\"\n              :image=\"item.image\"\n              :time=\"item.time\"\n              :text=\"item.text\"\n            ></MessageOut>\n          </template>\n        </div>\n        <!--end::Messages-->\n      </div>\n      <!--end::Card body-->\n\n      <!--begin::Card footer-->\n      <div class=\"card-footer pt-4\" id=\"kt_drawer_chat_messenger_footer\">\n        <!--begin::Input-->\n        <input\n          class=\"form-control form-control-flush mb-3\"\n          data-kt-element=\"input\"\n          placeholder=\"Type a message\"\n          v-model=\"newMessageText\"\n          @keydown.enter=\"addNewMessage\"\n        />\n        <!--end::Input-->\n\n        <!--begin:Toolbar-->\n        <div class=\"d-flex flex-stack\">\n          <!--begin::Actions-->\n          <div class=\"d-flex align-items-center me-2\">\n            <button\n              class=\"btn btn-sm btn-icon btn-active-light-primary me-1\"\n              type=\"button\"\n              data-bs-toggle=\"tooltip\"\n              title=\"Coming soon\"\n            >\n              <i class=\"bi bi-paperclip fs-3\"></i>\n            </button>\n            <button\n              class=\"btn btn-sm btn-icon btn-active-light-primary me-1\"\n              type=\"button\"\n              data-bs-toggle=\"tooltip\"\n              title=\"Coming soon\"\n            >\n              <i class=\"bi bi-upload fs-3\"></i>\n            </button>\n          </div>\n          <!--end::Actions-->\n\n          <!--begin::Send-->\n          <button\n            @click=\"addNewMessage\"\n            class=\"btn btn-primary\"\n            type=\"button\"\n            data-kt-element=\"send\"\n          >\n            Send\n          </button>\n          <!--end::Send-->\n        </div>\n        <!--end::Toolbar-->\n      </div>\n      <!--end::Card footer-->\n    </div>\n    <!--end::Messenger-->\n  </div>\n  <!--end::Chat drawer-->\n</template>\n\n<script lang=\"ts\">\nimport { getAssetPath } from \"@/core/helpers/assets\";\nimport { defineComponent, ref } from \"vue\";\nimport MessageIn from \"@/components/messenger-parts/MessageIn.vue\";\nimport MessageOut from \"@/components/messenger-parts/MessageOut.vue\";\nimport Dropdown4 from \"@/components/dropdown/Dropdown4.vue\";\n\ninterface KTMessage {\n  type: string;\n  name?: string;\n  image: string;\n  time: string;\n  text: string;\n}\n\nexport default defineComponent({\n  name: \"upgrade-to-pro\",\n  components: {\n    MessageIn,\n    MessageOut,\n    Dropdown4,\n  },\n  setup() {\n    const messagesRef = ref<null | HTMLElement>(null);\n    const messagesInRef = ref<null | HTMLElement>(null);\n    const messagesOutRef = ref<null | HTMLElement>(null);\n\n    const messages = ref<Array<KTMessage>>([\n      {\n        type: \"in\",\n        name: \"Brian Cox\",\n        image: getAssetPath(\"media/avatars/300-25.jpg\"),\n        time: \"5 Hours\",\n        text: \"How likely are you to recommend our company to your friends and family ?\",\n      },\n      {\n        type: \"out\",\n        image: getAssetPath(\"media/avatars/300-1.jpg\"),\n        time: \"2 Hours\",\n        text: \"Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.\",\n      },\n      {\n        type: \"in\",\n        name: \"Brian Cox\",\n        image: getAssetPath(\"media/avatars/300-25.jpg\"),\n        time: \"2 Hour\",\n        text: \"Ok, Understood!\",\n      },\n      {\n        type: \"out\",\n        image: getAssetPath(\"media/avatars/300-1.jpg\"),\n        time: \"2 Hours\",\n        text: \"You’ll receive notifications for all issues, pull requests!\",\n      },\n      {\n        type: \"in\",\n        name: \"Brian Cox\",\n        image: getAssetPath(\"media/avatars/300-25.jpg\"),\n        time: \"1 Hour\",\n        text: \"You can unwatch this repository immediately by clicking here: Keenthemes.com\",\n      },\n      {\n        type: \"out\",\n        image: getAssetPath(\"media/avatars/300-1.jpg\"),\n        time: \"4 mins\",\n        text: \"Most purchased Business courses during this sale!\",\n      },\n      {\n        type: \"in\",\n        name: \"Brian Cox\",\n        image: getAssetPath(\"media/avatars/300-25.jpg\"),\n        time: \"2 mins\",\n        text: \"Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided\",\n      },\n    ]);\n\n    const newMessageText = ref(\"\");\n\n    const addNewMessage = () => {\n      if (!newMessageText.value) {\n        return;\n      }\n      messages.value.push({\n        type: \"out\",\n        image: getAssetPath(\"media/avatars/300-1.jpg\"),\n        time: \"Just now\",\n        text: newMessageText.value,\n      });\n\n      setTimeout(() => {\n        if (messagesRef.value) {\n          messagesRef.value.scrollTop = messagesRef.value.scrollHeight;\n        }\n      }, 1);\n\n      newMessageText.value = \"\";\n      setTimeout(() => {\n        messages.value.push({\n          type: \"in\",\n          name: \"Ja Morant\",\n          image: getAssetPath(\"media/avatars/300-25.jpg\"),\n          time: \"Just now\",\n          text: \"Thank you for your awesome support!\",\n        });\n\n        setTimeout(() => {\n          if (messagesRef.value) {\n            messagesRef.value.scrollTop = messagesRef.value.scrollHeight;\n          }\n        }, 1);\n      }, 2000);\n    };\n\n    return {\n      messages,\n      messagesRef,\n      newMessageText,\n      addNewMessage,\n      messagesInRef,\n      messagesOutRef,\n      getAssetPath,\n    };\n  },\n});\n</script>\n"],"names":["_sfc_main$3","defineComponent","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_createElementVNode","_hoisted_5","_toDisplayString","_sfc_main$2","_sfc_main$1","_sfc_main","MessageIn","MessageOut","Dropdown4","messagesRef","ref","messagesInRef","messagesOutRef","messages","getAssetPath","newMessageText","_resolveComponent","_createStaticVNode","_createVNode","_component_Dropdown4","_component_KTIcon","_Fragment","_renderList","item","index","_createBlock","_component_MessageIn","_createCommentVNode","_component_MessageOut","_withDirectives","$event","_withKeys","args","_vModelText","_hoisted_10"],"mappings":"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"}