implement typing indicator

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cognigy/chat-components",
-	"version": "0.4.1",
+	"version": "0.5.0",
 	"type": "module",
 	"exports": "./dist/chat-components.js",
 	"files": [

src/common/TypingIndicator/TypingIndicator.module.css

@@ -0,0 +1,114 @@
+.typingIndicator {
+	align-items: center;
+	background-color: var(--white);
+	border-radius: 15px;
+	border: 1px solid var(--black-80);
+	box-sizing: border-box;
+	display: flex;
+	gap: 6px;
+	height: 44px;
+	justify-content: center;
+	padding-block: 10px;
+	padding-inline: 10px;
+	width: 62px;
+	margin-block: var(--webchat-message-margin-block, 24px);
+	margin-inline: var(--webchat-message-margin-inline, 20px);
+}
+
+.dot {
+	background: var(--black-40);
+	border-radius: 999px;
+	width: 6px;
+	height: 6px;
+}
+
+.dot:nth-child(1),
+.dot:nth-child(2),
+.dot:nth-child(3) {
+	animation-duration: 0.9s;
+	animation-timing-function: ease-in-out;
+	animation-fill-mode: both;
+	animation-iteration-count: infinite;
+	animation-delay: -1000ms;
+}
+
+.dot:nth-child(1) {
+	animation-name: dot1;
+}
+
+.dot:nth-child(2) {
+	animation-name: dot2;
+}
+
+.dot:nth-child(3) {
+	animation-name: dot3;
+}
+
+@media (prefers-reduced-motion) {
+	.dot {
+		animation: none !important;
+	}
+}
+
+@keyframes dot1 {
+	0% {
+		transform: translateY(0);
+	}
+	20% {
+		transform: translateY(-3px);
+	}
+	40% {
+		transform: translateY(-6px);
+	}
+	60% {
+		transform: translateY(-3px);
+	}
+	80% {
+		transform: translateY(0);
+	}
+	100% {
+		transform: translateY(0);
+	}
+}
+
+@keyframes dot2 {
+	0% {
+		transform: translateY(0);
+	}
+	20% {
+		transform: translateY(0);
+	}
+	40% {
+		transform: translateY(-3px);
+	}
+	60% {
+		transform: translateY(-6px);
+	}
+	80% {
+		transform: translateY(-3px);
+	}
+	100% {
+		transform: translateY(0);
+	}
+}
+
+@keyframes dot3 {
+	0% {
+		transform: translateY(0);
+	}
+	20% {
+		transform: translateY(0);
+	}
+	40% {
+		transform: translateY(0);
+	}
+	60% {
+		transform: translateY(-3px);
+	}
+	80% {
+		transform: translateY(-6px);
+	}
+	100% {
+		transform: translateY(-3px);
+	}
+}

src/common/TypingIndicator/TypingIndicator.tsx

@@ -0,0 +1,25 @@
+import { FC } from "react";
+import classes from "./TypingIndicator.module.css";
+import classnames from "classnames";
+
+interface ITypingIndicator {
+	className?: string;
+}
+
+const TypingIndicator: FC<ITypingIndicator> = props => {
+	const classNames = classnames(
+		classes.typingIndicator,
+		props.className,
+		"webchat-typing-indicator",
+	);
+
+	return (
+		<div className={classNames}>
+			<div className={classes.dot}></div>
+			<div className={classes.dot}></div>
+			<div className={classes.dot}></div>
+		</div>
+	);
+};
+
+export default TypingIndicator;

src/common/TypingIndicator/index.ts

@@ -0,0 +1,2 @@
+import TypingIndicator from "./TypingIndicator";
+export default TypingIndicator;

src/demo.tsx

@@ -15,6 +15,7 @@ import video from "test/fixtures/video.json";
 import videoYoutube from "test/fixtures/videoYoutube.json";
 import audio from "test/fixtures/audio.json";
 import { IMessage } from "@cognigy/socket-client";
+import { TypingIndicator } from "./index.ts";
 
 const messages: MessageProps[] = [
 	{
@@ -169,6 +170,7 @@ const action: MessageSender = payload => alert(JSON.stringify(payload, null, 2))
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
+		<TypingIndicator />
 		{messages.map((message, index) => (
 			<Message key={index} {...message} action={action} />
 		))}

src/index.ts

@@ -1,6 +1,3 @@
-import Message, { MessageProps } from "./messages/Message";
-import { match } from "./matcher";
-import Typography from "./common/Typography/Typography";
 import "@fontsource/figtree/400.css";
 import "@fontsource/figtree/400-italic.css";
 import "@fontsource/figtree/500.css";
@@ -10,6 +7,11 @@ import "@fontsource/figtree/600-italic.css";
 import "@fontsource/figtree/700.css";
 import "@fontsource/figtree/700-italic.css";
 
-export { Message, match };
+import Message, { MessageProps } from "./messages/Message";
+import { match } from "./matcher";
+import Typography from "./common/Typography/Typography";
+import TypingIndicator from "./common/TypingIndicator";
+
+export { Message, match, TypingIndicator };
 export type { MessageProps };
 export { Typography };