guideai-app 0.4.3-2 → 0.4.3-3

package/dist/components/Microphone.d.ts

@@ -11,7 +11,9 @@ interface MicrophoneProps {
     isConnecting: boolean;
     status: RecordingStatus;
     handleToggleConversation: () => void;
+    showTranscript: boolean;
+    hasMic: boolean;
     React: typeof import('react');
 }
-declare const Microphone: ({ componentRef, baseStyles, hasInteracted, ephemeralToken, popupPosition, showOnboarding, handleOnboardingComplete, handleOnboardingClose, isConnecting, status, handleToggleConversation, React }: MicrophoneProps) => import("react").JSX.Element;
+declare const Microphone: ({ componentRef, baseStyles, hasInteracted, ephemeralToken, popupPosition, showOnboarding, handleOnboardingComplete, handleOnboardingClose, isConnecting, status, handleToggleConversation, showTranscript, hasMic, React }: MicrophoneProps) => import("react").JSX.Element;
 export default Microphone;

package/dist/components/MuteButton.d.ts

@@ -0,0 +1,15 @@
+import { TranscriptPosition, MicButtonPosition } from '../types/GuideAI.types';
+interface MuteButtonProps {
+    transcriptPosition: TranscriptPosition;
+    micPosition?: MicButtonPosition;
+    hasMic: boolean;
+    isMuted?: boolean;
+    handleToggleMute?: () => void;
+    isConversationActive?: boolean;
+    React: typeof import('react');
+}
+declare const MuteButton: {
+    ({ transcriptPosition, micPosition, hasMic, isMuted, handleToggleMute, isConversationActive, React }: MuteButtonProps): import("react").JSX.Element | null;
+    displayName: string;
+};
+export default MuteButton;

package/dist/components/TranscriptBox.d.ts

@@ -1,23 +1,27 @@
 import { StoredMessage } from '../utils/messageStorage';
 import { TranscriptPosition, MicButtonPosition } from '../types/GuideAI.types';
 interface TranscriptBoxProps {
-    messages: StoredMessage[];
-    isVisible: boolean;
-    onClose: () => void;
+    allMessages: StoredMessage[];
+    showTranscript: boolean;
+    handleCloseTranscript: () => void;
     showToggleButton?: boolean;
-    onToggle?: () => void;
+    handleToggleTranscript?: () => void;
     showTextInput?: boolean;
     textInput?: string;
-    onTextInputChange?: (value: string) => void;
-    onTextSubmit?: () => void;
-    onTextKeyPress?: (event: React.KeyboardEvent) => void;
+    setTextInput?: (value: string) => void;
+    handleTextSubmit?: () => void;
+    handleTextKeyPress?: (event: React.KeyboardEvent) => void;
     textPlaceholder?: string;
     micPosition?: MicButtonPosition;
     transcriptPosition: TranscriptPosition;
+    hasMic: boolean;
+    isMuted?: boolean;
+    handleToggleMute?: () => void;
+    isConversationActive?: boolean;
     React: typeof import('react');
 }
 declare const TranscriptBox: {
-    (props: TranscriptBoxProps): import("react").JSX.Element | null;
+    ({ allMessages, showTranscript, handleCloseTranscript, showToggleButton, handleToggleTranscript, showTextInput, textInput, setTextInput, handleTextSubmit, handleTextKeyPress, textPlaceholder, micPosition, transcriptPosition, hasMic, isMuted, handleToggleMute, isConversationActive, React }: TranscriptBoxProps): import("react").JSX.Element | null;
     displayName: string;
 };
 export default TranscriptBox;

package/dist/components/TranscriptMessages.d.ts

@@ -1,8 +1,8 @@
 import { StoredMessage } from '../utils/messageStorage';
 interface TranscriptMessagesProps {
-    messages: StoredMessage[];
+    allMessages: StoredMessage[];
     messagesEndRef: React.RefObject<HTMLDivElement>;
     React: typeof import('react');
 }
-declare const TranscriptMessages: ({ messages, messagesEndRef, React }: TranscriptMessagesProps) => import("react").JSX.Element;
+declare const TranscriptMessages: ({ allMessages, messagesEndRef, React }: TranscriptMessagesProps) => import("react").JSX.Element;
 export default TranscriptMessages;

package/dist/components/TranscriptTextInput.d.ts

@@ -1,10 +1,10 @@
 interface TranscriptTextInputProps {
     textInput?: string;
-    onTextInputChange?: (value: string) => void;
-    onTextSubmit?: () => void;
-    onTextKeyPress?: (event: React.KeyboardEvent) => void;
+    setTextInput?: (value: string) => void;
+    handleTextSubmit?: () => void;
+    handleTextKeyPress?: (event: React.KeyboardEvent) => void;
     textPlaceholder?: string;
     React: typeof import('react');
 }
-declare const TranscriptTextInput: ({ textInput, onTextInputChange, onTextSubmit, onTextKeyPress, textPlaceholder, React }: TranscriptTextInputProps) => import("react").JSX.Element;
+declare const TranscriptTextInput: ({ textInput, setTextInput, handleTextSubmit, handleTextKeyPress, textPlaceholder, React }: TranscriptTextInputProps) => import("react").JSX.Element;
 export default TranscriptTextInput;

package/dist/components/TranscriptToggle.d.ts

@@ -2,9 +2,9 @@ import { TranscriptPosition, MicButtonPosition } from '../types/GuideAI.types';
 interface TranscriptToggleProps {
     transcriptPosition: TranscriptPosition;
     micPosition?: MicButtonPosition;
-    isVisible: boolean;
-    onToggle?: () => void;
+    showTranscript: boolean;
+    handleToggleTranscript?: () => void;
     React: typeof import('react');
 }
