Fix AIChatInput focus & styling (#3470)

Co-authored-by: Samy Pessé <[email protected]>

Author: zenoachtig

packages/gitbook/src/components/AIChat/AIChatInput.tsx

@@ -34,7 +34,13 @@ export function AIChatInput(props: {
 
     useEffect(() => {
         if (!disabled && !loading) {
-            inputRef.current?.focus();
+            // Add a small delay to ensure the input is rendered before focusing
+            // This fixes inconsistent focus behaviour across browsers
+            const timeout = setTimeout(() => {
+                inputRef.current?.focus();
+            }, 50);
+
+            return () => clearTimeout(timeout);
         }
     }, [disabled, loading]);
 
@@ -120,8 +126,8 @@ export function AIChatInput(props: {
                     arrow
                 >
                     <div className="flex cursor-help items-center gap-1 circular-corners:rounded-2xl rounded-corners:rounded-md px-2 py-1 text-tint/7 text-xs transition-all hover:bg-tint">
-                        <span className="-ml-1 circular-corners:rounded-2xl rounded-corners:rounded-md bg-tint-11/7 px-1 py-0.5 font-mono font-semibold text-[0.65rem] text-contrast-tint-11 leading-none">
-                            AI
+                        <span className="-ml-1 rounded-corners:rounded circular-corners:rounded-2xl bg-tint-11/7 px-1 py-0.5 font-mono font-semibold text-[0.65rem] text-contrast-tint-11 leading-none">
+                            {t(language, 'ai_chat_context_badge')}
                         </span>{' '}
                         <span>{t(language, 'ai_chat_context_title')}</span>
                     </div>

packages/gitbook/src/components/primitives/Button.tsx

@@ -36,7 +36,7 @@ export const variantClasses = {
         'bg-transparent',
         'text-tint',
         'border-0',
-        'shadow-none',
+        '!shadow-none',
         'hover:bg-primary-hover',
         'hover:text-primary-strong',
         'hover:scale-1',