proper icons

Author: pablonyx

web/src/app/admin/assistants/AssistantEditor.tsx

@@ -535,8 +535,8 @@ export function AssistantEditor({
                       </div>
                     }
                     popover={
-                      <div className="bg-white text-text-800 flex flex-col gap-y-1 w-[300px] border border-border rounded-lg shadow-lg p-2">
-                        <label className="block w-full flex gap-x-2 text-left items-center px-4 py-2 hover:bg-background-100 rounded cursor-pointer">
+                      <div className="bg-white text-sm text-text-800 flex flex-col gap-y-1 w-[200px] border border-border rounded-lg shadow-lg p-2">
+                        <label className="block w-full flex gap-x-2 text-left items-center p-2 hover:bg-background-100 rounded cursor-pointer">
                           <CameraIcon />
                           Upload {values.uploaded_image && " New "} Photo
                           <input
@@ -559,7 +559,7 @@ export function AssistantEditor({
                               setFieldValue("uploaded_image", null);
                               setRemovePersonaImage(false);
                             }}
-                            className="block w-full items-center flex gap-x-2 text-left px-4 py-2 hover:bg-background-100 rounded"
+                            className="block w-full items-center flex gap-x-2 text-left p-2 hover:bg-background-100 rounded"
                           >
                             <TrashIcon />
                             {removePersonaImage
@@ -588,7 +588,7 @@ export function AssistantEditor({
                                 );
                                 setFieldValue("icon_color", randomColor);
                               }}
-                              className="block w-full items-center flex gap-x-2 text-left px-4 py-2 hover:bg-background-100 rounded"
+                              className="block w-full items-center flex gap-x-2 text-left p-2 hover:bg-background-100 rounded"
                             >
                               <NewChatIcon size={16} />
                               Generate New Icon
@@ -604,7 +604,7 @@ export function AssistantEditor({
                                 setRemovePersonaImage(false);
                                 setFieldValue("uploaded_image", null);
                               }}
-                              className="block w-full items-center flex gap-x-2 text-left px-4 py-2 hover:bg-background-100 rounded"
+                              className="block w-full items-center flex gap-x-2 text-left p-2 hover:bg-background-100 rounded"
                             >
                               <SwapIcon />
                               Revert to Previous Image
@@ -644,6 +644,7 @@ export function AssistantEditor({
               </div>
 
               <TextFormField
+                maxWidth="max-w-lg"
                 name="name"
                 tooltip="Used to identify the Assistant in the UI."
                 label="Name"
@@ -652,6 +653,7 @@ export function AssistantEditor({
               />
 
               <TextFormField
+                maxWidth="max-w-lg"
                 tooltip="Used for identifying assistants and their use cases."
                 name="description"
                 label="Description"

web/src/app/admin/assistants/StarterMessageList.tsx

@@ -9,7 +9,7 @@ import {
   TooltipTrigger,
 } from "@radix-ui/react-tooltip";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { FiInfo, FiTrash2, FiPlus, FiRefreshCcw } from "react-icons/fi";
 import { StarterMessage } from "./interfaces";
 import { Label, TextFormField } from "@/components/admin/connectors/Field";
@@ -38,6 +38,7 @@ export default function StarterMessagesList({
   errors: any;
   setFieldValue: any;
 }) {
+  const [tooltipOpen, setTooltipOpen] = useState(false);
   const { handleChange } = useFormikContext();
 
   // Group starter messages into rows of 2 for display purposes
@@ -124,41 +125,41 @@ export default function StarterMessagesList({
 
       <div className="relative gap-x-2 flex w-fit">
         <TooltipProvider delayDuration={50}>
-          <Tooltip>
+          <Tooltip onOpenChange={setTooltipOpen} open={tooltipOpen}>
             <TooltipTrigger asChild>
               <Button
                 type="button"
                 size="sm"
+                onMouseEnter={() => setTooltipOpen(true)}
+                onMouseLeave={() => setTooltipOpen(false)}
                 onClick={() => debouncedRefreshPrompts(values, setFieldValue)}
-                disabled={
-                  !autoStarterMessageEnabled ||
-                  isRefreshing ||
-                  (Object.keys(errors).length > 0 &&
-                    Object.keys(errors).some(
-                      (key) => !key.startsWith("starter_messages")
-                    ))
-                }
                 className={`
-                            ${
-                              isRefreshing || !autoStarterMessageEnabled
-                                ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                                : "bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700"
-                            }
+                          ${
+                            isRefreshing || !autoStarterMessageEnabled
+                              ? "bg-neutral-200 border border-neutral-900 text-neutral-900 cursor-not-allowed"
+                              : "bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700"
+                          }
                           `}
               >
                 <div className="flex text-xs items-center gap-x-2">
                   {isRefreshing ? (
-                    <FiRefreshCcw className="w-4 h-4 animate-spin text-white" />
+                    <FiRefreshCcw className="w-4 h-4 animate-spin text-black" />
                   ) : (
                     <SwapIcon className="w-4 h-4 text-white" />
                   )}
                   Generate
                 </div>
               </Button>
             </TooltipTrigger>
-            {!autoStarterMessageEnabled && (
+            {!autoStarterMessageEnabled ? (
               <TooltipContent side="top" align="center">
-                <p className="bg-background-900 max-w-[200px] text-sm p-1.5 text-white">
+                <p className="bg-background-950 max-w-[200px] text-sm p-1.5 text-white">
+                  No LLM providers configured. Generation is not available.
+                </p>
+              </TooltipContent>
+            ) : (
+              <TooltipContent side="top" align="center">
+                <p className="bg-background-950 max-w-[200px] text-sm p-1.5 text-white">
                   No LLM providers configured. Generation is not available.
                 </p>
               </TooltipContent>

web/src/app/assistants/AssistantSelectionModal.tsx

@@ -1,9 +1,5 @@
 "use client";
 
-import { HistorySidebar } from "@/app/chat/sessionSidebar/HistorySidebar";
-import { ChatSession } from "@/app/chat/interfaces";
-import { Folder } from "@/app/chat/folders/interfaces";
-import { User } from "@/lib/types";
 import Cookies from "js-cookie";
 import { SIDEBAR_TOGGLED_COOKIE_NAME } from "@/components/resizable/constants";
 import {
@@ -24,32 +20,20 @@ import { useChatContext } from "@/components/context/ChatContext";
 
 interface SidebarWrapperProps<T extends object> {
   initiallyToggled: boolean;
-  page: pageType;
   size?: "sm" | "lg";
   children: ReactNode;
 }
 
 export default function SidebarWrapper<T extends object>({
   initiallyToggled,
-  page,
   size = "sm",
   children,
 }: SidebarWrapperProps<T>) {
-  const { chatSessions, folders, openedFolders } = useChatContext();
   const [toggledSidebar, setToggledSidebar] = useState(initiallyToggled);
   const [showDocSidebar, setShowDocSidebar] = useState(false); // State to track if sidebar is open
   // Used to maintain a "time out" for history sidebar so our existing refs can have time to process change
   const [untoggled, setUntoggled] = useState(false);
 
-  const explicitlyUntoggle = () => {
-    setShowDocSidebar(false);
-
-    setUntoggled(true);
-    setTimeout(() => {
-      setUntoggled(false);
-    }, 200);
-  };
-
   const toggleSidebar = useCallback(() => {
     Cookies.set(
       SIDEBAR_TOGGLED_COOKIE_NAME,
@@ -72,7 +56,6 @@ export default function SidebarWrapper<T extends object>({
     mobile: settings?.isMobile,
   });
 
-  const innerSidebarElementRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {