import React, { useState, useEffect, useRef } from ‘react’;
import {
Button,
Modal,
ModalBody,
Text,
TextArea,
Box,
Flex,
hubspot,
// You might need to import specific color tokens if available
// For example, if HubSpot provides a ‘neutral’ or ‘light’ background
// import { colors } from ‘@hubspot/ui-extensions/theme’; // This is an example, check actual docs
} from ‘@hubspot/ui-extensions’;
hubspot.extend(() => <Extension />);
const Extension = () => {
return (
<Button
overlay={
<Modal id=“chatbot-modal” title=“MCUTILITY” width=“md”>
<ModalBody>
<Box direction=“column” gap=“md” padding=“md”>
<ChatBotUI />
</Box>
</ModalBody>
</Modal>
}
>
Send SMS
</Button>
);
};
const ChatBotUI = () => {
const [messages, setMessages] = useState([
{ from: ‘bot’, text: ‘Hi there! How can I assist you today?’ },
]);
const refChatUi = useRef(null);
const [input, setInput] = useState(‘’);
const handleSend = () => {
if (!input.trim()) return;
const newMessages = [
…messages,
{ from: ‘user’, text: input },
{ from: ‘bot’, text: `You said: “${input}”. How else can I help?` },
];
setMessages(newMessages);
setInput(‘’);
};
useEffect(() => {
// Scroll to bottom of messages if needed
if (refChatUi.current) {
refChatUi.current.scrollTop = refChatUi.current.scrollHeight;
}
}, [messages]);
return (
<Box direction=“column” height=“400px”> {/* Added height for scrollable area */}
{/* Message display area */}
<Box
direction=“column”
gap=“xs”
padding=“sm”
borderRadius=“md”
marginBottom=“xs”
overflowY=“auto” // Make message area scrollable
ref={refChatUi} // Attach ref here
// The styling for the chat bubbles themselves
// Instead of setting background on the container, set it on individual message boxes
>
{messages.map((msg, idx) => (
<Flex
key={idx}
justifyContent={msg.from === ‘user’ ? ‘flex-end’ : ‘flex-start’}
>
<Box
padding=“sm”
borderRadius=“md”
width=“fit-content” // Make the bubble fit content
style={{
// Here’s where you’d apply the specific colors for each bubble
backgroundColor: msg.from === ‘bot’ ? ‘#e5e5ea’ : ‘#007bff’, // Example: light grey for bot, blue for user
color: msg.from === ‘bot’ ? ‘#000’ : ‘#fff’, // Example: black for bot, white for user
}}
>
<Text>{msg.text}</Text>
</Box>
</Flex>
))}
</Box>
{/* Input and Send button */}
<Box direction=“column” gap=“xs” marginTop=“auto”> {/* Push input to bottom */}
<TextArea
placeholder=“Type your message…”
value={input}
onChange={(value) => setInput(value)}
rows={2}
/>
<Button onClick={handleSend}>Send</Button>
</Box>
</Box>
);
}; Thank you in advance . Styling is not working when I open this card in hubspots