From a0fe5ec0be81cfcea5c61ba7ed8867778af69369 Mon Sep 17 00:00:00 2001 From: Mohamed Marrouchi Date: Wed, 13 Nov 2024 01:19:20 +0000 Subject: [PATCH] feat: widget enhancements --- api/src/extensions/channels/web/settings.ts | 2 +- api/src/user/controllers/user.controller.ts | 4 +- api/src/utils/helpers/avatar.ts | 4 +- api/src/utils/helpers/svg.ts | 10 +-- .../src/app-components/widget/ChatWidget.tsx | 6 +- widget/src/components/ChatHeader.scss | 4 +- widget/src/components/ChatWindow.scss | 2 +- widget/src/components/ConnectionLost.scss | 2 +- widget/src/components/Message.scss | 17 ++-- widget/src/components/Message.tsx | 8 +- widget/src/components/Suggestions.scss | 6 +- widget/src/components/UserInput.scss | 8 +- widget/src/components/UserSubscription.scss | 6 +- widget/src/components/icons/ChatIcon.tsx | 78 ++++++++++--------- .../components/messages/ButtonMessage.scss | 4 +- .../components/messages/CarouselMessage.scss | 2 +- .../src/components/messages/FileMessage.scss | 4 +- .../messages/GeolocationMessage.scss | 4 +- .../src/components/messages/ListMessage.scss | 6 +- .../components/messages/TypingMessage.scss | 4 +- widget/src/constants/colors.ts | 26 +++---- widget/src/providers/SettingsProvider.tsx | 2 +- widget/src/types/colors.types.ts | 2 +- 23 files changed, 109 insertions(+), 102 deletions(-) diff --git a/api/src/extensions/channels/web/settings.ts b/api/src/extensions/channels/web/settings.ts index f5382e0f..2ab05165 100644 --- a/api/src/extensions/channels/web/settings.ts +++ b/api/src/extensions/channels/web/settings.ts @@ -62,7 +62,7 @@ export default [ { group: WEB_CHANNEL_NAMESPACE, label: Web.SettingLabel.avatar_url, - value: 'https://eu.ui-avatars.com/api/?name=Hexa+Bot&size=64', + value: '', type: SettingType.text, }, { diff --git a/api/src/user/controllers/user.controller.ts b/api/src/user/controllers/user.controller.ts index 09591ca8..a206ec74 100644 --- a/api/src/user/controllers/user.controller.ts +++ b/api/src/user/controllers/user.controller.ts @@ -83,8 +83,8 @@ export class ReadOnlyUserController extends BaseController< */ @Roles('public') @Get('bot/profile_pic') - async botProfilePic() { - return getBotAvatar(); + async botProfilePic(@Query('color') color: string) { + return getBotAvatar(color); } /** diff --git a/api/src/utils/helpers/avatar.ts b/api/src/utils/helpers/avatar.ts index ac8f3f0c..c7cf42ee 100644 --- a/api/src/utils/helpers/avatar.ts +++ b/api/src/utils/helpers/avatar.ts @@ -39,8 +39,8 @@ export const generateInitialsAvatar = async (name: { return await generateAvatarSvg(svg); }; -export const getBotAvatar = async () => { - const svg = generateBotAvatarSvg({}); +export const getBotAvatar = async (color: string) => { + const svg = generateBotAvatarSvg({ bgColor: color }); return await generateAvatarSvg(svg); }; diff --git a/api/src/utils/helpers/svg.ts b/api/src/utils/helpers/svg.ts index 5ae0a09e..c1ff9430 100644 --- a/api/src/utils/helpers/svg.ts +++ b/api/src/utils/helpers/svg.ts @@ -43,17 +43,17 @@ export function generateUIAvatarSvg({ export function generateBotAvatarSvg({ size = 64, - bgColor = '#d1d1d1', + bgColor = '#000', + textColor = '#fff', }: UIAvatarSvgParams): string { return ` - + - - - + + diff --git a/frontend/src/app-components/widget/ChatWidget.tsx b/frontend/src/app-components/widget/ChatWidget.tsx index 42dab1b2..f9114c9f 100644 --- a/frontend/src/app-components/widget/ChatWidget.tsx +++ b/frontend/src/app-components/widget/ChatWidget.tsx @@ -39,8 +39,10 @@ export const ChatWidget = () => { CustomHeader={ChatWidgetHeader} CustomAvatar={() => ( )} /> diff --git a/widget/src/components/ChatHeader.scss b/widget/src/components/ChatHeader.scss index 6d334d2b..db2a6a68 100644 --- a/widget/src/components/ChatHeader.scss +++ b/widget/src/components/ChatHeader.scss @@ -1,7 +1,7 @@ .sc-header { min-height: 64px; - border-top-left-radius: 9px; - border-top-right-radius: 9px; + border-top-left-radius: .5rem; + border-top-right-radius: .5rem; padding: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); position: relative; diff --git a/widget/src/components/ChatWindow.scss b/widget/src/components/ChatWindow.scss index 4d1f6ada..8afcea5a 100644 --- a/widget/src/components/ChatWindow.scss +++ b/widget/src/components/ChatWindow.scss @@ -12,7 +12,7 @@ flex-direction: column; justify-content: space-between; border-radius: 10px; - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; animation: fadeIn; animation-duration: 0.3s; animation-timing-function: ease-in-out; diff --git a/widget/src/components/ConnectionLost.scss b/widget/src/components/ConnectionLost.scss index 177c69d0..c3c24ee8 100644 --- a/widget/src/components/ConnectionLost.scss +++ b/widget/src/components/ConnectionLost.scss @@ -21,7 +21,7 @@ } .sc-chat--disconnected-button { border: 1px solid; - border-radius: 20px; + border-radius: 2rem; padding: 5px 10px; width: 80%; margin: 2px; diff --git a/widget/src/components/Message.scss b/widget/src/components/Message.scss index bb6d556b..482979ab 100644 --- a/widget/src/components/Message.scss +++ b/widget/src/components/Message.scss @@ -38,7 +38,7 @@ display: flex; flex-direction: row; position: relative; - max-width: calc(100% - 60px); + max-width: calc(100% - 2rem); width: auto; .sc-message--avatar { @@ -49,7 +49,7 @@ background-position: 0 0; flex-shrink: 0; background-size: cover; - border-radius: 999px; + border-radius: 100%; } .sc-message--wrapper { @@ -59,11 +59,10 @@ .sc-message--text { padding: 10px 20px; - border-radius: 6px; - font-weight: 300; - font-size: .85rem; - max-width: 190px; - line-height: 1.2; + border-radius: .5rem; + font-weight: 400; + font-size: .9rem; + line-height: 1.5; position: relative; -webkit-font-smoothing: subpixel-antialiased; color: #263238; @@ -74,10 +73,6 @@ white-space: pre-wrap; } } - - code { - font-family: "Courier New", Courier, monospace !important; - } } .sc-message--meta { diff --git a/widget/src/components/Message.tsx b/widget/src/components/Message.tsx index e05d59e5..2e006cc0 100644 --- a/widget/src/components/Message.tsx +++ b/widget/src/components/Message.tsx @@ -17,6 +17,7 @@ import { useColors } from '../providers/ColorProvider'; import { TMessage } from '../types/message.types'; import ChatIcon from './icons/ChatIcon'; +import './Message.scss'; import ButtonsMessage from './messages/ButtonMessage'; import CarouselMessage from './messages/CarouselMessage'; import FileMessage from './messages/FileMessage'; @@ -24,7 +25,6 @@ import GeolocationMessage from './messages/GeolocationMessage'; import ListMessage from './messages/ListMessage'; import TextMessage from './messages/TextMessage'; import MessageStatus from './MessageStatus'; -import './Message.scss'; dayjs.extend(relativeTime); @@ -58,7 +58,11 @@ const Message: React.FC = ({ message, Avatar }) => { className="sc-message--avatar" style={ user.imageUrl - ? { backgroundImage: `url(${user.imageUrl})` } + ? { + backgroundImage: `url(${ + user.imageUrl + }?color=${encodeURIComponent(colors.header.bg)})`, + } : undefined } > diff --git a/widget/src/components/Suggestions.scss b/widget/src/components/Suggestions.scss index 203f2933..9a31b691 100644 --- a/widget/src/components/Suggestions.scss +++ b/widget/src/components/Suggestions.scss @@ -1,13 +1,13 @@ .sc-suggestions-row { text-align: center; - padding: 0.25rem 0; + padding: 0.5rem 0; } .sc-suggestions-element { - margin: 0 0 0.25rem 0.25rem; + margin: 0 0 0 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid; - border-radius: 15px; + border-radius: 2rem; font-size: 1rem; background: inherit; cursor: pointer; diff --git a/widget/src/components/UserInput.scss b/widget/src/components/UserInput.scss index 60152fd7..10709262 100644 --- a/widget/src/components/UserInput.scss +++ b/widget/src/components/UserInput.scss @@ -5,10 +5,10 @@ bottom: 0; display: flex; background-color: #f4f7f9; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; + border-bottom-left-radius: .5rem; + border-bottom-right-radius: .5rem; transition: background-color 0.2s ease, box-shadow 0.2s ease; - border: 1px solid #eaeaea; + border-top: 1px solid #eef2f4; } .sc-user-input--text { @@ -16,7 +16,7 @@ resize: none; border: none; outline: none; - border-bottom-left-radius: 10px; + border-bottom-left-radius: .5rem; box-sizing: border-box; padding: 18px 8px; font-size: 15px; diff --git a/widget/src/components/UserSubscription.scss b/widget/src/components/UserSubscription.scss index c5b2e0ac..784a7720 100644 --- a/widget/src/components/UserSubscription.scss +++ b/widget/src/components/UserSubscription.scss @@ -21,17 +21,17 @@ .user-subscription-form { .user-subscription-form-input { border: 0; - background-color: #eeeeee; + border: 1px solid #dfe5e8; outline: 0; padding: 1rem; - border-radius: 10px; + border-radius: 2rem; margin: 1rem; width: 70%; } .user-subscription-form-button-submit { display: block; - border-radius: 10px; + border-radius: 2rem; border: 0; width: 50%; margin: 2rem auto; diff --git a/widget/src/components/icons/ChatIcon.tsx b/widget/src/components/icons/ChatIcon.tsx index 9a79af71..a4eaeadd 100644 --- a/widget/src/components/icons/ChatIcon.tsx +++ b/widget/src/components/icons/ChatIcon.tsx @@ -9,46 +9,52 @@ import { FC, SVGProps } from 'react'; const ChatIcon: FC> = ({ - viewBox = '-4749.48 -5020 35.036 35.036', + width = '18', + height = '18', ...rest }) => { return ( - - - - - - - - + + - - - - - - - - - + + + + diff --git a/widget/src/components/messages/ButtonMessage.scss b/widget/src/components/messages/ButtonMessage.scss index c36c953a..fa9ed95e 100644 --- a/widget/src/components/messages/ButtonMessage.scss +++ b/widget/src/components/messages/ButtonMessage.scss @@ -2,7 +2,7 @@ color: rgb(34, 34, 34); max-width: -webkit-fill-available; padding: 0.25rem 0.5rem; - border-radius: 6px; + border-radius: .5rem; font-weight: 300; font-size: 1.25rem; line-height: 1.4; @@ -12,7 +12,7 @@ .sc-message--buttons-content { border: 1px solid; - border-radius: 20px; + border-radius: 2rem; padding: 0.25rem; width: 80%; margin: 2px; diff --git a/widget/src/components/messages/CarouselMessage.scss b/widget/src/components/messages/CarouselMessage.scss index 38c1ebd0..77e876c2 100644 --- a/widget/src/components/messages/CarouselMessage.scss +++ b/widget/src/components/messages/CarouselMessage.scss @@ -1,5 +1,5 @@ .sc-message--carousel { - border-radius: 10px; + border-radius: .5rem; position: relative; width: 100%; overflow: hidden; diff --git a/widget/src/components/messages/FileMessage.scss b/widget/src/components/messages/FileMessage.scss index b452e97a..9a22e125 100644 --- a/widget/src/components/messages/FileMessage.scss +++ b/widget/src/components/messages/FileMessage.scss @@ -1,6 +1,6 @@ .sc-message--file { background-color: transparent !important; - border-radius: 6px; + border-radius: .5rem; font-weight: 300; font-size: 14px; line-height: 1.4; @@ -31,7 +31,7 @@ .sc-message--file-download { padding: 10px 20px; - border-radius: 6px; + border-radius: .5rem; color: white; text-align: center; diff --git a/widget/src/components/messages/GeolocationMessage.scss b/widget/src/components/messages/GeolocationMessage.scss index 8969164b..5a5ee300 100644 --- a/widget/src/components/messages/GeolocationMessage.scss +++ b/widget/src/components/messages/GeolocationMessage.scss @@ -1,8 +1,8 @@ .sc-message--location { - border-radius: 6px; + border-radius: .5rem; } .sc-message-map { width: 200px; height: 150px; - border-radius: 6px; + border-radius: .5rem; } diff --git a/widget/src/components/messages/ListMessage.scss b/widget/src/components/messages/ListMessage.scss index 88708b29..ad6d6286 100644 --- a/widget/src/components/messages/ListMessage.scss +++ b/widget/src/components/messages/ListMessage.scss @@ -1,5 +1,5 @@ .sc-message--list { - border-radius: 10px; + border-radius: .5rem; width: 256px; .sc-message--list-element { @@ -19,12 +19,12 @@ .sc-message--list-element-image { background-size: cover; height: auto; - border-radius: 10px 10px 0 0; + border-radius: .5rem .5rem 0 0; } .sc-message--list-element-description { color: #fff; - border-radius: 10px 10px 0 0; + border-radius: .5rem .5rem 0 0; background: rgba(0, 0, 0, 0.5); } } diff --git a/widget/src/components/messages/TypingMessage.scss b/widget/src/components/messages/TypingMessage.scss index 7cd0b014..d1928fa0 100644 --- a/widget/src/components/messages/TypingMessage.scss +++ b/widget/src/components/messages/TypingMessage.scss @@ -1,7 +1,7 @@ .sc-typing-indicator { text-align: center; - padding: 2px 5px; - border-radius: 6px; + padding: .5rem; + border-radius: 2rem; width: 50px; margin-left: 2rem; } diff --git a/widget/src/constants/colors.ts b/widget/src/constants/colors.ts index 186574db..ca147beb 100644 --- a/widget/src/constants/colors.ts +++ b/widget/src/constants/colors.ts @@ -25,11 +25,11 @@ const colors: Record = { text: '#fff', }, received: { - bg: '#eaeaea', + bg: '#f6f8f9', text: '#000', }, userInput: { - bg: '#fbfbfb', + bg: '#fff', text: '#000', }, button: { @@ -60,11 +60,11 @@ const colors: Record = { text: '#fff', }, received: { - bg: '#eaeaea', + bg: '#f6f8f9', text: '#000', }, userInput: { - bg: '#fbfbfb', + bg: '#fff', text: '#000', }, button: { @@ -95,11 +95,11 @@ const colors: Record = { text: '#fff', }, received: { - bg: '#eaeaea', + bg: '#f6f8f9', text: '#000', }, userInput: { - bg: '#fbfbfb', + bg: '#fff', text: '#000', }, button: { @@ -130,11 +130,11 @@ const colors: Record = { text: '#fff', }, received: { - bg: '#eaeaea', + bg: '#f6f8f9', text: '#000', }, userInput: { - bg: '#fbfbfb', + bg: '#fff', text: '#000', }, button: { @@ -165,11 +165,11 @@ const colors: Record = { text: '#fff', }, received: { - bg: '#eaeaea', + bg: '#f6f8f9', text: '#000', }, userInput: { - bg: '#fbfbfb', + bg: '#fff', text: '#000', }, button: { @@ -200,15 +200,15 @@ const colors: Record = { text: '#FFF', }, received: { - bg: '#F0F0F0', + bg: '#f6f8f9', text: '#000', }, userInput: { - bg: '#FFF', + bg: '#fff', text: '#000', }, button: { - bg: '#2c3e50', + bg: '#000', text: '#ecf0f1', border: '#34495e', }, diff --git a/widget/src/providers/SettingsProvider.tsx b/widget/src/providers/SettingsProvider.tsx index fc8c411c..1b4b52f6 100644 --- a/widget/src/providers/SettingsProvider.tsx +++ b/widget/src/providers/SettingsProvider.tsx @@ -109,7 +109,7 @@ export const SettingsProvider: React.FC = ({ allowedUploadSize: settings.allowed_upload_size, inputDisabled: settings.input_disabled, color: settings.theme_color, - greetingMessage: t('settings.greeting'), + greetingMessage: settings.greeting_message, placeholder: t('settings.placeholder'), avatarUrl: settings.avatar_url, }); diff --git a/widget/src/types/colors.types.ts b/widget/src/types/colors.types.ts index 2d8b31fc..77ee76b6 100644 --- a/widget/src/types/colors.types.ts +++ b/widget/src/types/colors.types.ts @@ -7,7 +7,7 @@ */ export type ColorState = { - header: { bg?: string; text?: string }; + header: { bg: string; text: string }; launcher: { bg?: string }; messageList: { bg?: string }; sent: { bg?: string; text?: string };