@asgard-js/react 0.0.43-canary.1 → 0.0.43-canary.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.0.43-canary.1",
+  "version": "0.0.43-canary.11",
   "publishConfig": {
     "access": "public"
   },

package/src/components/chatbot/api-key-input/api-key-input.module.scss

@@ -120,9 +120,9 @@
 .submitButton {
   width: 100%;
   height: 42px;
-  background: #5856d6;
   border: none;
   border-radius: 6px;
+  background-color: #5856d6;
   color: white;
   font-size: 14px;
   font-weight: 500;
@@ -131,7 +131,7 @@
   outline: none;
 
   &:hover:not(:disabled) {
-    background: #4845c7;
+    opacity: 0.9;
     transform: translateY(-1px);
   }
 

package/src/components/chatbot/api-key-input/api-key-input.tsx

@@ -1,7 +1,8 @@
 import { useState, FormEvent, ChangeEvent } from 'react';
 import clsx from 'clsx';
-import ProfileSvg from '../../../icons/profile.svg?react';
 import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
+import { useAsgardContext } from '../../../context/asgard-service-context';
+import { ProfileIcon } from '../profile-icon';
 import styles from './api-key-input.module.scss';
 
 export interface ApiKeyInputProps {
@@ -26,6 +27,8 @@ export function ApiKeyInput({
   const [apiKey, setApiKey] = useState('');
   const [showPassword, setShowPassword] = useState(false);
   const { chatbot } = useAsgardThemeContext();
+  const { avatar } = useAsgardContext();
+  console.log('chatbot', chatbot);
 
   const handleSubmit = (e: FormEvent): void => {
     e.preventDefault();
@@ -51,8 +54,8 @@ export function ApiKeyInput({
       }}
     >
       <div className={styles.header}>
-        <ProfileSvg className={styles.icon} />
-        <h2 className={styles.title}>{title}</h2>
+        <ProfileIcon avatar={avatar} />
+        <h2 className={styles.title} style={chatbot?.header?.title?.style}>{title}</h2>
       </div>
 
       <form onSubmit={handleSubmit} className={styles.form}>
@@ -114,6 +117,10 @@ export function ApiKeyInput({
           className={clsx(styles.submitButton, {
             [styles.loading]: loading,
           })}
+          style={{
+            backgroundColor: chatbot?.primaryComponent?.mainColor,
+            color: chatbot?.primaryComponent?.secondaryColor,
+          }}
         >
           {loading ? 'Loading...' : 'Continue'}
         </button>

package/src/components/chatbot/chatbot.tsx

@@ -199,23 +199,35 @@ export const Chatbot = forwardRef(function Chatbot(
     );
   }
 
-  // For non-authenticated states, render without AsgardServiceContextProvider
+  // For non-authenticated states, provide AsgardServiceContextProvider but without SSE connection
   return (
     <AsgardThemeContextProvider theme={theme}>
-      <ChatbotContainer
-        fullScreen={fullScreen}
-        className={className}
-        style={style}
+      <AsgardServiceContextProvider
+        parentRef={ref}
+        avatar={avatar}
+        config={config}
+        customChannelId={customChannelId}
+        initMessages={initMessages}
+        onSseMessage={onSseMessage}
+        onAuthError={onAuthError}
+        botTypingPlaceholder={botTypingPlaceholder}
+        inputPlaceholder={inputPlaceholder}
       >
-        <ChatbotHeader
-          title={title}
-          onReset={onReset}
-          onClose={onClose}
-          customActions={customActions}
-          maintainConnectionWhenClosed={maintainConnectionWhenClosed}
-        />
-        {renderContent()}
-      </ChatbotContainer>
+        <ChatbotContainer
+          fullScreen={fullScreen}
+          className={className}
+          style={style}
+        >
+          <ChatbotHeader
+            title={title}
+            onReset={onReset}
+            onClose={onClose}
+            customActions={customActions}
+            maintainConnectionWhenClosed={maintainConnectionWhenClosed}
+          />
+          {renderContent()}
+        </ChatbotContainer>
+      </AsgardServiceContextProvider>
     </AsgardThemeContextProvider>
   );
 });