11import { t , tString , useLanguage } from '@/intl/client' ;
2- import { tcls } from '@/lib/tailwind' ;
32import { Icon } from '@gitbook/icons' ;
43import { useEffect , useRef } from 'react' ;
54import { useHotkeys } from 'react-hotkeys-hook' ;
65import { useAIChatState } from '../AI/useAIChat' ;
7- import { Button , HoverCard , HoverCardRoot , HoverCardTrigger } from '../primitives' ;
8- import { KeyboardShortcut } from '../primitives/KeyboardShortcut ' ;
6+ import { HoverCard , HoverCardRoot , HoverCardTrigger } from '../primitives' ;
7+ import { Input } from '../primitives/Input ' ;
98
109export function AIChatInput ( props : {
11- value : string ;
1210 disabled ?: boolean ;
1311 /**
1412 * When true, the input is disabled
1513 */
1614 loading : boolean ;
17- onChange : ( value : string ) => void ;
1815 onSubmit : ( value : string ) => void ;
1916} ) {
20- const { value , onChange , onSubmit, disabled, loading } = props ;
17+ const { onSubmit, disabled, loading } = props ;
2118
2219 const language = useLanguage ( ) ;
2320 const chat = useAIChatState ( ) ;
2421
2522 const inputRef = useRef < HTMLTextAreaElement > ( null ) ;
2623
27- const handleInput = ( event : React . ChangeEvent < HTMLTextAreaElement > ) => {
28- const textarea = event . currentTarget ;
29- onChange ( textarea . value ) ;
30-
31- // Auto-resize
32- textarea . style . height = 'auto' ;
33- textarea . style . height = `${ textarea . scrollHeight } ;
34- } ;
35-
3624 useEffect ( ( ) => {
3725 if ( chat . opened && ! disabled && ! loading ) {
3826 // Add a small delay to ensure the input is rendered before focusing
@@ -57,57 +45,33 @@ export function AIChatInput(props: {
5745 ) ;
5846
5947 return (
60- < 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" >
61- < textarea
62- ref = { inputRef }
63- disabled = { disabled || loading }
64- data-loading = { loading }
65- data-testid = "ai-chat-input"
66- className = { tcls (
67- 'resize-none' ,
68- 'focus:outline-hidden' ,
69- 'focus:ring-0' ,
70- 'w-full' ,
71- 'px-3' ,
72- 'py-3' ,
73- 'pb-12' ,
74- 'h-auto' ,
75- 'bg-transparent' ,
76- 'peer' ,
77- 'max-h-64' ,
78- 'placeholder:text-tint/8' ,
79- 'transition-colors' ,
80- 'disabled:bg-tint-subtle' ,
81- 'delay-300' ,
82- 'disabled:delay-0' ,
83- 'disabled:cursor-not-allowed' ,
84- 'data-[loading=true]:cursor-progress' ,
85- 'data-[loading=true]:opacity-50'
86- ) }
87- value = { value }
88- rows = { 1 }
89- placeholder = { tString ( language , 'ai_chat_input_placeholder' ) }
90- onChange = { handleInput }
91- onKeyDown = { ( event ) => {
92- if ( event . key === 'Escape' ) {
93- event . preventDefault ( ) ;
94- event . currentTarget . blur ( ) ;
95- return ;
96- }
97-
98- if ( event . key === 'Enter' && ! event . shiftKey && value . trim ( ) ) {
99- event . preventDefault ( ) ;
100- event . currentTarget . style . height = 'auto' ;
101- onSubmit ( value ) ;
102- }
103- } }
104- />
105- { ! disabled ? (
106- < div className = "absolute top-2.5 right-3 animate-[fadeIn_0.2s_0.5s_ease-in-out_both] peer-focus:hidden" >
107- < KeyboardShortcut keys = { [ 'mod' , 'i' ] } className = "bg-tint-base" />
108- </ div >
109- ) : null }
110- < div className = "absolute inset-x-0 bottom-0 flex items-center gap-2 px-2 py-2" >
48+ < Input
49+ data-testid = "ai-chat-input"
50+ name = "ai-chat-input"
51+ multiline
52+ resize
53+ sizing = "large"
54+ label = "Assistant chat input"
55+ placeholder = { tString ( language , 'ai_chat_input_placeholder' ) }
56+ onSubmit = { ( val ) => onSubmit ( val as string ) }
57+ submitButton = { {
58+ label : tString ( language , 'send' ) ,
59+ } }
60+ className = "animate-blur-in-slow bg-tint-base/9 backdrop-blur-lg contrast-more:bg-tint-base"
61+ rows = { 1 }
62+ maxLength = { 2048 }
63+ keyboardShortcut = {
64+ ! disabled && ! loading
65+ ? {
66+ keys : [ 'mod' , 'i' ] ,
67+ className : 'bg-tint-base group-focus-within/input:hidden' ,
68+ }
69+ : undefined
70+ }
71+ disabled = { disabled || loading }
72+ aria-busy = { loading }
73+ ref = { inputRef }
74+ trailing = {
11175 < HoverCardRoot openDelay = { 500 } >
11276 < HoverCard
11377 className = "max-w-xs bg-tint p-2 text-sm text-tint"
@@ -135,7 +99,8 @@ export function AIChatInput(props: {
13599 </ div >
136100 </ HoverCard >
137101 < HoverCardTrigger >
138- < 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" >
102+ { /* Negative margin to compensate for Input's padding, so the badge appears flush with the cursor */ }
103+ < div className = "-ml-1 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" >
139104 < 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" >
140105 { t ( language , 'ai_chat_context_badge' ) }
141106 </ span > { ' ' }
@@ -146,14 +111,7 @@ export function AIChatInput(props: {
146111 </ div >
147112 </ HoverCardTrigger >
148113 </ HoverCardRoot >
149- < Button
150- label = { tString ( language , 'send' ) }
151- size = "medium"
152- className = "ml-auto"
153- disabled = { disabled || ! value . trim ( ) }
154- onClick = { ( ) => onSubmit ( value ) }
155- />
156- </ div >
157- </ div >
114+ }
115+ />
158116 ) ;
159117}
0 commit comments