@getwidgets/live-chat-widget 1.0.5 → 1.0.7

package/dist/live-chat-widget.umd.js

@@ -20210,11 +20210,37 @@
       const luminance = (0.299 * r2 + 0.587 * g + 0.114 * b) / 255;
       return luminance > 0.5 ? "#000000" : "#FFFFFF";
     };
+    const getMessageTime = (message) => {
+      if (!message) return "";
+      const raw = message.timestamp ?? message.created_at;
+      if (!raw) return "";
+      if (typeof raw === "string") {
+        const looksLikeTimeOnly = /:\d{2}/.test(raw) && !/\d{4}-\d{2}-\d{2}|T|Z/i.test(raw);
+        if (looksLikeTimeOnly) return raw;
+        const parsed2 = new Date(raw);
+        if (!Number.isNaN(parsed2.getTime())) {
+          return parsed2.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+        }
+        return "";
+      }
+      const parsed = new Date(raw);
+      if (Number.isNaN(parsed.getTime())) return "";
+      return parsed.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    };
+    const timeTextColor = getContrastColor(appearanceConfig.background_color || "#F9FAFB");
     const isMobile = windowWidth < 768;
     return /* @__PURE__ */ React.createElement("div", { style: getPositionStyles() }, !isOpen && showNotificationPreview && /* @__PURE__ */ React.createElement(
-      "button",
+      "div",
       {
+        role: "button",
+        tabIndex: 0,
         onClick: toggleWidget,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggleWidget();
+          }
+        },
         className: "rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 flex flex-col gap-2 p-4 max-w-xs responsive-notification relative",
         style: {
           backgroundColor: headerConfig.background_color || "#111827",
@@ -20420,23 +20446,25 @@
             }
           },
           inputAreaConfig.first_ai_message || "Hello! How can I assist you today?"
-        )) : combinedMessages.map((message) => /* @__PURE__ */ React.createElement("div", { key: message.id, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}` }, /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: `p-3 inline-block rounded-lg`,
-            style: {
-              backgroundColor: message.role === "user" ? chatAreaConfig.user_response_color || "#4ADE80" : message.isError ? "#FEE2E2" : chatAreaConfig.ai_response_color || "#E2E8F0",
-              borderRadius: chatAreaConfig.chat_bubble_radius || "16px",
-              fontSize: isMobile ? "13px" : "14px",
-              color: message.role === "user" ? chatAreaConfig.user_font_color || "#111827" : message.isError ? "#991B1B" : chatAreaConfig.ai_font_color || "#111827",
-              marginBottom: isMobile ? "4px" : "2px",
-              maxWidth: isMobile ? "85%" : "80%",
-              wordBreak: "break-word"
-            }
-          },
-          message.role !== "system" ? /* @__PURE__ */ React.createElement(Markdown, { remarkPlugins: [remarkGfm] }, message.content) : /* @__PURE__ */ React.createElement("em", { className: "text-xs opacity-70" }, message.content),
-          chatAreaConfig.show_timestamps && message.timestamp && /* @__PURE__ */ React.createElement("div", { className: "text-xs opacity-70 mt-1 text-right" }, message.timestamp)
-        ))), localLoading && /* @__PURE__ */ React.createElement("div", { className: "flex justify-start" }, /* @__PURE__ */ React.createElement(
+        )) : combinedMessages.map((message) => {
+          const timeText = getMessageTime(message);
+          return /* @__PURE__ */ React.createElement("div", { key: message.id, className: `flex flex-col ${message.role === "user" ? "items-end" : "items-start"}` }, /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: `p-3 inline-block rounded-lg`,
+              style: {
+                backgroundColor: message.role === "user" ? chatAreaConfig.user_response_color || "#4ADE80" : message.isError ? "#FEE2E2" : chatAreaConfig.ai_response_color || "#E2E8F0",
+                borderRadius: chatAreaConfig.chat_bubble_radius || "16px",
+                fontSize: isMobile ? "13px" : "14px",
+                color: message.role === "user" ? chatAreaConfig.user_font_color || "#111827" : message.isError ? "#991B1B" : chatAreaConfig.ai_font_color || "#111827",
+                marginBottom: isMobile ? "4px" : "2px",
+                maxWidth: isMobile ? "85%" : "80%",
+                wordBreak: "break-word"
+              }
+            },
+            message.role !== "system" ? /* @__PURE__ */ React.createElement(Markdown, { remarkPlugins: [remarkGfm] }, message.content) : /* @__PURE__ */ React.createElement("em", { className: "text-xs opacity-70" }, message.content)
+          ), message.role !== "system" && timeText && /* @__PURE__ */ React.createElement("div", { className: "text-xs opacity-70", style: { color: timeTextColor, marginBottom: isMobile ? "6px" : "4px" } }, timeText));
+        }), localLoading && /* @__PURE__ */ React.createElement("div", { className: "flex justify-start" }, /* @__PURE__ */ React.createElement(
           "div",
           {
             className: "text-left p-3 inline-block max-w-[85%]",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getwidgets/live-chat-widget",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "main": "dist/live-chat-widget.umd.js",
   "unpkg": "dist/live-chat-widget.umd.js",
   "type": "module",