Merge pull request #704 from Hexastack/fix/location-fails-display-inbox

fix: location does not display in inbox conversation

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,

frontend/src/components/inbox/components/GeolocationMessage.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { useRef } from "react";
+
+import { StdIncomingLocationMessage } from "@/types/message.types";
+
+export interface GeolocationMessageProps {
+  message: StdIncomingLocationMessage;
+}
+
+const GeolocationMessage: React.FC<GeolocationMessageProps> = ({ message }) => {
+  const iframeRef = useRef<HTMLDivElement>(null);
+
+  if (!("coordinates" in message)) {
+    throw new Error("Unable to find coordinates");
+  }
+
+  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}`;
+
+  return (
+    <div
+      style={{
+        borderRadius: "0.5rem",
+        width: "200px",
+      }}
+      ref={iframeRef}
+    >
+      <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;

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" }}>

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";