🎨 style: Enhance UI/UX for Font Size, Mentions, and Prompts (#3575)

* style: fix prompts icon shrinking in command popover

* fix: scroll into view behavior for mentions

* fix: always apply default font size if not found

* refactor: Update useMessageScrolling threshold and debounceRate

client/src/components/Chat/Input/Mention.tsx

@@ -103,15 +103,18 @@ export default function Mention({
     };
   }, []);
 
+  const type = commandChar !== '@' ? 'add-convo' : 'mention';
   useEffect(() => {
-    const currentActiveItem = document.getElementById(`mention-item-${activeIndex}`);
+    const currentActiveItem = document.getElementById(`${type}-item-${activeIndex}`);
     currentActiveItem?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
-  }, [activeIndex]);
+  }, [type, activeIndex]);
 
   return (
     <div className="absolute bottom-16 z-10 w-full space-y-2">
       <div className="popover border-token-border-light rounded-2xl border bg-white p-2 shadow-lg dark:bg-gray-700">
         <input
+          // The user expects focus to transition to the input field when the popover is opened
+          // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus
           ref={inputRef}
           placeholder={localize(placeholder)}
@@ -155,6 +158,7 @@ export default function Mention({
           <div className="max-h-40 overflow-y-auto">
             {(matches as MentionOption[]).map((mention, index) => (
               <MentionItem
+                type={type}
                 index={index}
                 key={`${mention.value}-${index}`}
                 onClick={() => {

client/src/components/Chat/Input/MentionItem.tsx

@@ -9,37 +9,37 @@ export default function MentionItem({
   icon,
   isActive,
   description,
+  type = 'mention',
 }: {
   name: string;
   onClick: () => void;
   index: number;
+  type?: 'prompt' | 'mention' | 'add-convo';
   icon?: React.ReactNode;
   isActive?: boolean;
   description?: string;
 }) {
   return (
-    <div tabIndex={index} onClick={onClick} id={`mention-item-${index}`} className="cursor-pointer">
+    <button tabIndex={index} onClick={onClick} id={`${type}-item-${index}`} className="w-full">
       <div
         className={cn(
-          'text-token-text-primary bg-token-main-surface-secondary group flex h-10 items-center gap-2 rounded-lg px-2 text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-600',
-          isActive ? 'bg-gray-100 dark:bg-gray-600' : '',
+          'text-token-text-primary bg-token-main-surface-secondary group flex h-10 items-center gap-2 rounded-lg px-2 text-sm font-medium hover:bg-surface-secondary',
+          isActive ? 'bg-surface-active' : 'bg-transparent',
         )}
       >
-        {icon ? icon : null}
-        <div className="flex h-fit grow flex-row justify-between space-x-2 overflow-hidden text-ellipsis whitespace-nowrap">
-          <div className="flex flex-row space-x-2">
-            <span className="shrink-0 truncate">{name}</span>
+        <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center">{icon}</div>
+        <div className="flex min-w-0 flex-grow items-center justify-between">
+          <div className="truncate">
+            <span className="font-medium">{name}</span>
             {description ? (
-              <span className="text-token-text-tertiary flex-grow truncate text-sm font-light sm:max-w-xs lg:max-w-md">
+              <span className="text-token-text-tertiary ml-2 text-sm font-light">
                 {description}
               </span>
             ) : null}
           </div>
-          <span className="shrink-0 self-center">
-            <Clock4 size={16} className="icon-sm" />
-          </span>
+          <Clock4 size={16} className="ml-2 flex-shrink-0" />
         </div>
       </div>
-    </div>
+    </button>
   );
 }

client/src/components/Chat/Input/PromptsCommand.tsx

@@ -60,7 +60,7 @@ function PromptsCommand({
         label: `${group.command ? `/${group.command} - ` : ''}${group.name}: ${
           group.oneliner?.length ? group.oneliner : group.productionPrompt?.prompt ?? ''
         }`,
-        icon: <CategoryIcon category={group.category ?? ''} />,
+        icon: <CategoryIcon category={group.category ?? ''} className="h-5 w-5" />,
       }));
 
       const promptsMap = mapPromptGroups(data);
@@ -108,7 +108,7 @@ function PromptsCommand({
       }
 
       const group = promptsMap[mention.id];
-      const hasVariables = detectVariables(group?.productionPrompt?.prompt ?? '');
+      const hasVariables = detectVariables(group.productionPrompt?.prompt ?? '');
       if (group && hasVariables) {
         if (e && e.key === 'Tab') {
           e.preventDefault();
@@ -154,6 +154,8 @@ function PromptsCommand({
       <div className="absolute bottom-16 z-10 w-full space-y-2">
         <div className="popover border-token-border-light rounded-2xl border bg-surface-tertiary-alt p-2 shadow-lg">
           <input
+            // The user expects focus to transition to the input field when the popover is opened
+            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             ref={inputRef}
             placeholder={localize('com_ui_command_usage_placeholder')}
@@ -204,6 +206,7 @@ function PromptsCommand({
                 return (matches as PromptOption[]).map((mention, index) => (
                   <MentionItem
                     index={index}
+                    type="prompt"
                     key={`${mention.value}-${index}`}
                     onClick={() => {
                       if (timeoutRef.current) {