chore: add inline style for typing indicator (#107)

tjtanjin · Aug 29, 2024 · cd1c8a5 · cd1c8a5
1 parent d0cae97
commit cd1c8a5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/src/components/ChatBotBody/ChatBotBody.tsx b/src/components/ChatBotBody/ChatBotBody.tsx
@@ -59,7 +59,7 @@ const ChatBotBody = ({
 	const bodyStyle: CSSProperties = {
 		...styles?.bodyStyle,
 		scrollbarWidth: settings.chatWindow?.showScrollbar ? "auto" : "none",
-	}
+	};
 
 	// styles for user bubble
 	const userBubbleStyle: CSSProperties = {
@@ -272,10 +272,10 @@ const ChatBotBody = ({
 						}}
 						className={`rcb-bot-message ${botBubbleEntryStyle}`}
 					>
-						<div className="rcb-typing-indicator">
-							<span className="rcb-dot"/>
-							<span className="rcb-dot"/>
-							<span className="rcb-dot"/>
+						<div className="rcb-typing-indicator" style={{...styles?.rcbTypingIndicatorStyle}}>
+							<span className="rcb-dot" style={{...styles?.rcbDotStyle}}/>
+							<span className="rcb-dot" style={{...styles?.rcbDotStyle}}/>
+							<span className="rcb-dot" style={{...styles?.rcbDotStyle}}/>
 						</div>
 					</div>
 				</div>

diff --git a/src/constants/internal/DefaultStyles.tsx b/src/constants/internal/DefaultStyles.tsx
@@ -57,4 +57,6 @@ export const DefaultStyles: Styles = {
 	voiceIconStyle: {},
 	voiceIconDisabledStyle: {},
 	sendIconStyle: {},
+	rcbTypingIndicatorStyle: {},
+	rcbDotStyle: {},
 }
diff --git a/src/types/Styles.ts b/src/types/Styles.ts
@@ -57,4 +57,6 @@ export type Styles = {
 	voiceIconStyle?: React.CSSProperties;
 	voiceIconDisabledStyle?: React.CSSProperties;
 	sendIconStyle?: React.CSSProperties;
+	rcbTypingIndicatorStyle?: React.CSSProperties;
+	rcbDotStyle?: React.CSSProperties;
 }