goji-search 1.0.1 → 1.1.2

package/dist/goji-search/components/elements/action-buttons.d.ts

@@ -3,10 +3,11 @@ interface ActionButtonsProps {
     isHovered: boolean;
     isStreaming: boolean;
     searchQuery: string;
+    isRecording?: boolean;
     onSubmit: () => void;
     onVoiceSearch: () => void;
     onClose: () => void;
     onCalendarClick: () => void;
 }
-export declare function ActionButtons({ size, isHovered, isStreaming, searchQuery, onSubmit, onVoiceSearch, onClose, onCalendarClick, }: ActionButtonsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ActionButtons({ size, isHovered, isStreaming, searchQuery, isRecording, onSubmit, onVoiceSearch, onClose, onCalendarClick, }: ActionButtonsProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,7 +1,7 @@
 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, onSubmit, onVoiceSearch, onClose, onCalendarClick, // Added calendar click handler
+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;
@@ -49,10 +49,7 @@ export function ActionButtons({ size, isHovered, isStreaming, searchQuery, onSub
                             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: [_jsx("button", { type: "button", onClick: onVoiceSearch, "aria-describedby": hoverVoice ? voiceTooltipId : undefined, onBlur: (e) => {
-                            setHoverVoice(false);
-                            e.currentTarget.style.boxShadow = "inset 0 1px 0 rgba(255, 255, 255, 0.3)";
-                        }, style: {
+                        }, 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)",
@@ -60,7 +57,6 @@ export function ActionButtons({ size, isHovered, isStreaming, searchQuery, onSub
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "center",
-                            outlineColor: "none",
                             color: "rgba(0, 0, 0, 0.75)",
                             backdropFilter: "blur(20px)",
                             WebkitBackdropFilter: "blur(20px)",
@@ -73,10 +69,44 @@ export function ActionButtons({ size, isHovered, isStreaming, searchQuery, onSub
                             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",
-                            } }) }), _jsx("span", { id: voiceTooltipId, role: "tooltip", style: {
+                        }, 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%",
@@ -92,14 +122,13 @@ export function ActionButtons({ size, isHovered, isStreaming, searchQuery, onSub
                             pointerEvents: "none",
                             transition: "opacity 120ms ease-in-out",
                             zIndex: 30,
-                        }, children: "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: {
+                        }, 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",
-                            outlineColor: "none",
                             justifyContent: "center",
                             color: "rgb(255, 255, 255)",
                             transition: "all 0.2s",
@@ -113,7 +142,7 @@ export function ActionButtons({ size, isHovered, isStreaming, searchQuery, onSub
                                     marginLeft: "0.5rem",
                                     fontSize: "0.7rem",
                                     fontWeight: 400,
-                                    display: size === "m" ? "none" : "block",
+                                    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",

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

@@ -0,0 +1,8 @@
+import type React from "react";
+interface AutoExpandingTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+}
+declare const AutoExpandingTextarea: React.ForwardRefExoticComponent<AutoExpandingTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default AutoExpandingTextarea;

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

@@ -0,0 +1,46 @@
+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/inspiration-menu.d.ts

@@ -2,6 +2,7 @@ interface InspirationMenuProps {
     questions: string[];
     onQuestionClick: (question: string) => void;
     onClose: () => void;
+    suggestedLabel?: string;
 }
-export declare function InspirationMenu({ questions, onQuestionClick, onClose }: InspirationMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function InspirationMenu({ questions, onQuestionClick, onClose, suggestedLabel }: InspirationMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,20 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
-export function InspirationMenu({ questions, onQuestionClick, onClose }) {
-    return (_jsxs("div", { style: {
+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(85, 85, 85, 0.18)",
-            backgroundColor: "rgb(248, 239, 255)",
-            boxShadow: "0 8px 28px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4)",
+            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)",
-            zIndex: 100,
-        }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: {
+            // 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",
@@ -27,7 +31,7 @@ export function InspirationMenu({ questions, onQuestionClick, onClose }) {
                             color: "rgba(0, 0, 0, 0.5)",
                             letterSpacing: "0.05em",
                             textTransform: "capitalize",
-                        }, children: "Inspiration" }), _jsx("button", { type: "button", onClick: onClose, style: {
+                        }, children: suggestedLabel }), _jsx("button", { type: "button", onClick: onClose, style: {
                             padding: "0.25rem",
                             borderRadius: "0.375rem",
                             border: "1px solid rgba(255, 255, 255, 0.2)",
@@ -49,31 +53,35 @@ export function InspirationMenu({ questions, onQuestionClick, onClose }) {
                             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) => (_jsx("button", { type: "button", onClick: () => onQuestionClick(question), 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(0, 122, 255, 0.15)";
-                        e.currentTarget.style.borderColor = "rgba(0, 122, 255, 0.3)";
-                        e.currentTarget.style.transform = "translateY(-1px)";
-                        e.currentTarget.style.boxShadow =
-                            "0 3px 8px rgba(0, 122, 255, 0.12), 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)";
-                    }, children: question }, index))) })] }));
+                        }, 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));
+                }) })] }));
 }

package/dist/goji-search/components/elements/message-list.d.ts

@@ -16,9 +16,7 @@ interface MessageListProps {
     messages: Message[];
     isStreaming: boolean;
     aiAvatarSrc?: string;
-    onClose?: () => void;
-    onExpand?: () => void;
     size?: "m" | "l" | "xl" | "s" | "xs";
 }
-export declare function MessageList({ messages, isStreaming, aiAvatarSrc, onClose, onExpand, size, }: MessageListProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageList({ messages, isStreaming, aiAvatarSrc, size, }: MessageListProps): import("react/jsx-runtime").JSX.Element;
 export {};