Merge pull request #233 from ertprs/master

add quick answers

backend/src/controllers/QuickAnswerController.ts

@@ -0,0 +1,117 @@
+import * as Yup from "yup";
+import { Request, Response } from "express";
+import { getIO } from "../libs/socket";
+
+import ListQuickAnswerService from "../services/QuickAnswerService/ListQuickAnswerService";
+import CreateQuickAnswerService from "../services/QuickAnswerService/CreateQuickAnswerService";
+import ShowQuickAnswerService from "../services/QuickAnswerService/ShowQuickAnswerService";
+import UpdateQuickAnswerService from "../services/QuickAnswerService/UpdateQuickAnswerService";
+import DeleteQuickAnswerService from "../services/QuickAnswerService/DeleteQuickAnswerService";
+
+import AppError from "../errors/AppError";
+
+type IndexQuery = {
+  searchParam: string;
+  pageNumber: string;
+};
+
+interface QuickAnswerData {
+  shortcut: string;
+  message: string;
+}
+
+export const index = async (req: Request, res: Response): Promise<Response> => {
+  const { searchParam, pageNumber } = req.query as IndexQuery;
+
+  const { quickAnswers, count, hasMore } = await ListQuickAnswerService({
+    searchParam,
+    pageNumber
+  });
+
+  return res.json({ quickAnswers, count, hasMore });
+};
+
+export const store = async (req: Request, res: Response): Promise<Response> => {
+  const newQuickAnswer: QuickAnswerData = req.body;
+
+  const QuickAnswerSchema = Yup.object().shape({
+    shortcut: Yup.string().required(),
+    message: Yup.string().required()
+  });
+
+  try {
+    await QuickAnswerSchema.validate(newQuickAnswer);
+  } catch (err) {
+    throw new AppError(err.message);
+  }
+
+  const quickAnswer = await CreateQuickAnswerService({
+    ...newQuickAnswer
+  });
+
+  const io = getIO();
+  io.emit("quickAnswer", {
+    action: "create",
+    quickAnswer
+  });
+
+  return res.status(200).json(quickAnswer);
+};
+
+export const show = async (req: Request, res: Response): Promise<Response> => {
+  const { quickAnswerId } = req.params;
+
+  const quickAnswer = await ShowQuickAnswerService(quickAnswerId);
+
+  return res.status(200).json(quickAnswer);
+};
+
+export const update = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const quickAnswerData: QuickAnswerData = req.body;
+
+  const schema = Yup.object().shape({
+    shortcut: Yup.string(),
+    message: Yup.string()
+  });
+
+  try {
+    await schema.validate(quickAnswerData);
+  } catch (err) {
+    throw new AppError(err.message);
+  }
+
+  const { quickAnswerId } = req.params;
+
+  const quickAnswer = await UpdateQuickAnswerService({
+    quickAnswerData,
+    quickAnswerId
+  });
+
+  const io = getIO();
+  io.emit("quickAnswer", {
+    action: "update",
+    quickAnswer
+  });
+
+  return res.status(200).json(quickAnswer);
+};
+
+export const remove = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const { quickAnswerId } = req.params;
+
+  await DeleteQuickAnswerService(quickAnswerId);
+
+  const io = getIO();
+  io.emit("quickAnswer", {
+    action: "delete",
+    quickAnswerId
+  });
+
+  return res.status(200).json({ message: "Quick Answer deleted" });
+};

backend/src/database/index.ts

@@ -9,6 +9,7 @@ import Message from "../models/Message";
 import Queue from "../models/Queue";
 import WhatsappQueue from "../models/WhatsappQueue";
 import UserQueue from "../models/UserQueue";
+import QuickAnswer from "../models/QuickAnswer";
 
 // eslint-disable-next-line
 const dbConfig = require("../config/database");
@@ -26,7 +27,8 @@ const models = [
   Setting,
   Queue,
   WhatsappQueue,
-  UserQueue
+  UserQueue,
+  QuickAnswer
 ];
 
 sequelize.addModels(models);

backend/src/database/migrations/20210818102605-create-quickAnswers.ts

@@ -0,0 +1,34 @@
+import { QueryInterface, DataTypes } from "sequelize";
+
+module.exports = {
+  up: (queryInterface: QueryInterface) => {
+    return queryInterface.createTable("QuickAnswers", {
+      id: {
+        type: DataTypes.INTEGER,
+        autoIncrement: true,
+        primaryKey: true,
+        allowNull: false
+      },
+      shortcut: {
+        type: DataTypes.TEXT,
+        allowNull: false
+      },
+      message: {
+        type: DataTypes.TEXT,
+        allowNull: false
+      },
+      createdAt: {
+        type: DataTypes.DATE,
+        allowNull: false
+      },
+      updatedAt: {
+        type: DataTypes.DATE,
+        allowNull: false
+      }
+    });
+  },
+
+  down: (queryInterface: QueryInterface) => {
+    return queryInterface.dropTable("QuickAnswers");
+  }
+};

backend/src/models/QuickAnswer.ts

@@ -0,0 +1,32 @@
+import {
+  Table,
+  Column,
+  DataType,
+  CreatedAt,
+  UpdatedAt,
+  Model,
+  PrimaryKey,
+  AutoIncrement
+} from "sequelize-typescript";
+
+@Table
+class QuickAnswer extends Model<QuickAnswer> {
+  @PrimaryKey
+  @AutoIncrement
+  @Column
+  id: number;
+
+  @Column(DataType.TEXT)
+  shortcut: string;
+
+  @Column(DataType.TEXT)
+  message: string;
+
+  @CreatedAt
+  createdAt: Date;
+
+  @UpdatedAt
+  updatedAt: Date;
+}
+
+export default QuickAnswer;

backend/src/routes/index.ts

@@ -9,6 +9,7 @@ import whatsappRoutes from "./whatsappRoutes";
 import messageRoutes from "./messageRoutes";
 import whatsappSessionRoutes from "./whatsappSessionRoutes";
 import queueRoutes from "./queueRoutes";
+import quickAnswerRoutes from "./quickAnswerRoutes";
 
 const routes = Router();
 
@@ -22,5 +23,6 @@ routes.use(messageRoutes);
 routes.use(messageRoutes);
 routes.use(whatsappSessionRoutes);
 routes.use(queueRoutes);
+routes.use(quickAnswerRoutes);
 
 export default routes;

backend/src/routes/quickAnswerRoutes.ts

@@ -0,0 +1,30 @@
+import express from "express";
+import isAuth from "../middleware/isAuth";
+
+import * as QuickAnswerController from "../controllers/QuickAnswerController";
+
+const quickAnswerRoutes = express.Router();
+
+quickAnswerRoutes.get("/quickAnswers", isAuth, QuickAnswerController.index);
+
+quickAnswerRoutes.get(
+  "/quickAnswers/:quickAnswerId",
+  isAuth,
+  QuickAnswerController.show
+);
+
+quickAnswerRoutes.post("/quickAnswers", isAuth, QuickAnswerController.store);
+
+quickAnswerRoutes.put(
+  "/quickAnswers/:quickAnswerId",
+  isAuth,
+  QuickAnswerController.update
+);
+
+quickAnswerRoutes.delete(
+  "/quickAnswers/:quickAnswerId",
+  isAuth,
+  QuickAnswerController.remove
+);
+
+export default quickAnswerRoutes;

backend/src/services/QuickAnswerService/CreateQuickAnswerService.ts

@@ -0,0 +1,26 @@
+import AppError from "../../errors/AppError";
+import QuickAnswer from "../../models/QuickAnswer";
+
+interface Request {
+  shortcut: string;
+  message: string;
+}
+
+const CreateQuickAnswerService = async ({
+  shortcut,
+  message
+}: Request): Promise<QuickAnswer> => {
+  const nameExists = await QuickAnswer.findOne({
+    where: { shortcut }
+  });
+
+  if (nameExists) {
+    throw new AppError("ERR__SHORTCUT_DUPLICATED");
+  }
+
+  const quickAnswer = await QuickAnswer.create({ shortcut, message });
+
+  return quickAnswer;
+};
+
+export default CreateQuickAnswerService;

backend/src/services/QuickAnswerService/DeleteQuickAnswerService.ts

@@ -0,0 +1,16 @@
+import QuickAnswer from "../../models/QuickAnswer";
+import AppError from "../../errors/AppError";
+
+const DeleteQuickAnswerService = async (id: string): Promise<void> => {
+  const quickAnswer = await QuickAnswer.findOne({
+    where: { id }
+  });
+
+  if (!quickAnswer) {
+    throw new AppError("ERR_NO_QUICK_ANSWER_FOUND", 404);
+  }
+
+  await quickAnswer.destroy();
+};
+
+export default DeleteQuickAnswerService;

backend/src/services/QuickAnswerService/ListQuickAnswerService.ts

