@asgard-js/react 0.0.42-canary.2 → 0.0.43-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.0.42-canary.2",
+  "version": "0.0.43-canary.1",
   "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,7 +120,7 @@
 .submitButton {
   width: 100%;
   height: 42px;
-  background: #5856D6;
+  background: #5856d6;
   border: none;
   border-radius: 6px;
   color: white;
@@ -139,7 +131,7 @@
   outline: none;
 
   &:hover:not(:disabled) {
-    background: #4845C7;
+    background: #4845c7;
     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,7 @@
 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 styles from './api-key-input.module.scss';
 
 export interface ApiKeyInputProps {
@@ -21,27 +22,34 @@ 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 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>
@@ -84,24 +92,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