blsmedia/bot
2
0
Fork 0
Code Activity

feat(lib): 💄 Better chat widget icon

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-04-30 06:48:26 -07:00
parent e339cc1672
commit a2cfecc16c
8 changed files with 29 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/typebot-js/src/embedTypes/chat/button.ts
View File

@ -12,7 +12,7 @@ export const createButton = (params?: ButtonParams): HTMLButtonElement => {
const createButtonIcon = (
src?: string,
style?: string
): SVGElement | HTMLImageElement => {
): SVGElement | HTMLElement => {
if (!src) return createDefaultIcon()
const icon = document.createElement('img')
icon.classList.add('icon')
@ -23,8 +23,7 @@ const createButtonIcon = (
const createDefaultIcon = (): SVGElement => {
const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
icon.setAttribute('viewBox', '0 0 41 19')
icon.style.width = '63%'
icon.setAttribute('viewBox', '0 0 24 24')
icon.innerHTML = typebotLogoSvgTextContent()
icon.classList.add('icon')
return icon
@ -32,13 +31,13 @@ const createDefaultIcon = (): SVGElement => {
const createCloseIcon = (): SVGElement => {
const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
icon.setAttribute('viewBox', '0 0 512 512')
icon.setAttribute('viewBox', '0 0 24 24')
icon.innerHTML = closeSvgPath
icon.classList.add('close-icon')
return icon
}
const typebotLogoSvgTextContent = () =>
`<rect x="40.29" y="0.967773" width="6.83761" height="30.7692" rx="3.4188" transform="rotate(90 40.29 0.967773)"></rect> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.70884 7.80538C5.597 7.80538 7.12765 6.27473 7.12765 4.38658C7.12765 2.49842 5.597 0.967773 3.70884 0.967773C1.82069 0.967773 0.290039 2.49842 0.290039 4.38658C0.290039 6.27473 1.82069 7.80538 3.70884 7.80538Z" fill="white"></path> <rect x="0.290039" y="18.0615" width="6.83761" height="30.7692" rx="3.4188" transform="rotate(-90 0.290039 18.0615)" fill="white"></rect> <path fill-rule="evenodd" clip-rule="evenodd" d="M36.8712 11.2239C34.9831 11.2239 33.4524 12.7546 33.4524 14.6427C33.4524 16.5309 34.9831 18.0615 36.8712 18.0615C38.7594 18.0615 40.29 16.5309 40.29 14.6427C40.29 12.7546 38.7594 11.2239 36.8712 11.2239Z" fill="white"></path>`
`<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>`
export const closeSvgPath = `<path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path>`
export const closeSvgPath = `<line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>`

2
packages/typebot-js/src/embedTypes/chat/proactiveMessage.ts
View File

@ -1,4 +1,4 @@
import { setRememberCloseInStorage } from '../chat/index'
import { setRememberCloseInStorage } from '../chat'
import { ProactiveMessageParams } from '../../types'
import { closeSvgPath } from './button'

19
packages/typebot-js/src/embedTypes/chat/style.css
View File

@ -31,13 +31,22 @@
}
#typebot-bubble > button > .icon {
width: 80%;
transition: opacity 500ms ease-out 0s, transform 500ms ease-out 0s;
fill: white;
}
#typebot-bubble > button > svg.icon {
fill: none;
width: 55%;
stroke-width: 2px;
stroke: white;
}
#typebot-bubble > button > img.icon {
width: 80%;
height: 80%;
border-radius: 100%;
object-fit: cover;
object-position: center;
}
#typebot-bubble.iframe-opened > button > .icon {
@ -47,12 +56,12 @@
#typebot-bubble > button > .close-icon {
position: absolute;
width: 80%;
height: 80%;
transform: rotate(-90deg) scale(0);
opacity: 0;
transition: opacity 500ms ease-out 0s, transform 500ms ease-out 0s;
fill: white;
width: 55%;
stroke-width: 2px;
stroke: white;
}
#typebot-bubble.iframe-opened > button > .close-icon {

4
packages/typebot-js/src/iframe/index.ts
View File

@ -39,8 +39,8 @@ const parseQueryParams = (starterVariables?: {
const parseStarterVariables = (starterVariables?: {
[key: string]: string | undefined
}) =>
starterVariables
? `&${Object.keys(starterVariables)
starterVariables && Object.keys(starterVariables).length > 0
? `?${Object.keys(starterVariables)
.filter((key) => starterVariables[key])
.map(
(key) =>