Spaces:
Paused
Paused
File size: 3,351 Bytes
054d282 9f076f8 054d282 9f076f8 054d282 cd33332 9f076f8 cd33332 592db31 054d282 592db31 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 |
import Link from "next/link";
import Parser from "html-react-parser";
import PaginationButtons from "./PaginationButtons";
import { MemoizedReactMarkdown } from './MemoizedReactMarkdown';
export default function WebSearchResults({ aiResponse, results }) {
return (
<div className="w-full mx-auto px-3 pb-40 sm:pb-24 sm:pl-[5%] md:pl-[14%] lg:pl-52">
<div className="w-1/4">
<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>
</div>
<div className="flex-grow">
<p className="text-gray-600 text-sm mb-5 mt-3">
About {results.searchInformation?.formattedTotalResults} results (
{results.searchInformation?.formattedSearchTime} seconds)
</p>
{results.items?.map((result) => (
<div className="mb-8 max-w-xl" key={result.link}>
<div className="group flex flex-col">
<Link rel="noopener noreferrer" target="_blank" className="text-sm truncate" href={result.link}>
{result.formattedUrl}
</Link>
<Link
rel="noopener noreferrer" target="_blank"
className="group-hover:underline decoration-blue-800 text-xl truncate font-medium text-blue-800"
href={result.link}
>
{result.title}
</Link>
</div>
<p className="text-gray-600">{Parser(result.htmlSnippet)}</p>
</div>
))}
<PaginationButtons />
</div>
</div>
);
}
|