akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: additional colors

Browse Source
This commit is contained in:
Shivam Mishra
2026-01-16 13:28:56 +05:30
parent ae76548f8e
commit 28cc377a8d
5 changed files with 74 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/message/bubbles/Audio.vue
+14 -2
View File
@@ -3,19 +3,31 @@ import { computed } from 'vue';
import BaseBubble from './Base.vue';
import AudioChip from 'next/message/chips/Audio.vue';
import { useMessageContext } from '../provider.js';
import { MESSAGE_VARIANTS } from '../constants';
const { attachments } = useMessageContext();
const { attachments, variant } = useMessageContext();
const attachment = computed(() => {
return attachments.value[0];
});
const textClass = computed(() => {
const textClassMap = {
[MESSAGE_VARIANTS.AGENT]: 'text-[rgb(var(--bubble-agent-text))]',
[MESSAGE_VARIANTS.USER]: 'text-[rgb(var(--bubble-user-text))]',
[MESSAGE_VARIANTS.PRIVATE]: 'text-[rgb(var(--bubble-private-text))]',
[MESSAGE_VARIANTS.BOT]: 'text-[rgb(var(--bubble-bot-text))]',
};
return textClassMap[variant.value] || 'text-[rgb(var(--bubble-agent-text))]';
});
</script>
<template>
<BaseBubble class="bg-transparent" data-bubble-name="audio">
<AudioChip
:attachment="attachment"
class="p-2 text-n-slate-12 skip-context-menu"
class="p-2 skip-context-menu"
:class="textClass"
/>
</BaseBubble>
</template>
app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
+37 -4
View File
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
import BaseBubble from './Base.vue';
import Icon from 'next/icon/Icon.vue';
import { useMessageContext } from '../provider.js';
import { MESSAGE_VARIANTS } from '../constants';
defineProps({
icon: { type: [String, Object], required: true },
@@ -20,12 +21,32 @@ defineProps({
},
});
const { sender } = useMessageContext();
const { sender, variant } = useMessageContext();
const { t } = useI18n();
const senderName = computed(() => {
return sender?.value?.name || '';
});
const primaryTextClass = computed(() => {
const classMap = {
[MESSAGE_VARIANTS.AGENT]: 'text-[rgb(var(--bubble-agent-text))]',
[MESSAGE_VARIANTS.USER]: 'text-[rgb(var(--bubble-user-text))]',
[MESSAGE_VARIANTS.PRIVATE]: 'text-[rgb(var(--bubble-private-text))]',
[MESSAGE_VARIANTS.BOT]: 'text-[rgb(var(--bubble-bot-text))]',
};
return classMap[variant.value] || 'text-[rgb(var(--bubble-agent-text))]';
});
const secondaryTextClass = computed(() => {
const classMap = {
[MESSAGE_VARIANTS.AGENT]: 'text-[rgb(var(--bubble-agent-meta))]',
[MESSAGE_VARIANTS.USER]: 'text-[rgb(var(--bubble-user-meta))]',
[MESSAGE_VARIANTS.PRIVATE]: 'text-[rgb(var(--bubble-private-meta))]',
[MESSAGE_VARIANTS.BOT]: 'text-[rgb(var(--bubble-bot-meta))]',
};
return classMap[variant.value] || 'text-[rgb(var(--bubble-agent-meta))]';
});
</script>
<template>
@@ -44,7 +65,11 @@ const senderName = computed(() => {
</slot>
</div>
<div class="space-y-1 overflow-hidden">
<div v-if="senderName" class="text-n-slate-12 text-sm truncate">
<div
v-if="senderName"
class="text-sm truncate"
:class="primaryTextClass"
>
{{
t(senderTranslationKey, {
sender: senderName,
@@ -52,10 +77,18 @@ const senderName = computed(() => {
}}
</div>
<slot>
<div v-if="title" class="truncate text-sm text-n-slate-12">
<div
v-if="title"
class="truncate text-sm"
:class="primaryTextClass"
>
{{ title }}
</div>
<div v-if="content" class="truncate text-sm text-n-slate-11">
<div
v-if="content"
class="truncate text-sm"
:class="secondaryTextClass"
>
{{ content }}
</div>
</slot>
app/javascript/dashboard/components-next/message/bubbles/Image.vue
+6 -3
View File
@@ -55,9 +55,12 @@ const handleImageError = () => {
data-bubble-name="image"
@click="toggleGallery(true)"
>
<div v-if="hasError" class="flex items-center gap-1 text-center rounded-lg">
<Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
<p class="mb-0 text-n-slate-11">
<div
v-if="hasError"
class="flex items-center gap-1 text-center rounded-lg text-[rgb(var(--bubble-error-meta))]"
>
<Icon icon="i-lucide-circle-off" />
<p class="mb-0">
{{ $t('COMPONENTS.MEDIA.IMAGE_UNAVAILABLE') }}
</p>
</div>
app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
+3 -3
View File
@@ -57,10 +57,10 @@ const onVideoLoadError = () => {
/>
<div
v-else
class="flex items-center gap-1 px-5 py-4 text-center rounded-lg bg-n-alpha-1"
class="flex items-center gap-1 px-5 py-4 text-center rounded-lg bg-n-alpha-1 text-[rgb(var(--bubble-error-meta))]"
>
<Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
<p class="mb-0 text-n-slate-11">
<Icon icon="i-lucide-circle-off" />
<p class="mb-0">
{{ $t('COMPONENTS.FILE_BUBBLE.INSTAGRAM_STORY_UNAVAILABLE') }}
</p>
</div>
app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
+14 -3
View File
@@ -4,11 +4,11 @@ import BaseBubble from 'next/message/bubbles/Base.vue';
import FormattedContent from './FormattedContent.vue';
import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
import TranslationToggle from 'dashboard/components-next/message/TranslationToggle.vue';
import { MESSAGE_TYPES } from '../../constants';
import { MESSAGE_TYPES, MESSAGE_VARIANTS } from '../../constants';
import { useMessageContext } from '../../provider.js';
import { useTranslations } from 'dashboard/composables/useTranslations';
const { content, attachments, contentAttributes, messageType } =
const { content, attachments, contentAttributes, messageType, variant } =
useMessageContext();
const { hasTranslations, translationContent } =
@@ -36,6 +36,17 @@ const isEmpty = computed(() => {
return !content.value && !attachments.value?.length;
});
const emptyTextClass = computed(() => {
const metaClassMap = {
[MESSAGE_VARIANTS.AGENT]: 'text-[rgb(var(--bubble-agent-meta))]',
[MESSAGE_VARIANTS.USER]: 'text-[rgb(var(--bubble-user-meta))]',
[MESSAGE_VARIANTS.PRIVATE]: 'text-[rgb(var(--bubble-private-meta))]',
[MESSAGE_VARIANTS.BOT]: 'text-[rgb(var(--bubble-bot-meta))]',
[MESSAGE_VARIANTS.TEMPLATE]: 'text-[rgb(var(--bubble-bot-meta))]',
};
return metaClassMap[variant.value] || 'text-[rgb(var(--bubble-agent-meta))]';
});
const handleSeeOriginal = () => {
renderOriginal.value = !renderOriginal.value;
};
@@ -47,7 +58,7 @@ const handleSeeOriginal = () => {
data-bubble-name="text"
>
<div class="gap-3 flex flex-col">
<span v-if="isEmpty" class="text-n-slate-11">
<span v-if="isEmpty" :class="emptyTextClass">
{{ $t('CONVERSATION.NO_CONTENT') }}
</span>
<FormattedContent v-if="renderContent" :content="renderContent" />