[FEAT] Include CSS selectors on all html elements in embedded chat wi…

…dget (Mintplex-Labs#1030)

* add ids to main html elements and aria-labels in embedded chat widget

* revert index.html embedded chat widget testing page

* remove id from chat messages and replace with placeholder classname

embed/src/App.jsx

@@ -34,6 +34,7 @@ export default function App() {
       <div className={`fixed inset-0 z-50 ${isChatOpen ? "block" : "hidden"}`}>
         <div
           className={`w-full h-full bg-white md:max-w-[400px] md:max-h-[700px] md:fixed md:bottom-0 md:right-0 md:mb-4 md:mr-4 md:rounded-2xl md:border md:border-gray-300 md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] ${positionClasses[position]}`}
+          id="anything-llm-chat"
         >
           {isChatOpen && (
             <ChatWindow

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

@@ -34,6 +34,7 @@ const HistoricalMessage = forwardRef(
               src={AnythingLLMIcon}
               alt="Anything LLM Icon"
               className="w-9 h-9 flex-shrink-0 ml-2 mt-2"
+              id="anything-llm-icon"
             />
           )}
           <div
@@ -42,8 +43,8 @@ const HistoricalMessage = forwardRef(
               error
                 ? "bg-red-200 rounded-lg mr-[37px] ml-[9px]"
                 : role === "user"
-                  ? embedderSettings.USER_STYLES
-                  : embedderSettings.ASSISTANT_STYLES
+                  ? `${embedderSettings.USER_STYLES} anything-llm-user-message`
+                  : `${embedderSettings.ASSISTANT_STYLES} anything-llm-assistant-message`
             } shadow-[0_4px_14px_rgba(0,0,0,0.25)]`}
           >
             <div className="flex">

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

@@ -104,6 +104,8 @@ export default function ChatHistory({ settings = {}, history = [] }) {
                 weight="bold"
                 className="text-white/50 w-5 h-5"
                 onClick={scrollToBottom}
+                id="scroll-to-bottom-button"
+                aria-label="Scroll to bottom"
               />
             </div>
           </div>

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

@@ -69,12 +69,15 @@ export default function PromptInput({
                 value={message}
                 className="cursor-text max-h-[100px] text-[14px] mx-2 py-2 w-full text-black bg-transparent placeholder:text-slate-800/60 resize-none active:outline-none focus:outline-none flex-grow"
                 placeholder={"Send a message"}
+                id="message-input"
               />
               <button
                 ref={formRef}
                 type="submit"
                 disabled={buttonDisabled}
                 className="inline-flex justify-center rounded-2xl cursor-pointer text-black group ml-4"
+                id="send-message-button"
+                aria-label="Send message"
               >
                 {buttonDisabled ? (
                   <CircleNotch className="w-4 h-4 animate-spin" />

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

@@ -44,7 +44,10 @@ export default function ChatWindowHeader({
   }, [menuRef]);
 
   return (
-    <div className="flex items-center relative rounded-t-2xl bg-black/10">
+    <div
+      className="flex items-center relative rounded-t-2xl bg-black/10"
+      id="anything-llm-header"
+    >
       <div className="flex justify-center items-center w-full h-[76px]">
         <img
           style={{ maxWidth: 48, maxHeight: 48 }}
@@ -59,6 +62,7 @@ export default function ChatWindowHeader({
             type="button"
             onClick={() => setShowOptions(!showingOptions)}
             className="hover:bg-gray-100 rounded-sm text-slate-800"
+            aria-label="Options"
           >
             <DotsThreeOutlineVertical size={20} weight="fill" />
           </button>
@@ -67,6 +71,7 @@ export default function ChatWindowHeader({
           type="button"
           onClick={closeChat}
           className="hover:bg-gray-100 rounded-sm text-slate-800"
+          aria-label="Close"
         >
           <X size={20} weight="bold" />
         </button>