Skip to content

Commit

Permalink
Merge pull request #69 from ScilifelabDataCentre/ragnar-frontend-1
Browse files Browse the repository at this point in the history
First RAG page to be included
  • Loading branch information
JanProgrammierung authored Oct 9, 2024
2 parents bdef868 + fc5f17d commit b0b0fa6
Show file tree
Hide file tree
Showing 14 changed files with 841 additions and 151 deletions.
20 changes: 20 additions & 0 deletions next-app/components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/app/globals.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
}
}
246 changes: 120 additions & 126 deletions next-app/package-lock.json

Large diffs are not rendered by default.

8 changes: 7 additions & 1 deletion next-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,24 @@
},
"dependencies": {
"@jonkoops/matomo-tracker-react": "^0.7.0",
"@radix-ui/react-slot": "^1.1.0",
"axios": "^1.7.7",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"cookies-next": "^4.2.1",
"daisyui": "^4.12.10",
"dompurify": "^3.1.7",
"js-cookie": "^3.0.5",
"lucide-react": "^0.446.0",
"next": "14.2.11",
"react": "^18",
"react-dom": "^18",
"react-google-recaptcha": "^3.1.0",
"react-iframe": "^1.8.5",
"react-markdown": "^9.0.1",
"remark-gfm": "^4.0.0"
"remark-gfm": "^4.0.0",
"tailwind-merge": "^2.5.2",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@types/dompurify": "^3.0.5",
Expand Down
62 changes: 62 additions & 0 deletions next-app/src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,66 @@
html {
font-family: Lato, sans-serif
}
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
122 changes: 122 additions & 0 deletions next-app/src/app/ragnar/answer/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
"use client";

import { ReactElement } from "react";
import { BODY_CLASSES } from "@/constants";
import { TrackPageViewIfEnabled } from "@/util/cookiesHandling";
import { ILink } from "@/interfaces/types";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Search, Terminal } from "lucide-react";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

const RAGnarLogo = "/images/RAGnar.svg";

export default function RAGAnswerPage(): ReactElement {
TrackPageViewIfEnabled();

const breadcrumbs: { [id: string]: ILink } = {
l1: { text: "Home", classes: "", link: "/" },
l2: { text: "RAGnar", classes: "", link: "" },
};

return (
<div>
<div className="text-sm breadcrumbs">
<ul>
{Object.keys(breadcrumbs).map((key) => (
<li>
{breadcrumbs[key].link ? (
<Link href={breadcrumbs[key].link}>
{breadcrumbs[key].text}
</Link>
) : (
<>{breadcrumbs[key].text}</>
)}
</li>
))}
</ul>
</div>
<div className="max-w-3xl mx-auto space-y-8">
<header className="text-center space-y-4">
<div className="w-full h-40 rounded-lg overflow-hidden">
<img
src="/placeholder.svg?height=160&width=640"
alt="RAGnar Logo and Name"
className="w-full h-full object-cover"
/>
</div>
</header>

<div className="flex flex-col md:flex-row gap-4">
<div className="flex-grow">
<Input placeholder="Ask another question" className="w-full" />
</div>
<Button className="w-full md:w-auto">
<Search className="h-4 w-4" />
</Button>
</div>

<Alert>
<Terminal className="h-4 w-4" />
<AlertTitle className="mb-5">Question asked comes here</AlertTitle>
<AlertDescription>Reply to be streamed in here.</AlertDescription>
</Alert>

<h1 className="text-xl font-semibold">Sources</h1>

<div className="flex flex-col space-y-4">
<Card>
<CardHeader>
<CardTitle className="text-lg font-semibold">
Artile Title comes here
</CardTitle>
<CardDescription>
Authors, Journal, Year comes here
</CardDescription>
</CardHeader>
</Card>

<Card>
<CardHeader>
<CardTitle className="text-lg font-semibold">
Artile Title comes here
</CardTitle>
<CardDescription>
Authors, Journal, Year comes here
</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-lg font-semibold">
Artile Title comes here
</CardTitle>
<CardDescription>
Authors, Journal, Year comes here
</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-lg font-semibold">
Artile Title comes here
</CardTitle>
<CardDescription>
Authors, Journal, Year comes here
</CardDescription>
</CardHeader>
</Card>
</div>
</div>
</div>
);
}
101 changes: 101 additions & 0 deletions next-app/src/app/ragnar/ask/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
"use client";

import { ReactElement } from "react";
import { BODY_CLASSES } from "@/constants";
import { TrackPageViewIfEnabled } from "@/util/cookiesHandling";
import { ILink } from "@/interfaces/types";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
import { Search } from "lucide-react";

const RAGnarLogo = "/images/RAGnar.svg";

export default function RAGAskPage(): ReactElement {
TrackPageViewIfEnabled();

const breadcrumbs: { [id: string]: ILink } = {
l1: { text: "Home", classes: "", link: "/" },
l2: { text: "RAGnar", classes: "", link: "" },
};

return (
<div>
<div className="text-sm breadcrumbs">
<ul>
{Object.keys(breadcrumbs).map((key) => (
<li>
{breadcrumbs[key].link ? (
<Link href={breadcrumbs[key].link}>
{breadcrumbs[key].text}
</Link>
) : (
<>{breadcrumbs[key].text}</>
)}
</li>
))}
</ul>
</div>
<div className="max-w-3xl mx-auto space-y-8">
<header className="text-center space-y-4">
<div className="w-full h-40 rounded-lg overflow-hidden">
<img
src="/placeholder.svg?height=160&width=640"
alt="RAGnar Logo and Name"
className="w-full h-full object-cover"
/>
</div>
<p className="text-xl">
Get answers to your precision medicine questions with our AI-powered
search engine.
</p>
</header>

<div className="flex flex-col md:flex-row gap-4">
<div className="flex-grow">
<Input placeholder="Ask a question" className="w-full" />
</div>
<Button className="w-full md:w-auto">
<Search className="h-4 w-4" />
</Button>
</div>

<div className="flex flex-col space-y-4">
<Card>
<CardContent className="p-6 text-sm">
<p>
Question: This is a placeholder for a question. Real questions
would include a full question incl. question mark.
</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-6 text-sm">
<p>
Question: This is a placeholder for a question. Real questions
would include a full question incl. question mark.
</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-6 text-sm">
<p>
Question: This is a placeholder for a question. Real questions
would include a full question incl. question mark.
</p>
</CardContent>
</Card>
<Card>
<CardContent className="p-6 text-sm">
<p>
Question: This is a placeholder for a question. Real questions
would include a full question incl. question mark.
</p>
</CardContent>
</Card>
</div>
</div>
</div>
);
}
10 changes: 10 additions & 0 deletions next-app/src/app/ragnar/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { BODY_CLASSES } from "@/constants";
import "../globals.css";

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return <div className={BODY_CLASSES}>{children}</div>;
}
Loading

0 comments on commit b0b0fa6

Please sign in to comment.