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

feat: Add RTL Support to Widget (#11022)

Browse Source 
This PR adds RTL support to the web widget for improved right-to-left language compatibility, updates colors, and cleans up code.

Fixes https://linear.app/chatwoot/issue/CW-4089/rtl-issues-on-widget

https://github.com/chatwoot/chatwoot/issues/9791

Other PR: https://github.com/chatwoot/chatwoot/pull/11016
This commit is contained in:
Sivin Varghese
2025-03-21 22:09:03 +05:30
committed by GitHub
parent e4ea078e52
commit 3a693947b5
76 changed files with 966 additions and 2406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/javascript/shared/components/Branding.vue
View File

@@ -53,10 +53,10 @@ export default {
:href="brandRedirectURL"
rel="noreferrer noopener nofollow"
target="_blank"
class="branding--link justify-center items-center leading-3"
class="branding--link text-n-slate-11 hover:text-n-slate-12 cursor-pointer text-xs inline-flex grayscale-[1] hover:grayscale-0 hover:opacity-100 opacity-90 no-underline justify-center items-center leading-3"
>
<img
class="branding--image"
class="ltr:mr-1 rtl:ml-1 max-w-3 max-h-3"
:alt="globalConfig.brandName"
:src="globalConfig.logoThumbnail"
/>
@@ -67,29 +67,3 @@ export default {
</div>
<div v-else class="p-3" />
</template>
<style scoped lang="scss">
@import 'widget/assets/scss/variables.scss';
.branding--image {
margin-right: $space-smaller;
max-width: $space-slab;
max-height: $space-slab;
}
.branding--link {
color: $color-light-gray;
cursor: pointer;
display: inline-flex;
filter: grayscale(1);
font-size: $font-size-small;
opacity: 0.9;
text-decoration: none;
&:hover {
filter: grayscale(0);
opacity: 1;
color: $color-gray;
}
}
</style>

2
app/javascript/shared/components/Button.vue
View File

@@ -25,7 +25,7 @@ export default {
computed: {
buttonClassName() {
let className =
'text-white py-3 px-4 rounded shadow-sm leading-4 cursor-pointer disabled:opacity-50';
'text-white py-3 px-4 rounded-lg shadow-sm leading-4 cursor-pointer disabled:opacity-50';
if (this.type === 'clear') {
className = 'flex mx-auto mt-4 text-xs leading-3 w-auto text-black-600';
}

14
app/javascript/shared/components/CardButton.vue
View File

@@ -57,7 +57,7 @@ export default {
<button
v-else
:key="action.payload"
class="action-button button"
class="action-button button !bg-n-background dark:!bg-n-alpha-black1 text-n-brand"
:style="{ borderColor: widgetColor, color: widgetColor }"
@click="onClick"
>
@@ -66,17 +66,7 @@ export default {
</template>
<style scoped lang="scss">
@import 'widget/assets/scss/variables.scss';
.action-button {
align-items: center;
border-radius: $space-micro;
display: flex;
font-weight: $font-weight-medium;
justify-content: center;
margin-top: $space-smaller;
max-height: 34px;
padding: 0;
width: 100%;
@apply items-center rounded-lg flex font-medium justify-center mt-1 p-0 w-full;
}
</style>

59
app/javascript/shared/components/ChatCard.vue
View File

@@ -1,6 +1,5 @@
<script>
import CardButton from 'shared/components/CardButton.vue';
import { useDarkMode } from 'widget/composables/useDarkMode';
export default {
components: {
@@ -24,71 +23,27 @@ export default {
default: () => [],
},
},
setup() {
const { getThemeClass } = useDarkMode();
return { getThemeClass };
},
};
</script>
<template>
<div
class="card-message chat-bubble agent"
:class="getThemeClass('bg-white', 'dark:bg-slate-700')"
class="card-message chat-bubble agent bg-n-background dark:bg-n-solid-3 max-w-56 rounded-lg overflow-hidden"
>
<img class="media" :src="mediaUrl" />
<img
class="w-full object-contain max-h-[150px] rounded-[5px]"
:src="mediaUrl"
/>
<div class="card-body">
<h4
class="title"
:class="getThemeClass('text-black-900', 'dark:text-slate-50')"
class="!text-base !font-medium !mt-1 !mb-1 !leading-[1.5] text-n-slate-12"
>
{{ title }}
</h4>
<p
class="body"
:class="getThemeClass('text-black-700', 'dark:text-slate-100')"
>
<p class="!mb-1 text-n-slate-11">
{{ description }}
</p>
<CardButton v-for="action in actions" :key="action.id" :action="action" />
</div>
</div>
</template>
<style scoped lang="scss">
@import 'widget/assets/scss/variables.scss';
@import 'dashboard/assets/scss/mixins.scss';
.card-message {
max-width: 220px;
padding: $space-small;
border-radius: $space-small;
overflow: hidden;
.title {
font-size: $font-size-default;
font-weight: $font-weight-medium;
margin-top: $space-smaller;
margin-bottom: $space-smaller;
line-height: 1.5;
}
.body {
margin-bottom: $space-smaller;
}
.media {
@include border-light;
width: 100%;
object-fit: contain;
max-height: 150px;
border-radius: 5px;
}
.action-button + .action-button {
background: $color-white;
@include thin-border($color-woot);
color: $color-woot;
}
}
</style>

104
app/javascript/shared/components/ChatForm.vue
View File

@@ -1,7 +1,6 @@
<script>
import { mapGetters } from 'vuex';
import { getContrastingTextColor } from '@chatwoot/utils';
import { useDarkMode } from 'widget/composables/useDarkMode';
export default {
props: {
@@ -19,10 +18,6 @@ export default {
},
},
emits: ['submit'],
setup() {
const { getThemeClass } = useDarkMode();
return { getThemeClass };
},
data() {
return {
formValues: {},
@@ -36,10 +31,6 @@ export default {
textColor() {
return getContrastingTextColor(this.widgetColor);
},
inputColor() {
return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
${this.getThemeClass('text-black-900', 'dark:text-slate-50')}`;
},
isFormValid() {
return this.items.reduce((acc, { name }) => {
return !!this.formValues[name] && acc;
@@ -83,25 +74,23 @@ export default {
<template>
<div
class="form chat-bubble agent"
:class="getThemeClass('bg-white', 'dark:bg-slate-700')"
class="form chat-bubble agent w-full p-4 bg-n-background dark:bg-n-solid-3"
>
<form @submit.prevent="onSubmit">
<div
v-for="item in items"
:key="item.key"
class="form-block"
class="pb-2 w-full"
:class="{
'has-submitted': hasSubmitted,
}"
>
<label :class="getThemeClass('text-black-900', 'dark:text-slate-50')">{{
item.label
}}</label>
<label class="text-n-slate-12">
{{ item.label }}
</label>
<input
v-if="item.type === 'email'"
v-model="formValues[item.name]"
:class="inputColor"
:type="item.type"
:pattern="item.regex"
:title="item.title"
@@ -113,7 +102,6 @@ export default {
<input
v-else-if="item.type === 'text'"
v-model="formValues[item.name]"
:class="inputColor"
:required="item.required && 'required'"
:pattern="item.pattern"
:title="item.title"
@@ -125,7 +113,6 @@ export default {
<textarea
v-else-if="item.type === 'text_area'"
v-model="formValues[item.name]"
:class="inputColor"
:required="item.required && 'required'"
:title="item.title"
:name="item.name"
@@ -135,7 +122,6 @@ export default {
<select
v-else-if="item.type === 'select'"
v-model="formValues[item.name]"
:class="inputColor"
:required="item.required && 'required'"
>
<option
@@ -168,87 +154,31 @@ export default {
</template>
<style scoped lang="scss">
@import 'widget/assets/scss/variables.scss';
.form {
padding: $space-normal;
width: 80%;
.form-block {
width: 90%;
padding-bottom: $space-small;
}
label {
display: block;
font-weight: $font-weight-medium;
padding: $space-smaller 0;
text-transform: capitalize;
}
input,
textarea {
border-radius: $space-smaller;
border: 1px solid $color-border;
display: block;
font-family: inherit;
font-size: $font-size-default;
line-height: 1.5;
padding: $space-one;
width: 100%;
&:disabled {
background: $color-background-light;
}
}
textarea {
resize: none;
}
select {
width: 110%;
padding: $space-smaller;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid $color-border;
border-radius: $space-smaller;
font-family: inherit;
font-size: $space-normal;
font-weight: normal;
line-height: 1.5;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
background-origin: content-box;
background-position: right -1.6rem center;
background-repeat: no-repeat;
background-size: 9px 6px;
padding-right: 2.4rem;
@apply block font-medium py-1 px-0 capitalize;
}
.button {
font-size: $font-size-default;
@apply text-sm rounded-lg;
}
.error-message {
display: none;
margin-top: $space-smaller;
color: $color-error;
@apply text-n-ruby-9 mt-1 hidden;
}
input,
textarea,
select {
@apply dark:bg-n-alpha-black1;
}
.has-submitted {
input:invalid {
border: 1px solid $color-error;
}
input:invalid + .error-message {
display: block;
}
input:invalid,
textarea:invalid {
border: 1px solid $color-error;
@apply outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9;
}
input:invalid + .error-message,
textarea:invalid + .error-message {
display: block;
}

23
app/javascript/shared/components/ChatOption.vue
View File

@@ -40,35 +40,16 @@ export default {
</template>
<style scoped lang="scss">
@import 'widget/assets/scss/variables.scss';
.option {
border-radius: $space-jumbo;
border: 1px solid $color-woot;
float: left;
margin: $space-smaller;
max-width: 100%;
@apply rounded-[5rem] border border-solid border-n-brand ltr:float-left rtl:float-right m-1 max-w-full;
.option-button {
background: transparent;
border-radius: $space-large;
border: 0;
cursor: pointer;
height: auto;
line-height: 1.5;
min-height: $space-two * 2;
text-align: left;
white-space: normal;
@apply bg-transparent border-0 cursor-pointer h-auto leading-normal ltr:text-left rtl:text-right whitespace-normal rounded-[2rem] min-h-[2.5rem];
span {
display: inline-block;
vertical-align: middle;
}
> .icon {
margin-right: $space-smaller;
font-size: $font-size-medium;
}
}
}
</style>

80
app/javascript/shared/components/ChatOptions.vue
View File

@@ -43,66 +43,24 @@ export default {
</script>
<template>
<div class="options-message chat-bubble agent bg-white dark:bg-slate-700">
<div class="card-body">
<h4 class="title text-black-900 dark:text-slate-50">
<div
v-dompurify-html="formatMessage(title, false)"
class="message-content text-black-900 dark:text-slate-50"
/>
</h4>
<ul
v-if="!hideFields"
class="options"
:class="{ 'has-selected': !!selected }"
>
<ChatOption
v-for="option in options"
:key="option.id"
:action="option"
:is-selected="isSelected(option)"
@option-select="onClick"
/>
</ul>
</div>
<div
class="chat-bubble agent max-w-64 !py-2 !px-4 rounded-lg overflow-hidden mt-1 bg-n-background dark:bg-n-solid-3"
>
<h4 class="text-n-slate-12 text-sm font-normal my-1 leading-[1.5]">
<div
v-dompurify-html="formatMessage(title, false)"
class="text-n-slate-12"
/>
</h4>
<ul v-if="!hideFields" class="w-full">
<ChatOption
v-for="option in options"
:key="option.id"
:action="option"
:is-selected="isSelected(option)"
class="list-none p-0"
@option-select="onClick"
/>
</ul>
</div>
</template>
<style lang="scss">
@import 'dashboard/assets/scss/variables.scss';
.has-selected {
.option-button:not(.is-selected) {
color: $color-light-gray;
cursor: initial;
}
}
</style>
<style scoped lang="scss">
@import 'widget/assets/scss/variables.scss';
.options-message {
max-width: 17rem;
padding: $space-small $space-normal;
border-radius: $space-small;
overflow: hidden;
.title {
font-size: $font-size-default;
font-weight: $font-weight-normal;
margin-top: $space-smaller;
margin-bottom: $space-smaller;
line-height: 1.5;
}
.options {
width: 100%;
> li {
list-style: none;
padding: 0;
}
}
}
</style>

86
app/javascript/shared/components/CustomerSatisfaction.vue
View File

@@ -3,7 +3,6 @@ import { mapGetters } from 'vuex';
import Spinner from 'shared/components/Spinner.vue';
import { CSAT_RATINGS } from 'shared/constants/messages';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
import { useDarkMode } from 'widget/composables/useDarkMode';
import { getContrastingTextColor } from '@chatwoot/utils';
export default {
@@ -21,10 +20,6 @@ export default {
required: true,
},
},
setup() {
const { getThemeClass } = useDarkMode();
return { getThemeClass };
},
data() {
return {
email: '',
@@ -46,10 +41,6 @@ export default {
isButtonDisabled() {
return !(this.selectedRating && this.feedback);
},
inputColor() {
return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
${this.getThemeClass('text-black-900', 'dark:text-slate-50')}`;
},
textColor() {
return getContrastingTextColor(this.widgetColor);
},
@@ -107,17 +98,13 @@ export default {
<template>
<div
class="customer-satisfaction"
:class="getThemeClass('bg-white', 'dark:bg-slate-700')"
class="customer-satisfaction w-full bg-n-background dark:bg-n-solid-3 shadow-[0_0.25rem_6px_rgba(50,50,93,0.08),0_1px_3px_rgba(0,0,0,0.05)] ltr:rounded-bl-[0.25rem] rtl:rounded-br-[0.25rem] rounded-lg inline-block leading-[1.5] mt-1 border-t-2 border-t-n-brand border-solid"
:style="{ borderColor: widgetColor }"
>
<h6
class="title"
:class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
>
<h6 class="text-n-slate-12 text-sm font-medium pt-5 px-2.5 text-center">
{{ title }}
</h6>
<div class="ratings">
<div class="ratings flex justify-around py-5 px-4">
<button
v-for="rating in ratings"
:key="rating.key"
@@ -129,13 +116,11 @@ export default {
</div>
<form
v-if="!isFeedbackSubmitted"
class="feedback-form"
class="feedback-form flex"
@submit.prevent="onSubmit()"
>
<input
v-model="feedback"
class="form-input"
:class="inputColor"
:placeholder="$t('CSAT.PLACEHOLDER')"
@keydown.enter="onSubmit"
/>
@@ -156,80 +141,35 @@ export default {
</template>
<style lang="scss" scoped>
@import 'widget/assets/scss/variables.scss';
@import 'widget/assets/scss/mixins.scss';
.customer-satisfaction {
@include light-shadow;
border-bottom-left-radius: $space-smaller;
border-radius: $space-small;
border-top: $space-micro solid $color-woot;
color: $color-body;
display: inline-block;
line-height: 1.5;
margin-top: $space-smaller;
width: 80%;
.title {
font-size: $font-size-default;
font-weight: $font-weight-medium;
padding: $space-two $space-one 0;
text-align: center;
}
.ratings {
display: flex;
justify-content: space-around;
padding: $space-two $space-normal;
.emoji-button {
box-shadow: none;
filter: grayscale(100%);
font-size: $font-size-big;
outline: none;
@apply shadow-none grayscale text-2xl outline-none transition-all duration-200;
&.selected,
&:hover,
&:focus,
&:active {
filter: grayscale(0%);
transform: scale(1.32);
@apply grayscale-0 scale-[1.32];
}
&.disabled {
cursor: default;
opacity: 0.5;
pointer-events: none;
@apply cursor-not-allowed opacity-50 pointer-events-none;
}
}
}
.feedback-form {
display: flex;
input {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: $space-small;
border: 0;
border-top: 1px solid $color-border;
padding: $space-one;
width: 100%;
@apply h-10 dark:bg-n-alpha-black1 rtl:rounded-tl-[0] rtl:rounded-tr-[0] ltr:rounded-tr-[0] ltr:rounded-tl-[0] rtl:rounded-bl-[0] ltr:rounded-br-[0] ltr:rounded-bl-[0.25rem] rtl:rounded-br-[0.25rem] rounded-lg p-2.5 w-full focus:ring-0 focus:outline-n-brand;
&::placeholder {
color: $color-light-gray;
@apply text-n-slate-10;
}
}
.button {
appearance: none;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: $space-small;
font-size: $font-size-large;
height: auto;
margin-left: -1px;
@apply rtl:rounded-tr-[0] rtl:rounded-tl-[0] appearance-none ltr:rounded-tl-[0] ltr:rounded-tr-[0] rtl:rounded-br-[0] ltr:rounded-bl-[0] rounded-lg h-auto ltr:-ml-px rtl:-mr-px text-xl;
.spinner {
display: block;
@@ -240,10 +180,4 @@ export default {
}
}
}
@media (prefers-color-scheme: dark) {
.customer-satisfaction .feedback-form input {
border-top: 1px solid var(--b-500);
}
}
</style>

39
app/javascript/shared/components/DateSeparator.vue
View File

@@ -1,6 +1,5 @@
<script>
import { formatDate } from 'shared/helpers/DateHelper';
import { useDarkMode } from 'widget/composables/useDarkMode';
export default {
props: {
@@ -9,10 +8,6 @@ export default {
required: true,
},
},
setup() {
const { getThemeClass } = useDarkMode();
return { getThemeClass };
},
computed: {
formattedDate() {
return formatDate({
@@ -27,40 +22,8 @@ export default {
<template>
<div
class="date--separator"
:class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
class="text-sm text-n-slate-11 h-[50px] leading-[50px] relative text-center w-full before:content-[''] before:h-px before:absolute before:top-6 before:w-[calc((100%-120px)/2)] before:bg-n-slate-4 before:dark:bg-n-slate-6 before:left-0 after:content-[''] after:h-px after:absolute after:top-6 after:w-[calc((100%-120px)/2)] after:bg-n-slate-4 after:dark:bg-n-slate-6 after:right-0"
>
{{ formattedDate }}
</div>
</template>
<style lang="scss" scoped>
@import 'widget/assets/scss/variables';
.date--separator {
font-size: $font-size-default;
height: 50px;
line-height: 50px;
position: relative;
text-align: center;
width: 100%;
}
.date--separator::before,
.date--separator::after {
background-color: $color-border;
content: '';
height: 1px;
position: absolute;
top: 24px;
width: calc((100% - 120px) / 2);
}
.date--separator::before {
left: 0;
}
.date--separator::after {
right: 0;
}
</style>

30
app/javascript/shared/components/IframeLoader.vue
View File

@@ -11,6 +11,10 @@ export default {
type: String,
default: '',
},
isRtl: {
type: Boolean,
default: false,
},
},
data() {
return {
@@ -18,6 +22,32 @@ export default {
showEmptyState: !this.url,
};
},
watch: {
isRtl: {
immediate: true,
handler(value) {
this.$nextTick(() => {
const iframeElement = this.$el.querySelector('iframe');
if (iframeElement) {
iframeElement.onload = () => {
try {
const iframeDocument =
iframeElement.contentDocument ||
(iframeElement.contentWindow &&
iframeElement.contentWindow.document);
if (iframeDocument) {
iframeDocument.documentElement.dir = value ? 'rtl' : 'ltr';
}
} catch (e) {
// error
}
};
}
});
},
},
},
methods: {
handleIframeLoad() {
// Once loaded, the loading state is hidden

69
app/javascript/shared/components/Spinner.vue
View File

@@ -35,82 +35,41 @@ export default {
</template>
<style scoped lang="scss">
@import 'widget/assets/scss/variables.scss';
@mixin color-spinner() {
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
&:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: $space-medium;
height: $space-medium;
margin-top: -$space-one;
margin-left: -$space-one;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.8);
border-top-color: rgba(255, 255, 255, 0.3);
animation: spinner 0.9s linear infinite;
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
.spinner {
@include color-spinner();
position: relative;
display: inline-block;
width: $space-medium;
height: $space-medium;
padding: $zero $space-medium;
vertical-align: middle;
@apply relative inline-block w-6 h-6 align-middle;
&:before {
@apply border-n-slate-10 border-2 border-solid content-[''] box-border absolute top-[50%] left-[50%] rounded-full border-t-n-strong -ml-2.5 -mt-2.5 w-6 h-6 animate-[spinner_0.9s_linear_infinite];
}
&.message {
padding: $space-one;
top: 0;
left: 0;
margin: 0 auto;
margin-top: $space-slab;
background: $color-white;
border-radius: $space-large;
@apply p-2.5 top-0 left-0 mx-auto my-0 mt-3 bg-n-background rounded-[2rem];
&:before {
margin-top: -$space-slab;
margin-left: -$space-slab;
@apply -mt-3 -ml-3;
}
}
&.small {
width: $space-normal;
height: $space-normal;
@apply w-4 h-4;
&:before {
width: $space-normal;
height: $space-normal;
margin-top: -$space-small;
@apply w-4 h-4 -mt-2;
}
}
&.tiny {
width: $space-one;
height: $space-one;
padding: 0 $space-smaller;
@apply w-2.5 h-2.5 py-0 px-1;
&:before {
width: $space-one;
height: $space-one;
margin-top: -$space-small + $space-micro;
@apply w-2.5 h-2.5 -mt-1.5;
}
}
&.dark::before {
border-color: rgba(0, 0, 0, 0.7);
border-top-color: rgba(0, 0, 0, 0.2);
}
}
</style>

12
app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap
View File

@@ -2,18 +2,8 @@
exports[`DateSeparator > date separator snapshot 1`] = `
<div
class="date--separator text-slate-700"
data-v-b24b73fa=""
class="text-sm text-n-slate-11 h-[50px] leading-[50px] relative text-center w-full before:content-[''] before:h-px before:absolute before:top-6 before:w-[calc((100%-120px)/2)] before:bg-n-slate-4 before:dark:bg-n-slate-6 before:left-0 after:content-[''] after:h-px after:absolute after:top-6 after:w-[calc((100%-120px)/2)] after:bg-n-slate-4 after:dark:bg-n-slate-6 after:right-0"
>
Nov 18, 2019
</div>
`;
exports[`dateSeparator > date separator snapshot 1`] = `
<div
class="date--separator text-slate-700"
data-v-b24b73fa=""
>
Nov 18, 2019
</div>
`;