import React from 'react'
import { Link } from 'react-router-dom'
import sanitizeHtml from 'sanitize-html'
import Moment from 'react-moment'
import {
  LabelIcon
} from '../icons'

export default function ConversationItemList ({ app, conversation }) {
  const renderConversationContent = (o) => {
    const message = o.lastMessage.message
    if (message.htmlContent) {
      return sanitizeHtml(message.htmlContent).substring(0, 250)
    }
  }

  const user = conversation.mainParticipant
  const message = conversation.lastMessage
  const participant = conversation.mainParticipant
  const appUser = message.appUser
  return (
    <Link
      to={`/apps/${app.key}/conversations/${conversation.key}`}
      className="block hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
    >
      <div className="px-6 py-4 whitespace-no-wrap border-b border-gray-200 ">
        <div className="flex items-center">
          <div className="flex-shrink-0 h-10 w-10">
            <img
              className="h-10 w-10 rounded-full"
              src={user.avatarUrl}
              alt={user.displayName}
            />
          </div>

          <div className="ml-4 truncate w-full">
            <div className="flex justify-between">
              <span className="text-sm leading-5 font-medium text-gray-900">
                {user.displayName}
              </span>

              <span className="text-xs leading-5 font-light text-gray-300">
                <Moment fromNow ago>
                  {message.createdAt}
                </Moment>
              </span>
            </div>

            <div className="text-sm leading-5 text-gray-500 flex">
              {appUser && appUser.id !== participant.id && (
                <img
                  alt={appUser.displayName}
                  className="rounded-full h-5 w-5 self-start mr-2"
                  src={appUser.avatarUrl}
                />
              )}

              {message.privateNote &&
                <span className="mr-2">
                  <LabelIcon/>
                </span>
              }

              <span
                dangerouslySetInnerHTML={{
                  __html: renderConversationContent(conversation)
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </Link>
  )
}

@@ -611,16 +611,52 @@
 appUser%0A
+  const tags = conversation.tagList%0A
   return
@@ -658,16 +658,16 @@
 eturn (%0A
-
     %3CLin
@@ -1248,16 +1248,17 @@
 -full%22%3E%0A
+%0A
         
@@ -1328,34 +1328,34 @@
 className=%22text-
-s
 m
+d
  leading-5 font-
@@ -1358,14 +1358,16 @@
 ont-
-medium
+semibold
  tex
@@ -1377,9 +1377,9 @@
 ray-
-9
+8
 00%22%3E
@@ -1720,16 +1720,26 @@
 500 flex
+ pb-2 pt-1
 %22%3E%0A     
@@ -2312,32 +2312,32 @@
              /%3E%0A
-
             %3C/di
@@ -2331,32 +2331,346 @@
          %3C/div%3E%0A
+%0A            %7B%0A              tags.map((o) =%3E%0A                %3Cspan key=%7B%60conversation-$%7Bconversation.key%7D-tag-$%7Bo%7D%60%7D%0A                  className=%22inline-block bg-red-200 rounded-full px-2 py-1 text-xs font-semibold text-gray-700 mr-2%22%3E%0A                  #%7Bo%7D%0A                %3C/span%3E%0A              )%0A            %7D%0A%0A
           %3C/div%3E

Update ItemList.js