79 lines
2.1 KiB
JavaScript
79 lines
2.1 KiB
JavaScript
import { Box, Heading, HStack, Icon, Text } from "@chakra-ui/react";
|
|
import { FaBolt } from "react-icons/fa";
|
|
import ChatTypingLoader from "../loading/ChatTypingLoader";
|
|
import {
|
|
IoDocumentTextOutline,
|
|
IoImageOutline,
|
|
IoVideocamOutline,
|
|
} from "react-icons/io5";
|
|
import ReactMarkdown from "react-markdown";
|
|
import remarkBreaks from "remark-breaks";
|
|
|
|
const iconsDic = {
|
|
llm: IoDocumentTextOutline,
|
|
image: IoImageOutline,
|
|
video: IoVideocamOutline,
|
|
};
|
|
|
|
function ResultBox({ type = "llm", loading = false, resultData = "" }) {
|
|
return (
|
|
<Box
|
|
w={"100%"}
|
|
minHeight={"200px"}
|
|
p={4}
|
|
bg="#f5effd"
|
|
boxShadow="sm"
|
|
marginBottom={"4px"}
|
|
border={"1px"}
|
|
borderColor={"purple.100"}
|
|
borderRadius={"10px"}
|
|
>
|
|
<Box
|
|
width={"100%"}
|
|
backgroundColor={"white"}
|
|
padding={"5px"}
|
|
borderRadius={"5px"}
|
|
as={HStack}
|
|
justifyContent={"space-between"}
|
|
id="question"
|
|
>
|
|
<HStack alignItems={"center"} justifyContent={"start"}>
|
|
<Icon as={iconsDic[type]} fontSize={"20px"} />
|
|
<Text fontWeight="bold" fontSize={"18px"}>
|
|
نتیجه
|
|
</Text>
|
|
</HStack>
|
|
<FaBolt color="purple" />
|
|
</Box>
|
|
<Box mt={4} mr={2} whiteSpace="pre-line">
|
|
{loading && (
|
|
<HStack
|
|
w="100%"
|
|
alignItems="center"
|
|
justifyContent="flex-start"
|
|
mt={2}
|
|
>
|
|
<ChatTypingLoader size="16px" />
|
|
</HStack>
|
|
)}
|
|
|
|
{type === "llm" && !loading && (
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkBreaks]}
|
|
components={{
|
|
h1: (props) => <Heading as="h1" size="xl" my={2} {...props} />,
|
|
h2: (props) => <Heading as="h2" size="lg" my={2} {...props} />,
|
|
h3: (props) => <Heading as="h3" size="md" my={2} {...props} />,
|
|
p: (props) => <Text fontSize="16px" my={1} {...props} />,
|
|
}}
|
|
>
|
|
{resultData}
|
|
</ReactMarkdown>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default ResultBox;
|