+ {/* Avatar */}
+
+ {isUser ? : }
+
+
+ {/* Message content */}
+
+ {/* Message bubble */}
+
+ {isLoading ? (
+
+
+ {message.content}
+
+ ) : (
+
+ {message.content}
+
+ )}
+
+
+ {/* Sources */}
+ {message.sources && message.sources.length > 0 && config.features?.enableSourceCitations && (
+
+
+ Sources:
+
+
+ {message.sources.map((source, index) => (
+
+ ))}
+
+ )}
+
+ {/* Timestamp */}
+
+ {message.timestamp.toLocaleTimeString([], {
+ hour: '2-digit',
+ minute: '2-digit'
+ })}
+
+
+
+
+
+ {results.total} result{results.total !== 1 ? 's' : ''} found
+
+
+
+
+ {results.processingTime.toFixed(0)}ms
+
+
+
+
+ {results.results.map((result, index) => (
+
handleResultClick(result)}
+ onMouseEnter={(e) => {
+ if (result.url) {
+ e.currentTarget.style.borderColor = 'var(--primary-color)';
+ e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
+ }
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.borderColor = '#e1e5e9';
+ e.currentTarget.style.boxShadow = 'none';
+ }}
+ >
+ {/* Result header */}
+
+
+
+ {result.title}
+
+
+ {result.url && (
+
+ {new URL(result.url).hostname}
+
+ )}
+
+
+
+
+ {Math.round(result.score * 100)}%
+
+
+ {result.url ? (
+
+ ) : (
+
+ )}
+
+
+
+ {/* Result content */}
+
+ {config.features?.enableResultHighlighting && result.highlights ? (
+
h.fragments.join(' ... '))
+ .join(' ... ')
+ }}
+ />
+ ) : (
+ result.content
+ )}
+
+
+ {/* Result position indicator */}
+
+ {index + 1}
+
+
+ ))}
+
+
+ {/* Load more button */}
+ {results.results.length < results.total && (
+
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/packages/widget/src/components/SearchBox.tsx b/packages/widget/src/components/SearchBox.tsx
new file mode 100644
index 0000000..c955549
--- /dev/null
+++ b/packages/widget/src/components/SearchBox.tsx
@@ -0,0 +1,244 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { WidgetConfig } from '@ai-search/shared';
+import { Search, Loader2, Mic } from 'lucide-react';
+import { useSearchStore } from '../store/search-store';
+import { useSearch } from '../hooks/useSearch';
+import { clsx } from 'clsx';
+
+interface SearchBoxProps {
+ config: WidgetConfig;
+ onSearch?: (query: string) => void;
+}
+
+export function SearchBox({ config, onSearch }: SearchBoxProps) {
+ const {
+ query,
+ isLoading,
+ suggestions,
+ setQuery,
+ } = useSearchStore();
+
+ const { search, getSuggestions } = useSearch();
+ const [showSuggestions, setShowSuggestions] = useState(false);
+ const [selectedSuggestion, setSelectedSuggestion] = useState(-1);
+ const inputRef = useRef
(null);
+ const suggestionsRef = useRef(null);
+
+ const handleInputChange = (e: React.ChangeEvent) => {
+ const value = e.target.value;
+ setQuery(value);
+
+ if (value.trim() && config.features?.enableAutoComplete) {
+ getSuggestions(value);
+ setShowSuggestions(true);
+ setSelectedSuggestion(-1);
+ } else {
+ setShowSuggestions(false);
+ }
+ };
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (query.trim()) {
+ search();
+ onSearch?.(query);
+ setShowSuggestions(false);
+ }
+ };
+
+ const handleSuggestionClick = (suggestion: string) => {
+ setQuery(suggestion);
+ search(suggestion);
+ onSearch?.(suggestion);
+ setShowSuggestions(false);
+ inputRef.current?.focus();
+ };
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (!showSuggestions || suggestions.length === 0) return;
+
+ switch (e.key) {
+ case 'ArrowDown':
+ e.preventDefault();
+ setSelectedSuggestion(prev =>
+ prev < suggestions.length - 1 ? prev + 1 : prev
+ );
+ break;
+ case 'ArrowUp':
+ e.preventDefault();
+ setSelectedSuggestion(prev => prev > 0 ? prev - 1 : -1);
+ break;
+ case 'Enter':
+ if (selectedSuggestion >= 0) {
+ e.preventDefault();
+ handleSuggestionClick(suggestions[selectedSuggestion]);
+ }
+ break;
+ case 'Escape':
+ setShowSuggestions(false);
+ setSelectedSuggestion(-1);
+ break;
+ }
+ };
+
+ // Close suggestions when clicking outside
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ suggestionsRef.current &&
+ !suggestionsRef.current.contains(event.target as Node) &&
+ !inputRef.current?.contains(event.target as Node)
+ ) {
+ setShowSuggestions(false);
+ }
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => document.removeEventListener('mousedown', handleClickOutside);
+ }, []);
+
+ return (
+
+
+
+ {/* Suggestions dropdown */}
+ {showSuggestions && suggestions.length > 0 && (
+
+ {suggestions.map((suggestion, index) => (
+
handleSuggestionClick(suggestion)}
+ onMouseEnter={() => setSelectedSuggestion(index)}
+ >
+
+ {suggestion}
+
+ ))}
+
+ )}
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
{
+ toggleOpen();
+ trackEvent('widget_closed');
+ }}
+ onMinimize={() => {
+ useSearchStore.getState().toggleMinimized();
+ trackEvent('widget_minimized');
+ }}
+ >
+ {messages.length === 0 ? (
+
+ {config.content?.welcomeMessage && (
+
+ {config.content.welcomeMessage}
+
+ )}
+
trackEvent('search_initiated', { query })}
+ />
+
+
+ {/* Header */}
+
+
+ {config.name || 'AI Search'}
+
+
+
+
+
+
+
+
+
+ {/* Content */}
+ {!isMinimized && (
+
+ {children}
+
+ )}
+
+ {/* Footer */}
+ {!isMinimized && config.content?.poweredByText && (
+
+ {config.content.poweredByText}
+
+ )}
+