@asgard-js/react 0.0.43-canary.24 → 0.0.43-canary.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.0.43-canary.24",
+  "version": "0.0.43-canary.26",
   "publishConfig": {
     "access": "public"
   },
@@ -54,7 +54,7 @@
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "@asgard-js/core": "^0.0.42-canary.1",
+    "@asgard-js/core": "^0.0.43-canary.26",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

package/src/components/chatbot/chatbot-container/chatbot-full-screen-container.tsx

@@ -20,12 +20,12 @@ export function ChatbotFullScreenContainer(
 
   usePreventOverScrolling(containerRef);
 
-  useOnScreenKeyboardScrollFix();
-
   const [, height] = useViewportSize() ?? [];
 
   const isOnScreenKeyboardOpen = useIsOnScreenKeyboardOpen();
 
+  useOnScreenKeyboardScrollFix(isOnScreenKeyboardOpen);
+
   const styles = useMemo(() => {
     return Object.assign(
       theme?.chatbot?.backgroundColor

package/src/components/chatbot/chatbot.module.scss

@@ -0,0 +1,24 @@
+.chatbot__auth_state_container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 20px;
+}
+
+.chatbot__error_state {
+  color: #ff6b6b;
+}
+
+.chatbot__error_state__content {
+  text-align: center;
+}
+
+.chatbot__error_state__icon {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+.chatbot__error_state__message {
+  // No additional styles needed - uses default text styling
+}

package/src/components/chatbot/chatbot.tsx

@@ -18,11 +18,13 @@ import {
   AsgardServiceContextProviderProps,
 } from '../../context';
 import { AuthState } from '@asgard-js/core';
+import clsx from 'clsx';
 import { ApiKeyInput } from './api-key-input';
 import { ChatbotHeader } from './chatbot-header';
 import { ChatbotBody } from './chatbot-body';
 import { ChatbotFooter } from './chatbot-footer';
 import { ChatbotContainer } from './chatbot-container/chatbot-container';
+import styles from './chatbot.module.scss';
 
 interface ChatbotProps extends AsgardTemplateContextValue {
   className?: string;
@@ -94,26 +96,14 @@ export const Chatbot = forwardRef(function Chatbot(
     switch (authState) {
       case 'loading':
         return (
-          <div style={{ 
-            display: 'flex', 
-            alignItems: 'center', 
-            justifyContent: 'center', 
-            flex: 1,
-            padding: '20px'
-          }}>
+          <div className={styles.chatbot__auth_state_container}>
             {loadingComponent || <div>Loading...</div>}
           </div>
         );
       
       case 'needApiKey':
         return (
-          <div style={{ 
-            display: 'flex', 
-            alignItems: 'center', 
-            justifyContent: 'center', 
-            flex: 1,
-            padding: '20px'
-          }}>
+          <div className={styles.chatbot__auth_state_container}>
             <ApiKeyInput
               title={title}
               onSubmit={onApiKeySubmit || (() => {})}
@@ -124,13 +114,7 @@ export const Chatbot = forwardRef(function Chatbot(
       
       case 'invalidApiKey':
         return (
-          <div style={{ 
-            display: 'flex', 
-            alignItems: 'center', 
-            justifyContent: 'center', 
-            flex: 1,
-            padding: '20px'
-          }}>
+          <div className={styles.chatbot__auth_state_container}>
             <ApiKeyInput
               title={title}
               onSubmit={onApiKeySubmit || (() => {})}
@@ -142,17 +126,10 @@ export const Chatbot = forwardRef(function Chatbot(
       
       case 'error':
         return (
-          <div style={{ 
-            display: 'flex', 
-            alignItems: 'center', 
-            justifyContent: 'center', 
-            flex: 1,
-            padding: '20px',
-            color: '#ff6b6b'
-          }}>
-            <div style={{ textAlign: 'center' }}>
-              <div style={{ fontSize: '16px', marginBottom: '8px' }}>⚠️</div>
-              <div>Something went wrong. Please try again later.</div>
+          <div className={clsx(styles.chatbot__auth_state_container, styles.chatbot__error_state)}>
+            <div className={styles.chatbot__error_state__content}>
+              <div className={styles.chatbot__error_state__icon}>⚠️</div>
+              <div className={styles.chatbot__error_state__message}>Something went wrong. Please try again later.</div>
             </div>
           </div>
         );

package/src/hooks/use-on-screen-keyboard-scroll-fix.ts

@@ -1,7 +1,9 @@
 import { useEffect } from 'react';
 
-export function useOnScreenKeyboardScrollFix(): void {
+export function useOnScreenKeyboardScrollFix(isOnScreenKeyboardOpen: boolean): void {
   useEffect(() => {
+    if (!isOnScreenKeyboardOpen) return;
+
     function handleScroll(): void {
       window.scrollTo(0, 0);
     }
@@ -11,5 +13,5 @@ export function useOnScreenKeyboardScrollFix(): void {
     return (): void => {
       window.removeEventListener('scroll', handleScroll);
     };
-  }, []);
+  }, [isOnScreenKeyboardOpen]);
 }