Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | 10x 7x 7x 7x 7x 6x 7x 7x 7x 1x 7x | import React, { useEffect, useState } from "react"; import { SendOutlined } from "@ant-design/icons"; import { Input, Spin } from "antd"; import { sendMessage } from "../../api/api"; import Conversation from "../Conversation/Conversation"; import styles from "./ConversationContainer.module.scss"; const ConversationContainer = ({ user, selectedId, refetch, chatApiUrl, newMessagesData, centralMessage, query, queryMessages, queryMessagesBody, }) => { const [loading, setLoading] = useState(false); const [msg, setMsg] = useState(""); const [msgObj, setMsgObj] = useState(null); useEffect(() => { Iif (newMessagesData) { let msg = grabNewMessage(); setMsgObj(msg); } }, [newMessagesData]); const grabNewMessage = () => { let message = newMessagesData?.queryMessage?.find( (m) => m?.thread?.id === user?.getHC_Lead?.threads[0]?.id ); return message; }; const handleSendMessage = () => { if (msg !== "" && selectedId) { setLoading(true); sendMessage(chatApiUrl, { body: msg, to: user?.getHC_Lead?.threads[0]?.messages[0]?.from, username: "Randy Marsh", }) .then(() => { setLoading(false); setMsg(""); }) .catch((e) => { setLoading(false); console.log(e); }); } }; const handleSetMsg = (e) => { setMsg(e.target.value); }; return ( <div className={styles.ConversationContainer}> {selectedId || queryMessagesBody !== null ? ( <Conversation user={user} msgObj={msgObj} newMessagesData={newMessagesData} query={query} queryMessages={queryMessages} queryMessagesBody={queryMessagesBody} centralMessage={centralMessage} data-testid="ConversationContainer__conversation" /> ) : ( <div className={styles.ConversationContainer__emptychat} data-testid="ConversationContainer__emptychat" > <svg width="184" height="152" viewBox="0 0 184 152" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M91.797 151.228C129.24 151.228 159.594 145.556 159.594 138.56C159.594 131.564 129.24 125.892 91.797 125.892C54.3537 125.892 24 131.564 24 138.56C24 145.556 54.3537 151.228 91.797 151.228Z" fill="#F5F5F7" fillOpacity="0.8" /> <path fillRule="evenodd" clipRule="evenodd" d="M146.034 101.344L122.109 71.8988C120.961 70.5128 119.283 69.6738 117.516 69.6738H66.0761C64.3101 69.6738 62.6321 70.5128 61.4841 71.8988L37.5601 101.344V116.727H146.035V101.344H146.034Z" fill="#AEB8C2" /> <path fillRule="evenodd" clipRule="evenodd" d="M57.8301 31.6699H125.763C126.824 31.6699 127.841 32.0913 128.592 32.8415C129.342 33.5916 129.763 34.6091 129.763 35.6699V129.014C129.763 130.075 129.342 131.092 128.592 131.842C127.841 132.592 126.824 133.014 125.763 133.014H57.8301C56.7692 133.014 55.7518 132.592 55.0017 131.842C54.2515 131.092 53.8301 130.075 53.8301 129.014V35.6699C53.8301 34.6091 54.2515 33.5916 55.0017 32.8415C55.7518 32.0913 56.7692 31.6699 57.8301 31.6699V31.6699Z" fill="#F5F5F7" /> <path fillRule="evenodd" clipRule="evenodd" d="M66.6781 41.623H116.915C117.446 41.623 117.954 41.8338 118.329 42.2088C118.704 42.5839 118.915 43.0926 118.915 43.623V68.58C118.915 69.1105 118.704 69.6192 118.329 69.9943C117.954 70.3693 117.446 70.58 116.915 70.58H66.6781C66.1476 70.58 65.6389 70.3693 65.2639 69.9943C64.8888 69.6192 64.6781 69.1105 64.6781 68.58V43.623C64.6781 43.0926 64.8888 42.5839 65.2639 42.2088C65.6389 41.8338 66.1476 41.623 66.6781 41.623ZM66.9401 81.437H116.653C117.253 81.437 117.828 81.6754 118.253 82.0996C118.677 82.5238 118.915 83.0991 118.915 83.699C118.915 84.299 118.677 84.8743 118.253 85.2985C117.828 85.7227 117.253 85.961 116.653 85.961H66.9401C66.3402 85.961 65.7648 85.7227 65.3406 85.2985C64.9164 84.8743 64.6781 84.299 64.6781 83.699C64.6781 83.0991 64.9164 82.5238 65.3406 82.0996C65.7648 81.6754 66.3402 81.437 66.9401 81.437ZM66.9401 93.2H116.653C117.253 93.2 117.829 93.4384 118.253 93.8627C118.677 94.287 118.916 94.8625 118.916 95.4625C118.916 96.0626 118.677 96.6381 118.253 97.0624C117.829 97.4867 117.253 97.725 116.653 97.725H66.9401C66.34 97.725 65.7646 97.4867 65.3403 97.0624C64.916 96.6381 64.6776 96.0626 64.6776 95.4625C64.6776 94.8625 64.916 94.287 65.3403 93.8627C65.7646 93.4384 66.34 93.2 66.9401 93.2ZM145.813 136.702C145.038 139.773 142.316 142.062 139.078 142.062H44.5151C41.2771 142.062 38.5551 139.772 37.7811 136.702C37.6335 136.117 37.5589 135.516 37.5591 134.912V101.345H63.8771C66.7841 101.345 69.1271 103.793 69.1271 106.765V106.805C69.1271 109.776 71.4971 112.175 74.4041 112.175H109.189C112.096 112.175 114.466 109.754 114.466 106.782V106.77C114.466 103.798 116.809 101.344 119.716 101.344H146.034V134.913C146.034 135.53 145.957 136.129 145.813 136.702Z" fill="#DCE0E6" /> <path fillRule="evenodd" clipRule="evenodd" d="M149.121 33.292L142.291 35.942C142.115 36.0102 141.924 36.0275 141.739 35.992C141.554 35.9564 141.383 35.8693 141.246 35.7408C141.108 35.6123 141.01 35.4476 140.962 35.2656C140.913 35.0836 140.918 34.8917 140.974 34.712L142.911 28.505C140.322 25.561 138.802 21.971 138.802 18.097C138.802 8.102 148.92 0 161.402 0C173.881 0 184 8.102 184 18.097C184 28.092 173.882 36.194 161.401 36.194C156.873 36.194 152.657 35.128 149.121 33.292Z" fill="#DCE0E6" /> <path d="M170.304 21.3649C171.878 21.3649 173.153 20.1045 173.153 18.5499C173.153 16.9952 171.878 15.7349 170.304 15.7349C168.731 15.7349 167.455 16.9952 167.455 18.5499C167.455 20.1045 168.731 21.3649 170.304 21.3649Z" fill="white" /> <path fillRule="evenodd" clipRule="evenodd" d="M155.348 21.0129H149.65L152.548 16.0869L155.348 21.0129ZM158.909 16.0869H163.894V21.0129H158.909V16.0869Z" fill="white" /> </svg> <span>Select contact to start a new conversation</span> </div> )} <div className={styles.ConversationContainer__inputcontainer}> <Input placeholder="Input placeholder" value={msg} className={styles.ConversationContainer__inputcontainer__input} onChange={handleSetMsg} onPressEnter={handleSendMessage} /> <div className={styles.ConversationContainer__inputcontainer__optionsbar} > {loading ? ( <Spin /> ) : ( <SendOutlined id="Sendbutton" className={styles.ConversationContainer__icons} onClick={handleSendMessage} /> )} </div> </div> </div> ); }; export default ConversationContainer; |