# extendify/1.9.0/src/Draft/components/Input.js

Extendify, version 1.9.0. 84 lines.

- Page: https://pluginprobe.com/plugins/extendify/1.9.0/code/src/Draft/components/Input.js
- Raw: https://pluginprobe.com/plugins/extendify/1.9.0/raw/src/Draft/components/Input.js
- Modified: 2023-08-04T20:43:32+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/extendify/1.9.0/code/src/Draft/components/Input.js#L10-L20`.

```javascript
import { Spinner } from '@wordpress/components'
import { __ } from '@wordpress/i18n'
import { arrowRight, Icon } from '@wordpress/icons'
import { DynamicTextarea } from '@draft/components/DynamicTextarea'
import { magic } from '@draft/svg'
import classnames from 'classnames'

export const Input = ({
    inputText,
    setInputText,
    ready,
    setReady,
    setPrompt,
    loading,
}) => {
    const submit = (event) => {
        event.preventDefault()

        if (!ready || loading) return

        setPrompt({
            text: inputText,
            promptType: 'create',
            systemMessageKey: 'generate',
        })
        setInputText('')
        setReady(false)
    }

    return (
        <form className="relative flex items-start" onSubmit={submit}>
            <Icon
                icon={magic}
                className="text-design-main fill-current w-5 h-5 absolute left-2 top-3"
            />
            <DynamicTextarea
                disabled={loading}
                placeholder={
                    loading
                        ? __('AI is writing...', 'extendify')
                        : __('Ask AI to generate text', 'extendify')
                }
                value={inputText}
                className="bg-transparent border-none shadow-none w-full h-full px-10 py-3 overflow-hidden resize-none"
                onChange={(event) => {
                    setInputText(event.target.value)
                    setReady(event.target.value.length > 0)
                }}
                onKeyDown={(event) => {
                    if (event.key === 'Enter' && !event.shiftKey) {
                        event.preventDefault()
                        submit(event)
                    }
                }}
            />
            {loading && (
                <div className="text-gray-700 absolute right-4 w-4 h-4 p-1 mt-2.5">
                    <Spinner style={{ margin: '0' }} />
                </div>
            )}
            {!loading && (
                <button
                    type="submit"
                    disabled={!ready}
                    aria-label={__('Submit', 'extendify')}
                    className={classnames(
                        'bg-transparent border-none absolute right-2 p-0 mt-2.5',
                        {
                            'cursor-pointer text-gray-700 hover:text-design-main':
                                ready,
                            'text-gray-500': !ready,
                        },
                    )}>
                    <Icon
                        icon={arrowRight}
                        onClick={submit}
                        className="fill-current w-6 h-6"
                    />
                </button>
            )}
        </form>
    )
}

```