From eeb9df4ccf0c183ec324b7eb0d68194a9f3fa4d3 Mon Sep 17 00:00:00 2001
From: "Samuele E. Locatelli" <samuele.locatelli@egalware.com>
Date: Fri, 22 Aug 2025 17:28:28 +0000
Subject: [PATCH] Add datetime for chat

---
 frontend/src/AssistantMessage.jsx      | 99 +++++++++++++++++++++++++-
 frontend/src/AssistantMessage.jsx.orig | 32 +++++++++
 frontend/src/ChatWindow.jsx            | 15 +++-
 frontend/src/UserMessage.jsx           | 36 ++++++++--
 4 files changed, 173 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/AssistantMessage.jsx.orig

diff --git a/frontend/src/AssistantMessage.jsx b/frontend/src/AssistantMessage.jsx
index f1792b8..2ee7d9b 100644
--- a/frontend/src/AssistantMessage.jsx
+++ b/frontend/src/AssistantMessage.jsx
@@ -1,10 +1,11 @@
-import React from "react";
+// src/AssistantMessage.jsx
+import React, { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 
-export default function AssistantMessage({ content, theme }) {
+export default function AssistantMessage({ content, theme, timestamp }) {
   return (
     <div className="mb-2 text-start">
       <div
@@ -18,14 +19,106 @@ export default function AssistantMessage({ content, theme }) {
             table: (props) => (
               <table className="table table-sm table-bordered" {...props} />
             ),
-            th: (props) => <th className="bg-light" {...props} />
+            th: (props) => <th className="bg-light" {...props} />,
+            code: CodeWithCopy
           }}
         >
           {content}
         </ReactMarkdown>
       </div>
+      {timestamp && (
+        <div
+          style={{
+            fontSize: "0.75rem",
+            color: "#666",
+            marginTop: "0.2rem",
+            marginLeft: "0.25rem"
+          }}
+        >
+          {formatDateTime(timestamp)}
+        </div>
+      )}
     </div>
   );
 }
 
+function CodeWithCopy({ inline, className = "", children, ...props }) {
+  const [copied, setCopied] = useState(false);
+  const codeText = String(children).replace(/\n$/, "");
+
+  // Only show copy button for fenced code with language
+  const isFencedBlock = !inline && /^language-/.test(className);
+
+  if (!isFencedBlock) {
+    return (
+      <code className={className} {...props}>
+        {children}
+      </code>
+    );
+  }
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(codeText);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch (err) {
+      console.error("Copy failed", err);
+    }
+  };
+
+  return (
+    <div style={{ position: "relative" }}>
+      <pre className={className} {...props} style={{ paddingRight: "2rem" }}>
+        <code>{codeText}</code>
+      </pre>
+      <button
+        onClick={handleCopy}
+        style={{
+          position: "absolute",
+          top: "0.25rem",
+          right: "0.25rem",
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          fontSize: "0.85rem"
+        }}
+        title="Copy to clipboard"
+      >
+        📋
+      </button>
+      {copied && (
+        <span
+          style={{
+            position: "absolute",
+            top: "0.25rem",
+            right: "2rem",
+            fontSize: "0.8rem",
+            color: "green"
+          }}
+        >
+          Copied!
+        </span>
+      )}
+    </div>
+  );
+}
+
+// Utility to format timestamp nicely
+function formatDateTime(dateTime) {
+  try {
+    const date = new Date(dateTime);
+    return date.toLocaleString(undefined, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+  } catch {
+    return dateTime;
+  }
+}
+
 
diff --git a/frontend/src/AssistantMessage.jsx.orig b/frontend/src/AssistantMessage.jsx.orig
new file mode 100644
index 0000000..9070abc
--- /dev/null
+++ b/frontend/src/AssistantMessage.jsx.orig
@@ -0,0 +1,32 @@
+// src/AssistantMessage.jsx
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+
+export default function AssistantMessage({ content, theme }) {
+  return (
+    <div className="mb-2 text-start">
+      <div
+        className={`d-inline-block p-2 rounded ${theme.assistantBg}`}
+        style={{ maxWidth: "95%" }}
+      >
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm, remarkMath]}
+          rehypePlugins={[rehypeKatex]}
+          components={{
+            table: (props) => (
+              <table className="table table-sm table-bordered" {...props} />
+            ),
+            th: (props) => <th className="bg-light" {...props} />
+          }}
+        >
+          {content}
+        </ReactMarkdown>
+      </div>
+    </div>
+  );
+}
+
+
diff --git a/frontend/src/ChatWindow.jsx b/frontend/src/ChatWindow.jsx
index c36287a..1f7a2ea 100644
--- a/frontend/src/ChatWindow.jsx
+++ b/frontend/src/ChatWindow.jsx
@@ -1,3 +1,4 @@
+// ChatWindow.jsx
 import React, { useRef, useEffect } from "react";
 import UserMessage from "./UserMessage";
 import AssistantMessage from "./AssistantMessage";
@@ -13,9 +14,19 @@ export default function ChatWindow({ messages, loading, theme }) {
     <main className={`flex-grow-1 overflow-auto p-3 ${theme.bodyBg}`}>
       {messages.map((m, idx) =>
         m.role === "user" ? (
-          <UserMessage key={idx} content={m.content} theme={theme} />
+          <UserMessage
+            key={idx}
+            content={m.content}
+            theme={theme}
+            timestamp={m.timestamp} // optional: show for user messages too
+          />
         ) : (
-          <AssistantMessage key={idx} content={m.content} theme={theme} />
+          <AssistantMessage
+            key={idx}
+            content={m.content}
+            theme={theme}
+            timestamp={m.timestamp} // <-- now provided
+          />
         )
       )}
       {loading && (
diff --git a/frontend/src/UserMessage.jsx b/frontend/src/UserMessage.jsx
index 52a968e..28118cc 100644
--- a/frontend/src/UserMessage.jsx
+++ b/frontend/src/UserMessage.jsx
@@ -1,10 +1,9 @@
-// UserMessage.jsx
+// src/UserMessage.jsx
 import React from "react";
 
-export default function UserMessage({ content, theme }) {
+export default function UserMessage({ content, theme, timestamp }) {
   return (
-    // This outer div aligns the *bubble* to the right
-    <div className="mb-2 d-flex justify-content-end">
+    <div className="mb-2 d-flex flex-column align-items-end">
       <div
         className={`p-2 rounded ${theme.userBg}`}
         style={{
@@ -24,8 +23,37 @@ export default function UserMessage({ content, theme }) {
           {content}
         </pre>
       </div>
+      {timestamp && (
+        <div
+          style={{
+            fontSize: "0.75rem",
+            color: "#666",
+            marginTop: "0.2rem",
+            marginRight: "0.25rem"
+          }}
+        >
+          {formatDateTime(timestamp)}
+        </div>
+      )}
     </div>
   );
 }
 
+// Same helper used in AssistantMessage
+function formatDateTime(dateTime) {
+  try {
+    const date = new Date(dateTime);
+    return date.toLocaleString(undefined, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+  } catch {
+    return dateTime;
+  }
+}
+