Spaces:
Paused
Paused
File size: 3,103 Bytes
834cad6 9f076f8 d9a1036 b0c21fa 054d282 9f076f8 328552e eef247f 9285db9 054d282 9f076f8 a8a624f 9f076f8 eef247f 328552e ac695ee eef247f ac695ee 054d282 916e00a 054d282 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
"use client"
import { useEffect, useState } from "react";
import { URL } from 'url';
import { MemoizedReactMarkdown } from '../../../components/MemoizedReactMarkdown'
export default function WebSearchPage({ searchParams }) {
const [aiResponse, setAiResponse] = useState("");
const [eventSource, setEventSource] = useState(null);
const [searchTerm, setSearchTerm] = useState()
useEffect(() => {
setSearchTerm(searchParams.searchTerm)
}, [searchParams])
useEffect(() => {
const url = new URL(`/api/llm?question=${searchTerm}`);
console.log(url);
// No need to make a fetch request. Directly open the EventSource connection.
const es = new EventSource(url);
setEventSource(es);
return () => {
if (es) es.close(); // Close the EventSource when the component is unmounted.
};
}, [searchParams]);
// Add event listener for the EventSource
useEffect(() => {
if (eventSource) {
eventSource.onmessage = (event) => {
setAiResponse(prev => prev + event.data);
};
eventSource.onerror = (event) => {
console.error("EventSource failed:", event);
};
}
return () => {
if (eventSource) {
eventSource.close();
}
};
}, [eventSource]);
console.log(aiResponse);
return (
<div className="flex flex-row">
<MemoizedReactMarkdown
className="prose dark:prose-invert flex-1"
components={{
code({ node, inline, className, children, ...props }) {
if (children.length) {
if (children[0] == '▍') {
return <span className="animate-pulse cursor-default mt-1">▍</span>
}
children[0] = (children[0]).replace("`▍`", "▍")
}
const match = /language-(\w+)/.exec(className || '');
return !inline ? (
<CodeBlock
key={Math.random()}
language={(match && match[1]) || ''}
value={String(children).replace(/\n$/, '')}
{...props}
/>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
table({ children }) {
return (
<table className="border-collapse border border-black px-3 py-1 dark:border-white">
{children}
</table>
);
},
th({ children }) {
return (
<th className="break-words border border-black bg-gray-500 px-3 py-1 text-white dark:border-white">
{children}
</th>
);
},
td({ children }) {
return (
<td className="break-words border border-black px-3 py-1 dark:border-white">
{children}
</td>
);
},
}}
>
{aiResponse}
</MemoizedReactMarkdown>
</div>
);
}
|