blsmedia/bot
2
0
Fork 0
Code Activity

💄 (js) Fix spacings related to avatars

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-03-07 17:11:24 +01:00
parent 2788d58e50
commit b2fa2024a7
15 changed files with 16 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/js/src/components/ConversationContainer/ChatChunk.tsx
View File

@ -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'
@ -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)}>
@ -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={

11
packages/js/src/components/ConversationContainer/LoadingChunk.tsx
View File

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

10
packages/js/src/components/InputChatBlock.tsx
View File

@ -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
@ -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 ' +
@ -81,7 +82,6 @@ export const InputChatBlock = (props: Props) => {
isInputPrefillEnabled={props.isInputPrefillEnabled}
onSubmit={handleSubmit}
onSkip={handleSkip}
hasGuestAvatar={props.guestAvatar?.isEnabled ?? false}
/>
</div>
</Match>
@ -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
@ -117,7 +116,6 @@ const Input = (props: {
block={props.block as TextInputBlock}
defaultValue={getPrefilledValue()}
onSubmit={onSubmit}
hasGuestAvatar={props.hasGuestAvatar}
/>
</Match>
<Match when={props.block.type === InputBlockType.NUMBER}>
@ -125,7 +123,6 @@ const Input = (props: {
block={props.block as NumberInputBlock}
defaultValue={getPrefilledValue()}
onSubmit={onSubmit}
hasGuestAvatar={props.hasGuestAvatar}
/>
</Match>
<Match when={props.block.type === InputBlockType.EMAIL}>
@ -133,7 +130,6 @@ const Input = (props: {
block={props.block as EmailInputBlock}
defaultValue={getPrefilledValue()}
onSubmit={onSubmit}
hasGuestAvatar={props.hasGuestAvatar}
/>
</Match>
<Match when={props.block.type === InputBlockType.URL}>
@ -141,7 +137,6 @@ const Input = (props: {
block={props.block as UrlInputBlock}
defaultValue={getPrefilledValue()}
onSubmit={onSubmit}
hasGuestAvatar={props.hasGuestAvatar}
/>
</Match>
<Match when={props.block.type === InputBlockType.PHONE}>
@ -152,7 +147,6 @@ const Input = (props: {
}
defaultValue={getPrefilledValue()}
onSubmit={onSubmit}
hasGuestAvatar={props.hasGuestAvatar}
/>
</Match>
<Match when={props.block.type === InputBlockType.DATE}>