Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14582 | Rev 15761 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
14581 stevensc 1 
/* eslint-disable react/prop-types */
14176 stevensc 2 
import React from 'react'
3 
import { useState, useRef, useEffect } from 'react'
4 
import styled from 'styled-components'
5 
import { axios } from '../../../utils'
6 
import Emojione from './emojione/Emojione'
7 
import SendFileModal from './send-file-modal/SendFileModal'
8 
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
9 
import MessageTemplate from './messageTemplate/MessageTemplate'
11350 nelberth 10 
 
11 
const StyledChatHead = styled.div`
12 
  .notify {
13 
    animation: notify 2s infinite;
14 
  }
15 
 
16 
  @keyframes notify {
17 
    0% {
18 
      background-color: unset;
19 
    }
20 
    50% {
21 
      background-color: #00b0ff;
22 
    }
23 
    100% {
24 
      background-color: unset;
25 
    }
26 
  }
14176 stevensc 27 
`
11350 nelberth 28 
 
29 
const StyledShowOptions = styled.div`
30 
  height: 342px;
31 
  flex-direction: column;
32 
  overflow-y: auto;
33 
  position: relative;
34 
  &.show {
35 
    display: flex;
36 
  }
37 
  &.hide {
38 
    display: none;
39 
  }
40 
  .optionBack {
41 
    margin: 1rem 0 0.5rem 1rem;
42 
    cursor: pointer;
43 
  }
44 
  .optionsTab {
45 
    &__option {
46 
      padding: 0.5rem;
47 
      border-bottom: 1px solid #e2e2e2;
48 
      cursor: pointer;
49 
      &:hover {
50 
        background-color: #e2e2e2;
51 
      }
52 
      &__icon {
53 
        margin-right: 0.3rem;
54 
      }
55 
    }
56 
  }
57 
  .addPersonToGroupTab {
58 
    display: flex;
59 
    flex-direction: column;
60 
    &__person {
61 
      display: flex;
62 
      justify-content: space-between;
63 
      align-items: center;
64 
      padding: 0.2rem 0.5rem;
65 
      border-bottom: 1px solid #e2e2e2;
66 
    }
67 
  }
14176 stevensc 68 
`
11350 nelberth 69 
 
