blsmedia/bot
2
0
Fork 0
Code Issues Activity

💄 (buttons) Improve multiple choice form UI

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-04-26 15:59:22 +02:00
parent f51d619c79
commit 124f350aa2
33 changed files with 454 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/embeds/js/src/components/ConversationContainer/AvatarSideContainer.tsx
View File

@@ -28,13 +28,13 @@ export const AvatarSideContainer = (props: Props) => {
<div
ref={avatarContainer}
class={
'flex mr-2 mb-2 flex-shrink-0 items-center relative typebot-avatar-container ' +
'flex flex-shrink-0 items-center relative typebot-avatar-container ' +
(isMobile() ? 'w-6' : 'w-10')
}
>
<div
class={
'absolute mb-2 flex items-center top-0' +
'absolute flex items-center top-0' +
(isMobile() ? ' w-6 h-6' : ' w-10 h-10') +
(props.hideAvatar ? ' opacity-0' : ' opacity-100')
}

95
packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx
View File

@@ -46,57 +46,54 @@ export const ChatChunk = (props: Props) => {
}
return (
<div class="flex w-full">
<div class="flex flex-col w-full min-w-0">
<div class="flex">
<Show
when={
props.theme.chat.hostAvatar?.isEnabled &&
props.messages.length > 0
}
>
<AvatarSideContainer
hostAvatarSrc={props.theme.chat.hostAvatar?.url}
hideAvatar={props.hideAvatar}
/>
</Show>
<div
class="flex-1"
style={{
'margin-right': props.theme.chat.guestAvatar?.isEnabled
? isMobile()
? '32px'
: '48px'
: undefined,
}}
>
<For each={props.messages.slice(0, displayedMessageIndex() + 1)}>
{(message) => (
<HostBubble
message={message}
typingEmulation={props.settings.typingEmulation}
onTransitionEnd={displayNextMessage}
/>
)}
</For>
</div>
</div>
{props.input && displayedMessageIndex() === props.messages.length && (
<InputChatBlock
block={props.input}
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={
props.settings.general.isInputPrefillEnabled ?? true
}
hasError={props.hasError}
<div class="flex flex-col w-full min-w-0 gap-2">
<div class={'flex' + (isMobile() ? ' gap-1' : ' gap-2')}>
<Show
when={
props.theme.chat.hostAvatar?.isEnabled && props.messages.length > 0
}
>
<AvatarSideContainer
hostAvatarSrc={props.theme.chat.hostAvatar?.url}
hideAvatar={props.hideAvatar}
/>
)}
</Show>
<div
class="flex flex-col flex-1 gap-2"
style={{
'margin-right': props.theme.chat.guestAvatar?.isEnabled
? isMobile()
? '32px'
: '48px'
: undefined,
}}
>
<For each={props.messages.slice(0, displayedMessageIndex() + 1)}>
{(message) => (
<HostBubble
message={message}
typingEmulation={props.settings.typingEmulation}
onTransitionEnd={displayNextMessage}
/>
)}
</For>
</div>
</div>
{props.input && displayedMessageIndex() === props.messages.length && (
<InputChatBlock
block={props.input}
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={
props.settings.general.isInputPrefillEnabled ?? true
}
hasError={props.hasError}
/>
)}
</div>
)
}

4
packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
View File

@@ -184,7 +184,7 @@ export const ConversationContainer = (props: Props) => {
return (
<div
ref={chatContainer}
class="overflow-y-scroll w-full min-h-full px-3 pt-10 relative scrollable-container typebot-chat-view scroll-smooth"
class="flex flex-col overflow-y-scroll w-full min-h-full px-3 pt-10 relative scrollable-container typebot-chat-view scroll-smooth gap-2"
>
<For each={chatChunks()}>
{(chatChunk, index) => (
@@ -228,5 +228,5 @@ type BottomSpacerProps = {
ref: HTMLDivElement | undefined
}
const BottomSpacer = (props: BottomSpacerProps) => {
return <div ref={props.ref} class="w-full h-32" />
return <div ref={props.ref} class="w-full h-32 flex-shrink-0" />
}

15
packages/embeds/js/src/components/ConversationContainer/PopupBlockedToast.tsx
View File

@@ -9,17 +9,18 @@ export const PopupBlockedToast = (props: Props) => {
class="w-full max-w-xs p-4 text-gray-500 bg-white shadow flex flex-col gap-2 typebot-popup-blocked-toast"
role="alert"
>
<span class="mb-1 text-sm font-semibold text-gray-900">
Popup blocked
</span>
<div class="mb-2 text-sm font-normal">
The bot wants to open a new tab but it was blocked by your broswer. It
needs a manual approval.
<div class="flex flex-col gap-1">
<span class=" text-sm font-semibold text-gray-900">Popup blocked</span>
<div class="text-sm font-normal">
The bot wants to open a new tab but it was blocked by your broswer. It
needs a manual approval.
</div>
</div>
<a
href={props.url}
target="_blank"
class="py-1 px-4 justify-center text-sm font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button"
class="py-1 px-4 justify-center text-sm font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 filter hover:brightness-90 active:brightness-75 typebot-button"
rel="noreferrer"
onClick={() => props.onLinkClick()}
>