Files
gochat/frontend/app/javascript/shared/mixins/inboxMixin.js
T
rogee 321c61aaae Vendor Chatwoot Vue 3 frontend into frontend/
Copy the Chatwoot (v4.14.0) frontend runnable subset into frontend/ for
customization:
- app/javascript/ (Vue SPA: dashboard, widget, sdk, portal, superadmin)
- app/views/ (ERB templates for vite-plugin-ruby entrypoint resolution)
- app/helpers/, app/assets/ (Rails view helpers, static assets)
- enterprise/ (Enterprise edition frontend overlay)
- config/vite.json, vite.config.ts, bin/vite (Vite-Rails toolchain)
- package.json, pnpm-lock.yaml, tailwind/postcss/eslint configs
- Gemfile, Gemfile.lock (vite_rails gem for bin/vite binstub)

Excluded Rails backend: controllers, models, services, jobs, mailers,
policies, db, lib, spec, public, node_modules.

Update references to the new frontend location:
- .gitignore: exclude frontend build artifacts (node_modules, tmp, packs),
  keep frontend/bin/ and frontend/vendor/ via negation
- backend/scripts/parity_frontend_smoke.sh: CHATWOOT_DIR default
  reference/chatwoot -> ../frontend
- backend/scripts/parity_frontend_browser_smoke.mjs: same default update
- AGENTS.md: add frontend section with Rails/Vite coupling notes
- README: architecture tree includes frontend/
2026-07-07 14:56:01 +08:00

144 lines
4.0 KiB
JavaScript

import { INBOX_TYPES, isVoiceCallEnabled } from 'dashboard/helper/inbox';
export const INBOX_FEATURES = {
REPLY_TO: 'replyTo',
REPLY_TO_OUTGOING: 'replyToOutgoing',
};
// This is a single source of truth for inbox features
// This is used to check if a feature is available for a particular inbox or not
export const INBOX_FEATURE_MAP = {
[INBOX_FEATURES.REPLY_TO]: [
INBOX_TYPES.FB,
INBOX_TYPES.WEB,
INBOX_TYPES.TWITTER,
INBOX_TYPES.WHATSAPP,
INBOX_TYPES.TELEGRAM,
INBOX_TYPES.TIKTOK,
INBOX_TYPES.API,
],
[INBOX_FEATURES.REPLY_TO_OUTGOING]: [
INBOX_TYPES.WEB,
INBOX_TYPES.TWITTER,
INBOX_TYPES.WHATSAPP,
INBOX_TYPES.TELEGRAM,
INBOX_TYPES.TIKTOK,
INBOX_TYPES.API,
],
};
export default {
computed: {
channelType() {
return this.inbox.channel_type;
},
whatsAppAPIProvider() {
return this.inbox.provider || '';
},
isAMicrosoftInbox() {
return this.isAnEmailChannel && this.inbox.provider === 'microsoft';
},
isAGoogleInbox() {
return this.isAnEmailChannel && this.inbox.provider === 'google';
},
isAPIInbox() {
return this.channelType === INBOX_TYPES.API;
},
isATwitterInbox() {
return this.channelType === INBOX_TYPES.TWITTER;
},
isAFacebookInbox() {
return this.channelType === INBOX_TYPES.FB;
},
isAWebWidgetInbox() {
return this.channelType === INBOX_TYPES.WEB;
},
isATwilioChannel() {
return this.channelType === INBOX_TYPES.TWILIO;
},
isALineChannel() {
return this.channelType === INBOX_TYPES.LINE;
},
voiceCallEnabled() {
return isVoiceCallEnabled(this.inbox);
},
isAnEmailChannel() {
return this.channelType === INBOX_TYPES.EMAIL;
},
isATelegramChannel() {
return this.channelType === INBOX_TYPES.TELEGRAM;
},
isATwilioSMSChannel() {
const { medium: medium = '' } = this.inbox;
return this.isATwilioChannel && medium === 'sms';
},
isASmsInbox() {
return this.channelType === INBOX_TYPES.SMS || this.isATwilioSMSChannel;
},
isATwilioWhatsAppChannel() {
const { medium: medium = '' } = this.inbox;
return this.isATwilioChannel && medium === 'whatsapp';
},
isAWhatsAppCloudChannel() {
return (
this.channelType === INBOX_TYPES.WHATSAPP &&
this.whatsAppAPIProvider === 'whatsapp_cloud'
);
},
is360DialogWhatsAppChannel() {
return (
this.channelType === INBOX_TYPES.WHATSAPP &&
this.whatsAppAPIProvider === 'default'
);
},
chatAdditionalAttributes() {
const { additional_attributes: additionalAttributes } = this.chat || {};
return additionalAttributes || {};
},
isTwitterInboxTweet() {
return this.chatAdditionalAttributes.type === 'tweet';
},
twilioBadge() {
return `${this.isATwilioSMSChannel ? 'sms' : 'whatsapp'}`;
},
twitterBadge() {
return `${this.isTwitterInboxTweet ? 'twitter-tweet' : 'twitter-dm'}`;
},
facebookBadge() {
return this.chatAdditionalAttributes.type || 'facebook';
},
inboxBadge() {
let badgeKey = '';
if (this.isATwitterInbox) {
badgeKey = this.twitterBadge;
} else if (this.isAFacebookInbox) {
badgeKey = this.facebookBadge;
} else if (this.isATwilioChannel) {
badgeKey = this.twilioBadge;
} else if (this.isAWhatsAppChannel) {
badgeKey = 'whatsapp';
} else if (this.isATiktokChannel) {
badgeKey = 'tiktok';
}
return badgeKey || this.channelType;
},
isAWhatsAppChannel() {
return (
this.channelType === INBOX_TYPES.WHATSAPP ||
this.isATwilioWhatsAppChannel
);
},
isAnInstagramChannel() {
return this.channelType === INBOX_TYPES.INSTAGRAM;
},
isATiktokChannel() {
return this.channelType === INBOX_TYPES.TIKTOK;
},
},
methods: {
inboxHasFeature(feature) {
return INBOX_FEATURE_MAP[feature]?.includes(this.channelType) ?? false;
},
},
};