guideai-app 0.2.5 → 0.2.6

package/README.md

@@ -70,4 +70,42 @@ position?: {
   organizationKey="your-org-key"
   position={{ top: '20px', right: '20px' }}
 />
-```
+```
+
+## Transcript Feature
+
+GuideAI now includes a beautiful transcript interface that displays conversations between users and the AI in a transparent Apple-style box.
+
+### Features
+
+- **Glassmorphism Design**: Transparent background with backdrop blur effects
+- **Apple-style Interface**: Clean, modern design inspired by Apple's UI principles
+- **Real-time Updates**: Messages appear as they're exchanged
+- **Timestamps**: Each message shows when it was sent
+- **Auto-scroll**: Automatically scrolls to the latest messages
+- **Responsive**: Works perfectly on all device sizes
+
+### How to Use
+
+1. Start a conversation with GuideAI by clicking the microphone button
+2. The transcript automatically appears as an overlay when the conversation begins
+3. The transcript shows all messages with clear visual distinction between user and AI messages
+4. Messages appear in real-time as the conversation progresses
+5. Click the "×" button or click outside the transcript to close it
+6. The transcript automatically closes when the conversation ends
+
+### Transcript Interface
+
+The transcript interface includes:
+- **Header**: Shows "Conversation Transcript" with a close button
+- **Messages**: Chat-like interface with different styles for user and AI messages
+- **Timestamps**: Each message displays the time it was sent
+- **Footer**: Shows the total number of messages in the conversation
+
+### Styling
+
+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