mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-04 13:07:55 +00:00
5ebe8c71ec
# Pull Request Template
## Description
This PR allows users to dynamically pass custom welcome and availability
messages, along with UI feature toggles, via `window.chatwootSettings`.
If any of the following settings are provided, the widget will use them;
otherwise, it falls back to default behavior.
**New options:**
```
window.chatwootSettings = {
welcomeTitle: 'Need help?', // Custom widget title
welcomeDescription: 'We’re here to support you.', // Subtitle in the header
availableMessage: 'We’re online and ready to chat!', // Shown when team is online
unavailableMessage: 'We’re currently offline.', // Shown when team is unavailable
enableFileUpload: true, // Enable file attachments
enableEmojiPicker: true, // Enable emoji picker in chat input
enableEndConversation: true // Allow users to end the conversation
}
```
Fixes
https://linear.app/chatwoot/issue/CW-4589/add-options-to-windowchatwootsettings
## Type of change
- [x] New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
### Loom video
https://www.loom.com/share/413fc4aa59384366b071450bd19d1bf8?sid=ff30fb4c-267c-4beb-80ab-d6f583aa960d
## Checklist:
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] 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
- [ ] 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>
126 lines
3.2 KiB
Vue
126 lines
3.2 KiB
Vue
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
|
|
import { popoutChatWindow } from '../helpers/popoutHelper';
|
|
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
|
import configMixin from 'widget/mixins/configMixin';
|
|
import { CONVERSATION_STATUS } from 'shared/constants/messages';
|
|
|
|
export default {
|
|
name: 'HeaderActions',
|
|
components: { FluentIcon },
|
|
mixins: [configMixin],
|
|
props: {
|
|
showPopoutButton: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
showEndConversationButton: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
conversationAttributes: 'conversationAttributes/getConversationParams',
|
|
canUserEndConversation: 'appConfig/getCanUserEndConversation',
|
|
}),
|
|
canLeaveConversation() {
|
|
return [
|
|
CONVERSATION_STATUS.OPEN,
|
|
CONVERSATION_STATUS.SNOOZED,
|
|
CONVERSATION_STATUS.PENDING,
|
|
].includes(this.conversationStatus);
|
|
},
|
|
isIframe() {
|
|
return IFrameHelper.isIFrame();
|
|
},
|
|
isRNWebView() {
|
|
return RNHelper.isRNWebView();
|
|
},
|
|
showHeaderActions() {
|
|
return this.isIframe || this.isRNWebView || this.hasWidgetOptions;
|
|
},
|
|
conversationStatus() {
|
|
return this.conversationAttributes.status;
|
|
},
|
|
hasWidgetOptions() {
|
|
return this.showPopoutButton || this.conversationStatus === 'open';
|
|
},
|
|
},
|
|
methods: {
|
|
popoutWindow() {
|
|
this.closeWindow();
|
|
const {
|
|
location: { origin },
|
|
chatwootWebChannel: { websiteToken },
|
|
authToken,
|
|
} = window;
|
|
popoutChatWindow(
|
|
origin,
|
|
websiteToken,
|
|
this.$root.$i18n.locale,
|
|
authToken
|
|
);
|
|
},
|
|
closeWindow() {
|
|
if (IFrameHelper.isIFrame()) {
|
|
IFrameHelper.sendMessage({ event: 'closeWindow' });
|
|
} else if (RNHelper.isRNWebView) {
|
|
RNHelper.sendMessage({ type: 'close-widget' });
|
|
}
|
|
},
|
|
resolveConversation() {
|
|
this.$store.dispatch('conversation/resolveConversation');
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<!-- eslint-disable-next-line vue/no-root-v-if -->
|
|
<template>
|
|
<div v-if="showHeaderActions" class="actions flex items-center gap-3">
|
|
<button
|
|
v-if="
|
|
canLeaveConversation &&
|
|
canUserEndConversation &&
|
|
hasEndConversationEnabled &&
|
|
showEndConversationButton
|
|
"
|
|
class="button transparent compact"
|
|
:title="$t('END_CONVERSATION')"
|
|
@click="resolveConversation"
|
|
>
|
|
<FluentIcon icon="sign-out" size="22" class="text-n-slate-12" />
|
|
</button>
|
|
<button
|
|
v-if="showPopoutButton"
|
|
class="button transparent compact new-window--button"
|
|
@click="popoutWindow"
|
|
>
|
|
<FluentIcon icon="open" size="22" class="text-n-slate-12" />
|
|
</button>
|
|
<button
|
|
class="button transparent compact close-button"
|
|
:class="{
|
|
'rn-close-button': isRNWebView,
|
|
}"
|
|
@click="closeWindow"
|
|
>
|
|
<FluentIcon icon="dismiss" size="24" class="text-n-slate-12" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.actions {
|
|
.close-button {
|
|
display: none;
|
|
}
|
|
|
|
.rn-close-button {
|
|
display: block !important;
|
|
}
|
|
}
|
|
</style>
|