guideai-app 0.5.1 → 0.5.3-1

package/README.md

@@ -18,27 +18,35 @@ import ReactDOM from 'react-dom';
 import GuideAI from 'guideai-app';
 
 function App() {
-  return (
-    <div>
-      <GuideAI 
-        organizationKey="your-organization-key"
-        React={React}
-        ReactDOM={ReactDOM}
-        position={{ bottom: '20px', right: '20px' }}
-      />
-    </div>
-  );
+	return (
+		<div>
+			<GuideAI
+				authKey="your-access-key"
+				workspace="your-workspace"
+				React={React}
+				ReactDOM={ReactDOM}
+				position={{ bottom: '20px', right: '20px' }}
+			/>
+		</div>
+	);
 }
 ```
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `organizationKey` | `string` | Yes | Your unique organization key |
-| `React` | `React` | Yes | React instance from your application |
-| `ReactDOM` | `ReactDOM` | Yes | ReactDOM instance from your application |
-| `position` | `object` | No | CSS positioning for the component (see below) |
+| Prop                              | Type       | Required             | Description                                                                                                                                                                         |
+| --------------------------------- | ---------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `authKey`                         | `string`   | Yes (customer embed) | Widget access key; **not** persisted by the package. Exchanged once for a JWT via `POST /widget/session`. **Do not use React’s reserved `key` attribute** — use this prop name.     |
+| `workspace`                       | `string`   | No                   | Workspace slug when using `authKey`                                                                                                                                                 |
+| `adminConversationPersistenceKey` | `string`   | No                   | Optional stable key for transcript `localStorage` isolation. Omit to use a non-secret default from the page **origin** (same across SPA routes). Never use the raw access key here. |
+| `React`                           | `React`    | Yes                  | React instance from your application                                                                                                                                                |
+| `ReactDOM`                        | `ReactDOM` | Yes                  | ReactDOM instance from your application                                                                                                                                             |
+| `position`                        | `object`   | No                   | CSS positioning for the component (see below)                                                                                                                                       |
+| `environment`                     | `string`   | No                   | API environment: `'production'` (default), `'development'`, or `'local'`                                                                                                            |
+| `transcript`                      | `object`   | No                   | Transcript panel configuration (see below)                                                                                                                                          |
+| `input`                           | `object`   | No                   | Text/voice input configuration (see below)                                                                                                                                          |
+
+You must pass **`authKey`** (customer integration). For authentication details, see **`AUTHENTICATION.md`** in this package.
 
 ## Position Object
 
@@ -67,46 +75,133 @@ position?: {
 ### Position Examples
 
 **Bottom-right corner:**
+
 ```jsx
-<GuideAI 
-  organizationKey="your-org-key"
-  React={React}
-  ReactDOM={ReactDOM}
-  position={{ bottom: '20px', right: '20px' }}
+<GuideAI
+	authKey="your-access-key"
+	React={React}
+	ReactDOM={ReactDOM}
+	position={{ bottom: '20px', right: '20px' }}
 />
 ```
 
 **Bottom-left corner:**
+
 ```jsx
-<GuideAI 
-  organizationKey="your-org-key"
-  React={React}
-  ReactDOM={ReactDOM}
-  position={{ bottom: '20px', left: '20px' }}
+<GuideAI
+	authKey="your-access-key"
+	React={React}
+	ReactDOM={ReactDOM}
+	position={{ bottom: '20px', left: '20px' }}
 />
 ```
 
 **Centered at bottom:**
+
 ```jsx
-<GuideAI 
-  organizationKey="your-org-key"
-  React={React}
-  ReactDOM={ReactDOM}
-  position={{ 
-    bottom: '20px', 
-    left: '50%', 
-    transform: 'translateX(-50%)' 
-  }}
+<GuideAI
+	authKey="your-access-key"
+	React={React}
+	ReactDOM={ReactDOM}
+	position={{
+		bottom: '20px',
+		left: '50%',
+		transform: 'translateX(-50%)',
+	}}
 />
 ```
 
 **Top-right corner:**
+
 ```jsx
 <GuideAI
