guideai-app 0.4.1 → 0.4.2-1

package/dist/components/TranscriptBox.d.ts

@@ -1,4 +1,5 @@
 import { StoredMessage } from '../utils/messageStorage';
+import { PopupPosition } from '../types/GuideAI.types';
 interface TranscriptBoxProps {
     messages: StoredMessage[];
     isVisible: boolean;
@@ -11,6 +12,9 @@ interface TranscriptBoxProps {
     onTextSubmit?: () => void;
     onTextKeyPress?: (event: any) => void;
     textPlaceholder?: string;
+    position?: PopupPosition;
+    micPosition?: any;
+    isMicCentered?: boolean;
     React: typeof import('react');
 }
 declare const TranscriptBox: {

package/dist/index.d.ts

@@ -3,3 +3,6 @@ import TranscriptBox from './components/TranscriptBox';
 export default GuideAI;
 export { TranscriptBox };
 export type { GuideAIProps } from './types/GuideAI.types';
+export * from './visualContext';
+export * from './visualContext/types';
+export { getSessionId, clearSessionId, peekSessionId } from './utils/session';

package/dist/metric/index.d.ts

@@ -1,4 +1,2 @@
-export { default as EventTracker } from './event-listner';
-export type { EventData } from './event-listner';
 export { default as UserMetadataTracker } from './metadata-tracker';
 export type { UserMetadata, MetadataConfig, MetadataUpdate } from './metadata-tracker';

package/dist/metric/metadata-tracker.d.ts

@@ -17,7 +17,7 @@ declare class UserMetadataTracker {
     init(): void;
     updateUserInfo(userInfo: Partial<UserMetadata>): void;
     trackLogin(additionalInfo?: Partial<UserMetadata>): void;
-    private trackVisitOncePerSession;
+    private trackVisitIfNewSession;
     trackVisit(): void;
     resetSessionVisitTracking(): void;
     trackVisitManually(): void;
@@ -35,7 +35,6 @@ declare class UserMetadataTracker {
     private addPendingUpdate;
     private isDataDuplicate;
     private generateDataHash;
-    private setupEventTrackerIntegration;
     private stopSyncTimer;
     private emitPendingUpdates;
     private emitPendingUpdatesImmediate;

package/dist/styles/GuideAI.styles.d.ts

@@ -1 +1 @@
-export declare const guideAIStyles = "\n.guideai-main-ui {\n  position: relative;\n}\n\n.guideai-main-controls {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  position: relative;\n}\n\n.guideai-welcome-bubble {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  background: #0066ff;\n  color: white;\n  padding: 10px 16px;\n  border-radius: 20px;\n  font-size: 14px;\n  white-space: normal;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n  animation: bubble-pulse 2s infinite;\n  max-width: 280px;\n  min-width: 200px;\n  text-align: center;\n  line-height: 1.3;\n}\n\n.guideai-welcome-bubble.above {\n  bottom: calc(100% + 10px);\n}\n\n.guideai-welcome-bubble.below {\n  top: calc(100% + 10px);\n}\n\n.guideai-welcome-bubble.above::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 8px solid #0066ff;\n}\n\n.guideai-welcome-bubble.below::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #0066ff;\n}\n\n@keyframes bubble-pulse {\n  0% { transform: translateX(-50%) scale(1); }\n  50% { transform: translateX(-50%) scale(1.05); }\n  100% { transform: translateX(-50%) scale(1); }\n}\n\n.guideai-icon-wrapper {\n  width: 50px;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(255, 255, 255, 0.9);\n  border: 2px solid transparent;\n  border-radius: 50%;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.guideai-icon-wrapper:not(.initializing):hover {\n  transform: scale(1.1);\n}\n\n.guideai-icon-wrapper.initializing {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(128, 128, 128, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n  animation: guideai-spin 1.5s linear infinite;\n  opacity: 0.7;\n  cursor: default;\n}\n\n.guideai-icon-wrapper.recording {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n  animation: guideai-pulse 1s infinite alternate;\n}\n\n.guideai-icon-wrapper.processing {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n  animation: guideai-spin 1s linear infinite;\n}\n\n.guideai-icon-wrapper.playing {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n@keyframes guideai-pulse {\n  0% { transform: scale(1); }\n  100% { transform: scale(1.05); }\n}\n\n@keyframes guideai-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes click-ripple-animation {\n  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }\n  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }\n  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }\n}\n\n@keyframes click-dot-animation {\n  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }\n  60% { transform: translate(-50%, -50%) scale(1); opacity: 1; }\n  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }\n}\n\n@keyframes cursor-jiggle {\n  0% { transform: translate(-50%, 0) scale(1); }\n  25% { transform: translate(-50%, -5px) scale(1.1); }\n  50% { transform: translate(-50%, 0) scale(1); }\n  75% { transform: translate(-50%, 5px) scale(1.1); }\n  100% { transform: translate(-50%, 0) scale(1); filter: drop-shadow(0 0 8px #0066ff); }\n}\n\n.guideai-icon {\n  width: 60%;\n  height: 60%;\n  min-width: 16px;\n  min-height: 16px;\n  max-width: 40px;\n  max-height: 40px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.guideai-icon.initializing {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"%23808080\" d=\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\"/></svg>');\n}\n\n.guideai-icon.microphone {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 352 512\"><path fill=\"%230000FF\" d=\"M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z\"/></svg>');\n}\n\n.guideai-icon.recording {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><circle cx=\"256\" cy=\"256\" r=\"128\" fill=\"%23FF0000\"/><circle cx=\"256\" cy=\"256\" r=\"200\" stroke=\"%23FF0000\" stroke-width=\"20\" fill=\"none\"/></svg>');\n}\n\n.guideai-icon.processing {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"%23FFA500\" d=\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\"/></svg>');\n}\n\n.guideai-icon.playing {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23008000\" d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"/></svg>');\n}\n\n.guideai-icon.text-mode {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%230066ff\" d=\"M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM7 10v2h2v-2H7zm6 2h-2v-2h2v2zm4 0h-2v-2h2v2z\"/></svg>');\n}\n\n.guideai-icon.voice-mode {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 352 512\"><path fill=\"%23008000\" d=\"M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z\"/></svg>');\n}\n\n\n/* Onboarding styles */\n.guideai-onboarding {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n  width: 300px;\n  max-width: 90vw;\n  z-index: 1002;\n  animation: onboarding-fade-in 0.3s ease-out;\n}\n\n.guideai-onboarding.above {\n  bottom: calc(100% + 15px);\n}\n\n.guideai-onboarding.below {\n  top: calc(100% + 15px);\n}\n\n.guideai-onboarding.above::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 8px solid white;\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));\n}\n\n.guideai-onboarding.below::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid white;\n  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));\n}\n\n@keyframes onboarding-fade-in {\n  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }\n  to { opacity: 1; transform: translateX(-50%) translateY(0); }\n}\n\n.guideai-onboarding-content {\n  padding: 16px;\n  position: relative;\n}\n\n.guideai-onboarding-close {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  background: none;\n  border: none;\n  font-size: 20px;\n  cursor: pointer;\n  color: #999;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n}\n\n.guideai-onboarding-close:hover {\n  background: #f5f5f5;\n  color: #333;\n}\n\n.guideai-onboarding-step {\n  text-align: center;\n  margin-bottom: 12px;\n}\n\n.guideai-onboarding-icon {\n  font-size: 32px;\n  margin-bottom: 8px;\n  display: inline-block;\n}\n\n.guideai-onboarding-step h3 {\n  margin: 0 0 8px;\n  font-size: 16px;\n  color: #333;\n  font-weight: 600;\n}\n\n.guideai-onboarding-step p {\n  margin: 0;\n  font-size: 13px;\n  color: #666;\n  line-height: 1.4;\n}\n\n.guideai-onboarding-dots {\n  display: flex;\n  justify-content: center;\n  margin: 12px 0;\n}\n\n.guideai-onboarding-dots .dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #ddd;\n  margin: 0 4px;\n  transition: all 0.3s ease;\n}\n\n.guideai-onboarding-dots .dot.active {\n  background: #0066ff;\n  transform: scale(1.2);\n}\n\n.guideai-onboarding-next {\n  display: block;\n  width: 100%;\n  padding: 10px;\n  background: #0066ff;\n  color: white;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s ease;\n}\n\n.guideai-onboarding-next:hover {\n  background: #0055cc;\n}\n\n/* Transcript Box Styles */\n.guideai-transcript-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: transparent;\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n  padding-bottom: 40px;\n  padding-right: 40px;\n  z-index: 10000;\n  animation: transcript-fade-in 0.3s ease-out;\n  pointer-events: none;\n}\n\n.guideai-transcript-box {\n  background: rgba(40, 44, 52, 0.85);\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 16px;\n  box-shadow: \n    0 8px 32px rgba(0, 0, 0, 0.3),\n    inset 0 1px 0 rgba(255, 255, 255, 0.2),\n    inset 0 -1px 0 rgba(0, 0, 0, 0.1);\n  width: 280px;\n  max-height: 280px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: transcript-slide-up 0.4s ease-out;\n  pointer-events: auto;\n  margin-right: 60px;\n  position: relative;\n}\n\n.guideai-transcript-box::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\n  border-radius: 16px 16px 0 0;\n}\n\n\n\n.guideai-transcript-messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 12px;\n  max-height: 200px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar {\n  width: 6px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar-track {\n  background: rgba(0, 0, 0, 0.05);\n  border-radius: 3px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 3px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar-thumb:hover {\n  background: rgba(0, 0, 0, 0.3);\n}\n\n.guideai-transcript-empty {\n  text-align: center;\n  padding: 20px 12px;\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.guideai-transcript-empty-icon {\n  font-size: 24px;\n  margin-bottom: 8px;\n  opacity: 0.5;\n}\n\n.guideai-transcript-empty p {\n  margin: 0;\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.guideai-transcript-message {\n  margin-bottom: 8px;\n  animation: message-fade-in 0.3s ease-out;\n}\n\n.guideai-transcript-message.human {\n  text-align: right;\n}\n\n.guideai-transcript-message.guideai {\n  text-align: left;\n}\n\n.guideai-transcript-message-content {\n  display: inline-block;\n  max-width: 85%;\n  padding: 6px 10px;\n  border-radius: 12px;\n  position: relative;\n}\n\n.guideai-transcript-message.human .guideai-transcript-message-content {\n  background: rgba(255, 255, 255, 0.15);\n  color: rgba(255, 255, 255, 0.95);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-bottom-right-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.guideai-transcript-message.guideai .guideai-transcript-message-content {\n  background: rgba(0, 0, 0, 0.1);\n  color: rgba(255, 255, 255, 0.9);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-bottom-left-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.guideai-transcript-message-sender {\n  font-size: 9px;\n  font-weight: 600;\n  margin-bottom: 2px;\n  opacity: 0.8;\n}\n\n.guideai-transcript-message-text {\n  font-size: 11px;\n  line-height: 1.3;\n  word-wrap: break-word;\n}\n\n.guideai-transcript-message-time {\n  font-size: 8px;\n  opacity: 0.6;\n  margin-top: 2px;\n}\n\n\n\n@keyframes transcript-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes transcript-slide-up {\n  from { \n    opacity: 0; \n    transform: translateX(40px) scale(0.95); \n  }\n  to { \n    opacity: 1; \n    transform: translateX(0) scale(1); \n  }\n}\n\n@keyframes message-fade-in {\n  from { \n    opacity: 0; \n    transform: translateY(10px); \n  }\n  to { \n    opacity: 1; \n    transform: translateY(0); \n  }\n}\n\n/* Transcript Toggle Button Styles - positioned at top of transcript area */\n.guideai-transcript-toggle-button {\n  position: fixed;\n  bottom: 60px;\n  right: 40px;\n  width: 36px;\n  height: 36px;\n  background: rgba(40, 44, 52, 0.9);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n  transition: all 0.2s ease;\n  z-index: 10001;\n  font-size: 14px;\n  padding: 0;\n  color: rgba(255, 255, 255, 0.9);\n  animation: toggle-fade-in 0.3s ease-out;\n}\n\n.guideai-transcript-toggle-button:hover {\n  background: rgba(40, 44, 52, 1);\n  transform: scale(1.1);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);\n}\n\n.guideai-transcript-toggle-button:active {\n  transform: scale(0.95);\n}\n\n.guideai-transcript-toggle-icon {\n  display: inline-block;\n  transition: all 0.2s ease;\n  filter: none;\n}\n\n/* Position transcript toggle button based on transcript position */\n.guideai-transcript-overlay {\n  pointer-events: none;\n}\n\n.guideai-transcript-toggle-button {\n  pointer-events: auto;\n}\n\n/* Input Options Container - Two Stage Layout */\n.guideai-input-options {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  position: relative;\n  animation: options-slide-in 0.4s ease-out;\n}\n\n@keyframes options-slide-in {\n  0% {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* Individual Input Option Button */\n.guideai-input-option {\n  width: 50px;\n  height: 50px;\n  background: rgba(255, 255, 255, 0.9);\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n  transition: all 0.3s ease;\n  font-size: 18px;\n  padding: 0;\n  position: relative;\n}\n\n.guideai-input-option:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 1);\n  transform: scale(1.1);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);\n}\n\n.guideai-input-option:active:not(:disabled) {\n  transform: scale(0.95);\n}\n\n.guideai-input-option:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* Voice Option Specific Styling */\n.guideai-input-option.voice-option {\n  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(139, 195, 74, 0.1));\n  border-color: rgba(76, 175, 80, 0.3);\n}\n\n.guideai-input-option.voice-option:hover:not(:disabled) {\n  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(139, 195, 74, 0.2));\n  border-color: rgba(76, 175, 80, 0.5);\n}\n\n/* Text Option Specific Styling */\n.guideai-input-option.text-option {\n  background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(63, 81, 181, 0.1));\n  border-color: rgba(33, 150, 243, 0.3);\n}\n\n.guideai-input-option.text-option:hover:not(:disabled) {\n  background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(63, 81, 181, 0.2));\n  border-color: rgba(33, 150, 243, 0.5);\n}\n\n.guideai-input-option-icon {\n  display: inline-block;\n  transition: all 0.2s ease;\n  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));\n}\n\n/* Text Input integrated into Transcript Box */\n.guideai-transcript-text-input {\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  padding: 12px;\n  display: flex;\n  gap: 8px;\n  align-items: flex-end;\n  background: rgba(0, 0, 0, 0.02);\n  border-radius: 0 0 16px 16px;\n  animation: text-input-fade-in 0.3s ease-out;\n}\n\n.guideai-transcript-input-field {\n  flex: 1;\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  padding: 8px 12px;\n  color: rgba(255, 255, 255, 0.95);\n  font-size: 12px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  resize: none;\n  outline: none;\n  transition: all 0.2s ease;\n  min-height: 32px;\n}\n\n.guideai-transcript-input-field::placeholder {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.guideai-transcript-input-field:focus {\n  border-color: rgba(255, 255, 255, 0.4);\n  background: rgba(255, 255, 255, 0.2);\n  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);\n}\n\n.guideai-transcript-send-button {\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 6px;\n  padding: 6px 10px;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 36px;\n  height: 32px;\n}\n\n.guideai-transcript-send-button:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.25);\n  border-color: rgba(255, 255, 255, 0.3);\n  transform: translateY(-1px);\n}\n\n.guideai-transcript-send-button:active:not(:disabled) {\n  transform: translateY(0);\n}\n\n.guideai-transcript-send-button:disabled {\n  background: rgba(255, 255, 255, 0.05);\n  border-color: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.4);\n  cursor: not-allowed;\n  transform: none;\n}\n\n.guideai-transcript-send-icon {\n  font-size: 11px;\n}\n\n/* Animation for text input appearance */\n@keyframes text-input-fade-in {\n  from { \n    opacity: 0; \n    transform: translateY(10px); \n  }\n  to { \n    opacity: 1; \n    transform: translateY(0); \n  }\n}\n\n@keyframes toggle-fade-in {\n  from { \n    opacity: 0; \n    transform: scale(0.8); \n  }\n  to { \n    opacity: 1; \n    transform: scale(1); \n  }\n}\n\n/* Hover effect animations */\n@keyframes hover-pulse {\n  0%, 100% {\n    opacity: 0.6;\n    transform: scale(1);\n    box-shadow: 0 0 10px rgba(255, 165, 0, 0.6);\n  }\n  25% {\n    opacity: 0.9;\n    transform: scale(1.03);\n    box-shadow: 0 0 20px rgba(255, 165, 0, 0.8);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1.05);\n    box-shadow: 0 0 25px rgba(255, 165, 0, 1);\n  }\n  75% {\n    opacity: 0.9;\n    transform: scale(1.03);\n    box-shadow: 0 0 20px rgba(255, 165, 0, 0.8);\n  }\n}\n\n@keyframes hover-indicator-fade {\n  from { \n    opacity: 0; \n    transform: translateX(-50%) translateY(-10px); \n  }\n  to { \n    opacity: 1; \n    transform: translateX(-50%) translateY(0); \n  }\n}\n\n@keyframes cursor-hover-float {\n  0%, 100% {\n    transform: translate(-50%, 0) translateY(0px);\n  }\n  25% {\n    transform: translate(-50%, 0) translateY(-3px);\n  }\n  50% {\n    transform: translate(-50%, 0) translateY(-6px);\n  }\n  75% {\n    transform: translate(-50%, 0) translateY(-3px);\n  }\n}\n\n\n";
+export declare const guideAIStyles = "\n.guideai-main-ui {\n  position: relative;\n}\n\n.guideai-main-controls {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  position: relative;\n}\n\n.guideai-welcome-bubble {\n  position: absolute;\n  background: #0066ff;\n  color: white;\n  padding: 10px 16px;\n  border-radius: 20px;\n  font-size: 14px;\n  white-space: normal;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n  animation: bubble-pulse 2s infinite;\n  max-width: 280px;\n  min-width: 200px;\n  text-align: center;\n  line-height: 1.3;\n}\n\n/* Vertical positioning - backwards compatible */\n.guideai-welcome-bubble.above,\n.guideai-welcome-bubble.above-center,\n.guideai-welcome-bubble.above-left,\n.guideai-welcome-bubble.above-right {\n  bottom: calc(100% + 10px);\n}\n\n.guideai-welcome-bubble.below,\n.guideai-welcome-bubble.below-center,\n.guideai-welcome-bubble.below-left,\n.guideai-welcome-bubble.below-right {\n  top: calc(100% + 10px);\n}\n\n/* Horizontal positioning - centered (default) */\n.guideai-welcome-bubble.above,\n.guideai-welcome-bubble.above-center,\n.guideai-welcome-bubble.below,\n.guideai-welcome-bubble.below-center {\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n/* Horizontal positioning - left aligned */\n.guideai-welcome-bubble.above-left,\n.guideai-welcome-bubble.below-left {\n  left: 0;\n  transform: translateX(0);\n  animation: bubble-pulse-left 2s infinite;\n}\n\n/* Horizontal positioning - right aligned */\n.guideai-welcome-bubble.above-right,\n.guideai-welcome-bubble.below-right {\n  left: auto;\n  right: 0;\n  transform: translateX(0);\n  animation: bubble-pulse-right 2s infinite;\n}\n\n/* Arrow pointers - centered versions */\n.guideai-welcome-bubble.above::after,\n.guideai-welcome-bubble.above-center::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 8px solid #0066ff;\n}\n\n.guideai-welcome-bubble.below::after,\n.guideai-welcome-bubble.below-center::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #0066ff;\n}\n\n/* Arrow pointers - left aligned versions */\n.guideai-welcome-bubble.above-left::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 25px;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 8px solid #0066ff;\n}\n\n.guideai-welcome-bubble.below-left::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 25px;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #0066ff;\n}\n\n/* Arrow pointers - right aligned versions */\n.guideai-welcome-bubble.above-right::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  right: 25px;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 8px solid #0066ff;\n}\n\n.guideai-welcome-bubble.below-right::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  right: 25px;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #0066ff;\n}\n\n@keyframes bubble-pulse {\n  0% { transform: translateX(-50%) scale(1); }\n  50% { transform: translateX(-50%) scale(1.05); }\n  100% { transform: translateX(-50%) scale(1); }\n}\n\n@keyframes bubble-pulse-left {\n  0% { transform: translateX(0) scale(1); }\n  50% { transform: translateX(0) scale(1.05); }\n  100% { transform: translateX(0) scale(1); }\n}\n\n@keyframes bubble-pulse-right {\n  0% { transform: translateX(0) scale(1); }\n  50% { transform: translateX(0) scale(1.05); }\n  100% { transform: translateX(0) scale(1); }\n}\n\n.guideai-icon-wrapper {\n  width: 50px;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(255, 255, 255, 0.9);\n  border: 2px solid transparent;\n  border-radius: 50%;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.guideai-icon-wrapper:not(.initializing):hover {\n  transform: scale(1.1);\n}\n\n.guideai-icon-wrapper.initializing {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(128, 128, 128, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n  animation: guideai-spin 1.5s linear infinite;\n  opacity: 0.7;\n  cursor: default;\n}\n\n.guideai-icon-wrapper.recording {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n  animation: guideai-pulse 1s infinite alternate;\n}\n\n.guideai-icon-wrapper.processing {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n  animation: guideai-spin 1s linear infinite;\n}\n\n.guideai-icon-wrapper.playing {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n@keyframes guideai-pulse {\n  0% { transform: scale(1); }\n  100% { transform: scale(1.05); }\n}\n\n@keyframes guideai-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes click-ripple-animation {\n  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }\n  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }\n  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }\n}\n\n@keyframes click-dot-animation {\n  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }\n  60% { transform: translate(-50%, -50%) scale(1); opacity: 1; }\n  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }\n}\n\n@keyframes cursor-jiggle {\n  0% { transform: translate(-50%, 0) scale(1); }\n  25% { transform: translate(-50%, -5px) scale(1.1); }\n  50% { transform: translate(-50%, 0) scale(1); }\n  75% { transform: translate(-50%, 5px) scale(1.1); }\n  100% { transform: translate(-50%, 0) scale(1); filter: drop-shadow(0 0 8px #0066ff); }\n}\n\n.guideai-icon {\n  width: 60%;\n  height: 60%;\n  min-width: 16px;\n  min-height: 16px;\n  max-width: 40px;\n  max-height: 40px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.guideai-icon.initializing {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"%23808080\" d=\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\"/></svg>');\n}\n\n.guideai-icon.microphone {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 352 512\"><path fill=\"%230000FF\" d=\"M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z\"/></svg>');\n}\n\n.guideai-icon.recording {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><circle cx=\"256\" cy=\"256\" r=\"128\" fill=\"%23FF0000\"/><circle cx=\"256\" cy=\"256\" r=\"200\" stroke=\"%23FF0000\" stroke-width=\"20\" fill=\"none\"/></svg>');\n}\n\n.guideai-icon.processing {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"%23FFA500\" d=\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\"/></svg>');\n}\n\n.guideai-icon.playing {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23008000\" d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"/></svg>');\n}\n\n.guideai-icon.text-mode {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%230066ff\" d=\"M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM7 10v2h2v-2H7zm6 2h-2v-2h2v2zm4 0h-2v-2h2v2z\"/></svg>');\n}\n\n.guideai-icon.voice-mode {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 352 512\"><path fill=\"%23008000\" d=\"M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z\"/></svg>');\n}\n\n\n/* Onboarding styles */\n.guideai-onboarding {\n  position: absolute;\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n  width: 300px;\n  max-width: 90vw;\n  z-index: 1002;\n  animation: onboarding-fade-in 0.3s ease-out;\n}\n\n/* Vertical positioning - backwards compatible */\n.guideai-onboarding.above,\n.guideai-onboarding.above-center,\n.guideai-onboarding.above-left,\n.guideai-onboarding.above-right {\n  bottom: calc(100% + 15px);\n}\n\n.guideai-onboarding.below,\n.guideai-onboarding.below-center,\n.guideai-onboarding.below-left,\n.guideai-onboarding.below-right {\n  top: calc(100% + 15px);\n}\n\n/* Horizontal positioning - centered (default) */\n.guideai-onboarding.above,\n.guideai-onboarding.above-center,\n.guideai-onboarding.below,\n.guideai-onboarding.below-center {\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n/* Horizontal positioning - left aligned (prevents right overflow) */\n.guideai-onboarding.above-left,\n.guideai-onboarding.below-left {\n  left: 0;\n  transform: translateX(0);\n}\n\n/* Horizontal positioning - right aligned (prevents left overflow) */\n.guideai-onboarding.above-right,\n.guideai-onboarding.below-right {\n  left: auto;\n  right: 0;\n  transform: translateX(0);\n}\n\n/* Arrow pointers - centered versions */\n.guideai-onboarding.above::after,\n.guideai-onboarding.above-center::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 8px solid white;\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));\n}\n\n.guideai-onboarding.below::after,\n.guideai-onboarding.below-center::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid white;\n  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));\n}\n\n/* Arrow pointers - left aligned versions */\n.guideai-onboarding.above-left::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 25px;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 8px solid white;\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));\n}\n\n.guideai-onboarding.below-left::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 25px;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid white;\n  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));\n}\n\n/* Arrow pointers - right aligned versions */\n.guideai-onboarding.above-right::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  right: 25px;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 8px solid white;\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));\n}\n\n.guideai-onboarding.below-right::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  right: 25px;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid white;\n  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));\n}\n\n@keyframes onboarding-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.guideai-onboarding-content {\n  padding: 16px;\n  position: relative;\n}\n\n.guideai-onboarding-close {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  background: none;\n  border: none;\n  font-size: 20px;\n  cursor: pointer;\n  color: #999;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n}\n\n.guideai-onboarding-close:hover {\n  background: #f5f5f5;\n  color: #333;\n}\n\n.guideai-onboarding-step {\n  text-align: center;\n  margin-bottom: 12px;\n}\n\n.guideai-onboarding-icon {\n  font-size: 32px;\n  margin-bottom: 8px;\n  display: inline-block;\n}\n\n.guideai-onboarding-step h3 {\n  margin: 0 0 8px;\n  font-size: 16px;\n  color: #333;\n  font-weight: 600;\n}\n\n.guideai-onboarding-step p {\n  margin: 0;\n  font-size: 13px;\n  color: #666;\n  line-height: 1.4;\n}\n\n.guideai-onboarding-dots {\n  display: flex;\n  justify-content: center;\n  margin: 12px 0;\n}\n\n.guideai-onboarding-dots .dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #ddd;\n  margin: 0 4px;\n  transition: all 0.3s ease;\n}\n\n.guideai-onboarding-dots .dot.active {\n  background: #0066ff;\n  transform: scale(1.2);\n}\n\n.guideai-onboarding-next {\n  display: block;\n  width: 100%;\n  padding: 10px;\n  background: #0066ff;\n  color: white;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s ease;\n}\n\n.guideai-onboarding-next:hover {\n  background: #0055cc;\n}\n\n/* Transcript Box Styles */\n.guideai-transcript-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: transparent;\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n  padding-bottom: 40px;\n  padding-right: 40px;\n  z-index: 10000;\n  animation: transcript-fade-in 0.3s ease-out;\n  pointer-events: none;\n}\n\n.guideai-transcript-box {\n  background: rgba(40, 44, 52, 0.85);\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 16px;\n  box-shadow: \n    0 8px 32px rgba(0, 0, 0, 0.3),\n    inset 0 1px 0 rgba(255, 255, 255, 0.2),\n    inset 0 -1px 0 rgba(0, 0, 0, 0.1);\n  width: 280px;\n  max-height: 280px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: transcript-slide-up 0.4s ease-out;\n  pointer-events: auto;\n  margin-right: 60px;\n  position: relative;\n}\n\n.guideai-transcript-box::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\n  border-radius: 16px 16px 0 0;\n}\n\n\n\n.guideai-transcript-messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 12px;\n  max-height: 200px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar {\n  width: 6px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar-track {\n  background: rgba(0, 0, 0, 0.05);\n  border-radius: 3px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 3px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar-thumb:hover {\n  background: rgba(0, 0, 0, 0.3);\n}\n\n.guideai-transcript-empty {\n  text-align: center;\n  padding: 20px 12px;\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.guideai-transcript-empty-icon {\n  font-size: 24px;\n  margin-bottom: 8px;\n  opacity: 0.5;\n}\n\n.guideai-transcript-empty p {\n  margin: 0;\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.guideai-transcript-message {\n  margin-bottom: 8px;\n  animation: message-fade-in 0.3s ease-out;\n}\n\n.guideai-transcript-message.human {\n  text-align: right;\n}\n\n.guideai-transcript-message.guideai {\n  text-align: left;\n}\n\n.guideai-transcript-message-content {\n  display: inline-block;\n  max-width: 85%;\n  padding: 6px 10px;\n  border-radius: 12px;\n  position: relative;\n}\n\n.guideai-transcript-message.human .guideai-transcript-message-content {\n  background: rgba(255, 255, 255, 0.15);\n  color: rgba(255, 255, 255, 0.95);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-bottom-right-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.guideai-transcript-message.guideai .guideai-transcript-message-content {\n  background: rgba(0, 0, 0, 0.1);\n  color: rgba(255, 255, 255, 0.9);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-bottom-left-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.guideai-transcript-message-sender {\n  font-size: 9px;\n  font-weight: 600;\n  margin-bottom: 2px;\n  opacity: 0.8;\n}\n\n.guideai-transcript-message-text {\n  font-size: 11px;\n  line-height: 1.3;\n  word-wrap: break-word;\n}\n\n.guideai-transcript-message-time {\n  font-size: 8px;\n  opacity: 0.6;\n  margin-top: 2px;\n}\n\n\n\n@keyframes transcript-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes transcript-slide-up {\n  from { \n    opacity: 0; \n    transform: translateX(40px) scale(0.95); \n  }\n  to { \n    opacity: 1; \n    transform: translateX(0) scale(1); \n  }\n}\n\n@keyframes message-fade-in {\n  from { \n    opacity: 0; \n    transform: translateY(10px); \n  }\n  to { \n    opacity: 1; \n    transform: translateY(0); \n  }\n}\n\n/* Transcript Toggle Button Styles - positioned directly above mic button */\n.guideai-transcript-toggle-button {\n  position: fixed;\n  bottom: 110px; /* Default position (will be overridden by inline styles) */\n  right: 40px; /* Default position (will be overridden by inline styles) */\n  width: 36px;\n  height: 36px;\n  background: rgba(40, 44, 52, 0.9);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n  transition: all 0.2s ease;\n  z-index: 10001;\n  font-size: 14px;\n  padding: 0;\n  color: rgba(255, 255, 255, 0.9);\n  animation: toggle-fade-in 0.3s ease-out;\n}\n\n.guideai-transcript-toggle-button:hover {\n  background: rgba(40, 44, 52, 1);\n  transform: scale(1.1);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);\n}\n\n.guideai-transcript-toggle-button:active {\n  transform: scale(0.95);\n}\n\n.guideai-transcript-toggle-icon {\n  display: inline-block;\n  transition: all 0.2s ease;\n  filter: none;\n}\n\n/* Position transcript toggle button based on transcript position */\n.guideai-transcript-overlay {\n  pointer-events: none;\n}\n\n.guideai-transcript-toggle-button {\n  pointer-events: auto;\n}\n\n/* Input Options Container - Two Stage Layout */\n.guideai-input-options {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  position: relative;\n  animation: options-slide-in 0.4s ease-out;\n}\n\n@keyframes options-slide-in {\n  0% {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* Individual Input Option Button */\n.guideai-input-option {\n  width: 50px;\n  height: 50px;\n  background: rgba(255, 255, 255, 0.9);\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n  transition: all 0.3s ease;\n  font-size: 18px;\n  padding: 0;\n  position: relative;\n}\n\n.guideai-input-option:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 1);\n  transform: scale(1.1);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);\n}\n\n.guideai-input-option:active:not(:disabled) {\n  transform: scale(0.95);\n}\n\n.guideai-input-option:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* Voice Option Specific Styling */\n.guideai-input-option.voice-option {\n  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(139, 195, 74, 0.1));\n  border-color: rgba(76, 175, 80, 0.3);\n}\n\n.guideai-input-option.voice-option:hover:not(:disabled) {\n  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(139, 195, 74, 0.2));\n  border-color: rgba(76, 175, 80, 0.5);\n}\n\n/* Text Option Specific Styling */\n.guideai-input-option.text-option {\n  background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(63, 81, 181, 0.1));\n  border-color: rgba(33, 150, 243, 0.3);\n}\n\n.guideai-input-option.text-option:hover:not(:disabled) {\n  background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(63, 81, 181, 0.2));\n  border-color: rgba(33, 150, 243, 0.5);\n}\n\n.guideai-input-option-icon {\n  display: inline-block;\n  transition: all 0.2s ease;\n  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));\n}\n\n/* Text Input integrated into Transcript Box */\n.guideai-transcript-text-input {\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  padding: 12px;\n  display: flex;\n  gap: 8px;\n  align-items: flex-end;\n  background: rgba(0, 0, 0, 0.02);\n  border-radius: 0 0 16px 16px;\n  animation: text-input-fade-in 0.3s ease-out;\n}\n\n.guideai-transcript-input-field {\n  flex: 1;\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  padding: 8px 12px;\n  color: rgba(255, 255, 255, 0.95);\n  font-size: 12px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  resize: none;\n  outline: none;\n  transition: all 0.2s ease;\n  min-height: 32px;\n}\n\n.guideai-transcript-input-field::placeholder {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.guideai-transcript-input-field:focus {\n  border-color: rgba(255, 255, 255, 0.4);\n  background: rgba(255, 255, 255, 0.2);\n  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);\n}\n\n.guideai-transcript-send-button {\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 6px;\n  padding: 6px 10px;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 36px;\n  height: 32px;\n}\n\n.guideai-transcript-send-button:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.25);\n  border-color: rgba(255, 255, 255, 0.3);\n  transform: translateY(-1px);\n}\n\n.guideai-transcript-send-button:active:not(:disabled) {\n  transform: translateY(0);\n}\n\n.guideai-transcript-send-button:disabled {\n  background: rgba(255, 255, 255, 0.05);\n  border-color: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.4);\n  cursor: not-allowed;\n  transform: none;\n}\n\n.guideai-transcript-send-icon {\n  font-size: 11px;\n}\n\n/* Animation for text input appearance */\n@keyframes text-input-fade-in {\n  from { \n    opacity: 0; \n    transform: translateY(10px); \n  }\n  to { \n    opacity: 1; \n    transform: translateY(0); \n  }\n}\n\n@keyframes toggle-fade-in {\n  from { \n    opacity: 0; \n    transform: scale(0.8); \n  }\n  to { \n    opacity: 1; \n    transform: scale(1); \n  }\n}\n\n/* Hover effect animations */\n@keyframes hover-pulse {\n  0%, 100% {\n    opacity: 0.6;\n    transform: scale(1);\n    box-shadow: 0 0 10px rgba(255, 165, 0, 0.6);\n  }\n  25% {\n    opacity: 0.9;\n    transform: scale(1.03);\n    box-shadow: 0 0 20px rgba(255, 165, 0, 0.8);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1.05);\n    box-shadow: 0 0 25px rgba(255, 165, 0, 1);\n  }\n  75% {\n    opacity: 0.9;\n    transform: scale(1.03);\n    box-shadow: 0 0 20px rgba(255, 165, 0, 0.8);\n  }\n}\n\n@keyframes hover-indicator-fade {\n  from { \n    opacity: 0; \n    transform: translateX(-50%) translateY(-10px); \n  }\n  to { \n    opacity: 1; \n    transform: translateX(-50%) translateY(0); \n  }\n}\n\n@keyframes cursor-hover-float {\n  0%, 100% {\n    transform: translate(-50%, 0) translateY(0px);\n  }\n  25% {\n    transform: translate(-50%, 0) translateY(-3px);\n  }\n  50% {\n    transform: translate(-50%, 0) translateY(-6px);\n  }\n  75% {\n    transform: translate(-50%, 0) translateY(-3px);\n  }\n}\n\n\n";

package/dist/types/GuideAI.types.d.ts

@@ -1,4 +1,5 @@
 import { MetadataConfig, UserMetadata } from './metadata.types';
+import { VisualContextConfig } from '../visualContext/types';
 export type RecordingStatus = 'idle' | 'recording' | 'processing' | 'playing';
 export type UseStateHook = <T>(initialState: T | (() => T)) => [T, (value: T | ((prev: T) => T)) => void];
 export type UseEffectHook = (effect: () => void | (() => void), deps?: any[]) => void;
@@ -39,5 +40,6 @@ export interface GuideAIProps {
         defaultMode?: 'voice' | 'text';
         placeholder?: string;
     };
+    visualContext?: VisualContextConfig;
 }
-export type PopupPosition = 'above' | 'below';
+export type PopupPosition = 'above' | 'below' | 'above-left' | 'above-right' | 'above-center' | 'below-left' | 'below-right' | 'below-center';

package/dist/types/metadata.types.d.ts

@@ -1,5 +1,6 @@
 export interface UserMetadata {
     userId?: string;
+    email?: string;
     userType?: 'agent' | 'admin' | 'manager' | 'customer' | 'guest' | string;
     customerType?: 'individual' | 'business' | 'enterprise' | string;
     customerLicense?: string;
@@ -31,6 +32,7 @@ export interface MetadataConfig {
     customFields?: string[];
     collectBrowserInfo?: boolean;
     collectUserAgent?: boolean;
+    sessionTimeout?: number;
 }
 export interface MetadataStorageData {
     metadata: UserMetadata;

package/dist/utils/api.d.ts

@@ -14,6 +14,11 @@ interface ConversationData {
     ephemeralToken: string;
     prompt: string;
     workflows: Workflow[];
+    userMetadata?: {
+        visitCount: number;
+        loginCount?: number;
+        email?: string;
+    };
 }
 export declare const createNewConversation: (organizationKey: string, onError: (error: Error, context: string) => void, workflowKey?: string) => Promise<ConversationData | null>;
 export type { Workflow };

package/dist/utils/elementInteractions.d.ts

@@ -0,0 +1,92 @@
+export declare const HOVER_EFFECT_KEEP_ALIVE_TIME = 3000;
+export declare const createHoverEffect: (element: Element, initialRect: DOMRect, cursorElement?: HTMLElement | null, duration?: number) => Promise<void>;
+export declare const clickElement: (element: Element, rect: DOMRect, withEffects?: boolean) => Promise<void>;
+export declare const parseCustomSelector: (selector: string) => {
+    type: "text" | "css" | "xpath";
+    cssSelector?: string;
+    textContent?: string;
+    originalSelector?: string;
+};
+export declare const findElementBySelectorStrict: (selector: string) => Element | null;
+export declare const findElementBySelector: (selector: string) => Element | null;
+type ElementInteractionType = "HIGHLIGHT" | "HOVERANDCLICK";
+export declare const interactWithElement: (element: Element, cursorElement: HTMLElement | null, state: ElementInteractionType, hoverTime?: number) => Promise<HTMLElement | null>;
+export declare const processSelectorsInteraction: (selectors: string | string[], isInteracting: boolean, setIsInteracting: (interacting: boolean) => void, onEachElement: (element: Element, cursor: HTMLElement | null, index: number) => Promise<HTMLElement | null>, onComplete?: (lastElement: Element | null, cursor: HTMLElement | null) => Promise<void>) => Promise<boolean>;
+export declare const Highlight_Tool: {
+    type: string;
+    name: string;
+    description: string;
+    parameters: {
+        type: string;
+        properties: {
+            selector: {
+                oneOf: ({
+                    type: string;
+                    description: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                    };
+                    description: string;
+                })[];
+                description: string;
+            };
+        };
+        required: string[];
+    };
+};
+export declare const Hover_Tool: {
+    type: string;
+    name: string;
+    description: string;
+    parameters: {
+        type: string;
+        properties: {
+            selector: {
+                oneOf: ({
+                    type: string;
+                    description: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                    };
+                    description: string;
+                })[];
+                description: string;
+            };
+            hoverTime: {
+                type: string;
+                description: string;
+                minimum: number;
+                maximum: number;
+            };
+        };
+        required: string[];
+    };
+};
+export declare const Go_To_A_Elm_Link_Tool: {
+    type: string;
+    name: string;
+    description: string;
+    parameters: {
+        type: string;
+        properties: {
+            linkText: {
+                type: string;
+                description: string;
+            };
+            delay: {
+                type: string;
+                description: string;
+                minimum: number;
+                maximum: number;
+            };
+        };
+        required: string[];
+    };
+};
+export {};

package/dist/utils/gemini.d.ts

@@ -0,0 +1,3 @@
+export declare const parse_args: (prompt: string, argsToUse: any, geminiFlash: Function) => Promise<any>;
+export declare const HIGHLIGHT_TOOL_PROMPT = "Validate the following JSON string and return ONLY a correct JSON object:\nNote: The selector(s) should be either a css selector or an xpath, so modify those if invalid.\nAlso, [url=''] is a valid css selector, so do not modify it if it's present.\nDo not add any other text or newlines to the response.\nIt should be of the following format:\n{ \"selector\": \"string\" }\nor\n{ \"selector\": [\"string\", ...] }\nDO NOT add any other text or newlines to the response, it should begin and end with curly braces.\nDO NOT add '''json to the response.\nThe JSON string is:\n";
+export declare const HOVER_TOOL_PROMPT = "Validate the following JSON string and return ONLY a correct JSON object:\nNote: The selector(s) should be either a css selector or an xpath, so modify those if invalid.\nAlso, [url=''] is a valid css selector, so do not modify it if it's present.\nDo not add any other text or newlines to the response.\nIt should be of the following format:\n{ \"selector\": \"string\" }\nor\n{ \"selector\": [\"string\", ...] }\nor\n{ \"selector\": \"string\", \"hoverTime\": number }\nor\n{ \"selector\": [\"string\", ...], \"hoverTime\": number }\nThe hoverTime parameter is optional and represents time to hover in milliseconds (500-10000).\nIf not provided, default to 3000ms.\nDO NOT add any other text or newlines to the response, it should begin and end with curly braces.\nDO NOT add '''json to the response.\nThe JSON string is:\n";

package/dist/utils/goToAElmLink.d.ts

@@ -0,0 +1 @@
+export declare const goToAElmLink: (linkText: string, delay?: number) => Promise<boolean>;

package/dist/utils/highlightThenClick.d.ts

@@ -0,0 +1 @@
+export declare const highlightThenClick: (selector: string | string[], isHighlighting: boolean, setIsHighlighting: (highlighting: boolean) => void) => Promise<boolean>;

package/dist/utils/hoverThenClick.d.ts

@@ -0,0 +1 @@
+export declare const hoverThenClick: (selector: string | string[], isHovering: boolean, setIsHovering: (hovering: boolean) => void, hoverTime?: number) => Promise<boolean>;

package/dist/utils/logger.d.ts

@@ -2,7 +2,7 @@
  * Standardized logging utility for GuideAI package
  * Provides consistent formatting and development gating across all components
  */
-type Component = 'GuideAI' | 'EventTracker' | 'UserMetadata' | 'API' | 'TranscriptBox' | 'Onboarding';
+type Component = 'GuideAI' | 'UserMetadata' | 'API' | 'TranscriptBox' | 'Onboarding';
 declare class Logger {
     private static formatMessage;
     /**
@@ -29,10 +29,6 @@ declare class Logger {
      * Conversation flow tracking
      */
     static conversation(action: string, data?: any): void;
-    /**
-     * Event tracking logging
-     */
-    static event(action: string, data?: any): void;
     /**
      * Metadata tracking logging
      */

package/dist/utils/session.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Gets the current session ID from sessionStorage, or generates a new one if it doesn't exist.
+ * The session ID persists across page navigations within the same browser tab,
+ * but is cleared when the tab is closed.
+ *
+ * @returns {string} The current session ID (UUID v4 format)
+ */
+export declare function getSessionId(): string;
+/**
+ * Clears the current session ID from sessionStorage.
+ * This will force a new session ID to be generated on the next call to getSessionId().
+ *
+ * Note: This is primarily for testing purposes. In normal operation,
+ * the browser automatically clears sessionStorage when the tab is closed.
+ */
+export declare function clearSessionId(): void;
+/**
+ * Gets the current session ID without generating a new one.
+ * Returns null if no session ID exists.
+ *
+ * @returns {string | null} The current session ID or null if none exists
+ */
+export declare function peekSessionId(): string | null;

package/dist/utils/ui.d.ts

@@ -1,3 +1,3 @@
 import { PopupPosition } from '../types/GuideAI.types';
 export declare const injectStyles: (css: string, id: string) => void;
-export declare const calculateOptimalPosition: (componentRect: DOMRect, elementHeight?: number, spacing?: number) => PopupPosition;
+export declare const calculateOptimalPosition: (componentRect: DOMRect, elementHeight?: number, elementWidth?: number, spacing?: number) => PopupPosition;

package/dist/visualContext/VisualContextScheduler.d.ts

@@ -0,0 +1,43 @@
+import { ScreenshotFrame, ScreenshotProvider } from './types';
+export declare class VisualContextScheduler {
+    private getContainer;
+    private screenshotProvider;
+    private isRunning;
+    private isCaptureInFlight;
+    private hasPendingCapture;
+    private pendingReason;
+    private lastHash;
+    private lastCaptureAt;
+    private lastScrollAt;
+    private lastDomBurstAt;
+    private domChangeCounter;
+    private domBurstWindowMs;
+    private domBurstThreshold;
+    private minIntervalMs;
+    private scrollDebounceMs;
+    private scrollTimer;
+    private mode;
+    private buttonObserver;
+    private domObserver;
+    private targetWidth;
+    private rootElement;
+    private quality;
+    private minQuality;
+    private maxBytes;
+    private onFrame;
+    constructor(getContainer: () => HTMLElement | null, screenshotProvider: ScreenshotProvider, onFrame: (frame: ScreenshotFrame) => void, options?: {
+        targetWidth?: number;
+        quality?: number;
+        minQuality?: number;
+        maxBytes?: number;
+    });
+    setRootElement(root: HTMLElement | ShadowRoot | Document): void;
+    start(): void;
+    stop(): void;
+    private observeButtonState;
+    private observeDomChanges;
+    private observeScroll;
+    scheduleCapture(reason: 'preview' | 'final' | 'change'): void;
+    private performCapture;
+    private maybeRunPending;
+}

package/dist/visualContext/VisualContextStore.d.ts

@@ -0,0 +1,11 @@
+import { ScreenshotFrame } from './types';
+export declare class VisualContextStore {
+    private maxItems;
+    private frames;
+    constructor(maxItems?: number);
+    add(frame: ScreenshotFrame): void;
+    latest(): ScreenshotFrame | null;
+    all(): ScreenshotFrame[];
+    clear(): void;
+    setMaxItems(maxItems: number): void;
+}

package/dist/visualContext/debug-overlay.d.ts

@@ -0,0 +1,10 @@
+import { ScreenshotFrame } from './types';
+interface DebugOverlayProps {
+    React: typeof import('react');
+    frames: ScreenshotFrame[];
+    latencyMs: number | null;
+    onToggleGallery?: () => void;
+    showGallery?: boolean;
+}
+export declare const DebugOverlay: ({ React, frames, latencyMs, onToggleGallery, showGallery }: DebugOverlayProps) => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLElement>, HTMLElement>;
+export {};

package/dist/visualContext/defaultProvider.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Default screenshot provider using html2canvas
+ * Automatically detects and uses html2canvas if available
+ */
+import type { ScreenshotProvider } from './types';
+/**
+ * Creates a default screenshot provider using html2canvas
+ * Returns null if html2canvas is not available
+ */
+export declare const createDefaultScreenshotProvider: () => ScreenshotProvider | null;
+/**
+ * Get the default screenshot provider
+ * Returns null if unavailable (graceful degradation)
+ */
+export declare const getDefaultScreenshotProvider: () => ScreenshotProvider | null;

package/dist/visualContext/index.d.ts

@@ -0,0 +1,5 @@
+export { VisualContextStore } from './VisualContextStore';
+export { VisualContextScheduler } from './VisualContextScheduler';
+export { DebugOverlay } from './debug-overlay';
+export { createDefaultScreenshotProvider, getDefaultScreenshotProvider } from './defaultProvider';
+export type { ScreenshotResponse, ScreenshotFrame, ScreenshotOptions, ScreenshotProvider, VisualContextConfig } from './types';

package/dist/visualContext/types.d.ts

@@ -0,0 +1,45 @@
+export type ScreenshotResponse = {
+    ok?: boolean;
+    dataUrl?: string;
+    width?: number;
+    height?: number;
+    hash?: string;
+    isDuplicate?: boolean;
+    timestamp?: number;
+    error?: any;
+    metadata?: {
+        width?: number;
+        height?: number;
+        quality?: number;
+        [key: string]: any;
+    };
+};
+export type ScreenshotFrame = {
+    dataUrl: string;
+    width?: number;
+    height?: number;
+    hash?: string;
+    reason: 'preview' | 'final' | 'change';
+    timestamp?: number;
+    sentToLLM?: boolean;
+    llmReceivedAt?: number;
+};
+export type ScreenshotOptions = {
+    targetElement?: HTMLElement;
+    targetWidth?: number;
+    quality?: number;
+    minQuality?: number;
+    maxBytes?: number;
+};
+export type ScreenshotProvider = (options: ScreenshotOptions) => Promise<ScreenshotResponse>;
+export type VisualContextConfig = {
+    enabled: boolean;
+    screenshotProvider?: ScreenshotProvider;
+    shadowRoot?: ShadowRoot;
+    debug?: boolean;
+    maxFrames?: number;
+    targetWidth?: number;
+    quality?: number;
+    minQuality?: number;
+    maxBytes?: number;
+};

package/index.d.ts

@@ -1,3 +1,7 @@
 import GuideAI from './GuideAI';
+import TranscriptBox from './components/TranscriptBox';
 export default GuideAI;
-export type { GuideAIProps } from './GuideAI';
+export { TranscriptBox };
+export type { GuideAIProps } from './types/GuideAI.types';
+export * from './visualContext';
+export * from './visualContext/types';

package/jest.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  roots: ['<rootDir>/src'],
+  testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/*.types.ts'
+  ],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  transform: {
+    '^.+\\.tsx?$': ['ts-jest', {
+      tsconfig: {
+        jsx: 'react',
+        esModuleInterop: true,
+        allowSyntheticDefaultImports: true
+      }
+    }]
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  }
+};
+

package/jest.setup.js

@@ -0,0 +1,21 @@
+// Jest setup file
+require('jest-localstorage-mock');
+require('@testing-library/jest-dom');
+
+// Mock console methods to reduce noise in tests
+global.console = {
+  ...console,
+  log: jest.fn(),
+  warn: jest.fn(),
+  error: jest.fn(),
+};
+
+// Setup localStorage and sessionStorage mocks
+Object.defineProperty(window, 'localStorage', {
+  value: global.localStorage,
+});
+
+Object.defineProperty(window, 'sessionStorage', {
+  value: global.sessionStorage,
+});
+

package/metadata-tracking-example.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-The GuideAI package now includes comprehensive user metadata tracking capabilities designed for integration with Overproof. This system tracks the following metadata:
+The GuideAI package now includes comprehensive user metadata tracking capabilities designed for integration with client. This system tracks the following metadata:
 
 - **User's First Visit** - Timestamp of the first time the user interacted with GuideAI
 - **User's Last Visit** - Timestamp of the most recent user interaction
@@ -181,7 +181,7 @@ interface UserMetadata {
     platform?: string;
   };
   
-  // Custom fields for Overproof-specific needs
+  // Custom fields for client-specific needs
   customFields?: Record<string, string | number | boolean>;
 }
 ```
@@ -255,14 +255,14 @@ guideAIRef.current?.trackCustomEvent('document_viewed', {
 });
 ```
 
-## Overproof Integration Example
+## client Integration Example
 
 ```typescript
-function OverproofApp() {
+function clientApp() {
   const guideAIRef = useRef();
 
-  // Track when user logs into Overproof
-  const handleOverproofLogin = (user) => {
+  // Track when user logs into client
+  const handleclientLogin = (user) => {
     guideAIRef.current?.trackLogin({
       userId: user.id,
       userType: user.role, // 'agent', 'admin', etc.
@@ -291,18 +291,18 @@ function OverproofApp() {
   return (
     <GuideAI 
       ref={guideAIRef}
-      organizationKey="overproof-org-key"
+      organizationKey="demo-org-key"
       metadata={{
         config: {
           trackVisits: true,
           trackLogins: true,
-          syncInterval: 15000, // More frequent syncing for Overproof
+          syncInterval: 15000, // More frequent syncing for client
           customFields: ['agencyId', 'territory', 'permissions'],
           collectBrowserInfo: true
         },
         onMetadataUpdate: (metadata) => {
-          // Send to Overproof analytics
-          window.OverproofAnalytics?.track('guideai_metadata_update', metadata);
+          // Send to client analytics
+          window.clientAnalytics?.track('guideai_metadata_update', metadata);
         }
       }}
     />
@@ -321,4 +321,4 @@ Metadata is automatically:
 - Synced to backend at configured intervals
 - Restored when user returns (if using persistent storage)
 
-This implementation provides a robust foundation for tracking user metadata in the Overproof environment while maintaining flexibility for other use cases.
+This implementation provides a robust foundation for tracking user metadata in the client environment while maintaining flexibility for other use cases.