link-stack/apps/link/components/TicketDetail.tsx

import { FC, useState } from "react";
import { Grid, Box, Typography, Button, Dialog, DialogActions, DialogContent } from "@mui/material";
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  ConversationHeader,
} from "@chatscope/chat-ui-kit-react";
import { ArticleCreateDialog } from "./ArticleCreateDialog";

interface TicketDetailProps {
  ticket: any;
}

export const TicketDetail: FC<TicketDetailProps> = ({ ticket }) => {
  console.log({ ticket })
  const [dialogOpen, setDialogOpen] = useState(false);
  const [articleKind, setArticleKind] = useState<"reply" | "note">("reply");
  const closeDialog = () => setDialogOpen(false);

  return (
    <>
      <MainContainer>
        <ChatContainer>
          <ConversationHeader>
            <ConversationHeader.Content>
              <Box
                sx={{
                  width: "100%",
                  textAlign: "center",
                  fontWeight: "bold",
                }}
              >
                <Typography
                  variant="h5"
                  sx={{ fontFamily: "Poppins", fontWeight: 700 }}
                >
                  {ticket.title}
                </Typography>
                <Typography
                  variant="h6"
                  sx={{ fontFamily: "Roboto", fontWeight: 400 }}
                >{`Ticket #${ticket.number} (created ${new Date(
                  ticket.createdAt
                ).toLocaleDateString()})`}</Typography>
              </Box>
            </ConversationHeader.Content>
          </ConversationHeader>
          <MessageList style={{ marginBottom: 80 }}>
            {ticket.articles.edges.map(({ node: article }: any) => (
              <Message
                key={article.id}
                className={
                  article.internal
                    ? "internal-note"
                    : article.sender.name === "Agent"
                      ? "outgoing-message"
                      : "incoming-message"
                }
                model={{
                  message: article.body.replace(/<div>*<br>*<div>/g, ""),
                  sentTime: article.updated_at,
                  sender: article.from,
                  direction:
                    article.sender === "Agent" ? "outgoing" : "incoming",
                  position: "single",
                }}
              />
            ))}
          </MessageList>
          {/* <MessageInput
          placeholder="Type message here"
          sendOnReturnDisabled
          attachButton={false}
          sendButton={false}
            /> */}
        </ChatContainer>
        <Box
          sx={{
            height: 80,
            background: "#eeeeee",
            borderTop: "1px solid #ddd",
            position: "absolute",
            bottom: 0,
            width: "100%",
            zIndex: 1000,
          }}
        >
          <Grid
            container
            spacing={4}
            justifyContent="center"
            alignItems="center"
            alignContent="center"
          >
            <Grid item>
              <Button
                variant="contained"
                disableElevation
                sx={{
                  fontFamily: "Poppins, sans-serif",
                  fontWeight: 700,
                  borderRadius: 2,
                  textTransform: "none",
                  backgroundColor: "#1982FC",
                  padding: "6px 30px",
                  margin: "20px 0px",
                  whiteSpace: "nowrap",
                  py: "10px",
                  mt: 2
                }}
                onClick={() => {
                  setArticleKind("reply");
                  setDialogOpen(true);
                }}
              >
                Reply to ticket
              </Button>
            </Grid>
            <Grid item>
              <Button
                variant="contained"
                disableElevation
                sx={{
                  fontFamily: "Poppins, sans-serif",
                  fontWeight: 700,
                  borderRadius: 2,
                  textTransform: "none",
                  color: "black",
                  backgroundColor: "#FFB620",
                  padding: "6px 30px",
                  margin: "20px 0px",
                  whiteSpace: "nowrap",
                  py: "10px",
                  mt: 2
                }}
                onClick={() => {
                  setArticleKind("note");
                  setDialogOpen(true);
                }}
              >
                Write note to agent
              </Button>
            </Grid>
          </Grid>
        </Box>
      </MainContainer>
      <ArticleCreateDialog ticketID={ticket.internalId} open={dialogOpen} closeDialog={closeDialog} kind={articleKind} />
    </>
  );
};