2 files changed, 93 insertions, 0 deletions
diff --git a/src/components/chat_title/chat_title.js b/src/components/chat_title/chat_title.js
new file mode 100644
index 00000000..e424bb1f
--- /dev/null
+++ b/src/components/chat_title/chat_title.js
@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+
+export default Vue.component('chat-title', {
+  name: 'ChatTitle',
+  components: {
+    UserAvatar
+  },
+  props: [
+    'user', 'withAvatar'
+  ],
+  computed: {
+    title () {
+      return this.user ? this.user.screen_name : ''
+    },
+    htmlTitle () {
+      return this.user ? this.user.name_html : ''
+    }
+  },
+  methods: {
+    getUserProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name)
+    }
+  }
+})
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
new file mode 100644
index 00000000..c375b10b
--- /dev/null
+++ b/src/components/chat_title/chat_title.vue
@@ -0,0 +1,67 @@
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <div
+    class="chat-title"
+    :title="title"
+  >
+    <router-link
+      v-if="withAvatar && user"
+      :to="getUserProfileLink(user)"
+    >
+      <UserAvatar
+        :user="user"
+        width="23px"
+        height="23px"
+      />
+    </router-link>
+    <span
+      class="username"
+      v-html="htmlTitle"
+    />
+  </div>
+  <!-- eslint-enable vue/no-v-html -->
+</template>
+
+<script src="./chat_title.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.chat-title {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  align-items: center;
+
+  .username {
+    max-width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline;
+    word-wrap: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .emoji {
+      width: 14px;
+      height: 14px;
+      vertical-align: middle;
+      object-fit: contain
+    }
+  }
+
+  .still-image.avatar {
+    width: 23px;
+    height: 23px;
+    margin-right: 0.5em;
+
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+
+    &.animated::before {
+      display: none;
+    }
+  }
+}
+</style>