wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-07-07 00:06:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

(#309) Message navigation recursive

Browse Source
This commit is contained in:
jojopirker
2023-01-06 15:53:18 +01:00
parent a822db11a7
commit 2db310ab06
2 changed files with 99 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Messages/MessageWithChildren.tsx
+85
View File
@@ -0,0 +1,85 @@
import { Box, CircularProgress, Flex, HStack, Text } from "@chakra-ui/react";
import { useState } from "react";
import useSWR from "swr";
import fetcher from "src/lib/fetcher";
import { MessageTableEntry } from "./MessageTableEntry";
interface MessageWithChildrenProps {
id: string;
depth?: number;
maxDepth?: number;
}
export function MessageWithChildren(props: MessageWithChildrenProps) {
const { id, depth, maxDepth } = props;
const [message, setMessage] = useState(null);
const [children, setChildren] = useState(null);
const { isLoading } = useSWR(id ? `/api/messages/${id}` : null, fetcher, {
onSuccess: (data) => {
setMessage(data);
},
onError: (err, key, config) => {
setMessage(null);
},
});
const { isLoading: isLoadingChildren } = useSWR(id ? `/api/messages/${id}/children` : null, fetcher, {
onSuccess: (data) => {
setChildren(data);
},
onError: (err, key, config) => {
setChildren(null);
},
});
const renderRecursive = maxDepth && ((depth && (depth < maxDepth)) || !depth);
if (isLoading || isLoadingChildren) {
return (<CircularProgress isIndeterminate />)
}
return (
<>
{message && (<>
<Text align="center" fontSize="xl">
{(depth === 0 || !depth) ? "Message" : depth === 1 ? "Children" : "Ancestor"}
</Text>
<Flex justifyContent="center">
<Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]}>
<Box rounded="lg" p="2">
<MessageTableEntry item={message} idx={1} />
</Box>
</Box>
</Flex>
</>
)}
{children && Array.isArray(children) && children.length > 0 ?
renderRecursive ?
<HStack spacing={8} alignItems="start" justifyContent="center">
{children.map((item, idx) => (
<Box flex="1">
<MessageWithChildren id={item.id} depth={depth ? depth + 1 : 1} maxDepth={maxDepth} key={`recursiveMessageWChildren_${idx}`} />
</Box>))}
</HStack> :
(
<>
<Text align="center" fontSize="xl">
{(depth === 0 || !depth) ? "Children" : "Ancestor"}
</Text>
<HStack spacing={8} alignItems="start" justifyContent="center">
{children.map((item, idx) => (
<Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]} key={idx}>
<Box rounded="lg" p="2">
<MessageTableEntry item={item} idx={idx * 2} />
</Box>
</Box>
))}
</HStack>
</>
) : <></>}
</>);
}
website/src/pages/messages/[id]/index.tsx
+14 -57
View File
@@ -1,42 +1,22 @@
import { Box, Container, Text, HStack, useColorModeValue } from "@chakra-ui/react";
import { Box, Container, Text, useColorModeValue } from "@chakra-ui/react";
import Head from "next/head";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import useSWRImmutable from "swr/immutable";
import { useState } from "react";
import useSWR from "swr";
import fetcher from "src/lib/fetcher";
import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
import { colors } from "styles/Theme/colors";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { MessageWithChildren } from "src/components/Messages/MessageWithChildren";
const MessageDetail = () => {
const bg = useColorModeValue("white", colors.dark.bg);
const mainBg = useColorModeValue("bg-slate-300", "bg-slate-900");
const router = useRouter();
const { id } = router.query;
/** State arrays of messages */
const [message, setMessage] = useState(null);
const [parent, setParent] = useState(null);
const [children, setChildren] = useState(null);
/** Fetching functions */
const { isLoading } = useSWRImmutable(id ? `/api/messages/${id}` : null, fetcher, {
onSuccess: (data) => {
setMessage(data);
},
onError: (err, key, config) => {
setMessage(null);
},
});
const { isLoading: isLoadingChildren } = useSWRImmutable(id ? `/api/messages/${id}/children` : null, fetcher, {
onSuccess: (data) => {
setChildren(data);
},
onError: (err, key, config) => {
setChildren(null);
},
});
const { isLoading: isLoadingParent } = useSWRImmutable(id ? `/api/messages/${id}/parent` : null, fetcher, {
const { isLoading: isLoadingParent } = useSWR(id ? `/api/messages/${id}/parent` : null, fetcher, {
onSuccess: (data) => {
setParent(data);
},
@@ -45,7 +25,7 @@ const MessageDetail = () => {
},
});
if (isLoading || isLoadingChildren || isLoadingParent) {
if (isLoadingParent) {
return <LoadingScreen text="Loading..." />;
}
return (
@@ -57,45 +37,22 @@ const MessageDetail = () => {
content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
/>
</Head>
<main>
<Container w="100%">
<main className={`${mainBg}`}>
<Container w="100%" pt={[2, 2, 4, 4]}>
{parent && (
<>
<Text align="center" fontSize="xl" pt="4">
<Text align="center" fontSize="xl">
Parent
</Text>
<Box my="3" bg={bg} rounded="lg" pb="4" px="4">
<Box rounded="lg" p="2">
<MessageTableEntry item={parent} idx={1} />
</Box>
</>
)}
{message && (
<>
<Text align="center" fontSize="xl">
Message
</Text>
<Box my="3" bg={bg} rounded="lg" pb="4" px="4">
<MessageTableEntry item={message} idx={1} />
</Box>
</>
)}
</Container>
{children && Array.isArray(children) && children.length > 0 && (
<>
<Text align="center" fontSize="xl">
Children
</Text>
<HStack spacing={8} alignItems="start" justifyContent="center">
{children.map((item, idx) => (
<Box maxWidth="container.sm" flex="1" px="6" key={idx}>
<Box my="3" bg={bg} rounded="lg" pb="4" px="6">
<MessageTableEntry item={item} idx={idx * 2} />
</Box>
</Box>
))}
</HStack>
</>
)}
<Box pb="4">
<MessageWithChildren id={id} maxDepth={2} />
</Box>
</main>
</>
);