Icon Button Tooltips (#1451)

- add tooltips to footer buttons to clear ambiguity on what they might mean
- Updated Generic OpenAI connector to not have a ton of inputs in one row

frontend/.gitignore

@@ -9,10 +9,8 @@ lerna-debug.log*
 
 node_modules
 dist
-lib
 dist-ssr
 *.local
-!frontend/components/lib
 
 # Editor directories and files
 .vscode/*

frontend/src/components/Footer/index.jsx

@@ -14,6 +14,8 @@ import {
 import React, { useEffect, useState } from "react";
 import SettingsButton from "../SettingsButton";
 import { isMobile } from "react-device-detect";
+import { Tooltip } from "react-tooltip";
+import { v4 } from "uuid";
 
 export const MAX_ICONS = 3;
 export const ICON_COMPONENTS = {
@@ -47,36 +49,48 @@ export default function Footer() {
     return (
       <div className="flex justify-center mb-2">
         <div className="flex space-x-4">
+          <ToolTipWrapper id="open-github">
             <a
               href={paths.github()}
               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"
+              data-tooltip-id="open-github"
+              data-tooltip-content="View source code on Github"
             >
               <GithubLogo weight="fill" className="h-5 w-5 " />
             </a>
+          </ToolTipWrapper>
+          <ToolTipWrapper id="open-documentation">
             <a
               href={paths.docs()}
               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"
+              className="w-fit 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"
+              data-tooltip-id="open-documentation"
+              data-tooltip-content="Open AnythingLLM help docs"
             >
               <BookOpen weight="fill" className="h-5 w-5 " />
             </a>
+          </ToolTipWrapper>
+          <ToolTipWrapper id="open-discord">
             <a
               href={paths.discord()}
               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"
+              data-tooltip-id="open-discord"
+              data-tooltip-content="Join the AnythingLLM Discord"
             >
               <DiscordLogo
                 weight="fill"
                 className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
               />
             </a>
+          </ToolTipWrapper>
           {!isMobile && <SettingsButton />}
         </div>
       </div>
@@ -105,3 +119,17 @@ export default function Footer() {
     </div>
   );
 }
+
+export function ToolTipWrapper({ id = v4(), children }) {
+  return (
+    <div className="flex w-fit">
+      {children}
+      <Tooltip
+        id={id}
+        place="top"
+        delayShow={300}
+        className="tooltip !text-xs z-99"
+      />
+    </div>
+  );
+}

frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx

@@ -1,5 +1,6 @@
 export default function GenericOpenAiOptions({ settings }) {
   return (
+    <div className="flex flex-col gap-y-4">
       <div className="flex gap-4 flex-wrap">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-4">
@@ -45,6 +46,8 @@ export default function GenericOpenAiOptions({ settings }) {
             autoComplete="off"
           />
         </div>
+      </div>
+      <div className="flex gap-x-4 flex-wrap">
         <div className="flex flex-col w-60">
           <label className="text-white text-sm font-semibold block mb-4">
             Token context window
@@ -77,5 +80,6 @@ export default function GenericOpenAiOptions({ settings }) {
           />
         </div>
       </div>
+    </div>
   );
 }

frontend/src/components/SettingsButton/index.jsx

@@ -3,6 +3,7 @@ import paths from "@/utils/paths";
 import { ArrowUUpLeft, Wrench } from "@phosphor-icons/react";
 import { Link } from "react-router-dom";
 import { useMatch } from "react-router-dom";
+import { ToolTipWrapper } from "../Footer";
 
 export default function SettingsButton() {
   const isInSettings = !!useMatch("/settings/*");
@@ -12,22 +13,32 @@ export default function SettingsButton() {
 
   if (isInSettings)
     return (
+      <ToolTipWrapper id="go-home">
         <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"
+          data-tooltip-id="go-home"
+          data-tooltip-content="Back to workspaces"
         >
           <ArrowUUpLeft className="h-5 w-5" weight="fill" />
         </Link>
+      </ToolTipWrapper>
     );
 
   return (
+    <ToolTipWrapper id="open-settings">
       <Link
-      to={!!user?.role ? paths.settings.system() : paths.settings.appearance()}
+        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"
+        data-tooltip-id="open-settings"
+        data-tooltip-content="Open settings"
       >
         <Wrench className="h-5 w-5" weight="fill" />
       </Link>
+    </ToolTipWrapper>
   );
 }

frontend/src/components/SettingsSidebar/index.jsx

@@ -329,7 +329,7 @@ const SidebarOptions = ({ user = null }) => (
     <Option
       href={paths.settings.embedSetup()}
       childLinks={[paths.settings.embedChats()]}
-      btnText="Embedded Chat"
+      btnText="Chat Embed Widgets"
       icon={<CodeBlock className="h-5 w-5 flex-shrink-0" />}
       user={user}
       flex={true}
@@ -338,7 +338,7 @@ const SidebarOptions = ({ user = null }) => (
         <>
           <Option
             href={paths.settings.embedChats()}
-            btnText="Embedded Chat History"
+            btnText="Chat Embed History"
             icon={<Barcode className="h-5 w-5 flex-shrink-0" />}
             user={user}
             flex={true}

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

@@ -12,6 +12,7 @@ import AvailableAgentsButton, {
 } from "./AgentMenu";
 import TextSizeButton from "./TextSizeMenu";
 import SpeechToText from "./SpeechToText";
+import { Tooltip } from "react-tooltip";
 
 export const PROMPT_INPUT_EVENT = "set_prompt_input";
 export default function PromptInput({
@@ -134,14 +135,25 @@ export default function PromptInput({
               {buttonDisabled ? (
                 <StopGenerationButton />
               ) : (
+                <>
                   <button
                     ref={formRef}
                     type="submit"
                     className="inline-flex justify-center rounded-2xl cursor-pointer text-white/60 hover:text-white group ml-4"
+                    data-tooltip-id="send-prompt"
+                    data-tooltip-content="Send prompt message to workspace"
+                    aria-label="Send prompt message to workspace"
                   >
                     <PaperPlaneRight className="w-7 h-7 my-3" weight="fill" />
                     <span className="sr-only">Send message</span>
                   </button>
+                  <Tooltip
+                    id="send-prompt"
+                    place="bottom"
+                    delayShow={300}
+                    className="tooltip !text-xs z-99"
+                  />
+                </>
               )}
             </div>
             <div className="flex justify-between py-3.5">