-declare const TranscriptToggle: ({ transcriptPosition, micPosition, isVisible, onToggle, React }: TranscriptToggleProps) => import("react").JSX.Element;
+declare const TranscriptToggle: ({ transcriptPosition, micPosition, showTranscript, handleToggleTranscript, React }: TranscriptToggleProps) => import("react").JSX.Element;
 export default TranscriptToggle;

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

@@ -1 +1,8 @@
-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: 90009000;\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  z-index: 90009000;\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  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  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: 90009000;\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  pointer-events: auto;\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/* 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 interface ZIndexConfig {
+    main: number;
+    transcript: number;
+    microphone: number;
+    onboarding: number;
+    interactions: number;
+}
+export declare const guideAIStyles: (zIndexConfig: ZIndexConfig) => string;

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

@@ -8,7 +8,7 @@ export type UseRefHook = <T>(initialValue: T) => {
 };
 export type UseCallbackHook = <T extends (...args: any[]) => any>(callback: T, deps: any[]) => T;
 export type GuideAIEnvironment = 'development' | 'production' | 'local';
-export type MicButtonPosition = {
+export type GuideAIPosition = {
     top?: string;
     right?: string;
     bottom?: string;
@@ -18,14 +18,16 @@ export type MicButtonPosition = {
     marginBottom?: string;
     marginLeft?: string;
     transform?: string;
+    zIndex?: number;
 };
+export type MicButtonPosition = GuideAIPosition;
 export interface GuideAIProps {
     organizationKey: string;
     workflowKey?: string;
     environment?: GuideAIEnvironment;
     React: typeof import('react');
     ReactDOM: any;
-    position?: MicButtonPosition;
+    position?: GuideAIPosition;
     onError?: (error: string | Error, context?: string) => void;
     metadata?: {
         config?: MetadataConfig;

package/dist/utils/api.d.ts

@@ -11,6 +11,7 @@ interface Workflow {
     updatedAt: string;
 }
 interface ConversationData {
+    tokenExpiresAt: number;
     id: string;
     ephemeralToken: string;
     prompt: string;

package/dist/utils/constants.d.ts

@@ -7,5 +7,4 @@ export declare const getApiBaseUrl: (environment?: "development" | "production"
 export declare const GUIDE_AI_API_BASE = "https://www.getguide.ai/api";
 export declare const METADATA_API_BASE = "http://localhost:3000/api";
 export declare const OPENAI_REALTIME_BASE = "https://api.openai.com/v1/realtime";
-export declare const OPENAI_REALTIME_MODEL = "gpt-realtime-2025-08-28";
 export type ElementInteractionType = "HIGHLIGHT" | "HOVERANDCLICK";

package/dist/utils/logger.d.ts

@@ -1,4 +1,4 @@
-type Component = 'GuideAI' | 'UserMetadata' | 'API' | 'TranscriptBox' | 'Onboarding' | 'VisualContext';
+type Component = 'GuideAI' | 'UserMetadata' | 'API' | 'TranscriptBox' | 'Onboarding' | 'VisualContext' | 'MessageStorage';
 declare class Logger {
     private static formatMessage;
     private static checkLoggingEnabled;

package/dist/utils/messageStorage.d.ts

@@ -5,15 +5,25 @@ export interface StoredMessage {
 }
 export interface StoredConversation {
     conversationId: string;
+    conversationKey?: string;
     messages: StoredMessage[];
     timestamp: number;
     organizationKey: string;
+    keyExpiresAt?: number;
+    sessionExpiresAt?: number;
 }
 export declare const CONVERSATION_STORAGE_KEY = "guideai_conversation";
 export declare const CONVERSATION_EXPIRY_MINUTES = 30;
 export declare const MAX_STORED_MESSAGES = 100;
 export declare const isLocalStorageAvailable: () => boolean;
-export declare const isConversationExpired: (conversation: StoredConversation) => boolean;
+export declare const initializeConversationStorage: (organizationKey: string, conversationId: string, conversationKey: string, keyExpiresAt: number) => void;
+export declare const getConversationKey: (organizationKey: string) => string | null | undefined;
+export declare const resetConversationKey: (organizationKey: string) => void;
+export declare const isKeyExpired: (organizationKey: string) => boolean;
+export declare const isSessionExpired: (organizationKey: string) => boolean;
+export declare const isConversationExpired: (organizationKey: string) => boolean;
+export declare const updateSessionExpiresAt: (organizationKey: string, sessionExpiresAt: number) => void;
+export declare const getConversationId: (organizationKey: string) => string | null;
 export declare const saveConversationToStorage: (conversation: StoredConversation) => void;
 export declare const loadConversationFromStorage: () => StoredConversation | null;
 export declare const clearConversationStorage: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "guideai-app",
-  "version": "0.4.3-2",
+  "version": "0.4.3-3",
   "description": "AI-powered guide component for React applications",
   "main": "dist/GuideAI.js",
   "types": "dist/index.d.ts",
@@ -16,7 +16,8 @@
     "registry": "https://npm.pkg.github.com"
   },
   "scripts": {
-    "build": "webpack && tsc --emitDeclarationOnly && javascript-obfuscator dist/GuideAI.js --config obfuscator.json --output dist/GuideAI.js",
+    "build": "webpack --mode=production && tsc --emitDeclarationOnly && javascript-obfuscator dist/GuideAI.js --config obfuscator.json --output dist/GuideAI.js",
+    "build:dev": "webpack --mode=development && tsc --emitDeclarationOnly",
     "prepare": "npm run build",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -59,4 +60,4 @@
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1"
   }
-}
+}