Skip to content

Commit

Permalink
feat(lib): 💄 Better chat widget icon
Browse files Browse the repository at this point in the history
  • Loading branch information
baptisteArno committed Apr 30, 2022
1 parent e339cc1 commit a2cfecc
Show file tree
Hide file tree
Showing 8 changed files with 29 additions and 25 deletions.
2 changes: 1 addition & 1 deletion packages/typebot-js/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "typebot-js",
"version": "2.2.4",
"version": "2.2.5",
"main": "dist/index.js",
"unpkg": "dist/index.umd.min.js",
"license": "AGPL-3.0-or-later",
Expand Down
11 changes: 5 additions & 6 deletions packages/typebot-js/src/embedTypes/chat/button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -23,22 +23,21 @@ 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
}

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>`
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { setRememberCloseInStorage } from '../chat/index'
import { setRememberCloseInStorage } from '../chat'
import { ProactiveMessageParams } from '../../types'
import { closeSvgPath } from './button'

Expand Down
19 changes: 14 additions & 5 deletions packages/typebot-js/src/embedTypes/chat/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions packages/typebot-js/src/iframe/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) =>
Expand Down
6 changes: 2 additions & 4 deletions packages/typebot-js/tests/chat/index.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,7 @@ describe('initBubble', () => {
Typebot.initBubble({ url: 'https://typebot.io/typebot-id2' })
const frames = document.getElementsByTagName('iframe')
expect(frames).toHaveLength(1)
expect(frames[0].dataset.src).toBe(
'https://typebot.io/typebot-id2?hn=localhost'
)
expect(frames[0].dataset.src).toBe('https://typebot.io/typebot-id2')
})

it('show open after the corresponding delay', async () => {
Expand All @@ -36,7 +34,7 @@ describe('initBubble', () => {
})
const bubble = document.querySelector('#typebot-bubble') as HTMLDivElement
expect(bubble.classList.contains('iframe-opened')).toBe(false)
await new Promise((r) => setTimeout(r, 1050))
await new Promise((r) => setTimeout(r, 1100))
expect(bubble.classList.contains('iframe-opened')).toBe(true)
const rememberCloseDecisionFromStorage = localStorage.getItem(
Typebot.localStorageKeys.rememberClose
Expand Down
6 changes: 3 additions & 3 deletions packages/typebot-js/tests/iframe.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ describe('createIframe', () => {
'https://typebot.io/typebot-id'
)
expect(iframeElement.getAttribute('src')).toBe(
'https://typebot.io/typebot-id?hn=localhost'
'https://typebot.io/typebot-id'
)
})

Expand All @@ -24,7 +24,7 @@ describe('createIframe', () => {
}),
]
expect(iframes[0].getAttribute('src')).toBe(
'https://typebot.io/typebot-id?hn=localhost&var1=value1&var2=value2'
'https://typebot.io/typebot-id?var1=value1&var2=value2'
)
})

Expand All @@ -44,7 +44,7 @@ describe('createIframe', () => {
loadWhenVisible: true,
})
expect(iframeElement.getAttribute('data-src')).toBe(
'https://typebot.io/typebot-id?hn=localhost'
'https://typebot.io/typebot-id'
)
expect(iframeElement.getAttribute('src')).toBeFalsy()
})
Expand Down
4 changes: 1 addition & 3 deletions packages/typebot-js/tests/popup.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,7 @@ describe('initPopup', () => {
initPopup({ url: 'https://typebot.io/typebot-id2' })
const elements = document.getElementsByTagName('iframe')
expect(elements).toHaveLength(1)
expect(elements[0].dataset.src).toBe(
'https://typebot.io/typebot-id2?hn=localhost'
)
expect(elements[0].dataset.src).toBe('https://typebot.io/typebot-id2')
})

it("shouldn't have opened classname if no delay", () => {
Expand Down

4 comments on commit a2cfecc

@vercel
Copy link

@vercel vercel bot commented on a2cfecc Apr 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on a2cfecc Apr 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

builder-v2 – ./apps/builder

builder-v2-git-main-typebot-io.vercel.app
builder-v2-typebot-io.vercel.app
app.typebot.io

@vercel
Copy link

@vercel vercel bot commented on a2cfecc Apr 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.