-  organizationKey="your-org-key"
-  React={React}
-  ReactDOM={ReactDOM}
-  position={{ top: '20px', right: '20px' }}
+	authKey="your-access-key"
+	React={React}
+	ReactDOM={ReactDOM}
+	position={{ top: '20px', right: '20px' }}
+/>
+```
+
+## Transcript Object
+
+The `transcript` prop controls the conversation transcript panel:
+
+```typescript
+transcript?: {
+  enabled?: boolean;   // Whether to show transcript (default: true)
+  position?: 'right' | 'left';  // Which side of the button (default: 'right')
+}
+```
+
+### Transcript Examples
+
+**Disable transcript panel:**
+
+```jsx
+<GuideAI
+	authKey="your-access-key"
+	React={React}
+	ReactDOM={ReactDOM}
+	transcript={{ enabled: false }}
+/>
+```
+
+**Show transcript on the left:**
+
+```jsx
+<GuideAI
+	authKey="your-access-key"
+	React={React}
+	ReactDOM={ReactDOM}
+	transcript={{ position: 'left' }}
+/>
+```
+
+## Input Object
+
+The `input` prop configures text and voice input options:
+
+```typescript
+input?: {
+  enableTextInput?: boolean;   // Show text input option (default: true)
+  showInputToggle?: boolean;   // Show voice/text toggle button (default: true)
+  defaultMode?: 'voice' | 'text';  // Default input mode (default: 'voice')
+  placeholder?: string;        // Placeholder text for text input (default: 'Type your message...')
+}
+```
+
+### Input Examples
+
+**Text-only mode:**
+
+```jsx
+<GuideAI
+	authKey="your-access-key"
+	React={React}
+	ReactDOM={ReactDOM}
+	input={{ defaultMode: 'text', showInputToggle: false }}
+/>
+```
+
+**Disable text input (voice only):**
+
+```jsx
+<GuideAI
+	authKey="your-access-key"
+	React={React}
+	ReactDOM={ReactDOM}
+	input={{ enableTextInput: false }}
+/>
+```
+
+**Custom placeholder text:**
+
+```jsx
+<GuideAI
+	authKey="your-access-key"
+	React={React}
+	ReactDOM={ReactDOM}
+	input={{ placeholder: 'Ask me anything...' }}
 />
 ```
 
@@ -116,8 +211,8 @@ Guide AI allows you to customize the microphone button color to match your appli
 
 ### Available CSS Variable
 
-| Variable | Default | Description |
-|----------|---------|-------------|
+| Variable              | Default   | Description           |
+| --------------------- | --------- | --------------------- |
 | `--guideai-mic-color` | `#0000FF` | Microphone icon color |
 
 ### Customization Example
@@ -127,30 +222,33 @@ 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 */
+	--guideai-mic-color: #6366f1; /* Your primary brand color */
 }
 ```
 
 ### Brand Matching Examples
 
 **Purple/Indigo Theme:**
+
 ```css
 .guideai-icon-wrapper {
-  --guideai-mic-color: #8b5cf6;
+	--guideai-mic-color: #8b5cf6;
 }
 ```
 
 **Green/Eco Theme:**
+
 ```css
 .guideai-icon-wrapper {
-  --guideai-mic-color: #059669;
+	--guideai-mic-color: #059669;
 }
 ```
 
 **Dark/Monochrome Theme:**
+
 ```css
 .guideai-icon-wrapper {
-  --guideai-mic-color: #ffffff;
+	--guideai-mic-color: #ffffff;
 }
 ```
 
@@ -159,30 +257,32 @@ Add this style to your application's CSS file to override the default color:
 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
-  }}
+	authKey="your-access-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
-  }}
+	authKey="your-access-key"
+	React={React}
+	ReactDOM={ReactDOM}
+	position={{
+		bottom: '40px',
+		right: '40px',
+		zIndex: 2000, // Set base z-index to 2000
+	}}
 />
 ```
 
@@ -196,31 +296,30 @@ import ReactDOM from 'react-dom';
 import GuideAI from 'guideai-app';
 
 function App() {
-  const handleError = (error) => {
-    console.error('GuideAI Error:', error);
-    // Add your custom error handling here
-  };
-
-  return (
-    <div className="app">
-      <h1>My Application</h1>
-      
-      <GuideAI 
-        organizationKey="your-organization-key"
-        React={React}
-        ReactDOM={ReactDOM}
-        position={{ bottom: '40px', right: '40px' }}
-      />
-    </div>
-  );
+	return (
+		<div className="app">
+			<h1>My Application</h1>
+
+			<GuideAI
+				authKey="your-access-key"
+				workspace="your-workspace"
+				environment="production"
+				React={React}
+				ReactDOM={ReactDOM}
+				position={{ bottom: '40px', right: '40px' }}
+				transcript={{ position: 'right' }}
+				input={{ defaultMode: 'voice' }}
+			/>
+		</div>
+	);
 }
 
 export default App;
 ```
 
-## Getting Your Organization Key
+## Getting Your Access Key
 
-To use Guide AI, you'll need an organization key. Contact the Guide AI team to get your key and set up your organization.
+To use Guide AI, you'll need an access key and workspace slug. Contact the Guide AI team to get set up.
 
 ## Support
 

package/dist/GuideAI.d.ts

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