chore: design tweaks (x2)

Author: oliverlaz

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

@@ -22,8 +22,8 @@
   }
 
   &__dot {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
     background-color: var(--ai-demo-text-secondary);
     border-radius: 50%;
     animation: ai-demo-thinking 1.4s ease-in-out infinite;
@@ -50,7 +50,9 @@
 }
 
 @keyframes ai-demo-thinking {
-  0%, 60%, 100% {
+  0%,
+  60%,
+  100% {
     transform: scale(1);
     opacity: 0.4;
   }
@@ -61,10 +63,12 @@
 }
 
 @keyframes ai-demo-text-fade {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
-  45%, 55% {
+  45%,
+  55% {
     opacity: 0.5;
   }
 }

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

@@ -4,7 +4,6 @@
   justify-content: center;
   height: 100%;
   width: 100%;
-  background-color: var(--ai-demo-bg-primary);
 
   &__content {
     display: flex;

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { AIMessageComposer } from '@stream-io/chat-react-ai';
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
   isImageFile,
   type Channel,
@@ -14,7 +14,6 @@ import {
   useChannelStateContext,
   useChatContext,
   useMessageComposer,
-  useStateStore,
 } from 'stream-chat-react';
 import { startAiAgent } from '@/components/api';
 import './MessageInputBar.scss';
@@ -32,6 +31,7 @@ export const MessageInputBar = () => {
   const composer = useMessageComposer();
 
   const { attachments } = useAttachmentsForPreview();
+  const [selectedModel, setSelectedModel] = useState<string>();
 
   useEffect(() => {
     if (!composer) return;
@@ -73,6 +73,7 @@ export const MessageInputBar = () => {
 
           const message = formData.get('message');
           const model = formData.get('model');
+          setSelectedModel(model as string);
 
           composer.textComposer.setText(message as string);
 
@@ -131,7 +132,7 @@ export const MessageInputBar = () => {
           <div style={{ display: 'flex', gap: '.25rem', alignItems: 'center' }}>
             <AIMessageComposer.FileInput name="attachments" />
             <AIMessageComposer.SpeechToTextButton />
-            <AIMessageComposer.ModelSelect name="model" />
+            <AIMessageComposer.ModelSelect name="model" value={selectedModel} />
           </div>
 
           <AIMessageComposer.SubmitButton active={attachments.length > 0} />

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

@@ -14,6 +14,8 @@ interface SidebarProps {
   onClose: () => void;
 }
 
+const NoOp = () => null;
+
 export const Sidebar = ({
   filters,
   options,
@@ -34,6 +36,7 @@ export const Sidebar = ({
           <ChannelList
             setActiveChannelOnMount={false}
             Preview={ChannelPreviewItem}
+            EmptyStateIndicator={NoOp}
             filters={filters}
             options={options}
             sort={sort}