Chat: add empty view stories

apps/react-storybook/stories/chat/Chat.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import {Chat, ChatTypes} from 'devextreme-react/chat'
 import type {Meta, StoryObj} from '@storybook/react';
 import { firstAuthor, secondAuthor, initialMessages } from './data';
@@ -44,6 +44,7 @@ export const Overview: Story = {
                 [firstAuthor.name]: firstAuthor,
                 [secondAuthor.name]: secondAuthor,
             },
+            defaultValue: firstAuthor.name,
         },
         hint: {
             control: 'text',
@@ -65,8 +66,14 @@ export const Overview: Story = {
         const [messages, setMessages] = useState(items);
 
         const onMessageSend = useCallback(({ message }) => {
-            setMessages((prevMessages) => [...prevMessages, message]);
-        }, []);
+            const updatedMessages = [...messages, message];
+
+            setMessages(updatedMessages);
+        }, [messages]);
+
+        useEffect(() => {
+            setMessages(items);
+        }, [items]);
 
         return (
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -90,6 +97,76 @@ export const Overview: Story = {
     }
 }
 
+export const EmptyView: Story = {
+    args: {
+        items: [],
+        user: firstAuthor,
+        ...commonArgs,
+    },
+    argTypes: {
+        user: {
+            control: 'select',
+            options: [firstAuthor.name, secondAuthor.name],
+            mapping: {
+                [firstAuthor.name]: firstAuthor,
+                [secondAuthor.name]: secondAuthor,
+            },
+            defaultValue: firstAuthor.name,
+        },
+        hint: {
+            control: 'text',
+        }
+    },
+    render: ({
+        width,
+        height,
+        disabled,
+        rtlEnabled,
+        user,
+        items,
+        onItemsChange,
+        visible,
+        hint,
+        activeStateEnabled,
+        hoverStateEnabled,
+        focusStateEnabled,
+    }) => {
+        const [messages, setMessages] = useState(items);
+
+        const onMessageSend = useCallback(({ message }) => {
+            const updatedMessages = [...messages, message];
+
+            setMessages(updatedMessages);
+        }, [messages]);
+
+        useEffect(() => {
+            console.log(2);
+            setMessages(items);
+        }, [items]);
+
+        return (
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                <Chat
+                    width={width}
+                    height={height}
+                    items={messages}
+                    onItemsChange={onItemsChange}
+                    disabled={disabled}
+                    rtlEnabled={rtlEnabled}
+                    user={user}
+                    onMessageSend={onMessageSend}
+                    visible={visible}
+                    hint={hint}
+                    activeStateEnabled={activeStateEnabled}
+                    focusStateEnabled={focusStateEnabled}
+                    hoverStateEnabled={hoverStateEnabled}
+                >
+                </Chat>
+            </div>
+        );
+    }
+}
+
 export const PopupIntegration: Story = {
     args: {
         items: initialMessages,
@@ -106,6 +183,7 @@ export const PopupIntegration: Story = {
                 [firstAuthor.name]: firstAuthor,
                 [secondAuthor.name]: secondAuthor,
             },
+            defaultValue: firstAuthor.name,
         },
         hint: {
             control: 'text',
@@ -130,6 +208,10 @@ export const PopupIntegration: Story = {
             setMessages((prevMessages) => [...prevMessages, message]);
         }, []);
 
+        useEffect(() => {
+            setMessages(items);
+        }, [items]);
+
         return (
             <Popup
                 width={300}

apps/react-storybook/stories/chat/data.ts

@@ -12,6 +12,11 @@ export const secondAuthor: ChatTypes.User = {
     name: "Jane Smith"
 };
 
+const todayDate = new Date();
+
+const date = new Date();
+const yesterdayDate = date.setDate(date.getDate() - 1);
+
 export const initialMessages: ChatTypes.Message[] = [
     {
         timestamp: "2024-10-01T10:15:30Z",
@@ -54,8 +59,18 @@ export const initialMessages: ChatTypes.Message[] = [
         text: "I also want to get out into nature. Want to join me?"
     },
     {
-        timestamp: "2024-10-01T10:35:00Z",
+        timestamp: yesterdayDate,
         author: secondAuthor,
         text: "I'd love to! Just let me know when you're ready."
+    },
+    {
+        timestamp: todayDate,
+        author: firstAuthor,
+        text: "Great!"
+    },
+    {
+        timestamp: todayDate,
+        author: firstAuthor,
+        text: "Great! Looking forward to it!"
     }
 ];