chore: styling adjustments

Author: oliverlaz

examples/react-chatbot/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
+  title: 'Stream AI Components React Chatbot Demo',
   description: 'AI Chat demo with Stream AI Components',
 };
 

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

@@ -13,7 +13,7 @@
   }
 
   .aicr__ai-message-composer__form {
-    background-color: var(--ai-demo-bg-tertiary);
+    background-color: var(--ai-demo-bg-secondary);
     border: 1px solid var(--ai-demo-border);
     border-radius: 24px;
     padding: 0.75rem 1rem;
@@ -22,7 +22,6 @@
 
     &:focus-within {
       border-color: var(--ai-demo-accent);
-      background-color: var(--ai-demo-bg-tertiary);
       box-shadow: 0 0 0 1px rgba(16, 163, 127, 0.2);
     }
   }
@@ -52,7 +51,6 @@
   }
 
   .aicr__ai-message-composer__select {
-    background-color: var(--ai-demo-bg-tertiary);
     color: var(--ai-demo-text-primary);
     border-color: var(--ai-demo-border);
     border-radius: 8px;
@@ -63,15 +61,13 @@
     transition: all 0.2s ease;
 
     &:hover {
-      background-color: var(--ai-demo-bg-tertiary);
       border-color: var(--ai-demo-accent);
     }
 
     &:focus {
       outline: none;
       border-color: var(--ai-demo-accent);
       box-shadow: 0 0 0 1px rgba(16, 163, 127, 0.2);
-      background-color: var(--ai-demo-bg-tertiary);
     }
 
     option {

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

@@ -45,6 +45,32 @@
   }
 }
 
+.str-chat__load-more-button {
+  padding: 0 1rem;
+
+  .str-chat__load-more-button__button {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--ai-demo-border);
+    border-radius: 8px;
+    background-color: transparent;
+    color: var(--ai-demo-text-primary);
+    font-family: var(--ai-demo-font-family);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--ai-demo-bg-tertiary);
+    }
+
+    &:active {
+      background-color: var(--ai-demo-border);
+    }
+  }
+}
+
 .ai-demo-sidebar-backdrop {
   display: none;
 

examples/react-chatbot/components/index.scss

@@ -47,7 +47,9 @@
   padding: 0;
 
   /* Font */
-  --ai-demo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  --ai-demo-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica',
+    'Arial', sans-serif;
 
   font-family: var(--ai-demo-font-family);
   line-height: 1.5;
@@ -78,7 +80,7 @@
   --ai-demo-ai-bg: transparent;
 
   /* Accent colors */
-  --ai-demo-accent: #10a37f;
+  --ai-demo-accent: #005fff;
   --ai-demo-accent-hover: #0d8968;
 
   color-scheme: dark;
@@ -104,7 +106,7 @@
   --ai-demo-ai-bg: transparent;
 
   /* Accent colors */
-  --ai-demo-accent: #10a37f;
+  --ai-demo-accent: #005fff;
   --ai-demo-accent-hover: #0d8968;
 
   color-scheme: light;

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

@@ -381,7 +381,7 @@ const ModelSelect = (
   return (
     <select
       className="aicr__ai-message-composer__select"
-      defaultValue="gpt-4o"
+      defaultValue="gpt-5"
       {...restProps}
     >
       {options}

packages/react-sdk/src/styles/ai-message-composer.scss

@@ -49,13 +49,14 @@
     font-size: 14px;
     border: 1px solid #ccc;
     border-radius: 0.5rem;
-    padding: 0.25rem 1rem 0.25rem 0.25rem;
+    padding: 0.5rem 1.25rem 0.5rem 1rem;
 
     background-color: transparent;
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='black'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-size: 0.75rem 0.75rem;
-    background-position: right center;
+    background-position-x: calc(100% - 5px);
+    background-position-y: center;
     background-clip: border-box;
   }
 }