iachat/app/javascript/dashboard/helper/commons.js
Gabriel Jablonski 11e9932e9b
feat(whatsapp): show contact typing and recording indicators via baileys presence (#264)
* feat(whatsapp): show contact typing and recording indicators via baileys presence

Subscribe to WhatsApp presence updates via the baileys-api provider to
display real-time typing and recording indicators in the dashboard.

- Handle presence.update webhook events (composing, recording, paused,
  available) and broadcast via ActionCable
- Add conversation.recording event to ActionCable, webhook, and channel
  listeners for parity with typing_on/typing_off
- Show "typing..." / "recording..." in green text on the chat list,
  replacing the message preview
- Show "X is typing" / "X is recording audio" in the conversation view
- Add presence_subscribe provider config option (default off) to gate
  all subscription calls to the baileys-api
- Subscribe to presence on conversation open and periodically (1 min)
  for the top 10 chat list conversations
- Consolidate contact LID from presence.update jidAlt payload
- Prevent echo-back of contact typing events to the channel

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: address review feedback

- Filter chat list typing indicator to contact-only events
- Add dedupe to presence subscribe bulk calls
- Use strong parameters for conversation_ids
- Remove redundant YAML quotes in swagger webhook enum

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: address review feedback

- Extract phone from data[:id] when JID is @s.whatsapp.net (fallback
  when jidAlt is absent)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: address review feedback

- Filter recording users in getTypingUsersText to show correct names
- Add 10s timeout to presence_subscribe HTTP request

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: scope typing timer per user instead of per conversation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: make presence subscribe best-effort with rescue per channel

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: address review feedback

- Add messagePreviewClass to typing preview for consistent padding
- Fix specs to use WebMock assertions instead of instance spying

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-13 11:38:11 -03:00

117 lines
2.8 KiB
JavaScript

/* eslint no-param-reassign: 0 */
import getUuid from 'widget/helpers/uuid';
import { MESSAGE_STATUS, MESSAGE_TYPE } from 'shared/constants/messages';
export default () => {
if (!Array.prototype.last) {
Object.assign(Array.prototype, {
last() {
return this[this.length - 1];
},
});
}
};
export const isEmptyObject = obj =>
Object.keys(obj).length === 0 && obj.constructor === Object;
export const isJSONValid = value => {
try {
JSON.parse(value);
} catch (e) {
return false;
}
return true;
};
export const getTypingUsersText = (users = []) => {
const anyRecording = users.some(u => u.recording);
const prefix = anyRecording ? 'RECORDING' : 'TYPING';
const activeUsers = anyRecording ? users.filter(u => u.recording) : users;
const count = activeUsers.length;
const [firstUser, secondUser] = activeUsers;
if (count === 1) {
return [`${prefix}.ONE`, { user: firstUser.name }];
}
if (count === 2) {
return [
`${prefix}.TWO`,
{ user: firstUser.name, secondUser: secondUser.name },
];
}
return [`${prefix}.MULTIPLE`, { user: firstUser.name, count: count - 1 }];
};
export const createPendingMessage = data => {
const timestamp = Math.floor(new Date().getTime() / 1000);
const tempMessageId = getUuid();
const { message, file } = data;
const tempAttachments = [{ id: tempMessageId }];
const pendingMessage = {
...data,
content: message || null,
id: tempMessageId,
echo_id: tempMessageId,
status: MESSAGE_STATUS.PROGRESS,
created_at: timestamp,
message_type: MESSAGE_TYPE.OUTGOING,
conversation_id: data.conversationId,
attachments: file ? tempAttachments : null,
};
return pendingMessage;
};
export const convertToAttributeSlug = text => {
return text
.toLowerCase()
.replace(/[^\w ]+/g, '')
.replace(/ +/g, '_');
};
export const convertToCategorySlug = text => {
return text
.toLowerCase()
.replace(/[^\w ]+/g, '')
.replace(/ +/g, '-');
};
export const convertToPortalSlug = text => {
return text
.toLowerCase()
.replace(/[^\w ]+/g, '')
.replace(/ +/g, '-');
};
/**
* Strip curly braces, commas and leading/trailing whitespace from a search key.
* Eg. "{{contact.name}}," => "contact.name"
* @param {string} searchKey
* @returns {string}
*/
export const sanitizeVariableSearchKey = (searchKey = '') => {
return searchKey
.replace(/[{}]/g, '') // remove all curly braces
.replace(/,/g, '') // remove commas
.trim();
};
/**
* Convert underscore-separated string to title case.
* Eg. "round_robin" => "Round Robin"
* @param {string} str
* @returns {string}
*/
export const formatToTitleCase = str => {
return (
str
?.replace(/_/g, ' ')
.replace(/\b\w/g, l => l.toUpperCase())
.trim() || ''
);
};