ADD chat app messages with attachment rref #5392

css done

app/app.css

@@ -2443,10 +2443,99 @@ table.dataTable thead .sorting:after {
 	margin-top: 4px;
 }
 
-.chat-app .conversation-section .conversation-body .conversation-block .user-message .message-content {
+.chat-app .conversation-section .user-message .message-content {
 	font-family: 'robotomedium';
 }
 
+.chat-app .conversation-section .user-message .message-content .attachment-message {
+	color: #909090;
+}
+
+.chat-app .conversation-section .user-message .message-content .attachment-message span {
+	color: #b51533;
+}
+
+.chat-app .conversation-section .user-message .message-content .attachment-holder {
+	position:relative;
+	display: inline-block;
+	-webkit-transition: all .2s;
+    -moz-transition: all .2s;
+    -ms-transition: all .2s;
+    -o-transition: all .2s;
+    transition: all .2s;
+}
+
+.chat-app .conversation-section .user-message .message-content .attachment-holder .attachment-download {
+	position: absolute;
+    right: 10px;
+    top: 10px;
+    color: #fff;
+    font-size: 21px;
+	opacity:0;
+	cursor:pointer;
+	-webkit-transition: all .2s;
+    -moz-transition: all .2s;
+    -ms-transition: all .2s;
+    -o-transition: all .2s;
+    transition: all .2s;
+}
+
+.chat-app .conversation-section .user-message .message-content .attachment-holder:hover > .attachment-download {
+	opacity:0.6;
+}
+
+.chat-app .conversation-section .user-message .message-content .attachment-holder .attachment-download:hover {
+	opacity:1;
+}
+
+.chat-app .conversation-section .user-message .message-content .image-attached img {
+	width: 220px;
+    border-radius: 3px;
+    border: 1px solid #a0a0a0;
+}
+
+.chat-app .conversation-section .user-message .message-content .file-attached {
+	width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    padding: 10px;
+    padding-left: 5px;
+	background-color:#fff;
+}
+
+.chat-app .conversation-section .user-message .message-content .file-attached img {
+	width: 40px;
+	float:left;
+}
+
+.chat-app .conversation-section .user-message .message-content .file-attached .attached-file-info {
+	float:left;
+	margin-left:10px;
+}
+
+.chat-app .conversation-section .user-message .message-content .file-attached .attached-file-info div:first-child {
+	color: #333;
+    font-size: 15px;
+}
+
+.chat-app .conversation-section .user-message .message-content .file-attached .attached-file-info div:last-child {
+	color: #a2a2a2;
+    font-size: 13px;
+}
+
+.chat-app .conversation-section .user-message .message-content .file-attached .attachment-download {
+	color:#333;
+	margin-top:10px;
+}
+
+.chat-app .conversation-section .user-message .message-content .file-attached:hover > .attachment-download {
+	opacity:0.6;
+}
+
+.chat-app .conversation-section .user-message .message-content .file-attached .attachment-download:hover {
+	opacity:1;
+}
+
 .chat-app .chat-popup-window {
 	position: absolute;
     top: 0;