From a2451d807aae7dbf7d00567ad97fc94c572d945f Mon Sep 17 00:00:00 2001
From: Strider2342 <arpad.ivany@hes.dev>
Date: Fri, 8 Nov 2024 19:06:36 +0100
Subject: [PATCH] Storybook: added new story for chat demostrating typingUsers
 (#28324)

---
 .../stories/chat/Chat.stories.tsx             | 44 ++++++++++++++++++-
 apps/react-storybook/stories/chat/data.ts     | 10 +++++
 2 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/apps/react-storybook/stories/chat/Chat.stories.tsx b/apps/react-storybook/stories/chat/Chat.stories.tsx
index b31d795f9917..5f09714bab4d 100644
--- a/apps/react-storybook/stories/chat/Chat.stories.tsx
+++ b/apps/react-storybook/stories/chat/Chat.stories.tsx
@@ -3,7 +3,7 @@ import {Chat, ChatTypes} from 'devextreme-react/chat'
 import type {Meta, StoryObj} from '@storybook/react';
 import DataSource from 'devextreme/data/data_source';
 import CustomStore from 'devextreme/data/custom_store';
-import { firstAuthor, secondAuthor, initialMessages, longError } from './data';
+import { firstAuthor, secondAuthor, thirdAuthor, fourthAuthor, initialMessages, longError } from './data';
 import { Popup } from 'devextreme-react/popup';
 
 import './styles.css';
@@ -390,3 +390,45 @@ export const Customization: Story = {
         );
     }
 }
+
+export const TypingUsers: Story = {
+    args: {
+        typingUsers: 'One user typing',
+    },
+    argTypes: {
+        typingUsers: {
+            control: 'select',
+            defaultValue: 'One user typing',
+            options: [
+                'No one is typing',
+                'One user typing',
+                'Two users typing',
+                'Three users typing',
+                'Multiple users typing',
+            ],
+            mapping: {
+                ['No one is typing']: [],
+                ['One user typing']: [ firstAuthor ],
+                ['Two users typing']: [ firstAuthor, secondAuthor ],
+                ['Three users typing']: [ firstAuthor, secondAuthor, thirdAuthor ],
+                ['Multiple users typing']: [ firstAuthor, secondAuthor, thirdAuthor, fourthAuthor ],
+            },
+        },
+    },
+    render: ({
+        typingUsers,
+    }) => {
+        return (
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                <Chat
+                    width={400}
+                    height={500}
+                    items={initialMessages}
+                    user={secondAuthor}
+                    typingUsers={typingUsers}
+                >
+                </Chat>
+            </div>
+        );
+    }
+}
diff --git a/apps/react-storybook/stories/chat/data.ts b/apps/react-storybook/stories/chat/data.ts
index 43df1d287bda..c5e7b209480a 100644
--- a/apps/react-storybook/stories/chat/data.ts
+++ b/apps/react-storybook/stories/chat/data.ts
@@ -12,6 +12,16 @@ export const secondAuthor: ChatTypes.User = {
     name: "Jane Smith"
 };
 
+export const thirdAuthor: ChatTypes.User = {
+    id: "b02d90c5-ca37-4cc6-9b62-56e2ce573893",
+    name: "Gordon Freeman"
+};
+
+export const fourthAuthor: ChatTypes.User = {
+    id: "8adef6b1-ff40-42df-8456-f7c080e132b8",
+    name: "Crash Bandicoot"
+};
+
 const todayDate = new Date();
 
 const date = new Date();