guideai-app 0.4.3 → 0.5.1

package/dist/components/AnimatedSettingsItem.d.ts

@@ -0,0 +1,9 @@
+interface AnimatedSettingsItemProps {
+    visible: boolean;
+    gap: number;
+    isLast?: boolean;
+    children: React.ReactNode;
+    React: typeof import('react');
+}
+declare const AnimatedSettingsItem: ({ visible, gap, isLast, children, React, }: AnimatedSettingsItemProps) => import("react").JSX.Element;
+export default AnimatedSettingsItem;

package/dist/components/Microphone.d.ts

@@ -0,0 +1,19 @@
+import { PopupPosition, RecordingStatus } from '../types/GuideAI.types';
+interface MicrophoneProps {
+    componentRef: React.RefObject<HTMLDivElement>;
+    baseStyles: React.CSSProperties;
+    hasInteracted: boolean;
+    popupPosition: PopupPosition;
+    showOnboarding: boolean;
+    handleOnboardingComplete: () => void;
+    handleOnboardingClose: () => void;
+    isConnecting: boolean;
+    status: RecordingStatus;
+    handleToggleConversation: () => void;
+    showTranscript: boolean;
+    hasMic: boolean;
+    isMuted: boolean;
+    React: typeof import('react');
+}
+declare const Microphone: ({ componentRef, baseStyles, hasInteracted, popupPosition, showOnboarding, handleOnboardingComplete, handleOnboardingClose, isConnecting, status, handleToggleConversation, showTranscript, hasMic, isMuted, React, }: MicrophoneProps) => import("react").JSX.Element;
+export default Microphone;

package/dist/components/MuteButton.d.ts

