(props: PromptTokenFieldProps)
| 345 | } |
| 346 | |
| 347 | export function PromptTokenField(props: PromptTokenFieldProps) { |
| 348 | let { |
| 349 | completionTrigger, |
| 350 | renderCompletions, |
| 351 | children, |
| 352 | pixelLoader, |
| 353 | placeholder, |
| 354 | onKeyDown: onKeyDownProp |
| 355 | } = props; |
| 356 | let {keyboardProps} = useKeyboard({onKeyDown: onKeyDownProp}); |
| 357 | let { |
| 358 | prompt, |
| 359 | setPrompt, |
| 360 | acceptedAttachmentTypes, |
| 361 | setAttachments, |
| 362 | onAddAttachments, |
| 363 | inputRef, |
| 364 | onSubmit, |
| 365 | isGenerating, |
| 366 | isListening |
| 367 | } = useContext(PromptFieldContext); |
| 368 | let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/ai'); |
| 369 | let [isFocused, setFocused] = useState(false); |
| 370 | |
| 371 | let [filterAnchor, filterValue] = useMemo(() => { |
| 372 | if (completionTrigger) { |
| 373 | let filterAnchor = prompt.findText( |
| 374 | prompt.caretPosition, |
| 375 | TokenFieldValue.Direction.Backward, |
| 376 | completionTrigger |
| 377 | ); |
| 378 | if (filterAnchor != null) { |
| 379 | let filterValue = prompt.slice(filterAnchor, prompt.caretPosition).toString(); |
| 380 | return [filterAnchor, filterValue]; |
| 381 | } |
| 382 | } |
| 383 | return [null, null]; |
| 384 | }, [completionTrigger, prompt]); |
| 385 | |
| 386 | let items = useMemo(() => { |
| 387 | return filterValue != null ? renderCompletions?.(filterValue) : null; |
| 388 | }, [filterValue, renderCompletions]); |
| 389 | |
| 390 | return ( |
| 391 | <div |
| 392 | className={style({ |
| 393 | display: 'flex', |
| 394 | gap: 12, |
| 395 | alignItems: 'baseline', |
| 396 | color: { |
| 397 | default: 'transparent-overlay-600', |
| 398 | isFocused: 'body' |
| 399 | }, |
| 400 | transition: 'default', |
| 401 | transitionDuration: 350, |
| 402 | paddingStart: 4, |
| 403 | width: 'full' |
| 404 | })({isFocused: isFocused || prompt.segments.length > 0})}> |
nothing calls this directly
no test coverage detected