update for integration with backend

introduce conversations list
introduce layout

package.json

@@ -28,6 +28,7 @@
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-query": "^3.39.3",
     "sass": "^1.62.1",
     "socket.io-client": "^4.6.2",
     "typescript": "5.0.3"

src/components/ChatThread/index.tsx

@@ -1,21 +1,22 @@
-import React, {FunctionComponent, useEffect} from 'react'
+import React, {FunctionComponent} from 'react'
 import MessageBox from '@/components/MessageBox'
 import styles from './styles.module.scss'
 import {ChatHistory} from "@/types/ChatRequest";
+import {Message} from "@/types/ChatThread";
 
 type ChatThreadProps = {
-  completion: string
+  response?: Omit<Message, 'id'>,
   chatHistory: ChatHistory
 }
 
-const ChatThread: FunctionComponent<ChatThreadProps> = ({chatHistory, completion}) => {
+const ChatThread: FunctionComponent<ChatThreadProps> = ({chatHistory, response}) => {
 
   return (
     <div className={styles.chatThread}>
-      {chatHistory.map(({content, type}, key) => (
-        <MessageBox key={key} sender={type} bubble={type === 'ai'} message={content}/>
+      {chatHistory.map((message, key) => (
+        <MessageBox key={key} message={message}/>
       ))}
-      {completion && <MessageBox sender={"ai"} bubble={true} message={completion}/>}
+      {response && <MessageBox bubble={true} message={response}/>}
     </div>
   )
 }

src/components/ChatThread/styles.module.scss

@@ -1,3 +1,3 @@
 .chatThread {
-
+  overflow: auto;
 }

src/components/ConversationsList/ConversationItem/index.tsx

@@ -0,0 +1,18 @@
+import React, {FunctionComponent} from 'react';
+import Link from "next/link";
+import {ConversationItem as Conversation} from "@/types/ChatThread";
+import styles from "./styles.module.scss";
+
+type ConversationItemProps = {
+  conversation: Conversation
+}
+
+const ConversationItem: FunctionComponent<ConversationItemProps> = ({ conversation }) => {
+  return (
+    <Link className={styles.conversationItem} href={`/conversation/${conversation.id}`}>
+      {conversation.title}
+    </Link>
+  );
+}
+
+export default ConversationItem;

src/components/ConversationsList/ConversationItem/styles.module.scss

@@ -0,0 +1,6 @@
+.conversationItem {
+  display: block;
+  padding: 0.8rem;
+  border-radius: 1rem;
+  border: 1px solid var(--primary-foreground);
+}

src/components/ConversationsList/index.tsx

@@ -0,0 +1,19 @@
+import React, {FunctionComponent} from 'react';
+import {useQuery} from "react-query";
+import {ConversationItem as Conversation} from "@/types/ChatThread";
+import ConversationItem from "@/components/ConversationsList/ConversationItem";
+
+const ConversationsList: FunctionComponent = (props) => {
+  const {data} = useQuery<Conversation[]>("conversations", () => {
+    return fetch(process.env.NEXT_PUBLIC_BACKEND_API + "/api/conversations").then((res) => res.json());
+  });
+  return (
+    <div>
+      {data && data.map((conversation) => {
+        return <ConversationItem key={conversation.id} conversation={conversation} />
+      })}
+    </div>
+  );
+}
+
+export default ConversationsList;

src/components/Layout/index.tsx

@@ -0,0 +1,30 @@
+import React, {FC, PropsWithChildren} from 'react'
+import styles from './styles.module.scss'
+import clsx from "clsx";
+import ConversationsList from "@/components/ConversationsList";
+import UploadPDF from "@/components/UploadPDF";
+import ThemeChanger from "@/components/ThemeChanger";
+
+type ScaffoldingProps = {
+  className?: string
+  mainContentClassName?: string
+}
+
+const Scaffolding: FC<PropsWithChildren<ScaffoldingProps>> = ({className, mainContentClassName, children}) => {
+  return (
+    <div id="root" className={clsx(styles.container, className)}>
+      <header>
+        <UploadPDF/>
+        <ThemeChanger/>
+      </header>
+      <aside>
+        <ConversationsList/>
+      </aside>
+      <main className={clsx(styles.contentWrapper, mainContentClassName)}>
+        {children}
+      </main>
+    </div>
+  )
+}
+
+export default Scaffolding

src/components/Layout/styles.module.scss

@@ -0,0 +1,40 @@
+@import "src/styles/background-patterns";
+
+.container {
+  display: grid;
+  height: 100vh;
+  grid-template-columns: 300px auto;
+    grid-template-rows: 100px calc(100vh - 100px);
+  grid-template-areas: "header header"
+                       "aside main";
+  grid-gap: 0 1rem;
+
+  > header {
+    grid-area: header;
+    display: flex;
+    padding: 1rem;
+    align-items: center;
+    justify-content: space-between;
+    @include background-pattern-2(var(--secondary-background), var(--primary-background));
+  }
+
+  > aside, > main {
+    padding: 1rem 1rem 1rem 0;
+  }
+
+  > aside {
+    grid-area: aside;
+    padding-left: 1rem;
+    @include background-pattern-2(var(--secondary-background), var(--primary-background));
+  }
+
+  > main {
+    grid-area: main;
+  }
+}
+
+.contentWrapper {
+  padding: 1.5rem;
+  width: 100%;
+  @include background-pattern-2(var(--secondary-background), var(--primary-background));
+}