chore: design tweaks

Author: oliverlaz

examples/react-chatbot/components/ChatContainer/ChatContainer.tsx

@@ -1,6 +1,16 @@
 'use client';
 
-import { Channel, MessageList, Window, MessageInput } from 'stream-chat-react';
+import { useEffect } from 'react';
+import type { DateSeparatorProps } from 'stream-chat-react';
+import { useChatContext } from 'stream-chat-react';
+import {
+  Channel,
+  MessageList,
+  Window,
+  MessageInput,
+  DateSeparator,
+} from 'stream-chat-react';
+import { customAlphabet } from 'nanoid';
 import { EmptyState } from '../EmptyState';
 import { MessageBubble } from '../MessageBubble';
 import { MessageInputBar } from '../MessageInputBar';
@@ -14,12 +24,33 @@ interface ChatContainerProps {
 
 const NoOp = () => null;
 
+const CustomDateSeparator = (props: DateSeparatorProps) => (
+  <DateSeparator {...props} position="center" />
+);
+
+const nanoId = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
+
 export const ChatContainer = ({ onToggleSidebar }: ChatContainerProps) => {
+  const { channel, setActiveChannel, client } = useChatContext();
+  useEffect(() => {
+    if (!channel) {
+      setActiveChannel(
+        client.channel('messaging', `ai-${nanoId()}`, {
+          members: [client.userID as string],
+          // @ts-expect-error fix - this is a hack that allows a custom upload function to run
+          own_capabilities: ['upload-file'],
+        }),
+      );
+    }
+  }, [channel, client, setActiveChannel]);
+
   return (
     <div className="ai-demo-chat-container">
       <Channel
         initializeOnMount={false}
-        EmptyPlaceholder={<EmptyState />}
+        // EmptyPlaceholder={<EmptyState />}
+        EmptyStateIndicator={EmptyState}
+        DateSeparator={CustomDateSeparator}
         Message={MessageBubble}
         UnreadMessagesNotification={NoOp}
         UnreadMessagesSeparator={NoOp}

examples/react-chatbot/components/EmptyState/EmptyState.tsx

@@ -1,27 +1,8 @@
 'use client';
 
-import { useEffect } from 'react';
-import { useChatContext } from 'stream-chat-react';
-import { customAlphabet } from 'nanoid';
 import './EmptyState.scss';
 
-const nanoId = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
-
 export const EmptyState = () => {
-  const { channel, setActiveChannel, client } = useChatContext();
-
-  useEffect(() => {
-    if (!channel) {
-      setActiveChannel(
-        client.channel('messaging', `ai-${nanoId()}`, {
-          members: [client.userID as string],
-          // @ts-expect-error fix - this is a hack that allows custom upload funtion to run
-          own_capabilities: ['upload-file'],
-        }),
-      );
-    }
-  }, [channel, client, setActiveChannel]);
-
   return (
     <div className="ai-demo-empty-state">
       <div className="ai-demo-empty-state__content">

examples/react-chatbot/components/MessageInputBar/MessageInputBar.scss

@@ -76,28 +76,6 @@
     }
   }
 
-  .aicr__ai-message-composer__form__submit-btn {
-    background-color: var(--ai-demo-accent);
-    color: white;
-    border: none;
-    border-radius: 8px;
-    padding: 0.5rem;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover:not(:disabled) {
-      background-color: var(--ai-demo-accent-hover);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
   /* Mobile responsiveness */
   @media (max-width: 768px) {
     padding: 1rem;

examples/react-chatbot/components/MessageInputBar/MessageInputBar.tsx

@@ -14,6 +14,7 @@ import {
   useChannelStateContext,
   useChatContext,
   useMessageComposer,
+  useStateStore,
 } from 'stream-chat-react';
 import { startAiAgent } from '@/components/api';
 import './MessageInputBar.scss';
@@ -133,7 +134,7 @@ export const MessageInputBar = () => {
             <AIMessageComposer.ModelSelect name="model" />
           </div>
 
-          <AIMessageComposer.SubmitButton />
+          <AIMessageComposer.SubmitButton active={attachments.length > 0} />
         </div>
       </AIMessageComposer>
     </div>

packages/react-sdk/src/components/composer/ai-message-composer.tsx

@@ -8,6 +8,7 @@ import {
   useState,
 } from 'react';
 import { customAlphabet } from 'nanoid';
+import clsx from 'clsx';
 import { StateStore } from '@stream-io/state-store';
 import { useStateStore } from '@stream-io/state-store/react-bindings';
 
@@ -330,7 +331,7 @@ const TextInput = (props: ComponentPropsWithoutRef<'input'>) => {
 
 const SpeechToTextButton = (
   props: ComponentPropsWithoutRef<'button'> & {
-    options: UseSpeechToTextOptions;
+    options?: UseSpeechToTextOptions;
   },
 ) => {
   const { setText } = useText();
@@ -360,10 +361,15 @@ const SpeechToTextButton = (
   );
 };
 
-const SubmitButton = (props: ComponentPropsWithoutRef<'button'>) => {
+const SubmitButton = (
+  props: ComponentPropsWithoutRef<'button'> & { active?: boolean },
+) => {
   return (
     <button
-      className="aicr__ai-message-composer__round-button"
+      className={clsx(
+        'aicr__ai-message-composer__round-button',
+        props.active && 'aicr__ai-message-composer__round-button--active',
+      )}
       type="submit"
       {...props}
     >