rodrigo/chatwoot-develop
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

ui(crm): redesign CRM insights button and sidebar with violet theme

Browse Source
This commit is contained in:
Rodrigo Borba 2026-01-05 08:21:26 -03:00
parent 4b4feb915d
commit d22389f648
2 changed files with 81 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
View File

@ -166,10 +166,11 @@ const toggleCrmInsights = () => {
/> />
<Button <Button
v-tooltip.top="t('CONVERSATION.CRM_INSIGHTS.TOGGLE')" v-tooltip.top="t('CONVERSATION.CRM_INSIGHTS.TOGGLE')"
icon="i-lucide-lightbulb" icon="i-lucide-brain"
class="bg-green-50 text-green-600 hover:bg-green-100 dark:bg-green-900/20 dark:text-green-400 border border-green-200 dark:border-green-800 !p-2 !h-10 !w-10 !text-xl" class="bg-gradient-to-br from-violet-50 to-indigo-50 text-violet-600 hover:from-violet-100 hover:to-indigo-100 dark:from-violet-900/30 dark:to-indigo-900/30 dark:text-violet-400 border border-violet-200/50 dark:border-violet-700/50 !p-2.5 !h-11 !w-11 !text-2xl rounded-xl shadow-sm transition-all duration-200"
:class="{ :class="{
'ring-2 ring-green-500 ring-offset-1': isCrmInsightsOpen, 'ring-2 ring-violet-500 ring-offset-1 animate-pulse':
isCrmInsightsOpen,
}" }"
@click="toggleCrmInsights" @click="toggleCrmInsights"
/> />

107
app/javascript/dashboard/components/widgets/conversation/CrmInsightsSidebar.vue
View File

@ -337,7 +337,7 @@ watch(
]" ]"
> >
<div <div
class="flex items-center justify-between px-4 py-3 border-b border-n-weak" class="flex items-center justify-between px-4 py-4 bg-gradient-to-r from-violet-50 via-indigo-50 to-violet-50 dark:from-violet-900/20 dark:via-indigo-900/20 dark:to-violet-900/20 border-b border-violet-100 dark:border-violet-800/50"
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Button <Button
@ -348,7 +348,16 @@ watch(
icon="i-lucide-arrow-left" icon="i-lucide-arrow-left"
@click="goBackToList" @click="goBackToList"
/> />
<span class="text-sm font-medium text-n-slate-12"> <span
class="w-8 h-8 rounded-lg bg-violet-100 dark:bg-violet-800/40 flex items-center justify-center"
>
<i
class="i-lucide-brain text-lg text-violet-600 dark:text-violet-400"
/>
</span>
<span
class="text-sm font-semibold text-violet-900 dark:text-violet-100"
>
{{ {{
viewMode === 'detail' viewMode === 'detail'
? t('CONVERSATION.CRM_INSIGHTS.LATEST.TITLE') ? t('CONVERSATION.CRM_INSIGHTS.LATEST.TITLE')
@ -490,13 +499,22 @@ watch(
<div v-else-if="hasInsights" class="flex flex-col gap-4"> <div v-else-if="hasInsights" class="flex flex-col gap-4">
<div <div
class="rounded-xl border border-n-weak p-4 space-y-3 bg-n-strong/30" class="rounded-2xl border border-violet-200/50 dark:border-violet-700/30 p-4 space-y-3 bg-white/70 dark:bg-violet-900/10 backdrop-blur-sm shadow-sm"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div <div class="flex items-center gap-2">
class="text-xs font-semibold text-n-slate-10 uppercase tracking-wide" <span
> class="w-6 h-6 rounded-md bg-violet-100 dark:bg-violet-800/40 flex items-center justify-center"
{{ t('CONVERSATION.CRM_INSIGHTS.LATEST.TITLE') }} >
<i
class="i-lucide-sparkles text-sm text-violet-600 dark:text-violet-400"
/>
</span>
<span
class="text-xs font-semibold text-violet-700 dark:text-violet-300 uppercase tracking-wide"
>
{{ t('CONVERSATION.CRM_INSIGHTS.LATEST.TITLE') }}
</span>
</div> </div>
<span class="text-[10px] text-n-slate-10"> <span class="text-[10px] text-n-slate-10">
{{ {{
@ -546,38 +564,57 @@ watch(
<FunnelTimeline :funnel-data="funnelData" /> <FunnelTimeline :funnel-data="funnelData" />
</div> </div>
<div v-if="intent" class="rounded-xl border border-n-weak p-3"> <div
<div class="text-xs font-medium text-n-slate-9"> v-if="intent"
{{ t('CONVERSATION.CRM_INSIGHTS.CARDS.INTENT') }} class="rounded-xl border border-violet-100 dark:border-violet-800/30 p-3 bg-white/50 dark:bg-violet-900/5"
>
<div class="flex items-center gap-2">
<i
class="i-lucide-target text-sm text-violet-500 dark:text-violet-400"
/>
<span class="text-xs font-medium text-n-slate-9">
{{ t('CONVERSATION.CRM_INSIGHTS.CARDS.INTENT') }}
</span>
</div> </div>
<div class="text-sm text-n-slate-12"> <div class="text-sm text-n-slate-12 mt-1">
{{ formatValue(intent) }} {{ formatValue(intent) }}
</div> </div>
</div> </div>
<div v-if="urgency" class="rounded-xl border border-n-weak p-3"> <div
<div> v-if="urgency"
<div class="text-xs font-medium text-n-slate-9"> class="rounded-xl border border-violet-100 dark:border-violet-800/30 p-3 bg-white/50 dark:bg-violet-900/5"
>
<div class="flex items-center gap-2">
<i
class="i-lucide-gauge text-sm text-violet-500 dark:text-violet-400"
/>
<span class="text-xs font-medium text-n-slate-9">
{{ t('CONVERSATION.CRM_INSIGHTS.CARDS.URGENCY') }} {{ t('CONVERSATION.CRM_INSIGHTS.CARDS.URGENCY') }}
</div> </span>
<div class="text-sm text-n-slate-12"> </div>
{{ urgencyLabel }} <div class="text-sm text-n-slate-12 mt-1">
</div> {{ urgencyLabel }}
</div> </div>
</div> </div>
<div <div
v-if="preferences.length" v-if="preferences.length"
class="rounded-xl border border-n-weak p-3" class="rounded-xl border border-violet-100 dark:border-violet-800/30 p-3 bg-white/50 dark:bg-violet-900/5"
> >
<div class="text-xs font-medium text-n-slate-9"> <div class="flex items-center gap-2">
{{ t('CONVERSATION.CRM_INSIGHTS.CARDS.PREFERENCES') }} <i
class="i-lucide-heart text-sm text-violet-500 dark:text-violet-400"
/>
<span class="text-xs font-medium text-n-slate-9">
{{ t('CONVERSATION.CRM_INSIGHTS.CARDS.PREFERENCES') }}
</span>
</div> </div>
<div class="flex flex-wrap gap-2 mt-2"> <div class="flex flex-wrap gap-2 mt-2">
<span <span
v-for="item in preferences" v-for="item in preferences"
:key="item" :key="item"
class="text-xs text-n-slate-12 bg-n-strong px-2 py-1 rounded-full" class="text-xs text-violet-700 dark:text-violet-300 bg-violet-100 dark:bg-violet-900/40 px-3 py-1.5 rounded-full font-medium"
> >
{{ item }} {{ item }}
</span> </span>
@ -586,28 +623,38 @@ watch(
<div <div
v-if="priceSensitivity" v-if="priceSensitivity"
class="rounded-xl border border-n-weak p-3" class="rounded-xl border border-violet-100 dark:border-violet-800/30 p-3 bg-white/50 dark:bg-violet-900/5"
> >
<div class="text-xs font-medium text-n-slate-9"> <div class="flex items-center gap-2">
{{ t('CONVERSATION.CRM_INSIGHTS.CARDS.PRICE_SENSITIVITY') }} <i
class="i-lucide-wallet text-sm text-violet-500 dark:text-violet-400"
/>
<span class="text-xs font-medium text-n-slate-9">
{{ t('CONVERSATION.CRM_INSIGHTS.CARDS.PRICE_SENSITIVITY') }}
</span>
</div> </div>
<div class="text-sm text-n-slate-12"> <div class="text-sm text-n-slate-12 mt-1">
{{ formatValue(priceSensitivity) }} {{ formatValue(priceSensitivity) }}
</div> </div>
</div> </div>
<div <div
v-if="frictions.length" v-if="frictions.length"
class="rounded-xl border border-n-weak p-3" class="rounded-xl border border-amber-200 dark:border-amber-800/30 p-3 bg-amber-50/50 dark:bg-amber-900/5"
> >
<div class="text-xs font-medium text-n-slate-9"> <div class="flex items-center gap-2">
{{ t('CONVERSATION.CRM_INSIGHTS.CARDS.FRICTIONS') }} <i
class="i-lucide-alert-triangle text-sm text-amber-500 dark:text-amber-400"
/>
<span class="text-xs font-medium text-n-slate-9">
{{ t('CONVERSATION.CRM_INSIGHTS.CARDS.FRICTIONS') }}
</span>
</div> </div>
<div class="flex flex-wrap gap-2 mt-2"> <div class="flex flex-wrap gap-2 mt-2">
<span <span
v-for="item in frictions" v-for="item in frictions"
:key="item" :key="item"
class="text-xs text-n-slate-12 bg-n-strong px-2 py-1 rounded-full" class="text-xs text-amber-700 dark:text-amber-300 bg-amber-100 dark:bg-amber-900/40 px-3 py-1.5 rounded-full font-medium"
> >
{{ item }} {{ item }}
</span> </span>