@@ -0,0 +1,11 @@
+interface MuteButtonProps {
+    hasMic: boolean;
+    isMuted?: boolean;
+    handleToggleMute?: () => void;
+    React: typeof import('react');
+}
+declare const MuteButton: {
+    ({ hasMic, isMuted, handleToggleMute, React }: MuteButtonProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default MuteButton;

package/dist/components/ResetButton.d.ts

@@ -0,0 +1,9 @@
+interface ResetButtonProps {
+    handleResetChat?: () => void;
+    React: typeof import('react');
+}
+declare const ResetButton: {
+    ({ handleResetChat, React }: ResetButtonProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default ResetButton;

package/dist/components/SettingsMenu.d.ts

@@ -0,0 +1,16 @@
+import { TranscriptPosition, MicButtonPosition } from '../types/GuideAI.types';
+interface SettingsMenuProps {
+    handleResetChat?: () => void;
+    hasMic: boolean;
+    isMuted: boolean;
+    handleToggleMute: () => void;
+    showTranscript: boolean;
+    handleToggleTranscript: () => void;
+    showSettings: boolean;
+    setShowSettings?: (value: boolean) => void;
+    transcriptPosition: TranscriptPosition;
+    micPosition?: MicButtonPosition;
+    React: typeof import('react');
+}
+declare const SettingsMenu: ({ handleResetChat, hasMic, isMuted, handleToggleMute, showTranscript, handleToggleTranscript, showSettings, setShowSettings, transcriptPosition, micPosition, React, }: SettingsMenuProps) => import("react").JSX.Element;
+export default SettingsMenu;

package/dist/components/SettingsToggle.d.ts

@@ -0,0 +1,7 @@
+interface SettingsToggleProps {
+    showSettings: boolean;
+    setShowSettings?: (value: boolean) => void;
+    React: typeof import('react');
+}
+declare const SettingsToggle: ({ showSettings, setShowSettings, React }: SettingsToggleProps) => import("react").JSX.Element;
+export default SettingsToggle;

package/dist/components/TranscriptBox.d.ts

@@ -1,24 +1,32 @@
 import { StoredMessage } from '../utils/messageStorage';
-import { PopupPosition } from '../types/GuideAI.types';
+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: any) => void;
+    setTextInput?: (value: string) => void;
+    handleTextSubmit?: () => void;
+    handleTextKeyPress?: (event: React.KeyboardEvent) => void;
     textPlaceholder?: string;
-    position?: PopupPosition;
-    micPosition?: any;
-    isMicCentered?: boolean;
+    micPosition?: MicButtonPosition;
+    transcriptPosition: TranscriptPosition;
+    hasMic: boolean;
+    isMuted?: boolean;
+    handleToggleMute?: () => void;
+    isConversationActive?: boolean;
+    handleResetChat?: () => void;
+    showSettings?: boolean;
+    setShowSettings?: (value: boolean) => void;
+    isDataChannelOpen?: boolean;
+    isResponseActive?: boolean;
     React: typeof import('react');
 }
 declare const TranscriptBox: {
-    (props: TranscriptBoxProps): import("react").JSX.Element | null;
+    ({ allMessages, showTranscript, handleCloseTranscript: _handleCloseTranscript, handleToggleTranscript, showTextInput, textInput, setTextInput, handleTextSubmit, handleTextKeyPress, textPlaceholder, micPosition, transcriptPosition, hasMic, isMuted, handleToggleMute, isConversationActive: _isConversationActive, handleResetChat, showSettings, setShowSettings, isDataChannelOpen, isResponseActive, React, }: TranscriptBoxProps): import("react").JSX.Element | null;
     displayName: string;
 };
 export default TranscriptBox;

package/dist/components/TranscriptMessages.d.ts

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

package/dist/components/TranscriptTextInput.d.ts

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

package/dist/components/TranscriptToggle.d.ts

@@ -0,0 +1,7 @@
+interface TranscriptToggleProps {
+    showTranscript: boolean;
+    handleToggleTranscript?: () => void;
+    React: typeof import('react');
+}
+declare const TranscriptToggle: ({ showTranscript, handleToggleTranscript, React, }: TranscriptToggleProps) => import("react").JSX.Element;
+export default TranscriptToggle;

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useGuideAIAPI } from './useGuideAIAPI';
+export { useTranscriptState } from './useTranscriptState';
+export { useWebRTC } from './useWebRTC';

package/dist/hooks/useGuideAIAPI.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Exposes GuideAI methods globally on window for external access.
+ */
+import type { UseEffectHook } from '../types/GuideAI.types';
+export interface UseGuideAIAPIParams {
+    useEffect: UseEffectHook;
+    organizationKey: string;
+    setShowTranscript: (value: React.SetStateAction<boolean>) => void;
+    showTranscript: boolean;
+    setInputMode: (mode: 'voice' | 'text') => void;
+    setShowTextInput: (value: React.SetStateAction<boolean>) => void;
+    inputMode: 'voice' | 'text';
+    setTextInput: (value: React.SetStateAction<string>) => void;
+    inputOptions?: {
+        enableTextInput?: boolean;
+    };
+    isConversationActive: boolean;
+    handleToggleInputMode: () => void;
+    handleTextSubmit: (text?: string) => Promise<void>;
+    visualContextWindowAPI: any;
+}
+export declare function useGuideAIAPI(params: UseGuideAIAPIParams): void;

package/dist/hooks/useTranscriptState.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Manages transcript/message state: sync from storage, streaming updates.
+ */
+import type { StoredMessage } from '../utils/messageStorage';
+import type { RecordingStatus } from '../types/GuideAI.types';
+export interface UseTranscriptStateParams {
+    hooks: {
+        useRef: <T>(initialValue: T) => {
+            current: T;
+        };
+        useCallback: <T extends (...args: any[]) => any>(callback: T, deps: any[]) => T;
+    };
+    organizationKey: string;
+    setAllMessages: React.Dispatch<React.SetStateAction<StoredMessage[]>>;
+    setStatus: (status: RecordingStatus) => void;
+}
+export declare function useTranscriptState(params: UseTranscriptStateParams): {
+    syncMessagesFromStorage: () => StoredMessage[];
+    cleanupStreamingMessageState: () => void;
+    updateStreamingMessage: (text: string) => void;
+};

package/dist/hooks/useWebRTC.d.ts

@@ -0,0 +1,71 @@
+/**
+ * WebRTC connection management hook.
+ * Handles peer connection, data channel, audio element refs, cleanup, and initialization.
+ */
+import { WebRTCConnection } from '../utils/webrtcConnection';
+import { DataChannelManager } from '../utils/dataChannel';
+import { ConversationManager } from '../utils/conversationManager';
+import type { RecordingStatus } from '../types/GuideAI.types';
+import type { GuideAIEnvironment } from '../types/GuideAI.types';
+import type { StoredMessage } from '../utils/messageStorage';
+export type PropTools = Record<string, {
+    description: string;
+    parameters: object;
+    execute: (args: Record<string, unknown>) => Promise<unknown>;
+}>;
+export interface UseWebRTCParams {
+    hooks: {
+        useRef: <T>(initialValue: T) => {
+            current: T;
+        };
+        useCallback: <T extends (...args: any[]) => any>(callback: T, deps: any[]) => T;
+    };
+    organizationKey: string;
+    environment: GuideAIEnvironment;
+    setIsDataChannelOpen: (open: boolean) => void;
+    setIsResponseActive: (active: boolean) => void;
+    setIsConnecting: (connecting: boolean) => void;
+    setStatus: (status: RecordingStatus) => void;
+    handleHighlightThenClick: (out: any) => Promise<boolean>;
+    handleHoverThenClick: (out: any) => Promise<boolean>;
+    handleHover: (out: any) => Promise<boolean>;
+    handleGoToAElmLink: (linkText: string, delay?: number) => Promise<boolean>;
+    handleResetChatRef: {
+        current: () => Promise<void>;
+    };
+    endConversationSessionRef: {
+        current: () => void;
+    };
+    updateStreamingMessage: (text: string) => void;
+    cleanupStreamingMessageState: () => void;
+    allMessages: StoredMessage[];
+    status: RecordingStatus;
+    conversationManagerRef: {
+        current: ConversationManager | null;
+    };
+    onMessageLogged: () => void;
+    /** Optional tools from component prop: Record<functionName, { description, parameters, execute }> */
+    tools?: PropTools;
+}
+export declare function useWebRTC(params: UseWebRTCParams): {
+    peerConnectionRef: {
+        current: RTCPeerConnection | null;
+    };
+    dataChannelManagerRef: {
+        current: DataChannelManager | null;
+    };
+    mediaStreamRef: {
+        current: MediaStream | null;
+    };
+    audioElementRef: {
+        current: HTMLAudioElement | null;
+    };
+    webrtcConnectionRef: {
+        current: WebRTCConnection | null;
+    };
+    conversationIdRef: {
+        current: string | null;
+    };
+    cleanupWebRTC: () => void;
+    initializeWebRTC: (audioStream: MediaStream | null) => Promise<boolean>;
+};

package/dist/index.d.ts

@@ -2,7 +2,8 @@ import GuideAI from './GuideAI';
 import TranscriptBox from './components/TranscriptBox';
 export default GuideAI;
 export { TranscriptBox };
-export type { GuideAIProps } from './types/GuideAI.types';
+export type { GuideAIProps, GuideAIEnvironment } from './types/GuideAI.types';
 export * from './visualContext';
 export * from './visualContext/types';
 export { getSessionId, clearSessionId, peekSessionId } from './utils/session';
+export { STORAGE_KEYS } from './utils/localStorageHelper';

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

@@ -1 +1,7 @@
-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  padding-bottom: 40px;\n  padding-right: 40px;\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  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: 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}\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 interface ZIndexConfig {
+    main: number;
+    transcript: number;
+    microphone: number;
+    onboarding: number;
+}
+export declare const guideAIStyles: (zIndexConfig: ZIndexConfig) => string;

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

