ryan/simbarag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend revamp: Animal Crossing × Claude design with shadcn components

Browse Source 
- New palette: deep nook green sidebar, sage user bubbles, warm cream answer cards
- shadcn-style UI primitives: Button (CVA variants), Textarea, Input, Badge, Table
- cn() utility (clsx + tailwind-merge)
- lucide-react icons throughout (no more text-only buttons)
- Simba mode: custom CSS toggle switch
- Send button: circular amber button with arrow icon
- AnswerBubble: amber gradient accent bar, loading dots animation
- QuestionBubble: sage green pill with rounded-3xl
- ToolBubble: centered leaf-green badge pill
- ConversationList: active item highlighting, proper selectedId prop
- Sidebar: collapsible with PanelLeftClose/Open icons, icon-only collapsed state
- LoginScreen: decorative background blobs, refined rounded card
- AdminPanel: proper icon buttons, leaf-green save confirmation
- Fonts: Playfair Display (brand) + Nunito 800 weight added

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ryan
2026-03-11 09:22:34 -04:00
parent 53b2b3b366
commit d1cb55ff1a
17 changed files with 2439 additions and 3327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
raggr-frontend/package.json
View File

@@ -12,11 +12,15 @@
}, },
"dependencies": { "dependencies": {
"axios": "^1.12.2", "axios": "^1.12.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.577.0",
"marked": "^16.3.0", "marked": "^16.3.0",
"npm-watch": "^0.13.0", "npm-watch": "^0.13.0",
"react": "^19.1.1", "react": "^19.1.1",
"react-dom": "^19.1.1", "react-dom": "^19.1.1",
"react-markdown": "^10.1.0", "react-markdown": "^10.1.0",
"tailwind-merge": "^3.5.0",
"watch": "^1.0.2" "watch": "^1.0.2"
}, },
"devDependencies": { "devDependencies": {

199
raggr-frontend/src/App.css
View File

@@ -1,26 +1,44 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');
@import "tailwindcss"; @import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');
@theme { @theme {
--color-cream: #FBF7F0; /* === Animal Crossing × Claude Palette === */
--color-cream-dark: #F3EDE2;
/* Backgrounds */
--color-cream: #FAF8F2;
--color-cream-dark: #F0EBDF;
--color-warm-white: #FFFDF9; --color-warm-white: #FFFDF9;
/* Forest / Nook Green system */
--color-forest: #2A4D38;
--color-forest-mid: #345E46;
--color-forest-light: #4D7A5E;
--color-leaf: #5E9E70;
--color-leaf-dark: #3D7A52;
--color-leaf-light: #B8DEC4;
--color-leaf-pale: #EBF7EE;
/* Amber / warm accents */
--color-amber-glow: #E8943A; --color-amber-glow: #E8943A;
--color-amber-dark: #C97828;
--color-amber-soft: #F5C882; --color-amber-soft: #F5C882;
--color-amber-pale: #FFF0D6; --color-amber-pale: #FFF4E0;
--color-forest: #2D5A3D;
--color-forest-light: #3D763A; /* Neutrals */
--color-forest-pale: #E8F5E4;
--color-charcoal: #2C2420; --color-charcoal: #2C2420;
--color-warm-gray: #8A7E74; --color-warm-gray: #7A7268;
--color-sand: #D4C5B0; --color-sand: #DECFB8;
--color-sand-light: #E8DED0; --color-sand-light: #EDE3D4;
--color-blush: #F2D1B3; --color-blush: #F2D1B3;
--color-sidebar-bg: #2C2420;
--color-sidebar-hover: #3D352F; /* Sidebar */
--color-sidebar-active: #4A3F38; --color-sidebar-bg: #2A4D38;
--color-sidebar-hover: #345E46;
--color-sidebar-active: #3D6E52;
/* Fonts */
--font-display: 'Playfair Display', Georgia, serif; --font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Nunito', 'Nunito Sans', system-ui, sans-serif;
} }
* { * {
@@ -36,97 +54,92 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
/* Scrollbar styling */ /* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { ::-webkit-scrollbar { width: 5px; }
width: 6px; ::-webkit-scrollbar-track { background: transparent; }
} ::-webkit-scrollbar-thumb { background: var(--color-sand); border-radius: 99px; }
::-webkit-scrollbar-track { ::-webkit-scrollbar-thumb:hover { background: var(--color-warm-gray); }
background: transparent;
} /* ── Markdown in answer bubbles ─────────────────────── */
::-webkit-scrollbar-thumb { .markdown-content p { margin: 0.5em 0; line-height: 1.7; }
background: var(--color-sand); .markdown-content p:first-child { margin-top: 0; }
border-radius: 3px; .markdown-content p:last-child { margin-bottom: 0; }
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-warm-gray);
}
/* Markdown content styling in answer bubbles */
.markdown-content h1, .markdown-content h1,
.markdown-content h2, .markdown-content h2,
.markdown-content h3 { .markdown-content h3 {
font-family: var(--font-display); font-family: var(--font-display);
font-weight: 600; font-weight: 600;
margin-top: 1em; margin: 1em 0 0.4em;
margin-bottom: 0.5em;
line-height: 1.3; line-height: 1.3;
color: var(--color-charcoal);
} }
.markdown-content h1 { font-size: 1.25rem; } .markdown-content h1 { font-size: 1.2rem; }
.markdown-content h2 { font-size: 1.1rem; } .markdown-content h2 { font-size: 1.05rem; }
.markdown-content h3 { font-size: 1rem; } .markdown-content h3 { font-size: 0.95rem; }
.markdown-content p {
margin: 0.5em 0;
line-height: 1.65;
}
.markdown-content ul, .markdown-content ul,
.markdown-content ol { .markdown-content ol { padding-left: 1.4em; margin: 0.5em 0; }
padding-left: 1.5em; .markdown-content li { margin: 0.3em 0; line-height: 1.6; }
margin: 0.5em 0;
}
.markdown-content li {
margin: 0.25em 0;
line-height: 1.6;
}
.markdown-content code { .markdown-content code {
background: rgba(0,0,0,0.06); background: rgba(0,0,0,0.06);
padding: 0.15em 0.4em; padding: 0.15em 0.4em;
border-radius: 4px; border-radius: 5px;
font-size: 0.88em; font-size: 0.85em;
font-family: 'SF Mono', 'Fira Code', monospace; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
} }
.markdown-content pre { .markdown-content pre {
background: var(--color-charcoal); background: var(--color-charcoal);
color: #F3EDE2; color: #F0EBDF;
padding: 1em; padding: 1em 1.1em;
border-radius: 8px; border-radius: 12px;
overflow-x: auto; overflow-x: auto;
margin: 0.75em 0; margin: 0.8em 0;
}
.markdown-content pre code {
background: none;
padding: 0;
color: inherit;
} }
.markdown-content pre code { background: none; padding: 0; color: inherit; }
.markdown-content a { .markdown-content a {
color: var(--color-forest); color: var(--color-leaf-dark);
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
} }
.markdown-content blockquote { .markdown-content blockquote {
border-left: 3px solid var(--color-amber-glow); border-left: 3px solid var(--color-amber-soft);
padding-left: 1em; padding-left: 1em;
margin: 0.75em 0; margin: 0.75em 0;
color: var(--color-warm-gray); color: var(--color-warm-gray);
font-style: italic; font-style: italic;
} }
/* Loading skeleton animation */ .markdown-content strong { font-weight: 700; }
.markdown-content em { font-style: italic; }
/* ── Animations ─────────────────────────────────────── */
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.message-enter {
animation: fadeSlideUp 0.3s ease-out forwards;
}
@keyframes catPulse {
0%, 80%, 100% { opacity: 0.25; transform: scale(0.75); }
40% { opacity: 1; transform: scale(1); }
}
.loading-dot { animation: catPulse 1.4s ease-in-out infinite; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes shimmer { @keyframes shimmer {
0% { background-position: -200% 0; } 0% { background-position: -200% 0; }
100% { background-position: 200% 0; } 100% { background-position: 200% 0; }
} }
.skeleton-shimmer { .skeleton-shimmer {
background: linear-gradient( background: linear-gradient(90deg,
90deg,
var(--color-sand-light) 25%, var(--color-sand-light) 25%,
var(--color-cream) 50%, var(--color-cream) 50%,
var(--color-sand-light) 75% var(--color-sand-light) 75%
@@ -135,36 +148,26 @@ body {
animation: shimmer 1.8s ease-in-out infinite; animation: shimmer 1.8s ease-in-out infinite;
} }
/* Fade-in animation for messages */ /* ── Toggle switch ──────────────────────────────────── */
@keyframes fadeSlideUp { .toggle-track {
from { width: 36px;
opacity: 0; height: 20px;
transform: translateY(12px); border-radius: 99px;
background: var(--color-sand);
position: relative;
transition: background 0.2s;
cursor: pointer;
} }
to { .toggle-track.checked { background: var(--color-leaf); }
opacity: 1; .toggle-thumb {
transform: translateY(0); width: 14px;
} height: 14px;
} background: white;
border-radius: 99px;
.message-enter { position: absolute;
animation: fadeSlideUp 0.35s ease-out forwards; top: 3px;
} left: 3px;
transition: transform 0.2s;
/* Subtle pulse for loading dots */ box-shadow: 0 1px 3px rgba(0,0,0,0.15);
@keyframes catPulse {
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
40% { opacity: 1; transform: scale(1); }
}
.loading-dot {
animation: catPulse 1.4s ease-in-out infinite;
}
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }
/* Textarea focus glow */
textarea:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-amber-soft);
} }
.toggle-track.checked .toggle-thumb { transform: translateX(16px); }

194
raggr-frontend/src/components/AdminPanel.tsx
View File

@@ -1,5 +1,17 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { X, Phone, PhoneOff, Pencil, Check } from "lucide-react";
import { userService, type AdminUserRecord } from "../api/userService"; import { userService, type AdminUserRecord } from "../api/userService";
import { cn } from "../lib/utils";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "./ui/table";
type Props = { type Props = {
onClose: () => void; onClose: () => void;
@@ -24,8 +36,8 @@ export const AdminPanel = ({ onClose }: Props) => {
const startEdit = (user: AdminUserRecord) => { const startEdit = (user: AdminUserRecord) => {
setEditingId(user.id); setEditingId(user.id);
setEditValue(user.whatsapp_number ?? ""); setEditValue(user.whatsapp_number ?? "");
setRowError((prev) => ({ ...prev, [user.id]: "" })); setRowError((p) => ({ ...p, [user.id]: "" }));
setRowSuccess((prev) => ({ ...prev, [user.id]: "" })); setRowSuccess((p) => ({ ...p, [user.id]: "" }));
}; };
const cancelEdit = () => { const cancelEdit = () => {
@@ -34,33 +46,33 @@ export const AdminPanel = ({ onClose }: Props) => {
}; };
const saveWhatsapp = async (userId: string) => { const saveWhatsapp = async (userId: string) => {
setRowError((prev) => ({ ...prev, [userId]: "" })); setRowError((p) => ({ ...p, [userId]: "" }));
try { try {
const updated = await userService.adminSetWhatsapp(userId, editValue); const updated = await userService.adminSetWhatsapp(userId, editValue);
setUsers((prev) => prev.map((u) => (u.id === userId ? updated : u))); setUsers((p) => p.map((u) => (u.id === userId ? updated : u)));
setRowSuccess((prev) => ({ ...prev, [userId]: "Saved" })); setRowSuccess((p) => ({ ...p, [userId]: "Saved ✓" }));
setEditingId(null); setEditingId(null);
setTimeout(() => setRowSuccess((prev) => ({ ...prev, [userId]: "" })), 2000); setTimeout(() => setRowSuccess((p) => ({ ...p, [userId]: "" })), 2000);
} catch (err) { } catch (err) {
setRowError((prev) => ({ setRowError((p) => ({
...prev, ...p,
[userId]: err instanceof Error ? err.message : "Failed to save", [userId]: err instanceof Error ? err.message : "Failed to save",
})); }));
} }
}; };
const unlinkWhatsapp = async (userId: string) => { const unlinkWhatsapp = async (userId: string) => {
setRowError((prev) => ({ ...prev, [userId]: "" })); setRowError((p) => ({ ...p, [userId]: "" }));
try { try {
await userService.adminUnlinkWhatsapp(userId); await userService.adminUnlinkWhatsapp(userId);
setUsers((prev) => setUsers((p) =>
prev.map((u) => (u.id === userId ? { ...u, whatsapp_number: null } : u)), p.map((u) => (u.id === userId ? { ...u, whatsapp_number: null } : u)),
); );
setRowSuccess((prev) => ({ ...prev, [userId]: "Unlinked" })); setRowSuccess((p) => ({ ...p, [userId]: "Unlinked ✓" }));
setTimeout(() => setRowSuccess((prev) => ({ ...prev, [userId]: "" })), 2000); setTimeout(() => setRowSuccess((p) => ({ ...p, [userId]: "" })), 2000);
} catch (err) { } catch (err) {
setRowError((prev) => ({ setRowError((p) => ({
...prev, ...p,
[userId]: err instanceof Error ? err.message : "Failed to unlink", [userId]: err instanceof Error ? err.message : "Failed to unlink",
})); }));
} }
@@ -68,110 +80,152 @@ export const AdminPanel = ({ onClose }: Props) => {
return ( return (
<div <div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" className="fixed inset-0 z-50 flex items-center justify-center bg-charcoal/40 backdrop-blur-sm"
onClick={(e) => e.target === e.currentTarget && onClose()} onClick={(e) => e.target === e.currentTarget && onClose()}
> >
<div className="bg-warm-white rounded-2xl shadow-2xl w-full max-w-3xl mx-4 max-h-[80vh] flex flex-col"> <div
{/* Header */} className={cn(
<div className="flex items-center justify-between px-6 py-4 border-b border-sand-light"> "bg-warm-white rounded-3xl shadow-2xl shadow-charcoal/20",
<h2 className="text-base font-semibold text-charcoal">Admin: WhatsApp Numbers</h2> "w-full max-w-3xl mx-4 max-h-[82vh] flex flex-col",
<button "border border-sand-light/60",
className="text-warm-gray hover:text-charcoal text-xl leading-none cursor-pointer" )}
onClick={onClose}
> >
× {/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-sand-light/60">
<div className="flex items-center gap-2.5">
<div className="w-8 h-8 rounded-xl bg-leaf-pale flex items-center justify-center">
<Phone size={14} className="text-leaf-dark" />
</div>
<h2 className="text-sm font-semibold text-charcoal">
Admin · WhatsApp Numbers
</h2>
</div>
<button
onClick={onClose}
className="w-7 h-7 rounded-lg flex items-center justify-center text-warm-gray hover:text-charcoal hover:bg-cream-dark transition-colors cursor-pointer"
>
<X size={15} />
</button> </button>
</div> </div>
{/* Body */} {/* Body */}
<div className="overflow-y-auto flex-1"> <div className="overflow-y-auto flex-1 rounded-b-3xl">
{loading ? ( {loading ? (
<div className="px-6 py-10 text-center text-warm-gray text-sm">Loading…</div> <div className="px-6 py-12 text-center text-warm-gray text-sm">
<div className="flex justify-center gap-1.5 mb-3">
<span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
<span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
<span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
</div>
Loading users…
</div>
) : ( ) : (
<table className="w-full text-sm"> <Table>
<thead> <TableHeader>
<tr className="border-b border-sand-light text-left text-warm-gray"> <TableRow>
<th className="px-6 py-3 font-medium">Username</th> <TableHead>Username</TableHead>
<th className="px-6 py-3 font-medium">Email</th> <TableHead>Email</TableHead>
<th className="px-6 py-3 font-medium">WhatsApp</th> <TableHead>WhatsApp</TableHead>
<th className="px-6 py-3 font-medium">Actions</th> <TableHead className="w-28">Actions</TableHead>
</tr> </TableRow>
</thead> </TableHeader>
<tbody> <TableBody>
{users.map((user) => ( {users.map((user) => (
<tr <TableRow key={user.id}>
key={user.id} <TableCell className="font-medium text-charcoal">
className="border-b border-sand-light/50 hover:bg-cream/40 transition-colors" {user.username}
> </TableCell>
<td className="px-6 py-3 text-charcoal font-medium">{user.username}</td> <TableCell className="text-warm-gray">{user.email}</TableCell>
<td className="px-6 py-3 text-warm-gray">{user.email}</td> <TableCell>
<td className="px-6 py-3">
{editingId === user.id ? ( {editingId === user.id ? (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<input <Input
className="border border-sand-light rounded-lg px-2 py-1 text-sm text-charcoal bg-cream focus:outline-none focus:ring-1 focus:ring-amber-soft w-52"
value={editValue} value={editValue}
onChange={(e) => setEditValue(e.target.value)} onChange={(e) => setEditValue(e.target.value)}
placeholder="whatsapp:+15551234567" placeholder="whatsapp:+15551234567"
className="w-52"
autoFocus autoFocus
onKeyDown={(e) =>
e.key === "Enter" && saveWhatsapp(user.id)
}
/> />
{rowError[user.id] && ( {rowError[user.id] && (
<span className="text-xs text-red-500">{rowError[user.id]}</span> <span className="text-xs text-red-500">
{rowError[user.id]}
</span>
)} )}
</div> </div>
) : ( ) : (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-0.5">
<span className={user.whatsapp_number ? "text-charcoal" : "text-warm-gray/50 italic"}> <span
className={cn(
"text-sm",
user.whatsapp_number
? "text-charcoal"
: "text-warm-gray/40 italic",
)}
>
{user.whatsapp_number ?? "—"} {user.whatsapp_number ?? "—"}
</span> </span>
{rowSuccess[user.id] && ( {rowSuccess[user.id] && (
<span className="text-xs text-green-600">{rowSuccess[user.id]}</span> <span className="text-xs text-leaf-dark">
{rowSuccess[user.id]}
</span>
)} )}
{rowError[user.id] && ( {rowError[user.id] && (
<span className="text-xs text-red-500">{rowError[user.id]}</span> <span className="text-xs text-red-500">
{rowError[user.id]}
</span>
)} )}
</div> </div>
)} )}
</td> </TableCell>
<td className="px-6 py-3"> <TableCell>
{editingId === user.id ? ( {editingId === user.id ? (
<div className="flex gap-2"> <div className="flex gap-1.5">
<button <Button
className="text-xs px-2.5 py-1 rounded-lg bg-amber-soft/80 text-charcoal hover:bg-amber-soft transition-colors cursor-pointer" size="sm"
variant="default"
onClick={() => saveWhatsapp(user.id)} onClick={() => saveWhatsapp(user.id)}
> >
<Check size={12} />
Save Save
</button> </Button>
<button <Button
className="text-xs px-2.5 py-1 rounded-lg text-warm-gray hover:text-charcoal hover:bg-cream-dark transition-colors cursor-pointer" size="sm"
variant="ghost-dark"
onClick={cancelEdit} onClick={cancelEdit}
> >
Cancel Cancel
</button> </Button>
</div> </div>
) : ( ) : (
<div className="flex gap-2"> <div className="flex gap-1.5">
<button <Button
className="text-xs px-2.5 py-1 rounded-lg text-warm-gray hover:text-charcoal hover:bg-cream-dark transition-colors cursor-pointer" size="sm"
variant="ghost-dark"
onClick={() => startEdit(user)} onClick={() => startEdit(user)}
> >
<Pencil size={11} />
Edit Edit
</button> </Button>
{user.whatsapp_number && ( {user.whatsapp_number && (
<button <Button
className="text-xs px-2.5 py-1 rounded-lg text-red-400 hover:text-red-600 hover:bg-red-50 transition-colors cursor-pointer" size="sm"
variant="destructive"
onClick={() => unlinkWhatsapp(user.id)} onClick={() => unlinkWhatsapp(user.id)}
> >
<PhoneOff size={11} />
Unlink Unlink
</button> </Button>
)} )}
</div> </div>
)} )}
</td> </TableCell>
</tr> </TableRow>
))} ))}
</tbody> </TableBody>
</table> </Table>
)} )}
</div> </div>
</div> </div>

36
raggr-frontend/src/components/AnswerBubble.tsx
View File

@@ -1,4 +1,5 @@
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import { cn } from "../lib/utils";
type AnswerBubbleProps = { type AnswerBubbleProps = {
text: string; text: string;
@@ -7,25 +8,32 @@ type AnswerBubbleProps = {
export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => { export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
return ( return (
<div className="rounded-md bg-orange-100 p-3 sm:p-4 w-2/3"> <div className="flex justify-start message-enter">
<div
className={cn(
"max-w-[78%] rounded-3xl rounded-bl-md",
"bg-warm-white border border-sand-light/70",
"shadow-sm shadow-sand/30",
"overflow-hidden",
)}
>
{/* amber accent bar */}
<div className="h-0.5 w-full bg-gradient-to-r from-amber-soft via-amber-glow/50 to-transparent" />
<div className="px-4 py-3">
{loading ? ( {loading ? (
<div className="flex flex-col w-full animate-pulse gap-2"> <div className="flex items-center gap-1.5 py-1 px-1">
<div className="flex flex-row gap-2 w-full"> <span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
<div className="bg-gray-400 w-1/2 p-3 rounded-lg" /> <span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
<div className="bg-gray-400 w-1/2 p-3 rounded-lg" /> <span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
</div>
<div className="flex flex-row gap-2 w-full">
<div className="bg-gray-400 w-1/3 p-3 rounded-lg" />
<div className="bg-gray-400 w-2/3 p-3 rounded-lg" />
</div>
</div> </div>
) : ( ) : (
<div className=" flex flex-col break-words overflow-wrap-anywhere text-sm sm:text-base [&>*]:break-words"> <div className="markdown-content text-sm leading-relaxed text-charcoal">
<ReactMarkdown> <ReactMarkdown>{text}</ReactMarkdown>
{"🐈: " + text}
</ReactMarkdown>
</div> </div>
)} )}
</div> </div>
</div>
</div>
); );
}; };

254
raggr-frontend/src/components/ChatScreen.tsx
View File

@@ -1,4 +1,5 @@
import { useEffect, useState, useRef } from "react"; import { useEffect, useState, useRef } from "react";
import { LogOut, Shield, PanelLeftClose, PanelLeftOpen, Menu, X } from "lucide-react";
import { conversationService } from "../api/conversationService"; import { conversationService } from "../api/conversationService";
import { userService } from "../api/userService"; import { userService } from "../api/userService";
import { QuestionBubble } from "./QuestionBubble"; import { QuestionBubble } from "./QuestionBubble";
@@ -7,6 +8,7 @@ import { ToolBubble } from "./ToolBubble";
import { MessageInput } from "./MessageInput"; import { MessageInput } from "./MessageInput";
import { ConversationList } from "./ConversationList"; import { ConversationList } from "./ConversationList";
import { AdminPanel } from "./AdminPanel"; import { AdminPanel } from "./AdminPanel";
import { cn } from "../lib/utils";
import catIcon from "../assets/cat.png"; import catIcon from "../assets/cat.png";
type Message = { type Message = {
@@ -14,11 +16,6 @@ type Message = {
speaker: "simba" | "user" | "tool"; speaker: "simba" | "user" | "tool";
}; };
type QuestionAnswer = {
question: string;
answer: string;
};
type Conversation = { type Conversation = {
title: string; title: string;
id: string; id: string;
@@ -48,15 +45,9 @@ const TOOL_MESSAGES: Record<string, string> = {
export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => { export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
const [query, setQuery] = useState<string>(""); const [query, setQuery] = useState<string>("");
const [answer, setAnswer] = useState<string>("");
const [simbaMode, setSimbaMode] = useState<boolean>(false); const [simbaMode, setSimbaMode] = useState<boolean>(false);
const [questionsAnswers, setQuestionsAnswers] = useState<QuestionAnswer[]>(
[],
);
const [messages, setMessages] = useState<Message[]>([]); const [messages, setMessages] = useState<Message[]>([]);
const [conversations, setConversations] = useState<Conversation[]>([ const [conversations, setConversations] = useState<Conversation[]>([]);
{ title: "simba meow meow", id: "uuid" },
]);
const [showConversations, setShowConversations] = useState<boolean>(false); const [showConversations, setShowConversations] = useState<boolean>(false);
const [selectedConversation, setSelectedConversation] = const [selectedConversation, setSelectedConversation] =
useState<Conversation | null>(null); useState<Conversation | null>(null);
@@ -74,61 +65,45 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}; };
// Cleanup effect to handle component unmounting
useEffect(() => { useEffect(() => {
isMountedRef.current = true; isMountedRef.current = true;
return () => { return () => {
isMountedRef.current = false; isMountedRef.current = false;
// Abort any pending requests when component unmounts abortControllerRef.current?.abort();
if (abortControllerRef.current) {
abortControllerRef.current.abort();
}
}; };
}, []); }, []);
const handleSelectConversation = (conversation: Conversation) => { const handleSelectConversation = (conversation: Conversation) => {
setShowConversations(false); setShowConversations(false);
setSelectedConversation(conversation); setSelectedConversation(conversation);
const loadMessages = async () => { const load = async () => {
try { try {
const fetchedConversation = await conversationService.getConversation( const fetched = await conversationService.getConversation(conversation.id);
conversation.id,
);
setMessages( setMessages(
fetchedConversation.messages.map((message) => ({ fetched.messages.map((m) => ({ text: m.text, speaker: m.speaker })),
text: message.text,
speaker: message.speaker,
})),
); );
} catch (error) { } catch (err) {
console.error("Failed to load messages:", error); console.error("Failed to load messages:", err);
} }
}; };
loadMessages(); load();
}; };
const loadConversations = async () => { const loadConversations = async () => {
try { try {
const fetchedConversations = const fetched = await conversationService.getAllConversations();
await conversationService.getAllConversations(); const parsed = fetched.map((c) => ({ id: c.id, title: c.name }));
const parsedConversations = fetchedConversations.map((conversation) => ({ setConversations(parsed);
id: conversation.id, setSelectedConversation(parsed[0] ?? null);
title: conversation.name, } catch (err) {
})); console.error("Failed to load conversations:", err);
setConversations(parsedConversations);
setSelectedConversation(parsedConversations[0]);
} catch (error) {
console.error("Failed to load messages:", error);
} }
}; };
const handleCreateNewConversation = async () => { const handleCreateNewConversation = async () => {
const newConversation = await conversationService.createConversation(); const newConv = await conversationService.createConversation();
await loadConversations(); await loadConversations();
setSelectedConversation({ setSelectedConversation({ title: newConv.name, id: newConv.id });
title: newConversation.name,
id: newConversation.id,
});
}; };
useEffect(() => { useEffect(() => {
@@ -141,64 +116,48 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
}, [messages]); }, [messages]);
useEffect(() => { useEffect(() => {
const loadMessages = async () => { const load = async () => {
if (selectedConversation == null) return; if (!selectedConversation) return;
try { try {
const conversation = await conversationService.getConversation( const conv = await conversationService.getConversation(selectedConversation.id);
selectedConversation.id, setSelectedConversation({ id: conv.id, title: conv.name });
); setMessages(conv.messages.map((m) => ({ text: m.text, speaker: m.speaker })));
// Update the conversation title in case it changed } catch (err) {
setSelectedConversation({ console.error("Failed to load messages:", err);
id: conversation.id,
title: conversation.name,
});
setMessages(
conversation.messages.map((message) => ({
text: message.text,
speaker: message.speaker,
})),
);
} catch (error) {
console.error("Failed to load messages:", error);
} }
}; };
loadMessages(); load();
}, [selectedConversation?.id]); }, [selectedConversation?.id]);
const handleQuestionSubmit = async () => { const handleQuestionSubmit = async () => {
if (!query.trim() || isLoading) return; // Don't submit empty messages or while loading if (!query.trim() || isLoading) return;
const currMessages = messages.concat([{ text: query, speaker: "user" }]); const currMessages = messages.concat([{ text: query, speaker: "user" }]);
setMessages(currMessages); setMessages(currMessages);
setQuery(""); // Clear input immediately after submission setQuery("");
setIsLoading(true); setIsLoading(true);
if (simbaMode) { if (simbaMode) {
const randomIndex = Math.floor(Math.random() * simbaAnswers.length); const randomElement = simbaAnswers[Math.floor(Math.random() * simbaAnswers.length)];
const randomElement = simbaAnswers[randomIndex];
setMessages((prev) => prev.concat([{ text: randomElement, speaker: "simba" }])); setMessages((prev) => prev.concat([{ text: randomElement, speaker: "simba" }]));
setIsLoading(false); setIsLoading(false);
return; return;
} }
// Create a new AbortController for this request
const abortController = new AbortController(); const abortController = new AbortController();
abortControllerRef.current = abortController; abortControllerRef.current = abortController;
try { try {
await conversationService.streamQuery( await conversationService.streamQuery(
query, query,
selectedConversation.id, selectedConversation!.id,
(event) => { (event) => {
if (!isMountedRef.current) return; if (!isMountedRef.current) return;
if (event.type === "tool_start") { if (event.type === "tool_start") {
const friendly = const friendly = TOOL_MESSAGES[event.tool] ?? `🔧 Using ${event.tool}...`;
TOOL_MESSAGES[event.tool] ?? `🔧 Using ${event.tool}...`;
setMessages((prev) => prev.concat([{ text: friendly, speaker: "tool" }])); setMessages((prev) => prev.concat([{ text: friendly, speaker: "tool" }]));
} else if (event.type === "response") { } else if (event.type === "response") {
setMessages((prev) => setMessages((prev) => prev.concat([{ text: event.message, speaker: "simba" }]));
prev.concat([{ text: event.message, speaker: "simba" }]),
);
} else if (event.type === "error") { } else if (event.type === "error") {
console.error("Stream error:", event.message); console.error("Stream error:", event.message);
} }
@@ -206,22 +165,16 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
abortController.signal, abortController.signal,
); );
} catch (error) { } catch (error) {
// Ignore abort errors (these are intentional cancellations)
if (error instanceof Error && error.name === "AbortError") { if (error instanceof Error && error.name === "AbortError") {
console.log("Request was aborted"); console.log("Request was aborted");
} else { } else {
console.error("Failed to send query:", error); console.error("Failed to send query:", error);
// If session expired, redirect to login
if (error instanceof Error && error.message.includes("Session expired")) { if (error instanceof Error && error.message.includes("Session expired")) {
setAuthenticated(false); setAuthenticated(false);
} }
} }
} finally { } finally {
// Only update loading state if component is still mounted if (isMountedRef.current) setIsLoading(false);
if (isMountedRef.current) {
setIsLoading(false);
}
// Clear the abort controller reference
abortControllerRef.current = null; abortControllerRef.current = null;
} }
}; };
@@ -230,10 +183,10 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
setQuery(event.target.value); setQuery(event.target.value);
}; };
const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => { const handleKeyDown = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
// Submit on Enter, but allow Shift+Enter for new line const kev = event as unknown as React.KeyboardEvent<HTMLTextAreaElement>;
if (event.key === "Enter" && !event.shiftKey) { if (kev.key === "Enter" && !kev.shiftKey) {
event.preventDefault(); kev.preventDefault();
handleQuestionSubmit(); handleQuestionSubmit();
} }
}; };
@@ -245,30 +198,54 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
}; };
return ( return (
<div className="h-screen flex flex-row bg-cream"> <div className="h-screen flex flex-row bg-cream overflow-hidden">
{/* Sidebar */} {/* ── Desktop Sidebar ─────────────────────────────── */}
<aside <aside
className={`hidden md:flex md:flex-col bg-sidebar-bg transition-all duration-300 ease-in-out ${ className={cn(
sidebarCollapsed ? "w-[68px]" : "w-72" "hidden md:flex md:flex-col",
}`} "bg-sidebar-bg transition-all duration-300 ease-in-out",
sidebarCollapsed ? "w-[56px]" : "w-64",
)}
> >
{!sidebarCollapsed ? ( {sidebarCollapsed ? (
<div className="flex flex-col h-full"> /* Collapsed state */
{/* Sidebar header */} <div className="flex flex-col items-center py-4 gap-4 h-full">
<div className="flex items-center gap-3 px-5 py-5 border-b border-white/10"> <button
onClick={() => setSidebarCollapsed(false)}
className="w-9 h-9 rounded-xl flex items-center justify-center text-cream/50 hover:text-cream hover:bg-white/10 transition-all cursor-pointer"
>
<PanelLeftOpen size={18} />
</button>
<img <img
src={catIcon} src={catIcon}
alt="Simba" alt="Simba"
className="w-9 h-9 cursor-pointer hover:scale-110 transition-transform duration-200 flex-shrink-0" className="w-7 h-7 opacity-70 mt-1"
onClick={() => setSidebarCollapsed(true)}
/> />
<h2 className="font-[family-name:var(--font-display)] text-xl font-bold text-cream tracking-tight"> </div>
) : (
/* Expanded state */
<div className="flex flex-col h-full">
{/* Header */}
<div className="flex items-center justify-between px-4 py-4 border-b border-white/8">
<div className="flex items-center gap-2.5">
<img src={catIcon} alt="Simba" className="w-7 h-7" />
<h2
className="text-lg font-bold text-cream tracking-tight"
style={{ fontFamily: "var(--font-display)" }}
>
asksimba asksimba
</h2> </h2>
</div> </div>
<button
onClick={() => setSidebarCollapsed(true)}
className="w-7 h-7 rounded-lg flex items-center justify-center text-cream/40 hover:text-cream hover:bg-white/10 transition-all cursor-pointer"
>
<PanelLeftClose size={15} />
</button>
</div>
{/* Conversations */} {/* Conversations */}
<div className="flex-1 overflow-y-auto px-3 py-3"> <div className="flex-1 overflow-y-auto px-2 py-3">
<ConversationList <ConversationList
conversations={conversations} conversations={conversations}
onCreateNewConversation={handleCreateNewConversation} onCreateNewConversation={handleCreateNewConversation}
@@ -277,82 +254,76 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
/> />
</div> </div>
{/* Logout */} {/* Footer */}
<div className="px-3 pb-4 pt-2 border-t border-white/10"> <div className="px-2 pb-3 pt-2 border-t border-white/8 flex flex-col gap-0.5">
{isAdmin && ( {isAdmin && (
<button <button
className="w-full py-2.5 px-3 text-sm text-cream/60 hover:text-cream hover:bg-white/5 rounded-lg transition-all duration-200 cursor-pointer"
onClick={() => setShowAdminPanel(true)} onClick={() => setShowAdminPanel(true)}
className="flex items-center gap-2 w-full px-3 py-2 rounded-xl text-sm text-cream/50 hover:text-cream hover:bg-white/8 transition-all cursor-pointer"
> >
Admin <Shield size={14} />
<span>Admin</span>
</button> </button>
)} )}
<button <button
className="w-full py-2.5 px-3 text-sm text-cream/60 hover:text-cream hover:bg-white/5
rounded-lg transition-all duration-200 cursor-pointer"
onClick={handleLogout} onClick={handleLogout}
className="flex items-center gap-2 w-full px-3 py-2 rounded-xl text-sm text-cream/50 hover:text-cream hover:bg-white/8 transition-all cursor-pointer"
> >
Sign out <LogOut size={14} />
<span>Sign out</span>
</button> </button>
</div> </div>
</div> </div>
) : (
<div className="flex flex-col items-center py-5 h-full">
<img
src={catIcon}
alt="Simba"
className="w-9 h-9 cursor-pointer hover:scale-110 transition-transform duration-200"
onClick={() => setSidebarCollapsed(false)}
/>
</div>
)} )}
</aside> </aside>
{/* Admin Panel modal */}
{showAdminPanel && <AdminPanel onClose={() => setShowAdminPanel(false)} />} {showAdminPanel && <AdminPanel onClose={() => setShowAdminPanel(false)} />}
{/* Main chat area */} {/* ── Main chat area ──────────────────────────────── */}
<div className="flex-1 flex flex-col h-screen overflow-hidden"> <div className="flex-1 flex flex-col h-screen overflow-hidden min-w-0">
{/* Mobile header */} {/* Mobile header */}
<header className="md:hidden flex items-center justify-between px-4 py-3 bg-warm-white border-b border-sand-light"> <header className="md:hidden flex items-center justify-between px-4 py-3 bg-warm-white border-b border-sand-light/60">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2">
<img src={catIcon} alt="Simba" className="w-8 h-8" /> <img src={catIcon} alt="Simba" className="w-7 h-7" />
<h1 className="font-[family-name:var(--font-display)] text-lg font-bold text-charcoal"> <h1
className="text-base font-bold text-charcoal"
style={{ fontFamily: "var(--font-display)" }}
>
asksimba asksimba
</h1> </h1>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
className="px-3 py-1.5 text-xs font-medium rounded-lg bg-cream-dark text-charcoal className="w-8 h-8 rounded-xl flex items-center justify-center text-warm-gray hover:text-charcoal hover:bg-cream-dark transition-all cursor-pointer"
hover:bg-sand-light transition-colors cursor-pointer" onClick={() => setShowConversations((v) => !v)}
onClick={() => setShowConversations(!showConversations)}
> >
{showConversations ? "Hide" : "Threads"} {showConversations ? <X size={16} /> : <Menu size={16} />}
</button> </button>
<button <button
className="px-3 py-1.5 text-xs font-medium rounded-lg text-warm-gray className="w-8 h-8 rounded-xl flex items-center justify-center text-warm-gray hover:text-charcoal hover:bg-cream-dark transition-all cursor-pointer"
hover:bg-cream-dark transition-colors cursor-pointer"
onClick={handleLogout} onClick={handleLogout}
> >
Sign out <LogOut size={15} />
</button> </button>
</div> </div>
</header> </header>
{/* Conversation title bar */} {/* Conversation title bar */}
{selectedConversation && ( {selectedConversation && (
<div className="bg-warm-white/80 backdrop-blur-sm border-b border-sand-light/50 px-6 py-3"> <div className="bg-warm-white/80 backdrop-blur-sm border-b border-sand-light/50 px-6 py-2.5">
<h2 className="text-sm font-semibold text-charcoal truncate max-w-2xl mx-auto"> <p className="text-xs font-semibold text-warm-gray truncate max-w-2xl mx-auto uppercase tracking-wider">
{selectedConversation.title || "Untitled Conversation"} {selectedConversation.title || "Untitled Conversation"}
</h2> </p>
</div> </div>
)} )}
{/* Messages area */} {/* Messages */}
<div className="flex-1 overflow-y-auto px-4 py-6"> <div className="flex-1 overflow-y-auto px-4 py-6">
<div className="max-w-2xl mx-auto flex flex-col gap-4"> <div className="max-w-2xl mx-auto flex flex-col gap-3">
{/* Mobile conversation list */} {/* Mobile conversation drawer */}
{showConversations && ( {showConversations && (
<div className="md:hidden mb-2"> <div className="md:hidden mb-3 bg-warm-white rounded-2xl border border-sand-light p-3 shadow-sm">
<ConversationList <ConversationList
conversations={conversations} conversations={conversations}
onCreateNewConversation={handleCreateNewConversation} onCreateNewConversation={handleCreateNewConversation}
@@ -364,21 +335,19 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
{/* Empty state */} {/* Empty state */}
{messages.length === 0 && !isLoading && ( {messages.length === 0 && !isLoading && (
<div className="flex flex-col items-center justify-center py-20 gap-4"> <div className="flex flex-col items-center justify-center py-24 gap-5">
<div className="relative"> <div className="relative">
<div className="absolute -inset-4 bg-amber-soft/20 rounded-full blur-2xl" /> <div className="absolute -inset-6 bg-amber-soft/20 rounded-full blur-3xl" />
<img <img
src={catIcon} src={catIcon}
alt="Simba" alt="Simba"
className="relative w-16 h-16 opacity-60" className="relative w-16 h-16 opacity-50"
/> />
</div> </div>
<div className="text-center"> <p className="text-warm-gray/60 text-sm">
<p className="text-warm-gray text-sm">
Ask Simba anything Ask Simba anything
</p> </p>
</div> </div>
</div>
)} )}
{messages.map((msg, index) => { {messages.map((msg, index) => {
@@ -388,14 +357,15 @@ export const ChatScreen = ({ setAuthenticated }: ChatScreenProps) => {
return <AnswerBubble key={index} text={msg.text} />; return <AnswerBubble key={index} text={msg.text} />;
return <QuestionBubble key={index} text={msg.text} />; return <QuestionBubble key={index} text={msg.text} />;
})} })}
{isLoading && <AnswerBubble text="" loading={true} />} {isLoading && <AnswerBubble text="" loading={true} />}
<div ref={messagesEndRef} /> <div ref={messagesEndRef} />
</div> </div>
</div> </div>
{/* Input area */} {/* Input */}
<footer className="border-t border-sand-light/50 bg-warm-white/60 backdrop-blur-sm"> <footer className="border-t border-sand-light/40 bg-cream/80 backdrop-blur-sm">
<div className="max-w-2xl mx-auto px-4 py-4"> <div className="max-w-2xl mx-auto px-4 py-3">
<MessageInput <MessageInput
query={query} query={query}
handleQueryChange={handleQueryChange} handleQueryChange={handleQueryChange}

84
raggr-frontend/src/components/ConversationList.tsx
View File

@@ -1,6 +1,8 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Plus } from "lucide-react";
import { cn } from "../lib/utils";
import { conversationService } from "../api/conversationService"; import { conversationService } from "../api/conversationService";
type Conversation = { type Conversation = {
title: string; title: string;
id: string; id: string;
@@ -10,60 +12,72 @@ type ConversationProps = {
conversations: Conversation[]; conversations: Conversation[];
onSelectConversation: (conversation: Conversation) => void; onSelectConversation: (conversation: Conversation) => void;
onCreateNewConversation: () => void; onCreateNewConversation: () => void;
selectedId?: string;
}; };
export const ConversationList = ({ export const ConversationList = ({
conversations, conversations,
onSelectConversation, onSelectConversation,
onCreateNewConversation, onCreateNewConversation,
selectedId,
}: ConversationProps) => { }: ConversationProps) => {
const [conservations, setConversations] = useState(conversations); const [items, setItems] = useState(conversations);
useEffect(() => { useEffect(() => {
const loadConversations = async () => { const load = async () => {
try { try {
let fetchedConversations = let fetched = await conversationService.getAllConversations();
await conversationService.getAllConversations(); if (fetched.length === 0) {
if (conversations.length == 0) {
await conversationService.createConversation(); await conversationService.createConversation();
fetchedConversations = fetched = await conversationService.getAllConversations();
await conversationService.getAllConversations();
} }
setConversations( setItems(fetched.map((c) => ({ id: c.id, title: c.name })));
fetchedConversations.map((conversation) => ({ } catch (err) {
id: conversation.id, console.error("Failed to load conversations:", err);
title: conversation.name,
})),
);
} catch (error) {
console.error("Failed to load messages:", error);
} }
}; };
loadConversations(); load();
}, []); }, []);
// Keep in sync when parent updates conversations
useEffect(() => {
setItems(conversations);
}, [conversations]);
return ( return (
<div className="bg-stone-200 rounded-md p-3 sm:p-4 flex flex-col gap-1"> <div className="flex flex-col gap-1">
{conservations.map((conversation) => { {/* New thread button */}
return ( <button
<div onClick={onCreateNewConversation}
key={conversation.id} className={cn(
className="bg-stone-200 hover:bg-stone-300 cursor-pointer rounded-md p-3 min-h-[44px] flex items-center" "flex items-center gap-2 w-full px-3 py-2 rounded-xl",
onClick={() => onSelectConversation(conversation)} "text-sm text-cream/60 hover:text-cream hover:bg-white/8",
"transition-all duration-150 cursor-pointer mb-1",
)}
> >
<p className="text-sm sm:text-base truncate w-full"> <Plus size={14} strokeWidth={2.5} />
{conversation.title} <span>New thread</span>
</p> </button>
</div>
{/* Conversation items */}
{items.map((conv) => {
const isActive = conv.id === selectedId;
return (
<button
key={conv.id}
onClick={() => onSelectConversation(conv)}
className={cn(
"w-full px-3 py-2 rounded-xl text-left",
"text-sm truncate transition-all duration-150 cursor-pointer",
isActive
? "bg-white/12 text-cream font-medium"
: "text-cream/60 hover:text-cream hover:bg-white/8",
)}
>
{conv.title}
</button>
); );
})} })}
<div
className="bg-stone-200 hover:bg-stone-300 cursor-pointer rounded-md p-3 min-h-[44px] flex items-center"
onClick={() => onCreateNewConversation()}
>
<p className="text-sm sm:text-base"> + Start a new thread</p>
</div>
</div> </div>
); );
}; };

96
raggr-frontend/src/components/LoginScreen.tsx
View File

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
import { userService } from "../api/userService"; import { userService } from "../api/userService";
import { oidcService } from "../api/oidcService"; import { oidcService } from "../api/oidcService";
import catIcon from "../assets/cat.png"; import catIcon from "../assets/cat.png";
import { cn } from "../lib/utils";
type LoginScreenProps = { type LoginScreenProps = {
setAuthenticated: (isAuth: boolean) => void; setAuthenticated: (isAuth: boolean) => void;
@@ -14,25 +15,17 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
useEffect(() => { useEffect(() => {
const initAuth = async () => { const initAuth = async () => {
// First, check for OIDC callback parameters
const callbackParams = oidcService.getCallbackParamsFromURL(); const callbackParams = oidcService.getCallbackParamsFromURL();
if (callbackParams) { if (callbackParams) {
// Handle OIDC callback
try { try {
setIsLoggingIn(true); setIsLoggingIn(true);
const result = await oidcService.handleCallback( const result = await oidcService.handleCallback(
callbackParams.code, callbackParams.code,
callbackParams.state callbackParams.state,
); );
// Store tokens
localStorage.setItem("access_token", result.access_token); localStorage.setItem("access_token", result.access_token);
localStorage.setItem("refresh_token", result.refresh_token); localStorage.setItem("refresh_token", result.refresh_token);
// Clear URL parameters
oidcService.clearCallbackParams(); oidcService.clearCallbackParams();
setAuthenticated(true); setAuthenticated(true);
setIsChecking(false); setIsChecking(false);
return; return;
@@ -45,15 +38,10 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
return; return;
} }
} }
// Check if user is already authenticated
const isValid = await userService.validateToken(); const isValid = await userService.validateToken();
if (isValid) { if (isValid) setAuthenticated(true);
setAuthenticated(true);
}
setIsChecking(false); setIsChecking(false);
}; };
initAuth(); initAuth();
}, [setAuthenticated]); }, [setAuthenticated]);
@@ -61,29 +49,34 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
try { try {
setIsLoggingIn(true); setIsLoggingIn(true);
setError(""); setError("");
// Get authorization URL from backend
const authUrl = await oidcService.initiateLogin(); const authUrl = await oidcService.initiateLogin();
// Redirect to Authelia
window.location.href = authUrl; window.location.href = authUrl;
} catch (err) { } catch {
setError("Failed to initiate login. Please try again."); setError("Failed to initiate login. Please try again.");
console.error("OIDC login error:", err);
setIsLoggingIn(false); setIsLoggingIn(false);
} }
}; };
// Show loading state while checking authentication or processing callback
if (isChecking || isLoggingIn) { if (isChecking || isLoggingIn) {
return ( return (
<div className="h-screen flex flex-col items-center justify-center bg-cream gap-4"> <div className="h-screen flex flex-col items-center justify-center bg-cream gap-4">
{/* Subtle dot grid */}
<div
className="fixed inset-0 pointer-events-none opacity-[0.035]"
style={{
backgroundImage: `radial-gradient(circle, var(--color-charcoal) 1px, transparent 0)`,
backgroundSize: "22px 22px",
}}
/>
<div className="relative">
<div className="absolute -inset-4 bg-amber-soft/30 rounded-full blur-2xl" />
<img <img
src={catIcon} src={catIcon}
alt="Simba" alt="Simba"
className="w-16 h-16 animate-bounce" className="relative w-14 h-14 animate-bounce drop-shadow"
/> />
<p className="text-warm-gray font-medium text-lg tracking-wide"> </div>
<p className="text-warm-gray text-sm tracking-wide font-medium">
{isLoggingIn ? "letting you in..." : "checking credentials..."} {isLoggingIn ? "letting you in..." : "checking credentials..."}
</p> </p>
</div> </div>
@@ -91,27 +84,35 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
} }
return ( return (
<div className="h-screen bg-cream flex items-center justify-center p-4"> <div className="h-screen bg-cream flex items-center justify-center p-4 relative overflow-hidden">
{/* Decorative background texture */} {/* Background dot texture */}
<div className="fixed inset-0 opacity-[0.03] pointer-events-none" <div
className="fixed inset-0 pointer-events-none opacity-[0.04]"
style={{ style={{
backgroundImage: `radial-gradient(circle at 1px 1px, var(--color-charcoal) 1px, transparent 0)`, backgroundImage: `radial-gradient(circle, var(--color-charcoal) 1px, transparent 0)`,
backgroundSize: '24px 24px' backgroundSize: "22px 22px",
}} }}
/> />
{/* Decorative background blobs */}
<div className="absolute top-1/4 -left-20 w-72 h-72 rounded-full bg-leaf-pale/60 blur-3xl pointer-events-none" />
<div className="absolute bottom-1/4 -right-20 w-64 h-64 rounded-full bg-amber-pale/70 blur-3xl pointer-events-none" />
<div className="relative w-full max-w-sm"> <div className="relative w-full max-w-sm">
{/* Cat icon & branding */} {/* Branding */}
<div className="flex flex-col items-center mb-8"> <div className="flex flex-col items-center mb-8">
<div className="relative mb-4"> <div className="relative mb-5">
<div className="absolute -inset-3 bg-amber-soft/40 rounded-full blur-xl" /> <div className="absolute -inset-5 bg-amber-soft/30 rounded-full blur-2xl" />
<img <img
src={catIcon} src={catIcon}
alt="Simba" alt="Simba"
className="relative w-20 h-20 drop-shadow-lg" className="relative w-20 h-20 drop-shadow-lg"
/> />
</div> </div>
<h1 className="font-[family-name:var(--font-display)] text-4xl font-bold text-charcoal tracking-tight"> <h1
className="text-4xl font-bold text-charcoal tracking-tight"
style={{ fontFamily: "var(--font-display)" }}
>
asksimba asksimba
</h1> </h1>
<p className="text-warm-gray text-sm mt-1.5 tracking-wide"> <p className="text-warm-gray text-sm mt-1.5 tracking-wide">
@@ -119,10 +120,15 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
</p> </p>
</div> </div>
{/* Login card */} {/* Card */}
<div className="bg-warm-white rounded-2xl shadow-lg shadow-sand/40 border border-sand-light/60 p-8"> <div
className={cn(
"bg-warm-white rounded-3xl border border-sand-light",
"shadow-xl shadow-sand/30 p-8",
)}
>
{error && ( {error && (
<div className="mb-4 text-sm bg-red-50 text-red-700 p-3 rounded-xl border border-red-200"> <div className="mb-5 text-sm bg-red-50 text-red-600 px-4 py-3 rounded-2xl border border-red-200">
{error} {error}
</div> </div>
)} )}
@@ -132,21 +138,23 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
</p> </p>
<button <button
className="w-full py-3.5 px-4 bg-forest text-white font-semibold rounded-xl
hover:bg-forest-light transition-all duration-200
active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed
shadow-md shadow-forest/20 hover:shadow-lg hover:shadow-forest/30
cursor-pointer text-sm tracking-wide"
onClick={handleOIDCLogin} onClick={handleOIDCLogin}
disabled={isLoggingIn} disabled={isLoggingIn}
className={cn(
"w-full py-3.5 px-4 rounded-2xl text-sm font-semibold tracking-wide",
"bg-forest text-cream",
"shadow-md shadow-forest/20",
"hover:bg-forest-mid hover:shadow-lg hover:shadow-forest/30",
"active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed",
"transition-all duration-200 cursor-pointer",
)}
> >
{isLoggingIn ? "Redirecting..." : "Sign in with Authelia"} {isLoggingIn ? "Redirecting..." : "Sign in with Authelia"}
</button> </button>
</div> </div>
{/* Footer paw prints */} <p className="text-center text-sand mt-5 text-xs tracking-widest select-none">
<p className="text-center text-sand mt-6 text-xs tracking-widest select-none"> ✦ meow ✦
~ meow ~
</p> </p>
</div> </div>
</div> </div>

80
raggr-frontend/src/components/MessageInput.tsx
View File

@@ -1,10 +1,13 @@
import { useEffect, useState, useRef } from "react"; import { useState } from "react";
import { ArrowUp } from "lucide-react";
import { cn } from "../lib/utils";
import { Textarea } from "./ui/textarea";
type MessageInputProps = { type MessageInputProps = {
handleQueryChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void; handleQueryChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
handleKeyDown: (event: React.ChangeEvent<HTMLTextAreaElement>) => void; handleKeyDown: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
handleQuestionSubmit: () => void; handleQuestionSubmit: () => void;
setSimbaMode: (sdf: boolean) => void; setSimbaMode: (val: boolean) => void;
query: string; query: string;
isLoading: boolean; isLoading: boolean;
}; };
@@ -17,39 +20,64 @@ export const MessageInput = ({
setSimbaMode, setSimbaMode,
isLoading, isLoading,
}: MessageInputProps) => { }: MessageInputProps) => {
const [simbaMode, setLocalSimbaMode] = useState(false);
const toggleSimbaMode = () => {
const next = !simbaMode;
setLocalSimbaMode(next);
setSimbaMode(next);
};
return ( return (
<div className="flex flex-col gap-4 sticky bottom-0 bg-[#3D763A] p-6 rounded-xl"> <div
<div className="flex flex-row justify-between grow"> className={cn(
<textarea "rounded-2xl bg-warm-white border border-sand shadow-md shadow-sand/30",
className="p-3 sm:p-4 border border-blue-200 rounded-md grow bg-[#F9F5EB] min-h-[44px] resize-y" "transition-shadow duration-200 focus-within:shadow-lg focus-within:shadow-amber-soft/20",
"focus-within:border-amber-soft/60",
)}
>
{/* Textarea */}
<Textarea
onChange={handleQueryChange} onChange={handleQueryChange}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
value={query} value={query}
rows={2} rows={2}
placeholder="Type your message... (Press Enter to send, Shift+Enter for new line)" placeholder="Ask Simba anything..."
className="min-h-[60px] max-h-40"
/> />
</div>
<div className="flex flex-row justify-between gap-2 grow"> {/* Bottom toolbar */}
<div className="flex items-center justify-between px-3 pb-2.5 pt-1">
{/* Simba mode toggle */}
<button <button
className={`p-3 sm:p-4 min-h-[44px] border border-blue-400 rounded-md flex-grow text-sm sm:text-base ${ type="button"
isLoading onClick={toggleSimbaMode}
? "bg-gray-400 cursor-not-allowed opacity-50" className="flex items-center gap-2 group cursor-pointer select-none"
: "bg-[#EDA541] hover:bg-blue-400 cursor-pointer"
}`}
onClick={() => handleQuestionSubmit()}
type="submit"
disabled={isLoading}
> >
{isLoading ? "Sending..." : "Submit"} <div className={cn("toggle-track", simbaMode && "checked")}>
</button> <div className="toggle-thumb" />
</div> </div>
<div className="flex flex-row justify-center gap-2 grow items-center"> <span className="text-xs text-warm-gray group-hover:text-charcoal transition-colors">
<input simba mode
type="checkbox" </span>
onChange={(event) => setSimbaMode(event.target.checked)} </button>
className="w-5 h-5 cursor-pointer"
/> {/* Send button */}
<p className="text-sm sm:text-base">simba mode?</p> <button
type="submit"
onClick={handleQuestionSubmit}
disabled={isLoading || !query.trim()}
className={cn(
"w-8 h-8 rounded-full flex items-center justify-center",
"transition-all duration-200 cursor-pointer",
"shadow-sm",
isLoading || !query.trim()
? "bg-sand text-warm-gray/50 cursor-not-allowed shadow-none"
: "bg-amber-glow text-white hover:bg-amber-dark hover:shadow-md hover:shadow-amber-glow/30 active:scale-95",
)}
>
<ArrowUp size={15} strokeWidth={2.5} />
</button>
</div> </div>
</div> </div>
); );

15
raggr-frontend/src/components/QuestionBubble.tsx
View File

@@ -1,11 +1,22 @@
import { cn } from "../lib/utils";
type QuestionBubbleProps = { type QuestionBubbleProps = {
text: string; text: string;
}; };
export const QuestionBubble = ({ text }: QuestionBubbleProps) => { export const QuestionBubble = ({ text }: QuestionBubbleProps) => {
return ( return (
<div className="w-2/3 rounded-md bg-stone-200 p-3 sm:p-4 break-words overflow-wrap-anywhere text-sm sm:text-base ml-auto"> <div className="flex justify-end message-enter">
🤦: {text} <div
className={cn(
"max-w-[72%] rounded-3xl rounded-br-md",
"bg-leaf-pale border border-leaf-light/60",
"px-4 py-3 text-sm leading-relaxed text-charcoal",
"shadow-sm shadow-leaf/10",
)}
>
{text}
</div>
</div> </div>
); );
}; };

12
raggr-frontend/src/components/ToolBubble.tsx
View File

@@ -1,5 +1,15 @@
import { cn } from "../lib/utils";
export const ToolBubble = ({ text }: { text: string }) => ( export const ToolBubble = ({ text }: { text: string }) => (
<div className="text-sm text-gray-500 italic px-3 py-1 self-start"> <div className="flex justify-center message-enter">
<div
className={cn(
"inline-flex items-center gap-1.5 px-3 py-1 rounded-full",
"bg-leaf-pale border border-leaf-light/50",
"text-xs text-leaf-dark italic",
)}
>
{text} {text}
</div> </div>
</div>
); );

26
raggr-frontend/src/components/ui/badge.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../lib/utils";
const badgeVariants = cva(
"inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium transition-colors",
{
variants: {
variant: {
default: "bg-leaf-pale text-leaf-dark border border-leaf-light/50",
amber: "bg-amber-pale text-amber-glow border border-amber-soft/40",
muted: "bg-sand-light/60 text-warm-gray border border-sand/40",
},
},
defaultVariants: {
variant: "default",
},
},
);
export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}
export const Badge = ({ className, variant, ...props }: BadgeProps) => {
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
};

48
raggr-frontend/src/components/ui/button.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none",
{
variants: {
variant: {
default:
"bg-leaf text-white shadow-sm shadow-leaf/20 hover:bg-leaf-dark hover:shadow-md hover:shadow-leaf/30 active:scale-[0.97]",
amber:
"bg-amber-glow text-white shadow-sm shadow-amber/20 hover:bg-amber-dark hover:shadow-md active:scale-[0.97]",
ghost:
"text-cream/70 hover:text-cream hover:bg-white/8 active:scale-[0.97]",
"ghost-dark":
"text-warm-gray hover:text-charcoal hover:bg-sand-light/60 active:scale-[0.97]",
outline:
"border border-sand bg-transparent text-warm-gray hover:bg-cream-dark hover:text-charcoal active:scale-[0.97]",
destructive:
"text-red-400 hover:text-red-600 hover:bg-red-50 active:scale-[0.97]",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-7 px-3 text-xs",
lg: "h-11 px-6 text-base",
icon: "h-9 w-9",
"icon-sm": "h-7 w-7",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
},
);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {}
export const Button = ({ className, variant, size, ...props }: ButtonProps) => {
return (
<button
className={cn(buttonVariants({ variant, size }), className)}
{...props}
/>
);
};

19
raggr-frontend/src/components/ui/input.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { cn } from "../../lib/utils";
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
export const Input = ({ className, ...props }: InputProps) => {
return (
<input
className={cn(
"flex h-8 w-full rounded-lg border border-sand bg-cream px-3 py-1",
"text-sm text-charcoal placeholder:text-warm-gray/50",
"focus:outline-none focus:ring-2 focus:ring-amber-soft/60",
"disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
/>
);
};

37
raggr-frontend/src/components/ui/table.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { cn } from "../../lib/utils";
export const Table = ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
<table className={cn("w-full caption-bottom text-sm", className)} {...props} />
);
export const TableHeader = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
<thead className={cn("[&_tr]:border-b [&_tr]:border-sand-light", className)} {...props} />
);
export const TableBody = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
<tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />
);
export const TableRow = ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
<tr
className={cn(
"border-b border-sand-light/50 transition-colors hover:bg-cream-dark/40",
className,
)}
{...props}
/>
);
export const TableHead = ({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
<th
className={cn(
"h-10 px-4 text-left align-middle text-xs font-semibold text-warm-gray uppercase tracking-wider",
className,
)}
{...props}
/>
);
export const TableCell = ({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
<td className={cn("px-4 py-3 align-middle", className)} {...props} />
);

19
raggr-frontend/src/components/ui/textarea.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { cn } from "../../lib/utils";
export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
export const Textarea = ({ className, ...props }: TextareaProps) => {
return (
<textarea
className={cn(
"flex w-full resize-none rounded-xl border-0 bg-transparent px-3 py-2.5",
"text-sm text-charcoal placeholder:text-warm-gray/50",
"focus:outline-none",
"disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
/>
);
};

6
raggr-frontend/src/lib/utils.ts Normal file
View File

@@ -0,0 +1,6 @@
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

4601
raggr-frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff