df4c8cf58b
# Pull Request Template ## Description 1. This PR is an enhancement to https://github.com/chatwoot/chatwoot/pull/13045 It strips unsupported formatting from **message signatures** based on each channel’s formatting capabilities defined in the `FORMATTING` config 2. Remove usage of plain editor in Compose new conversation modal Only the following signature elements are considered: <strong>bold (<code inline="">strong</code>), italic (<code inline="">em</code>), links (<code inline="">link</code>), images (<code inline="">image</code>)</strong>.</p> Any formatting not supported by the target channel is automatically removed before the signature is appended. <h3>Channel-wise Signature Formatting Support</h3> Channel | Keeps in Signature | Strips from Signature -- | -- | -- Email | bold, italic, links, images | — WebWidget | bold, italic, links, images | — API | bold, italic | links, images WhatsApp | bold, italic | links, images Telegram | bold, italic, links | images Facebook | bold, italic | links, images Instagram | bold, italic | links, images Line | bold, italic | links, images SMS | — | everything Twilio SMS | — | everything Twitter/X | — | everything <hr> <h3>📝 Note</h3> <blockquote> <p>Message signatures only support <strong>bold, italic, links, and images</strong>.<br> Other formatting options available in the editor (lists, code blocks, strike-through, etc.) do <strong>not apply</strong> to signatures and are ignored.</p> </blockquote> ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ### Loom video https://www.loom.com/share/d325ab86ca514c6d8f90dfe72a8928dd ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
168 lines
4.0 KiB
JavaScript
168 lines
4.0 KiB
JavaScript
export const INBOX_TYPES = {
|
|
WEB: 'Channel::WebWidget',
|
|
FB: 'Channel::FacebookPage',
|
|
TWITTER: 'Channel::TwitterProfile',
|
|
TWILIO: 'Channel::TwilioSms',
|
|
WHATSAPP: 'Channel::Whatsapp',
|
|
API: 'Channel::Api',
|
|
EMAIL: 'Channel::Email',
|
|
TELEGRAM: 'Channel::Telegram',
|
|
LINE: 'Channel::Line',
|
|
SMS: 'Channel::Sms',
|
|
INSTAGRAM: 'Channel::Instagram',
|
|
VOICE: 'Channel::Voice',
|
|
};
|
|
|
|
export const TWILIO_CHANNEL_MEDIUM = {
|
|
WHATSAPP: 'whatsapp',
|
|
SMS: 'sms',
|
|
};
|
|
|
|
const INBOX_ICON_MAP_FILL = {
|
|
[INBOX_TYPES.WEB]: 'i-ri-global-fill',
|
|
[INBOX_TYPES.FB]: 'i-ri-messenger-fill',
|
|
[INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-fill',
|
|
[INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-fill',
|
|
[INBOX_TYPES.API]: 'i-ri-cloudy-fill',
|
|
[INBOX_TYPES.EMAIL]: 'i-ri-mail-fill',
|
|
[INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-fill',
|
|
[INBOX_TYPES.LINE]: 'i-ri-line-fill',
|
|
[INBOX_TYPES.INSTAGRAM]: 'i-ri-instagram-fill',
|
|
[INBOX_TYPES.VOICE]: 'i-ri-phone-fill',
|
|
};
|
|
|
|
const DEFAULT_ICON_FILL = 'i-ri-chat-1-fill';
|
|
|
|
const INBOX_ICON_MAP_LINE = {
|
|
[INBOX_TYPES.WEB]: 'i-ri-global-line',
|
|
[INBOX_TYPES.FB]: 'i-ri-messenger-line',
|
|
[INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-line',
|
|
[INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-line',
|
|
[INBOX_TYPES.API]: 'i-ri-cloudy-line',
|
|
[INBOX_TYPES.EMAIL]: 'i-ri-mail-line',
|
|
[INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-line',
|
|
[INBOX_TYPES.LINE]: 'i-ri-line-line',
|
|
[INBOX_TYPES.INSTAGRAM]: 'i-ri-instagram-line',
|
|
[INBOX_TYPES.VOICE]: 'i-ri-phone-line',
|
|
};
|
|
|
|
const DEFAULT_ICON_LINE = 'i-ri-chat-1-line';
|
|
|
|
export const getInboxSource = (type, phoneNumber, inbox) => {
|
|
switch (type) {
|
|
case INBOX_TYPES.WEB:
|
|
return inbox.website_url || '';
|
|
|
|
case INBOX_TYPES.TWILIO:
|
|
case INBOX_TYPES.WHATSAPP:
|
|
case INBOX_TYPES.VOICE:
|
|
return phoneNumber || '';
|
|
|
|
case INBOX_TYPES.EMAIL:
|
|
return inbox.email || '';
|
|
|
|
default:
|
|
return '';
|
|
}
|
|
};
|
|
export const getReadableInboxByType = (type, phoneNumber) => {
|
|
switch (type) {
|
|
case INBOX_TYPES.WEB:
|
|
return 'livechat';
|
|
|
|
case INBOX_TYPES.FB:
|
|
return 'facebook';
|
|
|
|
case INBOX_TYPES.TWITTER:
|
|
return 'twitter';
|
|
|
|
case INBOX_TYPES.TWILIO:
|
|
return phoneNumber?.startsWith('whatsapp') ? 'whatsapp' : 'sms';
|
|
|
|
case INBOX_TYPES.WHATSAPP:
|
|
return 'whatsapp';
|
|
|
|
case INBOX_TYPES.API:
|
|
return 'api';
|
|
|
|
case INBOX_TYPES.EMAIL:
|
|
return 'email';
|
|
|
|
case INBOX_TYPES.TELEGRAM:
|
|
return 'telegram';
|
|
|
|
case INBOX_TYPES.LINE:
|
|
return 'line';
|
|
|
|
case INBOX_TYPES.VOICE:
|
|
return 'voice';
|
|
|
|
default:
|
|
return 'chat';
|
|
}
|
|
};
|
|
|
|
export const getInboxClassByType = (type, phoneNumber) => {
|
|
switch (type) {
|
|
case INBOX_TYPES.WEB:
|
|
return 'globe-desktop';
|
|
|
|
case INBOX_TYPES.FB:
|
|
return 'brand-facebook';
|
|
|
|
case INBOX_TYPES.TWITTER:
|
|
return 'brand-twitter';
|
|
|
|
case INBOX_TYPES.TWILIO:
|
|
return phoneNumber?.startsWith('whatsapp')
|
|
? 'brand-whatsapp'
|
|
: 'brand-sms';
|
|
|
|
case INBOX_TYPES.WHATSAPP:
|
|
return 'brand-whatsapp';
|
|
|
|
case INBOX_TYPES.API:
|
|
return 'cloud';
|
|
|
|
case INBOX_TYPES.EMAIL:
|
|
return 'mail';
|
|
|
|
case INBOX_TYPES.TELEGRAM:
|
|
return 'brand-telegram';
|
|
|
|
case INBOX_TYPES.LINE:
|
|
return 'brand-line';
|
|
|
|
case INBOX_TYPES.INSTAGRAM:
|
|
return 'brand-instagram';
|
|
|
|
case INBOX_TYPES.VOICE:
|
|
return 'phone';
|
|
|
|
default:
|
|
return 'chat';
|
|
}
|
|
};
|
|
|
|
export const getInboxIconByType = (type, medium, variant = 'fill') => {
|
|
const iconMap =
|
|
variant === 'fill' ? INBOX_ICON_MAP_FILL : INBOX_ICON_MAP_LINE;
|
|
const defaultIcon =
|
|
variant === 'fill' ? DEFAULT_ICON_FILL : DEFAULT_ICON_LINE;
|
|
|
|
// Special case for Twilio (whatsapp and sms)
|
|
if (type === INBOX_TYPES.TWILIO && medium === 'whatsapp') {
|
|
return iconMap[INBOX_TYPES.WHATSAPP];
|
|
}
|
|
|
|
return iconMap[type] ?? defaultIcon;
|
|
};
|
|
|
|
export const getInboxWarningIconClass = (type, reauthorizationRequired) => {
|
|
const allowedInboxTypes = [INBOX_TYPES.FB, INBOX_TYPES.EMAIL];
|
|
if (allowedInboxTypes.includes(type) && reauthorizationRequired) {
|
|
return 'warning';
|
|
}
|
|
return '';
|
|
};
|