@@ -1,38 +1,35 @@
-import { MetadataConfig, UserMetadata } from './metadata.types';
 import { VisualContextConfig } from '../visualContext/types';
-export type RecordingStatus = 'idle' | 'recording' | 'processing' | 'playing';
+export type RecordingStatus = 'idle' | 'recording' | 'active' | '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;
 export type UseRefHook = <T>(initialValue: T) => {
     current: T;
 };
 export type UseCallbackHook = <T extends (...args: any[]) => any>(callback: T, deps: any[]) => T;
+export type GuideAIEnvironment = 'development' | 'production' | 'local';
+export type GuideAIPosition = {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+    marginTop?: string;
+    marginRight?: string;
+    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?: {
-        top?: string;
-        right?: string;
-        bottom?: string;
-        left?: string;
-        marginTop?: string;
-        marginRight?: string;
-        marginBottom?: string;
-        marginLeft?: string;
-        transform?: string;
-    };
-    onError?: (error: string | Error, context?: string) => void;
-    metadata?: {
-        config?: MetadataConfig;
-        initialUserData?: Partial<UserMetadata>;
-        onMetadataUpdate?: (metadata: UserMetadata) => void;
-    };
+    position?: GuideAIPosition;
     transcript?: {
         enabled?: boolean;
-        showToggleButton?: boolean;
-        position?: 'right' | 'left' | 'top' | 'bottom';
+        position?: TranscriptPosition;
     };
     input?: {
         enableTextInput?: boolean;
@@ -41,5 +38,12 @@ export interface GuideAIProps {
         placeholder?: string;
     };
     visualContext?: VisualContextConfig;
+    /** Custom tools: Record<functionName, { description, parameters, execute }> - always custom handler */
+    tools?: Record<string, {
+        description: string;
+        parameters: object;
+        execute: (args: Record<string, unknown>) => Promise<unknown>;
+    }>;
 }
+export type TranscriptPosition = 'right' | 'left';
 export type PopupPosition = 'above' | 'below' | 'above-left' | 'above-right' | 'above-center' | 'below-left' | 'below-right' | 'below-center';

package/dist/utils/api.d.ts

@@ -1,26 +1,37 @@
-import { MetadataUpdate } from '../types/metadata.types';
-interface Workflow {
+import { GuideAIEnvironment } from '../types/GuideAI.types';
+import { MessageData } from './conversationManager';
+export declare function getApiHeaders(): Record<string, string>;
+export interface Workflow {
     id: string;
     name: string;
     triggers: string[];
     organizationKey: string;
     prompt: string;
-    archived: boolean;
-    createdAt: string;
-    updatedAt: string;
+    archived?: boolean;
+    createdAt?: string;
+    updatedAt?: string;
 }
-interface ConversationData {
+export interface PropToolDefinition {
+    name: string;
+    description: string;
+    parameters: object;
+}
+export interface InitializeWebRTCPayload {
+    sdp: string;
+    organizationKey: string;
+    user?: string;
+    conversationId?: string;
+    /** Prop tools to sync to library (server creates if not exist, unpublished) */
+    propTools?: PropToolDefinition[];
+}
+export interface ToolFromServer {
+    toolConfig: object;
+    functionConfig: object;
+}
+export interface InitializeWebRTCResponse {
+    answerSdp: string;
     id: string;
-    ephemeralToken: string;
-    prompt: string;
-    workflows: Workflow[];
-    userMetadata?: {
-        visitCount: number;
-        loginCount?: number;
-        email?: string;
-    };
+    tools?: ToolFromServer[];
 }
-export declare const createNewConversation: (organizationKey: string, onError: (error: Error, context: string) => void, workflowKey?: string) => Promise<ConversationData | null>;
-export type { Workflow };
-export declare const logMessage: (content: string, sender: "GUIDEAI" | "HUMAN", conversationId: string | null, organizationKey: string, onError: (error: Error, context: string) => void) => Promise<void>;
-export declare const sendMetadataUpdates: (updates: MetadataUpdate[], organizationKey: string, onError: (error: Error, context: string) => void) => Promise<boolean>;
+export declare const initializeWebRTC: (endpoint: string, payload: InitializeWebRTCPayload) => Promise<InitializeWebRTCResponse>;
+export declare const logMessage: (messageData: MessageData, conversationId: string | null, organizationKey: string, user?: string, environment?: GuideAIEnvironment) => Promise<void>;

package/dist/utils/constants.d.ts

@@ -1,7 +1,22 @@
 export declare const DEFAULT_PROMPT = "you are Guide AI.\n      Your role is to answer any question directly and succinctly that a user has. NEVER DIRECTLY MENTION THE SCREENSHOT, but use its information as much as possible to target your responses.\n      If nothing is asked, then your goal is to generally assist them.\n      IMPORTANT: NEVER answer in more than 10 words. Always be concise and limit answers to 1 sentence maximum. Be simple and as short as possible.\n      Your job is to help them get it done through asking more and more targeted specific questions.";
-export declare const IGNORE_MESSAGE_TYPES: string[];
-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";
+export declare const GUIDE_AI_API_BASE_PROD = "https://app.getguide.ai/api";
+export declare const GUIDE_AI_API_BASE_DEV = "https://dev.getguide.ai/api";
+export declare const GUIDE_AI_API_BASE_LOCAL = "http://localhost:3000/api";
+export declare const getApiBaseUrl: (environment?: "development" | "production" | "local") => string;
+export declare const GUIDE_AI_API_BASE = "https://app.getguide.ai/api";
+export declare const OPENAI_REALTIME_BASE = "https://api.openai.com/v1/realtime/calls";
+export type ElementInteractionType = 'HIGHLIGHT' | 'HOVERANDCLICK';
+export declare const UI_LAYOUT: {
+    /** Mic/icon wrapper size - matches .guideai-icon-wrapper */
+    readonly micButtonSize: 50;
+    /** Space between mic top and lowest toggle bottom */
+    readonly toggleAboveMicGap: 12;
+    /** Gap between stacked buttons (e.g. transcript above settings) */
+    readonly stackedButtonGap: 8;
+    /** Horizontal offset from edge when using right/left positioning */
+    readonly horizontalEdgeOffset: 6;
+    /** Default bottom when micPosition is not provided */
+    readonly defaultBottom: 20;
+    /** Default horizontal offset when position is not provided */
+    readonly defaultHorizontalOffset: 40;
+};

package/dist/utils/conversationManager.d.ts

@@ -0,0 +1,89 @@
+import { GuideAIEnvironment } from '../types/GuideAI.types';
+/**
+ * Message type options
+ */
+export type MessageType = 'log' | 'voice' | 'text' | 'action' | 'error' | 'screenshot';
+/**
+ * Sender type options
+ */
+export type MessageSender = 'GUIDEAI' | 'HUMAN' | 'SYSTEM';
+/**
+ * Message data structure for API
+ */
+export interface MessageData {
+    content: string;
+    sender: MessageSender;
+    type: MessageType;
+    url?: string;
+    session?: string;
+    logdata?: any;
+}
+/**
+ * ConversationManager class
+ * Centralized message logging with validation and automatic field population
+ */
+export declare class ConversationManager {
+    private organizationKey;
+    private conversationId;
+    private environment?;
+    private allMessages;
+    private onMessageLogged?;
+    constructor(organizationKey: string, conversationId: string | null, environment?: GuideAIEnvironment, onMessageLogged?: () => void);
+    /**
+     * Update conversation ID (called when conversation is created/updated)
+     */
+    setConversationId(conversationId: string | null): void;
+    /**
+     * Update session ID in localStorage
+     */
+    updateSessionId(sessionId: string | null): void;
+    /**
+     * Refresh messages from storage
+     */
+    refreshMessages(): void;
+    /**
+     * Primary utility function for logging messages
+     * Handles validation, duplicate checking, and field population
+     */
+    private logMessage;
+    /**
+     * Private wrapper for logMessage - defaults type to voice
+     */
+    private logVoiceMessage;
+    /**
+     * Public wrapper - log user voice message
+     */
+    logUserVoiceMessage(content: string): Promise<void>;
+    /**
+     * Public wrapper - log GuideAI voice message
+     */
+    logGuideAIMessage(content: string): Promise<void>;
+    /**
+     * Public wrapper - log data message (type defaults to 'log')
+     */
+    logDataMessage(content: string, data?: any, type?: any): void;
+    /**
+     * Private wrapper for logMessage - defaults type to text
+     */
+    private logTextMessage;
+    /**
+     * Public wrapper - log user text message
+     */
+    logUserTextMessage(content: string): Promise<void>;
+    /**
+     * Public wrapper - log action message
+     */
+    logActionMessage(content: string, data?: any): void;
+    /**
+     * Public wrapper - log debug message
+     */
+    logDebugMessage(content: string, data?: any): void;
+    /**
+     * Public wrapper - log error message
+     */
+    logErrorMessage(content: string, data?: any): void;
+    /**
+     * Public wrapper - log visual context message
+     */
+    logVisualContextMessage(content: string, data?: any): void;
+}