From edfd1cd365741c65e7001401a58e344bae84d2b6 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Tue, 9 Dec 2025 15:33:34 +0100
Subject: [PATCH 01/17] Initial

---
 .../src/components/AIChat/AIChatInput.tsx     | 180 ++++++++++++------
 .../src/components/primitives/Input.tsx       | 148 ++++++++++++++
 .../primitives/KeyboardShortcut.tsx           |   8 +-
 3 files changed, 273 insertions(+), 63 deletions(-)
 create mode 100644 packages/gitbook/src/components/primitives/Input.tsx

diff --git a/packages/gitbook/src/components/AIChat/AIChatInput.tsx b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
index edee25d8e3..191c664ee3 100644
--- a/packages/gitbook/src/components/AIChat/AIChatInput.tsx
+++ b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
@@ -1,10 +1,10 @@
 import { t, tString, useLanguage } from '@/intl/client';
-import { tcls } from '@/lib/tailwind';
 import { Icon } from '@gitbook/icons';
 import { useEffect, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useAIChatState } from '../AI/useAIChat';
-import { Button, HoverCard, HoverCardRoot, HoverCardTrigger } from '../primitives';
+import { HoverCard, HoverCardRoot, HoverCardTrigger } from '../primitives';
+import { Input } from '../primitives/Input';
 import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
 
 export function AIChatInput(props: {
@@ -57,57 +57,24 @@ export function AIChatInput(props: {
     );
 
     return (
-        <div className="depth-subtle:has-[textarea:focus]:-translate-y-px relative flex animate-blur-in-slow flex-col overflow-hidden circular-corners:rounded-3xl rounded-corners:rounded-xl bg-tint-base/9 depth-subtle:shadow-sm shadow-tint/6 ring-1 ring-tint-subtle backdrop-blur-lg transition-all depth-subtle:has-[textarea:focus]:shadow-lg has-[textarea:focus]:shadow-primary-subtle has-[textarea:focus]:ring-2 has-[textarea:focus]:ring-primary-hover contrast-more:bg-tint-base dark:shadow-tint-1">
-            <textarea
-                ref={inputRef}
-                disabled={disabled || loading}
-                data-loading={loading}
-                data-testid="ai-chat-input"
-                className={tcls(
-                    'resize-none',
-                    'focus:outline-hidden',
-                    'focus:ring-0',
-                    'w-full',
-                    'px-3',
-                    'py-3',
-                    'pb-12',
-                    'h-auto',
-                    'bg-transparent',
-                    'peer',
-                    'max-h-64',
-                    'placeholder:text-tint/8',
-                    'transition-colors',
-                    'disabled:bg-tint-subtle',
-                    'delay-300',
-                    'disabled:delay-0',
-                    'disabled:cursor-not-allowed',
-                    'data-[loading=true]:cursor-progress',
-                    'data-[loading=true]:opacity-50'
-                )}
-                value={value}
-                rows={1}
-                placeholder={tString(language, 'ai_chat_input_placeholder')}
-                onChange={handleInput}
-                onKeyDown={(event) => {
-                    if (event.key === 'Escape') {
-                        event.preventDefault();
-                        event.currentTarget.blur();
-                        return;
-                    }
-
-                    if (event.key === 'Enter' && !event.shiftKey && value.trim()) {
-                        event.preventDefault();
-                        event.currentTarget.style.height = 'auto';
-                        onSubmit(value);
-                    }
-                }}
-            />
-            {!disabled ? (
-                <div className="absolute top-2.5 right-3 animate-[fadeIn_0.2s_0.5s_ease-in-out_both] peer-focus:hidden">
+        <Input
+            multiline
+            label="Assistant input"
+            placeholder={tString(language, 'ai_chat_input_placeholder')}
+            onChange={handleInput}
+            onSubmit={() => onSubmit(value)}
+            value={value}
+            leading="magnifying-glass"
+            submitButton={{
+                label: tString(language, 'send'),
+            }}
+            keyboardShortcut={
+                <div className="peer-focus:hidden">
                     <KeyboardShortcut keys={['mod', 'i']} className="bg-tint-base" />
                 </div>
-            ) : null}
-            <div className="absolute inset-x-0 bottom-0 flex items-center gap-2 px-2 py-2">
+            }
+            ref={inputRef}
+            trailing={
                 <HoverCardRoot openDelay={500}>
                     <HoverCard
                         className="max-w-xs bg-tint p-2 text-sm text-tint"
@@ -135,7 +102,7 @@ export function AIChatInput(props: {
                         </div>
                     </HoverCard>
                     <HoverCardTrigger>
-                        <div className="flex cursor-help items-center gap-1 circular-corners:rounded-2xl rounded-corners:rounded-md px-2.5 py-1.5 text-tint/7 text-xs transition-all hover:bg-tint">
+                        <div className="-ml-2 flex cursor-help items-center gap-1 circular-corners:rounded-2xl rounded-corners:rounded-md px-2.5 py-1.5 text-tint/7 text-xs transition-all hover:bg-tint">
                             <span className="-ml-1 circular-corners:rounded-2xl rounded-corners:rounded-sm 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>{' '}
@@ -146,14 +113,105 @@ export function AIChatInput(props: {
                         </div>
                     </HoverCardTrigger>
                 </HoverCardRoot>
-                <Button
-                    label={tString(language, 'send')}
-                    size="medium"
-                    className="ml-auto"
-                    disabled={disabled || !value.trim()}
-                    onClick={() => onSubmit(value)}
-                />
-            </div>
-        </div>
+            }
+        />
+        // <div className="depth-subtle:has-[textarea:focus]:-translate-y-px relative flex animate-blur-in-slow flex-col overflow-hidden circular-corners:rounded-3xl rounded-corners:rounded-xl bg-tint-base/9 depth-subtle:shadow-sm shadow-tint/6 ring-1 ring-tint-subtle backdrop-blur-lg transition-all depth-subtle:has-[textarea:focus]:shadow-lg has-[textarea:focus]:shadow-primary-subtle has-[textarea:focus]:ring-2 has-[textarea:focus]:ring-primary-hover contrast-more:bg-tint-base dark:shadow-tint-1">
+        //     {/* <textarea
+        //         ref={inputRef}
+        //         disabled={disabled || loading}
+        //         data-loading={loading}
+        //         data-testid="ai-chat-input"
+        //         className={tcls(
+        //             'resize-none',
+        //             'focus:outline-hidden',
+        //             'focus:ring-0',
+        //             'w-full',
+        //             'px-3',
+        //             'py-3',
+        //             'pb-12',
+        //             'h-auto',
+        //             'bg-transparent',
+        //             'peer',
+        //             'max-h-64',
+        //             'placeholder:text-tint/8',
+        //             'transition-colors',
+        //             'disabled:bg-tint-subtle',
+        //             'delay-300',
+        //             'disabled:delay-0',
+        //             'disabled:cursor-not-allowed',
+        //             'data-[loading=true]:cursor-progress',
+        //             'data-[loading=true]:opacity-50'
+        //         )}
+        //         value={value}
+        //         rows={1}
+        //         placeholder={tString(language, 'ai_chat_input_placeholder')}
+        //         onChange={handleInput}
+        //         onKeyDown={(event) => {
+        //             if (event.key === 'Escape') {
+        //                 event.preventDefault();
+        //                 event.currentTarget.blur();
+        //                 return;
+        //             }
+
+        //             if (event.key === 'Enter' && !event.shiftKey && value.trim()) {
+        //                 event.preventDefault();
+        //                 event.currentTarget.style.height = 'auto';
+        //                 onSubmit(value);
+        //             }
+        //         }}
+        //     /> */}
+        //     {/* {!disabled ? (
+        //         <div className="absolute top-2.5 right-3 animate-[fadeIn_0.2s_0.5s_ease-in-out_both] peer-focus:hidden">
+        //             <KeyboardShortcut keys={['mod', 'i']} className="bg-tint-base" />
+        //         </div>
+        //     ) : null} */}
+        //     <div className="absolute inset-x-0 bottom-0 flex items-center gap-2 px-2 py-2">
+        //         <HoverCardRoot openDelay={500}>
+        //             <HoverCard
+        //                 className="max-w-xs bg-tint p-2 text-sm text-tint"
+        //                 arrow={{ className: 'fill-tint-3' }}
+        //             >
+        //                 <div className="flex flex-col gap-3 p-2">
+        //                     <p className="font-semibold">
+        //                         {t(language, 'ai_chat_context_description')}
+        //                     </p>
+        //                     <ul className="flex flex-col gap-2">
+        //                         <li className="flex items-center gap-2">
+        //                             <Icon icon="memo" className="size-3.5 opacity-7" />
+        //                             {t(language, 'ai_chat_context_pages_youve_read')}
+        //                         </li>
+        //                         <li className="flex items-center gap-2">
+        //                             <Icon icon="user" className="size-3.5 opacity-7" />
+        //                             {t(language, 'ai_chat_context_info_provided_by_the_site')}
+        //                         </li>
+        //                         <li className="flex items-center gap-2">
+        //                             <Icon icon="message-question" className="size-3.5 opacity-7" />
+        //                             {t(language, 'ai_chat_context_previous_messages')}
+        //                         </li>
+        //                     </ul>
+        //                     <p>{t(language, 'ai_chat_context_disclaimer')}</p>
+        //                 </div>
+        //             </HoverCard>
+        //             <HoverCardTrigger>
+        //                 <div className="flex cursor-help items-center gap-1 circular-corners:rounded-2xl rounded-corners:rounded-md px-2.5 py-1.5 text-tint/7 text-xs transition-all hover:bg-tint">
+        //                     <span className="-ml-1 circular-corners:rounded-2xl rounded-corners:rounded-sm 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 className="leading-none">
+        //                         {t(language, 'ai_chat_context_title')}
+        //                     </span>
+        //                     <Icon icon="question-circle" className="size-3 shrink-0" />
+        //                 </div>
+        //             </HoverCardTrigger>
+        //         </HoverCardRoot>
+        //         <Button
+        //             label={tString(language, 'send')}
+        //             size="medium"
+        //             className="ml-auto"
+        //             disabled={disabled || !value.trim()}
+        //             onClick={() => onSubmit(value)}
+        //         />
+        //     </div>
+        // </div>
     );
 }
diff --git a/packages/gitbook/src/components/primitives/Input.tsx b/packages/gitbook/src/components/primitives/Input.tsx
new file mode 100644
index 0000000000..8cbb12e95c
--- /dev/null
+++ b/packages/gitbook/src/components/primitives/Input.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { tString, useLanguage } from '@/intl/client';
+import { tcls } from '@/lib/tailwind';
+import { Icon, type IconName } from '@gitbook/icons';
+import React, { type ReactNode } from 'react';
+import { Button, type ButtonProps } from './Button';
+import { KeyboardShortcut } from './KeyboardShortcut';
+
+export type InputProps = {
+    label: string;
+    leading?: IconName | React.ReactNode;
+    trailing?: React.ReactNode;
+    /**
+     * When true, a submit button will be shown to the right of the input.
+     */
+    submitButton?: boolean | ButtonProps;
+    keyboardShortcut?: boolean | ReactNode;
+    onSubmit: (value: string | number | readonly string[] | undefined) => void;
+} & (
+    | (React.InputHTMLAttributes<HTMLInputElement> & { multiline?: false })
+    | (React.TextareaHTMLAttributes<HTMLTextAreaElement> & { multiline: true })
+);
+
+/**
+ * Input base component with core functionality and shared styles.
+ */
+export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
+    (props, passedRef) => {
+        const {
+            multiline,
+            value: initialValue,
+            leading,
+            trailing,
+            className,
+            submitButton,
+            label,
+            'aria-label': ariaLabel,
+            placeholder,
+            keyboardShortcut,
+            onSubmit,
+            onChange,
+            ...rest
+        } = props;
+
+        const [value, setValue] = React.useState(initialValue ?? '');
+        const internalRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+        const ref = passedRef ?? internalRef;
+
+        const language = useLanguage();
+        const hasValue = value.toString().trim();
+
+        React.useEffect(() => {
+            setValue(initialValue ?? '');
+        }, [initialValue]);
+
+        const handleClick = () => {
+            const element = internalRef.current;
+            if (element) {
+                element.focus();
+            }
+        };
+
+        const handleSubmit = () => {
+            if (hasValue) {
+                onSubmit(value);
+            }
+        };
+
+        const input = (
+            <input
+                className="peer grow resize-none overflow-visible outline-none placeholder:text-tint"
+                ref={ref as React.Ref<HTMLInputElement>}
+                value={value}
+                onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        handleSubmit();
+                    }
+                }}
+                onChange={(event) => {
+                    setValue(event.target.value);
+                    onChange?.(
+                        event as React.ChangeEvent<HTMLInputElement> &
+                            React.ChangeEvent<HTMLTextAreaElement>
+                    );
+                }}
+                aria-label={ariaLabel ?? label}
+                placeholder={placeholder ? placeholder : label}
+                {...(rest as React.InputHTMLAttributes<HTMLInputElement>)}
+            />
+        );
+
+        return (
+            <div
+                className={tcls(
+                    'relative flex max-h-64 min-h-min gap-2 overflow-auto circular-corners:rounded-3xl rounded-corners:rounded-xl border border-tint-subtle bg-tint-base p-3 transition-[outline,border] focus-within:outline-2 focus-within:outline-primary-hover hover:cursor-text hover:border-tint-hover',
+                    multiline ? 'resize-y flex-col' : 'flex-row',
+                    className
+                )}
+                onClick={handleClick}
+                onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        handleClick();
+                    }
+                }}
+            >
+                <div
+                    className={tcls('flex grow gap-2', multiline ? 'items-start' : 'items-center')}
+                >
+                    {leading ? (
+                        typeof leading === 'string' ? (
+                            <Icon icon={leading as IconName} className="my-0.5 size-4 shrink-0" />
+                        ) : (
+                            leading
+                        )
+                    ) : null}
+                    {multiline ? <textarea {...input.props} /> : input}
+                    {keyboardShortcut !== false ? (
+                        typeof keyboardShortcut === 'object' ? (
+                            keyboardShortcut
+                        ) : hasValue ? (
+                            <KeyboardShortcut keys={['ENTER']} />
+                        ) : null
+                    ) : null}
+                </div>
+                <div className="flex items-center gap-2">
+                    {trailing ? trailing : null}
+                    {submitButton ? (
+                        <Button
+                            variant="primary"
+                            size="medium"
+                            label={tString(language, 'submit')}
+                            onClick={handleSubmit}
+                            icon={multiline ? undefined : 'arrow-right'}
+                            disabled={!hasValue}
+                            iconOnly={!multiline}
+                            className="ml-auto"
+                            {...(typeof submitButton === 'object'
+                                ? { ...submitButton }
+                                : undefined)}
+                        />
+                    ) : null}
+                </div>
+            </div>
+        );
+    }
+);
diff --git a/packages/gitbook/src/components/primitives/KeyboardShortcut.tsx b/packages/gitbook/src/components/primitives/KeyboardShortcut.tsx
index 49705139ac..f6d9178e77 100644
--- a/packages/gitbook/src/components/primitives/KeyboardShortcut.tsx
+++ b/packages/gitbook/src/components/primitives/KeyboardShortcut.tsx
@@ -1,9 +1,13 @@
 'use client';
 
