goji-search 1.0.0 → 1.1.0

package/dist/goji-search/components/goji-search-component.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "./goji-search.css";
 import { ArrowLeft, X, Maximize2, Minimize2 } from "lucide-react";
-import { useState, useEffect, useRef, useId } from "react";
+import { useState, useEffect, useRef, useId, useMemo } from "react";
 import { SuggestedQuestions } from "./elements/suggested-questions";
 import { MessageList } from "./elements/message-list";
+import chatLogo from "../assets/chat-logo.png";
 import { SearchInput } from "./elements/search-input";
 import { ActionButtons } from "./elements/action-buttons";
 import CalendarIntegration from "./elements/calendar-integration";
-import { gojiClient } from "../lib/goji-client";
+import { createGojiClient } from "../lib/goji-client";
 import { companyConfig } from "../config/company";
-export function GojiSearchComponent() {
+export function GojiSearchComponent({ apiUrl } = {}) {
+    // Create client instance based on provided API URL
+    const client = useMemo(() => createGojiClient(apiUrl), [apiUrl]);
     const [searchQuery, setSearchQuery] = useState("");
     const [size, setSize] = useState("xs");
     const [isHovered, setIsHovered] = useState(false);
@@ -22,13 +25,20 @@ export function GojiSearchComponent() {
     const inputRef = useRef(null);
     const sparkleRef = useRef(null);
     const streamingCancelRef = useRef(null);
+    const mediaRecorderRef = useRef(null);
+    const audioChunksRef = useRef([]);
     const [isInputHovered, setIsInputHovered] = useState(false);
     const [hoverTopExpand, setHoverTopExpand] = useState(false);
     const [hoverTopClose, setHoverTopClose] = useState(false);
-    const currentLanguage = companyConfig.defaultLanguage;
+    const [isRecording, setIsRecording] = useState(false);
+    const [backendSuggestedQuestions, setBackendSuggestedQuestions] = useState(null);
+    // Language selection state - will be set from backend default
+    const [selectedLanguage, setSelectedLanguage] = useState('en');
+    const [showLanguageMenu, setShowLanguageMenu] = useState(false);
+    const currentLanguage = selectedLanguage;
     const languageConfig = companyConfig.languages[currentLanguage];
-    const suggestedQuestions = languageConfig.suggestedPrompts;
-    const inspirationQuestions = languageConfig.suggestedPrompts;
+    // Use backend-provided questions only (no hardcoded prompts)
+    const inspirationQuestions = backendSuggestedQuestions || [];
     const idBase = useId();
     const xTooltipId = `${idBase}-x-tip`;
     const expandTooltipId = `${idBase}-expand-tip`;
@@ -38,22 +48,83 @@ export function GojiSearchComponent() {
         }, 4000);
         return () => clearTimeout(timer);
     }, []);
