Skip to content

Commit 9f926c2

Browse files
StanGirardStanGirard
authored
Merge pull request #123 from StanGirard/mad/ui-improvements
2 parents 363528d + bfc4d45 commit 9f926c2

File tree

7 files changed

+118
-106
lines changed

7 files changed

+118
-106
lines changed

‎frontend/app/chat/page.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,16 @@ export default function ChatPage() {
2828
const askQuestion = async () => {
2929
setHistory((hist) => [...hist, ["user", question]]);
3030
setIsPending(true);
31-
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_URL}/chat/`, {
32-
model,
33-
question,
34-
history,
35-
temperature,
36-
max_tokens: maxTokens,
37-
});
31+
const response = await axios.post(
32+
`${process.env.NEXT_PUBLIC_BACKEND_URL}/chat/`,
33+
{
34+
model,
35+
question,
36+
history,
37+
temperature,
38+
max_tokens: maxTokens,
39+
}
40+
);
3841
setHistory(response.data.history);
3942
console.log(response.data.history);
4043

@@ -92,6 +95,7 @@ export default function ChatPage() {
9295
name="model"
9396
id="model"
9497
value={model}
98+
className="px-5 py-2 dark:bg-gray-700 bg-gray-200 rounded-md"
9599
onChange={(e) => setModel(e.target.value)}
96100
>
97101
<option value="gpt-3.5-turbo">gpt-3.5-turbo</option>

‎frontend/app/components/ui/Card.tsx

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,27 @@
11
import { cn } from "@/lib/utils";
2-
import { FC, HTMLAttributes } from "react";
2+
import { motion } from "framer-motion";
3+
import { FC, HTMLAttributes, LegacyRef, forwardRef } from "react";
34

45
interface CardProps extends HTMLAttributes<HTMLDivElement> {}
56

6-
const Card: FC<CardProps> = ({ children, className, ...props }) => {
7-
return (
8-
<div
9-
className={cn(
10-
"shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl overflow-hidden bg-white dark:bg-black border border-black/10 dark:border-white/25",
11-
className
12-
)}
13-
{...props}
14-
>
15-
{children}
16-
</div>
17-
);
18-
};
7+
const Card: FC<CardProps> = forwardRef(
8+
({ children, className, ...props }, ref) => {
9+
return (
10+
<div
11+
ref={ref as LegacyRef<HTMLDivElement>}
12+
className={cn(
13+
"shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl overflow-hidden bg-white dark:bg-black border border-black/10 dark:border-white/25",
14+
className
15+
)}
16+
{...props}
17+
>
18+
{children}
19+
</div>
20+
);
21+
}
22+
);
1923

24+
export const AnimatedCard = motion(Card);
25+
AnimatedCard.displayName = "AnimatedCard";
26+
Card.displayName = "Card";
2027
export default Card;

‎frontend/app/components/ui/Modal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Modal: FC<ModalProps> = ({ title, desc, children, Trigger }) => {
3838
initial={{ opacity: 0, y: "-40%" }}
3939
animate={{ opacity: 1, y: "0%" }}
4040
exit={{ opacity: 0, y: "40%" }}
41-
className="w-[90vw] flex flex-col max-w-lg rounded bg-white p-10 shadow-xl focus:outline-none cursor-auto"
41+
className="w-[90vw] flex flex-col max-w-lg rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-10 shadow-xl dark:shadow-primary/50 focus:outline-none cursor-auto"
4242
>
4343
<Dialog.Title className="m-0 text-2xl font-bold">
4444
{title}

‎frontend/app/explore/DocumentItem.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
"use client";
2+
import { FC } from "react";
3+
import { Document } from "./types";
4+
import Button from "../components/ui/Button";
5+
import Modal from "../components/ui/Modal";
6+
import { AnimatedCard } from "../components/ui/Card";
7+
8+
interface DocumentProps {
9+
document: Document;
10+
}
11+
12+
const DocumentItem: FC<DocumentProps> = ({ document }) => {
13+
return (
14+
<AnimatedCard
15+
initial={{ x: -64, opacity: 0 }}
16+
animate={{ x: 0, opacity: 1 }}
17+
className="flex items-center justify-between w-full p-5 gap-10"
18+
>
19+
<p className="text-lg leading-tight max-w-sm">{document.name}</p>
20+
<Modal
21+
title={document.name}
22+
desc={""}
23+
Trigger={<Button className="">View</Button>}
24+
>
25+
<div className="bg-white py-10 w-full h-1/2 overflow-auto rounded-lg prose">
26+
<pre>{JSON.stringify(document, null, 2)}</pre>
27+
</div>
28+
</Modal>
29+
</AnimatedCard>
30+
);
31+
};
32+
33+
DocumentItem.displayName = "DocumentItem";
34+
export default DocumentItem;

‎frontend/app/explore/documentItem.tsx

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎frontend/app/explore/page.tsx

Lines changed: 47 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,53 @@
1-
'use client';
2-
import { useState, useEffect } from 'react';
3-
import axios from 'axios';
4-
import DocumentItem from './documentItem';
5-
6-
interface Document {
7-
name: string;
8-
size: string;
9-
}
1+
"use client";
2+
import { useState, useEffect } from "react";
3+
import axios from "axios";
4+
import DocumentItem from "./DocumentItem";
5+
import { Document } from "./types";
6+
import Button from "../components/ui/Button";
7+
import Link from "next/link";
108

119
export default function ExplorePage() {
12-
const [documents, setDocuments] = useState<Document[]>([]);
13-
const [selectedDocument, setSelectedDocument] = useState<Document | null>(null);
14-
15-
useEffect(() => {
16-
fetchDocuments();
17-
}, []);
10+
const [documents, setDocuments] = useState<Document[]>([]);
1811

19-
const fetchDocuments = async () => {
20-
try {
21-
console.log(`Fetching documents from ${process.env.NEXT_PUBLIC_BACKEND_URL}/explore`);
22-
const response = await axios.get<{ documents: Document[] }>(`${process.env.NEXT_PUBLIC_BACKEND_URL}/explore`);
23-
setDocuments(response.data.documents);
24-
} catch (error) {
25-
console.error('Error fetching documents', error);
26-
setDocuments([]);
27-
}
28-
};
12+
useEffect(() => {
13+
fetchDocuments();
14+
}, []);
2915

30-
const viewDocument = (document: Document) => {
31-
setSelectedDocument(document);
32-
};
16+
const fetchDocuments = async () => {
17+
try {
18+
console.log(
19+
`Fetching documents from ${process.env.NEXT_PUBLIC_BACKEND_URL}/explore`
20+
);
21+
const response = await axios.get<{ documents: Document[] }>(
22+
`${process.env.NEXT_PUBLIC_BACKEND_URL}/explore`
23+
);
24+
setDocuments(response.data.documents);
25+
} catch (error) {
26+
console.error("Error fetching documents", error);
27+
setDocuments([]);
28+
}
29+
};
3330

34-
return (
35-
<div className="pt-20 flex flex-col items-center justify-center p-6">
36-
<h1 className="text-4xl mb-6">Explore Files</h1>
37-
<div className="overflow-y-auto h-[50vh] w-full max-w-xl">
38-
{documents.map((document, index) => (
39-
<DocumentItem key={index} document={document} viewDocument={viewDocument} />
40-
))}
41-
</div>
42-
{selectedDocument && (
43-
<div className="fixed inset-0 flex items-center justify-center z-10 bg-black bg-opacity-50">
44-
<div className="bg-white p-6 w-1/2 h-1/2 overflow-auto rounded-lg">
45-
<h2 className="text-2xl mb-4">{selectedDocument.name}</h2>
46-
<pre>{JSON.stringify(selectedDocument, null, 2)}</pre>
47-
<button
48-
onClick={() => setSelectedDocument(null)}
49-
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-200"
50-
>
51-
Close
52-
</button>
53-
</div>
54-
</div>
55-
)}
56-
</div>
57-
);
31+
return (
32+
<div className="pt-20 flex flex-col items-center justify-center p-6">
33+
<div className="flex flex-col items-center justify-center">
34+
<h1 className="text-3xl font-bold text-center">Explore Your Brain</h1>
35+
<h2 className="opacity-50">View what&rsquo;s in your second brain</h2>
36+
</div>
37+
<div className="w-full max-w-xl flex flex-col gap-5">
38+
{documents.length !== 0 ? (
39+
documents.map((document, index) => (
40+
<DocumentItem key={index} document={document} />
41+
))
42+
) : (
43+
<div className="flex flex-col items-center justify-center mt-10 gap-1">
44+
<p className="text-center">Oh No, Your Brain is empty.</p>
45+
<Link href="/upload">
46+
<Button>Upload Files</Button>
47+
</Link>
48+
</div>
49+
)}
50+
</div>
51+
</div>
52+
);
5853
}

‎frontend/app/explore/types.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface Document {
2+
name: string;
3+
size: string;
4+
}

0 commit comments

Comments
 (0)