feat: rebrand to HutMind, adjust bot response width, add copy button

FrontEnd/package-lock.json

@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@react-oauth/google": "^0.13.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.4.0",
@@ -943,6 +944,16 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@react-oauth/google": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.13.4.tgz",
+      "integrity": "sha512-hGKyNEH+/PK8M0sFEuo3MAEk0txtHpgs94tDQit+s2LXg7b6z53NtzHfqDvoB2X8O6lGB+FRg80hY//X6hfD+w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.30.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.30.1.tgz",
@@ -4337,6 +4348,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"

FrontEnd/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-oauth/google": "^0.13.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",

FrontEnd/src/ChatBot.css

@@ -184,7 +184,8 @@
 }
 
 .message-content {
-  max-width: 80%;
+  width: 100%;
+  max-width: 100%;
   overflow-wrap: break-word;
   font-size: 16px;
   line-height: 1.6;
@@ -193,6 +194,7 @@
 .message-row.user .message-content {
   display: flex;
   justify-content: flex-end;
+  max-width: 80%;
 }
 
 .user-text {
@@ -204,9 +206,49 @@
   box-shadow: 0 2px 8px rgba(227, 24, 55, 0.15);
 }
 
+/* Bot message wrapper for copy button positioning */
+.bot-message-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.copy-btn {
+  background-color: transparent;
+  color: #9ca3af; /* Gray icon */
+  margin-top: 12px;
+  margin-left: -8px; /* Alignment with text */
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  border-radius: 50%; /* Circular */
+  opacity: 0; /* Hidden by default */
+  width: 36px;
+  height: 36px;
+}
+
+/* Always show icon for the latest response */
+.bot-message-wrapper.latest .copy-btn {
+  opacity: 1;
+}
+
+/* Show icon on hover for all responses */
+.bot-message-wrapper:hover .copy-btn {
+  opacity: 1;
+}
+
+.copy-btn:hover {
+  background-color: #f3f4f6; /* Light circular hover */
+  color: #374151; /* Darker on hover */
+}
+
 /* React Markdown Styles */
 .markdown-body {
   color: #374151;
+  width: 100%;
 }
 
 .markdown-body p {

FrontEnd/src/ChatBot.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { FaUser, FaRobot, FaPaperPlane, FaCircle, FaPlus, FaPizzaSlice } from "react-icons/fa";
+import { MdOutlineContentCopy, MdCheck } from "react-icons/md";
 import ReactMarkdown from "react-markdown";
 import "./ChatBot.css";
 
@@ -9,6 +10,7 @@ const ChatBot = () => {
   const [messages, setMessages] = useState([]);
   const [userInput, setUserInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [copiedIndex, setCopiedIndex] = useState(null);
   const chatWindowRef = useRef(null);
   const textareaRef = useRef(null);
 
@@ -115,14 +117,20 @@ const ChatBot = () => {
     }
   };
 
+  const copyToClipboard = (text, index) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopiedIndex(index);
+      setTimeout(() => setCopiedIndex(null), 2000);
+    });
+  };
+
   return (
     <div className="chatbot-container">
       <div className="chat-header">
         <div className="header-logo" onClick={handleNewChat} title="Quay về trang chủ">
           <img src="/pizzahut.png" alt="Pizza Hut Logo" width={50} height={50} />
           <div className="header-title">
-            <h1>HutMind - JRG Chatbot</h1>
-            <span>Powered by Tan Mai</span>
+            <h1>HutMind</h1>
           </div>
         </div>
         <button className="new-chat-btn" onClick={handleNewChat} title="Cuộc trò chuyện mới">
@@ -162,28 +170,45 @@ const ChatBot = () => {
         )}
 
         <div className="messages-list">
-          {messages.map((message, index) => (
-            <div
-              key={index}
-              className={`message-row ${message.sender}`}
-            >
-              <div className="message-content">
-                {message.sender === "bot" && message.text === "..." ? (
-                  <div className="typing-indicator">
-                    <FaCircle className="dot dot1" />
-                    <FaCircle className="dot dot2" />
-                    <FaCircle className="dot dot3" />
-                  </div>
-                ) : message.sender === "bot" ? (
-                  <div className="markdown-body">
-                    <ReactMarkdown>{message.text}</ReactMarkdown>
-                  </div>
-                ) : (
-                  <div className="user-text">{message.text}</div>
-                )}
+          {messages.map((message, index) => {
+            const lastBotIndex = [...messages].reverse().findIndex(m => m.sender === 'bot');
+            const actualLastBotIndex = lastBotIndex !== -1 ? messages.length - 1 - lastBotIndex : -1;
+            const isLatestBotMessage = index === actualLastBotIndex;
+
+            return (
+              <div
+                key={index}
+                className={`message-row ${message.sender}`}
+              >
+                <div className="message-content">
+                  {message.sender === "bot" && message.text === "..." ? (
+                    <div className="typing-indicator">
+                      <FaCircle className="dot dot1" />
+                      <FaCircle className="dot dot2" />
+                      <FaCircle className="dot dot3" />
+                    </div>
+                  ) : message.sender === "bot" ? (
+                    <div className={`bot-message-wrapper ${isLatestBotMessage ? 'latest' : ''}`}>
+                      <div className="markdown-body">
+                        <ReactMarkdown>{message.text}</ReactMarkdown>
+                      </div>
+                      {message.text !== "..." && (
+                        <button 
+                          className="copy-btn" 
+                          onClick={() => copyToClipboard(message.text, index)}
+                          title="Sao chép"
+                        >
+                          {copiedIndex === index ? <MdCheck size={18} /> : <MdOutlineContentCopy size={18} />}
+                        </button>
+                      )}
+                    </div>
+                  ) : (
+                    <div className="user-text">{message.text}</div>
+                  )}
+                </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       </div>
 
@@ -213,7 +238,7 @@ const ChatBot = () => {
           </button>
         </div>
         <div className="footer-text">
-          Pizza Hut Assistant có thể mắc lỗi. Vui lòng kiểm tra lại các thông tin quan trọng.
+          HutMind có thể mắc lỗi. Vui lòng kiểm tra lại các thông tin quan trọng.
         </div>
       </div>
     </div>