Added option to hide header above the chat window

README.md

@@ -81,6 +81,8 @@ REQUIRED data attributes:
 
 - `data-no-sponsor` — Setting this attribute to anything will hide the custom or default sponsor at the bottom of an open chat window.
 
+- `data-no-header` — Setting this attribute hides the header above the chat window.
+
 - `data-sponsor-link` — A clickable link in the sponsor section in the footer of an open chat window.
 
 - `data-sponsor-text` — The text displays in sponsor text in the footer of an open chat window.

src/components/ChatWindow/index.jsx

@@ -35,13 +35,15 @@ export default function ChatWindow({ closeChat, settings, sessionId }) {
 
   return (
     <div className="allm-flex allm-flex-col allm-h-full">
-      <ChatWindowHeader
-        sessionId={sessionId}
-        settings={settings}
-        iconUrl={settings.brandImageUrl}
-        closeChat={closeChat}
-        setChatHistory={setChatHistory}
-      />
+      {!settings.noHeader && (
+        <ChatWindowHeader
+          sessionId={sessionId}
+          settings={settings}
+          iconUrl={settings.brandImageUrl}
+          closeChat={closeChat}
+          setChatHistory={setChatHistory}
+        />
+      )}
       <div className="allm-flex-grow allm-overflow-y-auto">
         <ChatContainer
           sessionId={sessionId}
@@ -55,6 +57,7 @@ export default function ChatWindow({ closeChat, settings, sessionId }) {
           setChatHistory={setChatHistory}
           settings={settings}
           sessionId={sessionId}
+          closeChat={closeChat}
         />
       </div>
     </div>

src/components/ResetChat/index.jsx

@@ -1,7 +1,12 @@
 import ChatService from "@/models/chatService";
 import { useTranslation } from "react-i18next";
 
-export default function ResetChat({ setChatHistory, settings, sessionId }) {
+export default function ResetChat({
+  setChatHistory,
+  settings,
+  sessionId,
+  closeChat,
+}) {
   const { t } = useTranslation();
 
   const handleChatReset = async () => {
@@ -10,14 +15,29 @@ export default function ResetChat({ setChatHistory, settings, sessionId }) {
   };
 
   return (
-    <div className="allm-w-full allm-flex allm-justify-center">
+    <div className="allm-w-full allm-flex allm-justify-center allm-gap-x-1 p-0">
       <button
         style={{ color: "#7A7D7E" }}
-        className="hover:allm-cursor-pointer allm-border-none allm-text-sm allm-bg-transparent hover:allm-opacity-80 hover:allm-underline"
+        className="allm-h-fit allm-px-0 hover:allm-cursor-pointer allm-border-none allm-text-sm allm-bg-transparent hover:allm-opacity-80 hover:allm-underline"
         onClick={() => handleChatReset()}
       >
         {settings.resetChatText || t("chat.reset-chat")}
       </button>
+      {settings.noHeader && (
+        <>
+          <p className="allm-m-0 allm-h-fit allm-text-sm allm-text-[#7A7D7E]">
+            |
+          </p>
+          <button
+            type="button"
+            style={{ color: "#7A7D7E" }}
+            className="allm-h-fit allm-px-0 hover:allm-cursor-pointer allm-border-none allm-text-sm allm-bg-transparent hover:allm-opacity-80 hover:allm-underline"
+            onClick={closeChat}
+          >
+            Close Chat
+          </button>
+        </>
+      )}
     </div>
   );
 }

src/hooks/useScriptAttributes.js

@@ -27,6 +27,7 @@ const DEFAULT_SETTINGS = {
   windowHeight: null, // height of chat window in number:css-prefix
   windowWidth: null, // width of chat window in number:css-prefix
   textSize: null, // text size in px (number only)
+  noHeader: null, // If set, hide the header above the chatbox
   language: "en", // language of chat interface
   sendMessageText: null, // override text for send message button
   resetChatText: null, // override text for reset chat button