LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Use widget color for chat input focus state (#13214)

Browse Source
This commit is contained in:
Sivin Varghese
2026-01-14 14:33:56 +05:30
committed by GitHub
parent bddf06907b
commit daaa18b18a
2 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/widget/App.vue
View File

@@ -82,6 +82,7 @@ export default {
const { websiteToken, locale, widgetColor } = window.chatwootWebChannel; const { websiteToken, locale, widgetColor } = window.chatwootWebChannel;
this.setLocale(locale); this.setLocale(locale);
this.setWidgetColor(widgetColor); this.setWidgetColor(widgetColor);
this.setWidgetColorVariable(widgetColor);
setHeader(window.authToken); setHeader(window.authToken);
if (this.isIFrame) { if (this.isIFrame) {
this.registerListeners(); this.registerListeners();
@@ -114,6 +115,14 @@ export default {
'resetCampaign', 'resetCampaign',
]), ]),
...mapActions('agent', ['fetchAvailableAgents']), ...mapActions('agent', ['fetchAvailableAgents']),
setWidgetColorVariable(widgetColor) {
if (widgetColor) {
document.documentElement.style.setProperty(
'--widget-color',
widgetColor
);
}
},
scrollConversationToBottom() { scrollConversationToBottom() {
const container = this.$el.querySelector('.conversation-wrap'); const container = this.$el.querySelector('.conversation-wrap');
container.scrollTop = container.scrollHeight; container.scrollTop = container.scrollHeight;

2
app/javascript/widget/components/ChatInputWrap.vue
View File

@@ -130,7 +130,7 @@ export default {
<div <div
class="items-center flex ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2 rounded-[7px] transition-all duration-200 bg-n-background !shadow-[0_0_0_1px,0_0_2px_3px]" class="items-center flex ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2 rounded-[7px] transition-all duration-200 bg-n-background !shadow-[0_0_0_1px,0_0_2px_3px]"
:class="{ :class="{
'!shadow-n-brand dark:!shadow-n-brand': isFocused, '!shadow-[var(--widget-color,#2781f6)]': isFocused,
'!shadow-n-strong dark:!shadow-n-strong': !isFocused, '!shadow-n-strong dark:!shadow-n-strong': !isFocused,
}" }"
@keydown.esc="hideEmojiPicker" @keydown.esc="hideEmojiPicker"