-import { type ClassValue, tcls } from '@/lib/tailwind';
+import { tcls } from '@/lib/tailwind';
 import { Icon } from '@gitbook/icons';
 import * as React from 'react';
 
+export type KeyboardShortcutProps = {
+    keys: string[];
+} & React.HTMLAttributes<HTMLDivElement>;
+
 function getOperatingSystem() {
     const platform = navigator.platform.toLowerCase();
 
@@ -13,7 +17,7 @@ function getOperatingSystem() {
     return 'win';
 }
 
-export function KeyboardShortcut(props: { keys: string[]; className?: ClassValue }) {
+export function KeyboardShortcut(props: KeyboardShortcutProps) {
     const { keys, className } = props;
 
     const [operatingSystem, setOperatingSystem] = React.useState<string | null>(null);

From 43eb4a33fbb46e8b19ea5dc825765f7f41f351f4 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Tue, 9 Dec 2025 18:40:52 +0100
Subject: [PATCH 02/17] First version, refactor AIChatInput

---
 .../src/components/AIChat/AIChatInput.tsx     | 117 ++----------------
 .../src/components/primitives/Input.tsx       |  46 ++++---
 2 files changed, 45 insertions(+), 118 deletions(-)

diff --git a/packages/gitbook/src/components/AIChat/AIChatInput.tsx b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
index 191c664ee3..4133dc3e72 100644
--- a/packages/gitbook/src/components/AIChat/AIChatInput.tsx
+++ b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
@@ -58,21 +58,28 @@ export function AIChatInput(props: {
 
     return (
         <Input
+            data-testid="ai-chat-input"
+            name="ai-chat-input"
             multiline
-            label="Assistant input"
+            label="Assistant chat input"
             placeholder={tString(language, 'ai_chat_input_placeholder')}
             onChange={handleInput}
             onSubmit={() => onSubmit(value)}
             value={value}
-            leading="magnifying-glass"
             submitButton={{
                 label: tString(language, 'send'),
             }}
+            className="animate-blur-in-slow bg-tint-base/9 backdrop-blur-lg contrast-more:bg-tint-base"
+            rows={1}
             keyboardShortcut={
-                <div className="peer-focus:hidden">
-                    <KeyboardShortcut keys={['mod', 'i']} className="bg-tint-base" />
-                </div>
+                !value && !disabled && !loading ? (
+                    <div className="group-focus-within/input:hidden">
+                        <KeyboardShortcut keys={['mod', 'i']} className="bg-tint-base" />
+                    </div>
+                ) : undefined
             }
+            disabled={disabled || loading}
+            aria-busy={loading}
             ref={inputRef}
             trailing={
                 <HoverCardRoot openDelay={500}>
@@ -102,7 +109,7 @@ export function AIChatInput(props: {
                         </div>
                     </HoverCard>
                     <HoverCardTrigger>
-                        <div className="-ml-2 flex cursor-help items-center gap-1 circular-corners:rounded-2xl rounded-corners:rounded-md px-2.5 py-1.5 text-tint/7 text-xs transition-all hover:bg-tint">
+                        <div className="flex cursor-help items-center gap-1 circular-corners:rounded-2xl rounded-corners:rounded-md px-2.5 py-1.5 text-tint/7 text-xs transition-all hover:bg-tint">
                             <span className="-ml-1 circular-corners:rounded-2xl rounded-corners:rounded-sm 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>{' '}
@@ -115,103 +122,5 @@ export function AIChatInput(props: {
                 </HoverCardRoot>
             }
         />
-        // <div className="depth-subtle:has-[textarea:focus]:-translate-y-px relative flex animate-blur-in-slow flex-col overflow-hidden circular-corners:rounded-3xl rounded-corners:rounded-xl bg-tint-base/9 depth-subtle:shadow-sm shadow-tint/6 ring-1 ring-tint-subtle backdrop-blur-lg transition-all depth-subtle:has-[textarea:focus]:shadow-lg has-[textarea:focus]:shadow-primary-subtle has-[textarea:focus]:ring-2 has-[textarea:focus]:ring-primary-hover contrast-more:bg-tint-base dark:shadow-tint-1">
-        //     {/* <textarea
-        //         ref={inputRef}
-        //         disabled={disabled || loading}
-        //         data-loading={loading}
-        //         data-testid="ai-chat-input"
-        //         className={tcls(
-        //             'resize-none',
-        //             'focus:outline-hidden',
-        //             'focus:ring-0',
-        //             'w-full',
-        //             'px-3',
-        //             'py-3',
-        //             'pb-12',
-        //             'h-auto',
-        //             'bg-transparent',
-        //             'peer',
-        //             'max-h-64',
-        //             'placeholder:text-tint/8',
-        //             'transition-colors',
-        //             'disabled:bg-tint-subtle',
-        //             'delay-300',
-        //             'disabled:delay-0',
-        //             'disabled:cursor-not-allowed',
-        //             'data-[loading=true]:cursor-progress',
-        //             'data-[loading=true]:opacity-50'
-        //         )}
-        //         value={value}
-        //         rows={1}
-        //         placeholder={tString(language, 'ai_chat_input_placeholder')}
-        //         onChange={handleInput}
-        //         onKeyDown={(event) => {
-        //             if (event.key === 'Escape') {
-        //                 event.preventDefault();
-        //                 event.currentTarget.blur();
-        //                 return;
-        //             }
-
-        //             if (event.key === 'Enter' && !event.shiftKey && value.trim()) {
-        //                 event.preventDefault();
-        //                 event.currentTarget.style.height = 'auto';
-        //                 onSubmit(value);
-        //             }
-        //         }}
-        //     /> */}
-        //     {/* {!disabled ? (
-        //         <div className="absolute top-2.5 right-3 animate-[fadeIn_0.2s_0.5s_ease-in-out_both] peer-focus:hidden">
-        //             <KeyboardShortcut keys={['mod', 'i']} className="bg-tint-base" />
-        //         </div>
-        //     ) : null} */}
-        //     <div className="absolute inset-x-0 bottom-0 flex items-center gap-2 px-2 py-2">
-        //         <HoverCardRoot openDelay={500}>
-        //             <HoverCard
-        //                 className="max-w-xs bg-tint p-2 text-sm text-tint"
-        //                 arrow={{ className: 'fill-tint-3' }}
-        //             >
-        //                 <div className="flex flex-col gap-3 p-2">
-        //                     <p className="font-semibold">
-        //                         {t(language, 'ai_chat_context_description')}
-        //                     </p>
-        //                     <ul className="flex flex-col gap-2">
-        //                         <li className="flex items-center gap-2">
-        //                             <Icon icon="memo" className="size-3.5 opacity-7" />
-        //                             {t(language, 'ai_chat_context_pages_youve_read')}
-        //                         </li>
-        //                         <li className="flex items-center gap-2">
-        //                             <Icon icon="user" className="size-3.5 opacity-7" />
-        //                             {t(language, 'ai_chat_context_info_provided_by_the_site')}
-        //                         </li>
-        //                         <li className="flex items-center gap-2">
-        //                             <Icon icon="message-question" className="size-3.5 opacity-7" />
-        //                             {t(language, 'ai_chat_context_previous_messages')}
-        //                         </li>
-        //                     </ul>
-        //                     <p>{t(language, 'ai_chat_context_disclaimer')}</p>
-        //                 </div>
-        //             </HoverCard>
-        //             <HoverCardTrigger>
-        //                 <div className="flex cursor-help items-center gap-1 circular-corners:rounded-2xl rounded-corners:rounded-md px-2.5 py-1.5 text-tint/7 text-xs transition-all hover:bg-tint">
-        //                     <span className="-ml-1 circular-corners:rounded-2xl rounded-corners:rounded-sm 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 className="leading-none">
-        //                         {t(language, 'ai_chat_context_title')}
-        //                     </span>
-        //                     <Icon icon="question-circle" className="size-3 shrink-0" />
-        //                 </div>
-        //             </HoverCardTrigger>
-        //         </HoverCardRoot>
-        //         <Button
-        //             label={tString(language, 'send')}
-        //             size="medium"
-        //             className="ml-auto"
-        //             disabled={disabled || !value.trim()}
-        //             onClick={() => onSubmit(value)}
-        //         />
-        //     </div>
-        // </div>
     );
 }
diff --git a/packages/gitbook/src/components/primitives/Input.tsx b/packages/gitbook/src/components/primitives/Input.tsx
index 8cbb12e95c..beb5537dd6 100644
--- a/packages/gitbook/src/components/primitives/Input.tsx
+++ b/packages/gitbook/src/components/primitives/Input.tsx
@@ -36,8 +36,10 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
             submitButton,
             label,
             'aria-label': ariaLabel,
+            'aria-busy': ariaBusy,
             placeholder,
             keyboardShortcut,
+            disabled,
             onSubmit,
             onChange,
             ...rest
@@ -64,20 +66,26 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
         const handleSubmit = () => {
             if (hasValue) {
                 onSubmit(value);
+                setValue('');
             }
         };
 
         const input = (
             <input
-                className="peer grow resize-none overflow-visible outline-none placeholder:text-tint"
+                className="peer -m-2 max-h-64 grow resize-none p-3 outline-none placeholder:text-tint/8 aria-busy:cursor-progress"
                 ref={ref as React.Ref<HTMLInputElement>}
                 value={value}
                 onKeyDown={(event) => {
-                    if (event.key === 'Enter') {
+                    if (event.key === 'Enter' && !event.shiftKey && value.toString().trim()) {
                         event.preventDefault();
                         handleSubmit();
                     }
+                    if (event.key === 'Escape') {
+                        event.preventDefault();
+                        event.currentTarget.blur();
+                    }
                 }}
+                aria-busy={ariaBusy}
                 onChange={(event) => {
                     setValue(event.target.value);
                     onChange?.(
@@ -87,6 +95,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                 }}
                 aria-label={ariaLabel ?? label}
                 placeholder={placeholder ? placeholder : label}
+                disabled={disabled}
                 {...(rest as React.InputHTMLAttributes<HTMLInputElement>)}
             />
         );
@@ -94,8 +103,13 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
         return (
             <div
                 className={tcls(
-                    'relative flex max-h-64 min-h-min gap-2 overflow-auto circular-corners:rounded-3xl rounded-corners:rounded-xl border border-tint-subtle bg-tint-base p-3 transition-[outline,border] focus-within:outline-2 focus-within:outline-primary-hover hover:cursor-text hover:border-tint-hover',
-                    multiline ? 'resize-y flex-col' : 'flex-row',
+                    'group/input relative flex min-h-min gap-2 overflow-hidden circular-corners:rounded-3xl rounded-corners:rounded-xl border border-tint-subtle bg-tint-base p-2 shadow-tint/6 ring-primary-hover transition-all dark:shadow-tint-1',
+                    'depth-subtle:focus-within:-translate-y-px depth-subtle:shadow-sm depth-subtle:focus-within:shadow-lg',
+                    disabled
+                        ? 'cursor-not-allowed border-tint-subtle bg-tint-subtle'
+                        : 'focus-within:shadow-primary-subtle focus-within:ring-2 hover:cursor-text hover:border-tint-hover',
+                    multiline ? 'flex-col' : 'flex-row',
+                    ariaBusy ? 'cursor-progress' : '',
                     className
                 )}
                 onClick={handleClick}
@@ -105,9 +119,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                     }
                 }}
             >
-                <div
-                    className={tcls('flex grow gap-2', multiline ? 'items-start' : 'items-center')}
-                >
+                <div className={tcls('flex grow gap-2', multiline ? '' : 'items-center')}>
                     {leading ? (
                         typeof leading === 'string' ? (
                             <Icon icon={leading as IconName} className="my-0.5 size-4 shrink-0" />
@@ -116,13 +128,19 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                         )
                     ) : null}
                     {multiline ? <textarea {...input.props} /> : input}
-                    {keyboardShortcut !== false ? (
-                        typeof keyboardShortcut === 'object' ? (
-                            keyboardShortcut
-                        ) : hasValue ? (
-                            <KeyboardShortcut keys={['ENTER']} />
-                        ) : null
-                    ) : null}
+
+                    <div className={multiline ? 'absolute top-2.5 right-2.5' : ''}>
+                        {keyboardShortcut !== false ? (
+                            typeof keyboardShortcut === 'object' ? (
+                                keyboardShortcut
+                            ) : hasValue ? (
+                                <KeyboardShortcut
+                                    keys={['ENTER']}
+                                    className="hidden group-focus-within/input:block"
+                                />
+                            ) : null
+                        ) : null}
+                    </div>
                 </div>
                 <div className="flex items-center gap-2">
                     {trailing ? trailing : null}

From ec84a219f330d1323c0e9f0ee04f697160061ed5 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Wed, 10 Dec 2025 13:55:14 +0100
Subject: [PATCH 03/17] Use in SearchInput and PageFeedbackForm

---
 .../src/components/AIChat/AIChatInput.tsx     |  12 +-
 .../PageFeedback/PageFeedbackForm.tsx         |  55 ++---
 .../src/components/Search/SearchInput.tsx     | 109 +++-------
 .../Search/useSearchResultsCursor.ts          |  15 +-
 .../src/components/primitives/Input.tsx       | 188 ++++++++++++++----
 .../primitives/KeyboardShortcut.tsx           |   2 +-
 6 files changed, 205 insertions(+), 176 deletions(-)

diff --git a/packages/gitbook/src/components/AIChat/AIChatInput.tsx b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
index 4133dc3e72..3340ff5e2e 100644
--- a/packages/gitbook/src/components/AIChat/AIChatInput.tsx
+++ b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
@@ -24,15 +24,6 @@ export function AIChatInput(props: {
 
     const inputRef = useRef<HTMLTextAreaElement>(null);
 
-    const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        const textarea = event.currentTarget;
-        onChange(textarea.value);
-
-        // Auto-resize
-        textarea.style.height = 'auto';
-        textarea.style.height = `${textarea.scrollHeight}px`;
-    };
-
     useEffect(() => {
         if (chat.opened && !disabled && !loading) {
             // Add a small delay to ensure the input is rendered before focusing
@@ -61,9 +52,10 @@ export function AIChatInput(props: {
             data-testid="ai-chat-input"
             name="ai-chat-input"
             multiline
+            resize
             label="Assistant chat input"
             placeholder={tString(language, 'ai_chat_input_placeholder')}
-            onChange={handleInput}
+            onChange={(event) => onChange(event.target.value)}
             onSubmit={() => onSubmit(value)}
             value={value}
             submitButton={{
diff --git a/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx b/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx
index 8b70fd78cd..408eeb9e46 100644
--- a/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx
+++ b/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx
@@ -6,10 +6,11 @@ import React, { type ButtonHTMLAttributes } from 'react';
 import { useLanguage } from '@/intl/client';
 import { t, tString } from '@/intl/translate';
 import { tcls } from '@/lib/tailwind';
-
 import { useTrackEvent } from '../Insights';
 import { Button, ButtonGroup } from '../primitives';
+import { Input } from '../primitives/Input';
 
+const MIN_COMMENT_LENGTH = 3;
 const MAX_COMMENT_LENGTH = 512;
 
 /**
@@ -24,7 +25,6 @@ export function PageFeedbackForm(props: {
     const trackEvent = useTrackEvent();
     const inputRef = React.useRef<HTMLTextAreaElement>(null);
     const [rating, setRating] = React.useState<PageFeedbackRating>();
-    const [comment, setComment] = React.useState('');
     const [submitted, setSubmitted] = React.useState(false);
 
     const onSubmitRating = (rating: PageFeedbackRating) => {
@@ -86,43 +86,20 @@ export function PageFeedbackForm(props: {
                 </ButtonGroup>
             </div>
             {rating ? (
-                <div className="flex flex-col gap-2">
-                    {!submitted ? (
-                        <>
-                            <textarea
-                                ref={inputRef}
-                                name="comment"
-                                className="mx-0.5 max-h-40 min-h-16 grow rounded-sm straight-corners:rounded-none bg-tint-base p-2 ring-1 ring-tint ring-inset placeholder:text-sm placeholder:text-tint contrast-more:ring-tint-12 contrast-more:placeholder:text-tint-strong"
-                                placeholder={tString(languages, 'was_this_helpful_comment')}
-                                aria-label={tString(languages, 'was_this_helpful_comment')}
-                                onChange={(e) => setComment(e.target.value)}
-                                value={comment}
-                                rows={3}
-                                maxLength={MAX_COMMENT_LENGTH}
-                            />
-                            <div className="flex items-center justify-between gap-4">
-                                <Button
-                                    size="small"
-                                    onClick={() => onSubmitComment(rating, comment)}
-                                    label={tString(languages, 'submit')}
-                                />
-                                {comment.length > MAX_COMMENT_LENGTH * 0.8 ? (
-                                    <span
-                                        className={
-                                            comment.length === MAX_COMMENT_LENGTH
-                                                ? 'text-red-500'
-                                                : ''
-                                        }
-                                    >
-                                        {comment.length} / {MAX_COMMENT_LENGTH}
-                                    </span>
-                                ) : null}
-                            </div>
-                        </>
-                    ) : (
-                        <p>{t(languages, 'was_this_helpful_thank_you')}</p>
-                    )}
-                </div>
+                <Input
+                    label={tString(languages, 'was_this_helpful_comment')}
+                    multiline
+                    submitButton
+                    rows={3}
+                    name="page-feedback-comment"
+                    onSubmit={(comment) => onSubmitComment(rating, comment as string)}
+                    maxLength={MAX_COMMENT_LENGTH}
+                    minLength={MIN_COMMENT_LENGTH}
+                    disabled={submitted}
+                    submitMessage={tString(languages, 'was_this_helpful_thank_you')}
+                    className="animate-blur-in"
+                    resize
+                />
             ) : null}
         </div>
     );
diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx
index 92e18a4e69..8f9987fa0b 100644
--- a/packages/gitbook/src/components/Search/SearchInput.tsx
+++ b/packages/gitbook/src/components/Search/SearchInput.tsx
@@ -1,13 +1,9 @@
 'use client';
-import React from 'react';
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { tString, useLanguage } from '@/intl/client';
-import { tcls } from '@/lib/tailwind';
-import { Icon } from '@gitbook/icons';
-import { Button, variantClasses } from '../primitives';
+import { Input } from '../primitives/Input';
 import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
-import { useClassnames } from '../primitives/StyleProvider';
 
 interface SearchInputProps {
     onChange: (value: string) => void;
@@ -20,14 +16,11 @@ interface SearchInputProps {
     children?: React.ReactNode;
 }
 
-// Size classes for medium size button
-const sizeClasses = ['text-sm', 'px-3.5', 'py-1.5', '@2xl:circular-corners:px-4'];
-
 /**
  * Input to trigger search.
  */
 export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
-    function SearchInput(props, ref) {
+    function SearchInput(props, containerRef) {
         const {
             onChange,
             onKeyDown,
@@ -42,7 +35,6 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
         const inputRef = useRef<HTMLInputElement>(null);
 
         const language = useLanguage();
-        const buttonStyles = useClassnames(['ButtonStyles']);
 
         useEffect(() => {
             if (isOpen) {
@@ -58,75 +50,32 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
         }, [isOpen, value]);
 
         return (
-            <div className={tcls('relative flex size-9 grow', className)}>
-                {/* biome-ignore lint/a11y/useKeyWithClickEvents: this div needs an onClick to show the input on mobile, where it's normally hidden.
-                Normally you'd also need to add a keyboard trigger to do the same without a pointer, but in this case the input already be focused on its own. */}
-                <div
-                    ref={ref}
-                    onClick={onFocus}
-                    className={tcls(
-                        // Apply button styles
-                        buttonStyles,
-                        variantClasses.header,
-                        sizeClasses,
-                        // Additional custom styles
-                        'has-[input:focus]:-translate-y-px h-9 grow @2xl:cursor-text cursor-pointer px-2.5 has-[input:focus]:bg-tint-base has-[input:focus]:depth-subtle:shadow-lg has-[input:focus]:depth-subtle:shadow-primary-subtle has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-primary-hover',
-                        'theme-bold:border-header-link/3 has-[input:focus-visible]:theme-bold:border-header-link/5 has-[input:focus-visible]:theme-bold:bg-header-link/3 has-[input:focus-visible]:theme-bold:ring-header-link/5',
-                        'theme-bold:before:absolute theme-bold:before:inset-0 theme-bold:before:bg-header-background/7 theme-bold:before:backdrop-blur-xl ', // Special overlay to make the transparent colors of theme-bold visible.
-                        '@max-2xl:absolute relative @max-2xl:right-0 z-30 max-w-none shrink grow justify-start',
-                        isOpen ? '@max-2xl:w-56' : '@max-2xl:w-[38px]'
-                    )}
-                >
-                    {value && isOpen ? (
-                        <Button
-                            variant="blank"
-                            label={tString(language, 'clear')}
-                            size="medium"
-                            iconOnly
-                            icon="circle-xmark"
-                            className="-ml-1.5 -mr-1 animate-scale-in px-1.5 theme-bold:text-header-link theme-bold:hover:bg-header-link/3"
-                            onClick={() => {
-                                onChange('');
-                                inputRef.current?.focus();
-                            }}
-                        />
-                    ) : (
-                        <Icon
-                            icon="magnifying-glass"
-                            className="size-4 shrink-0 animate-scale-in"
-                        />
-                    )}
-                    {children}
-                    <input
-                        {...rest}
-                        type="text"
-                        onFocus={onFocus}
-                        onKeyDown={onKeyDown}
-                        onChange={(event) => onChange(event.target.value)}
-                        value={value}
-                        // We only show "search or ask" if the search input actually handles both search and ask.
-                        placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
-                        maxLength={512}
-                        size={10}
-                        data-testid="search-input"
-                        className={tcls(
-                            'peer z-10 min-w-0 grow bg-transparent py-0.5 text-tint-strong theme-bold:text-header-link outline-hidden transition-[width] duration-300 contain-paint placeholder:text-tint theme-bold:placeholder:text-current theme-bold:placeholder:opacity-7',
-                            isOpen ? '' : '@max-2xl:opacity-0'
-                        )}
-                        role="combobox"
-                        autoComplete="off"
-                        aria-autocomplete="list"
-                        aria-haspopup="listbox"
-                        aria-expanded={value && isOpen ? 'true' : 'false'}
-                        // Forward
-                        ref={inputRef}
-                    />
-                    <KeyboardShortcut
-                        keys={isOpen ? ['esc'] : ['mod', 'k']}
-                        className="last:-mr-1 theme-bold:border-header-link/5 theme-bold:bg-header-background theme-bold:text-header-link"
-                    />
-                </div>
-            </div>
+            <Input
+                data-testid="search-input"
+                name="search-input"
+                ref={inputRef}
+                containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
+                sizing="small"
+                label={tString(language, withAI ? 'search_or_ask' : 'search')}
+                className="grow"
+                placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
+                onFocus={onFocus}
+                onKeyDown={onKeyDown}
+                leading="magnifying-glass"
+                onChange={(event) => {
+                    onChange(event.target.value);
+                }}
+                value={value}
+                maxLength={512}
+                autoComplete="off"
+                aria-autocomplete="list"
+                aria-haspopup="listbox"
+                aria-expanded={value && isOpen ? 'true' : 'false'}
+                clearButton
+                keyboardShortcut={<KeyboardShortcut keys={isOpen ? ['esc'] : ['mod', 'k']} />}
+                {...rest}
+                type="text"
+            />
         );
     }
 );
diff --git a/packages/gitbook/src/components/Search/useSearchResultsCursor.ts b/packages/gitbook/src/components/Search/useSearchResultsCursor.ts
index db369c0f63..fe9d6a27ac 100644
--- a/packages/gitbook/src/components/Search/useSearchResultsCursor.ts
+++ b/packages/gitbook/src/components/Search/useSearchResultsCursor.ts
@@ -12,12 +12,15 @@ export function useSearchResultsCursor(props: { query: string; results: ResultTy
         }
     }, [query]);
 
-    React.useEffect(() => {
-        if (results.length > 0) {
-            // Auto-focus the first result
-            setCursor(0);
-        }
-    }, [results]);
+    // TODO: `results` is getting updated too often, causing the cursor to reset to 0 for every render.
+    // Reimplement this once we have fixed that issue.
+
+    // React.useEffect(() => {
+    //     if (results.length > 0) {
+    //         // Auto-focus the first result
+    //         setCursor(0);
+    //     }
+    // }, [results]);
 
     const moveBy = React.useCallback(
         (delta: number) => {
diff --git a/packages/gitbook/src/components/primitives/Input.tsx b/packages/gitbook/src/components/primitives/Input.tsx
index beb5537dd6..c5240c42b9 100644
--- a/packages/gitbook/src/components/primitives/Input.tsx
+++ b/packages/gitbook/src/components/primitives/Input.tsx
@@ -11,17 +11,45 @@ export type InputProps = {
     label: string;
     leading?: IconName | React.ReactNode;
     trailing?: React.ReactNode;
+    sizing?: 'small' | 'medium'; // The `size` prop is already taken by the HTML input element.
+    containerRef?: React.RefObject<HTMLDivElement | null>;
     /**
-     * When true, a submit button will be shown to the right of the input.
+     * A submit button, shown to the right of the input.
      */
     submitButton?: boolean | ButtonProps;
+    /**
+     * A message to be shown to the right of the input when the value has been submitted.
+     */
+    submitMessage?: string | ReactNode;
+    /**
+     * A clear button, shown to the left of the input.
+     */
+    clearButton?: boolean | ButtonProps;
+    /**
+     * A keyboard shortcut, shown to the right of the input.
+     */
     keyboardShortcut?: boolean | ReactNode;
-    onSubmit: (value: string | number | readonly string[] | undefined) => void;
+
+    onSubmit?: (value: string | number | readonly string[] | undefined) => void;
+    resize?: boolean;
 } & (
     | (React.InputHTMLAttributes<HTMLInputElement> & { multiline?: false })
     | (React.TextareaHTMLAttributes<HTMLTextAreaElement> & { multiline: true })
 );
 
+type HybridInputElement = HTMLInputElement & HTMLTextAreaElement;
+
+const SIZE_CLASSES = {
+    small: {
+        container: 'p-2 circular-corners:rounded-3xl rounded-corners:rounded-lg',
+        input: '-m-2 p-2',
+    },
+    medium: {
+        container: 'p-2 circular-corners:rounded-3xl rounded-corners:rounded-xl',
+        input: '-m-2 p-3',
+    },
+};
+
 /**
  * Input base component with core functionality and shared styles.
  */
@@ -30,10 +58,13 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
         const {
             multiline,
             value: initialValue,
+            sizing = 'medium',
             leading,
             trailing,
             className,
+            clearButton,
             submitButton,
+            submitMessage,
             label,
             'aria-label': ariaLabel,
             'aria-busy': ariaBusy,
@@ -42,37 +73,64 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
             disabled,
             onSubmit,
             onChange,
+            onKeyDown,
+            containerRef,
+            maxLength,
+            minLength,
+            resize = false,
             ...rest
         } = props;
 
         const [value, setValue] = React.useState(initialValue ?? '');
-        const internalRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);
-        const ref = passedRef ?? internalRef;
+        const [submitted, setSubmitted] = React.useState(false);
+        const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+        const ref = passedRef ?? inputRef;
 
         const language = useLanguage();
         const hasValue = value.toString().trim();
+        const hasValidValue =
+            hasValue &&
+            (maxLength ? value.toString().length <= maxLength : true) &&
+            (minLength ? value.toString().length >= minLength : true);
 
         React.useEffect(() => {
             setValue(initialValue ?? '');
         }, [initialValue]);
 
+        const handleChange = (event: React.ChangeEvent<HybridInputElement>) => {
+            setValue(event.target.value);
+            onChange?.(event);
+
+            // Auto-resize
+            if (multiline && resize && 'current' in ref && ref.current) {
+                ref.current.style.height = 'auto';
+                ref.current.style.height = `${ref.current.scrollHeight}px`;
+            }
+        };
+
         const handleClick = () => {
-            const element = internalRef.current;
+            if (!('current' in ref)) return;
+
+            const element = ref.current;
             if (element) {
                 element.focus();
             }
         };
 
         const handleSubmit = () => {
-            if (hasValue) {
+            if (hasValue && onSubmit) {
                 onSubmit(value);
-                setValue('');
+                setSubmitted(true);
             }
         };
 
         const input = (
             <input
-                className="peer -m-2 max-h-64 grow resize-none p-3 outline-none placeholder:text-tint/8 aria-busy:cursor-progress"
+                className={tcls(
+                    'peer -m-2 max-h-64 grow resize-none text-left outline-none placeholder:text-tint/8 aria-busy:cursor-progress',
+                    SIZE_CLASSES[sizing].input
+                )}
+                type="text"
                 ref={ref as React.Ref<HTMLInputElement>}
                 value={value}
                 onKeyDown={(event) => {
@@ -84,18 +142,15 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                         event.preventDefault();
                         event.currentTarget.blur();
                     }
+                    onKeyDown?.(event as React.KeyboardEvent<HybridInputElement>);
                 }}
                 aria-busy={ariaBusy}
-                onChange={(event) => {
-                    setValue(event.target.value);
-                    onChange?.(
-                        event as React.ChangeEvent<HTMLInputElement> &
-                            React.ChangeEvent<HTMLTextAreaElement>
-                    );
-                }}
+                onChange={handleChange}
                 aria-label={ariaLabel ?? label}
                 placeholder={placeholder ? placeholder : label}
                 disabled={disabled}
+                maxLength={maxLength}
+                minLength={minLength}
                 {...(rest as React.InputHTMLAttributes<HTMLInputElement>)}
             />
         );
@@ -103,13 +158,14 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
         return (
             <div
                 className={tcls(
-                    'group/input relative flex min-h-min gap-2 overflow-hidden circular-corners:rounded-3xl rounded-corners:rounded-xl border border-tint-subtle bg-tint-base p-2 shadow-tint/6 ring-primary-hover transition-all dark:shadow-tint-1',
+                    'group/input relative flex min-h-min gap-2 overflow-hidden border border-tint bg-tint-base shadow-tint/6 ring-primary-hover transition-all dark:shadow-tint-1',
                     'depth-subtle:focus-within:-translate-y-px depth-subtle:shadow-sm depth-subtle:focus-within:shadow-lg',
                     disabled
                         ? 'cursor-not-allowed border-tint-subtle bg-tint-subtle'
-                        : 'focus-within:shadow-primary-subtle focus-within:ring-2 hover:cursor-text hover:border-tint-hover',
+                        : 'focus-within:border-primary-hover focus-within:shadow-primary-subtle focus-within:ring-2 hover:cursor-text hover:border-tint-hover focus-within:hover:border-primary-hover',
                     multiline ? 'flex-col' : 'flex-row',
                     ariaBusy ? 'cursor-progress' : '',
+                    SIZE_CLASSES[sizing].container,
                     className
                 )}
                 onClick={handleClick}
@@ -118,48 +174,100 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                         handleClick();
                     }
                 }}
+                ref={containerRef}
             >
-                <div className={tcls('flex grow gap-2', multiline ? '' : 'items-center')}>
+                <div
+                    className={tcls('flex grow gap-2', multiline ? 'items-start' : 'items-center')}
+                >
                     {leading ? (
                         typeof leading === 'string' ? (
-                            <Icon icon={leading as IconName} className="my-0.5 size-4 shrink-0" />
+                            <Icon
+                                icon={leading as IconName}
+                                className={tcls(
+                                    'ml-1 size-4 shrink-0 text-tint',
+                                    multiline ? 'my-1.5' : 'my-0.5',
+                                    clearButton && hasValue ? 'group-focus-within/input:hidden' : ''
+                                )}
+                            />
                         ) : (
                             leading
                         )
                     ) : null}
+                    {clearButton ? (
+                        <Button
+                            variant="blank"
+                            size="medium"
+                            label={tString(language, 'clear')}
+                            iconOnly
+                            icon="circle-xmark"
+                            className={tcls(
+                                '-m-1 -ml-0.5 hidden shrink-0 animate-fade-in p-1.5 text-tint',
+                                multiline ? 'mt-0.5' : '',
+                                hasValue ? 'group-focus-within/input:flex' : ''
+                            )}
+                            onClick={() => {
+                                setValue('');
+                            }}
+                        />
+                    ) : null}
                     {multiline ? <textarea {...input.props} /> : input}
 
                     <div className={multiline ? 'absolute top-2.5 right-2.5' : ''}>
                         {keyboardShortcut !== false ? (
                             typeof keyboardShortcut === 'object' ? (
                                 keyboardShortcut
-                            ) : hasValue ? (
+                            ) : onSubmit && !submitted && hasValue ? (
                                 <KeyboardShortcut
-                                    keys={['ENTER']}
-                                    className="hidden group-focus-within/input:block"
+                                    keys={['enter']}
+                                    className="hidden bg-tint-base group-focus-within/input:flex"
                                 />
                             ) : null
                         ) : null}
                     </div>
                 </div>
-                <div className="flex items-center gap-2">
-                    {trailing ? trailing : null}
-                    {submitButton ? (
-                        <Button
-                            variant="primary"
-                            size="medium"
-                            label={tString(language, 'submit')}
-                            onClick={handleSubmit}
-                            icon={multiline ? undefined : 'arrow-right'}
-                            disabled={!hasValue}
-                            iconOnly={!multiline}
-                            className="ml-auto"
-                            {...(typeof submitButton === 'object'
-                                ? { ...submitButton }
-                                : undefined)}
-                        />
-                    ) : null}
-                </div>
+                {trailing || submitButton || maxLength ? (
+                    <div className="flex items-center gap-2">
+                        {trailing ? trailing : null}
+                        {maxLength && !submitted && value.toString().length > maxLength * 0.8 ? (
+                            <span
+                                className={tcls(
+                                    'animate-fade-in text-xs',
+                                    value.toString().length >= maxLength
+                                        ? 'text-danger-subtle'
+                                        : 'text-tint-subtle'
+                                )}
+                            >
+                                {value.toString().length} / {maxLength}
+                            </span>
+                        ) : null}
+                        {submitted ? (
+                            submitMessage ? (
+                                typeof submitMessage === 'string' ? (
+                                    <div className="ml-auto flex animate-fade-in items-center gap-1 p-1.5 text-success-subtle">
+                                        <Icon icon="check-circle" className="size-4" />
+                                        {submitMessage}
+                                    </div>
+                                ) : (
+                                    submitMessage
+                                )
+                            ) : null
+                        ) : submitButton ? (
+                            <Button
+                                variant="primary"
+                                size="medium"
+                                label={tString(language, 'submit')}
+                                onClick={handleSubmit}
+                                icon={multiline ? undefined : 'arrow-right'}
+                                disabled={disabled || !hasValidValue}
+                                iconOnly={!multiline}
+                                className="ml-auto"
+                                {...(typeof submitButton === 'object'
+                                    ? { ...submitButton }
+                                    : undefined)}
+                            />
+                        ) : null}
+                    </div>
+                ) : null}
             </div>
         );
     }
diff --git a/packages/gitbook/src/components/primitives/KeyboardShortcut.tsx b/packages/gitbook/src/components/primitives/KeyboardShortcut.tsx
index f6d9178e77..a6104bf730 100644
--- a/packages/gitbook/src/components/primitives/KeyboardShortcut.tsx
+++ b/packages/gitbook/src/components/primitives/KeyboardShortcut.tsx
@@ -45,7 +45,7 @@ export function KeyboardShortcut(props: KeyboardShortcutProps) {
                         break;
 
                     case 'enter':
-                        element = <Icon icon="arrow-turn-down-left" className="size-[.75em]" />;
+                        element = <Icon icon="arrow-turn-down-left" className="size-[.9em]" />;
                         break;
                 }
                 return (

From d943ddcfbcd32be76aee749e90183e41d232d92e Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Wed, 10 Dec 2025 14:50:19 +0100
Subject: [PATCH 04/17] Tweaks

---
 .../DocumentView/Integration/contentkit.css   |  6 +-
 .../PageFeedback/PageFeedbackForm.tsx         |  3 +-
 .../src/components/Search/SearchInput.tsx     | 56 ++++++++++---------
 .../src/components/primitives/Input.tsx       |  9 ++-
 .../src/components/primitives/index.ts        |  1 +
 5 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/packages/gitbook/src/components/DocumentView/Integration/contentkit.css b/packages/gitbook/src/components/DocumentView/Integration/contentkit.css
index 9002303ea0..818ea4da40 100644
--- a/packages/gitbook/src/components/DocumentView/Integration/contentkit.css
+++ b/packages/gitbook/src/components/DocumentView/Integration/contentkit.css
@@ -156,8 +156,10 @@
 
 /** Text input */
 .contentkit-textinput {
-    @apply w-full rounded border border-tint text-tint-strong placeholder:text-tint flex resize-none flex-1 px-2 py-1.5 text-sm bg-transparent whitespace-pre-line;
-    @apply focus:outline-primary focus:border-primary;
+    @apply w-full circular-corners:rounded-3xl ring-primary-hover rounded-corners:rounded-lg border border-tint text-tint-strong transition-all placeholder:text-tint/8 flex resize-none flex-1 px-2 py-1.5 text-sm bg-tint-base whitespace-pre-line;
+    @apply shadow-tint/6 depth-subtle:focus-within:-translate-y-px depth-subtle:shadow-sm depth-subtle:focus-within:shadow-lg dark:shadow-tint-1;
+    @apply focus:border-primary-hover focus:shadow-primary-subtle focus:ring-2 hover:border-tint-hover focus:hover:border-primary-hover;
+    @apply disabled:cursor-not-allowed disabled:border-tint-subtle disabled:bg-tint-subtle;
 }
 
 /** Form */
diff --git a/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx b/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx
index 408eeb9e46..e937f30c51 100644
--- a/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx
+++ b/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx
@@ -7,8 +7,7 @@ import { useLanguage } from '@/intl/client';
 import { t, tString } from '@/intl/translate';
 import { tcls } from '@/lib/tailwind';
 import { useTrackEvent } from '../Insights';
-import { Button, ButtonGroup } from '../primitives';
-import { Input } from '../primitives/Input';
+import { Button, ButtonGroup, Input } from '../primitives';
 
 const MIN_COMMENT_LENGTH = 3;
 const MAX_COMMENT_LENGTH = 512;
diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx
index 8f9987fa0b..d9996ce6dc 100644
--- a/packages/gitbook/src/components/Search/SearchInput.tsx
+++ b/packages/gitbook/src/components/Search/SearchInput.tsx
@@ -2,7 +2,7 @@
 import React, { useEffect, useRef } from 'react';
 
 import { tString, useLanguage } from '@/intl/client';
-import { Input } from '../primitives/Input';
+import { Input } from '../primitives';
 import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
 
 interface SearchInputProps {
@@ -50,32 +50,34 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
         }, [isOpen, value]);
 
         return (
-            <Input
-                data-testid="search-input"
-                name="search-input"
-                ref={inputRef}
-                containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
-                sizing="small"
-                label={tString(language, withAI ? 'search_or_ask' : 'search')}
-                className="grow"
-                placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
-                onFocus={onFocus}
-                onKeyDown={onKeyDown}
-                leading="magnifying-glass"
-                onChange={(event) => {
-                    onChange(event.target.value);
-                }}
-                value={value}
-                maxLength={512}
-                autoComplete="off"
-                aria-autocomplete="list"
-                aria-haspopup="listbox"
-                aria-expanded={value && isOpen ? 'true' : 'false'}
-                clearButton
-                keyboardShortcut={<KeyboardShortcut keys={isOpen ? ['esc'] : ['mod', 'k']} />}
-                {...rest}
-                type="text"
-            />
+            <div className="relative flex @max-2xl:size-10 grow">
+                <Input
+                    data-testid="search-input"
+                    name="search-input"
+                    ref={inputRef}
+                    containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
+                    sizing="small"
+                    label={tString(language, withAI ? 'search_or_ask' : 'search')}
+                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-10 grow @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11"
+                    placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
+                    onFocus={onFocus}
+                    onKeyDown={onKeyDown}
+                    leading="magnifying-glass"
+                    onChange={(event) => {
+                        onChange(event.target.value);
+                    }}
+                    value={value}
+                    maxLength={512}
+                    autoComplete="off"
+                    aria-autocomplete="list"
+                    aria-haspopup="listbox"
+                    aria-expanded={value && isOpen ? 'true' : 'false'}
+                    clearButton
+                    keyboardShortcut={<KeyboardShortcut keys={isOpen ? ['esc'] : ['mod', 'k']} />}
+                    {...rest}
+                    type="text"
+                />
+            </div>
         );
     }
 );
diff --git a/packages/gitbook/src/components/primitives/Input.tsx b/packages/gitbook/src/components/primitives/Input.tsx
index c5240c42b9..299eb4cf68 100644
--- a/packages/gitbook/src/components/primitives/Input.tsx
+++ b/packages/gitbook/src/components/primitives/Input.tsx
@@ -133,6 +133,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                 type="text"
                 ref={ref as React.Ref<HTMLInputElement>}
                 value={value}
+                size={1} // This will make the input have the smallest possible width (1 character) so we can grow it with flexbox
                 onKeyDown={(event) => {
                     if (event.key === 'Enter' && !event.shiftKey && value.toString().trim()) {
                         event.preventDefault();
@@ -206,7 +207,11 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                                 hasValue ? 'group-focus-within/input:flex' : ''
                             )}
                             onClick={() => {
-                                setValue('');
+                                handleChange({
+                                    target: {
+                                        value: '',
+                                    },
+                                } as React.ChangeEvent<HybridInputElement>);
                             }}
                         />
                     ) : null}
@@ -226,7 +231,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                     </div>
                 </div>
                 {trailing || submitButton || maxLength ? (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 empty:hidden">
                         {trailing ? trailing : null}
                         {maxLength && !submitted && value.toString().length > maxLength * 0.8 ? (
                             <span
diff --git a/packages/gitbook/src/components/primitives/index.ts b/packages/gitbook/src/components/primitives/index.ts
index 83e4ac69ed..74927a29b9 100644
--- a/packages/gitbook/src/components/primitives/index.ts
+++ b/packages/gitbook/src/components/primitives/index.ts
@@ -13,3 +13,4 @@ export * from './Popover';
 export * from './LoadingStateProvider';
 export * from './HoverCard';
 export * from './DropdownMenu';
+export * from './Input';

From 58f49448cb4e9a21fbd45dbf512a234997fa2f62 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Wed, 10 Dec 2025 15:47:15 +0100
Subject: [PATCH 05/17] Sizing & bold theme

---
 .../gitbook/src/components/AIChat/AIChatInput.tsx     |  1 +
 .../src/components/PageFeedback/PageFeedbackForm.tsx  |  1 +
 .../gitbook/src/components/Search/SearchInput.tsx     | 11 ++++++++---
 packages/gitbook/src/components/primitives/Input.tsx  |  8 ++++----
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/gitbook/src/components/AIChat/AIChatInput.tsx b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
index 3340ff5e2e..0acf73f188 100644
--- a/packages/gitbook/src/components/AIChat/AIChatInput.tsx
+++ b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
@@ -53,6 +53,7 @@ export function AIChatInput(props: {
             name="ai-chat-input"
             multiline
             resize
+            sizing="large"
             label="Assistant chat input"
             placeholder={tString(language, 'ai_chat_input_placeholder')}
             onChange={(event) => onChange(event.target.value)}
diff --git a/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx b/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx
index e937f30c51..5ea6e8b3b2 100644
--- a/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx
+++ b/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx
@@ -86,6 +86,7 @@ export function PageFeedbackForm(props: {
             </div>
             {rating ? (
                 <Input
+                    ref={inputRef}
                     label={tString(languages, 'was_this_helpful_comment')}
                     multiline
                     submitButton
diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx
index d9996ce6dc..f0457c1cbd 100644
--- a/packages/gitbook/src/components/Search/SearchInput.tsx
+++ b/packages/gitbook/src/components/Search/SearchInput.tsx
@@ -56,9 +56,9 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     name="search-input"
                     ref={inputRef}
                     containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
-                    sizing="small"
+                    sizing="medium"
                     label={tString(language, withAI ? 'search_or_ask' : 'search')}
-                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-10 grow @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11"
+                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-10 grow theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link theme-bold:shadow-none! @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] theme-bold:focus-within:border-header-link/6 theme-bold:focus-within:bg-header-link/1 theme-bold:focus-within:ring-header-link/5 theme-bold:hover:border-header-link/5 theme-bold:hover:bg-header-link/1 @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 theme-bold:[&_input]:placeholder:text-header-link/8 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11 theme-bold:[&_svg]:text-header-link/8"
                     placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
                     onFocus={onFocus}
                     onKeyDown={onKeyDown}
@@ -73,7 +73,12 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     aria-haspopup="listbox"
                     aria-expanded={value && isOpen ? 'true' : 'false'}
                     clearButton
-                    keyboardShortcut={<KeyboardShortcut keys={isOpen ? ['esc'] : ['mod', 'k']} />}
+                    keyboardShortcut={
+                        <KeyboardShortcut
+                            className="theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link"
+                            keys={isOpen ? ['esc'] : ['mod', 'k']}
+                        />
+                    }
                     {...rest}
                     type="text"
                 />
diff --git a/packages/gitbook/src/components/primitives/Input.tsx b/packages/gitbook/src/components/primitives/Input.tsx
index 299eb4cf68..2bec8c46b8 100644
--- a/packages/gitbook/src/components/primitives/Input.tsx
+++ b/packages/gitbook/src/components/primitives/Input.tsx
@@ -11,7 +11,7 @@ export type InputProps = {
     label: string;
     leading?: IconName | React.ReactNode;
     trailing?: React.ReactNode;
-    sizing?: 'small' | 'medium'; // The `size` prop is already taken by the HTML input element.
+    sizing?: 'medium' | 'large'; // The `size` prop is already taken by the HTML input element.
     containerRef?: React.RefObject<HTMLDivElement | null>;
     /**
      * A submit button, shown to the right of the input.
@@ -40,11 +40,11 @@ export type InputProps = {
 type HybridInputElement = HTMLInputElement & HTMLTextAreaElement;
 
 const SIZE_CLASSES = {
-    small: {
+    medium: {
         container: 'p-2 circular-corners:rounded-3xl rounded-corners:rounded-lg',
         input: '-m-2 p-2',
     },
-    medium: {
+    large: {
         container: 'p-2 circular-corners:rounded-3xl rounded-corners:rounded-xl',
         input: '-m-2 p-3',
     },
@@ -160,7 +160,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
             <div
                 className={tcls(
                     'group/input relative flex min-h-min gap-2 overflow-hidden border border-tint bg-tint-base shadow-tint/6 ring-primary-hover transition-all dark:shadow-tint-1',
-                    'depth-subtle:focus-within:-translate-y-px depth-subtle:shadow-sm depth-subtle:focus-within:shadow-lg',
+                    'depth-subtle:focus-within:-translate-y-px depth-subtle:hover:-translate-y-px depth-subtle:shadow-sm depth-subtle:focus-within:shadow-lg',
                     disabled
                         ? 'cursor-not-allowed border-tint-subtle bg-tint-subtle'
                         : 'focus-within:border-primary-hover focus-within:shadow-primary-subtle focus-within:ring-2 hover:cursor-text hover:border-tint-hover focus-within:hover:border-primary-hover',

From 208ef3a55590de1f0b292b2bc9a37b39796dc7a4 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Wed, 10 Dec 2025 15:59:11 +0100
Subject: [PATCH 06/17] Redo keyboardshortcut

---
 .../gitbook/src/components/AIChat/AIChatInput.tsx    | 12 ++++++------
 .../gitbook/src/components/Search/SearchInput.tsx    | 12 +++++-------
 packages/gitbook/src/components/primitives/Input.tsx |  6 +++---
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/gitbook/src/components/AIChat/AIChatInput.tsx b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
index 0acf73f188..0753b8c9db 100644
--- a/packages/gitbook/src/components/AIChat/AIChatInput.tsx
+++ b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
@@ -5,7 +5,6 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useAIChatState } from '../AI/useAIChat';
 import { HoverCard, HoverCardRoot, HoverCardTrigger } from '../primitives';
 import { Input } from '../primitives/Input';
-import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
 
 export function AIChatInput(props: {
     value: string;
@@ -65,11 +64,12 @@ export function AIChatInput(props: {
             className="animate-blur-in-slow bg-tint-base/9 backdrop-blur-lg contrast-more:bg-tint-base"
             rows={1}
             keyboardShortcut={
-                !value && !disabled && !loading ? (
-                    <div className="group-focus-within/input:hidden">
-                        <KeyboardShortcut keys={['mod', 'i']} className="bg-tint-base" />
-                    </div>
-                ) : undefined
+                !value && !disabled && !loading
+                    ? {
+                          keys: ['mod', 'i'],
+                          className: 'bg-tint-base group-focus-within/input:hidden',
+                      }
+                    : undefined
             }
             disabled={disabled || loading}
             aria-busy={loading}
diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx
index f0457c1cbd..67ade4bdf2 100644
--- a/packages/gitbook/src/components/Search/SearchInput.tsx
+++ b/packages/gitbook/src/components/Search/SearchInput.tsx
@@ -3,7 +3,6 @@ import React, { useEffect, useRef } from 'react';
 
 import { tString, useLanguage } from '@/intl/client';
 import { Input } from '../primitives';
-import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
 
 interface SearchInputProps {
     onChange: (value: string) => void;
@@ -73,12 +72,11 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     aria-haspopup="listbox"
                     aria-expanded={value && isOpen ? 'true' : 'false'}
                     clearButton
-                    keyboardShortcut={
-                        <KeyboardShortcut
-                            className="theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link"
-                            keys={isOpen ? ['esc'] : ['mod', 'k']}
-                        />
-                    }
+                    keyboardShortcut={{
+                        className:
+                            'theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link',
+                        keys: isOpen ? ['esc'] : ['mod', 'k'],
+                    }}
                     {...rest}
                     type="text"
                 />
diff --git a/packages/gitbook/src/components/primitives/Input.tsx b/packages/gitbook/src/components/primitives/Input.tsx
index 2bec8c46b8..346e031945 100644
--- a/packages/gitbook/src/components/primitives/Input.tsx
+++ b/packages/gitbook/src/components/primitives/Input.tsx
@@ -5,7 +5,7 @@ import { tcls } from '@/lib/tailwind';
 import { Icon, type IconName } from '@gitbook/icons';
 import React, { type ReactNode } from 'react';
 import { Button, type ButtonProps } from './Button';
-import { KeyboardShortcut } from './KeyboardShortcut';
+import { KeyboardShortcut, type KeyboardShortcutProps } from './KeyboardShortcut';
 
 export type InputProps = {
     label: string;
@@ -28,7 +28,7 @@ export type InputProps = {
     /**
      * A keyboard shortcut, shown to the right of the input.
      */
-    keyboardShortcut?: boolean | ReactNode;
+    keyboardShortcut?: boolean | KeyboardShortcutProps;
 
     onSubmit?: (value: string | number | readonly string[] | undefined) => void;
     resize?: boolean;
@@ -220,7 +220,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                     <div className={multiline ? 'absolute top-2.5 right-2.5' : ''}>
                         {keyboardShortcut !== false ? (
                             typeof keyboardShortcut === 'object' ? (
-                                keyboardShortcut
+                                <KeyboardShortcut {...keyboardShortcut} />
                             ) : onSubmit && !submitted && hasValue ? (
                                 <KeyboardShortcut
                                     keys={['enter']}

From 09426a01bd83e350142c568ff381eb14de2cc4f8 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Wed, 10 Dec 2025 16:49:05 +0100
Subject: [PATCH 07/17] Changeset

---
 .changeset/cool-pigs-wink.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cool-pigs-wink.md

diff --git a/.changeset/cool-pigs-wink.md b/.changeset/cool-pigs-wink.md
new file mode 100644
index 0000000000..862d9d1c13
--- /dev/null
+++ b/.changeset/cool-pigs-wink.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Add Input component

From 0442226db6d1d4f72e5eb289c795d2f25d942c80 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Wed, 10 Dec 2025 16:49:08 +0100
Subject: [PATCH 08/17] Update SearchInput.tsx

---
 packages/gitbook/src/components/Search/SearchInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx
index 67ade4bdf2..2ed6c66d90 100644
--- a/packages/gitbook/src/components/Search/SearchInput.tsx
+++ b/packages/gitbook/src/components/Search/SearchInput.tsx
@@ -49,7 +49,7 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
         }, [isOpen, value]);
 
         return (
-            <div className="relative flex @max-2xl:size-10 grow">
+            <div className="relative flex @max-2xl:size-9.5 grow">
                 <Input
                     data-testid="search-input"
                     name="search-input"
@@ -57,7 +57,7 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
                     sizing="medium"
                     label={tString(language, withAI ? 'search_or_ask' : 'search')}
-                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-10 grow theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link theme-bold:shadow-none! @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] theme-bold:focus-within:border-header-link/6 theme-bold:focus-within:bg-header-link/1 theme-bold:focus-within:ring-header-link/5 theme-bold:hover:border-header-link/5 theme-bold:hover:bg-header-link/1 @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 theme-bold:[&_input]:placeholder:text-header-link/8 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11 theme-bold:[&_svg]:text-header-link/8"
+                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-9.5 grow theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link theme-bold:shadow-none! @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] theme-bold:focus-within:border-header-link/6 theme-bold:focus-within:bg-header-link/1 theme-bold:focus-within:ring-header-link/5 theme-bold:hover:border-header-link/5 theme-bold:hover:bg-header-link/1 @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 theme-bold:[&_input]:placeholder:text-header-link/8 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11 @max-2xl:[&_svg]:ml-0.5 theme-bold:[&_svg]:text-header-link/8"
                     placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
                     onFocus={onFocus}
                     onKeyDown={onKeyDown}

From b2684b41a3cf4f51e7841030ccd50a349a235480 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Wed, 10 Dec 2025 17:00:24 +0100
Subject: [PATCH 09/17] Refactor

---
 .../src/components/AIChat/AIChatInput.tsx     |   2 +-
 .../src/components/primitives/Input.tsx       | 130 ++++++++++--------
 2 files changed, 70 insertions(+), 62 deletions(-)

diff --git a/packages/gitbook/src/components/AIChat/AIChatInput.tsx b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
index 0753b8c9db..b25a95ac9d 100644
--- a/packages/gitbook/src/components/AIChat/AIChatInput.tsx
+++ b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
@@ -56,7 +56,7 @@ export function AIChatInput(props: {
             label="Assistant chat input"
             placeholder={tString(language, 'ai_chat_input_placeholder')}
             onChange={(event) => onChange(event.target.value)}
-            onSubmit={() => onSubmit(value)}
+            onSubmit={(val) => onSubmit(val as string)}
             value={value}
             submitButton={{
                 label: tString(language, 'send'),
diff --git a/packages/gitbook/src/components/primitives/Input.tsx b/packages/gitbook/src/components/primitives/Input.tsx
index 346e031945..711a16458a 100644
--- a/packages/gitbook/src/components/primitives/Input.tsx
+++ b/packages/gitbook/src/components/primitives/Input.tsx
@@ -51,7 +51,7 @@ const SIZE_CLASSES = {
 };
 
 /**
- * Input base component with core functionality and shared styles.
+ * Input component with core functionality (submitting, clearing, validating) and shared styles.
  */
 export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
     (props, passedRef) => {
@@ -81,40 +81,47 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
             ...rest
         } = props;
 
-        const [value, setValue] = React.useState(initialValue ?? '');
+        const [internalValue, setInternalValue] = React.useState(initialValue ?? '');
         const [submitted, setSubmitted] = React.useState(false);
         const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);
         const ref = passedRef ?? inputRef;
 
         const language = useLanguage();
+        const isControlled = 'value' in props;
+        const value = isControlled ? (initialValue ?? '') : internalValue;
         const hasValue = value.toString().trim();
         const hasValidValue =
             hasValue &&
             (maxLength ? value.toString().length <= maxLength : true) &&
             (minLength ? value.toString().length >= minLength : true);
 
-        React.useEffect(() => {
-            setValue(initialValue ?? '');
-        }, [initialValue]);
-
         const handleChange = (event: React.ChangeEvent<HybridInputElement>) => {
-            setValue(event.target.value);
+            const newValue = event.target.value;
+            if (!isControlled) {
+                setInternalValue(newValue);
+            }
             onChange?.(event);
 
-            // Auto-resize
             if (multiline && resize && 'current' in ref && ref.current) {
                 ref.current.style.height = 'auto';
                 ref.current.style.height = `${ref.current.scrollHeight}px`;
             }
         };
 
+        const handleClear = () => {
+            if (!('current' in ref) || !ref.current) return;
+
+            const syntheticEvent = {
+                target: { value: '' },
+                currentTarget: ref.current,
+            } as React.ChangeEvent<HybridInputElement>;
+
+            handleChange(syntheticEvent);
+        };
+
         const handleClick = () => {
             if (!('current' in ref)) return;
-
-            const element = ref.current;
-            if (element) {
-                element.focus();
-            }
+            ref.current?.focus();
         };
 
         const handleSubmit = () => {
@@ -124,38 +131,37 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
             }
         };
 
-        const input = (
-            <input
-                className={tcls(
-                    'peer -m-2 max-h-64 grow resize-none text-left outline-none placeholder:text-tint/8 aria-busy:cursor-progress',
-                    SIZE_CLASSES[sizing].input
-                )}
-                type="text"
-                ref={ref as React.Ref<HTMLInputElement>}
-                value={value}
-                size={1} // This will make the input have the smallest possible width (1 character) so we can grow it with flexbox
-                onKeyDown={(event) => {
-                    if (event.key === 'Enter' && !event.shiftKey && value.toString().trim()) {
-                        event.preventDefault();
-                        handleSubmit();
-                    }
-                    if (event.key === 'Escape') {
-                        event.preventDefault();
-                        event.currentTarget.blur();
-                    }
-                    onKeyDown?.(event as React.KeyboardEvent<HybridInputElement>);
-                }}
-                aria-busy={ariaBusy}
-                onChange={handleChange}
-                aria-label={ariaLabel ?? label}
-                placeholder={placeholder ? placeholder : label}
-                disabled={disabled}
-                maxLength={maxLength}
-                minLength={minLength}
-                {...(rest as React.InputHTMLAttributes<HTMLInputElement>)}
-            />
+        const handleKeyDown = (event: React.KeyboardEvent<HybridInputElement>) => {
+            if (event.key === 'Enter' && !event.shiftKey && hasValue) {
+                event.preventDefault();
+                handleSubmit();
+            } else if (event.key === 'Escape') {
+                event.preventDefault();
+                event.currentTarget.blur();
+            }
+            onKeyDown?.(event);
+        };
+
+        const inputClassName = tcls(
+            'peer -m-2 max-h-64 grow resize-none text-left outline-none placeholder:text-tint/8 aria-busy:cursor-progress',
+            SIZE_CLASSES[sizing].input
         );
 
+        const inputProps = {
+            className: inputClassName,
+            ref: ref as React.Ref<HTMLInputElement | HTMLTextAreaElement>,
+            value: value,
+            onKeyDown: handleKeyDown,
+            'aria-busy': ariaBusy,
+            onChange: handleChange,
+            'aria-label': ariaLabel ?? label,
+            placeholder: placeholder ?? label,
+            disabled: disabled,
+            maxLength: maxLength,
+            minLength: minLength,
+            ...rest,
+        };
+
         return (
             <div
                 className={tcls(
@@ -206,33 +212,37 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                                 multiline ? 'mt-0.5' : '',
                                 hasValue ? 'group-focus-within/input:flex' : ''
                             )}
-                            onClick={() => {
-                                handleChange({
-                                    target: {
-                                        value: '',
-                                    },
-                                } as React.ChangeEvent<HybridInputElement>);
-                            }}
+                            onClick={handleClear}
                         />
                     ) : null}
-                    {multiline ? <textarea {...input.props} /> : input}
+                    {multiline ? (
+                        <textarea
+                            {...(inputProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+                        />
+                    ) : (
+                        <input
+                            {...(inputProps as React.InputHTMLAttributes<HTMLInputElement>)}
+                            type="text"
+                            size={1}
+                        />
+                    )}
 
-                    <div className={multiline ? 'absolute top-2.5 right-2.5' : ''}>
-                        {keyboardShortcut !== false ? (
-                            typeof keyboardShortcut === 'object' ? (
+                    {keyboardShortcut !== false ? (
+                        <div className={multiline ? 'absolute top-2.5 right-2.5' : ''}>
+                            {typeof keyboardShortcut === 'object' ? (
                                 <KeyboardShortcut {...keyboardShortcut} />
                             ) : onSubmit && !submitted && hasValue ? (
                                 <KeyboardShortcut
                                     keys={['enter']}
                                     className="hidden bg-tint-base group-focus-within/input:flex"
                                 />
-                            ) : null
-                        ) : null}
-                    </div>
+                            ) : null}
+                        </div>
+                    ) : null}
                 </div>
                 {trailing || submitButton || maxLength ? (
                     <div className="flex items-center gap-2 empty:hidden">
-                        {trailing ? trailing : null}
+                        {trailing}
                         {maxLength && !submitted && value.toString().length > maxLength * 0.8 ? (
                             <span
                                 className={tcls(
@@ -266,9 +276,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                                 disabled={disabled || !hasValidValue}
                                 iconOnly={!multiline}
                                 className="ml-auto"
-                                {...(typeof submitButton === 'object'
-                                    ? { ...submitButton }
-                                    : undefined)}
+                                {...(typeof submitButton === 'object' ? submitButton : {})}
                             />
                         ) : null}
                     </div>

From aaa4addbb20fd8ff0e556105f89ffe71041a779d Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Wed, 10 Dec 2025 17:11:45 +0100
Subject: [PATCH 10/17] Update Input.tsx

---
 .../src/components/primitives/Input.tsx       | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/gitbook/src/components/primitives/Input.tsx b/packages/gitbook/src/components/primitives/Input.tsx
index 711a16458a..86b234053b 100644
--- a/packages/gitbook/src/components/primitives/Input.tsx
+++ b/packages/gitbook/src/components/primitives/Input.tsx
@@ -102,6 +102,11 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
             }
             onChange?.(event);
 
+            // Reset submitted state when user edits the value to allow re-submission
+            if (submitted) {
+                setSubmitted(false);
+            }
+
             if (multiline && resize && 'current' in ref && ref.current) {
                 ref.current.style.height = 'auto';
                 ref.current.style.height = `${ref.current.scrollHeight}px`;
@@ -166,10 +171,12 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
             <div
                 className={tcls(
                     'group/input relative flex min-h-min gap-2 overflow-hidden border border-tint bg-tint-base shadow-tint/6 ring-primary-hover transition-all dark:shadow-tint-1',
-                    'depth-subtle:focus-within:-translate-y-px depth-subtle:hover:-translate-y-px depth-subtle:shadow-sm depth-subtle:focus-within:shadow-lg',
                     disabled
-                        ? 'cursor-not-allowed border-tint-subtle bg-tint-subtle'
-                        : 'focus-within:border-primary-hover focus-within:shadow-primary-subtle focus-within:ring-2 hover:cursor-text hover:border-tint-hover focus-within:hover:border-primary-hover',
+                        ? 'cursor-not-allowed border-tint-subtle bg-tint-subtle opacity-7'
+                        : [
+                              'depth-subtle:focus-within:-translate-y-px depth-subtle:hover:-translate-y-px depth-subtle:shadow-xs',
+                              'focus-within:border-primary-hover focus-within:depth-subtle:shadow-lg focus-within:shadow-primary-subtle focus-within:ring-2 hover:cursor-text hover:border-tint-hover depth-subtle:hover:not-focus-within:shadow-md focus-within:hover:border-primary-hover',
+                          ],
                     multiline ? 'flex-col' : 'flex-row',
                     ariaBusy ? 'cursor-progress' : '',
                     SIZE_CLASSES[sizing].container,
@@ -255,17 +262,15 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                                 {value.toString().length} / {maxLength}
                             </span>
                         ) : null}
-                        {submitted ? (
-                            submitMessage ? (
-                                typeof submitMessage === 'string' ? (
-                                    <div className="ml-auto flex animate-fade-in items-center gap-1 p-1.5 text-success-subtle">
-                                        <Icon icon="check-circle" className="size-4" />
-                                        {submitMessage}
-                                    </div>
-                                ) : (
-                                    submitMessage
-                                )
-                            ) : null
+                        {submitted && submitMessage ? (
+                            typeof submitMessage === 'string' ? (
+                                <div className="ml-auto flex animate-fade-in items-center gap-1 p-1.5 text-success-subtle">
+                                    <Icon icon="check-circle" className="size-4" />
+                                    {submitMessage}
+                                </div>
+                            ) : (
+                                submitMessage
+                            )
                         ) : submitButton ? (
                             <Button
                                 variant="primary"

From 624552f3e753147166daf35b0a5ded02226b700b Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Wed, 10 Dec 2025 17:38:19 +0100
Subject: [PATCH 11/17] Remove comment

---
 .../components/Search/useSearchResultsCursor.ts   | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/gitbook/src/components/Search/useSearchResultsCursor.ts b/packages/gitbook/src/components/Search/useSearchResultsCursor.ts
index fe9d6a27ac..db369c0f63 100644
--- a/packages/gitbook/src/components/Search/useSearchResultsCursor.ts
+++ b/packages/gitbook/src/components/Search/useSearchResultsCursor.ts
@@ -12,15 +12,12 @@ export function useSearchResultsCursor(props: { query: string; results: ResultTy
         }
     }, [query]);
 
-    // TODO: `results` is getting updated too often, causing the cursor to reset to 0 for every render.
-    // Reimplement this once we have fixed that issue.
-
-    // React.useEffect(() => {
-    //     if (results.length > 0) {
-    //         // Auto-focus the first result
-    //         setCursor(0);
-    //     }
-    // }, [results]);
+    React.useEffect(() => {
+        if (results.length > 0) {
+            // Auto-focus the first result
+            setCursor(0);
+        }
+    }, [results]);
 
     const moveBy = React.useCallback(
         (delta: number) => {

From 2147cfd9617697ad3eb030732ba0575f51a38b37 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Fri, 12 Dec 2025 10:58:06 +0100
Subject: [PATCH 12/17] Update Input.tsx

---
 .../src/components/primitives/Input.tsx       | 57 +++++++++++--------
 1 file changed, 34 insertions(+), 23 deletions(-)

diff --git a/packages/gitbook/src/components/primitives/Input.tsx b/packages/gitbook/src/components/primitives/Input.tsx
index 86b234053b..f51bd9e57c 100644
--- a/packages/gitbook/src/components/primitives/Input.tsx
+++ b/packages/gitbook/src/components/primitives/Input.tsx
@@ -9,6 +9,7 @@ import { KeyboardShortcut, type KeyboardShortcutProps } from './KeyboardShortcut
 
 export type InputProps = {
     label: string;
+    tag?: 'div' | 'span';
     leading?: IconName | React.ReactNode;
     trailing?: React.ReactNode;
     sizing?: 'medium' | 'large'; // The `size` prop is already taken by the HTML input element.
@@ -59,6 +60,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
             multiline,
             value: initialValue,
             sizing = 'medium',
+            tag = 'div',
             leading,
             trailing,
             className,
@@ -133,6 +135,9 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
             if (hasValue && onSubmit) {
                 onSubmit(value);
                 setSubmitted(true);
+                if (!isControlled) {
+                    setInternalValue('');
+                }
             }
         };
 
@@ -167,10 +172,12 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
             ...rest,
         };
 
+        const Tag = tag;
+
         return (
-            <div
+            <Tag
                 className={tcls(
-                    'group/input relative flex min-h-min gap-2 overflow-hidden border border-tint bg-tint-base shadow-tint/6 ring-primary-hover transition-all dark:shadow-tint-1',
+                    'group/input relative flex min-h-min gap-2 overflow-hidden border border-tint bg-tint-base align-middle shadow-tint/6 ring-primary-hover transition-all dark:shadow-tint-1',
                     disabled
                         ? 'cursor-not-allowed border-tint-subtle bg-tint-subtle opacity-7'
                         : [
@@ -190,22 +197,26 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                 }}
                 ref={containerRef}
             >
-                <div
+                <Tag
                     className={tcls('flex grow gap-2', multiline ? 'items-start' : 'items-center')}
                 >
                     {leading ? (
-                        typeof leading === 'string' ? (
-                            <Icon
-                                icon={leading as IconName}
-                                className={tcls(
-                                    'ml-1 size-4 shrink-0 text-tint',
-                                    multiline ? 'my-1.5' : 'my-0.5',
-                                    clearButton && hasValue ? 'group-focus-within/input:hidden' : ''
-                                )}
-                            />
-                        ) : (
-                            leading
-                        )
+                        <Tag
+                            className={tcls(
+                                'ml-1',
+                                multiline ? 'my-1.5' : 'my-0.5',
+                                clearButton && hasValue ? 'group-focus-within/input:hidden' : ''
+                            )}
+                        >
+                            {typeof leading === 'string' ? (
+                                <Icon
+                                    icon={leading as IconName}
+                                    className="size-4 shrink-0 text-tint"
+                                />
+                            ) : (
+                                leading
+                            )}
+                        </Tag>
                     ) : null}
                     {clearButton ? (
                         <Button
@@ -235,7 +246,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                     )}
 
                     {keyboardShortcut !== false ? (
-                        <div className={multiline ? 'absolute top-2.5 right-2.5' : ''}>
+                        <Tag className={multiline ? 'absolute top-2.5 right-2.5' : ''}>
                             {typeof keyboardShortcut === 'object' ? (
                                 <KeyboardShortcut {...keyboardShortcut} />
                             ) : onSubmit && !submitted && hasValue ? (
@@ -244,11 +255,11 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                                     className="hidden bg-tint-base group-focus-within/input:flex"
                                 />
                             ) : null}
-                        </div>
+                        </Tag>
                     ) : null}
-                </div>
+                </Tag>
                 {trailing || submitButton || maxLength ? (
-                    <div className="flex items-center gap-2 empty:hidden">
+                    <Tag className="flex items-center gap-2 empty:hidden">
                         {trailing}
                         {maxLength && !submitted && value.toString().length > maxLength * 0.8 ? (
                             <span
@@ -264,10 +275,10 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                         ) : null}
                         {submitted && submitMessage ? (
                             typeof submitMessage === 'string' ? (
-                                <div className="ml-auto flex animate-fade-in items-center gap-1 p-1.5 text-success-subtle">
+                                <Tag className="ml-auto flex animate-fade-in items-center gap-1 p-1.5 text-success-subtle">
                                     <Icon icon="check-circle" className="size-4" />
                                     {submitMessage}
-                                </div>
+                                </Tag>
                             ) : (
                                 submitMessage
                             )
@@ -284,9 +295,9 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                                 {...(typeof submitButton === 'object' ? submitButton : {})}
                             />
                         ) : null}
-                    </div>
+                    </Tag>
                 ) : null}
-            </div>
+            </Tag>
         );
     }
 );

From e0891e195cdc557a4318f48acfd5223fb357db3c Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Fri, 12 Dec 2025 11:59:22 +0100
Subject: [PATCH 13/17] Fix clear button styling

---
 packages/gitbook/src/components/Search/SearchInput.tsx | 4 +++-
 packages/gitbook/src/components/primitives/Input.tsx   | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx
index 2ed6c66d90..bc5bb76295 100644
--- a/packages/gitbook/src/components/Search/SearchInput.tsx
+++ b/packages/gitbook/src/components/Search/SearchInput.tsx
@@ -71,7 +71,9 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     aria-autocomplete="list"
                     aria-haspopup="listbox"
                     aria-expanded={value && isOpen ? 'true' : 'false'}
-                    clearButton
+                    clearButton={{
+                        className: 'theme-bold:hover:bg-header-link/4',
+                    }}
                     keyboardShortcut={{
                         className:
                             'theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link',
diff --git a/packages/gitbook/src/components/primitives/Input.tsx b/packages/gitbook/src/components/primitives/Input.tsx
index f51bd9e57c..dbe09c2220 100644
--- a/packages/gitbook/src/components/primitives/Input.tsx
+++ b/packages/gitbook/src/components/primitives/Input.tsx
@@ -225,12 +225,14 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                             label={tString(language, 'clear')}
                             iconOnly
                             icon="circle-xmark"
+                            onClick={handleClear}
+                            {...(typeof clearButton === 'object' ? clearButton : {})}
                             className={tcls(
                                 '-m-1 -ml-0.5 hidden shrink-0 animate-fade-in p-1.5 text-tint',
                                 multiline ? 'mt-0.5' : '',
-                                hasValue ? 'group-focus-within/input:flex' : ''
+                                hasValue ? 'group-focus-within/input:flex' : '',
+                                typeof clearButton === 'object' ? clearButton.className : ''
                             )}
-                            onClick={handleClear}
                         />
                     ) : null}
                     {multiline ? (

From f72b8b5e8ff03e6e8bdc0c4456a5ec88545a6bcc Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Fri, 12 Dec 2025 12:08:59 +0100
Subject: [PATCH 14/17] Update SearchInput.tsx

---
 packages/gitbook/src/components/Search/SearchInput.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx
index bc5bb76295..3e5d467222 100644
--- a/packages/gitbook/src/components/Search/SearchInput.tsx
+++ b/packages/gitbook/src/components/Search/SearchInput.tsx
@@ -2,6 +2,7 @@
 import React, { useEffect, useRef } from 'react';
 
 import { tString, useLanguage } from '@/intl/client';
+import { Icon } from '@gitbook/icons';
 import { Input } from '../primitives';
 
 interface SearchInputProps {
@@ -57,11 +58,16 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
                     sizing="medium"
                     label={tString(language, withAI ? 'search_or_ask' : 'search')}
-                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-9.5 grow theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link theme-bold:shadow-none! @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] theme-bold:focus-within:border-header-link/6 theme-bold:focus-within:bg-header-link/1 theme-bold:focus-within:ring-header-link/5 theme-bold:hover:border-header-link/5 theme-bold:hover:bg-header-link/1 @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 theme-bold:[&_input]:placeholder:text-header-link/8 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11 @max-2xl:[&_svg]:ml-0.5 theme-bold:[&_svg]:text-header-link/8"
+                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-9.5 grow theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link theme-bold:shadow-none! @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] theme-bold:focus-within:border-header-link/6 theme-bold:focus-within:bg-header-link/1 theme-bold:focus-within:ring-header-link/5 theme-bold:hover:border-header-link/5 theme-bold:hover:bg-header-link/1 @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 theme-bold:[&_input]:placeholder:text-header-link/8 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11"
                     placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
                     onFocus={onFocus}
                     onKeyDown={onKeyDown}
-                    leading="magnifying-glass"
+                    leading={
+                        <Icon
+                            icon="search"
+                            className="-ml-0.5 size-4 shrink-0 text-tint theme-bold:text-header-link/8"
+                        />
+                    }
                     onChange={(event) => {
                         onChange(event.target.value);
                     }}

From 7d8a75a379d9ae30b3c65a022658e8fcf2a85ff8 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Fri, 12 Dec 2025 12:13:39 +0100
Subject: [PATCH 15/17] Update SearchInput.tsx

---
 packages/gitbook/src/components/Search/SearchInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx
index 3e5d467222..2bcd87467f 100644
--- a/packages/gitbook/src/components/Search/SearchInput.tsx
+++ b/packages/gitbook/src/components/Search/SearchInput.tsx
@@ -58,7 +58,7 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
                     sizing="medium"
                     label={tString(language, withAI ? 'search_or_ask' : 'search')}
-                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-9.5 grow theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link theme-bold:shadow-none! @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] theme-bold:focus-within:border-header-link/6 theme-bold:focus-within:bg-header-link/1 theme-bold:focus-within:ring-header-link/5 theme-bold:hover:border-header-link/5 theme-bold:hover:bg-header-link/1 @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 theme-bold:[&_input]:placeholder:text-header-link/8 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11"
+                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-9.5 grow theme-bold:border-header-link/4 theme-bold:bg-header-link/1 theme-bold:text-header-link theme-bold:shadow-none! @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] theme-bold:focus-within:border-header-link/6 theme-bold:focus-within:ring-header-link/5 theme-bold:hover:border-header-link/5 @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 theme-bold:[&_input]:placeholder:text-header-link/8 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11"
                     placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
                     onFocus={onFocus}
                     onKeyDown={onKeyDown}
@@ -78,7 +78,7 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     aria-haspopup="listbox"
                     aria-expanded={value && isOpen ? 'true' : 'false'}
                     clearButton={{
-                        className: 'theme-bold:hover:bg-header-link/4',
+                        className: 'theme-bold:text-header-link theme-bold:hover:bg-header-link/3',
                     }}
                     keyboardShortcut={{
                         className:

From 3845b841f27b41bd4645da52cf11500fb81212da Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Fri, 12 Dec 2025 13:58:04 +0100
Subject: [PATCH 16/17] Sizing

---
 .../src/components/AIChat/AIChatInput.tsx     |  2 +-
 .../src/components/Search/SearchInput.tsx     |  5 +-
 .../src/components/primitives/Input.tsx       | 55 +++++++++++--------
 3 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/packages/gitbook/src/components/AIChat/AIChatInput.tsx b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
index b25a95ac9d..42ceed076e 100644
--- a/packages/gitbook/src/components/AIChat/AIChatInput.tsx
+++ b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
@@ -103,7 +103,7 @@ export function AIChatInput(props: {
                     </HoverCard>
                     <HoverCardTrigger>
                         <div className="flex cursor-help items-center gap-1 circular-corners:rounded-2xl rounded-corners:rounded-md px-2.5 py-1.5 text-tint/7 text-xs transition-all hover:bg-tint">
-                            <span className="-ml-1 circular-corners:rounded-2xl rounded-corners:rounded-sm bg-tint-11/7 px-1 py-0.5 font-mono font-semibold text-[0.65rem] text-contrast-tint-11 leading-none">
+                            <span className="-ml-2 circular-corners:rounded-2xl rounded-corners:rounded-sm 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 className="leading-none">
diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx
index 2bcd87467f..6513fe4e32 100644
--- a/packages/gitbook/src/components/Search/SearchInput.tsx
+++ b/packages/gitbook/src/components/Search/SearchInput.tsx
@@ -65,7 +65,7 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     leading={
                         <Icon
                             icon="search"
-                            className="-ml-0.5 size-4 shrink-0 text-tint theme-bold:text-header-link/8"
+                            className="size-4 shrink-0 text-tint theme-bold:text-header-link/8"
                         />
                     }
                     onChange={(event) => {
@@ -78,7 +78,8 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     aria-haspopup="listbox"
                     aria-expanded={value && isOpen ? 'true' : 'false'}
                     clearButton={{
-                        className: 'theme-bold:text-header-link theme-bold:hover:bg-header-link/3',
+                        className:
+                            'theme-bold:text-header-link theme-bold:hover:bg-header-link/3 text-base',
                     }}
                     keyboardShortcut={{
                         className:
diff --git a/packages/gitbook/src/components/primitives/Input.tsx b/packages/gitbook/src/components/primitives/Input.tsx
index dbe09c2220..73f507f51a 100644
--- a/packages/gitbook/src/components/primitives/Input.tsx
+++ b/packages/gitbook/src/components/primitives/Input.tsx
@@ -40,17 +40,6 @@ export type InputProps = {
 
 type HybridInputElement = HTMLInputElement & HTMLTextAreaElement;
 
-const SIZE_CLASSES = {
-    medium: {
-        container: 'p-2 circular-corners:rounded-3xl rounded-corners:rounded-lg',
-        input: '-m-2 p-2',
-    },
-    large: {
-        container: 'p-2 circular-corners:rounded-3xl rounded-corners:rounded-xl',
-        input: '-m-2 p-3',
-    },
-};
-
 /**
  * Input component with core functionality (submitting, clearing, validating) and shared styles.
  */
@@ -97,6 +86,19 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
             (maxLength ? value.toString().length <= maxLength : true) &&
             (minLength ? value.toString().length >= minLength : true);
 
+        const sizes = {
+            medium: {
+                container: `${multiline ? 'p-2' : 'px-4 py-2'} gap-2 circular-corners:rounded-3xl rounded-corners:rounded-xl`,
+                input: '-m-2 p-2',
+                gap: 'gap-2',
+            },
+            large: {
+                container: `${multiline ? 'p-3' : 'px-6 py-3 '} gap-3 circular-corners:rounded-3xl rounded-corners:rounded-xl`,
+                input: '-m-3 p-3',
+                gap: 'gap-3',
+            },
+        };
+
         const handleChange = (event: React.ChangeEvent<HybridInputElement>) => {
             const newValue = event.target.value;
             if (!isControlled) {
@@ -154,7 +156,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
 
         const inputClassName = tcls(
             'peer -m-2 max-h-64 grow resize-none text-left outline-none placeholder:text-tint/8 aria-busy:cursor-progress',
-            SIZE_CLASSES[sizing].input
+            sizes[sizing].input
         );
 
         const inputProps = {
@@ -177,7 +179,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
         return (
             <Tag
                 className={tcls(
-                    'group/input relative flex min-h-min gap-2 overflow-hidden border border-tint bg-tint-base align-middle shadow-tint/6 ring-primary-hover transition-all dark:shadow-tint-1',
+                    'group/input relative flex min-h-min overflow-hidden border border-tint bg-tint-base align-middle shadow-tint/6 ring-primary-hover transition-all dark:shadow-tint-1',
                     disabled
                         ? 'cursor-not-allowed border-tint-subtle bg-tint-subtle opacity-7'
                         : [
@@ -186,7 +188,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                           ],
                     multiline ? 'flex-col' : 'flex-row',
                     ariaBusy ? 'cursor-progress' : '',
-                    SIZE_CLASSES[sizing].container,
+                    sizes[sizing].container,
                     className
                 )}
                 onClick={handleClick}
@@ -198,14 +200,17 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                 ref={containerRef}
             >
                 <Tag
-                    className={tcls('flex grow gap-2', multiline ? 'items-start' : 'items-center')}
+                    className={tcls(
+                        'flex grow',
+                        sizes[sizing].gap,
+                        multiline ? 'items-start' : 'items-center'
+                    )}
                 >
                     {leading ? (
                         <Tag
                             className={tcls(
-                                'ml-1',
-                                multiline ? 'my-1.5' : 'my-0.5',
-                                clearButton && hasValue ? 'group-focus-within/input:hidden' : ''
+                                clearButton && hasValue ? 'group-focus-within/input:hidden' : '',
+                                multiline ? 'my-1.25' : ''
                             )}
                         >
                             {typeof leading === 'string' ? (
@@ -228,8 +233,8 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                             onClick={handleClear}
                             {...(typeof clearButton === 'object' ? clearButton : {})}
                             className={tcls(
-                                '-m-1 -ml-0.5 hidden shrink-0 animate-fade-in p-1.5 text-tint',
-                                multiline ? 'mt-0.5' : '',
+                                '-mx-1.5 hidden shrink-0 animate-fade-in p-1.5 text-tint',
+                                multiline ? '-my-0.25' : '-my-1.5',
                                 hasValue ? 'group-focus-within/input:flex' : '',
                                 typeof clearButton === 'object' ? clearButton.className : ''
                             )}
@@ -247,11 +252,15 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                         />
                     )}
 
-                    {keyboardShortcut !== false ? (
-                        <Tag className={multiline ? 'absolute top-2.5 right-2.5' : ''}>
+                    {keyboardShortcut !== false && onSubmit ? (
+                        <Tag
+                            className={
+                                multiline ? `absolute top-0 right-0 ${sizes[sizing].container}` : ''
+                            }
+                        >
                             {typeof keyboardShortcut === 'object' ? (
                                 <KeyboardShortcut {...keyboardShortcut} />
-                            ) : onSubmit && !submitted && hasValue ? (
+                            ) : !submitted && hasValue ? (
                                 <KeyboardShortcut
                                     keys={['enter']}
                                     className="hidden bg-tint-base group-focus-within/input:flex"

From eeb2c6668d64020aacdc3aa2fb1f85c2e25ceb09 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Fri, 12 Dec 2025 14:23:01 +0100
Subject: [PATCH 17/17] Fixes

---
 packages/gitbook/src/components/Search/SearchInput.tsx | 2 +-
 packages/gitbook/src/components/primitives/Input.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx
index 6513fe4e32..2a5ad06cff 100644
--- a/packages/gitbook/src/components/Search/SearchInput.tsx
+++ b/packages/gitbook/src/components/Search/SearchInput.tsx
@@ -58,7 +58,7 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
                     sizing="medium"
                     label={tString(language, withAI ? 'search_or_ask' : 'search')}
-                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-9.5 grow theme-bold:border-header-link/4 theme-bold:bg-header-link/1 theme-bold:text-header-link theme-bold:shadow-none! @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] theme-bold:focus-within:border-header-link/6 theme-bold:focus-within:ring-header-link/5 theme-bold:hover:border-header-link/5 @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 theme-bold:[&_input]:placeholder:text-header-link/8 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11"
+                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-9.5 grow theme-bold:border-header-link/4 theme-bold:bg-header-link/1 @max-2xl:px-2.5 theme-bold:text-header-link theme-bold:shadow-none! theme-bold:backdrop-blur-xl @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] theme-bold:focus-within:border-header-link/6 theme-bold:focus-within:ring-header-link/5 theme-bold:hover:border-header-link/5 @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 theme-bold:[&_input]:placeholder:text-header-link/8 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11"
                     placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
                     onFocus={onFocus}
                     onKeyDown={onKeyDown}
diff --git a/packages/gitbook/src/components/primitives/Input.tsx b/packages/gitbook/src/components/primitives/Input.tsx
index 73f507f51a..2c3dfd52a0 100644
--- a/packages/gitbook/src/components/primitives/Input.tsx
+++ b/packages/gitbook/src/components/primitives/Input.tsx
@@ -252,7 +252,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                         />
                     )}
 
-                    {keyboardShortcut !== false && onSubmit ? (
+                    {keyboardShortcut !== false ? (
                         <Tag
                             className={
                                 multiline ? `absolute top-0 right-0 ${sizes[sizing].container}` : ''
@@ -260,7 +260,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
                         >
                             {typeof keyboardShortcut === 'object' ? (
                                 <KeyboardShortcut {...keyboardShortcut} />
-                            ) : !submitted && hasValue ? (
+                            ) : onSubmit && !submitted && hasValue ? (
                                 <KeyboardShortcut
                                     keys={['enter']}
                                     className="hidden bg-tint-base group-focus-within/input:flex"