@@ -0,0 +1,45 @@
+import { Sequelize } from "sequelize";
+import QuickAnswer from "../../models/QuickAnswer";
+
+interface Request {
+  searchParam?: string;
+  pageNumber?: string;
+}
+
+interface Response {
+  quickAnswers: QuickAnswer[];
+  count: number;
+  hasMore: boolean;
+}
+
+const ListQuickAnswerService = async ({
+  searchParam = "",
+  pageNumber = "1"
+}: Request): Promise<Response> => {
+  const whereCondition = {
+    message: Sequelize.where(
+      Sequelize.fn("LOWER", Sequelize.col("message")),
+      "LIKE",
+      `%${searchParam.toLowerCase().trim()}%`
+    )
+  };
+  const limit = 20;
+  const offset = limit * (+pageNumber - 1);
+
+  const { count, rows: quickAnswers } = await QuickAnswer.findAndCountAll({
+    where: whereCondition,
+    limit,
+    offset,
+    order: [["message", "ASC"]]
+  });
+
+  const hasMore = count > offset + quickAnswers.length;
+
+  return {
+    quickAnswers,
+    count,
+    hasMore
+  };
+};
+
+export default ListQuickAnswerService;

backend/src/services/QuickAnswerService/ShowQuickAnswerService.ts

@@ -0,0 +1,14 @@
+import QuickAnswer from "../../models/QuickAnswer";
+import AppError from "../../errors/AppError";
+
+const ShowQuickAnswerService = async (id: string): Promise<QuickAnswer> => {
+  const quickAnswer = await QuickAnswer.findByPk(id);
+
+  if (!quickAnswer) {
+    throw new AppError("ERR_NO_QUICK_ANSWERS_FOUND", 404);
+  }
+
+  return quickAnswer;
+};
+
+export default ShowQuickAnswerService;

backend/src/services/QuickAnswerService/UpdateQuickAnswerService.ts

@@ -0,0 +1,40 @@
+import QuickAnswer from "../../models/QuickAnswer";
+import AppError from "../../errors/AppError";
+
+interface QuickAnswerData {
+  shortcut?: string;
+  message?: string;
+}
+
+interface Request {
+  quickAnswerData: QuickAnswerData;
+  quickAnswerId: string;
+}
+
+const UpdateQuickAnswerService = async ({
+  quickAnswerData,
+  quickAnswerId
+}: Request): Promise<QuickAnswer> => {
+  const { shortcut, message } = quickAnswerData;
+
+  const quickAnswer = await QuickAnswer.findOne({
+    where: { id: quickAnswerId },
+    attributes: ["id", "shortcut", "message"]
+  });
+
+  if (!quickAnswer) {
+    throw new AppError("ERR_NO_QUICK_ANSWERS_FOUND", 404);
+  }
+  await quickAnswer.update({
+    shortcut,
+    message
+  });
+
+  await quickAnswer.reload({
+    attributes: ["id", "shortcut", "message"]
+  });
+
+  return quickAnswer;
+};
+
+export default UpdateQuickAnswerService;

frontend/src/App.js

@@ -2,13 +2,13 @@ import React, { useState, useEffect } from "react";
 import Routes from "./routes";
 import "react-toastify/dist/ReactToastify.css";
 
