goji-search 1.1.4 → 2.0.0

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

@@ -1,679 +0,0 @@
-"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, 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 { createGojiClient } from "../lib/goji-client";
-import { companyConfig } from "../config/company";
-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 [showCalendar, setShowCalendar] = useState(false);
-    const [sessionId, setSessionId] = useState();
-    const inputRef = useRef(null);
-    const sparkleRef = useRef(null);
-    const streamingCancelRef = useRef(null);
-    const mediaRecorderRef = useRef(null);
-    const audioChunksRef = useRef([]);
-    const componentRef = useRef(null);
-    const [hoverTopExpand, setHoverTopExpand] = useState(false);
-    const [hoverTopClose, setHoverTopClose] = useState(false);
-    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];
-    // Use backend-provided questions only (no hardcoded prompts)
-    const inspirationQuestions = backendSuggestedQuestions || [];
-    const idBase = useId();
-    const xTooltipId = `${idBase}-x-tip`;
-    const expandTooltipId = `${idBase}-expand-tip`;
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            setSize("s");
-        }, 4000);
-        return () => clearTimeout(timer);
-    }, []);
-    // Close language menu when clicking outside
-    useEffect(() => {
-        if (!showLanguageMenu)
-            return;
-        const handleClickOutside = (e) => {
-            const target = e.target;
-            if (!target.closest("[data-language-menu]")) {
-                setShowLanguageMenu(false);
-            }
-        };
-        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();
-            }
-            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)
-            return;
-        const userMessage = {
-            role: "user",
-            content: searchQuery.trim(),
-            timestamp: Date.now(),
-        };
-        setMessages((prev) => [...prev, userMessage]);
-        setSearchQuery("");
-        // don't force-shrink xl -> l; only set to l if not currently xl
-        setSize((prev) => (prev === "xl" ? "xl" : "l"));
-        setIsStreaming(true);
-        // Create placeholder for assistant message
-        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);
-        }
-    };
-    const handleSuggestionClick = async (question) => {
-        const userMessage = {
-            role: "user",
-            content: question,
-            timestamp: Date.now(),
-        };
-        setMessages((prev) => [...prev, userMessage]);
-        // preserve xl if already expanded
-        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: question,
-                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);
-        }
-    };
-    const handleClose = () => {
-        setSearchQuery("");
-        setSize("xs");
-        setShowCalendar(false);
-        setHoverTopClose(false);
-    };
-    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 = () => {
-        if (size === "xs") {
-            setSize(messages.length > 0 ? "l" : "s");
-        }
-        else {
-            setSize("xs");
-        }
-    };
-    const handleExpandToggle = () => {
-        // toggle between large and extra-large
-        if (size === "xl") {
-            setSize("l");
-        }
-        else {
-            setSize("xl");
-        }
-        setHoverTopExpand(false);
-    };
-    const handleInputFocus = () => {
-        if (messages.length > 0) {
-            // if currently xl, keep xl; otherwise go to l
-            setSize((prev) => (prev === "xl" ? "xl" : "l"));
-        }
-        else {
-            setSize("m");
-        }
-    };
-    const handleInputChange = (e) => {
-        setSearchQuery(e.target.value);
-        if (e.target.value && size === "s") {
-            setSize("m");
-        }
-    };
-    const handleMouseEnter = () => {
-        setIsHovered(true);
-        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 (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) {
-            setSize("s");
-        }
-    };
-    const handleCalendarClick = () => {
-        setShowCalendar(true);
-        setSize("xl");
-    };
-    const handleBackToChat = () => {
-        setShowCalendar(false);
-    };
-    const sizeConfig = {
-        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: "0.5rem" },
-        xl: { maxWidth: "70vw", bottom: "1.5rem", padding: "0.75rem" },
-    };
-    const currentConfig = sizeConfig[size];
-    return (_jsx("div", { style: {
-            position: "fixed",
-            bottom: currentConfig.bottom,
-            left: 0,
-            right: 0,
-            zIndex: 50,
-            padding: "0.7rem",
-            transition: "bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-        }, 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", { 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(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",
-                    position: "relative",
-                    boxShadow: size === "xs" || size === "s"
-                        ? "none"
-                        : size === "l"
-                            ? "0 8px 32px 0 rgba(0, 0, 0, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 0.4)"
-                            : "0 4px 24px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.3)",
-                    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: [["m", "l", "xl"].includes(size) && (_jsx("div", { style: {
-                            position: "absolute",
-                            top: 0,
-                            right: "0.5rem",
-                            zIndex: 50,
-                            paddingBottom: "0.5rem",
-                        }, children: _jsx("div", { style: {
-                                position: "relative",
-                                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",
-                                                    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: {
-                                                    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: _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",
-                                                    zIndex: 30,
-                                                }, children: "Close" })] })] }) }) })), size === "xs" ? (_jsx("button", { type: "button", onClick: handleToggle, style: {
-                            background: "transparent",
-                            border: "none",
-                            padding: 0,
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            cursor: "pointer",
-                            outline: "none",
-                            width: "100%",
-                        }, 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.75rem",
-                            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.3rem 0 0.5rem 0.3rem",
-                                        color: "rgba(0, 0, 0, 0.75)",
-                                        cursor: "pointer",
-                                        transition: "all 0.2s",
-                                        alignSelf: "flex-start",
-                                        outline: "none",
-                                    }, children: _jsx(ArrowLeft, { style: { width: "0.875rem", height: "0.875rem" } }) }), _jsx("div", { style: {
-                                        flex: 1,
-                                        borderRadius: "0.75rem",
-                                        overflow: "hidden",
-                                        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: chatLogo, size: size })), size === "s" ? (_jsxs("div", { style: {
-                                        display: "flex",
-                                        alignItems: "center",
-                                        gap: "0.35rem",
-                                        transition: "max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-                                    }, children: [_jsx("button", { type: "button", onClick: handleToggle, style: {
-                                                background: "transparent",
-                                                border: "none",
-                                                padding: 0,
-                                                display: "flex",
-                                                alignItems: "center",
-                                                justifyContent: "center",
-                                                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", { style: {
-                                                display: "flex",
-                                                flexDirection: "column",
-                                                gap: "0.35rem",
-                                                flex: 1,
-                                                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)",
-                                                backdropFilter: "blur(40px) saturate(180%) brightness(110%)",
-                                                WebkitBackdropFilter: "blur(40px) saturate(180%) brightness(110%)",
-                                                transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                                            }, 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: "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: 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 })] }) }))] })) }))] }) }) }));
-}