reset_form_controller.js

import {Controller} from 'stimulus'

export default class extends Controller {
    static targets = ["button"]
    reset() {
        this.element.reset()
        this.buttonTarget.disabled = false
    }
}

new.html.erb

<%= turbo_frame_tag "new_conversation_conversation_comment", target: "_top" do %>
<%= form_with(model: [@conversation_comment.conversation, @conversation_comment], html: {class: 'form-inline'}, data: {controller: "reset_form", action: "turbo:submit-end->reset_form#reset"}) do |form| %>
 
  <div class="mt-1">
    <%= button_tag(type: :submit, class: 'btn btn-primary btn-sm', style: 'float: right; height: 36px !important; border-radius: 0px !important;') do %>
      Send
    <% end %>
  </div>
  <div style="overflow: hidden;">
    <%= form.text_field :content, placeholder: 'Type your message....', style: 'width: 100% !important; border-radius: 0 !important;' %>
  </div>
<% end %>

<script>
    $(document).ready(function () {
        $("#conversation_comment_content").emojioneArea({
            pickerPosition: "top",
            filtersPosition: "bottom",
            tones: false,
            autocomplete: false,
            inline: true,
            hidePickerOnBlur: false
        });
    });
</script>
<% end %>

conversation - show action.

<div class="col-6">
  <% if @conversation.present? %>
    <%= turbo_stream_from @conversation %>
    <div class="chat-room">
      <%= turbo_frame_tag "conversation" do %>
      <div class="text-center chat-room-title">
        <h5 class="text-light-charcoal"><%= @conversation.title %></h5>
      </div>
      <% end %>
      <div id="conversation_comments">
        <%= render @conversation.conversation_comments %>
      </div>
      <div class="chat-box">
        <%= turbo_frame_tag 'new_conversation_conversation_comment', src: new_conversation_conversation_comment_path(@conversation), target: "_top" %>
      </div>
    </div>
  <% end %>
</div>

<input placeholder="Type your message...." id="conversation_comment_content_1" style="width: 100% !important; border-radius: 0px !important; display: none;" type="text" name="conversation_comment[content]">

<div class="emojionearea emojionearea-inline" role="application">
<div class="emojionearea-editor" contenteditable="true" placeholder="Type your message...." tabindex="0" dir="ltr" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off">No</div>
<div class="emojionearea-button" title="Use the TAB key to insert emoji faster">
<div class="emojionearea-button-open">
</div>
<div class="emojionearea-button-close">
</div>
</div>

data: {controller: "reset_form", action: "turbo:submit-end->reset_form#reset}