goji-search 1.0.0

package/README.md

@@ -0,0 +1,70 @@
+# Goji Embed
+
+A lightweight React component library providing embeddable form and button components for seamless integration into your React applications.
+
+## Features
+
+- **Embeddable Form**: Easily add a customizable form to your app.
+- **Embeddable Button**: Simple, reusable button component.
+- **TypeScript Support**: Fully typed for a great developer experience.
+- **Zero Dependencies**: Only requires React as a peer dependency.
+
+## Installation
+
+```bash
+npm install goji-embed
+# or
+yarn add goji-embed
+```
+
+## Usage
+
+```tsx
+import { GojiEmbedForm, GojiEmbedButton } from 'goji-embed';
+
+function App() {
+  return (
+    <div>
+      <GojiEmbedForm /* props here */ />
+      <GojiEmbedButton /* props here */ />
+    </div>
+  );
+}
+```
+
+## Components
+
+### `<GojiEmbedForm />`
+
+A form component for embedding in your React app.
+
+**Props:**  
+*(Document your props here, e.g. onSubmit, fields, etc.)*
+
+---
+
+### `<GojiEmbedButton />`
+
+A reusable button component.
+
+**Props:**  
+*(Document your props here, e.g. onClick, label, etc.)*
+
+---
+
+## Development
+
+- Built with [Vite](https://vitejs.dev/) and [TypeScript](https://www.typescriptlang.org/).
+- To build the library:  
+  ```bash
+  npm run build
+  ```
+
+## License
+
+MIT
+
+---
+
+*Feel free to open issues or pull requests for improvements or bug fixes!*
+*creating dev branch*

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

@@ -0,0 +1,12 @@
+interface ActionButtonsProps {
+    size: "xs" | "s" | "m" | "l" | "xl";
+    isHovered: boolean;
+    isStreaming: boolean;
+    searchQuery: string;
+    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 {};

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

@@ -0,0 +1,135 @@
+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
+ }) {
+    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: [_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: {
+                            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",
+                            outlineColor: "none",
+                            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",
+                            } }) }), _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: "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",
+                            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" ? "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/calendar-integration.d.ts

@@ -0,0 +1,5 @@
+interface CalendarIntegrationProps {
+    onBooked?: () => void;
+}
+export default function CalendarIntegration(props?: CalendarIntegrationProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,49 @@
+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.d.ts

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

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

@@ -0,0 +1,79 @@
+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: {
+            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)",
+            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: {
+                    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: "Inspiration" }), _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) => (_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))) })] }));
+}

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

@@ -0,0 +1,24 @@
+interface ChatSource {
+    index: number;
+    url: string;
+    title: string;
+    domain: string;
+    page_type: string;
+    score: number;
+}
+interface Message {
+    role: "user" | "assistant";
+    content: string;
+    timestamp: number;
+    sources?: ChatSource[];
+}
+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 {};