diff --git a/frontend/package.json b/frontend/package.json index 9bb4041..200114c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,11 +15,11 @@ "formik": "^2.2.0", "i18next": "^19.8.2", "i18next-browser-languagedetector": "^6.0.1", + "markdown-to-jsx": "^7.1.0", "mic-recorder-to-mp3": "^2.2.2", "qrcode.react": "^1.0.0", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-linkify": "^1.0.0-alpha", "react-modal-image": "^2.5.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.3", diff --git a/frontend/src/components/ContactDrawer/index.js b/frontend/src/components/ContactDrawer/index.js index bb6dc9c..c8d16f4 100644 --- a/frontend/src/components/ContactDrawer/index.js +++ b/frontend/src/components/ContactDrawer/index.js @@ -12,9 +12,10 @@ import Button from "@material-ui/core/Button"; import Paper from "@material-ui/core/Paper"; import { i18n } from "../../translate/i18n"; -import LinkifyWithTargetBlank from "../LinkifyWithTargetBlank"; + import ContactModal from "../ContactModal"; import ContactDrawerSkeleton from "../ContactDrawerSkeleton"; +import MarkdownWrapper from "../MarkdownWrapper"; const drawerWidth = 320; @@ -149,11 +150,9 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => { className={classes.contactExtraInfo} > {info.name} - - - {info.value} - - + + {info.value} + ))} diff --git a/frontend/src/components/LinkifyWithTargetBlank/index.js b/frontend/src/components/LinkifyWithTargetBlank/index.js deleted file mode 100644 index 4d5a352..0000000 --- a/frontend/src/components/LinkifyWithTargetBlank/index.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; -import Linkify from "react-linkify"; - -const componentDecorator = (href, text, key) => ( - - {text} - -); - -const LinkifyWithTargetBlank = ({ children }) => { - return {children}; -}; - -export default LinkifyWithTargetBlank; diff --git a/frontend/src/components/MarkdownWrapper/index.js b/frontend/src/components/MarkdownWrapper/index.js new file mode 100644 index 0000000..516d82a --- /dev/null +++ b/frontend/src/components/MarkdownWrapper/index.js @@ -0,0 +1,46 @@ +import React from "react"; +import Markdown from "markdown-to-jsx"; + +import { makeStyles } from "@material-ui/core/styles"; + +const useStyles = makeStyles(theme => ({ + markdownP: { + marginBlockStart: 0, + marginBlockEnd: 0, + }, +})); + +const CustomLink = ({ children, ...props }) => ( + + {children} + +); + +const MarkdownWrapper = ({ children }) => { + const classes = useStyles(); + const boldRegex = /\*(.*?)\*/g; + + if (children && boldRegex.test(children)) { + children = children.replace(boldRegex, "**$1**"); + } + + return ( + + {children} + + ); +}; + +export default MarkdownWrapper; diff --git a/frontend/src/components/MessageInput/index.js b/frontend/src/components/MessageInput/index.js index eb8779d..4dab1c1 100644 --- a/frontend/src/components/MessageInput/index.js +++ b/frontend/src/components/MessageInput/index.js @@ -20,6 +20,7 @@ import ClearIcon from "@material-ui/icons/Clear"; import MicIcon from "@material-ui/icons/Mic"; import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline"; import HighlightOffIcon from "@material-ui/icons/HighlightOff"; +import { FormControlLabel, Switch } from "@material-ui/core"; import { i18n } from "../../translate/i18n"; import api from "../../services/api"; @@ -175,6 +176,17 @@ const MessageInput = ({ ticketStatus }) => { ReplyMessageContext ); + const [signMessage, setSignMessage] = useState(false); + const storedSignOption = localStorage.getItem("signOption"); + + useEffect(() => { + if (storedSignOption === "true") setSignMessage(true); + }, [storedSignOption]); + + useEffect(() => { + localStorage.setItem("signOption", signMessage); + }, [signMessage]); + useEffect(() => { inputRef.current.focus(); }, [replyingMessage]); @@ -251,7 +263,9 @@ const MessageInput = ({ ticketStatus }) => { read: 1, fromMe: true, mediaUrl: "", - body: `${username}: ${inputMessage.trim()}`, + body: signMessage + ? `*${username}:*\n${inputMessage.trim()}` + : inputMessage.trim(), quotedMsg: replyingMessage, }; try { @@ -433,6 +447,22 @@ const MessageInput = ({ ticketStatus }) => { + { + setSignMessage(prevState => !prevState); + }} + name="showAllTickets" + color="primary" + /> + } + />
{ diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js index 943db07..22ac73a 100644 --- a/frontend/src/components/MessagesList/index.js +++ b/frontend/src/components/MessagesList/index.js @@ -21,7 +21,7 @@ import { GetApp, } from "@material-ui/icons"; -import LinkifyWithTargetBlank from "../LinkifyWithTargetBlank"; +import MarkdownWrapper from "../MarkdownWrapper"; import ModalImageCors from "../ModalImageCors"; import MessageOptionsMenu from "../MessageOptionsMenu"; import whatsBackground from "../../assets/wa-background.png"; @@ -556,7 +556,7 @@ const MessagesList = ({ ticketId, isGroup, setReplyingMessage }) => { const viewMessagesList = messagesList.map((message, index) => { if (!message.fromMe) { return ( - + {renderDailyTimestamps(message, index)} {renderMessageDivider(message, index)}
@@ -578,17 +578,17 @@ const MessagesList = ({ ticketId, isGroup, setReplyingMessage }) => { {message.mediaUrl && checkMessageMedia(message)}
{message.quotedMsg && renderQuotedMessage(message)} - {message.body} + {message.body} {format(parseISO(message.createdAt), "HH:mm")}
- + ); } else { return ( - + {renderDailyTimestamps(message, index)} {renderMessageDivider(message, index)}
@@ -616,14 +616,14 @@ const MessagesList = ({ ticketId, isGroup, setReplyingMessage }) => { /> )} {message.quotedMsg && renderQuotedMessage(message)} - {message.body} + {message.body} {format(parseISO(message.createdAt), "HH:mm")} {renderMessageAck(message)}
- + ); } }); diff --git a/frontend/src/components/TicketListItem/index.js b/frontend/src/components/TicketListItem/index.js index 11dc66f..01c551e 100644 --- a/frontend/src/components/TicketListItem/index.js +++ b/frontend/src/components/TicketListItem/index.js @@ -18,6 +18,7 @@ import { i18n } from "../../translate/i18n"; import api from "../../services/api"; import ButtonWithSpinner from "../ButtonWithSpinner"; +import MarkdownWrapper from "../MarkdownWrapper"; const useStyles = makeStyles(theme => ({ ticket: { @@ -143,6 +144,7 @@ const TicketListItem = ({ ticket }) => { > { variant="body2" color="textSecondary" > - {ticket.lastMessage ||
} + {ticket.lastMessage ? ( + {ticket.lastMessage} + ) : ( +
+ )}