Merge branch 'master' of github.com:Mintplex-Labs/anything-llm

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>

frontend/src/components/Footer/index.jsx

@@ -52,6 +52,7 @@ export default function Footer() {
             target="_blank"
             rel="noreferrer"
             className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+            aria-label="Find us on Github"
           >
             <GithubLogo weight="fill" className="h-5 w-5 " />
           </a>
@@ -60,6 +61,7 @@ export default function Footer() {
             target="_blank"
             rel="noreferrer"
             className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+            aria-label="Docs"
           >
             <BookOpen weight="fill" className="h-5 w-5 " />
           </a>
@@ -68,6 +70,7 @@ export default function Footer() {
             target="_blank"
             rel="noreferrer"
             className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+            aria-label="Join our Discord server"
           >
             <DiscordLogo
               weight="fill"

frontend/src/components/SettingsButton/index.jsx

@@ -15,6 +15,7 @@ export default function SettingsButton() {
       <Link
         to={paths.home()}
         className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+        aria-label="Home"
       >
         <ArrowUUpLeft className="h-5 w-5" weight="fill" />
       </Link>
@@ -24,6 +25,7 @@ export default function SettingsButton() {
     <Link
       to={!!user?.role ? paths.settings.system() : paths.settings.appearance()}
       className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+      aria-label="Settings"
     >
       <Wrench className="h-5 w-5" weight="fill" />
     </Link>

frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx

@@ -25,7 +25,10 @@ export default function ThreadItem({
     : paths.workspace.thread(slug, thread.slug);
 
   return (
-    <div className="w-full relative flex h-[38px] items-center border-none hover:bg-slate-600/20 rounded-lg">
+    <div
+      className="w-full relative flex h-[38px] items-center border-none hover:bg-slate-600/20 rounded-lg"
+      role="listitem"
+    >
       {/* Curved line Element and leader if required */}
       <div
         style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }}
@@ -63,6 +66,7 @@ export default function ThreadItem({
           <a
             href={window.location.pathname === linkTo ? "#" : linkTo}
             className="w-full"
+            aria-current={isActive ? "page" : ""}
           >
             <p
               className={`text-left text-sm ${
@@ -79,6 +83,7 @@ export default function ThreadItem({
               <button
                 type="button"
                 onClick={() => setShowOptions(!showOptions)}
+                aria-label="Thread options"
               >
                 <DotsThree className="text-slate-300" size={25} />
               </button>

frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx

@@ -46,7 +46,7 @@ export default function ThreadContainer({ workspace }) {
     ? threads.findIndex((thread) => thread?.slug === threadSlug) + 1
     : 0;
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col" role="list" aria-label="Threads">
       <ThreadItem
         idx={0}
         activeIdx={activeThreadIdx}

frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx

@@ -72,7 +72,7 @@ export default function ActiveWorkspaces() {
   }
 
   return (
-    <>
+    <div role="list" aria-label="Workspaces">
       {workspaces.map((workspace) => {
         const isActive = workspace.slug === slug;
         const isHovered = hoverStates[workspace.id];
@@ -82,6 +82,7 @@ export default function ActiveWorkspaces() {
             onMouseEnter={() => handleMouseEnter(workspace.id)}
             onMouseLeave={() => handleMouseLeave(workspace.id)}
             key={workspace.id}
+            role="listitem"
           >
             <div
               key={workspace.id}
@@ -89,6 +90,7 @@ export default function ActiveWorkspaces() {
             >
               <a
                 href={isActive ? null : paths.workspace.chat(workspace.slug)}
+                aria-current={isActive ? "page" : ""}
                 className={`
               transition-all duration-[200ms]
                 flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center
@@ -154,6 +156,7 @@ export default function ActiveWorkspaces() {
                         onMouseEnter={() => handleGearMouseEnter(workspace.id)}
                         onMouseLeave={() => handleGearMouseLeave(workspace.id)}
                         className="rounded-md flex items-center justify-center text-[#A7A8A9] hover:text-white ml-auto"
+                        aria-label="General appearance settings"
                       >
                         <div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
                           <GearSix
@@ -186,6 +189,6 @@ export default function ActiveWorkspaces() {
           providedSlug={selectedWs ? selectedWs.slug : null}
         />
       )}
-    </>
+    </div>
   );
 }

frontend/src/components/Sidebar/index.jsx

@@ -27,6 +27,7 @@ export default function Sidebar() {
       <Link
         to={paths.home()}
         className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]"
+        aria-label="Home"
       >
         <img
           src={logo}
@@ -104,6 +105,7 @@ export function SidebarMobileHeader() {
           className="rounded-md p-2 flex items-center justify-center text-slate-200"
         >
           <List className="h-6 w-6" />
+          aria-label="Show sidebar"
         </button>
         <div className="flex items-center justify-center flex-grow">
           <img

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx

@@ -58,6 +58,7 @@ function FeedbackButton({
         data-tooltip-id={tooltipId}
         data-tooltip-content={tooltipContent}
         className="text-zinc-300"
+        aria-label={tooltipContent}
       >
         <IconComponent
           size={18}
@@ -86,6 +87,7 @@ function CopyMessage({ message }) {
           data-tooltip-id="copy-assistant-text"
           data-tooltip-content="Copy"
           className="text-zinc-300"
+          aria-label="Copy"
         >
           {copied ? (
             <Check size={18} className="mb-1" />

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/StopGenerationButton/index.jsx

@@ -14,6 +14,7 @@ export default function StopGenerationButton() {
         data-tooltip-id="stop-generation-button"
         data-tooltip-content="Stop generating response"
         className="border-none text-white/60 cursor-pointer group"
+        aria-label="Stop generating"
       >
         <svg
           width="28"

frontend/src/pages/OnboardingFlow/Steps/index.jsx

@@ -100,6 +100,7 @@ export function OnboardingLayout({ children }) {
             disabled={backBtn.disabled}
             onClick={backBtn.onClick}
             className="group p-2 rounded-lg border-2 border-zinc-300 disabled:border-zinc-600 h-fit w-fit disabled:not-allowed hover:bg-zinc-100 disabled:hover:bg-transparent"
+            aria-label="Back"
           >
             <ArrowLeft
               className="text-white group-hover:text-black group-disabled:text-gray-500"
@@ -127,6 +128,7 @@ export function OnboardingLayout({ children }) {
             disabled={forwardBtn.disabled}
             onClick={forwardBtn.onClick}
             className="group p-2 rounded-lg border-2 border-zinc-300 disabled:border-zinc-600 h-fit w-fit disabled:not-allowed hover:bg-zinc-100 disabled:hover:bg-transparent"
+            aria-label="Continue"
           >
             <ArrowRight
               className="text-white group-hover:text-black group-disabled:text-gray-500"