goji-search 1.0.1 → 1.1.2

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

@@ -1,34 +1,44 @@
+"use client";
 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 { SuggestedQuestions } from "./elements/suggested-questions";
+import { useState, useEffect, useRef, useId, useMemo } from "react";
 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);
     const [messages, setMessages] = useState([]);
     const [isStreaming, setIsStreaming] = useState(false);
-    const [showSuggestions, setShowSuggestions] = useState(false);
     const [showCalendar, setShowCalendar] = useState(false);
     const [sessionId, setSessionId] = useState();
-    const [hasInteracted, setHasInteracted] = useState(false);
     const inputRef = useRef(null);
     const sparkleRef = useRef(null);
     const streamingCancelRef = useRef(null);
-    const [isInputHovered, setIsInputHovered] = useState(false);
+    const mediaRecorderRef = useRef(null);
+    const audioChunksRef = useRef([]);
+    const componentRef = useRef(null);
     const [hoverTopExpand, setHoverTopExpand] = useState(false);
     const [hoverTopClose, setHoverTopClose] = useState(false);
-    const currentLanguage = companyConfig.defaultLanguage;
+    const [isRecording, setIsRecording] = useState(false);
+    const [backendSuggestedQuestions, setBackendSuggestedQuestions] = useState(null);
+    const mouseLeaveTimeoutRef = useRef(null);
+    const mouseEnterTimeoutRef = useRef(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,97 @@ 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]);
+    useEffect(() => {
+        if (size === "xs")
+            return;
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (componentRef.current && !componentRef.current.contains(target)) {
+                handleClose();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [size]);
     const handleSearch = async (e) => {
         e.preventDefault();
         if (!searchQuery.trim() || isStreaming)
@@ -73,11 +158,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 +180,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;
                 },
@@ -124,7 +214,6 @@ export function GojiSearchComponent() {
         }
     };
     const handleSuggestionClick = async (question) => {
-        setShowSuggestions(false);
         const userMessage = {
             role: "user",
             content: question,
@@ -138,11 +227,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 +249,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;
                 },
@@ -192,12 +286,134 @@ export function GojiSearchComponent() {
         setSearchQuery("");
         setSize("xs");
         setShowCalendar(false);
+        setHoverTopClose(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);
         if (size === "xs") {
             setSize(messages.length > 0 ? "l" : "s");
         }
@@ -213,53 +429,52 @@ export function GojiSearchComponent() {
         else {
             setSize("xl");
         }
+        setHoverTopExpand(false);
     };
     const handleInputFocus = () => {
-        setHasInteracted(true);
         if (messages.length > 0) {
             // if currently xl, keep xl; otherwise go to l
             setSize((prev) => (prev === "xl" ? "xl" : "l"));
         }
         else {
             setSize("m");
-            setShowSuggestions(true);
-        }
-    };
-    const handleInputAreaMouseEnter = () => {
-        setHasInteracted(true);
-        setIsInputHovered(true);
-        if (messages.length === 0 && !searchQuery) {
-            setShowSuggestions(true);
         }
     };
-    const handleInputAreaMouseLeave = () => {
-        setIsInputHovered(false);
-        setShowSuggestions(false);
-    };
     const handleInputChange = (e) => {
         setSearchQuery(e.target.value);
         if (e.target.value && size === "s") {
             setSize("m");
         }
-        if (e.target.value.length > 0 && messages.length === 0) {
-            setShowSuggestions(true);
-        }
-        else {
-            setShowSuggestions(false);
-        }
     };
     const handleMouseEnter = () => {
-        setHasInteracted(true);
         setIsHovered(true);
-        if (size === "s") {
-            setSize("m");
+        if (mouseLeaveTimeoutRef.current) {
+            clearTimeout(mouseLeaveTimeoutRef.current);
+            mouseLeaveTimeoutRef.current = null;
         }
+        if (mouseEnterTimeoutRef.current) {
+            clearTimeout(mouseEnterTimeoutRef.current);
+            mouseEnterTimeoutRef.current = null;
+        }
+        mouseEnterTimeoutRef.current = setTimeout(() => {
+            if (size === "s") {
+                setSize("m");
+            }
+            mouseEnterTimeoutRef.current = null;
+        }, 100);
     };
     const handleMouseLeave = () => {
         setIsHovered(false);
-        if (size === "m" && !searchQuery && messages.length === 0) {
-            setSize("s");
+        if (mouseEnterTimeoutRef.current) {
+            clearTimeout(mouseEnterTimeoutRef.current);
+            mouseEnterTimeoutRef.current = null;
         }
+        mouseLeaveTimeoutRef.current = setTimeout(() => {
+            if (size === "m" && !searchQuery && messages.length === 0) {
+                setSize("s");
+            }
+            mouseLeaveTimeoutRef.current = null;
+        }, 150);
     };
     const handleInputBlur = () => {
         if (!searchQuery && messages.length === 0) {
@@ -268,7 +483,7 @@ export function GojiSearchComponent() {
     };
     const handleCalendarClick = () => {
         setShowCalendar(true);
-        setSize("l");
+        setSize("xl");
     };
     const handleBackToChat = () => {
         setShowCalendar(false);
@@ -277,8 +492,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: {
@@ -289,15 +504,17 @@ export function GojiSearchComponent() {
             zIndex: 50,
             padding: "0.7rem",
             transition: "bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsx("div", { style: {
+        }, children: _jsx("div", { style: {
                 maxWidth: currentConfig.maxWidth,
                 margin: "0 auto",
                 transition: "max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-            }, children: _jsxs("div", { style: {
+            }, children: _jsxs("div", { ref: componentRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: {
                     borderRadius: size === "xs" ? "0.75rem" : "1rem",
                     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)",
+                    backgroundColor: size === "xs" || size === "s" ? "transparent" : "rgba(245, 245, 250, 0.12)",
                     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 +527,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',
-                                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)',
+                                display: ((size === "l" || size === "xl") && messages.length > 0) || showCalendar ? "flex" : "none",
+                                gap: "0.5rem",
+                                alignItems: "center",
+                                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",
@@ -396,34 +612,26 @@ export function GojiSearchComponent() {
                             display: "flex",
                             flexDirection: "column",
                             gap: "0.75rem",
-                            height: "100%"
+                            height: "100%",
                         }, children: showCalendar ? (_jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.75rem", minHeight: 0 }, children: [_jsx("button", { type: "button", onClick: handleBackToChat, style: {
                                         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",
@@ -438,12 +646,12 @@ export function GojiSearchComponent() {
                                                 cursor: "pointer",
                                                 outline: "none",
                                                 flexShrink: 0,
-                                            }, children: _jsxs("div", { className: "ai", children: [_jsxs("div", { className: "container-ai", children: [_jsx("div", { className: "c c4" }), _jsx("div", { className: "c c1" }), _jsx("div", { className: "c c2" }), _jsx("div", { className: "c c3" }), _jsx("div", { className: "rings-ai", children: _jsx("div", { className: "rings-ai" }) })] }), _jsx("div", { className: "glass-ai" })] }) }), _jsx("div", { onMouseEnter: handleInputAreaMouseEnter, onMouseLeave: handleInputAreaMouseLeave, style: {
+                                            }, children: _jsxs("div", { className: "ai", children: [_jsxs("div", { className: "container-ai", children: [_jsx("div", { className: "c c4" }), _jsx("div", { className: "c c1" }), _jsx("div", { className: "c c2" }), _jsx("div", { className: "c c3" }), _jsx("div", { className: "rings-ai", children: _jsx("div", { className: "rings-ai" }) })] }), _jsx("div", { className: "glass-ai" })] }) }), _jsx("div", { style: {
                                                 display: "flex",
                                                 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,50 +664,16 @@ 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, setSize: setSize, inputRef: inputRef, inspirationQuestions: inspirationQuestions, onInspirationClick: handleSuggestionClick, sparkleRef: sparkleRef, suggestedLabel: languageConfig.suggested }) }), _jsx(ActionButtons, { size: size, isHovered: isHovered, isStreaming: isStreaming, searchQuery: searchQuery, isRecording: isRecording, onSubmit: () => { }, onVoiceSearch: handleVoiceSearch, onClose: handleClose, onCalendarClick: handleCalendarClick })] }) })] })) : (_jsx("div", { style: {
                                         display: "flex",
                                         flexDirection: "column",
                                         gap: "0.5rem",
-                                        paddingTop: size === "m" ? "0.5rem" : "0.75rem",
-                                    }, 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",
-                                                // rendered only when size !== 'xs' so show the button
-                                                display: size === 'm' ? "flex" : "none",
-                                                alignItems: "center",
-                                                justifyContent: "center",
-                                                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)",
-                                            }, children: _jsx(X, { style: { width: "0.875rem", height: "0.875rem" } }) }), _jsx("span", { 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: 0,
-                                                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: {
-                                                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 })] })] }))] })) }))] }) }) }));
+                                        paddingTop: 0,
+                                    }, children: _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, setSize: setSize, inputRef: inputRef, inspirationQuestions: inspirationQuestions, onInspirationClick: handleSuggestionClick, sparkleRef: sparkleRef, suggestedLabel: languageConfig.suggested }) }), _jsx(ActionButtons, { size: size, isHovered: isHovered, isStreaming: isStreaming, searchQuery: searchQuery, isRecording: isRecording, onSubmit: () => { }, onVoiceSearch: handleVoiceSearch, onClose: handleClose, onCalendarClick: handleCalendarClick })] }) }))] })) }))] }) }) }));
 }