+    // Close language menu when clicking outside
     useEffect(() => {
-        const timer = setTimeout(() => {
-            if (!hasInteracted && size !== "xs") {
-                setSize("xs");
+        if (!showLanguageMenu)
+            return;
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (!target.closest('[data-language-menu]')) {
+                setShowLanguageMenu(false);
             }
-        }, 12000);
-        return () => clearTimeout(timer);
-    }, [hasInteracted, size]);
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [showLanguageMenu]);
+    // Language change handler with persistence
+    const handleLanguageChange = (lang) => {
+        setSelectedLanguage(lang);
+        setShowLanguageMenu(false);
+        // Persist to localStorage
+        if (typeof window !== 'undefined') {
+            localStorage.setItem('goji-language', lang);
+        }
+        // Reload suggestions for new language
+        client.getSuggestions({ language: lang })
+            .then(res => {
+            if (Array.isArray(res?.suggestions) && res.suggestions.length > 0) {
+                setBackendSuggestedQuestions(res.suggestions);
+            }
+        })
+            .catch(e => console.error("Failed to fetch suggestions", e));
+    };
     useEffect(() => {
+        // Load initial suggestions and default language from backend on mount (ONLY ONCE)
+        (async () => {
+            try {
+                // Fetch suggestions with initial language (en)
+                const res = await client.getSuggestions({ language: 'en' });
+                // Check if backend provides a different default language
+                if (res?.default_language && typeof res.default_language === 'string') {
+                    const backendDefaultLang = res.default_language.toLowerCase().trim();
+                    // Validate it's a supported language
+                    if (companyConfig.languages[backendDefaultLang]) {
+                        // Set the language FIRST
+                        setSelectedLanguage(backendDefaultLang);
+                        // Then fetch suggestions for the correct language
+                        if (backendDefaultLang !== 'en') {
+                            const langRes = await client.getSuggestions({ language: backendDefaultLang });
+                            if (Array.isArray(langRes?.suggestions) && langRes.suggestions.length > 0) {
+                                setBackendSuggestedQuestions(langRes.suggestions);
+                            }
+                        }
+                        else {
+                            // Use English suggestions
+                            if (Array.isArray(res?.suggestions) && res.suggestions.length > 0) {
+                                setBackendSuggestedQuestions(res.suggestions);
+                            }
+                        }
+                    }
+                }
+                else {
+                    // No default language override, use English suggestions
+                    if (Array.isArray(res?.suggestions) && res.suggestions.length > 0) {
+                        setBackendSuggestedQuestions(res.suggestions);
+                    }
+                }
+            }
+            catch (e) {
+                // Silent fail; UI will simply show empty inspiration until chat flows populate
+                console.error("Failed to fetch suggestions", e);
+            }
+        })();
         return () => {
             if (streamingCancelRef.current) {
                 streamingCancelRef.current();
             }
-            gojiClient.closeWebSocket();
+            client.closeWebSocket();
         };
-    }, []);
+    }, [client]);
     const handleSearch = async (e) => {
         e.preventDefault();
         if (!searchQuery.trim() || isStreaming)
@@ -73,11 +144,11 @@ export function GojiSearchComponent() {
         setMessages((prev) => [...prev, { role: "assistant", content: "", timestamp: Date.now() }]);
         let accumulatedContent = "";
         try {
-            const cancelFn = await gojiClient.streamChat({
+            const cancelFn = await client.streamChat({
                 message: userMessage.content,
                 sessionId,
                 limit: 5,
-                language: "en",
+                language: currentLanguage,
                 onDelta: (delta) => {
                     accumulatedContent += delta;
                     setMessages((prev) => {
@@ -95,10 +166,15 @@ export function GojiSearchComponent() {
                         const updated = [...prev];
                         updated[assistantMessageIndex] = {
                             ...updated[assistantMessageIndex],
+                            content: response.answer,
                             sources: response.sources,
                         };
                         return updated;
                     });
+                    // Update suggested questions from backend
+                    if (response.suggested_questions && response.suggested_questions.length > 0) {
+                        setBackendSuggestedQuestions(response.suggested_questions);
+                    }
                     setIsStreaming(false);
                     streamingCancelRef.current = null;
                 },
@@ -138,11 +214,11 @@ export function GojiSearchComponent() {
         setMessages((prev) => [...prev, { role: "assistant", content: "", timestamp: Date.now() }]);
         let accumulatedContent = "";
         try {
-            const cancelFn = await gojiClient.streamChat({
+            const cancelFn = await client.streamChat({
                 message: question,
                 sessionId,
                 limit: 5,
-                language: "en",
+                language: currentLanguage,
                 onDelta: (delta) => {
                     accumulatedContent += delta;
                     setMessages((prev) => {
@@ -160,10 +236,15 @@ export function GojiSearchComponent() {
                         const updated = [...prev];
                         updated[assistantMessageIndex] = {
                             ...updated[assistantMessageIndex],
+                            content: response.answer,
                             sources: response.sources,
                         };
                         return updated;
                     });
+                    // Update suggested questions from backend
+                    if (response.suggested_questions && response.suggested_questions.length > 0) {
+                        setBackendSuggestedQuestions(response.suggested_questions);
+                    }
                     setIsStreaming(false);
                     streamingCancelRef.current = null;
                 },
@@ -193,8 +274,130 @@ export function GojiSearchComponent() {
         setSize("xs");
         setShowCalendar(false);
     };
-    const handleVoiceSearch = () => {
-        console.log("Voice search activated");
+    const handleVoiceSearch = async () => {
+        try {
+            if (typeof window === "undefined")
+                return;
+            if (isRecording) {
+                try {
+                    mediaRecorderRef.current?.stop();
+                }
+                catch (_) { }
+                setIsRecording(false);
+                return;
+            }
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            const recorder = new MediaRecorder(stream);
+            mediaRecorderRef.current = recorder;
+            audioChunksRef.current = [];
+            recorder.ondataavailable = (e) => {
+                if (e.data && e.data.size > 0) {
+                    audioChunksRef.current.push(e.data);
+                }
+            };
+            recorder.onstop = async () => {
+                try {
+                    const blob = new Blob(audioChunksRef.current, { type: "audio/webm" });
+                    // Send to backend for transcription
+                    const language = companyConfig.defaultLanguage || "en";
+                    const result = await client.transcribeAudio({
+                        file: blob,
+                        filename: "recording.webm",
+                        model: "gpt-4o-transcribe",
+                        language,
+                    });
+                    const text = (result?.text || "").trim();
+                    if (!text)
+                        return;
+                    // Auto-submit the transcribed text
+                    const userMessage = {
+                        role: "user",
+                        content: text,
+                        timestamp: Date.now(),
+                    };
+                    setMessages((prev) => [...prev, userMessage]);
+                    setSearchQuery("");
+                    setSize((prev) => (prev === "xl" ? "xl" : "l"));
+                    setIsStreaming(true);
+                    const assistantMessageIndex = messages.length + 1;
+                    setMessages((prev) => [...prev, { role: "assistant", content: "", timestamp: Date.now() }]);
+                    let accumulatedContent = "";
+                    try {
+                        const cancelFn = await client.streamChat({
+                            message: userMessage.content,
+                            sessionId,
+                            limit: 5,
+                            language: currentLanguage,
+                            onDelta: (delta) => {
+                                accumulatedContent += delta;
+                                setMessages((prev) => {
+                                    const updated = [...prev];
+                                    updated[assistantMessageIndex] = {
+                                        ...updated[assistantMessageIndex],
+                                        content: accumulatedContent,
+                                    };
+                                    return updated;
+                                });
+                            },
+                            onDone: (response) => {
+                                setSessionId(response.session_id);
+                                setMessages((prev) => {
+                                    const updated = [...prev];
+                                    updated[assistantMessageIndex] = {
+                                        ...updated[assistantMessageIndex],
+                                        content: response.answer,
+                                        sources: response.sources,
+                                    };
+                                    return updated;
+                                });
+                                // Update suggested questions from backend
+                                if (response.suggested_questions && response.suggested_questions.length > 0) {
+                                    setBackendSuggestedQuestions(response.suggested_questions);
+                                }
+                                setIsStreaming(false);
+                                streamingCancelRef.current = null;
+                            },
+                            onError: (error) => {
+                                console.error(" Streaming error:", error);
+                                setMessages((prev) => {
+                                    const updated = [...prev];
+                                    updated[assistantMessageIndex] = {
+                                        ...updated[assistantMessageIndex],
+                                        content: "I'm sorry, I encountered an error. Please try again.",
+                                    };
+                                    return updated;
+                                });
+                                setIsStreaming(false);
+                                streamingCancelRef.current = null;
+                            },
+                        });
+                        streamingCancelRef.current = cancelFn;
+                    }
+                    catch (error) {
+                        console.error(" Failed to start streaming:", error);
+                        setIsStreaming(false);
+                    }
+                }
+                catch (err) {
+                    console.error("Transcription failed:", err);
+                }
+                finally {
+                    // Cleanup audio tracks
+                    try {
+                        mediaRecorderRef.current?.stream?.getTracks?.().forEach((t) => t.stop());
+                    }
+                    catch (_) { }
+                    mediaRecorderRef.current = null;
+                    audioChunksRef.current = [];
+                }
+            };
+            recorder.start(250);
+            setIsRecording(true);
+        }
+        catch (err) {
+            console.error("Voice search failed:", err);
+            setIsRecording(false);
+        }
     };
     const handleToggle = () => {
         setHasInteracted(true);
@@ -268,7 +471,7 @@ export function GojiSearchComponent() {
     };
     const handleCalendarClick = () => {
         setShowCalendar(true);
-        setSize("l");
+        setSize("xl");
     };
     const handleBackToChat = () => {
         setShowCalendar(false);
@@ -277,8 +480,8 @@ export function GojiSearchComponent() {
         xs: { maxWidth: "5.5rem", bottom: "0.5rem", padding: "0" },
         s: { maxWidth: "25.5rem", bottom: "0.5rem", padding: "0" },
         m: { maxWidth: "30rem", bottom: "0.75rem", padding: "0.25rem" },
-        l: { maxWidth: "45vw", bottom: "1.25rem", padding: "1rem" },
-        xl: { maxWidth: "70vw", bottom: "1.5rem", padding: "1.25rem" },
+        l: { maxWidth: "45vw", bottom: "1.25rem", padding: "0.5rem" },
+        xl: { maxWidth: "70vw", bottom: "1.5rem", padding: "0.75rem" },
     };
     const currentConfig = sizeConfig[size];
     return (_jsx("div", { style: {
@@ -298,6 +501,8 @@ export function GojiSearchComponent() {
                     border: size === "xs" || size === "s" ? "none" : "1px solid rgba(85, 85, 85, 0.18)",
                     backgroundColor: size === "xs" || size === "s" ? "transparent" : "rgba(233, 210, 251, 0.15)",
                     padding: size === "s" ? "0" : currentConfig.padding,
+                    // remove top padding so inner message list / calendar sit flush with the component border
+                    paddingTop: 0,
                     height: size === "l" ? "55vh" : size === "xl" ? "70vh" : "auto",
                     display: "flex",
                     flexDirection: "column",
@@ -310,77 +515,76 @@ export function GojiSearchComponent() {
                     backdropFilter: size === "xs" || size === "s" ? "none" : "blur(40px) saturate(180%) brightness(110%)",
                     WebkitBackdropFilter: size === "xs" || size === "s" ? "none" : "blur(40px) saturate(180%) brightness(110%)",
                     transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-                }, children: [(size === "m" || size === "l" || size === "xl") && (_jsx("div", { style: {
+                }, children: [["m", "l", "xl"].includes(size) && (_jsx("div", { style: {
                             position: "absolute",
-                            top: size === "m" ? "0.5rem" : "0.75rem",
-                            right: size === "m" ? "0.5rem" : "0.75rem",
+                            top: 0,
+                            right: "0.5rem",
                             zIndex: 50,
+                            paddingBottom: "0.5rem",
                         }, children: _jsx("div", { style: {
                                 position: "relative",
-                                // show the top-right controls when we have no messages OR when in compact (m) mode OR when calendar is open
-                                // but hide them when only suggested questions are shown (messages.length === 0 && showSuggestions)
-                                display: (size === 'm' || messages.length === 0 || showCalendar) && !(messages.length === 0 && showSuggestions) ? 'inline-flex' : 'none',
+                                display: 'flex',
                                 gap: '0.5rem',
                                 alignItems: 'center',
-                            }, children: _jsxs("div", { style: { display: 'inline-flex', gap: '0.375rem', alignItems: 'center' }, children: [_jsxs("div", { style: { position: 'relative' }, children: [_jsx("button", { type: "button", onClick: handleExpandToggle, onMouseEnter: () => setHoverTopExpand(true), onMouseLeave: () => setHoverTopExpand(false), "aria-label": size === 'xl' ? 'Restore' : 'Expand', "aria-describedby": hoverTopExpand ? expandTooltipId : undefined, style: {
-                                                    borderRadius: '1.3rem',
-                                                    border: '1px solid rgba(255, 255, 255, 0.3)',
-                                                    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-                                                    padding: '0.375rem',
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'center',
-                                                    color: 'rgba(0, 0, 0, 0.75)',
-                                                    transition: 'all 0.2s',
-                                                    cursor: 'pointer',
-                                                    outline: 'none',
-                                                    boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.3)',
-                                                }, children: size === 'xl' ? _jsx(Minimize2, { style: { width: '0.9rem', height: '0.9rem' } }) : _jsx(Maximize2, { style: { width: '0.9rem', height: '0.9rem' } }) }), _jsx("span", { id: expandTooltipId, role: "tooltip", style: {
-                                                    position: 'absolute',
-                                                    top: 'calc(100% + 0.4rem)',
-                                                    left: '50%',
-                                                    transform: 'translateX(-50%)',
-                                                    whiteSpace: 'nowrap',
-                                                    background: 'rgba(0,0,0,0.9)',
-                                                    color: '#fff',
-                                                    padding: '4px 6px',
-                                                    borderRadius: '1.3rem',
-                                                    fontSize: '0.55rem',
-                                                    boxShadow: '0 6px 18px rgba(0,0,0,0.35)',
+                                justifyContent: 'flex-end',
+                                zIndex: 20,
+                                paddingRight: "0.3rem",
+                                backgroundColor: "transparent",
+                                borderRadius: "0.75rem",
+                            }, children: _jsxs("div", { style: {
+                                    display: "flex",
+                                    gap: "0.375rem",
+                                    alignItems: "center",
+                                    padding: "0.3rem 0 0.5rem 0",
+                                }, children: [_jsxs("div", { style: { position: "relative" }, children: [_jsx("button", { type: "button", onClick: handleExpandToggle, onMouseEnter: () => setHoverTopExpand(true), onMouseLeave: () => setHoverTopExpand(false), "aria-label": size === "xl" ? "Restore" : "Expand", "aria-describedby": hoverTopExpand ? expandTooltipId : undefined, style: {
+                                                    padding: "0.375rem",
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    justifyContent: "center",
+                                                    color: "rgba(0, 0, 0, 0.75)",
+                                                    transition: "all 0.15s",
+                                                    cursor: "pointer",
+                                                    outline: "none",
+                                                }, children: size === "xl" ? (_jsx(Minimize2, { style: { width: "0.9rem", height: "0.9rem" } })) : (_jsx(Maximize2, { style: { width: "0.9rem", height: "0.9rem" } })) }), _jsx("span", { id: expandTooltipId, role: "tooltip", style: {
+                                                    position: "absolute",
+                                                    top: "calc(100% + 0.4rem)",
+                                                    left: "50%",
+                                                    transform: "translateX(-50%)",
+                                                    whiteSpace: "nowrap",
+                                                    background: "rgba(0,0,0,0.9)",
+                                                    color: "#fff",
+                                                    padding: "4px 6px",
+                                                    borderRadius: "1.3rem",
+                                                    fontSize: "0.55rem",
+                                                    boxShadow: "0 6px 18px rgba(0,0,0,0.35)",
                                                     opacity: hoverTopExpand ? 1 : 0,
-                                                    pointerEvents: 'none',
-                                                    transition: 'opacity 120ms ease-in-out',
+                                                    pointerEvents: "none",
+                                                    transition: "opacity 120ms ease-in-out",
                                                     zIndex: 30,
-                                                }, children: size === 'xl' ? 'Restore' : 'Expand' })] }), _jsxs("div", { style: { position: 'relative' }, children: [_jsx("button", { type: "button", onClick: handleClose, onMouseEnter: () => setHoverTopClose(true), onMouseLeave: () => setHoverTopClose(false), "aria-label": "Close", "aria-describedby": hoverTopClose ? xTooltipId : undefined, style: {
-                                                    borderRadius: "1.3rem",
-                                                    border: "1px solid rgba(255, 255, 255, 0.3)",
-                                                    backgroundColor: "rgba(255, 255, 255, 0.2)",
-                                                    padding: "0.4rem",
+                                                }, children: size === "xl" ? "Restore" : "Expand" })] }), _jsxs("div", { style: { position: "relative" }, children: [_jsx("button", { type: "button", onClick: handleClose, onMouseEnter: () => setHoverTopClose(true), onMouseLeave: () => setHoverTopClose(false), "aria-label": "Close", "aria-describedby": hoverTopClose ? xTooltipId : undefined, style: {
+                                                    padding: "0.375rem",
                                                     display: "flex",
                                                     alignItems: "center",
                                                     justifyContent: "center",
                                                     color: "rgba(0, 0, 0, 0.75)",
-                                                    backdropFilter: "blur(20px)",
-                                                    WebkitBackdropFilter: "blur(20px)",
-                                                    transition: "all 0.2s",
+                                                    transition: "all 0.15s",
                                                     cursor: "pointer",
                                                     outline: "none",
-                                                    boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.3)",
-                                                }, children: _jsx(X, { style: { width: "0.875rem", height: "0.875rem" } }) }), _jsx("span", { id: xTooltipId, role: "tooltip", style: {
-                                                    position: 'absolute',
-                                                    top: 'calc(100% + 0.4rem)',
-                                                    left: '50%',
-                                                    transform: 'translateX(-50%)',
-                                                    whiteSpace: 'nowrap',
-                                                    background: 'rgba(0,0,0,0.9)',
-                                                    color: '#fff',
-                                                    padding: '4px 6px',
-                                                    borderRadius: '1.3rem',
-                                                    fontSize: '0.55rem',
-                                                    boxShadow: '0 6px 18px rgba(0,0,0,0.35)',
+                                                }, children: _jsx(X, { style: { width: "0.9rem", height: "0.9rem" } }) }), _jsx("span", { id: xTooltipId, role: "tooltip", style: {
+                                                    position: "absolute",
+                                                    top: "calc(100% + 0.4rem)",
+                                                    left: "50%",
+                                                    transform: "translateX(-50%)",
+                                                    whiteSpace: "nowrap",
+                                                    background: "rgba(0,0,0,0.9)",
+                                                    color: "#fff",
+                                                    padding: "4px 6px",
+                                                    borderRadius: "1.3rem",
+                                                    fontSize: "0.55rem",
+                                                    boxShadow: "0 6px 18px rgba(0,0,0,0.35)",
                                                     opacity: hoverTopClose ? 1 : 0,
-                                                    pointerEvents: 'none',
-                                                    transition: 'opacity 120ms ease-in-out',
+                                                    pointerEvents: "none",
+                                                    transition: "opacity 120ms ease-in-out",
                                                     zIndex: 30,
                                                 }, children: "Close" })] })] }) }) })), size === "xs" ? (_jsx("button", { type: "button", onClick: handleToggle, style: {
                             background: "transparent",
@@ -401,29 +605,21 @@ export function GojiSearchComponent() {
                                         display: "flex",
                                         alignItems: "center",
                                         justifyContent: "center",
-                                        padding: "0.5rem",
-                                        borderRadius: "0.5rem",
-                                        border: "1px solid rgba(255, 255, 255, 0.3)",
-                                        backgroundColor: "rgba(255, 255, 255, 0.2)",
+                                        padding: "0.3rem 0 0.5rem 0.3rem",
                                         color: "rgba(0, 0, 0, 0.75)",
                                         cursor: "pointer",
                                         transition: "all 0.2s",
                                         alignSelf: "flex-start",
-                                        width: "2.5rem",
-                                        height: "2.5rem",
-                                    }, onMouseEnter: (e) => {
-                                        e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
-                                    }, onMouseLeave: (e) => {
-                                        e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
-                                    }, children: _jsx(ArrowLeft, { style: { width: "1.125rem", height: "1.125rem" } }) }), _jsx("div", { style: {
+                                        outline: "none",
+                                    }, children: _jsx(ArrowLeft, { style: { width: "0.875rem", height: "0.875rem" } }) }), _jsx("div", { style: {
                                         flex: 1,
                                         borderRadius: "0.75rem",
                                         overflow: "hidden",
-                                        backgroundColor: "rgba(255, 255, 255, 0.5)",
+                                        backgroundColor: "transparent",
                                         minHeight: 0,
                                         display: "flex",
                                         flexDirection: "column",
-                                    }, children: _jsx(CalendarIntegration, { onBooked: handleBackToChat }) })] })) : (_jsxs(_Fragment, { children: [(size === "l" || size === "xl") && messages.length > 0 && (_jsx(MessageList, { messages: messages, isStreaming: isStreaming, aiAvatarSrc: undefined, onClose: handleClose, onExpand: handleExpandToggle, size: size })), size === "s" ? (_jsxs("div", { style: {
+                                    }, children: _jsx(CalendarIntegration, { onBooked: handleBackToChat }) })] })) : (_jsxs(_Fragment, { children: [(size === "l" || size === "xl") && messages.length > 0 && (_jsx(MessageList, { messages: messages, isStreaming: isStreaming, aiAvatarSrc: chatLogo, size: size })), size === "s" ? (_jsxs("div", { style: {
                                         display: "flex",
                                         alignItems: "center",
                                         gap: "0.35rem",
@@ -443,7 +639,7 @@ export function GojiSearchComponent() {
                                                 flexDirection: "column",
                                                 gap: "0.35rem",
                                                 flex: 1,
-                                                backgroundColor: "rgba(233, 210, 251, 0.15)",
+                                                backgroundColor: "transparent",
                                                 borderRadius: "1.5rem",
                                                 border: "1px solid rgba(85, 85, 85, 0.18)",
                                                 boxShadow: "0 4px 24px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.3)",
@@ -456,16 +652,13 @@ export function GojiSearchComponent() {
                                                     gap: "0.375rem",
                                                     transition: "gap 0.3s ease",
                                                     flexShrink: 0,
-                                                }, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(SearchInput, { value: searchQuery, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: "Search...", size: size, inputRef: inputRef, inspirationQuestions: inspirationQuestions, onInspirationClick: handleSuggestionClick, sparkleRef: sparkleRef }) }), _jsx(ActionButtons, { size: size, isHovered: isHovered, isStreaming: isStreaming, searchQuery: searchQuery, onSubmit: () => { }, onVoiceSearch: handleVoiceSearch, onClose: handleClose, onCalendarClick: handleCalendarClick })] }) })] })) : (_jsxs("div", { onMouseEnter: handleInputAreaMouseEnter, onMouseLeave: handleInputAreaMouseLeave, style: {
+                                                }, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(SearchInput, { value: searchQuery, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: "Search...", size: size, inputRef: inputRef, inspirationQuestions: inspirationQuestions, onInspirationClick: handleSuggestionClick, sparkleRef: sparkleRef }) }), _jsx(ActionButtons, { size: size, isHovered: isHovered, isStreaming: isStreaming, searchQuery: searchQuery, isRecording: isRecording, onSubmit: () => { }, onVoiceSearch: handleVoiceSearch, onClose: handleClose, onCalendarClick: handleCalendarClick })] }) })] })) : (_jsxs("div", { onMouseEnter: handleInputAreaMouseEnter, onMouseLeave: handleInputAreaMouseLeave, style: {
                                         display: "flex",
                                         flexDirection: "column",
                                         gap: "0.5rem",
-                                        paddingTop: size === "m" ? "0.5rem" : "0.75rem",
+                                        paddingTop: 0,
                                     }, children: [_jsx("button", { type: "button", onClick: handleClose, style: {
-                                                borderRadius: "1.3rem",
-                                                border: "1px solid rgba(255, 255, 255, 0.3)",
-                                                backgroundColor: "rgba(255, 255, 255, 0.2)",
-                                                padding: "0.4rem",
+                                                padding: " 0 0.4rem",
                                                 // rendered only when size !== 'xs' so show the button
                                                 display: size === 'm' ? "flex" : "none",
                                                 alignItems: "center",
@@ -473,12 +666,9 @@ export function GojiSearchComponent() {
                                                 alignSelf: "flex-end",
                                                 width: "fit-content",
                                                 color: "rgba(0, 0, 0, 0.75)",
-                                                backdropFilter: "blur(20px)",
-                                                WebkitBackdropFilter: "blur(20px)",
                                                 transition: "all 0.2s",
                                                 cursor: "pointer",
-                                                outline: "none",
-                                                boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.3)",
+                                                outline: "none"
                                             }, children: _jsx(X, { style: { width: "0.875rem", height: "0.875rem" } }) }), _jsx("span", { role: "tooltip", style: {
                                                 position: "absolute",
                                                 top: "calc(100% + 0.4rem)",
@@ -495,11 +685,11 @@ export function GojiSearchComponent() {
                                                 pointerEvents: "none",
                                                 transition: "opacity 120ms ease-in-out",
                                                 zIndex: 30,
-                                            }, children: "Close" }), showSuggestions && messages.length === 0 && !searchQuery && (_jsx(SuggestedQuestions, { questions: suggestedQuestions, onQuestionClick: handleSuggestionClick })), _jsxs("form", { onSubmit: handleSearch, style: {
+                                            }, children: "Close" }), showSuggestions && messages.length === 0 && !searchQuery && (_jsx(SuggestedQuestions, { questions: inspirationQuestions, onQuestionClick: handleSuggestionClick })), _jsxs("form", { onSubmit: handleSearch, style: {
                                                 display: "flex",
                                                 alignItems: "center",
                                                 gap: "0.375rem",
                                                 transition: "gap 0.3s ease",
                                                 flexShrink: 0,
-                                            }, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(SearchInput, { value: searchQuery, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: "Ask me anything...", size: size, inputRef: inputRef, inspirationQuestions: inspirationQuestions, onInspirationClick: handleSuggestionClick, sparkleRef: sparkleRef }) }), _jsx(ActionButtons, { size: size, isHovered: isHovered, isStreaming: isStreaming, searchQuery: searchQuery, onSubmit: () => { }, onVoiceSearch: handleVoiceSearch, onClose: handleClose, onCalendarClick: handleCalendarClick })] })] }))] })) }))] }) }) }));
+                                            }, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(SearchInput, { value: searchQuery, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: "Ask me anything...", size: size, inputRef: inputRef, inspirationQuestions: inspirationQuestions, onInspirationClick: handleSuggestionClick, sparkleRef: sparkleRef }) }), _jsx(ActionButtons, { size: size, isHovered: isHovered, isStreaming: isStreaming, searchQuery: searchQuery, isRecording: isRecording, onSubmit: () => { }, onVoiceSearch: handleVoiceSearch, onClose: handleClose, onCalendarClick: handleCalendarClick })] })] }))] })) }))] }) }) }));
 }

package/dist/goji-search/config/company.d.ts

@@ -8,7 +8,6 @@ interface LanguageConfig {
         title: string;
         description: string;
     };
-    suggestedPrompts: string[];
     headerSubtitleExpanded: string;
     headerSubtitleCollapsed: string;
     sourcesLabel: string;