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": {
"axios": "^1.12.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.577.0",
"marked": "^16.3.0",
"npm-watch": "^0.13.0",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-markdown": "^10.1.0",
"tailwind-merge": "^3.5.0",
"watch": "^1.0.2"
},
"devDependencies": {

205
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 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 {
--color-cream: #FBF7F0;
--color-cream-dark: #F3EDE2;
/* === Animal Crossing × Claude Palette === */
/* Backgrounds */
--color-cream: #FAF8F2;
--color-cream-dark: #F0EBDF;
--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-dark: #C97828;
--color-amber-soft: #F5C882;
--color-amber-pale: #FFF0D6;
--color-forest: #2D5A3D;
--color-forest-light: #3D763A;
--color-forest-pale: #E8F5E4;
--color-amber-pale: #FFF4E0;
/* Neutrals */
--color-charcoal: #2C2420;
--color-warm-gray: #8A7E74;
--color-sand: #D4C5B0;
--color-sand-light: #E8DED0;
--color-warm-gray: #7A7268;
--color-sand: #DECFB8;
--color-sand-light: #EDE3D4;
--color-blush: #F2D1B3;
--color-sidebar-bg: #2C2420;
--color-sidebar-hover: #3D352F;
--color-sidebar-active: #4A3F38;
/* Sidebar */
--color-sidebar-bg: #2A4D38;
--color-sidebar-hover: #345E46;
--color-sidebar-active: #3D6E52;
/* Fonts */
--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;
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--color-sand);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-warm-gray);
}
/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-sand); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-warm-gray); }
/* ── Markdown in answer bubbles ─────────────────────── */
.markdown-content p { margin: 0.5em 0; line-height: 1.7; }
.markdown-content p:first-child { margin-top: 0; }
.markdown-content p:last-child { margin-bottom: 0; }
/* Markdown content styling in answer bubbles */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
font-family: var(--font-display);
font-weight: 600;
margin-top: 1em;
margin-bottom: 0.5em;
margin: 1em 0 0.4em;
line-height: 1.3;
color: var(--color-charcoal);
}
.markdown-content h1 { font-size: 1.25rem; }
.markdown-content h2 { font-size: 1.1rem; }
.markdown-content h3 { font-size: 1rem; }
.markdown-content p {
margin: 0.5em 0;
line-height: 1.65;
}
.markdown-content h1 { font-size: 1.2rem; }
.markdown-content h2 { font-size: 1.05rem; }
.markdown-content h3 { font-size: 0.95rem; }
.markdown-content ul,
.markdown-content ol {
padding-left: 1.5em;
margin: 0.5em 0;
}
.markdown-content li {
margin: 0.25em 0;
line-height: 1.6;
}
.markdown-content ol { padding-left: 1.4em; margin: 0.5em 0; }
.markdown-content li { margin: 0.3em 0; line-height: 1.6; }
.markdown-content code {
background: rgba(0, 0, 0, 0.06);
background: rgba(0,0,0,0.06);
padding: 0.15em 0.4em;
border-radius: 4px;
font-size: 0.88em;
font-family: 'SF Mono', 'Fira Code', monospace;
border-radius: 5px;
font-size: 0.85em;
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}
.markdown-content pre {
background: var(--color-charcoal);
color: #F3EDE2;
padding: 1em;
border-radius: 8px;
color: #F0EBDF;
padding: 1em 1.1em;
border-radius: 12px;
overflow-x: auto;
margin: 0.75em 0;
}
.markdown-content pre code {
background: none;
padding: 0;
color: inherit;
margin: 0.8em 0;
}
.markdown-content pre code { background: none; padding: 0; color: inherit; }
.markdown-content a {
color: var(--color-forest);
color: var(--color-leaf-dark);
text-decoration: underline;
text-underline-offset: 2px;
}
.markdown-content blockquote {
border-left: 3px solid var(--color-amber-glow);
border-left: 3px solid var(--color-amber-soft);
padding-left: 1em;
margin: 0.75em 0;
color: var(--color-warm-gray);
font-style: italic;
}
/* Loading skeleton animation */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
.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 {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton-shimmer {
background: linear-gradient(
90deg,
background: linear-gradient(90deg,
var(--color-sand-light) 25%,
var(--color-cream) 50%,
var(--color-sand-light) 75%
@@ -135,36 +148,26 @@ body {
animation: shimmer 1.8s ease-in-out infinite;
}
/* Fade-in animation for messages */
@keyframes fadeSlideUp {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
/* ── Toggle switch ──────────────────────────────────── */
.toggle-track {
width: 36px;
height: 20px;
border-radius: 99px;
background: var(--color-sand);
position: relative;
transition: background 0.2s;
cursor: pointer;
}
.message-enter {
animation: fadeSlideUp 0.35s ease-out forwards;
}
/* Subtle pulse for loading dots */
@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 { background: var(--color-leaf); }
.toggle-thumb {
width: 14px;
height: 14px;
background: white;
border-radius: 99px;
position: absolute;
top: 3px;
left: 3px;
transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-track.checked .toggle-thumb { transform: translateX(16px); }

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

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

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

@@ -1,4 +1,5 @@
import ReactMarkdown from "react-markdown";
import { cn } from "../lib/utils";
type AnswerBubbleProps = {
text: string;
@@ -7,25 +8,32 @@ type AnswerBubbleProps = {
export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
return (
<div className="rounded-md bg-orange-100 p-3 sm:p-4 w-2/3">
{loading ? (
<div className="flex flex-col w-full animate-pulse gap-2">
<div className="flex flex-row gap-2 w-full">
<div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
<div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
</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 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 ? (
<div className="flex items-center gap-1.5 py-1 px-1">
<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>
) : (
<div className="markdown-content text-sm leading-relaxed text-charcoal">
<ReactMarkdown>{text}</ReactMarkdown>
</div>
)}
</div>
) : (
<div className=" flex flex-col break-words overflow-wrap-anywhere text-sm sm:text-base [&>*]:break-words">
<ReactMarkdown>
{"🐈: " + text}
</ReactMarkdown>
</div>
)}
</div>
</div>
);
};

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

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

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

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

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

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

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

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

@@ -1,11 +1,22 @@
import { cn } from "../lib/utils";
type QuestionBubbleProps = {
text: string;
};
export const QuestionBubble = ({ text }: QuestionBubbleProps) => {
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">
🤦: {text}
<div className="flex justify-end message-enter">
<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>
);
};

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

@@ -1,5 +1,15 @@
import { cn } from "../lib/utils";
export const ToolBubble = ({ text }: { text: string }) => (
<div className="text-sm text-gray-500 italic px-3 py-1 self-start">
{text}
<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}
</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