goji-search 1.0.0 → 1.1.0

package/README.md

@@ -1,70 +1,23 @@
-# 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.
+# Goji Search
 
 ## Installation
 
 ```bash
-npm install goji-embed
+npm install goji-search
 # or
-yarn add goji-embed
+yarn add goji-search
 ```
 
 ## Usage
 
 ```tsx
-import { GojiEmbedForm, GojiEmbedButton } from 'goji-embed';
+import { GojiSearchComponent } from 'goji-search';
 
 function App() {
   return (
     <div>
-      <GojiEmbedForm /* props here */ />
-      <GojiEmbedButton /* props here */ />
+      <GojiSearchComponent /* 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

@@ -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,34 +49,68 @@ 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)",
+                            border: isRecording ? "1px solid rgba(220, 38, 38, 0.5)" : "1px solid rgba(255, 255, 255, 0.3)",
+                            backgroundColor: isRecording ? "rgba(220, 38, 38, 0.2)" : "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)",
+                            color: isRecording ? "rgba(220, 38, 38, 0.9)" : "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)",
+                            boxShadow: isRecording ? "inset 0 1px 0 rgba(220, 38, 38, 0.2)" : "inset 0 1px 0 rgba(255, 255, 255, 0.3)",
                         }, onMouseEnter: (e) => {
-                            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
+                            if (!isRecording) {
+                                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: {
+                            if (!isRecording) {
+                                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(220, 38, 38, 0.95)",
+                                            borderRadius: "1px",
+                                            transformOrigin: "bottom",
+                                            animation: "eqPulse 900ms ease-in-out 0ms infinite",
+                                        } }), _jsx("span", { style: {
+                                            width: "2px",
+                                            height: "85%",
+                                            backgroundColor: "rgba(220, 38, 38, 0.95)",
+                                            borderRadius: "1px",
+                                            transformOrigin: "bottom",
+                                            animation: "eqPulse 900ms ease-in-out 100ms infinite",
+                                        } }), _jsx("span", { style: {
+                                            width: "2px",
+                                            height: "65%",
+                                            backgroundColor: "rgba(220, 38, 38, 0.95)",
+                                            borderRadius: "1px",
+                                            transformOrigin: "bottom",
+                                            animation: "eqPulse 900ms ease-in-out 200ms infinite",
+                                        } }), _jsx("span", { style: {
+                                            width: "2px",
+                                            height: "78%",
+                                            backgroundColor: "rgba(220, 38, 38, 0.95)",
+                                            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 +126,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 +146,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,36 @@
+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) {
+            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]);
+    return (_jsx("textarea", { ref: ref || textareaRef, value: value, onChange: onChange, onKeyDown: (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                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.js

@@ -9,11 +9,14 @@ export function InspirationMenu({ questions, onQuestionClick, onClose }) {
             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)",
+            // Use opaque background to fully mask underlying text
+            backgroundColor: "#ffffff",
+            // Remove blur so underlying content does not bleed through visually
+            boxShadow: "0 8px 28px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6)",
             padding: "0.625rem",
             animation: "slideUpMenu 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
-            zIndex: 100,
+            // Ensure the popover sits above chat bubbles and other content
+            zIndex: 1000,
         }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: {
                     display: "flex",
                     justifyContent: "space-between",
@@ -27,7 +30,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: "Suggested" }), _jsx("button", { type: "button", onClick: onClose, style: {
                             padding: "0.25rem",
                             borderRadius: "0.375rem",
                             border: "1px solid rgba(255, 255, 255, 0.2)",
@@ -52,28 +55,25 @@ export function InspirationMenu({ questions, onQuestionClick, onClose }) {
                         }, 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)",
+                        border: "1px solid rgba(0, 0, 0, 0.06)",
+                        backgroundColor: "#ffffff",
+                        color: "rgba(0, 0, 0, 0.85)",
                         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)",
+                        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.06)",
                         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.backgroundColor = "rgba(0, 122, 255, 0.1)";
+                        e.currentTarget.style.borderColor = "rgba(0, 122, 255, 0.25)";
                         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)";
+                        e.currentTarget.style.boxShadow = "0 3px 8px rgba(0, 122, 255, 0.12)";
                     }, 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.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.04), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
+                        e.currentTarget.style.boxShadow = "0 1px 2px rgba(0, 0, 0, 0.06)";
                     }, children: question }, 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 {};

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

@@ -1,15 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useEffect, useState, useId } from "react";
+import { useRef, useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { ExternalLink, User, X, Maximize2, Minimize2 } from "lucide-react";
-export function MessageList({ messages, isStreaming, aiAvatarSrc = '', onClose, onExpand, size = 'l', }) {
+import { ExternalLink } from "lucide-react";
+export function MessageList({ messages, isStreaming, aiAvatarSrc = '', size = 'l', }) {
     const messagesEndRef = useRef(null);
-    const [hoverTopExpand, setHoverTopExpand] = useState(false);
-    const [hoverTopClose, setHoverTopClose] = useState(false);
-    const idBase = useId();
-    const xTooltipId = `${idBase}-x-tip`;
-    const expandTooltipId = `${idBase}-expand-tip`;
+    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]);
@@ -19,101 +35,39 @@ export function MessageList({ messages, isStreaming, aiAvatarSrc = '', onClose,
             position: 'relative',
             flex: 1,
             overflowY: "auto",
-            marginTop: "0",
+            marginTop: "1.3rem",
             display: "flex",
             flexDirection: "column",
-            gap: "0.75rem",
+            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: [_jsxs("div", { style: { display: 'flex', gap: '0.5rem', zIndex: 20, justifyContent: 'flex-end', paddingTop: '0' }, children: [onExpand && (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("button", { type: "button", onClick: onExpand, onMouseEnter: () => setHoverTopExpand(true), onMouseLeave: () => setHoverTopExpand(false), "aria-label": size === 'xl' ? 'Restore' : 'Expand', "aria-describedby": hoverTopExpand ? expandTooltipId : undefined, style: {
-                                    borderRadius: '1.3rem',
-                                    border: '1px solid rgba(255, 255, 255, 0.3)',
-                                    backgroundColor: 'rgba(255, 255, 255, 0.12)',
-                                    padding: '0.375rem',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    color: 'rgba(0, 0, 0, 0.75)',
-                                    transition: 'all 0.15s',
-                                    cursor: 'pointer',
-                                    outline: 'none',
-                                    boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.2)',
-                                }, children: size === 'xl' ? _jsx(Minimize2, { style: { width: '0.9rem', height: '0.9rem' } }) : _jsx(Maximize2, { style: { width: '0.9rem', height: '0.9rem' } }) }), _jsx("span", { id: expandTooltipId, role: "tooltip", style: {
-                                    position: 'absolute',
-                                    top: 'calc(100% + 0.4rem)',
-                                    left: '50%',
-                                    transform: 'translateX(-50%)',
-                                    whiteSpace: 'nowrap',
-                                    background: 'rgba(0,0,0,0.9)',
-                                    color: '#fff',
-                                    padding: '4px 6px',
-                                    borderRadius: '1.3rem',
-                                    fontSize: '0.55rem',
-                                    boxShadow: '0 6px 18px rgba(0,0,0,0.35)',
-                                    opacity: hoverTopExpand ? 1 : 0,
-                                    pointerEvents: 'none',
-                                    transition: 'opacity 120ms ease-in-out',
-                                    zIndex: 30,
-                                }, children: size === 'xl' ? 'Restore' : 'Expand' })] })), onClose && (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("button", { type: "button", onClick: onClose, onMouseEnter: () => setHoverTopClose(true), onMouseLeave: () => setHoverTopClose(false), "aria-label": "Close", "aria-describedby": hoverTopClose ? xTooltipId : undefined, style: {
-                                    borderRadius: '1.3rem',
-                                    border: '1px solid rgba(255, 255, 255, 0.3)',
-                                    backgroundColor: 'rgba(255, 255, 255, 0.12)',
-                                    padding: '0.375rem',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    color: 'rgba(0, 0, 0, 0.75)',
-                                    transition: 'all 0.15s',
-                                    cursor: 'pointer',
-                                    outline: 'none',
-                                    boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.2)',
-                                }, children: _jsx(X, { style: { width: '0.9rem', height: '0.9rem' } }) }), _jsx("span", { id: xTooltipId, role: "tooltip", style: {
-                                    position: 'absolute',
-                                    top: 'calc(100% + 0.4rem)',
-                                    left: '50%',
-                                    transform: 'translateX(-50%)',
-                                    whiteSpace: 'nowrap',
-                                    background: 'rgba(0,0,0,0.9)',
-                                    color: '#fff',
-                                    padding: '4px 6px',
-                                    borderRadius: '1.3rem',
-                                    fontSize: '0.55rem',
-                                    boxShadow: '0 6px 18px rgba(0,0,0,0.35)',
-                                    opacity: hoverTopClose ? 1 : 0,
-                                    pointerEvents: 'none',
-                                    transition: 'opacity 120ms ease-in-out',
-                                    zIndex: 30,
-                                }, children: "Close" })] }))] }), messages.map((message, index) => (_jsxs("div", { style: {
+        }, className: "custom-scrollbar", children: [messages.map((message, index) => (_jsxs("div", { style: {
                     display: "flex",
-                    flexDirection: "column",
-                    alignItems: message.role === "user" ? "flex-end" : "flex-start",
+                    justifyContent: message.role === "user" ? "flex-end" : "flex-start",
                     animation: "fadeIn 0.3s ease-in",
-                    gap: "0.375rem",
+                    gap: "0.4rem",
                 }, children: [_jsx("div", { style: {
                             display: "flex",
-                            alignItems: "center",
-                            gap: "0.5rem",
-                            flexDirection: message.role === "user" ? "row-reverse" : "row"
+                            gap: "0.4rem",
+                            alignItems: message.role === "user" ? "flex-end" : "flex-start"
                         }, children: _jsx("div", { style: {
-                                width: "1.75rem",
-                                height: "1.75rem",
-                                borderRadius: message.role === "user" ? "50%" : "0.75rem",
-                                backgroundColor: message.role === "user" ? "rgba(255, 255, 255, 0.15)" : "rgba(114, 126, 237, 0.15)",
+                                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",
-                                color: "rgb(114, 126, 237)",
-                                border: message.role === "user"
-                                    ? "1px solid rgba(114, 126, 237, 0.3)"
-                                    : "1px dashed rgba(114, 126, 237, 0.3)",
-                                boxShadow: message.role === "user" ? "0 2px 4px rgba(0,0,0,0.05)" : "none",
-                            }, children: message.role === "user" ? (_jsx(User, { size: 16, color: "rgb(114, 126, 237)" })) : (aiAvatarSrc ? (_jsx("img", { src: aiAvatarSrc, alt: "AI Avatar", style: {
+                                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%",
-                                    borderRadius: "inherit",
                                     objectFit: "cover"
                                 } })) : (_jsx("div", { style: {
                                     width: "100%",
@@ -122,34 +76,58 @@ export function MessageList({ messages, isStreaming, aiAvatarSrc = '', onClose,
                                     alignItems: "center",
                                     justifyContent: "center",
                                     fontSize: "0.75rem",
-                                    color: "rgb(114, 126, 237)"
+                                    color: "rgba(217, 219, 234, 1)"
                                 }, children: "AI" }))) }) }), _jsxs("div", { style: {
                             maxWidth: "85%",
-                            padding: message.role === "user" ? "0.275rem 0.75rem" : "0.5rem 0",
+                            padding: message.role === "user" ? "0.275rem 0.5rem" : "0.5rem 0",
                             borderRadius: message.role === "user" ? "1rem" : "0",
                             fontSize: "0.875rem",
                             marginLeft: message.role === "user" ? "0" : "1rem",
                             marginRight: message.role === "user" ? "1rem" : "0",
-                            lineHeight: "1.6",
+                            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.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.7",
+                                    lineHeight: "1.4",
                                     color: "rgba(0, 0, 0, 0.85)",
-                                }, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content }) })), message.role === "assistant" && message.sources && message.sources.length > 0 && (_jsxs("div", { style: {
-                                    marginTop: "1rem",
-                                    paddingTop: "0.75rem",
+                                }, 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("p", { style: {
-                                            fontSize: "0.65rem",
-                                            fontWeight: 600,
-                                            textTransform: "uppercase",
-                                            letterSpacing: "0.05em",
-                                            color: "rgba(0, 0, 0, 0.5)",
-                                            marginBottom: "0.5rem",
-                                        }, children: "Sources" }), _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: {
+                                }, children: [_jsxs("div", { style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "space-between",
+                                            gap: "0.5rem",
+                                            marginBottom: "0.25rem",
+                                        }, children: [_jsx("p", { style: {
+                                                    fontSize: "0.65rem",
+                                                    fontWeight: 600,
+                                                    textTransform: "uppercase",
+                                                    letterSpacing: "0.05em",
+                                                    color: "rgba(0, 0, 0, 0.5)",
+                                                    margin: 0,
+                                                }, children: "Sources" }), _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.7rem",
+                                                    color: "rgba(0, 0, 0, 0.75)",
+                                                    cursor: "pointer",
+                                                    outline: "none",
+                                                }, children: expandedSourcesByMessageIndex[index] ? "Hide" : "Show" })] }), 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",
@@ -167,8 +145,8 @@ export function MessageList({ messages, isStreaming, aiAvatarSrc = '', onClose,
                                                         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 && (_jsx("div", { style: { display: "flex", justifyContent: "flex-start" }, children: _jsxs("div", { style: {
-                        padding: "0.75rem 0.6rem",
+                                                    }, 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 && (_jsx("div", { style: { display: "flex", justifyContent: "flex-start" }, children: _jsxs("div", { style: {
+                        padding: "0.25rem 0.6rem",
                         borderRadius: "1rem",
                         display: "flex",
                         gap: "0.375rem",

package/dist/goji-search/components/elements/search-input.d.ts

@@ -1,12 +1,12 @@
 import type React from "react";
 interface SearchInputProps {
     value: string;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
     onFocus: () => void;
     onBlur: () => void;
     placeholder: string;
     size: "xs" | "s" | "m" | "l" | "xl";
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLTextAreaElement>;
     inspirationQuestions: string[];
     onInspirationClick: (question: string) => void;
     sparkleRef: React.RefObject<HTMLDivElement>;