81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
import { Heading, Stack } from '@chakra-ui/react'
|
|
import { AvatarProps, ChatTheme, ContainerColors, InputColors } from 'models'
|
|
import React from 'react'
|
|
import { AvatarForm } from './AvatarForm'
|
|
import { ButtonsTheme } from './ButtonsTheme'
|
|
import { GuestBubbles } from './GuestBubbles'
|
|
import { HostBubbles } from './HostBubbles'
|
|
import { InputsTheme } from './InputsTheme'
|
|
|
|
type Props = {
|
|
typebotId: string
|
|
chatTheme: ChatTheme
|
|
onChatThemeChange: (chatTheme: ChatTheme) => void
|
|
}
|
|
|
|
export const ChatThemeSettings = ({
|
|
typebotId,
|
|
chatTheme,
|
|
onChatThemeChange,
|
|
}: Props) => {
|
|
const handleHostBubblesChange = (hostBubbles: ContainerColors) =>
|
|
onChatThemeChange({ ...chatTheme, hostBubbles })
|
|
const handleGuestBubblesChange = (guestBubbles: ContainerColors) =>
|
|
onChatThemeChange({ ...chatTheme, guestBubbles })
|
|
const handleButtonsChange = (buttons: ContainerColors) =>
|
|
onChatThemeChange({ ...chatTheme, buttons })
|
|
const handleInputsChange = (inputs: InputColors) =>
|
|
onChatThemeChange({ ...chatTheme, inputs })
|
|
|
|
const handleHostAvatarChange = (hostAvatar: AvatarProps) =>
|
|
onChatThemeChange({ ...chatTheme, hostAvatar })
|
|
const handleGuestAvatarChange = (guestAvatar: AvatarProps) =>
|
|
onChatThemeChange({ ...chatTheme, guestAvatar })
|
|
|
|
return (
|
|
<Stack spacing={6}>
|
|
<AvatarForm
|
|
uploadFilePath={`typebots/${typebotId}/hostAvatar`}
|
|
title="Bot avatar"
|
|
avatarProps={chatTheme.hostAvatar}
|
|
isDefaultCheck
|
|
onAvatarChange={handleHostAvatarChange}
|
|
/>
|
|
<AvatarForm
|
|
uploadFilePath={`typebots/${typebotId}/guestAvatar`}
|
|
title="User avatar"
|
|
avatarProps={chatTheme.guestAvatar}
|
|
onAvatarChange={handleGuestAvatarChange}
|
|
/>
|
|
<Stack borderWidth={1} rounded="md" p="4" spacing={4}>
|
|
<Heading fontSize="lg">Bot bubbles</Heading>
|
|
<HostBubbles
|
|
hostBubbles={chatTheme.hostBubbles}
|
|
onHostBubblesChange={handleHostBubblesChange}
|
|
/>
|
|
</Stack>
|
|
<Stack borderWidth={1} rounded="md" p="4" spacing={4}>
|
|
<Heading fontSize="lg">User bubbles</Heading>
|
|
<GuestBubbles
|
|
guestBubbles={chatTheme.guestBubbles}
|
|
onGuestBubblesChange={handleGuestBubblesChange}
|
|
/>
|
|
</Stack>
|
|
<Stack borderWidth={1} rounded="md" p="4" spacing={4}>
|
|
<Heading fontSize="lg">Buttons</Heading>
|
|
<ButtonsTheme
|
|
buttons={chatTheme.buttons}
|
|
onButtonsChange={handleButtonsChange}
|
|
/>
|
|
</Stack>
|
|
<Stack borderWidth={1} rounded="md" p="4" spacing={4}>
|
|
<Heading fontSize="lg">Inputs</Heading>
|
|
<InputsTheme
|
|
inputs={chatTheme.inputs}
|
|
onInputsChange={handleInputsChange}
|
|
/>
|
|
</Stack>
|
|
</Stack>
|
|
)
|
|
}
|