-import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
+import { createTheme, ThemeProvider } from "@material-ui/core/styles";
 import { ptBR } from "@material-ui/core/locale";
 
 const App = () => {
   const [locale, setLocale] = useState();
 
-	const theme = createMuiTheme(
+  const theme = createTheme(
     {
       scrollbarStyles: {
         "&::-webkit-scrollbar": {

frontend/src/components/ColorPicker/index.js

@@ -6,7 +6,7 @@ import { GithubPicker } from "react-color";
 const ColorPicker = ({ onChange, currentColor, handleClose, open }) => {
   const [selectedColor, setSelectedColor] = useState(currentColor);
 
-	const handleChange = color => {
+  const handleChange = (color) => {
     setSelectedColor(color.hex);
     handleClose();
   };
@@ -22,7 +22,7 @@ const ColorPicker = ({ onChange, currentColor, handleClose, open }) => {
         triangle="hide"
         color={selectedColor}
         onChange={handleChange}
-				onChangeComplete={color => onChange(color.hex)}
+        onChangeComplete={(color) => onChange(color.hex)}
       />
     </Dialog>
   );

frontend/src/components/MainContainer/index.js

@@ -3,11 +3,13 @@ import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   mainContainer: {
     flex: 1,
-		padding: theme.spacing(2),
+    // padding: theme.spacing(2),
-		height: `calc(100% - 48px)`,
+    // height: `calc(100% - 48px)`,
+    padding: 0,
+    height: "100%",
   },
 
   contentWrapper: {
@@ -22,7 +24,7 @@ const MainContainer = ({ children }) => {
   const classes = useStyles();
 
   return (
-		<Container className={classes.mainContainer}>
+    <Container className={classes.mainContainer} maxWidth={false}>
       <div className={classes.contentWrapper}>{children}</div>
     </Container>
   );

frontend/src/components/MessageInput/index.js

@@ -12,6 +12,7 @@ import CircularProgress from "@material-ui/core/CircularProgress";
 import { green } from "@material-ui/core/colors";
 import AttachFileIcon from "@material-ui/icons/AttachFile";
 import IconButton from "@material-ui/core/IconButton";
+import MoreVert from "@material-ui/icons/MoreVert";
 import MoodIcon from "@material-ui/icons/Mood";
 import SendIcon from "@material-ui/icons/Send";
 import CancelIcon from "@material-ui/icons/Cancel";
@@ -19,7 +20,14 @@ 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 {
+  FormControlLabel,
+  Hidden,
+  Menu,
+  MenuItem,
+  Switch,
+} from "@material-ui/core";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 
 import { i18n } from "../../translate/i18n";
 import api from "../../services/api";
@@ -31,13 +39,18 @@ import toastError from "../../errors/toastError";
 
 const Mp3Recorder = new MicRecorder({ bitRate: 128 });
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   mainWrapper: {
     background: "#eee",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     borderTop: "1px solid rgba(0, 0, 0, 0.12)",
+    [theme.breakpoints.down("sm")]: {
+      position: "fixed",
+      bottom: 0,
+      width: "100%",
+    },
   },
 
   newMessageBox: {
@@ -55,6 +68,7 @@ const useStyles = makeStyles(theme => ({
     display: "flex",
     borderRadius: 20,
     flex: 1,
+    position: "relative",
   },
 
   messageInput: {
@@ -161,6 +175,30 @@ const useStyles = makeStyles(theme => ({
     color: "#6bcbef",
     fontWeight: 500,
   },
+  messageQuickAnswersWrapper: {
+    margin: 0,
+    position: "absolute",
+    bottom: "50px",
+    background: "#ffffff",
+    padding: "2px",
+    border: "1px solid #CCC",
+    left: 0,
+    width: "100%",
+    "& li": {
+      listStyle: "none",
+      "& a": {
+        display: "block",
+        padding: "8px",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        maxHeight: "32px",
+        "&:hover": {
+          background: "#F1F1F1",
+          cursor: "pointer",
+        },
+      },
+    },
+  },
 }));
 
 const MessageInput = ({ ticketStatus }) => {
@@ -172,10 +210,12 @@ const MessageInput = ({ ticketStatus }) => {
   const [showEmoji, setShowEmoji] = useState(false);
   const [loading, setLoading] = useState(false);
   const [recording, setRecording] = useState(false);
+  const [quickAnswers, setQuickAnswer] = useState([]);
+  const [typeBar, setTypeBar] = useState(false);
   const inputRef = useRef();
-	const { setReplyingMessage, replyingMessage } = useContext(
+  const [anchorEl, setAnchorEl] = useState(null);
-		ReplyMessageContext
+  const { setReplyingMessage, replyingMessage } =
-	);
+    useContext(ReplyMessageContext);
   const { user } = useContext(AuthContext);
 
   const [signMessage, setSignMessage] = useLocalStorage("signOption", true);
@@ -194,16 +234,22 @@ const MessageInput = ({ ticketStatus }) => {
     };
   }, [ticketId, setReplyingMessage]);
 
-	const handleChangeInput = e => {
+  const handleChangeInput = (e) => {
     setInputMessage(e.target.value);
+    handleLoadQuickAnswer(e.target.value);
   };
 
-	const handleAddEmoji = e => {
+  const handleQuickAnswersClick = (value) => {
+    setInputMessage(value);
+    setTypeBar(false);
+  };
+
+  const handleAddEmoji = (e) => {
     let emoji = e.native;
-		setInputMessage(prevState => prevState + emoji);
+    setInputMessage((prevState) => prevState + emoji);
   };
 
-	const handleChangeMedias = e => {
+  const handleChangeMedias = (e) => {
     if (!e.target.files) {
       return;
     }
@@ -212,19 +258,19 @@ const MessageInput = ({ ticketStatus }) => {
     setMedias(selectedMedias);
   };
 
-	const handleInputPaste = e => {
+  const handleInputPaste = (e) => {
     if (e.clipboardData.files[0]) {
       setMedias([e.clipboardData.files[0]]);
     }
   };
 
-	const handleUploadMedia = async e => {
+  const handleUploadMedia = async (e) => {
     setLoading(true);
     e.preventDefault();
 
     const formData = new FormData();
     formData.append("fromMe", true);
-		medias.forEach(media => {
+    medias.forEach((media) => {
       formData.append("medias", media);
       formData.append("body", media.name);
     });
@@ -277,6 +323,26 @@ const MessageInput = ({ ticketStatus }) => {
     }
   };
 
+  const handleLoadQuickAnswer = async (value) => {
+    if (value && value.indexOf("/") === 0) {
+      try {
+        const { data } = await api.get("/quickAnswers/", {
+          params: { searchParam: inputMessage.substring(1) },
+        });
+        setQuickAnswer(data.quickAnswers);
+        if (data.quickAnswers.length > 0) {
+          setTypeBar(true);
+        } else {
+          setTypeBar(false);
+        }
+      } catch (err) {
+        setTypeBar(false);
+      }
+    } else {
+      setTypeBar(false);
+    }
+  };
+
   const handleUploadAudio = async () => {
     setLoading(true);
     try {
@@ -311,7 +377,15 @@ const MessageInput = ({ ticketStatus }) => {
     }
   };
 
-	const renderReplyingMessage = message => {
+  const handleOpenMenuClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuItemClick = (event) => {
+    setAnchorEl(null);
+  };
+
+  const renderReplyingMessage = (message) => {
     return (
       <div className={classes.replyginMsgWrapper}>
         <div className={classes.replyginMsgContainer}>
@@ -347,7 +421,7 @@ const MessageInput = ({ ticketStatus }) => {
         <IconButton
           aria-label="cancel-upload"
           component="span"
-					onClick={e => setMedias([])}
+          onClick={(e) => setMedias([])}
         >
           <CancelIcon className={classes.sendMessageIcons} />
         </IconButton>
@@ -377,22 +451,25 @@ const MessageInput = ({ ticketStatus }) => {
       <Paper square elevation={0} className={classes.mainWrapper}>
         {replyingMessage && renderReplyingMessage(replyingMessage)}
         <div className={classes.newMessageBox}>
+          <Hidden only={["sm", "xs"]}>
             <IconButton
               aria-label="emojiPicker"
               component="span"
               disabled={loading || recording || ticketStatus !== "open"}
-						onClick={e => setShowEmoji(prevState => !prevState)}
+              onClick={(e) => setShowEmoji((prevState) => !prevState)}
             >
               <MoodIcon className={classes.sendMessageIcons} />
             </IconButton>
             {showEmoji ? (
               <div className={classes.emojiBox}>
+                <ClickAwayListener onClickAway={(e) => setShowEmoji(false)}>
                   <Picker
                     perLine={16}
                     showPreview={false}
                     showSkinTones={false}
                     onSelect={handleAddEmoji}
                   />
+                </ClickAwayListener>
               </div>
             ) : null}
 
@@ -421,7 +498,7 @@ const MessageInput = ({ ticketStatus }) => {
                 <Switch
                   size="small"
                   checked={signMessage}
-								onChange={e => {
+                  onChange={(e) => {
                     setSignMessage(e.target.checked);
                   }}
                   name="showAllTickets"
@@ -429,9 +506,74 @@ const MessageInput = ({ ticketStatus }) => {
                 />
               }
             />
+          </Hidden>
+          <Hidden only={["md", "lg", "xl"]}>
+            <IconButton
+              aria-controls="simple-menu"
+              aria-haspopup="true"
+              onClick={handleOpenMenuClick}
+            >
+              <MoreVert></MoreVert>
+            </IconButton>
+            <Menu
+              id="simple-menu"
+              keepMounted
+              anchorEl={anchorEl}
+              open={Boolean(anchorEl)}
+              onClose={handleMenuItemClick}
+            >
+              <MenuItem onClick={handleMenuItemClick}>
+                <IconButton
+                  aria-label="emojiPicker"
+                  component="span"
+                  disabled={loading || recording || ticketStatus !== "open"}
+                  onClick={(e) => setShowEmoji((prevState) => !prevState)}
+                >
+                  <MoodIcon className={classes.sendMessageIcons} />
+                </IconButton>
+              </MenuItem>
+              <MenuItem onClick={handleMenuItemClick}>
+                <input
+                  multiple
+                  type="file"
+                  id="upload-button"
+                  disabled={loading || recording || ticketStatus !== "open"}
+                  className={classes.uploadInput}
+                  onChange={handleChangeMedias}
+                />
+                <label htmlFor="upload-button">
+                  <IconButton
+                    aria-label="upload"
+                    component="span"
+                    disabled={loading || recording || ticketStatus !== "open"}
+                  >
+                    <AttachFileIcon className={classes.sendMessageIcons} />
+                  </IconButton>
+                </label>
+              </MenuItem>
+              <MenuItem onClick={handleMenuItemClick}>
+                <FormControlLabel
+                  style={{ marginRight: 7, color: "gray" }}
+                  label={i18n.t("messagesInput.signMessage")}
+                  labelPlacement="start"
+                  control={
+                    <Switch
+                      size="small"
+                      checked={signMessage}
+                      onChange={(e) => {
+                        setSignMessage(e.target.checked);
+                      }}
+                      name="showAllTickets"
+                      color="primary"
+                    />
+                  }
+                />
+              </MenuItem>
+            </Menu>
+          </Hidden>
           <div className={classes.messageInputWrapper}>
             <InputBase
-							inputRef={input => {
+              inputRef={(input) => {
                 input && input.focus();
                 input && (inputRef.current = input);
               }}
@@ -446,16 +588,35 @@ const MessageInput = ({ ticketStatus }) => {
               value={inputMessage}
               onChange={handleChangeInput}
               disabled={recording || loading || ticketStatus !== "open"}
-							onPaste={e => {
+              onPaste={(e) => {
                 ticketStatus === "open" && handleInputPaste(e);
               }}
-							onKeyPress={e => {
+              onKeyPress={(e) => {
                 if (loading || e.shiftKey) return;
                 else if (e.key === "Enter") {
                   handleSendMessage();
                 }
               }}
             />
+            {typeBar ? (
+              <ul className={classes.messageQuickAnswersWrapper}>
+                {quickAnswers.map((value, index) => {
+                  return (
+                    <li
+                      className={classes.messageQuickAnswersWrapperItem}
+                      key={index}
+                    >
+                      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                      <a onClick={() => handleQuickAnswersClick(value.message)}>
+                        {`${value.shortcut} - ${value.message}`}
+                      </a>
+                    </li>
+                  );
+                })}
+              </ul>
+            ) : (
+              <div></div>
+            )}
           </div>
           {inputMessage ? (
             <IconButton

frontend/src/components/MessageOptionsMenu/index.js

@@ -26,7 +26,7 @@ const MessageOptionsMenu = ({ message, menuOpen, handleClose, anchorEl }) => {
     handleClose();
   };
 
-	const handleOpenConfirmationModal = e => {
+  const handleOpenConfirmationModal = (e) => {
     setConfirmationOpen(true);
     handleClose();
   };

frontend/src/components/MessagesList/index.js

@@ -29,7 +29,7 @@ import whatsBackground from "../../assets/wa-background.png";
 import api from "../../services/api";
 import toastError from "../../errors/toastError";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   messagesListWrapper: {
     overflow: "hidden",
     position: "relative",
@@ -45,6 +45,9 @@ const useStyles = makeStyles(theme => ({
     flexGrow: 1,
     padding: "20px 20px 20px 20px",
     overflowY: "scroll",
+    [theme.breakpoints.down("sm")]: {
+      paddingBottom: "90px",
+    },
     ...theme.scrollbarStyles,
   },
 
@@ -260,8 +263,8 @@ const reducer = (state, action) => {
     const messages = action.payload;
     const newMessages = [];
 
-		messages.forEach(message => {
+    messages.forEach((message) => {
-			const messageIndex = state.findIndex(m => m.id === message.id);
+      const messageIndex = state.findIndex((m) => m.id === message.id);
       if (messageIndex !== -1) {
         state[messageIndex] = message;
       } else {
@@ -274,7 +277,7 @@ const reducer = (state, action) => {
 
   if (action.type === "ADD_MESSAGE") {
     const newMessage = action.payload;
-		const messageIndex = state.findIndex(m => m.id === newMessage.id);
+    const messageIndex = state.findIndex((m) => m.id === newMessage.id);
 
     if (messageIndex !== -1) {
       state[messageIndex] = newMessage;
@@ -287,7 +290,7 @@ const reducer = (state, action) => {
 
   if (action.type === "UPDATE_MESSAGE") {
     const messageToUpdate = action.payload;
-		const messageIndex = state.findIndex(m => m.id === messageToUpdate.id);
+    const messageIndex = state.findIndex((m) => m.id === messageToUpdate.id);
 
     if (messageIndex !== -1) {
       state[messageIndex] = messageToUpdate;
@@ -357,7 +360,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
 
     socket.on("connect", () => socket.emit("joinChatBox", ticketId));
 
-		socket.on("appMessage", data => {
+    socket.on("appMessage", (data) => {
       if (data.action === "create") {
         dispatch({ type: "ADD_MESSAGE", payload: data.message });
         scrollToBottom();
@@ -374,7 +377,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
   }, [ticketId]);
 
   const loadMore = () => {
-		setPageNumber(prevPageNumber => prevPageNumber + 1);
+    setPageNumber((prevPageNumber) => prevPageNumber + 1);
   };
 
   const scrollToBottom = () => {
@@ -383,7 +386,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
     }
   };
 
-	const handleScroll = e => {
+  const handleScroll = (e) => {
     if (!hasMore) return;
     const { scrollTop } = e.currentTarget;
 
@@ -405,11 +408,11 @@ const MessagesList = ({ ticketId, isGroup }) => {
     setSelectedMessage(message);
   };
 
-	const handleCloseMessageOptionsMenu = e => {
+  const handleCloseMessageOptionsMenu = (e) => {
     setAnchorEl(null);
   };
 
-	const checkMessageMedia = message => {
+  const checkMessageMedia = (message) => {
     if (message.mediaType === "image") {
       return <ModalImageCors imageUrl={message.mediaUrl} />;
     }
@@ -449,7 +452,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
     }
   };
 
-	const renderMessageAck = message => {
+  const renderMessageAck = (message) => {
     if (message.ack === 0) {
       return <AccessTime fontSize="small" className={classes.ackIcons} />;
     }
@@ -518,7 +521,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
     }
   };
 
-	const renderQuotedMessage = message => {
+  const renderQuotedMessage = (message) => {
     return (
       <div
         className={clsx(classes.quotedContainerLeft, {
@@ -557,7 +560,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
                   id="messageActionsButton"
                   disabled={message.isDeleted}
                   className={classes.messageActionsButton}
-									onClick={e => handleOpenMessageOptionsMenu(e, message)}
+                  onClick={(e) => handleOpenMessageOptionsMenu(e, message)}
                 >
                   <ExpandMore />
                 </IconButton>
@@ -589,7 +592,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
                   id="messageActionsButton"
                   disabled={message.isDeleted}
                   className={classes.messageActionsButton}
-									onClick={e => handleOpenMessageOptionsMenu(e, message)}
+                  onClick={(e) => handleOpenMessageOptionsMenu(e, message)}
                 >
                   <ExpandMore />
                 </IconButton>

frontend/src/components/QuickAnswersModal/index.js

@@ -0,0 +1,222 @@
+import React, { useState, useEffect, useRef } from "react";
+
+import * as Yup from "yup";
+import { Formik, Form, Field } from "formik";
+import { toast } from "react-toastify";
+
+import {
+  makeStyles,
+  Button,
+  TextField,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  CircularProgress,
+} from "@material-ui/core";
+import { green } from "@material-ui/core/colors";
+import { i18n } from "../../translate/i18n";
+
+import api from "../../services/api";
+import toastError from "../../errors/toastError";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexWrap: "wrap",
+  },
+  textField: {
+    marginRight: theme.spacing(1),
+    width: "100%",
+  },
+
+  btnWrapper: {
+    position: "relative",
+  },
+
+  buttonProgress: {
+    color: green[500],
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    marginTop: -12,
+    marginLeft: -12,
+  },
+  textQuickAnswerContainer: {
+    width: "100%",
+  },
+}));
+
+const QuickAnswerSchema = Yup.object().shape({
+  shortcut: Yup.string()
+    .min(2, "Too Short!")
+    .max(15, "Too Long!")
+    .required("Required"),
+  message: Yup.string()
+    .min(8, "Too Short!")
+    .max(30000, "Too Long!")
+    .required("Required"),
+});
+
+const QuickAnswersModal = ({
+  open,
+  onClose,
+  quickAnswerId,
+  initialValues,
+  onSave,
+}) => {
+  const classes = useStyles();
+  const isMounted = useRef(true);
+
+  const initialState = {
+    shortcut: "",
+    message: "",
+  };
+
+  const [quickAnswer, setQuickAnswer] = useState(initialState);
+
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const fetchQuickAnswer = async () => {
+      if (initialValues) {
+        setQuickAnswer((prevState) => {
+          return { ...prevState, ...initialValues };
+        });
+      }
+
+      if (!quickAnswerId) return;
+
+      try {
+        const { data } = await api.get(`/quickAnswers/${quickAnswerId}`);
+        if (isMounted.current) {
+          setQuickAnswer(data);
+        }
+      } catch (err) {
+        toastError(err);
+      }
+    };
+
+    fetchQuickAnswer();
+  }, [quickAnswerId, open, initialValues]);
+
+  const handleClose = () => {
+    onClose();
+    setQuickAnswer(initialState);
+  };
+
+  const handleSaveQuickAnswer = async (values) => {
+    try {
+      if (quickAnswerId) {
+        await api.put(`/quickAnswers/${quickAnswerId}`, values);
+        handleClose();
+      } else {
+        const { data } = await api.post("/quickAnswers", values);
+        if (onSave) {
+          onSave(data);
+        }
+        handleClose();
+      }
+      toast.success(i18n.t("quickAnswersModal.success"));
+    } catch (err) {
+      toastError(err);
+    }
+  };
+
+  return (
+    <div className={classes.root}>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        maxWidth="sm"
+        fullWidth
+        scroll="paper"
+      >
+        <DialogTitle id="form-dialog-title">
+          {quickAnswerId
+            ? `${i18n.t("quickAnswersModal.title.edit")}`
+            : `${i18n.t("quickAnswersModal.title.add")}`}
+        </DialogTitle>
+        <Formik
+          initialValues={quickAnswer}
+          enableReinitialize={true}
+          validationSchema={QuickAnswerSchema}
+          onSubmit={(values, actions) => {
+            setTimeout(() => {
+              handleSaveQuickAnswer(values);
+              actions.setSubmitting(false);
+            }, 400);
+          }}
+        >
+          {({ values, errors, touched, isSubmitting }) => (
+            <Form>
+              <DialogContent dividers>
+                <div className={classes.textQuickAnswerContainer}>
+                  <Field
+                    as={TextField}
+                    label={i18n.t("quickAnswersModal.form.shortcut")}
+                    name="shortcut"
+                    autoFocus
+                    error={touched.shortcut && Boolean(errors.shortcut)}
+                    helperText={touched.shortcut && errors.shortcut}
+                    variant="outlined"
+                    margin="dense"
+                    className={classes.textField}
+                    fullWidth
+                  />
+                </div>
+                <div className={classes.textQuickAnswerContainer}>
+                  <Field
+                    as={TextField}
+                    label={i18n.t("quickAnswersModal.form.message")}
+                    name="message"
+                    error={touched.message && Boolean(errors.message)}
+                    helperText={touched.message && errors.message}
+                    variant="outlined"
+                    margin="dense"
+                    className={classes.textField}
+                    multiline
+                    rows={5}
+                    fullWidth
+                  />
+                </div>
+              </DialogContent>
+              <DialogActions>
+                <Button
+                  onClick={handleClose}
+                  color="secondary"
+                  disabled={isSubmitting}
+                  variant="outlined"
+                >
+                  {i18n.t("quickAnswersModal.buttons.cancel")}
+                </Button>
+                <Button
+                  type="submit"
+                  color="primary"
+                  disabled={isSubmitting}
+                  variant="contained"
+                  className={classes.btnWrapper}
+                >
+                  {quickAnswerId
+                    ? `${i18n.t("quickAnswersModal.buttons.okEdit")}`
+                    : `${i18n.t("quickAnswersModal.buttons.okAdd")}`}
+                  {isSubmitting && (
+                    <CircularProgress
+                      size={24}
+                      className={classes.buttonProgress}
+                    />
+                  )}
+                </Button>
+              </DialogActions>
+            </Form>
+          )}
+        </Formik>
+      </Dialog>
+    </div>
+  );
+};
+
+export default QuickAnswersModal;

frontend/src/components/Ticket/index.js

@@ -19,7 +19,7 @@ import toastError from "../../errors/toastError";
 
 const drawerWidth = 320;
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     display: "flex",
     height: "100%",
@@ -27,6 +27,25 @@ const useStyles = makeStyles(theme => ({
     overflow: "hidden",
   },
 
+  ticketInfo: {
+    maxWidth: "50%",
+    flexBasis: "50%",
+    [theme.breakpoints.down("sm")]: {
+      maxWidth: "80%",
+      flexBasis: "80%",
+    },
+  },
+  ticketActionButtons: {
+    maxWidth: "50%",
+    flexBasis: "50%",
+    display: "flex",
+    [theme.breakpoints.down("sm")]: {
+      maxWidth: "100%",
+      flexBasis: "100%",
+      marginBottom: "5px",
+    },
+  },
+
   mainWrapper: {
     flex: 1,
     height: "100%",
@@ -89,7 +108,7 @@ const Ticket = () => {
 
     socket.on("connect", () => socket.emit("joinChatBox", ticketId));
 
-		socket.on("ticket", data => {
+    socket.on("ticket", (data) => {
       if (data.action === "update") {
         setTicket(data.ticket);
       }
@@ -100,9 +119,9 @@ const Ticket = () => {
       }
     });
 
-		socket.on("contact", data => {
+    socket.on("contact", (data) => {
       if (data.action === "update") {
-				setContact(prevState => {
+        setContact((prevState) => {
           if (prevState.id === data.contact?.id) {
             return { ...prevState, ...data.contact };
           }
@@ -134,12 +153,16 @@ const Ticket = () => {
         })}
       >
         <TicketHeader loading={loading}>
+          <div className={classes.ticketInfo}>
             <TicketInfo
               contact={contact}
               ticket={ticket}
               onClick={handleDrawerOpen}
             />
+          </div>
+          <div className={classes.ticketActionButtons}>
             <TicketActionButtons ticket={ticket} />
+          </div>
         </TicketHeader>
         <ReplyMessageProvider>
           <MessagesList

frontend/src/components/TicketHeader/index.js

@@ -1,20 +1,29 @@
 import React from "react";
 
-import { Card } from "@material-ui/core";
+import { Card, Button } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import TicketHeaderSkeleton from "../TicketHeaderSkeleton";
+import ArrowBackIos from "@material-ui/icons/ArrowBackIos";
+import { useHistory } from "react-router-dom";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   ticketHeader: {
     display: "flex",
     backgroundColor: "#eee",
     flex: "none",
     borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
+    [theme.breakpoints.down("sm")]: {
+      flexWrap: "wrap",
+    },
   },
 }));
 
 const TicketHeader = ({ loading, children }) => {
   const classes = useStyles();
+  const history = useHistory();
+  const handleBack = () => {
+    history.push("/tickets");
+  };
 
   return (
     <>
@@ -22,6 +31,9 @@ const TicketHeader = ({ loading, children }) => {
         <TicketHeaderSkeleton />
       ) : (
         <Card square className={classes.ticketHeader}>
+          <Button color="primary" onClick={handleBack}>
+            <ArrowBackIos />
+          </Button>
           {children}
         </Card>
       )}

frontend/src/components/TicketsManager/index.js

@@ -22,7 +22,7 @@ import { Can } from "../Can";
 import TicketsQueueSelect from "../TicketsQueueSelect";
 import { Button } from "@material-ui/core";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   ticketsWrapper: {
     position: "relative",
     display: "flex",
@@ -90,7 +90,7 @@ const TicketsManager = () => {
   const searchInputRef = useRef();
   const { user } = useContext(AuthContext);
 
-	const userQueueIds = user.queues.map(q => q.id);
+  const userQueueIds = user.queues.map((q) => q.id);
   const [selectedQueueIds, setSelectedQueueIds] = useState(userQueueIds || []);
 
   useEffect(() => {
@@ -101,7 +101,7 @@ const TicketsManager = () => {
 
   let searchTimeout;
 
-	const handleSearch = e => {
+  const handleSearch = (e) => {
     const searchedTerm = e.target.value.toLowerCase();
 
     clearTimeout(searchTimeout);
@@ -125,7 +125,7 @@ const TicketsManager = () => {
     <Paper elevation={0} variant="outlined" className={classes.ticketsWrapper}>
       <NewTicketModal
         modalOpen={newTicketModalOpen}
-				onClose={e => setNewTicketModalOpen(false)}
+        onClose={(e) => setNewTicketModalOpen(false)}
       />
       <Paper elevation={0} square className={classes.tabsHeader}>
         <Tabs
@@ -189,7 +189,7 @@ const TicketsManager = () => {
                       size="small"
                       checked={showAllTickets}
                       onChange={() =>
-												setShowAllTickets(prevState => !prevState)
+                        setShowAllTickets((prevState) => !prevState)
                       }
                       name="showAllTickets"
                       color="primary"
@@ -204,7 +204,7 @@ const TicketsManager = () => {
           style={{ marginLeft: 6 }}
           selectedQueueIds={selectedQueueIds}
           userQueues={user?.queues}
-					onChange={values => setSelectedQueueIds(values)}
+          onChange={(values) => setSelectedQueueIds(values)}
         />
       </Paper>
       <TabPanel value={tab} name="open" className={classes.ticketsWrapper}>

frontend/src/layout/MainListItems.js

@@ -14,6 +14,7 @@ import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined";
 import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined";
 import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined";
 import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";
+import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined";
 
 import { i18n } from "../translate/i18n";
 import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
@@ -41,7 +42,8 @@ function ListItemLink(props) {
   );
 }
 
-const MainListItems = () => {
+const MainListItems = (props) => {
+  const { drawerClose } = props;
   const { whatsApps } = useContext(WhatsAppsContext);
   const { user } = useContext(AuthContext);
   const [connectionWarning, setConnectionWarning] = useState(false);
@@ -49,7 +51,7 @@ const MainListItems = () => {
   useEffect(() => {
     const delayDebounceFn = setTimeout(() => {
       if (whatsApps.length > 0) {
-				const offlineWhats = whatsApps.filter(whats => {
+        const offlineWhats = whatsApps.filter((whats) => {
           return (
             whats.status === "qrcode" ||
             whats.status === "PAIRING" ||
@@ -69,7 +71,7 @@ const MainListItems = () => {
   }, [whatsApps]);
 
   return (
-		<div>
+    <div onClick={drawerClose}>
       <ListItemLink
         to="/"
         primary="Dashboard"
@@ -95,6 +97,11 @@ const MainListItems = () => {
         primary={i18n.t("mainDrawer.listItems.contacts")}
         icon={<ContactPhoneOutlinedIcon />}
       />
+      <ListItemLink
+        to="/quickAnswers"
+        primary={i18n.t("mainDrawer.listItems.quickAnswers")}
+        icon={<QuestionAnswerOutlinedIcon />}
+      />
       <Can
         role={user.profile}
         perform="drawer-admin-items:view"

frontend/src/layout/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import clsx from "clsx";
 
 import {
@@ -24,14 +24,16 @@ import UserModal from "../components/UserModal";
 import { AuthContext } from "../context/Auth/AuthContext";
 import BackdropLoading from "../components/BackdropLoading";
 import { i18n } from "../translate/i18n";
-import { useLocalStorage } from "../hooks/useLocalStorage";
 
 const drawerWidth = 240;
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     display: "flex",
     height: "100vh",
+    [theme.breakpoints.down("sm")]: {
+      height: "calc(100vh - 56px)",
+    },
   },
 
   toolbar: {
@@ -113,10 +115,25 @@ const LoggedInLayout = ({ children }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [menuOpen, setMenuOpen] = useState(false);
   const { handleLogout, loading } = useContext(AuthContext);
-	const [drawerOpen, setDrawerOpen] = useLocalStorage("drawerOpen", true);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerVariant, setDrawerVariant] = useState("permanent");
   const { user } = useContext(AuthContext);
 
-	const handleMenu = event => {
+  useEffect(() => {
+    if (document.body.offsetWidth > 600) {
+      setDrawerOpen(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (document.body.offsetWidth < 600) {
+      setDrawerVariant("temporary");
+    } else {
+      setDrawerVariant("permanent");
+    }
+  }, [drawerOpen]);
+
+  const handleMenu = (event) => {
     setAnchorEl(event.currentTarget);
     setMenuOpen(true);
   };
@@ -136,6 +153,12 @@ const LoggedInLayout = ({ children }) => {
     handleLogout();
   };
 
+  const drawerClose = () => {
+    if (document.body.offsetWidth < 600) {
+      setDrawerOpen(false);
+    }
+  };
+
   if (loading) {
     return <BackdropLoading />;
   }
@@ -143,7 +166,8 @@ const LoggedInLayout = ({ children }) => {
   return (
     <div className={classes.root}>
       <Drawer
-				variant="permanent"
+        variant={drawerVariant}
+        className={drawerOpen ? classes.drawerPaper : classes.drawerPaperClose}
         classes={{
           paper: clsx(
             classes.drawerPaper,
@@ -159,7 +183,7 @@ const LoggedInLayout = ({ children }) => {
         </div>
         <Divider />
         <List>
-					<MainListItems />
+          <MainListItems drawerClose={drawerClose} />
         </List>
         <Divider />
       </Drawer>

frontend/src/pages/Contacts/index.js

@@ -40,8 +40,8 @@ const reducer = (state, action) => {
     const contacts = action.payload;
     const newContacts = [];
 
-		contacts.forEach(contact => {
+    contacts.forEach((contact) => {
-			const contactIndex = state.findIndex(c => c.id === contact.id);
+      const contactIndex = state.findIndex((c) => c.id === contact.id);
       if (contactIndex !== -1) {
         state[contactIndex] = contact;
       } else {
@@ -54,7 +54,7 @@ const reducer = (state, action) => {
 
   if (action.type === "UPDATE_CONTACTS") {
     const contact = action.payload;
-		const contactIndex = state.findIndex(c => c.id === contact.id);
+    const contactIndex = state.findIndex((c) => c.id === contact.id);
 
     if (contactIndex !== -1) {
       state[contactIndex] = contact;
@@ -67,7 +67,7 @@ const reducer = (state, action) => {
   if (action.type === "DELETE_CONTACT") {
     const contactId = action.payload;
 
-		const contactIndex = state.findIndex(c => c.id === contactId);
+    const contactIndex = state.findIndex((c) => c.id === contactId);
     if (contactIndex !== -1) {
       state.splice(contactIndex, 1);
     }
@@ -79,7 +79,7 @@ const reducer = (state, action) => {
   }
 };
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   mainPaper: {
     flex: 1,
     padding: theme.spacing(1),
@@ -132,7 +132,7 @@ const Contacts = () => {
   useEffect(() => {
     const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		socket.on("contact", data => {
+    socket.on("contact", (data) => {
       if (data.action === "update" || data.action === "create") {
         dispatch({ type: "UPDATE_CONTACTS", payload: data.contact });
       }
@@ -147,7 +147,7 @@ const Contacts = () => {
     };
   }, []);
 
-	const handleSearch = event => {
+  const handleSearch = (event) => {
     setSearchParam(event.target.value.toLowerCase());
   };
 
@@ -161,7 +161,7 @@ const Contacts = () => {
     setContactModalOpen(false);
   };
 
-	const handleSaveTicket = async contactId => {
+  const handleSaveTicket = async (contactId) => {
     if (!contactId) return;
     setLoading(true);
     try {
@@ -177,12 +177,12 @@ const Contacts = () => {
     setLoading(false);
   };
 
-	const hadleEditContact = contactId => {
+  const hadleEditContact = (contactId) => {
     setSelectedContactId(contactId);
     setContactModalOpen(true);
   };
 
-	const handleDeleteContact = async contactId => {
+  const handleDeleteContact = async (contactId) => {
     try {
       await api.delete(`/contacts/${contactId}`);
       toast.success(i18n.t("contacts.toasts.deleted"));
@@ -204,10 +204,10 @@ const Contacts = () => {
   };
 
   const loadMore = () => {
-		setPageNumber(prevState => prevState + 1);
+    setPageNumber((prevState) => prevState + 1);
   };
 
-	const handleScroll = e => {
+  const handleScroll = (e) => {
     if (!hasMore || loading) return;
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
     if (scrollHeight - (scrollTop + 100) < clientHeight) {
@@ -233,7 +233,7 @@ const Contacts = () => {
         }
         open={confirmOpen}
         onClose={setConfirmOpen}
-				onConfirm={e =>
+        onConfirm={(e) =>
           deletingContact
             ? handleDeleteContact(deletingContact.id)
             : handleimportContact()
@@ -262,7 +262,7 @@ const Contacts = () => {
           <Button
             variant="contained"
             color="primary"
-						onClick={e => setConfirmOpen(true)}
+            onClick={(e) => setConfirmOpen(true)}
           >
             {i18n.t("contacts.buttons.import")}
           </Button>
@@ -298,7 +298,7 @@ const Contacts = () => {
           </TableHead>
           <TableBody>
             <>
-							{contacts.map(contact => (
+              {contacts.map((contact) => (
                 <TableRow key={contact.id}>
                   <TableCell style={{ paddingRight: 0 }}>
                     {<Avatar src={contact.profilePicUrl} />}
@@ -325,7 +325,7 @@ const Contacts = () => {
                       yes={() => (
                         <IconButton
                           size="small"
-													onClick={e => {
+                          onClick={(e) => {
                             setConfirmOpen(true);
                             setDeletingContact(contact);
                           }}

frontend/src/pages/Login/index.js

@@ -30,7 +30,7 @@ import { AuthContext } from "../../context/Auth/AuthContext";
 // 	);
 // };
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   paper: {
     marginTop: theme.spacing(8),
     display: "flex",
@@ -57,11 +57,11 @@ const Login = () => {
 
   const { handleLogin } = useContext(AuthContext);
 
-	const handleChangeInput = e => {
+  const handleChangeInput = (e) => {
     setUser({ ...user, [e.target.name]: e.target.value });
   };
 
-	const handlSubmit = e => {
+  const handlSubmit = (e) => {
     e.preventDefault();
     handleLogin(user);
   };

frontend/src/pages/Queues/index.js

@@ -28,7 +28,7 @@ import QueueModal from "../../components/QueueModal";
 import { toast } from "react-toastify";
 import ConfirmationModal from "../../components/ConfirmationModal";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   mainPaper: {
     flex: 1,
     padding: theme.spacing(1),
@@ -47,8 +47,8 @@ const reducer = (state, action) => {
     const queues = action.payload;
     const newQueues = [];
 
-		queues.forEach(queue => {
+    queues.forEach((queue) => {
-			const queueIndex = state.findIndex(q => q.id === queue.id);
+      const queueIndex = state.findIndex((q) => q.id === queue.id);
       if (queueIndex !== -1) {
         state[queueIndex] = queue;
       } else {
@@ -61,7 +61,7 @@ const reducer = (state, action) => {
 
   if (action.type === "UPDATE_QUEUES") {
     const queue = action.payload;
-		const queueIndex = state.findIndex(u => u.id === queue.id);
+    const queueIndex = state.findIndex((u) => u.id === queue.id);
 
     if (queueIndex !== -1) {
       state[queueIndex] = queue;
@@ -73,7 +73,7 @@ const reducer = (state, action) => {
 
   if (action.type === "DELETE_QUEUE") {
     const queueId = action.payload;
-		const queueIndex = state.findIndex(q => q.id === queueId);
+    const queueIndex = state.findIndex((q) => q.id === queueId);
     if (queueIndex !== -1) {
       state.splice(queueIndex, 1);
     }
@@ -113,7 +113,7 @@ const Queues = () => {
   useEffect(() => {
     const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		socket.on("queue", data => {
+    socket.on("queue", (data) => {
       if (data.action === "update" || data.action === "create") {
         dispatch({ type: "UPDATE_QUEUES", payload: data.queue });
       }
@@ -138,7 +138,7 @@ const Queues = () => {
     setSelectedQueue(null);
   };
 
-	const handleEditQueue = queue => {
+  const handleEditQueue = (queue) => {
     setSelectedQueue(queue);
     setQueueModalOpen(true);
   };
@@ -148,7 +148,7 @@ const Queues = () => {
     setSelectedQueue(null);
   };
 
-	const handleDeleteQueue = async queueId => {
+  const handleDeleteQueue = async (queueId) => {
     try {
       await api.delete(`/queue/${queueId}`);
       toast.success(i18n.t("Queue deleted successfully!"));
@@ -210,7 +210,7 @@ const Queues = () => {
           </TableHead>
           <TableBody>
             <>
-							{queues.map(queue => (
+              {queues.map((queue) => (
                 <TableRow key={queue.id}>
                   <TableCell align="center">{queue.name}</TableCell>
                   <TableCell align="center">

frontend/src/pages/QuickAnswers/index.js

@@ -0,0 +1,288 @@
+import React, { useState, useEffect, useReducer } from "react";
+import openSocket from "socket.io-client";
+
+import {
+  Button,
+  IconButton,
+  makeStyles,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  InputAdornment,
+  TextField,
+} from "@material-ui/core";
+import { Edit, DeleteOutline } from "@material-ui/icons";
+import SearchIcon from "@material-ui/icons/Search";
+
+import MainContainer from "../../components/MainContainer";
+import MainHeader from "../../components/MainHeader";
+import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper";
+import Title from "../../components/Title";
+
+import api from "../../services/api";
+import { i18n } from "../../translate/i18n";
+import TableRowSkeleton from "../../components/TableRowSkeleton";
+import QuickAnswersModal from "../../components/QuickAnswersModal";
+import ConfirmationModal from "../../components/ConfirmationModal";
+import { toast } from "react-toastify";
+import toastError from "../../errors/toastError";
+
+const reducer = (state, action) => {
+  if (action.type === "LOAD_QUICK_ANSWERS") {
+    const quickAnswers = action.payload;
+    const newQuickAnswers = [];
+
+    quickAnswers.forEach((quickAnswer) => {
+      const quickAnswerIndex = state.findIndex((q) => q.id === quickAnswer.id);
+      if (quickAnswerIndex !== -1) {
+        state[quickAnswerIndex] = quickAnswer;
+      } else {
+        newQuickAnswers.push(quickAnswer);
+      }
+    });
+
+    return [...state, ...newQuickAnswers];
+  }
+
+  if (action.type === "UPDATE_QUICK_ANSWERS") {
+    const quickAnswer = action.payload;
+    const quickAnswerIndex = state.findIndex((q) => q.id === quickAnswer.id);
+
+    if (quickAnswerIndex !== -1) {
+      state[quickAnswerIndex] = quickAnswer;
+      return [...state];
+    } else {
+      return [quickAnswer, ...state];
+    }
+  }
+
+  if (action.type === "DELETE_QUICK_ANSWERS") {
+    const quickAnswerId = action.payload;
+
+    const quickAnswerIndex = state.findIndex((q) => q.id === quickAnswerId);
+    if (quickAnswerIndex !== -1) {
+      state.splice(quickAnswerIndex, 1);
+    }
+    return [...state];
+  }
+
+  if (action.type === "RESET") {
+    return [];
+  }
+};
+
+const useStyles = makeStyles((theme) => ({
+  mainPaper: {
+    flex: 1,
+    padding: theme.spacing(1),
+    overflowY: "scroll",
+    ...theme.scrollbarStyles,
+  },
+}));
+
+const QuickAnswers = () => {
+  const classes = useStyles();
+
+  const [loading, setLoading] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [searchParam, setSearchParam] = useState("");
+  const [quickAnswers, dispatch] = useReducer(reducer, []);
+  const [selectedQuickAnswers, setSelectedQuickAnswers] = useState(null);
+  const [quickAnswersModalOpen, setQuickAnswersModalOpen] = useState(false);
+  const [deletingQuickAnswers, setDeletingQuickAnswers] = useState(null);
+  const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+  const [hasMore, setHasMore] = useState(false);
+
+  useEffect(() => {
+    dispatch({ type: "RESET" });
+    setPageNumber(1);
+  }, [searchParam]);
+
+  useEffect(() => {
+    setLoading(true);
+    const delayDebounceFn = setTimeout(() => {
+      const fetchQuickAnswers = async () => {
+        try {
+          const { data } = await api.get("/quickAnswers/", {
+            params: { searchParam, pageNumber },
+          });
+          dispatch({ type: "LOAD_QUICK_ANSWERS", payload: data.quickAnswers });
+          setHasMore(data.hasMore);
+          setLoading(false);
+        } catch (err) {
+          toastError(err);
+        }
+      };
+      fetchQuickAnswers();
+    }, 500);
+    return () => clearTimeout(delayDebounceFn);
+  }, [searchParam, pageNumber]);
+
+  useEffect(() => {
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+
+    socket.on("quickAnswer", (data) => {
+      if (data.action === "update" || data.action === "create") {
+        dispatch({ type: "UPDATE_QUICK_ANSWERS", payload: data.quickAnswer });
+      }
+
+      if (data.action === "delete") {
+        dispatch({
+          type: "DELETE_QUICK_ANSWERS",
+          payload: +data.quickAnswerId,
+        });
+      }
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
+
+  const handleSearch = (event) => {
+    setSearchParam(event.target.value.toLowerCase());
+  };
+
+  const handleOpenQuickAnswersModal = () => {
+    setSelectedQuickAnswers(null);
+    setQuickAnswersModalOpen(true);
+  };
+
+  const handleCloseQuickAnswersModal = () => {
+    setSelectedQuickAnswers(null);
+    setQuickAnswersModalOpen(false);
+  };
+
+  const handleEditQuickAnswers = (quickAnswer) => {
+    setSelectedQuickAnswers(quickAnswer);
+    setQuickAnswersModalOpen(true);
+  };
+
+  const handleDeleteQuickAnswers = async (quickAnswerId) => {
+    try {
+      await api.delete(`/quickAnswers/${quickAnswerId}`);
+      toast.success(i18n.t("quickAnswers.toasts.deleted"));
+    } catch (err) {
+      toastError(err);
+    }
+    setDeletingQuickAnswers(null);
+    setSearchParam("");
+    setPageNumber(1);
+  };
+
+  const loadMore = () => {
+    setPageNumber((prevState) => prevState + 1);
+  };
+
+  const handleScroll = (e) => {
+    if (!hasMore || loading) return;
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    if (scrollHeight - (scrollTop + 100) < clientHeight) {
+      loadMore();
+    }
+  };
+
+  return (
+    <MainContainer>
+      <ConfirmationModal
+        title={
+          deletingQuickAnswers &&
+          `${i18n.t("quickAnswers.confirmationModal.deleteTitle")} ${
+            deletingQuickAnswers.shortcut
+          }?`
+        }
+        open={confirmModalOpen}
+        onClose={setConfirmModalOpen}
+        onConfirm={() => handleDeleteQuickAnswers(deletingQuickAnswers.id)}
+      >
+        {i18n.t("quickAnswers.confirmationModal.deleteMessage")}
+      </ConfirmationModal>
+      <QuickAnswersModal
+        open={quickAnswersModalOpen}
+        onClose={handleCloseQuickAnswersModal}
+        aria-labelledby="form-dialog-title"
+        quickAnswerId={selectedQuickAnswers && selectedQuickAnswers.id}
+      ></QuickAnswersModal>
+      <MainHeader>
+        <Title>{i18n.t("quickAnswers.title")}</Title>
+        <MainHeaderButtonsWrapper>
+          <TextField
+            placeholder={i18n.t("quickAnswers.searchPlaceholder")}
+            type="search"
+            value={searchParam}
+            onChange={handleSearch}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon style={{ color: "gray" }} />
+                </InputAdornment>
+              ),
+            }}
+          />
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleOpenQuickAnswersModal}
+          >
+            {i18n.t("quickAnswers.buttons.add")}
+          </Button>
+        </MainHeaderButtonsWrapper>
+      </MainHeader>
+      <Paper
+        className={classes.mainPaper}
+        variant="outlined"
+        onScroll={handleScroll}
+      >
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell align="center">
+                {i18n.t("quickAnswers.table.shortcut")}
+              </TableCell>
+              <TableCell align="center">
+                {i18n.t("quickAnswers.table.message")}
+              </TableCell>
+              <TableCell align="center">
+                {i18n.t("quickAnswers.table.actions")}
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <>
+              {quickAnswers.map((quickAnswer) => (
+                <TableRow key={quickAnswer.id}>
+                  <TableCell align="center">{quickAnswer.shortcut}</TableCell>
+                  <TableCell align="center">{quickAnswer.message}</TableCell>
+                  <TableCell align="center">
+                    <IconButton
+                      size="small"
+                      onClick={() => handleEditQuickAnswers(quickAnswer)}
+                    >
+                      <Edit />
+                    </IconButton>
+
+                    <IconButton
+                      size="small"
+                      onClick={(e) => {
+                        setConfirmModalOpen(true);
+                        setDeletingQuickAnswers(quickAnswer);
+                      }}
+                    >
+                      <DeleteOutline />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {loading && <TableRowSkeleton columns={3} />}
+            </>
+          </TableBody>
+        </Table>
+      </Paper>
+    </MainContainer>
+  );
+};
+
+export default QuickAnswers;

frontend/src/pages/Tickets/index.js

@@ -8,12 +8,13 @@ import TicketsManager from "../../components/TicketsManager/";
 import Ticket from "../../components/Ticket/";
 
 import { i18n } from "../../translate/i18n";
+import Hidden from "@material-ui/core/Hidden";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   chatContainer: {
     flex: 1,
-		// backgroundColor: "#eee",
+    // // backgroundColor: "#eee",
-		padding: theme.spacing(4),
+    // padding: theme.spacing(4),
     height: `calc(100% - 48px)`,
     overflowY: "hidden",
   },
@@ -30,6 +31,15 @@ const useStyles = makeStyles(theme => ({
     flexDirection: "column",
     overflowY: "hidden",
   },
+  contactsWrapperSmall: {
+    display: "flex",
+    height: "100%",
+    flexDirection: "column",
+    overflowY: "hidden",
+    [theme.breakpoints.down("sm")]: {
+      display: "none",
+    },
+  },
   messagessWrapper: {
     display: "flex",
     height: "100%",
@@ -42,6 +52,13 @@ const useStyles = makeStyles(theme => ({
     alignItems: "center",
     height: "100%",
     textAlign: "center",
+    borderRadius: 0,
+  },
+  ticketsManager: {},
+  ticketsManagerClosed: {
+    [theme.breakpoints.down("sm")]: {
+      display: "none",
+    },
   },
 }));
 
@@ -53,18 +70,30 @@ const Chat = () => {
     <div className={classes.chatContainer}>
       <div className={classes.chatPapper}>
         <Grid container spacing={0}>
-					<Grid item xs={4} className={classes.contactsWrapper}>
+          {/* <Grid item xs={4} className={classes.contactsWrapper}> */}
+          <Grid
+            item
+            xs={12}
+            md={4}
+            className={
+              ticketId ? classes.contactsWrapperSmall : classes.contactsWrapper
+            }
+          >
             <TicketsManager />
           </Grid>
-					<Grid item xs={8} className={classes.messagessWrapper}>
+          <Grid item xs={12} md={8} className={classes.messagessWrapper}>
+            {/* <Grid item xs={8} className={classes.messagessWrapper}> */}
             {ticketId ? (
               <>
                 <Ticket />
               </>
             ) : (
-							<Paper square variant="outlined" className={classes.welcomeMsg}>
+              <Hidden only={["sm", "xs"]}>
+                <Paper className={classes.welcomeMsg}>
+                  {/* <Paper square variant="outlined" className={classes.welcomeMsg}> */}
                   <span>{i18n.t("chat.noTicketMessage")}</span>
                 </Paper>
+              </Hidden>
             )}
           </Grid>
         </Grid>

frontend/src/pages/Users/index.js

@@ -35,8 +35,8 @@ const reducer = (state, action) => {
     const users = action.payload;
     const newUsers = [];
 
-		users.forEach(user => {
+    users.forEach((user) => {
-			const userIndex = state.findIndex(u => u.id === user.id);
+      const userIndex = state.findIndex((u) => u.id === user.id);
       if (userIndex !== -1) {
         state[userIndex] = user;
       } else {
@@ -49,7 +49,7 @@ const reducer = (state, action) => {
 
   if (action.type === "UPDATE_USERS") {
     const user = action.payload;
-		const userIndex = state.findIndex(u => u.id === user.id);
+    const userIndex = state.findIndex((u) => u.id === user.id);
 
     if (userIndex !== -1) {
       state[userIndex] = user;
@@ -62,7 +62,7 @@ const reducer = (state, action) => {
   if (action.type === "DELETE_USER") {
     const userId = action.payload;
 
-		const userIndex = state.findIndex(u => u.id === userId);
+    const userIndex = state.findIndex((u) => u.id === userId);
     if (userIndex !== -1) {
       state.splice(userIndex, 1);
     }
@@ -74,7 +74,7 @@ const reducer = (state, action) => {
   }
 };
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   mainPaper: {
     flex: 1,
     padding: theme.spacing(1),
@@ -124,7 +124,7 @@ const Users = () => {
   useEffect(() => {
     const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		socket.on("user", data => {
+    socket.on("user", (data) => {
       if (data.action === "update" || data.action === "create") {
         dispatch({ type: "UPDATE_USERS", payload: data.user });
       }
@@ -149,16 +149,16 @@ const Users = () => {
     setUserModalOpen(false);
   };
 
-	const handleSearch = event => {
+  const handleSearch = (event) => {
     setSearchParam(event.target.value.toLowerCase());
   };
 
-	const handleEditUser = user => {
+  const handleEditUser = (user) => {
     setSelectedUser(user);
     setUserModalOpen(true);
   };
 
-	const handleDeleteUser = async userId => {
+  const handleDeleteUser = async (userId) => {
     try {
       await api.delete(`/users/${userId}`);
       toast.success(i18n.t("users.toasts.deleted"));
@@ -171,10 +171,10 @@ const Users = () => {
   };
 
   const loadMore = () => {
-		setPageNumber(prevState => prevState + 1);
+    setPageNumber((prevState) => prevState + 1);
   };
 
-	const handleScroll = e => {
+  const handleScroll = (e) => {
     if (!hasMore || loading) return;
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
     if (scrollHeight - (scrollTop + 100) < clientHeight) {
@@ -250,7 +250,7 @@ const Users = () => {
           </TableHead>
           <TableBody>
             <>
-							{users.map(user => (
+              {users.map((user) => (
                 <TableRow key={user.id}>
                   <TableCell align="center">{user.name}</TableCell>
                   <TableCell align="center">{user.email}</TableCell>
@@ -265,7 +265,7 @@ const Users = () => {
 
                     <IconButton
                       size="small"
-											onClick={e => {
+                      onClick={(e) => {
                         setConfirmModalOpen(true);
                         setDeletingUser(user);
                       }}

frontend/src/routes/index.js

@@ -11,6 +11,7 @@ import Connections from "../pages/Connections/";
 import Settings from "../pages/Settings/";
 import Users from "../pages/Users";
 import Contacts from "../pages/Contacts/";
+import QuickAnswers from "../pages/QuickAnswers/";
 import Queues from "../pages/Queues/";
 import { AuthProvider } from "../context/Auth/AuthContext";
 import { WhatsAppsProvider } from "../context/WhatsApp/WhatsAppsContext";
@@ -40,6 +41,12 @@ const Routes = () => {
               />
               <Route exact path="/contacts" component={Contacts} isPrivate />
               <Route exact path="/users" component={Users} isPrivate />
+              <Route
+                exact
+                path="/quickAnswers"
+                component={QuickAnswers}
+                isPrivate
+              />
               <Route exact path="/Settings" component={Settings} isPrivate />
               <Route exact path="/Queues" component={Queues} isPrivate />
             </LoggedInLayout>

frontend/src/translate/languages/en.js

@@ -153,6 +153,22 @@ const messages = {
         },
         success: "Contact saved successfully.",
       },
+      quickAnswersModal: {
+        title: {
+          add: "Add Quick Reply",
+          edit: "Edit Quick Answer",
+        },
+        form: {
+          shortcut: "Shortcut",
+          message: "Quick Reply",
+        },
+        buttons: {
+          okAdd: "Add",
+          okEdit: "Save",
+          cancel: "Cancel",
+        },
+        success: "Quick Reply saved successfully.",
+      },
       queueModal: {
         title: {
           add: "Add queue",
@@ -250,6 +266,7 @@ const messages = {
           connections: "Connections",
           tickets: "Tickets",
           contacts: "Contacts",
+          quickAnswers: "Quick Answers",
           queues: "Queues",
           administration: "Administration",
           users: "Users",
@@ -285,6 +302,25 @@ const messages = {
       queueSelect: {
         inputLabel: "Queues",
       },
+      quickAnswers: {
+        title: "Quick Answers",
+        table: {
+          shortcut: "Shortcut",
+          message: "Quick Reply",
+          actions: "Actions",
+        },
+        buttons: {
+          add: "Add Quick Reply",
+        },
+        toasts: {
+          deleted: "Quick Reply deleted successfully.",
+        },
+        searchPlaceholder: "Search...",
+        confirmationModal: {
+          deleteTitle: "Are you sure you want to delete this Quick Reply: ",
+          deleteMessage: "This action cannot be undone.",
+        },
+      },
       users: {
         title: "Users",
         table: {

frontend/src/translate/languages/es.js

@@ -156,6 +156,22 @@ const messages = {
         },
         success: "Contacto guardado satisfactoriamente.",
       },
+      quickAnswersModal: {
+        title: {
+          add: "Agregar respuesta rápida",
+          edit: "Editar respuesta rápida",
+        },
+        form: {
+          shortcut: "Atajo",
+          message: "Respuesta rápida",
+        },
+        buttons: {
+          okAdd: "Agregar",
+          okEdit: "Guardar",
+          cancel: "Cancelar",
+        },
+        success: "Respuesta rápida guardada correctamente.",
+      },
       queueModal: {
         title: {
           add: "Agregar cola",
@@ -254,6 +270,7 @@ const messages = {
           connections: "Conexiones",
           tickets: "Tickets",
           contacts: "Contactos",
+          quickAnswers: "Respuestas rápidas",
           queues: "Linhas",
           administration: "Administración",
           users: "Usuarios",
@@ -289,6 +306,26 @@ const messages = {
       queueSelect: {
         inputLabel: "Linhas",
       },
+      quickAnswers: {
+        title: "Respuestas rápidas",
+        table: {
+          shortcut: "Atajo",
+          message: "Respuesta rápida",
+          actions: "Acciones",
+        },
+        buttons: {
+          add: "Agregar respuesta rápida",
+        },
+        toasts: {
+          deleted: "Respuesta rápida eliminada correctamente",
+        },
+        searchPlaceholder: "Buscar ...",
+        confirmationModal: {
+          deleteTitle:
+            "¿Está seguro de que desea eliminar esta respuesta rápida?",
+          deleteMessage: "Esta acción no se puede deshacer.",
+        },
+      },
       users: {
         title: "Usuarios",
         table: {

frontend/src/translate/languages/pt.js

@@ -154,6 +154,22 @@ const messages = {
         },
         success: "Contato salvo com sucesso.",
       },
+      quickAnswersModal: {
+        title: {
+          add: "Adicionar Resposta Rápida",
+          edit: "Editar Resposta Rápida",
+        },
+        form: {
+          shortcut: "Atalho",
+          message: "Resposta Rápida",
+        },
+        buttons: {
+          okAdd: "Adicionar",
+          okEdit: "Salvar",
+          cancel: "Cancelar",
+        },
+        success: "Resposta Rápida salva com sucesso.",
+      },
       queueModal: {
         title: {
           add: "Adicionar fila",
@@ -252,6 +268,7 @@ const messages = {
           connections: "Conexões",
           tickets: "Tickets",
           contacts: "Contatos",
+          quickAnswers: "Respostas Rápidas",
           queues: "Filas",
           administration: "Administração",
           users: "Usuários",
@@ -287,6 +304,26 @@ const messages = {
       queueSelect: {
         inputLabel: "Filas",
       },
+      quickAnswers: {
+        title: "Respostas Rápidas",
+        table: {
+          shortcut: "Atalho",
+          message: "Resposta Rápida",
+          actions: "Ações",
+        },
+        buttons: {
+          add: "Adicionar Resposta Rápida",
+        },
+        toasts: {
+          deleted: "Resposta Rápida excluída com sucesso.",
+        },
+        searchPlaceholder: "Pesquisar...",
+        confirmationModal: {
+          deleteTitle:
+            "Você tem certeza que quer excluir esta Resposta Rápida: ",
+          deleteMessage: "Esta ação não pode ser revertida.",
+        },
+      },
       users: {
         title: "Usuários",
         table: {