14581 stevensc 70 
const PersonalChat = ({ entity, index, onClose, onMinimize, onRead }) => {
71 
 
14176 stevensc 72 
	// entity destructuring
73 
	const {
74 
		id,
75 
		image,
76 
		name,
77 
		online,
78 
		type,
79 
		unsee_messages,
14578 stevensc 80 
		url_clear,
14176 stevensc 81 
		url_close,
82 
		url_get_all_messages,
83 
		url_send,
84 
		url_upload,
85 
		minimized,
86 
		profile,
87 
		handleReadChat,
88 
		// group
89 
		url_leave,
90 
		url_delete,
91 
		url_add_user_to_group,
92 
		url_get_contact_group_list,
93 
		url_get_contacts_availables_for_group,
14581 stevensc 94 
	} = entity
11350 nelberth 95 
 
14176 stevensc 96 
	// states
97 
	const [messages, setMessages] = useState([])
98 
	const [responseMessage, setResponseMessage] = useState(null)
99 
	const [newMessages, setNewMessages] = useState([])
100 
	const [oldMessages, setOldMessages] = useState([])
101 
	const [currentPage, setCurrentPage] = useState(1)
102 
	const [pages, setPages] = useState(1)
103 
	const [loading, setLoading] = useState(false)
104 
	const [showOptions, setShowOptions] = useState(false)
105 
	const [optionTab, setOptionTab] = useState('default')
106 
	const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
107 
	const [groupContactsList, setGroupContactsList] = useState([])
108 
	const [confirmModalShow, setConfirmModalShow] = useState(false)
109 
	const [optionsLoading, setOptionsLoading] = useState(false)
110 
	const [showEmojiTab, setShowEmojiTab] = useState(false)
111 
	const [shareFileModalShow, setShareFileModalShow] = useState(false)
11350 nelberth 112 
 
14176 stevensc 113 
	// refs
114 
	const conversationListEl = useRef(null)
115 
	const loader = useRef(null)
116 
	const modalActionUrl = useRef('')
117 
	const chatboxEl = useRef(null)
118 
	const textAreaEl = useRef(null)
11350 nelberth 119 
 
14176 stevensc 120 
	// optionTabs
121 
	const optionTabs = {
122 
		add_person_to_group: 'add_person_to_group',
123 
		group_contacts_list: 'group_contacts_list',
124 
		default: 'default',
125 
	}
11350 nelberth 126 
 
14176 stevensc 127 
	// timeIntervals
128 
	let getMessageInterval
11350 nelberth 129 
 
14176 stevensc 130 
	const handleActive = () => {
131 
		onRead(index)
132 
		onMinimize(index)
133 
	}
11350 nelberth 134 
 
14176 stevensc 135 
	// const handleGetMessages = async () => {
136 
	//   await axios.get(url_get_all_messages).then((response) => {
137 
	//     const resData = response.data;
138 
	//     if (resData.success) {
139 
	//       const updatedMessages = resData.data.items.slice();
140 
	//       let newNewMessages = [];
141 
	//       updatedMessages.map((updatedNewMessage) => {
142 
	//         const existInNewMessages = newMessages.findIndex(
143 
	//           (newMessage) => newMessage.id === updatedNewMessage.id
144 
	//         );
145 
	//         if (existInNewMessages === -1) {
146 
	//           newNewMessages = [updatedNewMessage, ...newNewMessages];
147 
	//           setPages(resData.data.pages);
148 
	//         }
149 
	//       });
150 
	//       if (newNewMessages.length > 0) {
151 
	//         setNewMessages((prevState) => [...prevState, ...newNewMessages]);
152 
	//       }
11350 nelberth 153 
 
14176 stevensc 154 
	//       // setMessages([...resData.data.items, ...oldMessages]);
155 
	//     }
156 
	//   });
157 
	//   onRead(index);
158 
	// };
11350 nelberth 159 
 
14176 stevensc 160 
	const handleGetMessages = async () => {
161 
		const response = await axios.get(url_get_all_messages)
162 
		const resData = response.data
163 
		if (!resData.success) {
164 
			return ('ha ocurrido un error', resData)
165 
		}
166 
		const updatedMessages = [...resData.data.items].reverse()
167 
		const newMessages = updatedMessages.reduce((acum, updatedMessage) => {
168 
			if (
169 
				messages.findIndex((message) => message.id === updatedMessage.id) === -1
170 
			) {
171 
				acum = [...acum, updatedMessage]
172 
			}
173 
			return acum
174 
		}, [])
175 
		if (newMessages.length > 0) {
176 
			setMessages([...messages, ...newMessages])
177 
			setPages(resData.data.pages)
178 
			scrollToBottom()
179 
		}
180 
		setLoading(false)
181 
	}
11350 nelberth 182 
 
14176 stevensc 183 
	const handleLoadMore = async () => {
184 
		await axios.get(`${url_get_all_messages}?page=${currentPage}`)
185 
			.then((response) => {
186 
				const resData = response.data
187 
				if (resData.success) {
188 
					if (resData.data.page > 1) {
189 
						const updatedOldMessages = [...resData.data.items].reverse()
190 
						setOldMessages([...updatedOldMessages, ...oldMessages])
191 
						/* scrollDownBy(100); */
192 
					}
193 
				}
194 
			})
195 
	}
11350 nelberth 196 
 
14176 stevensc 197 
	const handleCloseChat = () => {
198 
		onClose(id, url_close)
199 
	}
11350 nelberth 200 
 
14176 stevensc 201 
	const handleChatBoxKeyDown = async (e) => {
202 
		if (e.key === 'Enter') {
203 
			e.preventDefault()
204 
			const message = e.target.value
205 
			const formData = new FormData()
206 
			formData.append('message', emojione.toShort(message))
207 
			await axios.post(url_send, formData).then((response) => {
208 
				const resData = response.data
209 
				if (resData.success) {
14581 stevensc 210 
					let newMessage = resData.data
211 
 
212 
					online
213 
						? newMessage = { ...newMessage, not_received: false }
214 
						: newMessage = { ...newMessage, not_received: true }
215 
 
216 
					setMessages([...messages, newMessage])
14176 stevensc 217 
				}
218 
			})
219 
			e.target.value = ''
14581 stevensc 220 
			/* await handleGetMessages(); */
14176 stevensc 221 
			setShowEmojiTab(false)
222 
			setResponseMessage(null)
223 
		}
224 
	}
11350 nelberth 225 
 
14176 stevensc 226 
	const handleShowOptions = () => {
227 
		onMinimize(index, false)
228 
		setShowOptions(!showOptions)
229 
	}
11350 nelberth 230 
 
14176 stevensc 231 
	const handleChangeTab = (tab) => {
232 
		setOptionTab(tab)
233 
	}
11350 nelberth 234 
 
14176 stevensc 235 
	const handleAddPersonToGroup = async (id) => {
236 
		const formData = new FormData()
237 
		formData.append('uid', id)
238 
		await axios.post(url_add_user_to_group, formData).then((response) => {
239 
			const resData = response.data
240 
			if (resData.success) {
241 
				loadPersonsAvailable()
242 
			}
243 
		})
244 
	}
11350 nelberth 245 
 
14578 stevensc 246 
	const handleConfirmModalAction = async () => {
247 
		await axios.post(modalActionUrl.current).then((response) => {
248 
			const resData = response.data
249 
			if (resData.success) {
250 
			}
251 
		})
252 
		await onClose(id, url_close)
14176 stevensc 253 
	}
11350 nelberth 254 
 
14176 stevensc 255 
	const handleObserver = (entities) => {
256 
		const target = entities[0]
14578 stevensc 257 
		if (target.isIntersecting) {
258 
			setCurrentPage((prevState) => prevState + 1)
259 
		}
14176 stevensc 260 
	}
11350 nelberth 261 
 
14176 stevensc 262 
	const scrollToBottom = () => {
263 
		if (conversationListEl.current) {
264 
			conversationListEl.current.scrollTop =
14579 stevensc 265 
				conversationListEl.current.scrollHeight * 9
14176 stevensc 266 
		}
267 
	}
11350 nelberth 268 
 
14176 stevensc 269 
	const scrollDownBy = (scrollDistance) => {
270 
		if (conversationListEl.current) {
271 
			conversationListEl.current.scrollTop = scrollDistance
272 
		}
273 
	}
11350 nelberth 274 
 
14176 stevensc 275 
	const handleShowEmojiTab = () => {
276 
		setShowEmojiTab(!showEmojiTab)
277 
		// smiley_tpl(`${id}`);
278 
	}
11350 nelberth 279 
 
14176 stevensc 280 
	const handleClickEmoji = (e) => {
281 
		const shortname = e.currentTarget.dataset.shortname
282 
		const currentText = textAreaEl.current.value
283 
		let cursorPosition = textAreaEl.current.selectionStart
284 
		const textBehind = currentText.substring(0, cursorPosition)
285 
		const textForward = currentText.substring(cursorPosition)
286 
		const unicode = emojione.shortnameToUnicode(shortname)
287 
		textAreaEl.current.value = `${textBehind}${unicode}${textForward}`
288 
		textAreaEl.current.focus()
289 
		textAreaEl.current.setSelectionRange(
290 
			cursorPosition + unicode.length,
291 
			cursorPosition + unicode.length
292 
		)
293 
	}
11350 nelberth 294 
 
14176 stevensc 295 
	// useEffect(() => {
296 
	//   setMessages([...oldMessages, ...newMessages]);
297 
	// }, [newMessages, oldMessages]);
11350 nelberth 298 
 
14176 stevensc 299 
	// getMessageOnMaximize and subscribe to infinite Loader
300 
	useEffect(async () => {
301 
		if (!minimized) {
302 
			await handleGetMessages()
303 
			// loader observer
14578 stevensc 304 
			let options = {
305 
				root: null,
306 
				rootMargin: '20px',
307 
				treshold: 1.0,
308 
			}
309 
			const observer = new IntersectionObserver(handleObserver, options)
14176 stevensc 310 
			if (loader.current) {
311 
				observer.observe(loader.current)
312 
			}
313 
		}
314 
		return () => {
315 
			if (loader.current) {
316 
				observer.unobserve(loader.current)
317 
			}
318 
		}
319 
	}, [minimized])
11350 nelberth 320 
 
14176 stevensc 321 
	// LoadMore on change page
322 
	useEffect(() => {
323 
		let loadMore = () => handleLoadMore()
324 
		loadMore()
325 
		return () => {
326 
			loadMore = null
327 
		}
328 
	}, [currentPage])
11350 nelberth 329 
 
14176 stevensc 330 
	// getMessagesInterval
331 
	useEffect(() => {
332 
		if (window.location.pathname === '/group/my-groups') {
333 
			const items = document.getElementsByClassName('sc-jSgupP')
334 
			if (items && items.length > 0)
335 
				items[0].style.display = 'none'
336 
		}
337 
		if (!minimized) {
338 
			clearInterval(getMessageInterval)
339 
			getMessageInterval = setInterval(() => {
340 
				handleGetMessages()
341 
			}, 1000)
342 
		} else {
343 
			clearInterval(getMessageInterval)
344 
		}
345 
		return () => {
346 
			clearInterval(getMessageInterval)
347 
		}
348 
	})
11350 nelberth 349 
 
14176 stevensc 350 
	const handleConfirmModalShow = () => {
351 
		setConfirmModalShow(!confirmModalShow)
352 
	}
11350 nelberth 353 
 
14176 stevensc 354 
	const handleConfirmModalAccept = () => {
355 
		handleConfirmModalAction()
356 
	}
11350 nelberth 357 
 
14176 stevensc 358 
	const handleShareFileModalShow = () => {
359 
		setShareFileModalShow(!shareFileModalShow)
360 
	}
11350 nelberth 361 
 
14176 stevensc 362 
	const handleResponseMessage = (element) => {
14581 stevensc 363 
		element.mtype === 'text'
364 
			? setResponseMessage(element)
365 
			: setResponseMessage({ ...element, m: 'Archivo adjunto' })
366 
 
367 
		textAreaEl.current && textAreaEl.current.focus()
14176 stevensc 368 
	}
11350 nelberth 369 
 
14176 stevensc 370 
	const messagesRender = () => {
371 
		return (
372 
			<React.Fragment>
14581 stevensc 373 
				{currentPage < pages ? <li ref={loader}>Cargando...</li> : ''}
14582 stevensc 374 
				{oldMessages.map((oldMessage, i) =>
375 
					<MessageTemplate key={i} message={oldMessage} />
376 
				)}
377 
				{messages.map((message, i) =>
378 
					<MessageTemplate
379 
						key={i}
14176 stevensc 380 
						message={message}
381 
						setResponseMessage={handleResponseMessage}
382 
						responseMessage={responseMessage}
383 
					/>
14582 stevensc 384 
				)}
14176 stevensc 385 
			</React.Fragment>
386 
		)
387 
	}
11350 nelberth 388 
 
14176 stevensc 389 
	const optionRender = () => {
390 
		switch (optionTab) {
391 
		case optionTabs.add_person_to_group:
392 
			return addPersonToGroupTab
393 
		case optionTabs.group_contacts_list:
394 
			return groupContactsListTab
395 
		default:
396 
			return optionsDefaultTab
397 
		}
398 
	}
11350 nelberth 399 
 
14176 stevensc 400 
	// useEffect for tabs changing
401 
	useEffect(() => {
402 
		switch (optionTab) {
403 
		case optionTabs.add_person_to_group:
404 
			loadPersonsAvailable()
405 
			break
406 
		case optionTabs.group_contacts_list:
407 
			loadGroupContacts()
408 
			break
409 
		}
410 
	}, [optionTab])
11350 nelberth 411 
 
14176 stevensc 412 
	const loadPersonsAvailable = async () => {
413 
		setOptionsLoading(true)
414 
		await axios.get(url_get_contacts_availables_for_group).then((response) => {
415 
			const resData = response.data
416 
			if (resData.success) {
417 
				setAvailableContactsToAdd(resData.data)
418 
			}
419 
		})
420 
		setOptionsLoading(false)
421 
	}
11350 nelberth 422 
 
14176 stevensc 423 
	const loadGroupContacts = async () => {
424 
		setOptionsLoading(true)
425 
		await axios.get(url_get_contact_group_list).then((response) => {
426 
			const resData = response.data
427 
			if (resData.success) {
428 
				setGroupContactsList(resData.data)
429 
			}
430 
		})
431 
		setOptionsLoading(false)
432 
	}
11350 nelberth 433 
 
14176 stevensc 434 
	const handleDeletePersonFromGroup = async (urlDeletePersonFromGroup) => {
435 
		await axios.post(urlDeletePersonFromGroup).then((response) => {
436 
			const resData = response.data
437 
			if (resData.success) {
438 
				loadGroupContacts()
439 
			}
440 
		})
441 
	}
11350 nelberth 442 
 
14176 stevensc 443 
	const optionsDefaultTab = (
444 
		<React.Fragment>
445 
			<span className="optionBack" onClick={() => handleShowOptions()}>
446 
				<i className="fa icon-arrow-left"></i>
447 
			</span>
448 
			<div className="optionsTab">
449 
				<ul>
450 
					{!!url_get_contact_group_list && (
451 
						<li
452 
							className="optionsTab__option"
453 
							onClick={() => handleChangeTab(optionTabs.group_contacts_list)}
454 
						>
455 
							<span className="optionsTab__option__icon">
456 
								<i className="fa fa-group"></i>
457 
							</span>
14579 stevensc 458 
							Integrantes
14176 stevensc 459 
						</li>
460 
					)}
461 
					{!!url_add_user_to_group && (
462 
						<li
463 
							className="optionsTab__option"
464 
							onClick={() => handleChangeTab(optionTabs.add_person_to_group)}
465 
						>
466 
							<span className="optionsTab__option__icon">
467 
								<i className="fa fa-user-plus"></i>
468 
							</span>
14579 stevensc 469 
							Agregar contactos
14176 stevensc 470 
						</li>
471 
					)}
472 
					{!!url_delete && (
473 
						<li
474 
							className="optionsTab__option"
475 
							style={{ color: 'red' }}
476 
							onClick={() => {
477 
								handleConfirmModalShow()
478 
								modalActionUrl.current = url_delete
479 
							}}
480 
						>
481 
							<span className="optionsTab__option__icon">
482 
								<i className="fa fa-trash"></i>
483 
							</span>
14579 stevensc 484 
							Eliminar grupo
14176 stevensc 485 
						</li>
486 
					)}
487 
					{!!url_leave && (
488 
						<li
489 
							className="optionsTab__option"
490 
							style={{ color: 'red' }}
491 
							onClick={() => {
492 
								handleConfirmModalShow()
493 
								modalActionUrl.current = url_leave
494 
							}}
495 
						>
496 
							<span className="optionsTab__option__icon">
497 
								<i className="fa fa-user-times"></i>
498 
							</span>
14579 stevensc 499 
							Dejar grupo
14176 stevensc 500 
						</li>
501 
					)}
502 
				</ul>
503 
			</div>
504 
		</React.Fragment>
505 
	)
11350 nelberth 506 
 
14176 stevensc 507 
	const addPersonToGroupTab = (
508 
		<React.Fragment>
509 
			<span
510 
				className="optionBack"
511 
				onClick={() => handleChangeTab(optionTabs.default)}
512 
			>
513 
				<i className="fa icon-arrow-left"></i>
514 
			</span>
515 
			<div className="addPersonToGroupTab">
516 
				{availableContactsToAdd.length ? (
517 
					availableContactsToAdd.map(({ image, name, id }) => (
518 
						<div className="addPersonToGroupTab__person" key={id}>
14581 stevensc 519 
							<div className="d-inline-flex" style={{ gap: '5px' }}>
520 
								<img
521 
									className="chat-image img-circle pull-left"
522 
									height="36"
523 
									width="36"
524 
									src={image}
525 
									alt="image-image"
526 
								/>
527 
								<div className="name">{name}</div>
528 
							</div>
14176 stevensc 529 
							<span
530 
								style={{
531 
									cursor: 'pointer',
532 
								}}
533 
								onClick={() => {
534 
									handleAddPersonToGroup(id)
535 
								}}
536 
							>
537 
								<i className="fa fa-plus-circle"></i>
538 
							</span>
539 
						</div>
540 
					))
541 
				) : (
542 
					<div className="addPersonToGroupTab__person">No hay Contactos</div>
543 
				)}
544 
			</div>
545 
		</React.Fragment>
546 
	)
11350 nelberth 547 
 
14176 stevensc 548 
	const groupContactsListTab = (
549 
		<React.Fragment>
550 
			<span
551 
				className="optionBack"
552 
				onClick={() => handleChangeTab(optionTabs.default)}
553 
			>
554 
				<i className="fa icon-arrow-left"></i>
555 
			</span>
556 
			<div className="addPersonToGroupTab">
557 
				{groupContactsList.length ? (
558 
					groupContactsList.map(
559 
						({ image, name, url_remove_from_group, id }) => (
560 
							<div className="addPersonToGroupTab__person" key={id}>
561 
								<div style={{ display: 'flex', alignItems: 'center' }}>
562 
									<img
563 
										className="chat-image img-circle pull-left"
564 
										height="36"
565 
										width="36"
566 
										src={image}
567 
										alt="image-image"
568 
									/>
569 
									<div className="name">{name}</div>
570 
								</div>
571 
								{url_remove_from_group && (
572 
									<span
573 
										style={{
574 
											cursor: 'pointer',
575 
										}}
576 
										onClick={() => {
577 
											handleDeletePersonFromGroup(url_remove_from_group)
578 
										}}
579 
									>
580 
										<i className="fa fa-user-times"></i>
581 
									</span>
582 
								)}
583 
							</div>
584 
						)
585 
					)
586 
				) : (
587 
					<div className="addPersonToGroupTab__person">No hay Contactos</div>
588 
				)}
589 
			</div>
590 
		</React.Fragment>
591 
	)
11350 nelberth 592 
 
14176 stevensc 593 
	const shareFileModal = (
594 
		<SendFileModal
595 
			show={shareFileModalShow}
596 
			onHide={() => {
597 
				setShareFileModalShow(false)
598 
			}}
599 
			urlUpload={url_upload}
600 
		/>
601 
	)
11350 nelberth 602 
 
14176 stevensc 603 
	const userChat = (
604 
		<React.Fragment>
14584 stevensc 605 
			<div className="chatbox active-chat">
14176 stevensc 606 
				<div className="chatbox-icon">
607 
					<div className="contact-floating red">
608 
						<img className="chat-image img-circle pull-left" src={image} />
609 
						<small className="unread-msg">2</small>
610 
					</div>
611 
				</div>
612 
				<div className="panel personal-chat">
613 
					<StyledChatHead>
614 
						<div
14584 stevensc 615 
							className={`panel-heading chatboxhead ${unsee_messages ? 'notify' : ''}`}
14176 stevensc 616 
						>
617 
							<div className="panel-title">
618 
								<img
619 
									className="chat-image img-circle pull-left"
620 
									height="36"
621 
									width="36"
622 
									src={image}
623 
									alt="avatar-image"
624 
								/>
625 
								<div className="header-elements">
626 
									<a href={profile} target="_blank" rel="noreferrer">
627 
										{name}
628 
									</a>
629 
									<br />
630 
									<small className={`status ${online ? 'Online' : 'Offline'}`}>
631 
										<b>{online ? 'En línea' : 'Desconectado'}</b>
632 
									</small>
633 
									<div className="pull-right options">
634 
										<div
635 
											className="btn-group uploadFile"
636 
											id="uploadFile"
637 
											data-client="'+chatboxtitle+'"
638 
										>
639 
										</div>
14584 stevensc 640 
										<div className="btn-group">
14176 stevensc 641 
										</div>
14584 stevensc 642 
										<div className="btn-group">
14176 stevensc 643 
											<span>
644 
												<i
645 
													className={'fa fa-minus-circle'}
646 
													onClick={handleActive}
647 
												></i>
648 
											</span>
649 
										</div>
14584 stevensc 650 
										<div className="btn-group">
14176 stevensc 651 
											<span>
14584 stevensc 652 
												<i className="fa fa-times-circle" onClick={handleCloseChat} />
14176 stevensc 653 
											</span>
654 
										</div>
655 
									</div>
656 
								</div>
657 
							</div>
658 
						</div>
659 
					</StyledChatHead>
660 
					<div
661 
						className="panel-body"
662 
						style={{ display: !minimized ? 'block' : 'none' }}
663 
					>
664 
						<div
665 
							id="uploader_'+chatboxtitle+'"
666 
							style={{ display: 'none', height: '342px' }}
667 
						>
668 
							<p>
14579 stevensc 669 
								Your browser does not have Flash, Silverlight or HTML5 support.
14176 stevensc 670 
							</p>
671 
						</div>
672 
						<div className="chat-conversation" style={{ position: 'relative' }}>
673 
							<div className="reverseChatBox" ref={conversationListEl}>
674 
								<ul
675 
									className="conversation-list chatboxcontent"
676 
									id="resultchat_'+chatboxtitle+'"
677 
								>
678 
									{messagesRender()}
679 
								</ul>
680 
							</div>
681 
							<div className="wchat-footer wchat-chat-footer chatboxinput">
682 
								<div id="chatFrom" className="chatFrom">
14581 stevensc 683 
									{
684 
										responseMessage
685 
										&&
686 
										<div className={responseMessage ? 'resp_messages-container active' : 'resp_messages-container'}>
687 
											<span>{`Respondiendo a ${responseMessage.user_name}`}</span>
688 
											<p>{responseMessage.m}</p>
689 
										</div>
690 
									}
14176 stevensc 691 
									<div className="block-wchat">
692 
										<button
693 
											className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
694 
											id="uploadFile"
695 
											onClick={handleShareFileModalShow}
696 
										></button>
697 
										<button
698 
											className="icon ti-face-smile font-24 btn-emoji"
699 
											id="toggle-emoji"
700 
											onClick={handleShowEmojiTab}
701 
										></button>
702 
										<div className="input-container">
703 
											<div className="input-emoji">
704 
												<div
705 
													className="input-placeholder"
706 
													style={{ visibility: 'hidden', display: 'none' }}
707 
												>
14579 stevensc 708 
													Escribe un mensaje
14176 stevensc 709 
												</div>
710 
												<textarea
711 
													className="input chatboxtextarea"
712 
													id="chatboxtextarea"
713 
													name="chattxt"
714 
													style={{ resize: 'none', height: '20px' }}
715 
													placeholder="Escribe un mensaje"
716 
													onKeyDown={handleChatBoxKeyDown}
717 
													ref={textAreaEl}
14581 stevensc 718 
													onBlur={() => responseMessage && setResponseMessage(null)}
14176 stevensc 719 
													onFocus={() => onRead(index)}
720 
												></textarea>
721 
												<input
722 
													id="to_uname"
723 
													name="to_uname"
724 
													value="'+chatboxtitle+'"
725 
													type="hidden"
726 
												/>
727 
												<input
728 
													id="from_uname"
729 
													name="from_uname"
730 
													value="Beenny"
731 
													type="hidden"
732 
												/>
733 
											</div>
734 
										</div>
735 
									</div>
736 
								</div>
737 
								<div className="wchat-box-items-positioning-container">
738 
									<div className="wchat-box-items-overlay-container">
739 
										<div
740 
											className="target-emoji"
741 
											style={{ display: showEmojiTab ? 'block' : 'none' }}
742 
										>
743 
											<div id={`smileyPanel_${id}`}>
744 
												<div>
745 
													<Emojione onClickEmoji={handleClickEmoji} />
746 
												</div>
747 
											</div>
748 
										</div>
749 
									</div>
750 
								</div>
751 
							</div>
752 
						</div>
753 
					</div>
754 
				</div>
755 
			</div>
756 
			{shareFileModal}
757 
		</React.Fragment>
758 
	)
11350 nelberth 759 
 
14176 stevensc 760 
	const groupChat = (
761 
		<React.Fragment>
762 
			<div
763 
				className="chatbox active-chat"
764 
				style={{
765 
					bottom: '0px',
766 
					right: `${(index + 1) * 295}px`,
767 
					zIndes: '1',
768 
					display: 'block',
769 
				}}
770 
				id={`chatbox_${id}`}
771 
				ref={chatboxEl}
772 
			>
773 
				<div className="chatbox-icon">
774 
					<div className="contact-floating red">
775 
						<img className="chat-image img-circle pull-left" src={image} />
776 
						<small className="unread-msg">2</small>
777 
						{/* <small className="status"'+ status+'></small> */}
778 
					</div>
779 
				</div>
780 
				<div className="panel personal-chat">
781 
					<StyledChatHead>
782 
						<div
783 
							className={`panel-heading chatboxhead ${unsee_messages ? 'notify' : ''
784 
							}`}
785 
						>
786 
							<div className="panel-title-group">
787 
								<img
788 
									className="chat-image img-circle pull-left"
789 
									height="36"
790 
									width="36"
791 
									src="/images/users-group.png"
792 
									alt="avatar-image"
793 
								/>
794 
								<div className="header-elements">
795 
									<p>{name}</p>
796 
									<br />
797 
									<div className="pull-right options">
798 
										<div
799 
											className="btn-group uploadFile"
800 
											id="uploadFile"
801 
											data-client="'+chatboxtitle+'"
802 
										>
803 
											{/* <span>
11350 nelberth 804 
                      <i className="fa fa-trash"></i>
805 
                    </span> */}
14176 stevensc 806 
										</div>
807 
										<div
808 
											className="btn-group"
14579 stevensc 809 
										// onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
810 
										// href="javascript:void(0)"
14176 stevensc 811 
										>
812 
											{/* <span>
11350 nelberth 813 
                      <i className="fa fa-trash"></i>
814 
                    </span> */}
14176 stevensc 815 
										</div>
816 
										<div
817 
											className="btn-group addUser"
818 
											data-client="8cb2a840-56c2-4f93-9cf1-27ad598acd8f"
819 
											data-name="Grupo de jesus"
820 
										>
821 
											<span>
822 
												<i
823 
													// className="fa fa-user-plus"
824 
													className="fa fa-gear"
825 
													onClick={handleShowOptions}
826 
												></i>
827 
											</span>
828 
										</div>
829 
										<div
830 
											className="btn-group"
14579 stevensc 831 
										// onClick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
832 
										// href="javascript:void(0)"
14176 stevensc 833 
										>
834 
											<span>
835 
												<i
836 
													className={'fa fa-minus-circle'}
837 
													onClick={handleActive}
838 
												></i>
839 
											</span>
840 
										</div>
841 
										<div
842 
											className="btn-group"
14579 stevensc 843 
										// onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
844 
										// href="javascript:void(0)"
14176 stevensc 845 
										>
846 
											<span>
847 
												<i
848 
													className="fa fa-times-circle"
849 
													onClick={handleCloseChat}
850 
												></i>
851 
											</span>
852 
										</div>
853 
									</div>
854 
								</div>
855 
							</div>
856 
						</div>
857 
					</StyledChatHead>
858 
					<div
859 
						className="panel-body"
860 
						style={{ display: !minimized ? 'block' : 'none' }}
861 
					>
862 
						<StyledShowOptions className={` ${showOptions ? 'show' : 'hide'}`}>
863 
							{optionRender()}
864 
						</StyledShowOptions>
11350 nelberth 865 
 
14176 stevensc 866 
						<div
867 
							className="chat-conversation"
868 
							style={{
869 
								display: showOptions ? 'none' : 'block',
870 
								position: 'relative',
871 
							}}
872 
						>
873 
							<div className="reverseChatBox" ref={conversationListEl}>
874 
								<ul
875 
									className="conversation-list chatboxcontent"
876 
									id="resultchat_'+chatboxtitle+'"
877 
								>
878 
									{messagesRender()}
879 
								</ul>
880 
							</div>
881 
							<div className="wchat-footer wchat-chat-footer chatboxinput">
882 
								<div id="chatFrom">
883 
									<div className="block-wchat">
884 
										<button
885 
											className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
886 
											id="uploadFile"
887 
											onClick={handleShareFileModalShow}
888 
										></button>
889 
										<button
890 
											className="icon ti-face-smile font-24 btn-emoji"
891 
											id="toggle-emoji"
892 
											onClick={handleShowEmojiTab}
893 
										></button>
894 
										<div className="input-container">
895 
											<div className="input-emoji">
896 
												<div
897 
													className="input-placeholder"
898 
													style={{ visibility: 'hidden', display: 'none' }}
899 
												>
14579 stevensc 900 
													Escribe un mensaje
14176 stevensc 901 
												</div>
902 
												<textarea
903 
													className="input chatboxtextarea"
904 
													id="chatboxtextarea"
905 
													name="chattxt"
906 
													style={{ resize: 'none', height: '20px' }}
907 
													placeholder="Escribe un mensaje"
908 
													onKeyDown={handleChatBoxKeyDown}
909 
													ref={textAreaEl}
910 
													onFocus={() => onRead(index)}
14581 stevensc 911 
													onBlur={() => responseMessage && setResponseMessage(null)}
14176 stevensc 912 
												></textarea>
913 
												<input
914 
													id="to_uname"
915 
													name="to_uname"
916 
													value="'+chatboxtitle+'"
917 
													type="hidden"
918 
												/>
919 
												<input
920 
													id="from_uname"
921 
													name="from_uname"
922 
													value="Beenny"
923 
													type="hidden"
924 
												/>
925 
											</div>
926 
										</div>
927 
									</div>
928 
								</div>
929 
								<div className="wchat-box-items-positioning-container">
930 
									<div className="wchat-box-items-overlay-container">
931 
										<div
932 
											className="target-emoji"
933 
											style={{ display: showEmojiTab ? 'block' : 'none' }}
934 
										>
935 
											<div id={`smileyPanel_${id}`}>
936 
												<div>
937 
													<Emojione onClickEmoji={handleClickEmoji} />
938 
												</div>
939 
											</div>
940 
										</div>
941 
									</div>
942 
								</div>
943 
							</div>
944 
						</div>
945 
					</div>
946 
				</div>
947 
			</div>
948 
			<ConfirmModal
949 
				show={confirmModalShow}
950 
				onClose={handleConfirmModalShow}
951 
				onAccept={handleConfirmModalAccept}
952 
			/>
953 
			{shareFileModal}
954 
		</React.Fragment>
955 
	)
11350 nelberth 956 
 
14176 stevensc 957 
	switch (type) {
958 
	case 'user':
959 
		return userChat
960 
	case 'group':
961 
		return groupChat
962 
	default:
963 
		break
964 
	}
965 
}
11350 nelberth 966 
 
14581 stevensc 967 
export default PersonalChat