InternalChat

<template v-if="!hasDpsp">
  <InternalChatContact
    :isActive="interChatIsActive"
    @setInternalChatValue="setInternalChatValue()"
  />

  <!-- Barra fixa 'Chat Interno' — aparece quando painel fechado e usuário está logado -->
  <div
    v-if="validate && !twoFactorActivated && !interChatIsActive && !isChatAttendancePage"
    class="chat-internal bg-primary select-none cursor-pointer"
    @click="openInternalChat"
  >
    <div class="flex w-full">
      <vs-avatar :badge="chatNotification" class="icon-navbar bg-primary"/>
      <span class="text-white align-self-center">Chat Interno</span>
      <feather-icon class="text-white" icon="ChevronUpIcon"/>
    </div>
  </div>
</template>

<!-- InternalChatMessage nunca é usado diretamente em views externas. -->
<InternalChatMessage
  :selectedUser="selectedUser"
  :upInternalChat="openInternalChat"
  @backInternalChat="closeInternalChat()"
  @closeListChat="closeListChat"
/>

<!-- Bolha do agente (direita) -->
<InternalChatLogItem
  :chat="chatMsg"
  :index="idx"
  type="agent-agent"
/>

<!-- Bolha do cliente (esquerda) -->
<InternalChatLogItem
  :chat="chatMsg"
  :index="idx"
  type="customer-agent"
/>

<!-- Com reply — mensagem citada no slot padrão -->
<InternalChatLogItem
  :chat="replyMsg"
  :index="idx"
  :principalIndex="parentMsgId"
>
  <InternalChatLogItem
    :chat="quotedMsg"
    :index="quotedIdx"
    :hiddenReply="true"
  />
</InternalChatLogItem>

<!-- Dentro de InternalChatLog -->
<div
  v-if="pinnedMessages.length"
  class="pinned-messages-bar"
  @click="scrollToPinned"
>
  <feather-icon icon="MapPinIcon" class="text-warning" />
  <span class="pinned-text">{{ currentPinned.message | truncate(25) }}</span>
  <feather-icon
    icon="ChevronRightIcon"
    class="text-primary"
    @click.stop="nextPinned"
  />
  <feather-icon
    icon="XIcon"
    class="text-danger"
    @click.stop="unpinMessage(currentPinned.id)"
  />
</div>

<!-- Barra de input em modo gravação -->
<div v-if="isRecording" class="audio-recording-bar">
  <feather-icon
    icon="XCircleIcon"
    class="text-danger cursor-pointer"
    @click="cancelRecording"
  />
  <span class="recording-dot"></span>
  <span class="recording-timer">{{ recordingTime }}</span>
  <feather-icon
    icon="CheckCircleIcon"
    class="text-success cursor-pointer"
    @click="sendAudio"
  />
</div>

<!-- Barra normal -->
<div v-else class="input-bar">
  <feather-icon icon="PaperclipIcon" @click="openAttachment" />
  <vs-input v-model="message" placeholder="Digite uma mensagem..." />
  <feather-icon icon="MicIcon" @click="startRecording" />
  <vs-button @click="sendMessage">
    <feather-icon icon="SendIcon" />
  </vs-button>
</div>