From d0bc72076121d58f8e2605f42e69904465a941ba Mon Sep 17 00:00:00 2001 From: jojopirker Date: Thu, 5 Jan 2023 12:17:45 +0100 Subject: [PATCH] inital try for navigation messages trees should be redone probably in a recursive way... --- .../components/Messages/MessageTableEntry.tsx | 12 ++- .../src/pages/api/messages/[id]/children.ts | 27 +++++++ .../pages/api/messages/[id]/conversation.ts | 27 +++++++ website/src/pages/api/messages/[id]/index.ts | 27 +++++++ website/src/pages/api/messages/[id]/parent.ts | 48 +++++++++++ .../api/messages/{index.tsx => index.ts} | 0 .../pages/api/messages/{user.tsx => user.ts} | 0 website/src/pages/messages/[id]/index.tsx | 80 +++++++++++++++++++ 8 files changed, 220 insertions(+), 1 deletion(-) create mode 100644 website/src/pages/api/messages/[id]/children.ts create mode 100644 website/src/pages/api/messages/[id]/conversation.ts create mode 100644 website/src/pages/api/messages/[id]/index.ts create mode 100644 website/src/pages/api/messages/[id]/parent.ts rename website/src/pages/api/messages/{index.tsx => index.ts} (100%) rename website/src/pages/api/messages/{user.tsx => user.ts} (100%) create mode 100644 website/src/pages/messages/[id]/index.tsx diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx index 2bc17201..d272b960 100644 --- a/website/src/components/Messages/MessageTableEntry.tsx +++ b/website/src/components/Messages/MessageTableEntry.tsx @@ -3,7 +3,17 @@ import { boolean } from "boolean"; import NextLink from "next/link"; import { FlaggableElement } from "../FlaggableElement"; -export function MessageTableEntry({ item, idx }) { +interface Message { + text: string; + id: string; + is_assistant: boolean; +} +interface MessageTableEntryProps { + item: Message; + idx: number; +} +export function MessageTableEntry(props: MessageTableEntryProps) { + const { item, idx } = props; const bgColor = useColorModeValue(idx % 2 === 0 ? "bg-slate-800" : "bg-black", "bg-sky-900"); return ( diff --git a/website/src/pages/api/messages/[id]/children.ts b/website/src/pages/api/messages/[id]/children.ts new file mode 100644 index 00000000..9c8fb84a --- /dev/null +++ b/website/src/pages/api/messages/[id]/children.ts @@ -0,0 +1,27 @@ +import { getToken } from "next-auth/jwt"; + +const handler = async (req, res) => { + const token = await getToken({ req }); + + // Return nothing if the user isn't registered. + if (!token) { + res.status(401).end(); + return; + } + + const { id } = req.query; + + const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}/children`, { + method: "GET", + headers: { + "X-API-Key": process.env.FASTAPI_KEY, + "Content-Type": "application/json", + }, + }); + const messages = await messagesRes.json(); + + // Send recieved messages to the client. + res.status(200).json(messages); +}; + +export default handler; diff --git a/website/src/pages/api/messages/[id]/conversation.ts b/website/src/pages/api/messages/[id]/conversation.ts new file mode 100644 index 00000000..6fa8feb9 --- /dev/null +++ b/website/src/pages/api/messages/[id]/conversation.ts @@ -0,0 +1,27 @@ +import { getToken } from "next-auth/jwt"; + +const handler = async (req, res) => { + const token = await getToken({ req }); + + // Return nothing if the user isn't registered. + if (!token) { + res.status(401).end(); + return; + } + + const { id } = req.query; + + const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}/conversation`, { + method: "GET", + headers: { + "X-API-Key": process.env.FASTAPI_KEY, + "Content-Type": "application/json", + }, + }); + const messages = await messagesRes.json(); + + // Send recieved messages to the client. + res.status(200).json(messages); +}; + +export default handler; diff --git a/website/src/pages/api/messages/[id]/index.ts b/website/src/pages/api/messages/[id]/index.ts new file mode 100644 index 00000000..8e056532 --- /dev/null +++ b/website/src/pages/api/messages/[id]/index.ts @@ -0,0 +1,27 @@ +import { getToken } from "next-auth/jwt"; + +const handler = async (req, res) => { + const token = await getToken({ req }); + + // Return nothing if the user isn't registered. + if (!token) { + res.status(401).end(); + return; + } + + const { id } = req.query; + + const messageRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}`, { + method: "GET", + headers: { + "X-API-Key": process.env.FASTAPI_KEY, + "Content-Type": "application/json", + }, + }); + const message = await messageRes.json(); + + // Send recieved messages to the client. + res.status(200).json(message); +}; + +export default handler; diff --git a/website/src/pages/api/messages/[id]/parent.ts b/website/src/pages/api/messages/[id]/parent.ts new file mode 100644 index 00000000..05a69cfa --- /dev/null +++ b/website/src/pages/api/messages/[id]/parent.ts @@ -0,0 +1,48 @@ +import { getToken } from "next-auth/jwt"; + +const handler = async (req, res) => { + const token = await getToken({ req }); + + // Return nothing if the user isn't registered. + if (!token) { + res.status(401).end(); + return; + } + + const { id } = req.query; + + if(!id){ + res.status(400).end() + return; + } + + const messageRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${id}`, { + method: "GET", + headers: { + "X-API-Key": process.env.FASTAPI_KEY, + "Content-Type": "application/json", + }, + }); + + const message = await messageRes.json(); + + if(!message.parent_id){ + res.status(404).end(); + return; + } + + const parentRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages/${message.parent_id}`, { + method: "GET", + headers: { + "X-API-Key": process.env.FASTAPI_KEY, + "Content-Type": "application/json", + }, + }); + + const parent = await parentRes.json(); + + // Send recieved messages to the client. + res.status(200).json(parent); +}; + +export default handler; diff --git a/website/src/pages/api/messages/index.tsx b/website/src/pages/api/messages/index.ts similarity index 100% rename from website/src/pages/api/messages/index.tsx rename to website/src/pages/api/messages/index.ts diff --git a/website/src/pages/api/messages/user.tsx b/website/src/pages/api/messages/user.ts similarity index 100% rename from website/src/pages/api/messages/user.tsx rename to website/src/pages/api/messages/user.ts diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx new file mode 100644 index 00000000..8816fcba --- /dev/null +++ b/website/src/pages/messages/[id]/index.tsx @@ -0,0 +1,80 @@ +import { Box, Container, Flex, HStack, 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 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"; + +const MessageDetail = () => { + const bg = useColorModeValue("white", colors.dark.bg); + const router = useRouter() + const { id } = router.query + const [message, setMessage] = useState(null); + const [parent, setParent]= useState(null); + const [children, setChildren] = useState(null); + + const { isLoading } = useSWRImmutable(`/api/messages/${id}`, fetcher, { + onSuccess: (data) => { + setMessage(data); + }, + }); + + const { isLoading: isLoadingChildren } = useSWRImmutable(`/api/messages/${id}/children`, fetcher, { + onSuccess: (data) => { + setChildren(data); + }, + }); + + const { isLoading: isLoadingParent } = useSWRImmutable(`/api/messages/${id}/parent`, fetcher, { + + onSuccess: (data) => { + console.log(data); + setParent(data); + }, + onError: (err, key, config) => { + console.log(parent); + } + }); + + if (isLoading || isLoadingChildren || isLoadingParent) { + return ; + } + return <> + + Open Assistant + + +
+ + {parent && + + + + } + {message && + + + + } + + {children && Array.isArray(children) && + + {children.map((item, idx) => + + + + )} + + } +
+ +} + +export default MessageDetail; \ No newline at end of file