goji-search 1.1.4 → 2.0.1

package/dist/goji-search/components/elements/message-list.js

@@ -1,301 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useEffect, useState } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { ExternalLink } from "lucide-react";
-export function MessageList({ messages, isStreaming, aiAvatarSrc = '', size = 'l', }) {
-    const messagesEndRef = useRef(null);
-    const [expandedSourcesByMessageIndex, setExpandedSourcesByMessageIndex] = useState({});
-    const toggleSources = (messageIndex) => {
-        setExpandedSourcesByMessageIndex((prev) => ({
-            ...prev,
-            [messageIndex]: !prev[messageIndex],
-        }));
-    };
-    const convertCitationLinksToUrls = (markdown, sources) => {
-        if (!markdown || !sources || sources.length === 0)
-            return markdown;
-        // Replace [text](N) where N is a positive integer referencing sources[N-1]
-        return markdown.replace(/\[([^\]]+)\]\((\d+)\)/g, (match, text, numStr) => {
-            const num = parseInt(numStr, 10);
-            if (Number.isNaN(num) || num < 1 || num > sources.length)
-                return match;
-            const url = sources[num - 1]?.url;
-            if (!url)
-                return match;
-            return `[${text}](${url})`;
-        });
-    };
-    useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-    }, [messages]);
-    const lastMessage = messages[messages.length - 1];
-    const showThinkingDots = isStreaming && (!lastMessage || lastMessage.role !== "assistant" || !lastMessage.content);
-    return (_jsxs("div", { style: {
-            position: 'relative',
-            flex: 1,
-            overflowY: "auto",
-            marginTop: "1.3rem",
-            display: "flex",
-            flexDirection: "column",
-            gap: "0.5rem",
-            padding: "0.5rem",
-            borderRadius: "0.75rem",
-            backgroundColor: "rgba(255, 255, 255, 0.08)",
-            border: "1px solid rgba(255, 255, 255, 0.15)",
-        }, className: "custom-scrollbar", children: [messages.map((message, index) => {
-                // Skip rendering empty assistant messages during streaming (thinking dots will show instead)
-                const isEmptyAssistantWhileStreaming = message.role === "assistant" && !message.content && isStreaming;
-                if (isEmptyAssistantWhileStreaming)
-                    return null;
-                return (_jsxs("div", { style: {
-                        display: "flex",
-                        justifyContent: message.role === "user" ? "flex-end" : "flex-start",
-                        animation: "fadeIn 0.3s ease-in",
-                        gap: "0.4rem",
-                    }, children: [_jsx("div", { style: {
-                                display: "flex",
-                                gap: "0.4rem",
-                                alignItems: message.role === "user" ? "flex-end" : "flex-start"
-                            }, children: _jsx("div", { style: {
-                                    width: message.role === "user" ? "0" : "1.4rem",
-                                    height: message.role === "user" ? "0" : "auto",
-                                    borderRadius: "none",
-                                    backgroundColor: "transparent",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    fontSize: "0.75rem",
-                                    border: "none",
-                                    boxShadow: "none",
-                                }, children: message.role === "user" ? (
-                                // <User size={16} color="rgba(0, 0, 0, 1)" />
-                                _jsx("div", {})) : (aiAvatarSrc ? (_jsx("img", { src: aiAvatarSrc, alt: "AI Avatar", style: {
-                                        width: "100%",
-                                        height: "100%",
-                                        objectFit: "cover"
-                                    } })) : (_jsx("div", { style: {
-                                        width: "100%",
-                                        height: "100%",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        fontSize: "0.75rem",
-                                        color: "rgba(217, 219, 234, 1)"
-                                    }, children: "AI" }))) }) }), _jsxs("div", { style: {
-                                maxWidth: "85%",
-                                padding: message.role === "user" ? "0.5rem 0.75rem" : "0.5rem 0",
-                                borderRadius: message.role === "user" ? "1.2rem" : "0",
-                                fontSize: "0.875rem",
-                                marginLeft: message.role === "user" ? "0" : "1rem",
-                                marginRight: message.role === "user" ? "1rem" : "0",
-                                lineHeight: "1.4",
-                                backgroundColor: message.role === "user" ? "rgb(114, 126, 237)" : "transparent",
-                                color: message.role === "user" ? "white" : "rgba(0, 0, 0, 0.85)",
-                                border: message.role === "user" ? "1px solid rgba(255, 255, 255, 0.35)" : "none",
-                                boxShadow: message.role === "user" ? "0 2px 8px rgba(114, 126, 237, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)" : "none",
-                            }, children: [message.role === "user" ? (_jsx("p", { style: { margin: 0, whiteSpace: "pre-wrap" }, children: message.content })) : (_jsx("div", { className: "markdown-content", style: {
-                                        fontSize: "0.875rem",
-                                        lineHeight: "1.4",
-                                        color: "rgba(0, 0, 0, 0.85)",
-                                    }, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: {
-                                            a: ({ href, children, ...props }) => {
-                                                const hasSources = Array.isArray(message.sources) && message.sources.length > 0;
-                                                if (!hasSources) {
-                                                    const anyProps = props;
-                                                    return (_jsx("span", { className: anyProps?.className, style: anyProps?.style, children: children }));
-                                                }
-                                                return (_jsx("a", { href: href || '', target: "_blank", rel: "noopener noreferrer", ...props, children: children }));
-                                            },
-                                        }, children: convertCitationLinksToUrls(message.content, message.sources) }) })), message.role === "assistant" && message.sources && message.sources.length > 0 && (_jsxs("div", { style: {
-                                        marginTop: "0.25rem",
-                                        paddingTop: "0.25rem",
-                                        borderTop: "1px solid rgba(0, 0, 0, 0.1)",
-                                    }, children: [_jsx("div", { style: {
-                                                display: "flex",
-                                                alignItems: "center",
-                                                justifyContent: "flex-end",
-                                                gap: "0.5rem",
-                                                marginBottom: "0.25rem",
-                                            }, children: _jsx("button", { type: "button", onClick: () => toggleSources(index), style: {
-                                                    borderRadius: "0.5rem",
-                                                    border: "1px solid rgba(255, 255, 255, 0.3)",
-                                                    backgroundColor: "rgba(255, 255, 255, 0.2)",
-                                                    padding: "0.2rem 0.4rem",
-                                                    fontSize: "0.65rem",
-                                                    color: "rgba(0, 0, 0, 0.75)",
-                                                    cursor: "pointer",
-                                                    outline: "none",
-                                                    textTransform: "none",
-                                                }, children: expandedSourcesByMessageIndex[index] ? "Hide sources" : "Show sources" }) }), expandedSourcesByMessageIndex[index] && (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: message.sources.map((source) => (_jsxs("a", { href: source.url, target: "_blank", rel: "noopener noreferrer", style: {
-                                                    display: "flex",
-                                                    alignItems: "center",
-                                                    gap: "0.5rem",
-                                                    fontSize: "0.75rem",
-                                                    color: "rgba(0, 0, 0, 0.7)",
-                                                    textDecoration: "none",
-                                                    transition: "color 0.2s",
-                                                }, onMouseEnter: (e) => {
-                                                    e.currentTarget.style.color = "rgba(0, 0, 0, 0.9)";
-                                                }, onMouseLeave: (e) => {
-                                                    e.currentTarget.style.color = "rgba(0, 0, 0, 0.7)";
-                                                }, children: [_jsxs("span", { style: {
-                                                            backgroundColor: "rgba(0, 0, 0, 0.1)",
-                                                            padding: "0.125rem 0.375rem",
-                                                            borderRadius: "0.375rem",
-                                                            fontSize: "0.65rem",
-                                                            fontWeight: 600,
-                                                        }, children: ["#", source.index] }), _jsx("span", { style: { flex: 1, wordBreak: "break-all" }, children: source.url }), _jsx(ExternalLink, { style: { width: "0.875rem", height: "0.875rem", opacity: 0.6 } })] }, source.index))) }))] }))] })] }, index));
-            }), showThinkingDots && (_jsxs("div", { style: { display: "flex", justifyContent: "flex-start", gap: "0.4rem", alignItems: "flex-start" }, children: [_jsx("div", { style: {
-                            display: "flex",
-                            gap: "0.4rem",
-                            alignItems: "flex-start"
-                        }, children: _jsx("div", { style: {
-                                width: "1.4rem",
-                                height: "auto",
-                                borderRadius: "none",
-                                backgroundColor: "transparent",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                fontSize: "0.75rem",
-                                border: "none",
-                                boxShadow: "none",
-                            }, children: aiAvatarSrc ? (_jsx("img", { src: aiAvatarSrc, alt: "AI Avatar", style: {
-                                    width: "100%",
-                                    height: "100%",
-                                    objectFit: "cover"
-                                } })) : (_jsx("div", { style: {
-                                    width: "100%",
-                                    height: "100%",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    fontSize: "0.75rem",
-                                    color: "rgba(217, 219, 234, 1)"
-                                }, children: "AI" })) }) }), _jsxs("div", { style: {
-                            marginLeft: "1rem",
-                            padding: "0.25rem 0.5rem",
-                            borderRadius: "1rem",
-                            display: "flex",
-                            gap: "0.25rem",
-                            alignItems: "center",
-                        }, children: [_jsx("span", { style: {
-                                    width: "0.35rem",
-                                    height: "0.35rem",
-                                    borderRadius: "50%",
-                                    backgroundColor: "rgba(0, 0, 0, 0.5)",
-                                    animation: "pulse 1.4s ease-in-out infinite",
-                                } }), _jsx("span", { style: {
-                                    width: "0.35rem",
-                                    height: "0.35rem",
-                                    borderRadius: "50%",
-                                    backgroundColor: "rgba(0, 0, 0, 0.5)",
-                                    animation: "pulse 1.4s ease-in-out 0.2s infinite",
-                                } }), _jsx("span", { style: {
-                                    width: "0.35rem",
-                                    height: "0.35rem",
-                                    borderRadius: "50%",
-                                    backgroundColor: "rgba(0, 0, 0, 0.5)",
-                                    animation: "pulse 1.4s ease-in-out 0.4s infinite",
-                                } })] })] })), _jsx("div", { ref: messagesEndRef }), _jsx("style", { children: `
-        .markdown-content p {
-          margin: 0 0 0.75rem 0;
-        }
-        .markdown-content p:last-child {
-          margin-bottom: 0;
-        }
-        .markdown-content h1,
-        .markdown-content h2,
-        .markdown-content h3,
-        .markdown-content h4 {
-          margin: 1rem 0 0.5rem 0;
-          font-weight: 600;
-          color: rgba(0, 0, 0, 0.9);
-        }
-        .markdown-content h1 {
-          font-size: 1.25rem;
-        }
-        .markdown-content h2 {
-          font-size: 1.125rem;
-        }
-        .markdown-content h3 {
-          font-size: 1rem;
-        }
-        .markdown-content ul,
-        .markdown-content ol {
-          margin: 0.5rem 0;
-          padding-left: 1.5rem;
-        }
-        .markdown-content li {
-          margin: 0.25rem 0;
-        }
-        .markdown-content code {
-          background-color: rgba(0, 0, 0, 0.08);
-          padding: 0.125rem 0.375rem;
-          border-radius: 0.25rem;
-          font-size: 0.8125rem;
-          font-family: ui-monospace, monospace;
-        }
-        .markdown-content pre {
-          background-color: rgba(0, 0, 0, 0.08);
-          padding: 0.75rem;
-          border-radius: 0.5rem;
-          overflow-x: auto;
-          margin: 0.75rem 0;
-        }
-        .markdown-content pre code {
-          background-color: transparent;
-          padding: 0;
-        }
-        .markdown-content a {
-          color: rgb(114, 126, 237);
-          text-decoration: underline;
-        }
-        .markdown-content a:hover {
-          color: rgb(94, 106, 217);
-        }
-        .markdown-content blockquote {
-          border-left: 3px solid rgba(0, 0, 0, 0.2);
-          padding-left: 1rem;
-          margin: 0.75rem 0;
-          color: rgba(0, 0, 0, 0.7);
-        }
-        .markdown-content strong {
-          font-weight: 600;
-          color: rgba(0, 0, 0, 0.9);
-        }
-        .markdown-content table {
-          border-collapse: collapse;
-          width: 100%;
-          margin: 0.75rem 0;
-        }
-        .markdown-content th,
-        .markdown-content td {
-          border: 1px solid rgba(0, 0, 0, 0.15);
-          padding: 0.5rem;
-          text-align: left;
-        }
-        .markdown-content th {
-          background-color: rgba(0, 0, 0, 0.05);
-          font-weight: 600;
-        }
-        .custom-scrollbar {
-          scrollbar-width: thin;
-          scrollbar-color: rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.08);
-        }
-        .custom-scrollbar::-webkit-scrollbar {
-          width: 0.5rem;
-        }
-        .custom-scrollbar::-webkit-scrollbar-track {
-          background: rgba(255, 255, 255, 0.08);
-        }
-        .custom-scrollbar::-webkit-scrollbar-thumb {
-          background-color: rgba(0, 0, 0, 0.5);
-          border-radius: 0.25rem;
-        }
-        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-          background-color: rgba(0, 0, 0, 0.7);
-        }
-      ` })] }));
-}

