React example ​

import "@deepdesk/deepdesk-sdk/styles";
import { DeepdeskSDK, updateTextArea } from '@deepdesk/deepdesk-sdk';

const AgentTextField = () => {
    const ref = useRef(null);
    const [value, setValue] = useState('');

    useEffect(() => {
        const deepdeskSDK = new DeepdeskSDK({
            deepdeskUrl: 'https://<accountname>.deepdesk.com/api',
        });
        const listeners = [];
        const cleanup = () => {
            // Stop listening to the SDK events
            listeners.forEach(off => off());
            // Unmount suggestions overlay and tabcompletion.
            deepdeskSDK.unmount();
        };

        // Check if conversation is supported before continuing
        deepdeskSDK.isConversationSupported('123', {
            attempts: 5,
            retryDelay: 500,
        }).then(isSupported => {
            if (!isSupported) return;

            deepdeskSDK.mount(ref.current);

            deepdeskSDK.login().then(() => {
                if (!deepdeskSDK.isMounted) return;

                deepdeskSDK.getConversationBySessionId('123').catch(() => {
                    console.log('Could not find conversation');
                    cleanup();
                });

                deepdeskSDK.setVisitorInfo({
                    visitorName: 'Anne',
                });

                deepdeskSDK.setAgentInfo({
                    agentName: 'Sam de Pam',
                    agentNickname: 'Sam',
                });
            });

            listeners.push(
                deepdeskSDK.on('select-suggestion', ({ text, replace }) => {
                    updateTextArea(inputElement, text, {
                        replace,
                        setValue: (value) => setValue(value), // Let React update the value
                    });
                }),

                deepdeskSDK.on('reset', ({ text, selectionAfter }) => {
                    updateTextArea(textareaEl, text, {
                        selectionAfter,
                        setValue: (value) => setValue(value), // Let React update the value
                    });
                }),
            );
        });

        return () => cleanup();
    }, []);

    const handleSubmit = async event => {
        event.preventDefault();

        const sentText = value;

        // Handle submit ...
        await sendMessageToYourBackend();

        // Notify SDK of message submit
        // Optionally passing { text: string } with sent text.
        if (deepdeskSDK.hasConversation()) {
            deepdeskSDK.notifySubmit({ text: sentText }));
        }

        // Clear input
        setValue('');

        // Refresh suggestions
        if (deepdeskSDK.hasConversation()) {
            deepdeskSDK.refresh();
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <textarea
                ref={ref}
                value={value}
                onChange={e => setValue(e.target.value)}
            />
            <button type="submit">Submit</button>
        </form>
    );
};