Merge pull request #233 from ertprs/master

add quick answers
2026-04-22 13:40:10 +00:00 · 2021-09-08 13:41:50 -03:00
parent 85fe927385 d582d756f3
commit 456a822a19
34 changed files with 5149 additions and 3903 deletions
--- a/backend/src/controllers/QuickAnswerController.ts
+++ b/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" });
+};
--- a/backend/src/database/index.ts
+++ b/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);
--- a/backend/src/database/migrations/20210818102605-create-quickAnswers.ts
+++ b/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");
+  }
+};
--- a/backend/src/models/QuickAnswer.ts
+++ b/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;
--- a/backend/src/routes/index.ts
+++ b/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;
--- a/backend/src/routes/quickAnswerRoutes.ts
+++ b/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;
--- a/backend/src/services/QuickAnswerService/CreateQuickAnswerService.ts
+++ b/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;
--- a/backend/src/services/QuickAnswerService/DeleteQuickAnswerService.ts
+++ b/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;
--- a/backend/src/services/QuickAnswerService/ListQuickAnswerService.ts
+++ b/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;
--- a/backend/src/services/QuickAnswerService/ShowQuickAnswerService.ts
+++ b/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;
--- a/backend/src/services/QuickAnswerService/UpdateQuickAnswerService.ts
+++ b/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;
--- a/frontend/src/App.js
+++ b/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": {
--- a/frontend/src/components/ColorPicker/index.js
+++ b/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>
  );
--- a/frontend/src/components/MainContainer/index.js
+++ b/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),
-		height: `calc(100% - 48px)`,
+    // padding: theme.spacing(2),
+    // 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>
  );
--- a/frontend/src/components/MessageInput/index.js
+++ b/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(
-		ReplyMessageContext
-	);
+  const [anchorEl, setAnchorEl] = useState(null);
+  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
--- a/frontend/src/components/MessageOptionsMenu/index.js
+++ b/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();
  };
--- a/frontend/src/components/MessagesList/index.js
+++ b/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 => {
-			const messageIndex = state.findIndex(m => m.id === message.id);
+    messages.forEach((message) => {
+      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>
--- a/frontend/src/components/QuickAnswersModal/index.js
+++ b/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;
--- a/frontend/src/components/Ticket/index.js
+++ b/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
--- a/frontend/src/components/TicketHeader/index.js
+++ b/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>
      )}
--- a/frontend/src/components/TicketsManager/index.js
+++ b/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}>
--- a/frontend/src/layout/MainListItems.js
+++ b/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"
--- a/frontend/src/layout/index.js
+++ b/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>
--- a/frontend/src/pages/Contacts/index.js
+++ b/frontend/src/pages/Contacts/index.js
@@ -40,8 +40,8 @@ const reducer = (state, action) => {
    const contacts = action.payload;
    const newContacts = [];

-		contacts.forEach(contact => {
-			const contactIndex = state.findIndex(c => c.id === contact.id);
+    contacts.forEach((contact) => {
+      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);
                          }}
--- a/frontend/src/pages/Login/index.js
+++ b/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);
  };
--- a/frontend/src/pages/Queues/index.js
+++ b/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 => {
-			const queueIndex = state.findIndex(q => q.id === queue.id);
+    queues.forEach((queue) => {
+      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">
--- a/frontend/src/pages/QuickAnswers/index.js
+++ b/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;
--- a/frontend/src/pages/Tickets/index.js
+++ b/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",
-		padding: theme.spacing(4),
+    // // backgroundColor: "#eee",
+    // 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>
--- a/frontend/src/pages/Users/index.js
+++ b/frontend/src/pages/Users/index.js
@@ -35,8 +35,8 @@ const reducer = (state, action) => {
    const users = action.payload;
    const newUsers = [];

-		users.forEach(user => {
-			const userIndex = state.findIndex(u => u.id === user.id);
+    users.forEach((user) => {
+      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);
                      }}
--- a/frontend/src/routes/index.js
+++ b/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>
--- a/frontend/src/translate/languages/en.js
+++ b/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: {
--- a/frontend/src/translate/languages/es.js
+++ b/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: {
--- a/frontend/src/translate/languages/pt.js
+++ b/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: {