`<textfield />` should be fairly easy to use. Here's an example demonstrating setting placeholder te

export const MessageBox = forwardRef(({ class: className, focusTrigger, onSubmit }: MessageBoxProps, ref) => {
    const tfref = useRef<Element>()

    useEffect(() => {
        const tf = tfref.current?.ve as TextField
        tf.textEdition.placeholder = `Ask me anything...`
    }, [])

    return <textfield ref={tfref} class={`m-0 max-h-[200px] shrink ${textfieldEmo} ${className}`}
        multiline={true} vertical-scroller-visibility={0}
        select-all-on-focus={false} select-all-on-mouse-up={false} />
})

const textfieldEmo = emo`
font-size: 14px;
white-space: normal;
TextInput {
    border-width: 0;
    white-space: normal;
}
TextElement {
    padding: 12px;
}
.unity-base-text-field__input--placeholder {
    color: #666666;
}
`

export const MessageBox = forwardRef(({ class: className, focusTrigger, onSubmit }: MessageBoxProps, ref) => {
    const tfref = useRef<Element>()

    useEffect(() => {
        const tf = tfref.current?.ve as TextField
        tf.textEdition.placeholder = `Ask me anything...`
    }, [])

    return <textfield ref={tfref} class={`m-0 max-h-[200px] shrink ${textfieldEmo} ${className}`}
        multiline={true} vertical-scroller-visibility={0}
        select-all-on-focus={false} select-all-on-mouse-up={false} />
})

const textfieldEmo = emo`
font-size: 14px;
white-space: normal;
TextInput {
    border-width: 0;
    white-space: normal;
}
TextElement {
    padding: 12px;
}
.unity-base-text-field__input--placeholder {
    color: #666666;
}
`