package/dist/goji-search/components/elements/search-input.js

@@ -1,136 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Sparkles } from "lucide-react";
-import { useEffect, useState } from "react";
-import { InspirationMenu } from "./inspiration-menu";
-import AutoExpandingTextarea from "./auto-expanding-textarea"; // make sure path matches
-export function SearchInput({ value, onChange, onFocus, onBlur, placeholder, size, setSize, inputRef, inspirationQuestions, onInspirationClick, sparkleRef, suggestedLabel = "Suggested", }) {
-    const [showInspirationMenu, setShowInspirationMenu] = useState(false);
-    const [isSparkleHovered, setIsSparkleHovered] = useState(false);
-    const [typewriterText, setTypewriterText] = useState("");
-    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
-    const [isTyping, setIsTyping] = useState(true);
-    const [charIndex, setCharIndex] = useState(0);
-    const [isSingleLine, setIsSingleLine] = useState(true);
-    useEffect(() => {
-        if (inputRef.current) {
-            const textarea = inputRef.current;
-            const lineHeight = 24; // match your `line-height` in CSS (1.5rem ≈ 24px)
-            setIsSingleLine(textarea.scrollHeight <= lineHeight * 1.5);
-        }
-    }, [value]);
-    // Typewriter animation for placeholder
-    useEffect(() => {
-        if (size !== "s" || value || inspirationQuestions.length === 0)
-            return;
-        const currentQuestion = inspirationQuestions[currentQuestionIndex];
-        const typingSpeed = 40;
-        const deletingSpeed = 20;
-        const pauseAfterTyping = 2000;
-        const pauseAfterDeleting = 500;
-        const timer = setTimeout(() => {
-            if (isTyping) {
-                if (charIndex < currentQuestion.length) {
-                    setTypewriterText(currentQuestion.slice(0, charIndex + 1));
-                    setCharIndex(charIndex + 1);
-                }
-                else {
-                    setTimeout(() => setIsTyping(false), pauseAfterTyping);
-                }
-            }
-            else {
-                if (charIndex > 0) {
-                    setTypewriterText(currentQuestion.slice(0, charIndex - 1));
-                    setCharIndex(charIndex - 1);
-                }
-                else {
-                    setTimeout(() => {
-                        setCurrentQuestionIndex((currentQuestionIndex + 1) % inspirationQuestions.length);
-                        setIsTyping(true);
-                    }, pauseAfterDeleting);
-                }
-            }
-        }, isTyping ? typingSpeed : deletingSpeed);
-        return () => clearTimeout(timer);
-    }, [size, value, inspirationQuestions, currentQuestionIndex, isTyping, charIndex]);
-    const handleSparkleClick = () => {
-        setShowInspirationMenu(!showInspirationMenu);
-    };
-    const handleQuestionClick = (question) => {
-        if (size !== "l" && size !== "xl") {
-            setSize("l");
-        }
-        onInspirationClick(question);
-        setShowInspirationMenu(false);
-    };
-    const displayPlaceholder = size === "s" && !value ? typewriterText : placeholder;
-    return (_jsxs("div", { style: { position: "relative", zIndex: 1 }, children: [size !== "s" && (_jsxs("div", { ref: sparkleRef, onClick: handleSparkleClick, onMouseEnter: () => {
-                    setIsSparkleHovered(true);
-                    setShowInspirationMenu(true);
-                }, onMouseLeave: () => {
-                    setIsSparkleHovered(false);
-                    // Don't immediately close, wait for user to move to menu
-                    setTimeout(() => {
-                        if (!document.querySelector('[data-inspiration-menu]:hover')) {
-                            setShowInspirationMenu(false);
-                        }
-                    }, 150);
-                }, style: {
-                    position: "absolute",
-                    left: "0.75rem",
-                    top: "0.42rem",
-                    cursor: "pointer",
-                    // Keep the trigger above the input; menu has an even higher z-index
-                    zIndex: 2,
-                }, children: [_jsx(Sparkles, { className: "sparkle-icon-animated", style: {
-                            width: "1rem",
-                            height: "1rem",
-                            color: "rgba(0, 0, 0, 0.6)",
-                            transition: "all 0.3s ease",
-                        } }), showInspirationMenu && (_jsx(InspirationMenu, { questions: inspirationQuestions, onQuestionClick: handleQuestionClick, onClose: () => setShowInspirationMenu(false), suggestedLabel: suggestedLabel }))] })), _jsx(AutoExpandingTextarea, { ref: inputRef, value: value, onChange: onChange, onFocus: onFocus, onMouseEnter: () => {
-                    if (size === "m") {
-                        setShowInspirationMenu(true);
-                    }
-                }, onBlur: onBlur, placeholder: displayPlaceholder, className: `sparkle-input ${isSparkleHovered ? "sparkle-hover" : ""}`, style: {
-                    padding: size === "s" ? "0 0.75rem" : "0 0.75rem 0 2rem",
-                    outline: "none",
-                    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                    borderRadius: isSingleLine ? "9999px" : "15px",
-                } }), _jsx("style", { children: `
-         .sparkle-input {
-          width: 100%;
-          border: 1px solid rgba(255, 255, 255, 0.25);
-          background-color: transparent;
-          border-radius: 9999px; /* full rounded */
-          font-size: 0.85rem; /* ~14px */
-          color: rgba(0, 0, 0, 0.85);
-          backdrop-filter: blur(20px) saturate(180%);
-          -webkit-backdrop-filter: blur(20px) saturate(180%);
-          resize: none;
-          outline: none;
-          overflow: hidden; /* hide scrollbar toggles */
-          line-height: 1.5rem;
-          min-height: 1.5rem;
-          max-height: 160px;
-          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        .sparkle-input::placeholder {
-          color: rgba(0, 0, 0, 0.75);
-        }
-
-        .sparkle-icon-animated {
-          animation: sparkleGlow 2s ease-in-out infinite;
-        }
-
-        @keyframes sparkleGlow {
-          0%, 100% {
-            opacity: 0.6;
-            transform: scale(1);
-          }
-          50% {
-            opacity: 1;
-            transform: scale(1.1);
-          }
-        }
-        ` })] }));
-}

