From aee19e8b6c8aac1c4ef62f4d1a7764b7b4f11d3e Mon Sep 17 00:00:00 2001
From: abdou6666 <sfayhi.abderrahmen@esprit.tn>
Date: Thu, 6 Feb 2025 11:31:39 +0100
Subject: [PATCH 1/4] fix: location does not display in inbox conversation

---
 .../src/components/inbox/components/Chat.tsx  |  26 ++++-
 .../inbox/components/GeolocationMessage.tsx   | 106 ++++++++++++++++++
 2 files changed, 130 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/inbox/components/GeolocationMessage.tsx

diff --git a/frontend/src/components/inbox/components/Chat.tsx b/frontend/src/components/inbox/components/Chat.tsx
index bcb47a51..3d678824 100644
--- a/frontend/src/components/inbox/components/Chat.tsx
+++ b/frontend/src/components/inbox/components/Chat.tsx
@@ -6,7 +6,6 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-
 import {
   Avatar,
   ChatContainer,
@@ -34,6 +33,9 @@ import { useInfinitedLiveMessages } from "../hooks/useInfiniteLiveMessages";
 
 import { ChatActions } from "./ChatActions";
 import { ChatHeader } from "./ChatHeader";
+import GeolocationMessage, {
+  GeolocationMessageProps,
+} from "./GeolocationMessage";
 
 export function Chat() {
   const { apiUrl } = useConfig();
@@ -92,13 +94,33 @@ export function Chat() {
           autoScrollToBottom={true}
           autoScrollToBottomOnMount={true}
         >
-          {messages.map((message, i) => {
+          {messages.map((message: any, i) => {
             const position = getMessagePosition(
               message,
               messages[i - 1],
               messages[i + 1],
             );
 
+            if (message?.message?.type === "location") {
+              const msg = {
+                type: message.message.type,
+                data: {
+                  coordinates: {
+                    lat: message.message.coordinates.lat,
+                    lng: message.message.coordinates.lon,
+                  },
+                },
+                author: message.sender,
+                read: message.read,
+                mid: message.mid,
+                createdAt: message.createdAt,
+                direction: "sent",
+                delivery: false,
+              } as GeolocationMessageProps["message"];
+
+              return <GeolocationMessage message={msg} key={message.id} />;
+            }
+
             return (
               <Message
                 key={message.id}
diff --git a/frontend/src/components/inbox/components/GeolocationMessage.tsx b/frontend/src/components/inbox/components/GeolocationMessage.tsx
new file mode 100644
index 00000000..10edbdbc
--- /dev/null
+++ b/frontend/src/components/inbox/components/GeolocationMessage.tsx
@@ -0,0 +1,106 @@
+/*
+ * Copyright © 2025 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { Direction } from "hexabot-chat-widget/src/types/message.types";
+import { useEffect, useRef, useState } from "react";
+
+export interface GeolocationMessageProps {
+  message: {
+    type: string;
+    data: {
+      coordinates: {
+        lat: number;
+        lng: number;
+      };
+    };
+    author: string;
+    read: boolean;
+    mid: string;
+    createdAt: string | Date;
+    direction: Direction;
+    delivery: boolean;
+  };
+}
+
+const GeolocationMessage: React.FC<GeolocationMessageProps> = ({ message }) => {
+  // const { colors: allColors } = useColors();
+  // const widget = useWidget();
+  const allColors = {
+    header: { bg: "#1BA089", text: "#fff" },
+    launcher: { bg: "#1BA089" },
+    messageList: { bg: "#fff" },
+    sent: { bg: "#1BA089", text: "#fff" },
+    received: { bg: "#f6f8f9", text: "#000" },
+    userInput: { bg: "#fff", text: "#000" },
+    button: { bg: "#ffffff", text: "#1BA089", border: "#1BA089" },
+    messageStatus: { bg: "#1BA089" },
+    messageTime: { text: "#9C9C9C" },
+  };
+  const [isSeen, setIsSeen] = useState(false);
+  const iframeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      if (!isSeen && entries[0].intersectionRatio > 0) {
+        setIsSeen(true);
+      }
+    });
+
+    if (iframeRef.current) {
+      observer.observe(iframeRef.current);
+    }
+
+    return () => {
+      if (iframeRef.current) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        observer.unobserve(iframeRef.current);
+      }
+    };
+  }, [isSeen]);
+
+  if (!("coordinates" in message.data)) {
+    throw new Error("Unable to find coordinates");
+  }
+  const coordinates = message.data?.coordinates || { lat: 0.0, lng: 0.0 };
+  const openStreetMapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${
+    coordinates.lng - 0.1
+  },${coordinates.lat - 0.1},${coordinates.lng + 0.1},${
+    coordinates.lat + 0.1
+  }&layer=mapnik&marker=${coordinates.lat},${coordinates.lng}`;
+  const colors = allColors[message.direction || Direction.received];
+
+  return (
+    <div
+      style={{
+        borderRadius: "0.5rem",
+        backgroundColor: colors.bg,
+        color: colors.text,
+        width: "200px",
+      }}
+      ref={iframeRef}
+    >
+      {isSeen && (
+        <iframe
+          style={{
+            width: "200px",
+            height: "150px",
+            borderRadius: "0.5rem",
+          }}
+          loading="lazy"
+          frameBorder="0"
+          scrolling="no"
+          marginHeight={0}
+          marginWidth={0}
+          src={openStreetMapUrl}
+        />
+      )}
+    </div>
+  );
+};
+
+export default GeolocationMessage;

From bc9e35977e5defe16397f3fb4e43090f708ceaf4 Mon Sep 17 00:00:00 2001
From: abdou6666 <sfayhi.abderrahmen@esprit.tn>
Date: Thu, 6 Feb 2025 17:47:15 +0100
Subject: [PATCH 2/4] fix: refactor and fix typing

---
 .../src/components/inbox/components/Chat.tsx  | 25 +----
 .../inbox/components/GeolocationMessage.tsx   | 91 +++++--------------
 .../components/inbox/helpers/mapMessages.tsx  | 11 ++-
 frontend/src/types/message.types.ts           |  1 -
 4 files changed, 35 insertions(+), 93 deletions(-)

diff --git a/frontend/src/components/inbox/components/Chat.tsx b/frontend/src/components/inbox/components/Chat.tsx
index 3d678824..edcf7611 100644
--- a/frontend/src/components/inbox/components/Chat.tsx
+++ b/frontend/src/components/inbox/components/Chat.tsx
@@ -33,9 +33,6 @@ import { useInfinitedLiveMessages } from "../hooks/useInfiniteLiveMessages";
 
 import { ChatActions } from "./ChatActions";
 import { ChatHeader } from "./ChatHeader";
-import GeolocationMessage, {
-  GeolocationMessageProps,
-} from "./GeolocationMessage";
 
 export function Chat() {
   const { apiUrl } = useConfig();
@@ -94,33 +91,13 @@ export function Chat() {
           autoScrollToBottom={true}
           autoScrollToBottomOnMount={true}
         >
-          {messages.map((message: any, i) => {
+          {messages.map((message, i) => {
             const position = getMessagePosition(
               message,
               messages[i - 1],
               messages[i + 1],
             );
 
-            if (message?.message?.type === "location") {
-              const msg = {
-                type: message.message.type,
-                data: {
-                  coordinates: {
-                    lat: message.message.coordinates.lat,
-                    lng: message.message.coordinates.lon,
-                  },
-                },
-                author: message.sender,
-                read: message.read,
-                mid: message.mid,
-                createdAt: message.createdAt,
-                direction: "sent",
-                delivery: false,
-              } as GeolocationMessageProps["message"];
-
-              return <GeolocationMessage message={msg} key={message.id} />;
-            }
-
             return (
               <Message
                 key={message.id}
diff --git a/frontend/src/components/inbox/components/GeolocationMessage.tsx b/frontend/src/components/inbox/components/GeolocationMessage.tsx
index 10edbdbc..ada7c108 100644
--- a/frontend/src/components/inbox/components/GeolocationMessage.tsx
+++ b/frontend/src/components/inbox/components/GeolocationMessage.tsx
@@ -6,99 +6,56 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import { Direction } from "hexabot-chat-widget/src/types/message.types";
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 
 export interface GeolocationMessageProps {
   message: {
-    type: string;
-    data: {
-      coordinates: {
-        lat: number;
-        lng: number;
-      };
+    type: "location";
+    coordinates: {
+      lat: number;
+      lon: number;
     };
-    author: string;
-    read: boolean;
-    mid: string;
-    createdAt: string | Date;
-    direction: Direction;
-    delivery: boolean;
   };
 }
 
 const GeolocationMessage: React.FC<GeolocationMessageProps> = ({ message }) => {
-  // const { colors: allColors } = useColors();
-  // const widget = useWidget();
-  const allColors = {
-    header: { bg: "#1BA089", text: "#fff" },
-    launcher: { bg: "#1BA089" },
-    messageList: { bg: "#fff" },
-    sent: { bg: "#1BA089", text: "#fff" },
-    received: { bg: "#f6f8f9", text: "#000" },
-    userInput: { bg: "#fff", text: "#000" },
-    button: { bg: "#ffffff", text: "#1BA089", border: "#1BA089" },
-    messageStatus: { bg: "#1BA089" },
-    messageTime: { text: "#9C9C9C" },
-  };
-  const [isSeen, setIsSeen] = useState(false);
   const iframeRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    const observer = new IntersectionObserver((entries) => {
-      if (!isSeen && entries[0].intersectionRatio > 0) {
-        setIsSeen(true);
-      }
-    });
-
-    if (iframeRef.current) {
-      observer.observe(iframeRef.current);
-    }
-
-    return () => {
-      if (iframeRef.current) {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        observer.unobserve(iframeRef.current);
-      }
-    };
-  }, [isSeen]);
-
-  if (!("coordinates" in message.data)) {
+  if (!("coordinates" in message)) {
     throw new Error("Unable to find coordinates");
   }
-  const coordinates = message.data?.coordinates || { lat: 0.0, lng: 0.0 };
+
+  const coordinates = {
+    lat: message?.coordinates?.lat || 0.0,
+    lng: message?.coordinates?.lon || 0.0,
+  };
   const openStreetMapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${
     coordinates.lng - 0.1
   },${coordinates.lat - 0.1},${coordinates.lng + 0.1},${
     coordinates.lat + 0.1
   }&layer=mapnik&marker=${coordinates.lat},${coordinates.lng}`;
-  const colors = allColors[message.direction || Direction.received];
 
   return (
     <div
       style={{
         borderRadius: "0.5rem",
-        backgroundColor: colors.bg,
-        color: colors.text,
         width: "200px",
       }}
       ref={iframeRef}
     >
-      {isSeen && (
-        <iframe
-          style={{
-            width: "200px",
-            height: "150px",
-            borderRadius: "0.5rem",
-          }}
-          loading="lazy"
-          frameBorder="0"
-          scrolling="no"
-          marginHeight={0}
-          marginWidth={0}
-          src={openStreetMapUrl}
-        />
-      )}
+      <iframe
+        style={{
+          width: "200px",
+          height: "150px",
+          borderRadius: "0.5rem",
+        }}
+        loading="lazy"
+        frameBorder="0"
+        scrolling="no"
+        marginHeight={0}
+        marginWidth={0}
+        src={openStreetMapUrl}
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/inbox/helpers/mapMessages.tsx b/frontend/src/components/inbox/helpers/mapMessages.tsx
index fd027e68..165d52ab 100644
--- a/frontend/src/components/inbox/helpers/mapMessages.tsx
+++ b/frontend/src/components/inbox/helpers/mapMessages.tsx
@@ -6,7 +6,6 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-
 import { Message, MessageModel } from "@chatscope/chat-ui-kit-react";
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
 import ReplyIcon from "@mui/icons-material/Reply";
@@ -20,6 +19,7 @@ import { buildURL } from "@/utils/URL";
 
 import { MessageAttachmentsViewer } from "../components/AttachmentViewer";
 import { Carousel } from "../components/Carousel";
+import GeolocationMessage from "../components/GeolocationMessage";
 
 function hasSameSender(
   m1: IMessage | IMessageFull,
@@ -69,6 +69,14 @@ export function getMessageContent(
   const message = messageEntity.message;
   let content: ReactNode[] = [];
 
+  if ("coordinates" in message) {
+    content.push(
+      <Message.CustomContent>
+        <GeolocationMessage message={message} key={message.type} />
+      </Message.CustomContent>,
+    );
+  }
+
   if ("text" in message) {
     content.push(
       <Message.TextContent key={messageEntity.id} text={message.text} />,
@@ -85,6 +93,7 @@ export function getMessageContent(
     chips = message.quickReplies as { title: string }[];
     chipsIcon = <ReplyIcon color="disabled" />;
   }
+
   if (chips.length > 0)
     content.push(
       <Message.Footer style={{ marginTop: "5px" }}>
diff --git a/frontend/src/types/message.types.ts b/frontend/src/types/message.types.ts
index f485db36..be3cac88 100644
--- a/frontend/src/types/message.types.ts
+++ b/frontend/src/types/message.types.ts
@@ -6,7 +6,6 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-
 import { EntityType } from "@/services/types";
 
 import { IAttachment } from "./attachment.types";

From 2fde4e3439f5a2fe07883b78164396849f36de19 Mon Sep 17 00:00:00 2001
From: abdou6666 <sfayhi.abderrahmen@esprit.tn>
Date: Fri, 7 Feb 2025 10:12:29 +0100
Subject: [PATCH 3/4] fix: apply feedback

---
 .../inbox/components/GeolocationMessage.tsx   | 21 ++++++-------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/inbox/components/GeolocationMessage.tsx b/frontend/src/components/inbox/components/GeolocationMessage.tsx
index ada7c108..e233f913 100644
--- a/frontend/src/components/inbox/components/GeolocationMessage.tsx
+++ b/frontend/src/components/inbox/components/GeolocationMessage.tsx
@@ -8,14 +8,10 @@
 
 import { useRef } from "react";
 
+import { StdIncomingLocationMessage } from "@/types/message.types";
+
 export interface GeolocationMessageProps {
-  message: {
-    type: "location";
-    coordinates: {
-      lat: number;
-      lon: number;
-    };
-  };
+  message: StdIncomingLocationMessage;
 }
 
 const GeolocationMessage: React.FC<GeolocationMessageProps> = ({ message }) => {
@@ -25,15 +21,10 @@ const GeolocationMessage: React.FC<GeolocationMessageProps> = ({ message }) => {
     throw new Error("Unable to find coordinates");
   }
 
-  const coordinates = {
-    lat: message?.coordinates?.lat || 0.0,
-    lng: message?.coordinates?.lon || 0.0,
-  };
+  const { lat, lon } = message?.coordinates || { lat: 0.0, lng: 0.0 };
   const openStreetMapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${
-    coordinates.lng - 0.1
-  },${coordinates.lat - 0.1},${coordinates.lng + 0.1},${
-    coordinates.lat + 0.1
-  }&layer=mapnik&marker=${coordinates.lat},${coordinates.lng}`;
+    lon - 0.1
+  },${lat - 0.1},${lon + 0.1},${lat + 0.1}&layer=mapnik&marker=${lat},${lon}`;
 
   return (
     <div

From 1e75866dcad7ca04dbef646ea27ce8a399123d1a Mon Sep 17 00:00:00 2001
From: abdou6666 <sfayhi.abderrahmen@esprit.tn>
Date: Fri, 7 Feb 2025 16:13:54 +0100
Subject: [PATCH 4/4] fix: remove optional chaining operator

---
 frontend/src/components/inbox/components/GeolocationMessage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/inbox/components/GeolocationMessage.tsx b/frontend/src/components/inbox/components/GeolocationMessage.tsx
index e233f913..b9c11a6c 100644
--- a/frontend/src/components/inbox/components/GeolocationMessage.tsx
+++ b/frontend/src/components/inbox/components/GeolocationMessage.tsx
@@ -21,7 +21,7 @@ const GeolocationMessage: React.FC<GeolocationMessageProps> = ({ message }) => {
     throw new Error("Unable to find coordinates");
   }
 
-  const { lat, lon } = message?.coordinates || { lat: 0.0, lng: 0.0 };
+  const { lat, lon } = message.coordinates || { lat: 0.0, lng: 0.0 };
   const openStreetMapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${
     lon - 0.1
   },${lat - 0.1},${lon + 0.1},${lat + 0.1}&layer=mapnik&marker=${lat},${lon}`;