guideai-app 0.4.3-2 → 0.4.3-4

package/README.md

@@ -44,10 +44,11 @@ function App() {
 
 ## Position Object
 
-The `position` prop accepts an object with CSS positioning properties to control where the Guide AI button appears on your page:
+The `position` prop accepts an object with CSS positioning properties to control where the Guide AI button appears on your page, as well as z-index configuration for all Guide AI components:
 
 ```typescript
 position?: {
+  // CSS positioning (applies to microphone button)
   top?: string;
   right?: string;
   bottom?: string;
@@ -57,6 +58,11 @@ position?: {
   marginBottom?: string;
   marginLeft?: string;
   transform?: string;
+
+  // Z-index configuration (applies to all GuideAI components)
+  // All component z-indexes are calculated from this base value
+  zIndex?: number;  // Base z-index for all components (default: 1300)
+                    // Onboarding modal will be set to zIndex + 1
 }
 ```
 
@@ -98,7 +104,7 @@ position?: {
 
 **Top-right corner:**
 ```jsx
-<GuideAI 
+<GuideAI
   organizationKey="your-org-key"
   React={React}
   ReactDOM={ReactDOM}
@@ -106,6 +112,84 @@ position?: {
 />
 ```
 
+## Customizing Colors
+
+Guide AI allows you to customize the microphone button color to match your application's branding. You can override the default color using CSS variables in your own stylesheet.
+
+### Available CSS Variable
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--guideai-mic-color` | `#0000FF` | Microphone icon color |
+
+### Customization Example
+
+Add this style to your application's CSS file to override the default color:
+
+```css
+/* Match your brand color */
+.guideai-icon-wrapper {
+  --guideai-mic-color: #6366f1;  /* Your primary brand color */
+}
+```
+
+### Brand Matching Examples
+
+**Purple/Indigo Theme:**
+```css
+.guideai-icon-wrapper {
+  --guideai-mic-color: #8b5cf6;
+}
+```
+
+**Green/Eco Theme:**
+```css
+.guideai-icon-wrapper {
+  --guideai-mic-color: #059669;
+}
+```
+
+**Dark/Monochrome Theme:**
+```css
+.guideai-icon-wrapper {
+  --guideai-mic-color: #ffffff;
+}
+```
+
+### Z-Index Configuration
+
+If Guide AI components conflict with modals or other overlays on your site, you can customize the z-index value for all components using a single `zIndex` parameter. All GuideAI components will use this base value, with the onboarding modal appearing one level above (zIndex + 1).
+
+**Custom z-index value:**
+```jsx
+<GuideAI
+  organizationKey="your-org-key"
+  React={React}
+  ReactDOM={ReactDOM}
+  position={{
+    bottom: '20px',
+    right: '20px',
+    zIndex: 5000  // All components use 5000, onboarding modal uses 5001
+  }}
+/>
+```
+
+**Positioning with z-index configuration:**
+```jsx
+<GuideAI
+  organizationKey="your-org-key"
+  React={React}
+  ReactDOM={ReactDOM}
+  position={{
+    bottom: '40px',
+    right: '40px',
+    zIndex: 2000  // Set base z-index to 2000
+  }}
+/>
+```
+
+> **Note:** You only need to specify a z-index value if the default (1300) conflicts with your existing UI. The onboarding modal will automatically appear at zIndex + 1 to stay above other GuideAI components.
+
 ## Complete Example
 
 ```jsx

package/dist/GuideAI.d.ts

@@ -1,3 +1,3 @@
 import { GuideAIProps } from './types/GuideAI.types';
-declare const GuideAI: (props: GuideAIProps) => import("react").JSX.Element | null;
+declare const GuideAI: (props: GuideAIProps) => import("react").JSX.Element;
 export default GuideAI;