UniqAI/hexabot
1
0
Fork 0
mirror of https://github.com/hexastack/hexabot synced 2025-06-26 18:27:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: widget enhancements

Browse Source
This commit is contained in:
Mohamed Marrouchi
2024-11-13 01:19:20 +00:00
parent ceb2e203fd
commit a0fe5ec0be
23 changed files with 109 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
widget/src/components/ChatHeader.scss
View File

@@ -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;

2
widget/src/components/ChatWindow.scss
View File

@@ -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;

2
widget/src/components/ConnectionLost.scss
View File

@@ -21,7 +21,7 @@
}
.sc-chat--disconnected-button {
border: 1px solid;
border-radius: 20px;
border-radius: 2rem;
padding: 5px 10px;
width: 80%;
margin: 2px;

17
widget/src/components/Message.scss
View File

@@ -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 {

8
widget/src/components/Message.tsx
View File

@@ -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<MessageProps> = ({ message, Avatar }) => {
className="sc-message--avatar"
style={
user.imageUrl
? { backgroundImage: `url(${user.imageUrl})` }
? {
backgroundImage: `url(${
user.imageUrl
}?color=${encodeURIComponent(colors.header.bg)})`,
}
: undefined
}
>

6
widget/src/components/Suggestions.scss
View File

@@ -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;

8
widget/src/components/UserInput.scss
View File

@@ -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;

6
widget/src/components/UserSubscription.scss
View File

@@ -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;

78
widget/src/components/icons/ChatIcon.tsx
View File

@@ -9,46 +9,52 @@
import { FC, SVGProps } from 'react';
const ChatIcon: FC<SVGProps<SVGSVGElement>> = ({
viewBox = '-4749.48 -5020 35.036 35.036',
width = '18',
height = '18',
...rest
}) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} {...rest}>
<defs>
<clipPath id="a">
<path
className="a"
style={{ fill: 'none' }}
d="M0-399.479H17.555v17.555H0Z"
transform="translate(0 399.479)"
/>
</clipPath>
</defs>
<g transform="translate(-4886 -5075)">
<circle
style={{ fill: '#4e8cff' }}
cx="17.518"
cy="17.518"
r="17.518"
transform="translate(136.52 55)"
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 42.555282 47.2949"
width={width}
height={height}
{...rest}
>
<g fillOpacity={1} strokeDasharray="none">
<path
d="M32.756 170.872l-4.26 7.482-2.786-7.494-8.211-.017a4.405 4.405 0 01-3.8-2.191l-6.443-11.087a4.215 4.215 0 01-.011-4.216l6.213-10.833a4.96 4.96 0 014.288-2.492l12.2-.034a4.715 4.715 0 014.09 2.347l6.16 10.602a4.864 4.864 0 01.02 4.855z"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeOpacity={1}
strokeWidth={4.4649702399999995}
paintOrder="normal"
style={{
mixBlendMode: 'normal',
}}
transform="translate(-58.835 -133.808) translate(53.705 -18.313) scale(1.10427)"
/>
<g transform="translate(145.13 64)">
<g style={{ clipPath: "url('#a')" }}>
<g transform="translate(0 0)">
<path
style={{ fill: '#fff' }}
d="M-381.924-190.962a8.778,8.778,0,0,0-8.778-8.778,8.778,8.778,0,0,0-8.778,8.778,8.745,8.745,0,0,0,2.26,5.879v1.442c0,.8.492,1.457,1.1,1.457h5.83a.843.843,0,0,0,.183-.02,8.778,8.778,0,0,0,8.184-8.757"
transform="translate(399.479 199.74)"
/>
</g>
<g transform="translate(0 0)">
<path
style={{ fill: '#eff4f9' }}
d="M-68.763-194.079a9.292,9.292,0,0,1,6.38-8.888c-.252-.022-.506-.033-.763-.033a8.774,8.774,0,0,0-8.778,8.778A9.508,9.508,0,0,0-69.7-188.3c.005,0,0,.009,0,.01-.311.352-1.924,2.849.021,2.849h2.25c-1.23-.022,1.263-2.107.269-3.494a8.225,8.225,0,0,1-1.6-5.141"
transform="translate(71.924 203)"
/>
</g>
</g>
<g
fill="currentColor"
fillRule="nonzero"
stroke="none"
strokeWidth={0.662}
fillOpacity={1}
>
<path
d="M-532.348 630.303a6.253 6.253 0 11-12.506.023 6.253 6.253 0 0112.506-.023"
transform="translate(-58.835 -133.808) translate(53.705 -18.313) scale(1.10427) matrix(.25113 0 0 .25263 -27.6 133.42) matrix(1.51171 0 0 1.50275 1044.41 -860.854)"
/>
<path
d="M-532.348 630.303a6.253 6.253 0 11-12.506.023 6.253 6.253 0 0112.506-.023"
transform="translate(-58.835 -133.808) translate(53.705 -18.313) scale(1.10427) matrix(.25113 0 0 .25263 -27.6 133.42) matrix(1.51171 0 0 1.50275 992.8 -860.854)"
/>
<path
d="M-532.348 630.303a6.253 6.253 0 11-12.506.023 6.253 6.253 0 0112.506-.023"
transform="translate(-58.835 -133.808) translate(53.705 -18.313) scale(1.10427) matrix(.25113 0 0 .25263 -27.6 133.42) matrix(1.51171 0 0 1.50275 1018.605 -860.854)"
/>
</g>
</g>
</svg>

4
widget/src/components/messages/ButtonMessage.scss
View File

@@ -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;

2
widget/src/components/messages/CarouselMessage.scss
View File

@@ -1,5 +1,5 @@
.sc-message--carousel {
border-radius: 10px;
border-radius: .5rem;
position: relative;
width: 100%;
overflow: hidden;

4
widget/src/components/messages/FileMessage.scss
View File

@@ -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;

4
widget/src/components/messages/GeolocationMessage.scss
View File

@@ -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;
}

6
widget/src/components/messages/ListMessage.scss
View File

@@ -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);
}
}

4
widget/src/components/messages/TypingMessage.scss
View File

@@ -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;
}