\n
\n \n \n
\n {content.image !== '' ? (\n \n

\n
\n ) : (\n ''\n )}\n {content.message === ''\n ? ''\n : content.message.split('\\n').map((ele, index) => {\n const phoneNumber = ele.match(/\\d{2,3}-\\d{3,4}-\\d{4}/);\n const emailAddress: any = ele.match(\n /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\\.[a-zA-Z0-9_-]+)/gi\n );\n let url: any = ele.match(/(https?:\\/\\/[^ ]*)/);\n if (!url) url = ele.match(/(http?:\\/\\/[^ ]*)/);\n if (phoneNumber) {\n const messageArr = ele.split(phoneNumber[0]);\n return (\n \n {messageArr[0]}\n \n {messageArr[1]}\n \n );\n }\n if (emailAddress) {\n const emailTag = `${emailAddress}`;\n\n ele = ele.replace(emailAddress, emailTag);\n return (\n <>\n \n \n \n >\n );\n }\n if (url) {\n const urlTag = `${url[0]}`;\n ele = ele.replace(url[0], urlTag);\n\n return (\n <>\n \n \n \n >\n );\n }\n\n return (\n \n {ele} {phoneNumber}\n \n );\n })}\n {content.action\n ? content.action.map(\n (item: { name: string; value: string }, index) => (\n {\n window.open(item.value);\n }}\n >\n {item.name}\n \n )\n )\n : ''}\n {/* {} */}\n \n
\n \n \n {content.buttons !== null ? (\n
\n \n \n \n \n \n \n \n ) : (\n ''\n )}\n
\n );\n};\n\nexport default ChattingBubbles;\ninterface ResTextProps {\n state: boolean;\n clientname: ClientNameProps;\n action: boolean;\n}\n\ntype RelationButtonProps = {\n state: boolean;\n clientname: ClientNameProps;\n};\nconst Response = styled.div`\n display: flex;\n flex-direction: column;\n margin-left: 18px;\n margin-right: 18px;\n width: calc(80% - 18px);\n`;\n\nconst TextWrap = styled.div`\n display: inline-flex;\n flex-direction: column;\n`;\nconst ResText = styled.div