Stream to Paragraph Field

Stream OpenAI responses from the OpenAI Stream field to a Paragraph (or Single Line Text) field instead. Useful when wanting to provide a starting point for users while allowing them to edit the final result.

Instructions

  1. Install this snippet with our free Custom JavaScript plugin. https://gravitywiz.com/gravity-forms-custom-javascript/

  2. Update the variables to match your own field IDs.

Code

Filename: gcoai-stream-to-paragraph-field.js

/**
 * Gravity Connect // OpenAI // Stream to Paragraph Field
 * https://gravitywiz.com/documentation/gravity-connect-openai/
 *
 * Stream OpenAI responses from the OpenAI Stream field to a Paragraph (or Single Line Text)
 * field instead. Useful when wanting to provide a starting point for users while allowing them
 * to edit the final result.
 *
 * Instruction Video: https://www.loom.com/share/f793319da7e449a8b01e5a8c077e24c7
 *
 * Instructions:
 *
 * 1. Install this snippet with our free Custom JavaScript plugin.
 *    https://gravitywiz.com/gravity-forms-custom-javascript/
 *
 * 2. Update the variables to match your own field IDs.
 */
var streamFieldId = 3;
var promptFieldId = 1;
var responseFieldId = 4;
var appendButtonFieldId = responseFieldId;

var $streamFieldInput = $( `#input_GFFORMID_${streamFieldId}` );
var $streamButton     = $streamFieldInput.closest( '.gfield' ).find( '.gcoai-trigger' );

$streamFieldInput.on( 'change', function() {
	$input = $( `#input_GFFORMID_${responseFieldId}` );
	var inputValue = this.value;

	// Get HTML from response field if TinyMCE is available.
	if (window.tinyMCE) {
		var html = $streamFieldInput.closest( '.gfield' ).find('.gcoai-output').html();

		// Set HTML content in TinyMCE.
		var tiny = tinyMCE.get( $input.attr( 'id' ) );
		if (tiny) {
			tiny.setContent( html );
		}
	} else {
		// If TinyMCE is not available, use plain text.
		$input.val( inputValue );
	}
});

let $newButton = $streamButton
	.clone()
	.attr( 'style', 'margin-top: var(--gf-label-space-primary, 8px);' )
	.on( 'click', function() {
		$streamButton.trigger( 'click' );
	} )
	.insertAfter( $( `#input_GFFORMID_${appendButtonFieldId}` ) );

$wpEditor = $newButton.parents( '.wp-editor-container' );
if ( $wpEditor.length ) {
	$newButton.insertAfter( $wpEditor );
}

$( `#input_GFFORMID_${promptFieldId}` ).on( 'blur', function() {
	$streamButton.trigger( 'click' );
} );

$wpEditor = $newButton.parents('.wp-editor-container');
if ($wpEditor.length) {
	$newButton.insertAfter($wpEditor);
}

$( `#input_GFFORMID_${promptFieldId}` ).on('blur', function() {
	$streamButton.trigger('click');
});

Comments

  1. Nathan Steiner
    Nathan Steiner January 25, 2025 at 1:53 pm

    Love this feature! I’ve implemented on a form on my website but I’m looking to use multiple instances of “generate” on the form. For example, I would like to generate multiple prompts throughout the form. Is this possible with the same JS?

    Reply
    1. Samuel Bassah
      Samuel Bassah Staff January 27, 2025 at 5:20 am

      Hi Nathan,

      Glad to know, you love the snippet. The snippet, as it is now, won’t work with multiple instances of “generate” on the form. I’ll suggest you open a support ticket for this and submit this as a feature request, and provide us some additional information on your use case, to help us better understand how you want it to work.

      Best,

  2. Dominik Hurcks
    Dominik Hurcks November 30, 2024 at 8:19 am

    Hi, can you tell me where to find the openai stream field? I have installed the free openai plugin, but I cannot find it.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.