fix(react-sdk): default component adjustments (#26)

Author: arnautov-anton

.changeset/slick-jeans-beg.md

@@ -0,0 +1,5 @@
+---
+'@stream-io/chat-react-ai': patch
+---
+
+Adjust styling and certain prop types, add `material-symbols` as a peer dep

packages/react-sdk/package.json

@@ -51,7 +51,8 @@
   "packageManager": "[email protected]",
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19"
+    "react-dom": "^17 || ^18 || ^19",
+    "material-symbols": "^0.40.0"
   },
   "devDependencies": {
     "@types/node": "^24",

packages/react-sdk/src/components/ai-state-indicator.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useMemo } from 'react';
 
 const MESSAGES = [

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

@@ -398,18 +398,19 @@ const SpeechToTextButton = (
   );
 };
 
-const SubmitButton = (
-  props: ComponentPropsWithoutRef<'button'> & { active?: boolean },
-) => {
+const SubmitButton = ({
+  active,
+  ...restProps
+}: ComponentPropsWithoutRef<'button'> & { active?: boolean }) => {
   const { disabled } = useIsDisabled();
   return (
     <button
       className={clsx(
         'aicr__ai-message-composer__round-button',
-        props.active && 'aicr__ai-message-composer__round-button--active',
+        active && 'aicr__ai-message-composer__round-button--active',
       )}
       type="submit"
-      {...props}
+      {...restProps}
       disabled={disabled}
     >
       <span className="material-symbols-rounded">send</span>

packages/react-sdk/src/styles/index.scss

@@ -4,9 +4,9 @@
 @use './ai-state-indicator.scss';
 
 :root {
-  --aicr__bg-primary: #121212;
-  --aicr__bg-secondary: #1e1e1e;
-  --aicr__bg-tertiary: #2c2c2c;
-  --aicr__text-primary: #ffffff;
-  --aicr__text-secondary: #aaaaaa;
-}
+  --aicr__bg-primary: #ffffff;
+  --aicr__bg-secondary: #f7f7f8;
+  --aicr__bg-tertiary: #ececf1;
+  --aicr__text-primary: #353740;
+  --aicr__text-secondary: #565869;
+}

packages/react-sdk/src/styles/streaming-message.scss

@@ -67,7 +67,11 @@
   }
 
   .aicr__syntax-highlighter-pre {
-    // Syntax highlighting color variables (modern light theme for #ececf1 background)
+    overflow-x: auto;
+    background-color: var(--aicr__bg-primary);
+    border-radius: 0.5rem;
+    padding: .5rem;
+    margin: 0;
 
     code[class*='language-'] {
       // background: #272b33;