admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in release/2024-11-22 (pull request #1969)

Browse Source 
Release/2024 11 22 into test-AIO IO-3000
This commit is contained in:
Dave Richer
2024-11-28 18:02:46 +00:00
parent 9a49d1c69e c3b184d17b
commit 79a9b534f9
9 changed files with 203 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/chat-affix/registerMessagingSocketHandlers.js
View File

@@ -346,8 +346,13 @@ export const registerMessagingHandlers = ({ socket, client }) => {
client.cache.modify({
id: client.cache.identify({ __typename: "conversations", id: conversationId }),
fields: {
job_conversations: (existing = [], { readField }) =>
existing.filter((jobRef) => readField("jobid", jobRef) !== fields.jobId)
job_conversations: (existing = [], { readField }) => {
return existing.filter((jobRef) => {
// Read the `jobid` field safely, even if the structure is normalized
const jobId = readField("jobid", jobRef);
return jobId !== fields.jobId;
});
}
}
});
break;

2
client/src/components/chat-archive-button/chat-archive-button.component.jsx
View File

@@ -40,7 +40,7 @@ export function ChatArchiveButton({ conversation, bodyshop }) {
};
return (
<Button onClick={handleToggleArchive} loading={loading} type="primary">
<Button onClick={handleToggleArchive} loading={loading} className="archive-button" type="primary">
{conversation.archived ? t("messaging.labels.unarchive") : t("messaging.labels.archive")}
</Button>
);

2
client/src/components/chat-conversation-title/chat-conversation-title.component.jsx
View File

@@ -15,7 +15,7 @@ const mapDispatchToProps = () => ({});
export function ChatConversationTitle({ conversation }) {
return (
<Space wrap>
<Space className="chat-title" wrap>
<PhoneNumberFormatter>{conversation && conversation.phone_num}</PhoneNumberFormatter>
<ChatLabelComponent conversation={conversation} />
<ChatPrintButton conversation={conversation} />

86
client/src/components/chat-messages-list/chat-message-list.component.jsx
View File

@@ -1,53 +1,85 @@
import React, { useEffect, useRef } from "react";
import React, { useEffect, useRef, useState } from "react";
import { Virtuoso } from "react-virtuoso";
import { renderMessage } from "./renderMessage";
import "./chat-message-list.styles.scss";
const SCROLL_DELAY_MS = 50;
const INITIAL_SCROLL_DELAY_MS = 100;
export default function ChatMessageListComponent({ messages }) {
const virtuosoRef = useRef(null);
const [atBottom, setAtBottom] = useState(true);
const loadedImagesRef = useRef(0);
// Scroll to the bottom after a short delay when the component mounts
const handleScrollStateChange = (isAtBottom) => {
setAtBottom(isAtBottom);
};
const resetImageLoadState = () => {
loadedImagesRef.current = 0;
};
const preloadImages = (imagePaths, onComplete) => {
resetImageLoadState();
if (imagePaths.length === 0) {
onComplete();
return;
}
imagePaths.forEach((url) => {
const img = new Image();
img.src = url;
img.onload = img.onerror = () => {
loadedImagesRef.current += 1;
if (loadedImagesRef.current === imagePaths.length) {
onComplete();
}
};
});
};
// Ensure all images are loaded on initial render
useEffect(() => {
const timer = setTimeout(() => {
if (virtuosoRef?.current?.scrollToIndex && messages?.length) {
const imagePaths = messages
.filter((message) => message.image && message.image_path?.length > 0)
.flatMap((message) => message.image_path);
preloadImages(imagePaths, () => {
if (virtuosoRef.current) {
virtuosoRef.current.scrollToIndex({
index: messages.length - 1,
behavior: "auto" // Instantly scroll to the bottom
align: "end",
behavior: "auto"
});
}
}, INITIAL_SCROLL_DELAY_MS);
});
}, [messages]);
// Cleanup the timeout on unmount
return () => clearTimeout(timer);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // ESLint is disabled for this line because we only want this to load once (valid exception)
// Scroll to the bottom after the new messages are rendered
// Handle scrolling when new messages are added
useEffect(() => {
if (virtuosoRef?.current?.scrollToIndex && messages?.length) {
const timeout = setTimeout(() => {
if (!atBottom) return;
const latestMessage = messages[messages.length - 1];
const imagePaths = latestMessage?.image_path || [];
preloadImages(imagePaths, () => {
if (virtuosoRef.current) {
virtuosoRef.current.scrollToIndex({
index: messages.length - 1,
align: "end", // Ensure the last message is fully visible
behavior: "smooth" // Smooth scrolling
align: "end",
behavior: "smooth"
});
}, SCROLL_DELAY_MS); // Slight delay to ensure layout recalculates
// Cleanup timeout on dependency changes
return () => clearTimeout(timeout);
}
}, [messages]); // Triggered when new messages are added
}
});
}, [messages, atBottom]);
return (
<div className="chat">
<Virtuoso
ref={virtuosoRef}
data={messages}
itemContent={(index) => renderMessage(messages, index)} // Pass `messages` to renderMessage
followOutput="smooth" // Ensure smooth scrolling when new data is appended
overscan={!!messages.reduce((acc, message) => acc + (message.image_path?.length || 0), 0) ? messages.length : 0}
itemContent={(index) => renderMessage(messages, index)}
followOutput={(isAtBottom) => handleScrollStateChange(isAtBottom)}
initialTopMostItemIndex={messages.length - 1}
style={{ height: "100%", width: "100%" }}
/>
</div>

175
client/src/components/chat-messages-list/chat-message-list.styles.scss
View File

@@ -1,110 +1,131 @@
.message-icon {
color: whitesmoke;
border: #000000;
position: absolute;
margin: 0 0.1rem;
bottom: 0.1rem;
right: 0.3rem;
z-index: 5;
}
.chat {
flex: 1;
display: flex;
flex-direction: column;
margin: 0.8rem 0rem;
overflow: hidden; // Ensure the content scrolls correctly
height: 100%;
width: 100%;
}
.archive-button {
height: 20px;
border-radius: 4px;
}
.chat-title {
margin-bottom: 5px;
}
.messages {
display: flex;
flex-direction: column;
padding: 0.5rem; // Add padding to avoid edge clipping
padding: 0.5rem; // Prevent edge clipping
}
.message {
position: relative;
border-radius: 20px;
padding: 0.25rem 0.8rem;
word-wrap: break-word;
.message-img {
&-img {
max-width: 10rem;
max-height: 10rem;
object-fit: contain;
margin: 0.2rem;
border-radius: 4px;
}
&-images {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
}
.yours {
align-items: flex-start;
.chat-send-message-button{
margin: 0.3rem;
padding-left: 0.5rem;
}
.message-icon {
position: absolute;
bottom: 0.1rem;
right: 0.3rem;
margin: 0 0.1rem;
color: whitesmoke;
z-index: 5;
}
.msgmargin {
margin-top: 0.1rem;
margin-bottom: 0.1rem;
margin: 0.1rem 0;
}
.yours .message {
margin-right: 20%;
background-color: #eee;
position: relative;
.yours,
.mine {
display: flex;
flex-direction: column;
.message {
position: relative;
&:last-child:before,
&:last-child:after {
content: "";
position: absolute;
bottom: 0;
height: 20px;
width: 20px;
z-index: 0;
}
&:last-child:after {
width: 10px;
background: white;
z-index: 1;
}
}
}
.yours .message:last-child:before {
content: "";
position: absolute;
z-index: 0;
bottom: 0;
left: -7px;
height: 20px;
width: 20px;
background: #eee;
border-bottom-right-radius: 15px;
}
.yours .message:last-child:after {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
left: -10px;
width: 10px;
height: 20px;
background: white;
border-bottom-right-radius: 10px;
/* "Yours" (incoming) message styles */
.yours {
align-items: flex-start;
.message {
margin-right: 20%;
background-color: #eee;
&:last-child:before {
left: -7px;
background: #eee;
border-bottom-right-radius: 15px;
}
&:last-child:after {
left: -10px;
border-bottom-right-radius: 10px;
}
}
}
/* "Mine" (outgoing) message styles */
.mine {
align-items: flex-end;
.message {
color: white;
margin-left: 25%;
background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
padding-bottom: 0.6rem;
&:last-child:before {
right: -8px;
background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
border-bottom-left-radius: 15px;
}
&:last-child:after {
right: -10px;
border-bottom-left-radius: 10px;
}
}
}
.mine .message {
color: white;
margin-left: 25%;
background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
position: relative;
padding-bottom: 0.6rem;
}
.mine .message:last-child:before {
content: "";
position: absolute;
z-index: 0;
bottom: 0;
right: -8px;
height: 20px;
width: 20px;
background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
border-bottom-left-radius: 15px;
}
.mine .message:last-child:after {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
right: -10px;
width: 10px;
height: 20px;
background: white;
border-bottom-left-radius: 10px;
.virtuoso-container {
flex: 1;
overflow: auto;
}

28
client/src/components/chat-messages-list/renderMessage.jsx
View File

@@ -7,28 +7,38 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
export const renderMessage = (messages, index) => {
const message = messages[index];
return (
<div key={index} className={`${message.isoutbound ? "mine messages" : "yours messages"}`}>
<div className="message msgmargin">
<Tooltip title={DateTimeFormatter({ children: message.created_at })}>
<div>
{message.image_path &&
message.image_path.map((i, idx) => (
<div key={idx} style={{ display: "flex", justifyContent: "center" }}>
<a href={i} target="__blank" rel="noopener noreferrer">
<img alt="Received" className="message-img" src={i} />
</a>
</div>
))}
<div>{message.text}</div>
{/* Render images if available */}
{message.image && message.image_path?.length > 0 && (
<div className="message-images">
{message.image_path.map((url, idx) => (
<div key={idx} style={{ display: "flex", justifyContent: "center" }}>
<a href={url} target="_blank" rel="noopener noreferrer">
<img alt="Received" className="message-img" src={url} />
</a>
</div>
))}
</div>
)}
{/* Render text if available */}
{message.text && <div>{message.text}</div>}
</div>
</Tooltip>
{/* Message status icons */}
{message.status && (message.status === "sent" || message.status === "delivered") && (
<div className="message-status">
<Icon component={message.status === "sent" ? MdDone : MdDoneAll} className="message-icon" />
</div>
)}
</div>
{/* Outbound message metadata */}
{message.isoutbound && (
<div style={{ fontSize: 10 }}>
{i18n.t("messaging.labels.sentby", {

2
client/src/components/chat-send-message/chat-send-message.component.jsx
View File

@@ -81,7 +81,7 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
/>
</span>
<SendOutlined
className="imex-flex-row__margin"
className="chat-send-message-button"
// disabled={message === "" || !message}
onClick={handleEnter}
/>

3
client/src/components/chat-tag-ro/chat-tag-ro.container.jsx
View File

@@ -86,9 +86,10 @@ export function ChatTagRoContainer({ conversation, bodyshop }) {
handleSearch={handleSearch}
handleInsertTag={handleInsertTag}
setOpen={setOpen}
style={{ cursor: "pointer" }}
/>
) : (
<Tag onClick={() => setOpen(true)}>
<Tag style={{ cursor: "pointer" }} onClick={() => setOpen(true)}>
<PlusOutlined />
{t("messaging.actions.link")}
</Tag>

43
client/src/utils/GraphQLClient.js
View File

@@ -145,47 +145,34 @@ middlewares.push(
const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
conversations: offsetLimitPagination()
}
},
conversations: {
fields: {
job_conversations: {
keyArgs: false, // Indicates that all job_conversations share the same key
merge(existing = [], incoming) {
// Merge existing and incoming job_conversations
const merged = [
...existing,
...incoming.filter(
(incomingItem) => !existing.some((existingItem) => existingItem.__ref === incomingItem.__ref)
)
];
return merged;
}
},
messages: {
keyArgs: false, // Ignore arguments when determining uniqueness (like `order_by`).
merge(existing = [], incoming = [], { readField }) {
const existingIds = new Set(existing.map((message) => readField("id", message)));
const merged = new Map();
// Merge incoming messages, avoiding duplicates
const merged = [...existing];
incoming.forEach((message) => {
if (!existingIds.has(readField("id", message))) {
merged.push(message);
}
// Add existing data to the map
existing.forEach((jobConversation) => {
// Use `readField` to get the unique `jobid`, fallback to `__ref`
const jobId = readField("jobid", jobConversation) || jobConversation.__ref;
if (jobId) merged.set(jobId, jobConversation);
});
return merged;
// Add or replace with incoming data
incoming.forEach((jobConversation) => {
// Use `readField` to get the unique `jobid`, fallback to `__ref`
const jobId = readField("jobid", jobConversation) || jobConversation.__ref;
if (jobId) merged.set(jobId, jobConversation);
});
// Return the merged data as an array
return Array.from(merged.values());
}
}
}
}
}
});
const client = new ApolloClient({
link: ApolloLink.from(middlewares),
cache,