guideai-app 0.2.6 → 0.2.8

package/README.md

@@ -1,6 +1,6 @@
 # Guide AI
 
-A React component that provides AI-powered guidance with voice interaction and element highlighting capabilities.
+A React component that provides AI-powered guidance with voice interaction, text input, and element highlighting capabilities.
 
 ## Installation
 
@@ -35,6 +35,8 @@ function App() {
 | `organizationKey` | `string` | Yes | Your organization key for workflows |
 | `position` | `object` | No | Positioning configuration for the component |
 | `onError` | `function` | No | Error handler callback |
+| `transcript` | `object` | No | Transcript feature configuration |
+| `input` | `object` | No | Input mode configuration (voice/text) |
 
 ### Position Object
 
@@ -54,9 +56,30 @@ position?: {
 }
 ```
 
+### Transcript Configuration Object
+
+```typescript
+transcript?: {
+  enabled?: boolean;           // Show transcript (default: true)
+  showToggleButton?: boolean;  // Show transcript toggle (default: true)
+  position?: 'right' | 'left' | 'top' | 'bottom'; // Transcript position
+}
+```
+
+### Input Configuration Object
+
+```typescript
+input?: {
+  enableTextInput?: boolean;    // Enable text input (default: true)
+  showInputToggle?: boolean;    // Show mode toggle button (default: true)  
+  defaultMode?: 'voice' | 'text'; // Default input mode (default: 'voice')
+  placeholder?: string;         // Text input placeholder
+}
+```
+
 ### Examples
 
-**Fixed positioning:**
+**Basic usage:**
 ```jsx
 <GuideAI 
   organizationKey="your-org-key"
@@ -64,17 +87,76 @@ position?: {
 />
 ```
 
-**Corner positioning:**
+**With text input enabled by default:**
 ```jsx
 <GuideAI 
   organizationKey="your-org-key"
   position={{ top: '20px', right: '20px' }}
+  input={{
+    defaultMode: 'text',
+    placeholder: "Ask me anything..."
+  }}
+/>
+```
+
+**Full configuration:**
+```jsx
+<GuideAI 
+  organizationKey="your-organization-key"
+  position={{ bottom: '2rem', right: '2rem' }}
+  transcript={{
+    enabled: true,
+    showToggleButton: true
+  }}
+  input={{
+    enableTextInput: true,
+    defaultMode: 'voice',
+    placeholder: "Type your message..."
+  }}
+  onError={(error) => console.error(error)}
 />
 ```
 
+## Text Input Feature
+
+GuideAI now supports both voice and text input modes, giving users flexible ways to interact with the AI assistant.
+
+### Features
+
+- **Dual Input Modes**: Switch seamlessly between voice and text input
+- **Text Input Interface**: Clean text area integrated into the transcript box
+- **Input Mode Toggle**: Dedicated button to switch between voice and text modes
+- **Real-time Text Chat**: Type messages and receive AI responses instantly
+- **Keyboard Shortcuts**: Press Enter to send messages quickly
+- **Auto-enabled**: Text input is enabled by default for better accessibility
+
+### Input Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `enableTextInput` | boolean | `true` | Enable text input functionality |
+| `showInputToggle` | boolean | `true` | Show the voice/text mode toggle button |
+| `defaultMode` | `'voice' \| 'text'` | `'voice'` | Default input mode when conversation starts |
+| `placeholder` | string | `"Type your message..."` | Placeholder text for the text input field |
+
+### How to Use Text Input
+
+1. **Start a Conversation**: Click the GuideAI button to begin
+2. **Switch to Text Mode**: Click the toggle button next to the main GuideAI button
+3. **Type Your Message**: Use the text area at the bottom of the transcript box
+4. **Send Message**: Press Enter or click the send button
+5. **Switch Back**: Click the toggle button again to return to voice mode
+
+### Accessibility Features
+
+- **Keyboard Navigation**: Full keyboard support for text input
+- **Default Enabled**: Text input works out of the box without configuration
+- **Fallback Support**: Automatically enables text mode if microphone access is denied
+- **Visual Indicators**: Clear visual feedback for active input mode
+
 ## Transcript Feature
 
-GuideAI now includes a beautiful transcript interface that displays conversations between users and the AI in a transparent Apple-style box.
+GuideAI includes a beautiful transcript interface that displays conversations between users and the AI in a transparent Apple-style box.
 
 ### Features
 
@@ -108,4 +190,13 @@ The transcript uses modern CSS features including:
 - `backdrop-filter: blur()` for the glassmorphism effect
 - CSS animations for smooth transitions
 - Responsive design that adapts to different screen sizes
-- Custom scrollbar styling for a polished look
+- Custom scrollbar styling for a polished look
+
+## Migration from Voice-Only Versions
+
+If you're upgrading from a voice-only version:
+
+- **No Breaking Changes**: Existing implementations continue to work unchanged
+- **Text Input Enabled**: Text input is now available by default
+- **Disable if Needed**: Set `input={{ enableTextInput: false }}` to disable text input
+- **Voice Still Default**: Voice mode remains the default interaction method