-
-
-
-
-
-
-
-
Search stats for nerds
-
{
- navigator.clipboard.writeText(JSON.stringify(searchStats, null, 2));
- return true;
- }}
- className="ml-auto"
- />
-
- {
- fileMatches.length > 0 ? (
-
{`[${searchDurationMs} ms] Found ${numMatches} matches in ${fileMatches.length} ${fileMatches.length > 1 ? 'files' : 'file'}`}
- ) : (
-
No results
- )
- }
- {isMoreResultsButtonVisible && (
-
- (load more)
-
+ {isStreaming ? (
+ <>
+
+
Searching...
+ {numMatches > 0 && (
+
{`Found ${numMatches} matches in ${fileMatches.length} ${fileMatches.length > 1 ? 'files' : 'file'}`}
+ )}
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
Search stats for nerds
+
{
+ navigator.clipboard.writeText(JSON.stringify(searchStats, null, 2));
+ return true;
+ }}
+ className="ml-auto"
+ />
+
+ {
+ fileMatches.length > 0 ? (
+
{`[${searchDurationMs} ms] Found ${numMatches} matches in ${fileMatches.length} ${fileMatches.length > 1 ? 'files' : 'file'}`}
+ ) : (
+
No results
+ )
+ }
+ {isMoreResultsButtonVisible && (
+
+ (load more)
+
+ )}
+
)}
No results found
diff --git a/packages/web/src/app/[domain]/search/useStreamedSearch.ts b/packages/web/src/app/[domain]/search/useStreamedSearch.ts
new file mode 100644
index 00000000..2369346a
--- /dev/null
+++ b/packages/web/src/app/[domain]/search/useStreamedSearch.ts
@@ -0,0 +1,171 @@
+'use client';
+
+import { RepositoryInfo, SearchRequest, SearchResponse, SearchResultFile } from '@/features/search/types';
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+
+export const useStreamedSearch = ({ query, matches, contextLines, whole }: SearchRequest) => {
+
+ const [state, setState] = useState<{
+ isStreaming: boolean,
+ error: Error | null,
+ files: SearchResultFile[],
+ repoInfo: Record
,
+ durationMs: number,
+ numMatches: number,
+ }>({
+ isStreaming: false,
+ error: null,
+ files: [],
+ repoInfo: {},
+ durationMs: 0,
+ numMatches: 0,
+ });
+
+ const abortControllerRef = useRef(null);
+
+ const cancel = useCallback(() => {
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort();
+ abortControllerRef.current = null;
+ }
+ setState(prev => ({
+ ...prev,
+ isStreaming: false,
+ }));
+ }, []);
+
+ useEffect(() => {
+ const search = async () => {
+ const startTime = performance.now();
+
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort();
+ }
+ abortControllerRef.current = new AbortController();
+
+ setState({
+ isStreaming: true,
+ error: null,
+ files: [],
+ repoInfo: {},
+ durationMs: 0,
+ numMatches: 0,
+ });
+
+ try {
+ const response = await fetch('/api/stream_search', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ query,
+ matches,
+ contextLines,
+ whole,
+ }),
+ signal: abortControllerRef.current.signal,
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ if (!response.body) {
+ throw new Error('No response body');
+ }
+
+ const reader = response.body.getReader();
+ const decoder = new TextDecoder();
+ let buffer = '';
+
+ while (true as boolean) {
+ const { done, value } = await reader.read();
+
+ if (done) {
+ break;
+ }
+
+ // Decode the chunk and add to buffer
+ buffer += decoder.decode(value, { stream: true });
+
+ // Process complete SSE messages (separated by \n\n)
+ const messages = buffer.split('\n\n');
+
+ // Keep the last element (potentially incomplete message) in the buffer for the next chunk.
+ // Stream chunks can split messages mid-way, so we only process complete messages.
+ buffer = messages.pop() || '';
+
+ for (const message of messages) {
+ if (!message.trim()) {
+ continue;
+ }
+
+ // SSE messages start with "data: "
+ const dataMatch = message.match(/^data: (.+)$/);
+ if (!dataMatch) continue;
+
+ const data = dataMatch[1];
+
+ // Check for completion signal
+ if (data === '[DONE]') {
+ setState(prev => ({ ...prev, isStreaming: false }));
+ return;
+ }
+
+ try {
+ const chunk: SearchResponse = JSON.parse(data);
+ setState(prev => ({
+ ...prev,
+ files: [
+ ...prev.files,
+ ...chunk.files
+ ],
+ repoInfo: {
+ ...prev.repoInfo,
+ ...chunk.repositoryInfo.reduce((acc, repo) => {
+ acc[repo.id] = repo;
+ return acc;
+ }, {} as Record),
+ },
+ numMatches: prev.numMatches + chunk.stats.actualMatchCount,
+ }));
+ } catch (parseError) {
+ console.error('Error parsing chunk:', parseError);
+ }
+ }
+ }
+
+ setState(prev => ({ ...prev, isStreaming: false }));
+ } catch (error) {
+ if ((error as Error).name === 'AbortError') {
+ console.log('Stream aborted');
+ } else {
+ setState(prev => ({
+ ...prev,
+ isStreaming: false,
+ error: error as Error,
+ }));
+ }
+ } finally {
+ const endTime = performance.now();
+ const durationMs = endTime - startTime;
+ setState(prev => ({
+ ...prev,
+ durationMs,
+ }));
+ }
+ }
+
+ search();
+
+ return () => {
+ }
+ }, [query, matches, contextLines, whole]);
+
+ return {
+ ...state,
+ cancel,
+ };
+}
\ No newline at end of file
diff --git a/packages/web/src/app/[domain]/stream_search/page.tsx b/packages/web/src/app/[domain]/stream_search/page.tsx
deleted file mode 100644
index 86c1e968..00000000
--- a/packages/web/src/app/[domain]/stream_search/page.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useStreamingSearch } from './useStreamingSearch';
-import type { FileMatch__Output } from './types';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Separator } from '@/components/ui/separator';
-import { Loader2 } from 'lucide-react';
-
-// @nocheckin
-export default function StreamSearchPage() {
- const [query, setQuery] = useState('useMemo');
- const [matches, setMatches] = useState(10000);
- const [contextLines, _setContextLines] = useState(5);
-
- const {
- chunks,
- isStreaming,
- totalFiles,
- totalMatches,
- error,
- streamSearch,
- cancel,
- reset
- } = useStreamingSearch();
-
- const handleSearch = () => {
- streamSearch({
- query,
- matches,
- contextLines,
- whole: false,
- });
- };
-
- return (
-
-
-
-
Streaming Search Demo
-
- Test the SSE streaming search API with real-time results
-
-
-
-
-
- {/* Search Controls */}
-
-
-
-
-
- {isStreaming && (
-
- )}
- {chunks.length > 0 && !isStreaming && (
-
- )}
-
-
-
-
-
- {/* Results Stats */}
- {(isStreaming || chunks.length > 0) && (
-
-
-
- Status:{' '}
- {isStreaming ? (
-
- 🔄 Streaming...
-
- ) : (
-
- ✓ Complete
-
- )}
-
-
- Chunks:{' '}
- {chunks.length}
-
-
- Files:{' '}
- {totalFiles}
-
-
- Matches:{' '}
- {totalMatches}
-
-
-
- )}
-
- {/* Error Display */}
- {error && (
-
-
- Error occurred:
-
-
- {error.message}
-
-
- )}
-
- {/* Results Display */}
- {chunks.length > 0 && (
-
-
- Results ({chunks.length} chunks)
-
-
-
- {chunks.map((chunk, i) => (
-
-
-
- Chunk {i + 1}
-
-
- {chunk.response_chunk?.files?.length || 0} files, {' '}
- {chunk.response_chunk?.stats?.match_count || 0} matches
-
-
-
- {chunk.response_chunk?.files && chunk.response_chunk.files.length > 0 && (
-
- {chunk.response_chunk.files.map((file: FileMatch__Output, j: number) => {
- // Decode file_name from Buffer to string
- const fileName = file.file_name
- ? Buffer.from(file.file_name).toString('utf-8')
- : 'Unknown file';
-
- return (
-
-
- 📄 {fileName}
-
- {file.repository && (
-
- {file.repository}
-
- )}
- {file.language && (
-
- Language: {file.language}
-
- )}
-
- );
- })}
-
- )}
-
- ))}
-
-
- )}
-
- {/* Empty State */}
- {!isStreaming && chunks.length === 0 && !error && (
-
-
Enter a search query and click “Search” to start streaming results
-
- )}
-
-