package/dist/goji-search/components/elements/suggested-questions.js

@@ -1,57 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function SuggestedQuestions({ questions, onQuestionClick }) {
-    return (_jsxs("div", { style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: "0.5rem",
-            padding: "0 0.625rem",
-            borderRadius: "0.75rem",
-            backgroundColor: "rgba(255, 255, 255, 0.08)",
-            border: "1px solid rgba(255, 255, 255, 0.15)",
-            animation: "slideUp 0.3s ease-out",
-        }, children: [_jsx("div", { style: {
-                    fontSize: "0.6875rem",
-                    fontWeight: 600,
-                    color: "rgba(0, 0, 0, 0.5)",
-                    marginBottom: "0.125rem",
-                    letterSpacing: "0.05em",
-                    textTransform: "capitalize",
-                }, children: "suggested" }), _jsx("div", { style: {
-                    display: "flex",
-                    flexWrap: "wrap",
-                    gap: "0.375rem",
-                }, children: questions.map((question, index) => {
-                    const truncatedQuestion = question.length > 80 ? question.slice(0, 80) + '...' : question;
-                    return (_jsx("button", { type: "button", onClick: () => onQuestionClick(question), title: question.length > 80 ? question : undefined, style: {
-                            padding: "0.5rem 0.75rem",
-                            borderRadius: "1.3rem",
-                            border: "1px solid rgba(255, 255, 255, 0.25)",
-                            backgroundColor: "rgba(255, 255, 255, 0.2)",
-                            color: "rgba(0, 0, 0, 0.75)",
-                            fontSize: "0.75rem",
-                            textAlign: "left",
-                            cursor: "pointer",
-                            transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-                            backdropFilter: "blur(20px) saturate(180%)",
-                            WebkitBackdropFilter: "blur(20px) saturate(180%)",
-                            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
-                            outline: "none",
-                            lineHeight: "1.3",
-                        }, onMouseEnter: (e) => {
-                            e.currentTarget.style.backgroundColor = "rgba(140, 110, 230, 0.15)";
-                            e.currentTarget.style.borderColor = "rgba(140, 110, 230, 0.3)";
-                            e.currentTarget.style.transform = "translateY(-1px)";
-                            e.currentTarget.style.boxShadow =
-                                "0 3px 8px rgba(140, 110, 230, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4)";
-                        }, onMouseLeave: (e) => {
-                            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
-                            e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.25)";
-                            e.currentTarget.style.transform = "translateY(0)";
-                            e.currentTarget.style.boxShadow = "0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
-                        }, onFocus: (e) => {
-                            e.currentTarget.style.boxShadow = "0 0 0 2px rgba(140, 110, 230, 0.3)";
-                        }, onBlur: (e) => {
-                            e.currentTarget.style.boxShadow = "0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
-                        }, children: truncatedQuestion }, index));
-                }) })] }));
-}