diff --git a/packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx b/packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx index 368f09e4b..9bd2045a8 100644 --- a/packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx +++ b/packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx @@ -186,6 +186,7 @@ export const ChatBlock = ({ isEnabled: typebot.theme.chat.hostAvatar?.isEnabled ?? true, src: avatarSrc && parseVariables(typebot.variables)(avatarSrc), }} + hasGuestAvatar={typebot.theme.chat.guestAvatar?.isEnabled ?? false} onDisplayNextStep={displayNextStep} /> ))} @@ -197,11 +198,13 @@ export const ChatBlock = ({ type Props = { displayChunk: ChatDisplayChunk hostAvatar: { isEnabled: boolean; src?: string } + hasGuestAvatar: boolean onDisplayNextStep: (answerContent?: string, isRetry?: boolean) => void } const ChatChunks = ({ displayChunk: { bubbles, input }, hostAvatar, + hasGuestAvatar, onDisplayNextStep, }: Props) => { // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -223,7 +226,10 @@ const ChatChunks = ({ hostAvatarSrc={hostAvatar.src} /> )} -
+
{bubbles.map((step) => ( )} diff --git a/packages/bot-engine/src/components/ChatBlock/ChatStep/InputChatStep.tsx b/packages/bot-engine/src/components/ChatBlock/ChatStep/InputChatStep.tsx index 1a420d8ab..18b842732 100644 --- a/packages/bot-engine/src/components/ChatBlock/ChatStep/InputChatStep.tsx +++ b/packages/bot-engine/src/components/ChatBlock/ChatStep/InputChatStep.tsx @@ -13,9 +13,11 @@ import { isInputValid } from 'services/inputs' export const InputChatStep = ({ step, hasAvatar, + hasGuestAvatar, onTransitionEnd, }: { step: InputStep + hasGuestAvatar: boolean hasAvatar: boolean onTransitionEnd: (answerContent?: string, isRetry?: boolean) => void }) => { @@ -70,6 +72,7 @@ export const InputChatStep = ({ step={step} onSubmit={handleSubmit} defaultValue={defaultValue?.toString()} + hasGuestAvatar={hasGuestAvatar} />
) @@ -79,10 +82,12 @@ const Input = ({ step, onSubmit, defaultValue, + hasGuestAvatar, }: { step: InputStep onSubmit: (value: string) => void defaultValue?: string + hasGuestAvatar: boolean }) => { switch (step.type) { case InputStepType.TEXT: @@ -91,7 +96,12 @@ const Input = ({ case InputStepType.URL: case InputStepType.PHONE: return ( - + ) case InputStepType.DATE: return diff --git a/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextForm.tsx b/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextForm.tsx index 230499355..a05e0fed1 100644 --- a/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextForm.tsx +++ b/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextForm.tsx @@ -19,11 +19,19 @@ type TextFormProps = { | PhoneNumberInputStep onSubmit: (value: string) => void defaultValue?: string + hasGuestAvatar: boolean } -export const TextForm = ({ step, onSubmit, defaultValue }: TextFormProps) => { +export const TextForm = ({ + step, + onSubmit, + defaultValue, + hasGuestAvatar, +}: TextFormProps) => { const [inputValue, setInputValue] = useState(defaultValue ?? '') + const isLongText = step.type === InputStepType.TEXT && step.options?.isLong + const handleChange = (inputValue: string) => { if (step.type === InputStepType.URL && !inputValue.startsWith('https://')) return inputValue === 'https:/' @@ -40,21 +48,21 @@ export const TextForm = ({ step, onSubmit, defaultValue }: TextFormProps) => { } return ( -
-
-
- - - -
-
+
+ + + ) } diff --git a/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextInputContent.tsx b/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextInputContent.tsx index 1465c7622..296cddf1c 100644 --- a/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextInputContent.tsx +++ b/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextInputContent.tsx @@ -150,7 +150,7 @@ const LongTextInput = React.forwardRef(