refactor: chat popup to interact with deployed bot

next/.env

@@ -3,5 +3,6 @@ CONTENTFUL_ACCESS_TOKEN=Sxcohi1Gy4kb-GcxIgOHg2SNyoN7RkXnWYLUChTn3rg
 CONTENTFUL_PREVIEW_ACCESS_TOKEN=Cvv9qF_0n8MGy7dpYHpT9qiqmzR8jmxmD33dKr3T4nQ
 CONTENTFUL_PREVIEW_SECRET=ratatouille
 CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN=CFPAT-Q_XrDKisA-0TPzqjMSCIf_n155q_fwFuxpm_rH_Fy7Y
+NEXT_PUBLIC_CHATBOT_URL=https://chatbot-si5zh4q2ka-nw.a.run.app/webhooks/rest/webhook
 NEXT_PUBLIC_CHECKOUT_URL=https://europe-west2-chatty-chef.cloudfunctions.net/checkout
 NEXT_PUBLIC_ADMIN_EMAIL=[email protected]

next/components/Chatbot/ChatBotWindow.tsx

@@ -4,11 +4,10 @@ import {Box, Button, Card, Text, Title, Group} from '@mantine/core'
 import {BotMessage, UserMessage} from './Message'
 import Input from './Input'
 
-import Api from './api'
-
 interface Message {
 	sender: 'user' | 'bot',
-	text: string,
+	text?: string,
+	picture?: string,
 }
 
 export default function ChatBotWindow({close}: {close: VoidFunction}) {
@@ -21,8 +20,23 @@ export default function ChatBotWindow({close}: {close: VoidFunction}) {
 	const send = async (text) => {
 		setMessages((messagesState) => [...messagesState, {sender: 'user', text}])
 		setIsLoading(true)
-		const botResponse = await Api.GetChatbotResponse(text)
-		setMessages((messagesState) => [...messagesState, {sender: 'bot', text: botResponse as string}])
+		const rawBotResponse = await fetch(process.env.NEXT_PUBLIC_CHATBOT_URL, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				sender: 'bob',
+				message: text,
+			}),
+		})
+		const botResponse = await rawBotResponse.json()
+		const botMessages = botResponse.map((botMessage) => ({
+			sender: 'bot',
+			text: botMessage.text,
+			image: botMessage.image,
+		}))
+		setMessages((messagesState) => [...messagesState, ...botMessages])
 		setIsLoading(false)
 	}
 
@@ -59,11 +73,11 @@ export default function ChatBotWindow({close}: {close: VoidFunction}) {
 					{messages.map((message) => {
 						const MessageComponent = message.sender === 'bot' ? BotMessage : UserMessage
 						return (
-							<MessageComponent>{message.text}</MessageComponent>
+							<MessageComponent text={message.text} image={message.image} />
 						)
 					})}
 					{isLoading && (
-						<BotMessage>...</BotMessage>
+						<BotMessage text='...' />
 					)}
 				</Box>
 				<Input onSend={send} />

next/components/Chatbot/Message.tsx

@@ -1,4 +1,4 @@
-import {Group, Text, Sx} from '@mantine/core'
+import {Group, Text, Sx, Image} from '@mantine/core'
 
 interface MessageProps {
 	children: React.ReactNode,
@@ -10,7 +10,6 @@ function Message({children, align, sx}: MessageProps) {
 	return (
 		<Group position={align}>
 			<Text
-				// color='white'
 				p={15}
 				mx={15}
 				mb={10}
@@ -22,22 +21,28 @@ function Message({children, align, sx}: MessageProps) {
 	)
 }
 
-export function UserMessage({children}: {children: string}) {
+export function UserMessage({text}: {text: string}) {
 	return (
 		<Message
 			align='right'
 			sx={(theme) => ({backgroundColor: theme.colors.orange[2]})}
-		>{children}
+		>
+			{text}
 		</Message>
 	)
 }
 
-export function BotMessage({children}: {children: string}) {
+export function BotMessage({text, image}: {text?: string, image?: string}) {
 	return (
 		<Message
 			align='left'
 			sx={(theme) => ({backgroundColor: theme.colors.orange[4]})}
-		>{children}
+		>
+			{image ? (
+				<Image src={image} />
+			) : (
+				text
+			)}
 		</Message>
 	)
 }

next/components/Chatbot/index.tsx

@@ -1,4 +1,4 @@
-import {FaJenkins} from 'react-icons/fa'
+import {SiCodechef} from 'react-icons/si'
 import {Affix, Button} from '@mantine/core'
 import ChatBotWindow from './ChatBotWindow'
 
@@ -13,9 +13,10 @@ export default function ChatBotPopup(
 				) : (
 					<Button
 						radius='xl'
-						size='md'
+						size='xl'
 						onClick={() => setOpened((o) => !o)}
-					><FaJenkins style={{color: 'black'}} />
+					>
+						<SiCodechef color='black' size='40' />
 					</Button>
 				) }
 			</Affix>