From 30d21f0180fbef531f8a437306538b1167fc89d7 Mon Sep 17 00:00:00 2001
From: "Samuele E. Locatelli" <samuele.locatelli@egalware.com>
Date: Wed, 3 Sep 2025 13:56:49 +0000
Subject: [PATCH] update grafica

---
 frontend/src/ChatWindow.jsx  |  5 ---
 frontend/src/UserMessage.jsx | 84 ++++++++++++++++++++++++++++++++----
 2 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/frontend/src/ChatWindow.jsx b/frontend/src/ChatWindow.jsx
index b08373a..0e6365e 100644
--- a/frontend/src/ChatWindow.jsx
+++ b/frontend/src/ChatWindow.jsx
@@ -49,11 +49,6 @@ export default function ChatWindow({ messages, loading, theme }) {
         </div>
       )}
 
-      {loading && (
-        <div className="text-muted small fst-italic">
-          The model is processing...
-        </div>
-      )}
       <div ref={endRef} />
     </main>
   );
diff --git a/frontend/src/UserMessage.jsx b/frontend/src/UserMessage.jsx
index 84e85fd..a1fd5a8 100644
--- a/frontend/src/UserMessage.jsx
+++ b/frontend/src/UserMessage.jsx
@@ -1,8 +1,11 @@
 // src/UserMessage.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 UserMessage({ content, theme, timestamp, startedAt, endedAt }) {
-  // Priorità: timestamp dal modello dati → endedAt → startedAt
   const ts = timestamp ?? endedAt ?? startedAt;
 
   return (
@@ -14,17 +17,19 @@ export default function UserMessage({ content, theme, timestamp, startedAt, ende
           textAlign: "left",
         }}
       >
-        <pre
-          className="m-0 p-0"
-          style={{
-            whiteSpace: "pre-wrap",
-            fontFamily: "inherit",
-            backgroundColor: "transparent",
-            color: "inherit",
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm, remarkMath]}
+          rehypePlugins={[rehypeKatex]}
+          components={{
+            table: (props) => (
+              <table className="table table-sm table-bordered" {...props} />
+            ),
+            th: (props) => <th className="bg-light" {...props} />,
+            code: CodeWithCopy
           }}
         >
           {content}
-        </pre>
+        </ReactMarkdown>
       </div>
       {ts != null && (
         <div
@@ -42,6 +47,66 @@ export default function UserMessage({ content, theme, timestamp, startedAt, ende
   );
 }
 
+function CodeWithCopy({ inline, className = "", children, ...props }) {
+  const [copied, setCopied] = React.useState(false);
+  const codeText = String(children).replace(/\n$/, "");
+  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>
+  );
+}
+
 function formatDateTime(dateTime) {
   const date = dateTime instanceof Date ? dateTime : new Date(dateTime);
   if (Number.isNaN(date.getTime())) return String(dateTime);
@@ -55,3 +120,4 @@ function formatDateTime(dateTime) {
   });
 }
 
+