auto open param and default greeting

embed/src/App.jsx

@@ -4,12 +4,17 @@ import useOpenChat from "@/hooks/useOpen";
 import Head from "@/components/Head";
 import OpenButton from "@/components/OpenButton";
 import ChatWindow from "./components/ChatWindow";
+import { useEffect } from "react";
 
 export default function App() {
   const { isChatOpen, toggleOpenChat } = useOpenChat();
   const embedSettings = useGetScriptAttributes();
   const sessionId = useSessionId();
 
+  useEffect(() => {
+    toggleOpenChat(embedSettings.openOnLoad === 'on')
+  }, [embedSettings.loaded]);
+
   if (!embedSettings.loaded) return null;
   return (
     <>
@@ -20,11 +25,10 @@ export default function App() {
             width: isChatOpen ? 320 : "auto",
             height: isChatOpen ? "93vh" : "auto",
           }}
-          className={`transition-all duration-300 ease-in-out ${
+          className={`transition-all duration-300 ease-in-out ${isChatOpen
-            isChatOpen
+            ? "max-w-md p-4 bg-white rounded-lg border shadow-lg w-72"
-              ? "max-w-md p-4 bg-white rounded-lg border shadow-lg w-72"
+            : "w-16 h-16 rounded-full"
-              : "w-16 h-16 rounded-full"
+            }`}
-          }`}
         >
           {isChatOpen && (
             <ChatWindow

embed/src/components/ChatWindow/ChatContainer/ChatHistory/index.jsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { ArrowDown } from "@phosphor-icons/react";
 import debounce from "lodash.debounce";
 
-export default function ChatHistory({ history = [] }) {
+export default function ChatHistory({ settings = {}, history = [] }) {
   const replyRef = useRef(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
   const chatHistoryRef = useRef(null);
@@ -46,10 +46,11 @@ export default function ChatHistory({ history = [] }) {
 
   if (history.length === 0) {
     return (
-      <div className="flex flex-col h-full md:mt-0 pb-48 w-full justify-end items-center">
+      <div style={{ height: "85vh", paddingBottom: 100, paddingTop: 5 }}
-        <div className="flex flex-col items-start">
+        className="bg-gray-100 rounded-lg px-2 h-full mt-2 gap-y-2 overflow-y-scroll flex flex-col justify-start no-scroll">
-          <p className="text-white/60 text-lg font-base py-4">
+        <div className="flex h-full flex-col items-center justify-center">
-            send a chat to get started!
+          <p className="text-slate-400 text-sm font-base py-4 text-center">
+            {settings?.greeting ?? 'Send a chat to get started!'}
           </p>
         </div>
       </div>
@@ -58,7 +59,7 @@ export default function ChatHistory({ history = [] }) {
 
   return (
     <div
-      style={{ height: "85vh", paddingBottom: 100 }}
+      style={{ height: "85vh", paddingBottom: 100, paddingTop: 5 }}
       className="bg-gray-100 rounded-lg px-2 h-full mt-2 gap-y-2 overflow-y-scroll flex flex-col justify-start no-scroll"
       id="chat-history"
       ref={chatHistoryRef}

embed/src/components/ChatWindow/ChatContainer/PromptInput/index.jsx

@@ -2,6 +2,7 @@ import { CircleNotch, PaperPlaneRight } from "@phosphor-icons/react";
 import React, { useState, useRef } from "react";
 
 export default function PromptInput({
+  setttings,
   message,
   submit,
   onChange,

embed/src/components/ChatWindow/ChatContainer/index.jsx

@@ -69,8 +69,9 @@ export default function ChatContainer({
 
   return (
     <>
-      <ChatHistory history={chatHistory} />
+      <ChatHistory settings={settings} history={chatHistory} />
       <PromptInput
+        settings={settings}
         message={message}
         submit={handleSubmit}
         onChange={handleMessageChange}

embed/src/components/SessionId/index.jsx

@@ -5,8 +5,8 @@ export default function SessionId() {
   if (!sessionId) return null;
 
   return (
-    <div className="text-xs text-gray-500 w-full text-center">
+    <div className="text-xs text-gray-300 w-full text-center">
-      ID: {sessionId}
+      {sessionId}
     </div>
   );
 }

embed/src/hooks/useScriptAttributes.js

@@ -13,6 +13,10 @@ const DEFAULT_SETTINGS = {
   // style parameters
   chatIcon: "plus",
   brandImageUrl: null, // will be forced into 100x50px container
+  greeting: null, // empty chat window greeting.
+
+  // behaviors
+  openOnLoad: 'off', // or "on"
 };
 
 export default function useGetScriptAttributes() {