2 files changed, 9 insertions, 5 deletions
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index d8736d17..e649e907 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -1,3 +1,5 @@
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
 const chatPanel = {
   data () {
     return {
@@ -9,6 +11,9 @@ const chatPanel = {
   computed: {
     messages () {
       return this.$store.state.chat.messages
+    },
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name)
     }
   },
   methods: {
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index f174319a..1b9c63ff 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -13,8 +13,10 @@
             <img :src="message.author.avatar" />
           </span>
           <div class="chat-content">
-            <router-link class="chat-name" :to="{ name: 'user-profile', params: { id: message.author.id } }">
-              {{message.author.username}}
+            <router-link
+              class="chat-name"
+              :to="userProfileLink(message.author)">
+                {{message.author.username}}
             </router-link>
             <br>
             <span class="chat-text">
@@ -67,9 +69,6 @@
   overflow-x: hidden;
 }
 
-.chat-name {
-}
-
 .chat-message {
   display: flex;
   padding: 0.2em 0.5em