goji-search 1.1.3 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goji-search",
-  "version": "1.1.3",
+  "version": "2.0.0",
   "description": "Embeddable GojiSearch components for both React and vanilla JS",
   "private": false,
   "type": "module",
@@ -13,34 +13,37 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dist/*": "./dist/*",
+    "./*": "./*"
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build && npx tsc && mv dist/goji-search.css dist/goji-search/components/goji-search.css",
-    "dev-pack": "tsc && vite build && npx tsc && cp dist/goji-search.css dist/goji-search/components/goji-search.css && cp -r src/goji-search/assets dist/goji-search/ && npm pack",
+    "build": "vite build && tsc --emitDeclarationOnly && cp -r src/goji-search/assets dist/goji-search/",
+    "dev-pack": "vite build && tsc --emitDeclarationOnly && cp -r src/goji-search/assets dist/goji-search/ && npm pack",
     "lint": "eslint ."
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "devDependencies": {
-    "@eslint/js": "^8.57.0",
-    "@types/node": "^20.12.0",
-    "@types/react": "^18.2.56",
-    "@types/react-dom": "^18.2.19",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "typescript": "^5.4.5",
+    "@eslint/js": "^9.39.2",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "typescript": "^5.9.3",
     "vite": "^7.1.9"
   },
   "dependencies": {
     "@calcom/embed-react": "^1.5.3",
-    "lucide-react": "^0.545.0",
+    "lucide-react": "^0.562.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1"
   }

package/dist/goji-search/components/elements/action-buttons.js

@@ -1,164 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Mic, Calendar, ArrowUp } from "lucide-react";
-import { useState, useId } from "react";
-export function ActionButtons({ size, isHovered, isStreaming, searchQuery, isRecording = false, onSubmit, onVoiceSearch, onClose, onCalendarClick, // Added calendar click handler
- }) {
-    if (size !== "m" && size !== "l" && size !== "xl")
-        return null;
-    // tooltip hover/focus states
-    const [hoverCalendar, setHoverCalendar] = useState(false);
-    const [hoverSubmit, setHoverSubmit] = useState(false);
-    const [hoverVoice, setHoverVoice] = useState(false);
-    // base id for accessibility
-    const idBase = useId();
-    const calendarTooltipId = `${idBase}-calendar-tip`;
-    const submitTooltipId = `${idBase}-submit-tip`;
-    const voiceTooltipId = `${idBase}-voice-tip`;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { position: "relative", display: "inline-block", marginLeft: "0.25rem" }, onMouseEnter: () => setHoverSubmit(true), onMouseLeave: () => setHoverSubmit(false), children: [_jsx("button", { type: "submit", disabled: isStreaming, onClick: onSubmit, "aria-describedby": hoverSubmit ? submitTooltipId : undefined, onFocus: () => setHoverSubmit(true), onBlur: () => setHoverSubmit(false), style: {
-                            borderRadius: "1.3rem",
-                            border: "1px solid rgba(255, 255, 255, 0.3)",
-                            backgroundColor: "rgba(255, 255, 255, 0.2)",
-                            padding: size === "l" || size === "xl" ? "0.5rem" : "0.3rem",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            color: "rgba(0, 0, 0, 0.75)",
-                            backdropFilter: "blur(20px)",
-                            WebkitBackdropFilter: "blur(20px)",
-                            transition: "all 0.2s",
-                            cursor: isStreaming ? "not-allowed" : "pointer",
-                            outline: "none",
-                            opacity: isStreaming ? 0.5 : size === "m" && !isHovered ? 0.7 : 1,
-                            boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.3)",
-                        }, children: _jsx(ArrowUp, { style: {
-                                width: size === "l" || size === "xl" ? "1rem" : "0.875rem",
-                                height: size === "l" || size === "xl" ? "1rem" : "0.875rem",
-                            } }) }), _jsx("span", { id: submitTooltipId, 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: hoverSubmit ? 1 : 0,
-                            pointerEvents: "none",
-                            transition: "opacity 120ms ease-in-out",
-                            zIndex: 30,
-                        }, children: "Send message" })] }), _jsxs("div", { style: { position: "relative", display: "inline-block", marginLeft: "0.25rem" }, onMouseEnter: () => setHoverVoice(true), onMouseLeave: () => setHoverVoice(false), children: [_jsxs("button", { type: "button", onClick: onVoiceSearch, "aria-describedby": hoverVoice ? voiceTooltipId : undefined, onFocus: () => setHoverVoice(true), onBlur: () => setHoverVoice(false), style: {
-                            borderRadius: "1.3rem",
-                            border: "1px solid rgba(255, 255, 255, 0.3)",
-                            backgroundColor: "rgba(255, 255, 255, 0.2)",
-                            padding: size === "l" || size === "xl" ? "0.5rem" : "0.3rem",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            color: "rgba(0, 0, 0, 0.75)",
-                            backdropFilter: "blur(20px)",
-                            WebkitBackdropFilter: "blur(20px)",
-                            transition: "all 0.2s",
-                            cursor: "pointer",
-                            outline: "none",
-                            opacity: size === "m" && !isHovered ? 0.7 : 1,
-                            boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.3)",
-                        }, 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(Mic, { style: {
-                                    width: size === "l" || size === "xl" ? "1rem" : "0.875rem",
-                                    height: size === "l" || size === "xl" ? "1rem" : "0.875rem",
-                                } }), isRecording && (_jsxs("span", { "aria-hidden": "true", style: {
-                                    display: "inline-flex",
-                                    alignItems: "flex-end",
-                                    gap: "2px",
-                                    marginLeft: size === "l" || size === "xl" ? "6px" : "4px",
-                                    height: size === "l" || size === "xl" ? "1rem" : "0.875rem",
-                                }, children: [_jsx("span", { style: {
-                                            width: "2px",
-                                            height: "55%",
-                                            backgroundColor: "rgba(0, 0, 0, 0.75)",
-                                            borderRadius: "1px",
-                                            transformOrigin: "bottom",
-                                            animation: "eqPulse 900ms ease-in-out 0ms infinite",
-                                        } }), _jsx("span", { style: {
-                                            width: "2px",
-                                            height: "85%",
-                                            backgroundColor: "rgba(0, 0, 0, 0.75)",
-                                            borderRadius: "1px",
-                                            transformOrigin: "bottom",
-                                            animation: "eqPulse 900ms ease-in-out 100ms infinite",
-                                        } }), _jsx("span", { style: {
-                                            width: "2px",
-                                            height: "65%",
-                                            backgroundColor: "rgba(0, 0, 0, 0.75)",
-                                            borderRadius: "1px",
-                                            transformOrigin: "bottom",
-                                            animation: "eqPulse 900ms ease-in-out 200ms infinite",
-                                        } }), _jsx("span", { style: {
-                                            width: "2px",
-                                            height: "78%",
-                                            backgroundColor: "rgba(0, 0, 0, 0.75)",
-                                            borderRadius: "1px",
-                                            transformOrigin: "bottom",
-                                            animation: "eqPulse 900ms ease-in-out 300ms infinite",
-                                        } })] }))] }), _jsx("span", { id: voiceTooltipId, 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: hoverVoice ? 1 : 0,
-                            pointerEvents: "none",
-                            transition: "opacity 120ms ease-in-out",
-                            zIndex: 30,
-                        }, children: isRecording ? "Stop recording" : "Voice input" })] }), _jsxs("div", { style: { position: "relative", display: "inline-block", marginRight: "0.25rem" }, onMouseEnter: () => setHoverCalendar(true), onMouseLeave: () => setHoverCalendar(false), children: [_jsxs("button", { type: "button", disabled: isStreaming, onClick: onCalendarClick, "aria-describedby": hoverCalendar ? calendarTooltipId : undefined, onFocus: () => setHoverCalendar(true), onBlur: () => setHoverCalendar(false), style: {
-                            borderRadius: "1.3rem",
-                            border: "1px solid rgba(255, 255, 255, 0.3)",
-                            backgroundColor: "rgb(0, 0, 0)",
-                            padding: size === "l" || size === "xl" ? "0.5rem" : "0.4rem",
-                            display: size === "l" || size === "m" || size === "xl" ? "flex" : "none",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            color: "rgb(255, 255, 255)",
-                            transition: "all 0.2s",
-                            cursor: isStreaming ? "not-allowed" : "pointer",
-                            outline: "none",
-                            opacity: isStreaming ? 0.7 : size === "l" && !isHovered ? 0.85 : 1,
-                        }, children: [_jsx(Calendar, { style: {
-                                    width: size === "l" || size === "xl" ? "1rem" : "0.875rem",
-                                    height: size === "l" || size === "xl" ? "1rem" : "0.875rem",
-                                } }), _jsx("span", { style: {
-                                    marginLeft: "0.5rem",
-                                    fontSize: "0.7rem",
-                                    fontWeight: 400,
-                                    display: size === "m" || searchQuery.length > 0 ? "none" : "block",
-                                    transition: "all 0.4s",
-                                }, children: "Book a call" })] }), _jsx("span", { id: calendarTooltipId, 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: hoverCalendar ? 1 : 0,
-                            pointerEvents: "none",
-                            transition: "opacity 120ms ease-in-out",
-                            zIndex: 30,
-                        }, children: "Book a call" })] })] }));
-}

package/dist/goji-search/components/elements/auto-expanding-textarea.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect, forwardRef } from "react";
-const AutoExpandingTextarea = forwardRef(({ value, onChange, onKeyDown, className, style, ...props }, ref) => {
-    const textareaRef = useRef(null);
-    useEffect(() => {
-        const el = ref?.current || textareaRef.current;
-        if (el) {
-            // Reset to minimum height when value is empty
-            if (!value || value.trim() === '') {
-                el.style.height = "24px";
-                return;
-            }
-            el.style.height = "auto";
-            const scrollHeight = el.scrollHeight;
-            const minHeight = 24; // one line height
-            const maxHeight = 160; // max ~5 lines
-            el.style.height = `${Math.min(Math.max(scrollHeight, minHeight), maxHeight)}px`;
-        }
-    }, [value, ref]);
-    return (_jsx("textarea", { ref: ref || textareaRef, value: value, onChange: onChange, onKeyDown: (e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault();
-                // Trigger form submission by finding parent form and calling submit
-                const form = e.currentTarget.closest('form');
-                if (form) {
-                    form.requestSubmit(); // This triggers onSubmit handler
-                }
-                onKeyDown?.(e);
-            }
-            else {
-                onKeyDown?.(e);
-            }
-        }, placeholder: "Chat with me...", className: `w-full bg-white placeholder:text-gray-500 rounded-lg text-sm sm:text-base ${className}`, style: {
-            lineHeight: "1.5rem",
-            padding: "0.5rem 0.75rem",
-            minHeight: "1.5rem",
-            maxHeight: "160px",
-            outline: "none",
-            overflow: "hidden", // ← hide scrollbars
-            resize: "none", // ← remove corner handle
-            transition: "height 0.15s ease-out",
-            ...style,
-        }, rows: 1, ...props }));
-});
-AutoExpandingTextarea.displayName = "AutoExpandingTextarea";
-export default AutoExpandingTextarea;

package/dist/goji-search/components/elements/calendar-integration.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Cal, { getCalApi } from "@calcom/embed-react";
-import { useEffect } from "react";
-import { getCalendarConfig } from "../../lib/calendar-config";
-export default function CalendarIntegration(props = {}) {
-    const { onBooked } = props;
-    const calendarConfig = getCalendarConfig();
-    useEffect(() => {
-        if (!calendarConfig || calendarConfig.provider !== "calcom")
-            return;
-        void (async () => {
-            const cal = await getCalApi({ namespace: calendarConfig.namespace || "default" });
-            cal("ui", {
-                hideEventTypeDetails: false,
-                layout: calendarConfig.layout || "month_view",
-            });
-            // Listen for successful booking
-            try {
-                cal("on", {
-                    action: "bookingSuccessful",
-                    callback: () => {
-                        window.dispatchEvent(new Event("calendar-booked"));
-                        onBooked?.();
-                    },
-                });
-            }
-            catch (_) {
-                // no-op
-            }
-        })();
-        // Also listen via postMessage
-        const handleMessage = (event) => {
-            const data = event?.data;
-            const name = data?.event || data?.action || data?.name;
-            if (typeof name === "string" &&
-                name.toLowerCase().includes("booking") &&
-                name.toLowerCase().includes("success")) {
-                window.dispatchEvent(new Event("calendar-booked"));
-                onBooked?.();
-            }
-        };
-        window.addEventListener("message", handleMessage);
-        return () => window.removeEventListener("message", handleMessage);
-    }, [calendarConfig, onBooked]);
-    return (_jsx("div", { style: { width: "100%", height: "100%", overflow: "auto" }, children: _jsx(Cal, { namespace: calendarConfig.namespace || "default", calLink: calendarConfig.link, style: { width: "100%", height: "100%", minHeight: "500px" }, config: {
-                layout: calendarConfig.layout || "month_view",
-                theme: calendarConfig.theme || "light",
-            } }) }));
-}

package/dist/goji-search/components/elements/inspiration-menu.js

@@ -1,87 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react";
-export function InspirationMenu({ questions, onQuestionClick, onClose, suggestedLabel = "Suggested" }) {
-    return (_jsxs("div", { "data-inspiration-menu": true, style: {
-            position: "absolute",
-            bottom: "calc(100% + 0.5rem)",
-            left: 0,
-            minWidth: "16rem",
-            maxWidth: "20rem",
-            borderRadius: "0.75rem",
-            border: "1px solid rgba(255, 255, 255, 0.35)",
-            // Glass-like background with transparency
-            backgroundColor: "rgba(255, 255, 255, 0.75)",
-            backdropFilter: "blur(24px) saturate(180%)",
-            WebkitBackdropFilter: "blur(24px) saturate(180%)",
-            boxShadow: "0 8px 28px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
-            padding: "0.625rem",
-            animation: "slideUpMenu 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
-            // Ensure the popover sits above chat bubbles and other content
-            zIndex: 1000,
-        }, onClick: (e) => e.stopPropagation(), onMouseEnter: (e) => e.stopPropagation(), onMouseLeave: onClose, children: [_jsxs("div", { style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    marginBottom: "0.5rem",
-                    paddingBottom: "0.5rem",
-                    borderBottom: "1px solid rgba(0, 0, 0, 0.06)",
-                }, children: [_jsx("div", { style: {
-                            fontSize: "0.6875rem",
-                            fontWeight: 600,
-                            color: "rgba(0, 0, 0, 0.5)",
-                            letterSpacing: "0.05em",
-                            textTransform: "capitalize",
-                        }, children: suggestedLabel }), _jsx("button", { type: "button", onClick: onClose, style: {
-                            padding: "0.25rem",
-                            borderRadius: "0.375rem",
-                            border: "1px solid rgba(255, 255, 255, 0.2)",
-                            backgroundColor: "rgba(255, 255, 255, 0.15)",
-                            color: "rgba(0, 0, 0, 0.5)",
-                            cursor: "pointer",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            transition: "all 0.2s",
-                            outline: "none",
-                            backdropFilter: "blur(10px)",
-                            WebkitBackdropFilter: "blur(10px)",
-                        }, onMouseEnter: (e) => {
-                            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
-                            e.currentTarget.style.color = "rgba(0, 0, 0, 0.8)";
-                            e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.35)";
-                        }, onMouseLeave: (e) => {
-                            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.15)";
-                            e.currentTarget.style.color = "rgba(0, 0, 0, 0.5)";
-                            e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.2)";
-                        }, children: _jsx(X, { style: { width: "0.875rem", height: "0.875rem" } }) })] }), _jsx("div", { style: { display: "flex", flexDirection: "column", 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(0, 0, 0, 0.06)",
-                            backgroundColor: "#ffffff",
-                            color: "rgba(0, 0, 0, 0.85)",
-                            fontSize: "0.75rem",
-                            fontWeight: 500,
-                            textAlign: "left",
-                            cursor: "pointer",
-                            transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-                            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.06)",
-                            outline: "none",
-                            lineHeight: "1.3",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                        }, onMouseEnter: (e) => {
-                            e.currentTarget.style.backgroundColor = "rgba(140, 110, 230, 0.12)";
-                            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)";
-                        }, onMouseLeave: (e) => {
-                            e.currentTarget.style.backgroundColor = "#ffffff";
-                            e.currentTarget.style.borderColor = "rgba(0, 0, 0, 0.06)";
-                            e.currentTarget.style.transform = "translateY(0)";
-                            e.currentTarget.style.boxShadow = "0 1px 2px rgba(0, 0, 0, 0.06)";
-                        }, children: truncatedQuestion }, index));
-                }) })] }));
-}