diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index 76aea3f4..e20fc1a6 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -55,7 +55,9 @@ const App: FC<AppProps> = () => {
       attach={true}
       options={RoomOptionsDefaults}
     >
-      <div style={{ display: 'flex', justifyContent: 'space-between', width: '800px', margin: 'auto' }}>
+      <div
+        style={{ display: 'flex', justifyContent: 'space-between', width: '800px', margin: 'auto', height: '650px' }}
+      >
         <Chat
           setRoomId={updateRoomId}
           roomId={roomIdState}
diff --git a/demo/src/components/ChatBoxComponent/ChatBoxComponent.tsx b/demo/src/components/ChatBoxComponent/ChatBoxComponent.tsx
new file mode 100644
index 00000000..37735c51
--- /dev/null
+++ b/demo/src/components/ChatBoxComponent/ChatBoxComponent.tsx
@@ -0,0 +1,179 @@
+import { MessageComponent } from '../MessageComponent';
+import { useChatClient, useMessages } from '@ably/chat/react';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { Message, MessageEventPayload, MessageEvents, PaginatedResult } from '@ably/chat';
+import { ErrorInfo } from 'ably';
+
+interface ChatBoxComponentProps {}
+
+export const ChatBoxComponent: FC<ChatBoxComponentProps> = () => {
+  const [loading, setLoading] = useState(true);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const chatClient = useChatClient();
+  const clientId = chatClient.clientId;
+
+  const { getPreviousMessages, deleteMessage, update } = useMessages({
+    listener: (message: MessageEventPayload) => {
+      switch (message.type) {
+        case MessageEvents.Created: {
+          setMessages((prevMessages) => {
+            // if already exists do nothing
+            const index = prevMessages.findIndex((m) => m.serial === message.message.serial);
+            if (index !== -1) {
+              return prevMessages;
+            }
+
+            // if the message is not in the list, add it
+            const newArray = [...prevMessages, message.message];
+
+            // and put it at the right place
+            newArray.sort((a, b) => (a.before(b) ? -1 : 1));
+
+            return newArray;
+          });
+          break;
+        }
+        case MessageEvents.Deleted: {
+          setMessages((prevMessage) => {
+            const updatedArray = prevMessage.filter((m) => {
+              return m.serial !== message.message.serial;
+            });
+
+            // don't change state if deleted message is not in the current list
+            if (prevMessage.length === updatedArray.length) {
+              return prevMessage;
+            }
+
+            return updatedArray;
+          });
+          break;
+        }
+        case MessageEvents.Updated: {
+          handleUpdatedMessage(message.message);
+          break;
+        }
+        default: {
+          console.error('Unknown message', message);
+        }
+      }
+    },
+    onDiscontinuity: (discontinuity) => {
+      console.log('Discontinuity', discontinuity);
+      // reset the messages when a discontinuity is detected,
+      // this will trigger a re-fetch of the messages
+      setMessages([]);
+
+      // set our state to loading, because we'll need to fetch previous messages again
+      setLoading(true);
+
+      // Do a message backfill
+      backfillPreviousMessages(getPreviousMessages);
+    },
+  });
+
+  const backfillPreviousMessages = (getPreviousMessages: ReturnType<typeof useMessages>['getPreviousMessages']) => {
+    chatClient.logger.debug('backfilling previous messages');
+    if (getPreviousMessages) {
+      getPreviousMessages({ limit: 50 })
+        .then((result: PaginatedResult<Message>) => {
+          chatClient.logger.debug('backfilled messages', result.items);
+          setMessages(result.items.filter((m) => !m.isDeleted).reverse());
+          setLoading(false);
+        })
+        .catch((error: ErrorInfo) => {
+          chatClient.logger.error(`Error fetching initial messages: ${error.toString()}`, error);
+        });
+    }
+  };
+
+  const handleUpdatedMessage = (message: Message) => {
+    setMessages((prevMessages) => {
+      const index = prevMessages.findIndex((m) => m.serial === message.serial);
+      if (index === -1) {
+        return prevMessages;
+      }
+
+      // skip update if the received version is not newer
+      if (!prevMessages[index].versionBefore(message)) {
+        return prevMessages;
+      }
+
+      const updatedArray = [...prevMessages];
+      updatedArray[index] = message;
+      return updatedArray;
+    });
+  };
+
+  const onUpdateMessage = useCallback(
+    (message: Message) => {
+      const newText = prompt('Enter new text');
+      if (!newText) {
+        return;
+      }
+      update(message, {
+        text: newText,
+        metadata: message.metadata,
+        headers: message.headers,
+      })
+        .then((updatedMessage: Message) => {
+          handleUpdatedMessage(updatedMessage);
+        })
+        .catch((error: unknown) => {
+          console.warn('failed to update message', error);
+        });
+    },
+    [update],
+  );
+
+  const onDeleteMessage = useCallback(
+    (message: Message) => {
+      deleteMessage(message, { description: 'deleted by user' }).then((deletedMessage: Message) => {
+        setMessages((prevMessages) => {
+          return prevMessages.filter((m) => m.serial !== deletedMessage.serial);
+        });
+      });
+    },
+    [deleteMessage],
+  );
+
+  // Used to anchor the scroll to the bottom of the chat
+  const messagesEndRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    chatClient.logger.debug('updating getPreviousMessages useEffect', { getPreviousMessages });
+    backfillPreviousMessages(getPreviousMessages);
+  }, [getPreviousMessages]);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    if (!loading) {
+      scrollToBottom();
+    }
+  }, [messages, loading]);
+
+  return (
+    <div
+      id="messages"
+      className="chat-window"
+    >
+      {loading && <div className="text-center m-auto">loading...</div>}
+      {!loading && (
+        <>
+          {messages.map((msg) => (
+            <MessageComponent
+              key={msg.serial}
+              self={msg.clientId === clientId}
+              message={msg}
+              onMessageDelete={onDeleteMessage}
+              onMessageUpdate={onUpdateMessage}
+            ></MessageComponent>
+          ))}
+          <div ref={messagesEndRef} />
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/demo/src/components/ChatBoxComponent/index.ts b/demo/src/components/ChatBoxComponent/index.ts
new file mode 100644
index 00000000..e79087b2
--- /dev/null
+++ b/demo/src/components/ChatBoxComponent/index.ts
@@ -0,0 +1 @@
+export { ChatBoxComponent } from './ChatBoxComponent.tsx';
diff --git a/demo/src/components/MessageInput/MessageInput.tsx b/demo/src/components/MessageInput/MessageInput.tsx
index ca37c8b6..427143dd 100644
--- a/demo/src/components/MessageInput/MessageInput.tsx
+++ b/demo/src/components/MessageInput/MessageInput.tsx
@@ -1,27 +1,41 @@
-import { ChangeEventHandler, FC, FormEventHandler, useRef } from 'react';
-import { Message, SendMessageParams } from '@ably/chat';
+import { ChangeEventHandler, FC, FormEventHandler, useEffect, useRef, useState } from 'react';
+import { useChatConnection, useMessages, useTyping } from '@ably/chat/react';
+import { ConnectionStatus } from '@ably/chat';
 
-interface MessageInputProps {
-  disabled: boolean;
+interface MessageInputProps {}
 
-  onSend(params: SendMessageParams): Promise<Message>;
+export const MessageInput: FC<MessageInputProps> = ({}) => {
+  const { send } = useMessages();
+  const { start, stop } = useTyping();
+  const { currentStatus } = useChatConnection();
+  const [shouldDisable, setShouldDisable] = useState(true);
 
-  onStartTyping(): void;
+  useEffect(() => {
+    // disable the input if the connection is not established
+    setShouldDisable(currentStatus !== ConnectionStatus.Connected);
+  }, [currentStatus]);
 
-  onStopTyping(): void;
-}
+  const handleStartTyping = () => {
+    start().catch((error: unknown) => {
+      console.error('Failed to start typing indicator', error);
+    });
+  };
+  const handleStopTyping = () => {
+    stop().catch((error: unknown) => {
+      console.error('Failed to stop typing indicator', error);
+    });
+  };
 
-export const MessageInput: FC<MessageInputProps> = ({ disabled, onSend, onStartTyping, onStopTyping }) => {
   const handleValueChange: ChangeEventHandler<HTMLInputElement> = ({ target }) => {
     // Typing indicators start method should be called with every keystroke since
     // they automatically stop if the user stops typing for a certain amount of time.
     //
     // The timeout duration can be configured when initializing the room.
     if (target.value && target.value.length > 0) {
-      onStartTyping();
+      handleStartTyping();
     } else {
       // For good UX we should stop typing indicators as soon as the input field is empty.
-      onStopTyping();
+      handleStopTyping();
     }
   };
 
@@ -38,51 +52,53 @@ export const MessageInput: FC<MessageInputProps> = ({ disabled, onSend, onStartT
     }
 
     // send the message and reset the input field
-    onSend({ text: messageInputRef.current.value })
+    send({ text: messageInputRef.current.value })
       .then(() => {
         if (messageInputRef.current) {
           messageInputRef.current.value = '';
         }
       })
-      .catch((error) => {
+      .catch((error: unknown) => {
         console.error('Failed to send message', error);
       });
 
     // stop typing indicators
-    onStopTyping();
+    handleStopTyping();
   };
 
   return (
-    <form
-      onSubmit={handleFormSubmit}
-      className="flex"
-    >
-      <input
-        type="text"
-        onChange={handleValueChange}
-        disabled={disabled}
-        placeholder="Say something"
-        className="w-full focus:outline-none focus:placeholder-gray-400 text-gray-600 placeholder-gray-600 pl-2 pr-2 bg-gray-200 rounded-l-md py-1"
-        ref={messageInputRef}
-        autoFocus
-      />
-      <div className="items-center inset-y-0 flex">
-        <button
-          disabled={disabled}
-          type="submit"
-          className="inline-flex items-center justify-center rounded-r-md px-3 py-1 transition duration-500 ease-in-out text-white bg-blue-500 hover:bg-blue-400 focus:outline-none disabled:bg-gray-400 disabled:cursor-not-allowed"
-        >
-          Send
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            className="h-6 w-6 ml-2 transform rotate-90"
+    <div className="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
+      <form
+        onSubmit={handleFormSubmit}
+        className="flex"
+      >
+        <input
+          type="text"
+          onChange={handleValueChange}
+          disabled={shouldDisable}
+          placeholder="Say something"
+          className="w-full focus:outline-none focus:placeholder-gray-400 text-gray-600 placeholder-gray-600 pl-2 pr-2 bg-gray-200 rounded-l-md py-1"
+          ref={messageInputRef}
+          autoFocus
+        />
+        <div className="items-center inset-y-0 flex">
+          <button
+            disabled={shouldDisable}
+            type="submit"
+            className="inline-flex items-center justify-center rounded-r-md px-3 py-1 transition duration-500 ease-in-out text-white bg-blue-500 hover:bg-blue-400 focus:outline-none disabled:bg-gray-400 disabled:cursor-not-allowed"
           >
-            <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"></path>
-          </svg>
-        </button>
-      </div>
-    </form>
+            Send
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              className="h-6 w-6 ml-2 transform rotate-90"
+            >
+              <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"></path>
+            </svg>
+          </button>
+        </div>
+      </form>
+    </div>
   );
 };
diff --git a/demo/src/components/ReactionComponent/ReactionComponent.tsx b/demo/src/components/ReactionComponent/ReactionComponent.tsx
new file mode 100644
index 00000000..ddd01ff5
--- /dev/null
+++ b/demo/src/components/ReactionComponent/ReactionComponent.tsx
@@ -0,0 +1,48 @@
+import { ReactionInput } from '../ReactionInput';
+import { FC, useEffect, useState } from 'react';
+import { ConnectionStatus, Reaction } from '@ably/chat';
+import { useChatConnection, useRoom, useRoomReactions } from '@ably/chat/react';
+
+interface ReactionComponentProps {}
+
+export const ReactionComponent: FC<ReactionComponentProps> = () => {
+  const [isConnected, setIsConnected] = useState(true);
+  const { currentStatus } = useChatConnection();
+  const [roomReactions, setRoomReactions] = useState<Reaction[]>([]);
+  const { roomId } = useRoom();
+  const { send: sendReaction } = useRoomReactions({
+    listener: (reaction: Reaction) => {
+      setRoomReactions([...roomReactions, reaction]);
+    },
+  });
+
+  useEffect(() => {
+    // clear reactions when the room changes
+    if (roomId) {
+      setRoomReactions([]);
+    }
+  }, [roomId]);
+
+  useEffect(() => {
+    // enable/disable the input based on the connection status
+    setIsConnected(currentStatus === ConnectionStatus.Connected);
+  }, [currentStatus]);
+
+  return (
+    <div>
+      <div>
+        <ReactionInput
+          reactions={[]}
+          onSend={sendReaction}
+          disabled={!isConnected}
+        ></ReactionInput>
+      </div>
+      <div>
+        Received reactions:{' '}
+        {roomReactions.map((r, idx) => (
+          <span key={idx}>{r.type}</span>
+        ))}{' '}
+      </div>
+    </div>
+  );
+};
diff --git a/demo/src/components/ReactionComponent/index.ts b/demo/src/components/ReactionComponent/index.ts
new file mode 100644
index 00000000..c507bb76
--- /dev/null
+++ b/demo/src/components/ReactionComponent/index.ts
@@ -0,0 +1 @@
+export { ReactionComponent } from './ReactionComponent.tsx';
diff --git a/demo/src/components/TypingIndicatorPanel/TypingIndicatorPanel.tsx b/demo/src/components/TypingIndicatorPanel/TypingIndicatorPanel.tsx
new file mode 100644
index 00000000..189675a5
--- /dev/null
+++ b/demo/src/components/TypingIndicatorPanel/TypingIndicatorPanel.tsx
@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { useChatClient, useTyping } from '@ably/chat/react';
+
+interface TypingIndicatorPanelProps {}
+
+export const TypingIndicatorPanel: FC<TypingIndicatorPanelProps> = () => {
+  const chatClient = useChatClient();
+  const clientId = chatClient.clientId;
+  const { currentlyTyping, error } = useTyping();
+
+  return (
+    <div>
+      {error && <div className="text-red-600 dark:text-red-500 p-3">Typing indicator error: {error.message}</div>}
+      {!error && (
+        <div className="typing-indicator-container">
+          {new Array(...currentlyTyping)
+            .filter((client) => client !== clientId)
+            .map((client) => (
+              <p key={client}>{client} is typing...</p>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/demo/src/components/TypingIndicatorPanel/index.ts b/demo/src/components/TypingIndicatorPanel/index.ts
new file mode 100644
index 00000000..b057c744
--- /dev/null
+++ b/demo/src/components/TypingIndicatorPanel/index.ts
@@ -0,0 +1 @@
+export { TypingIndicatorPanel } from './TypingIndicatorPanel.tsx';
diff --git a/demo/src/containers/Chat/Chat.tsx b/demo/src/containers/Chat/Chat.tsx
index 89fd2b05..fdc01dff 100644
--- a/demo/src/containers/Chat/Chat.tsx
+++ b/demo/src/containers/Chat/Chat.tsx
@@ -1,152 +1,21 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { MessageComponent } from '../../components/MessageComponent';
+import { useEffect, useState } from 'react';
 import { MessageInput } from '../../components/MessageInput';
-import { useChatClient, useChatConnection, useMessages, useRoomReactions, useTyping } from '@ably/chat/react';
-import { ReactionInput } from '../../components/ReactionInput';
+import { useChatClient, useChatConnection } from '@ably/chat/react';
 import { ConnectionStatusComponent } from '../../components/ConnectionStatusComponent';
-import { ConnectionStatus, Message, MessageEventPayload, MessageEvents, PaginatedResult, Reaction } from '@ably/chat';
+import { ConnectionStatus } from '@ably/chat';
+import { TypingIndicatorPanel } from '../../components/TypingIndicatorPanel';
+import { ChatBoxComponent } from '../../components/ChatBoxComponent';
+import { ReactionComponent } from '../../components/ReactionComponent';
 
 export const Chat = (props: { roomId: string; setRoomId: (roomId: string) => void }) => {
   const chatClient = useChatClient();
   const clientId = chatClient.clientId;
-  const [messages, setMessages] = useState<Message[]>([]);
+  const [isConnected, setIsConnected] = useState(false);
   const { currentStatus } = useChatConnection();
-  const [loading, setLoading] = useState(true);
-
-  const isConnected: boolean = currentStatus === ConnectionStatus.Connected;
-
-  const backfillPreviousMessages = (getPreviousMessages: ReturnType<typeof useMessages>['getPreviousMessages']) => {
-    chatClient.logger.debug('backfilling previous messages');
-    if (getPreviousMessages) {
-      getPreviousMessages({ limit: 50 })
-        .then((result: PaginatedResult<Message>) => {
-          chatClient.logger.debug('backfilled messages', result.items);
-          setMessages(result.items.filter((m) => !m.isDeleted).reverse());
-          setLoading(false);
-        })
-        .catch((error: unknown) => {
-          chatClient.logger.error('Error fetching initial messages', error);
-        });
-    }
-  };
-
-  const handleUpdatedMessage = (message: Message) => {
-    setMessages((prevMessages) => {
-      const index = prevMessages.findIndex((m) => m.serial === message.serial);
-      if (index === -1) {
-        return prevMessages;
-      }
-
-      // skip update if the received version is not newer
-      if (!prevMessages[index].versionBefore(message)) {
-        return prevMessages;
-      }
-
-      const updatedArray = [...prevMessages];
-      updatedArray[index] = message;
-      return updatedArray;
-    });
-  };
-
-  const {
-    send: sendMessage,
-    getPreviousMessages,
-    deleteMessage,
-    update,
-  } = useMessages({
-    listener: (message: MessageEventPayload) => {
-      switch (message.type) {
-        case MessageEvents.Created: {
-          setMessages((prevMessages) => {
-            // if already exists do nothing
-            const index = prevMessages.findIndex((m) => m.serial === message.message.serial);
-            if (index !== -1) {
-              return prevMessages;
-            }
-
-            // if the message is not in the list, add it
-            const newArray = [...prevMessages, message.message];
-
-            // and put it at the right place
-            for (let i = newArray.length - 1; i > 1; i--) {
-              if (newArray[i].before(newArray[i - 1])) {
-                const temp = newArray[i];
-                newArray[i] = newArray[i - 1];
-                newArray[i - 1] = temp;
-              }
-            }
-
-            return newArray;
-          });
-          break;
-        }
-        case MessageEvents.Deleted: {
-          setMessages((prevMessage) => {
-            const updatedArray = prevMessage.filter((m) => {
-              return m.serial !== message.message.serial;
-            });
-
-            // don't change state if deleted message is not in the current list
-            if (prevMessage.length === updatedArray.length) {
-              return prevMessage;
-            }
-
-            return updatedArray;
-          });
-          break;
-        }
-        case MessageEvents.Updated: {
-          handleUpdatedMessage(message.message);
-          break;
-        }
-        default: {
-          console.error('Unknown message', message);
-        }
-      }
-    },
-    onDiscontinuity: (discontinuity) => {
-      console.log('Discontinuity', discontinuity);
-      // reset the messages when a discontinuity is detected,
-      // this will trigger a re-fetch of the messages
-      setMessages([]);
-
-      // set our state to loading, because we'll need to fetch previous messages again
-      setLoading(true);
-
-      // Do a message backfill
-      backfillPreviousMessages(getPreviousMessages);
-    },
-  });
-
-  const { start, stop, currentlyTyping, error: typingError } = useTyping();
-  const [roomReactions, setRoomReactions] = useState<Reaction[]>([]);
-
-  const { send: sendReaction } = useRoomReactions({
-    listener: (reaction: Reaction) => {
-      setRoomReactions([...roomReactions, reaction]);
-    },
-  });
-
-  // Used to anchor the scroll to the bottom of the chat
-  const messagesEndRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    chatClient.logger.debug('updating getPreviousMessages useEffect', { getPreviousMessages });
-    backfillPreviousMessages(getPreviousMessages);
-  }, [getPreviousMessages]);
-
-  const handleStartTyping = () => {
-    start().catch((error: unknown) => {
-      console.error('Failed to start typing indicator', error);
-    });
-  };
-
-  const handleStopTyping = () => {
-    stop().catch((error: unknown) => {
-      console.error('Failed to stop typing indicator', error);
-    });
-  };
-
+    setIsConnected(currentStatus === ConnectionStatus.Connected);
+  }, [currentStatus]);
   /**
    * In a real app, changing the logged in user typically means navigating to
    * some sort of login page and then navigating back to the main app.
@@ -188,138 +57,49 @@ export const Chat = (props: { roomId: string; setRoomId: (roomId: string) => voi
     if (!newRoomId) {
       return;
     }
-
-    // Clear the room messages
-    setMessages([]);
-    setLoading(true);
-    setRoomReactions([]);
     props.setRoomId(newRoomId);
   }
 
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
-
-  useEffect(() => {
-    if (!loading) {
-      scrollToBottom();
-    }
-  }, [messages, loading]);
-
-  const onUpdateMessage = useCallback(
-    (message: Message) => {
-      const newText = prompt('Enter new text');
-      if (!newText) {
-        return;
-      }
-      update(message, {
-        text: newText,
-        metadata: message.metadata,
-        headers: message.headers,
-      })
-        .then((updatedMessage: Message) => {
-          handleUpdatedMessage(updatedMessage);
-        })
-        .catch((error: unknown) => {
-          console.warn('failed to update message', error);
-        });
-    },
-    [update],
-  );
-
-  const onDeleteMessage = useCallback(
-    (message: Message) => {
-      deleteMessage(message, { description: 'deleted by user' }).then((deletedMessage: Message) => {
-        setMessages((prevMessages) => {
-          return prevMessages.filter((m) => m.serial !== deletedMessage.serial);
-        });
-      });
-    },
-    [deleteMessage],
-  );
-
   return (
-    <div className="flex-1 p:2 sm:p-12 justify-between flex flex-col h-screen">
-      <ConnectionStatusComponent />
-      <div
-        className="text-xs p-3"
-        style={{ backgroundColor: '#333' }}
-      >
-        You are <strong>{clientId}</strong>.{' '}
-        <a
-          href="#"
-          className="text-blue-600 dark:text-blue-500 hover:underline"
-          onClick={changeClientId}
-        >
-          Change clientId
-        </a>
-        .
-      </div>
-      <div
-        className="text-xs p-3"
-        style={{ backgroundColor: '#333' }}
-      >
-        You are in room <strong>{props.roomId}</strong>.{' '}
-        <a
-          href="#"
-          className="text-blue-600 dark:text-blue-500 hover:underline"
-          onClick={changeRoomId}
-        >
-          Change roomId
-        </a>
-        .
-      </div>
-      {loading && <div className="text-center m-auto">loading...</div>}
-      {!loading && (
-        <div
-          id="messages"
-          className="w-96 flex flex-auto flex-col space-y-4 p-3 overflow-y-auto scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch"
-        >
-          {messages.map((msg) => (
-            <MessageComponent
-              key={msg.serial}
-              self={msg.clientId === clientId}
-              message={msg}
-              onMessageDelete={onDeleteMessage}
-              onMessageUpdate={onUpdateMessage}
-            ></MessageComponent>
-          ))}
-          <div ref={messagesEndRef} />
-        </div>
-      )}
-      {typingError && (
-        <div className="text-red-600 dark:text-red-500 p-3">Typing indicator error: {typingError.message}</div>
-      )}
-      {!typingError && (
-        <div className="typing-indicator-container">
-          {new Array(...currentlyTyping)
-            .filter((client) => client !== clientId)
-            .map((client) => (
-              <p key={client}>{client} is typing...</p>
-            ))}
+    <>
+      {!isConnected && <div className="text-center m-auto">loading...</div>}
+      {isConnected && (
+        <div className="flex-1 p:2 sm:p-12 justify-between flex flex-col chat-box-wrapper">
+          <ConnectionStatusComponent />
+          <div
+            className="text-xs p-3"
+            style={{ backgroundColor: '#333' }}
+          >
+            You are <strong>{clientId}</strong>.{' '}
+            <a
+              href="#"
+              className="text-blue-600 dark:text-blue-500 hover:underline"
+              onClick={changeClientId}
+            >
+              Change clientId
+            </a>
+            .
+          </div>
+          <div
+            className="text-xs p-3"
+            style={{ backgroundColor: '#333' }}
+          >
+            You are in room <strong>{props.roomId}</strong>.{' '}
+            <a
+              href="#"
+              className="text-blue-600 dark:text-blue-500 hover:underline"
+              onClick={changeRoomId}
+            >
+              Change roomId
+            </a>
+            .
+          </div>
+          <ChatBoxComponent />
+          <TypingIndicatorPanel />
+          <MessageInput />
+          <ReactionComponent />
         </div>
       )}
-      <div className="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
-        <MessageInput
-          disabled={!isConnected}
-          onSend={sendMessage}
-          onStartTyping={handleStartTyping}
-          onStopTyping={handleStopTyping}
-        />
-      </div>
-      <div>
-        <ReactionInput
-          reactions={[]}
-          onSend={sendReaction}
-          disabled={!isConnected}
-        ></ReactionInput>
-      </div>
-      <div>
-        Received reactions:{' '}
-        {roomReactions.map((r, idx) => (
-          <span key={idx}>{r.type}</span>
-        ))}{' '}
-      </div>
-    </div>
+    </>
   );
 };
diff --git a/demo/src/index.css b/demo/src/index.css
index 8a617279..bbb318a9 100644
--- a/demo/src/index.css
+++ b/demo/src/index.css
@@ -21,7 +21,27 @@ body {
   margin: 0 auto;
   place-items: center;
   min-width: 320px;
-  min-height: 100vh;
+  height: 100vh;
+}
+
+.chat-box-wrapper {
+  height: 100vh;
+  min-height: 300px;
+}
+
+.chat-window {
+  height: 100%;
+  overflow-y: auto; /* Allows scroll the window when messages are added beyond the max height */
+  padding: 1rem; /* Adds padding */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.1);
+}
+
+.typing-indicator-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
 }
 
 .reactions-picker > a {
diff --git a/demo/src/main.tsx b/demo/src/main.tsx
index 318ce314..ebc9dae3 100644
--- a/demo/src/main.tsx
+++ b/demo/src/main.tsx
@@ -60,7 +60,7 @@ const getRealtimeOptions = () => {
 
 const realtimeClient = new Ably.Realtime(getRealtimeOptions());
 
-const chatClient = new ChatClient(realtimeClient, { logLevel: LogLevel.Info });
+const chatClient = new ChatClient(realtimeClient, { logLevel: LogLevel.Debug });
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>