Skip to content

Commit

Permalink
💄 (js) Fix spacings related to avatars
Browse files Browse the repository at this point in the history
  • Loading branch information
baptisteArno committed Mar 7, 2023
1 parent 2788d58 commit b2fa202
Show file tree
Hide file tree
Showing 15 changed files with 16 additions and 41 deletions.
6 changes: 1 addition & 5 deletions .github/workflows/publish_docker_images.yml
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
name: Build Docker images

on:
create:
tags:
- 'v*'
- '!js-v*'
- '!react-v*'
push:
tags: ['v*']
branches: [main]
pull_request:
branches: [main]
Expand Down
2 changes: 1 addition & 1 deletion packages/js/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@typebot.io/js",
"version": "0.0.20",
"version": "0.0.21",
"description": "Javascript library to display typebots on your website",
"type": "module",
"main": "dist/index.js",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { BotContext } from '@/types'
import { isMobile } from '@/utils/isMobileSignal'
import type { ChatReply, Settings, Theme } from 'models'
import { createSignal, For, onMount, Show } from 'solid-js'
import { HostBubble } from '../bubbles/HostBubble'
Expand Down Expand Up @@ -60,8 +61,10 @@ export const ChatChunk = (props: Props) => {
class="flex-1"
style={{
'margin-right': props.theme.chat.guestAvatar?.isEnabled
? '50px'
: '8px',
? isMobile()
? '32px'
: '48px'
: undefined,
}}
>
<For each={props.messages.slice(0, displayedMessageIndex() + 1)}>
Expand All @@ -81,6 +84,7 @@ export const ChatChunk = (props: Props) => {
inputIndex={props.inputIndex}
onSubmit={props.onSubmit}
onSkip={props.onSkip}
hasHostAvatar={props.theme.chat.hostAvatar?.isEnabled ?? false}
guestAvatar={props.theme.chat.guestAvatar}
context={props.context}
isInputPrefillEnabled={
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,7 @@ export const LoadingChunk = (props: Props) => (
hostAvatarSrc={props.theme.chat.hostAvatar?.url}
/>
</Show>
<div
class="flex-1"
style={{
'margin-right': props.theme.chat.guestAvatar?.isEnabled
? '50px'
: '8px',
}}
>
<LoadingBubble />
</div>
<LoadingBubble />
</div>
</div>
</div>
Expand Down
10 changes: 2 additions & 8 deletions packages/js/src/components/InputChatBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { PaymentForm } from '@/features/blocks/inputs/payment'

type Props = {
block: NonNullable<ChatReply['input']>
hasHostAvatar: boolean
guestAvatar?: Theme['chat']['guestAvatar']
inputIndex: number
context: BotContext
Expand Down Expand Up @@ -66,7 +67,7 @@ export const InputChatBlock = (props: Props) => {
</Match>
<Match when={isNotDefined(answer())}>
<div class="flex justify-end animate-fade-in">
{props.guestAvatar?.isEnabled && (
{props.hasHostAvatar && (
<div
class={
'flex mr-2 mb-2 mt-1 flex-shrink-0 items-center ' +
Expand All @@ -81,7 +82,6 @@ export const InputChatBlock = (props: Props) => {
isInputPrefillEnabled={props.isInputPrefillEnabled}
onSubmit={handleSubmit}
onSkip={handleSkip}
hasGuestAvatar={props.guestAvatar?.isEnabled ?? false}
/>
</div>
</Match>
Expand All @@ -93,7 +93,6 @@ const Input = (props: {
context: BotContext
block: NonNullable<ChatReply['input']>
inputIndex: number
hasGuestAvatar: boolean
isInputPrefillEnabled: boolean
onSubmit: (answer: InputSubmitContent) => void
onSkip: (label: string) => void
Expand All @@ -117,31 +116,27 @@ const Input = (props: {
block={props.block as TextInputBlock}
defaultValue={getPrefilledValue()}
onSubmit={onSubmit}
hasGuestAvatar={props.hasGuestAvatar}
/>
</Match>
<Match when={props.block.type === InputBlockType.NUMBER}>
<NumberInput
block={props.block as NumberInputBlock}
defaultValue={getPrefilledValue()}
onSubmit={onSubmit}
hasGuestAvatar={props.hasGuestAvatar}
/>
</Match>
<Match when={props.block.type === InputBlockType.EMAIL}>
<EmailInput
block={props.block as EmailInputBlock}
defaultValue={getPrefilledValue()}
onSubmit={onSubmit}
hasGuestAvatar={props.hasGuestAvatar}
/>
</Match>
<Match when={props.block.type === InputBlockType.URL}>
<UrlInput
block={props.block as UrlInputBlock}
defaultValue={getPrefilledValue()}
onSubmit={onSubmit}
hasGuestAvatar={props.hasGuestAvatar}
/>
</Match>
<Match when={props.block.type === InputBlockType.PHONE}>
Expand All @@ -152,7 +147,6 @@ const Input = (props: {
}
defaultValue={getPrefilledValue()}
onSubmit={onSubmit}
hasGuestAvatar={props.hasGuestAvatar}
/>
</Match>
<Match when={props.block.type === InputBlockType.DATE}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const AudioBubble = (props: Props) => {

return (
<div class="flex flex-col animate-fade-in">
<div class="flex mb-2 w-full lg:w-11/12 items-center">
<div class="flex mb-2 w-full items-center">
<div class={'flex relative z-10 items-start typebot-host-bubble'}>
<div
class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const EmbedBubble = (props: Props) => {

return (
<div class="flex flex-col w-full animate-fade-in">
<div class="flex mb-2 w-full lg:w-11/12 items-center">
<div class="flex mb-2 w-full items-center">
<div
class={'flex relative z-10 items-start typebot-host-bubble w-full'}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const ImageBubble = (props: Props) => {

return (
<div class="flex flex-col animate-fade-in">
<div class="flex mb-2 w-full lg:w-11/12 items-center">
<div class="flex mb-2 w-full items-center">
<div class={'flex relative z-10 items-start typebot-host-bubble'}>
<div
class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const VideoBubble = (props: Props) => {

return (
<div class="flex flex-col animate-fade-in">
<div class="flex mb-2 w-full lg:w-11/12 items-center">
<div class="flex mb-2 w-full items-center">
<div class={'flex relative z-10 items-start typebot-host-bubble'}>
<div
class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { createSignal, onMount } from 'solid-js'
type Props = {
block: EmailInputBlock
defaultValue?: string
hasGuestAvatar: boolean
onSubmit: (value: InputSubmitContent) => void
}

Expand Down Expand Up @@ -40,7 +39,6 @@ export const EmailInput = (props: Props) => {
}
data-testid="input"
style={{
'margin-right': props.hasGuestAvatar ? '50px' : '8px',
'max-width': '350px',
}}
onKeyDown={submitWhenEnter}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ type NumberInputProps = {
block: NumberInputBlock
defaultValue?: string
onSubmit: (value: InputSubmitContent) => void
hasGuestAvatar: boolean
}

export const NumberInput = (props: NumberInputProps) => {
Expand Down Expand Up @@ -40,7 +39,6 @@ export const NumberInput = (props: NumberInputProps) => {
}
data-testid="input"
style={{
'margin-right': props.hasGuestAvatar ? '50px' : '8px',
'max-width': '350px',
}}
onKeyDown={submitWhenEnter}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ type PhoneInputProps = Pick<
> & {
defaultValue?: string
onSubmit: (value: InputSubmitContent) => void
hasGuestAvatar: boolean
}

export const PhoneInput = (props: PhoneInputProps) => {
Expand Down Expand Up @@ -88,7 +87,6 @@ export const PhoneInput = (props: PhoneInputProps) => {
class={'flex items-end justify-between rounded-lg pr-2 typebot-input'}
data-testid="input"
style={{
'margin-right': props.hasGuestAvatar ? '50px' : '8px',
'max-width': '400px',
}}
onKeyDown={submitWhenEnter}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { createSignal, onMount } from 'solid-js'
type Props = {
block: TextInputBlock
defaultValue?: string
hasGuestAvatar: boolean
onSubmit: (value: InputSubmitContent) => void
}

Expand Down Expand Up @@ -41,7 +40,6 @@ export const TextInput = (props: Props) => {
}
data-testid="input"
style={{
'margin-right': props.hasGuestAvatar ? '50px' : '8px',
'max-width': props.block.options.isLong ? undefined : '350px',
}}
onKeyDown={submitWhenEnter}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ type Props = {
block: UrlInputBlock
defaultValue?: string
onSubmit: (value: InputSubmitContent) => void
hasGuestAvatar: boolean
}

export const UrlInput = (props: Props) => {
Expand Down Expand Up @@ -46,7 +45,6 @@ export const UrlInput = (props: Props) => {
}
data-testid="input"
style={{
'margin-right': props.hasGuestAvatar ? '50px' : '8px',
'max-width': '350px',
}}
onKeyDown={submitWhenEnter}
Expand Down
2 changes: 1 addition & 1 deletion packages/react/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@typebot.io/react",
"version": "0.0.20",
"version": "0.0.21",
"description": "React library to display typebots on your website",
"main": "dist/index.js",
"types": "dist/index.d.ts",
Expand Down

4 comments on commit b2fa202

@vercel
Copy link

@vercel vercel bot commented on b2fa202 Mar 7, 2023

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:

viewer-v2 – ./apps/viewer

start.taxtree.io
typebot.aloe.bot
voicehelp.cr8.ai
zap.fundviser.in
link.venturasuceder.com
mainmenu.diddancing.com
manualhandlingcourse.ie
register.kandabrand.com
signup.hypemarketing.in
subfooter.wpwakanda.com
survey.hypemarketing.in
testbot.afterorigin.com
typebot.influencer.love
www.chatgpt-biliran.com
91181264.your-access.one
abg-assistent.m-vogel.de
ai.chromebookstoreph.com
contextone.wpwakanda.com
form.sergiolimajr.com.br
hunterbot.saleshunter.ai
invite.bridesquadapp.com
link.cascadigital.com.br
onboarding.growthside.io
reward.onlinebotdemo.xyz
stap.venturemarketing.in
type.opaulovieira.com.br
aibot.angrybranding.co.uk
bot.aidigitalmarketing.kr
bot.amicidisanfaustino.it
bot.arraesecenteno.com.br
bot.blackboxsports.com.br
bot.cabinrentalagency.com
bot.fusionstarreviews.com
boyfriend-breakup.riku.ai
brigadeirosemdrama.com.br
chat.ertcrebateportal.com
chat.thehomebuyersusa.com
chat.thisiscrushhouse.com
forms.hiabhaykulkarni.com
healthandsafetycourses.uk
sellmyharleylouisiana.com
testbot.sharemyreview.net
typebot-viewer.vercel.app
verfica.botmachine.com.br
bot.adventureconsulting.hu
bot2.fusionstarreviews.com
casestudyemb.wpwakanda.com
chat.atlasoutfittersk9.com
configurator.bouclidom.com
help.atlasoutfittersk9.com
herbalife.barrettamario.it
homepageonly.wpwakanda.com
liveconvert.kandalearn.com
mainmenu1one.wpwakanda.com
newsletter.itshcormeos.com
tarian.theiofoundation.org
ted.meujalecobrasil.com.br
type.dericsoncalari.com.br
bot.pinpointinteractive.com
bot.polychromes-project.com
bot.seidinembroseanchetu.it
chatbot.berbelanjabiz.trade
designguide.techyscouts.com
jcapp.virtuesocialmedia.com
liveconvert2.kandalearn.com
presente.empresarias.com.mx
sell.sellthemotorhome.co.uk
anamnese.odontopavani.com.br
austin.channelautomation.com
bot.marketingplusmindset.com
bot.seidibergamoseanchetu.it
desabafe.sergiolimajr.com.br
download.venturemarketing.in
jc-app.virtuesocialmedia.com
piazzatorre.barrettamario.it
type.cookieacademyonline.com
upload.atlasoutfittersk9.com
bot.brigadeirosemdrama.com.br
forms.escoladeautomacao.com.br
onboarding.libertydreamcare.ie
type.talitasouzamarques.com.br
agendamento.sergiolimajr.com.br
anamnese.clinicamegasjdr.com.br
bookings.littlepartymonkeys.com
bot.comercializadoraomicron.com
elevateyourmind.groovepages.com
viewer-v2-typebot-io.vercel.app
yourfeedback.comebackreward.com
gerador.verificadordehospedes.com
personal-trainer.barrettamario.it
preagendamento.sergiolimajr.com.br
studiotecnicoimmobiliaremerelli.it
download.thailandmicespecialist.com
register.thailandmicespecialist.com
bot.studiotecnicoimmobiliaremerelli.it
pesquisa.escolamodacomproposito.com.br
anamnese.clinicaramosodontologia.com.br
chrome-os-inquiry-system.itschromeos.com
viewer-v2-git-main-typebot-io.vercel.app
main-menu-for-itschromeos.itschromeos.com

@vercel
Copy link

@vercel vercel bot commented on b2fa202 Mar 7, 2023

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 b2fa202 Mar 7, 2023

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

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

@vercel
Copy link

@vercel vercel bot commented on b2fa202 Mar 7, 2023

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:

docs – ./apps/docs

docs.typebot.io
docs-git-main-typebot-io.vercel.app
docs-typebot-io.vercel.app

Please sign in to comment.