79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import { FC, useEffect } from "react";
|
|
import { Grid, Box, Typography } from "@mui/material";
|
|
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
|
|
import {
|
|
MainContainer,
|
|
ChatContainer,
|
|
MessageList,
|
|
Message,
|
|
MessageInput,
|
|
Conversation,
|
|
ConversationHeader,
|
|
} from "@chatscope/chat-ui-kit-react";
|
|
|
|
interface TicketDetailProps {
|
|
ticket: any;
|
|
articles: any[];
|
|
}
|
|
|
|
export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
|
|
console.log({ here: "here", ticket });
|
|
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.created_at
|
|
).toLocaleDateString()})`}</Typography>
|
|
</Box>
|
|
</ConversationHeader.Content>
|
|
</ConversationHeader>
|
|
<MessageList>
|
|
{articles.map((article: any) => (
|
|
<Message
|
|
className={
|
|
article.internal
|
|
? "internal-note"
|
|
: article.sender === "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: "last",
|
|
type: "html",
|
|
}}
|
|
/>
|
|
))}
|
|
</MessageList>
|
|
{/* <MessageInput
|
|
placeholder="Type message here"
|
|
sendOnReturnDisabled
|
|
attachButton={false}
|
|
sendButton={false}
|
|
/> */}
|
|
</ChatContainer>
|
|
</MainContainer>
|
|
);
|
|
};
|