Stanko K.R.
81 lines
1.9 KiB
JavaScript
81 lines
1.9 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
import { onNextEventLoopTick, nextFrame } from "helpers/timing_helpers"
|
|
|
|
export default class extends Controller {
|
|
static targets = [ "textInput", "submitButton", "clientMessageIdInput" ]
|
|
static outlets = [ "conversation--messages" ]
|
|
|
|
#submittingMessage
|
|
|
|
connect() {
|
|
this.#submittingMessage = false
|
|
onNextEventLoopTick(() => this.textInputTarget.focus())
|
|
}
|
|
|
|
submit(event) {
|
|
event.preventDefault()
|
|
|
|
if (!this.#submittingMessage) {
|
|
this.#submittingMessage = true
|
|
this.#submitMessage()
|
|
}
|
|
}
|
|
|
|
submitEnd(event) {
|
|
this.#submittingMessage = false
|
|
|
|
if (event.detail.success) {
|
|
this.#reset()
|
|
} else {
|
|
this.#failPendingMessage(
|
|
this.clientMessageIdInputTarget.value,
|
|
event.detail.fetchResponse
|
|
)
|
|
}
|
|
}
|
|
|
|
async #submitMessage() {
|
|
if (this.#validInput()) {
|
|
const messageId = this.#generateMessageId()
|
|
|
|
await this.conversationMessagesOutlet.insertPendingMessage(messageId, this.#messageText)
|
|
await nextFrame()
|
|
this.conversationMessagesOutlet.scrollToBottom()
|
|
|
|
this.clientMessageIdInputTarget.value = messageId
|
|
this.element.requestSubmit()
|
|
}
|
|
}
|
|
|
|
get #messageText() {
|
|
return this.textInputTarget.value
|
|
}
|
|
|
|
#validInput() {
|
|
return this.#messageText.trim().length > 0
|
|
}
|
|
|
|
#generateMessageId() {
|
|
return Math.random().toString(36).slice(2)
|
|
}
|
|
|
|
#reset() {
|
|
this.textInputTarget.value = ""
|
|
this.clientMessageIdInputTarget.value = ""
|
|
}
|
|
|
|
async #failPendingMessage(clientMessageId, response) {
|
|
let errorMessage = null
|
|
|
|
if (response?.contentType?.includes('application/json')) {
|
|
const error = JSON.parse(await response.responseText)
|
|
errorMessage = error.error
|
|
}
|
|
|
|
this.conversationMessagesOutlet.failPendingMessage(
|
|
this.clientMessageIdInputTarget.value,
|
|
errorMessage
|
|
)
|
|
}
|
|
}
|