@asgard-js/react 0.0.42-canary.5 → 0.0.43-canary.10

package/package.json

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

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

@@ -1,27 +1,22 @@
 .container {
   width: 220px;
-  background: rgba(45, 45, 45, 0.95);
+  background-color: var(--asg-color-bg);
   border-radius: 12px;
-  padding: 24px 20px 20px;
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-  color: white;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  padding: 12px 20px;
+  border: 0.5px solid var(--asg-color-border);
 }
 
 .header {
   display: flex;
   flex-direction: column;
+  gap: 4px;
   align-items: center;
-  margin-bottom: 24px;
+  margin-bottom: 12px;
 }
 
 .icon {
-  width: 48px;
-  height: 48px;
-  margin-bottom: 12px;
-  opacity: 0.7;
+  width: 24px;
+  height: 24px;
 }
 
 .title {
@@ -29,21 +24,18 @@
   font-size: 18px;
   font-weight: 500;
   color: white;
-  text-align: center;
 }
 
 .form {
   width: 100%;
-}
-
-.inputGroup {
-  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
 .label {
   display: block;
   font-size: 14px;
-  font-weight: 400;
   color: rgba(255, 255, 255, 0.7);
   margin-bottom: 8px;
 }
@@ -128,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;
@@ -139,7 +131,7 @@
   outline: none;
 
   &:hover:not(:disabled) {
-    background: #4845C7;
+    opacity: 0.9;
     transform: translateY(-1px);
   }
 
@@ -189,4 +181,4 @@
     width: 100%;
     min-width: 200px;
   }
-}
+}

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

@@ -1,6 +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 {
@@ -21,30 +23,38 @@ export function ApiKeyInput({
   title = 'Preview',
   showToggle = true,
   className,
-}: ApiKeyInputProps) {
+}: ApiKeyInputProps): JSX.Element {
   const [apiKey, setApiKey] = useState('');
   const [showPassword, setShowPassword] = useState(false);
+  const { chatbot } = useAsgardThemeContext();
+  const { avatar } = useAsgardContext();
 
-  const handleSubmit = (e: FormEvent) => {
+  const handleSubmit = (e: FormEvent): void => {
     e.preventDefault();
     if (apiKey.trim() && !loading) {
       onSubmit(apiKey.trim());
     }
   };
 
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>): void => {
     setApiKey(e.target.value);
   };
 
-  const togglePasswordVisibility = () => {
+  const togglePasswordVisibility = (): void => {
     setShowPassword(!showPassword);
   };
 
   return (
-    <div className={clsx(styles.container, className)}>
+    <div 
+      className={clsx(styles.container, className)}
+      style={{
+        backgroundColor: chatbot.backgroundColor,
+        borderColor: chatbot.borderColor,
+      }}
+    >
       <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}>
@@ -84,24 +94,20 @@ export function ApiKeyInput({
                 >
                   {showPassword ? (
                     <>
-                      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
-                      <line x1="1" y1="1" x2="23" y2="23"/>
+                      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+                      <line x1="1" y1="1" x2="23" y2="23" />
                     </>
                   ) : (
                     <>
-                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
-                      <circle cx="12" cy="12" r="3"/>
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                      <circle cx="12" cy="12" r="3" />
                     </>
                   )}
                 </svg>
               </button>
             )}
           </div>
-          {error && (
-            <div className={styles.errorMessage}>
-              {error}
-            </div>
-          )}
+          {error && <div className={styles.errorMessage}>{error}</div>}
         </div>
 
         <button
@@ -110,6 +116,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>
   );
 });