reorganization

raggr-frontend/src/App.css

@@ -0,0 +1,7 @@
+@import "tailwindcss";
+
+body {
+	margin: 0;
+	font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+	background-color: #F9F5EB;
+}

raggr-frontend/src/App.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from "react";
+
+import "./App.css";
+import { AuthProvider } from "./contexts/AuthContext";
+import { ChatScreen } from "./components/ChatScreen";
+import { LoginScreen } from "./components/LoginScreen";
+import { conversationService } from "./api/conversationService";
+
+const AppContainer = () => {
+  const [isAuthenticated, setAuthenticated] = useState<boolean>(false);
+  const [isChecking, setIsChecking] = useState<boolean>(true);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const accessToken = localStorage.getItem("access_token");
+      const refreshToken = localStorage.getItem("refresh_token");
+
+      // No tokens at all, not authenticated
+      if (!accessToken && !refreshToken) {
+        setIsChecking(false);
+        setAuthenticated(false);
+        return;
+      }
+
+      // Try to verify token by making a request
+      try {
+        await conversationService.getAllConversations();
+        // If successful, user is authenticated
+        setAuthenticated(true);
+      } catch (error) {
+        // Token is invalid or expired
+        console.error("Authentication check failed:", error);
+        localStorage.removeItem("access_token");
+        localStorage.removeItem("refresh_token");
+        setAuthenticated(false);
+      } finally {
+        setIsChecking(false);
+      }
+    };
+
+    checkAuth();
+  }, []);
+
+  // Show loading state while checking authentication
+  if (isChecking) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-white/85">
+        <div className="text-xl">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {isAuthenticated ? (
+        <ChatScreen setAuthenticated={setAuthenticated} />
+      ) : (
+        <LoginScreen setAuthenticated={setAuthenticated} />
+      )}
+    </>
+  );
+};
+
+const App = () => {
+  return (
+    <AuthProvider>
+      <AppContainer />
+    </AuthProvider>
+  );
+};
+
+export default App;

raggr-frontend/src/api/conversationService.ts

@@ -0,0 +1,115 @@
+import { userService } from "./userService";
+
+interface Message {
+  id: string;
+  text: string;
+  speaker: "user" | "simba";
+  created_at: string;
+}
+
+interface Conversation {
+  id: string;
+  name: string;
+  messages?: Message[];
+  created_at: string;
+  updated_at: string;
+  user_id?: string;
+}
+
+interface QueryRequest {
+  query: string;
+}
+
+interface QueryResponse {
+  response: string;
+}
+
+interface CreateConversationRequest {
+  user_id: string;
+}
+
+class ConversationService {
+  private baseUrl = "/api";
+  private conversationBaseUrl = "/api/conversation";
+
+  async sendQuery(
+    query: string,
+    conversation_id: string,
+  ): Promise<QueryResponse> {
+    const response = await userService.fetchWithRefreshToken(
+      `${this.conversationBaseUrl}/query`,
+      {
+        method: "POST",
+        body: JSON.stringify({ query, conversation_id }),
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to send query");
+    }
+
+    return await response.json();
+  }
+
+  async getMessages(): Promise<Conversation> {
+    const response = await userService.fetchWithRefreshToken(
+      `${this.baseUrl}/messages`,
+      {
+        method: "GET",
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch messages");
+    }
+
+    return await response.json();
+  }
+
+  async getConversation(conversationId: string): Promise<Conversation> {
+    const response = await userService.fetchWithRefreshToken(
+      `${this.conversationBaseUrl}/${conversationId}`,
+      {
+        method: "GET",
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch conversation");
+    }
+
+    return await response.json();
+  }
+
+  async createConversation(): Promise<Conversation> {
+    const response = await userService.fetchWithRefreshToken(
+      `${this.conversationBaseUrl}/`,
+      {
+        method: "POST",
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to create conversation");
+    }
+
+    return await response.json();
+  }
+
+  async getAllConversations(): Promise<Conversation[]> {
+    const response = await userService.fetchWithRefreshToken(
+      `${this.conversationBaseUrl}/`,
+      {
+        method: "GET",
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch conversations");
+    }
+
+    return await response.json();
+  }
+}
+
+export const conversationService = new ConversationService();

raggr-frontend/src/api/oidcService.ts

@@ -0,0 +1,94 @@
+/**
+ * OIDC Authentication Service
+ * Handles OAuth 2.0 Authorization Code flow with PKCE
+ */
+
+interface OIDCLoginResponse {
+  auth_url: string;
+}
+
+interface OIDCCallbackResponse {
+  access_token: string;
+  refresh_token: string;
+  user: {
+    id: string;
+    username: string;
+    email: string;
+  };
+}
+
+class OIDCService {
+  private baseUrl = "/api/user/oidc";
+
+  /**
+   * Initiate OIDC login flow
+   * Returns authorization URL to redirect user to
+   */
+  async initiateLogin(redirectAfterLogin: string = "/"): Promise<string> {
+    const response = await fetch(
+      `${this.baseUrl}/login?redirect=${encodeURIComponent(redirectAfterLogin)}`,
+      {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to initiate OIDC login");
+    }
+
+    const data: OIDCLoginResponse = await response.json();
+    return data.auth_url;
+  }
+
+  /**
+   * Handle OIDC callback
+   * Exchanges authorization code for tokens
+   */
+  async handleCallback(
+    code: string,
+    state: string
+  ): Promise<OIDCCallbackResponse> {
+    const response = await fetch(
+      `${this.baseUrl}/callback?code=${encodeURIComponent(code)}&state=${encodeURIComponent(state)}`,
+      {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error("OIDC callback failed");
+    }
+
+    return await response.json();
+  }
+
+  /**
+   * Extract OIDC callback parameters from URL
+   */
+  getCallbackParamsFromURL(): { code: string; state: string } | null {
+    const params = new URLSearchParams(window.location.search);
+    const code = params.get("code");
+    const state = params.get("state");
+
+    if (code && state) {
+      return { code, state };
+    }
+
+    return null;
+  }
+
+  /**
+   * Clear callback parameters from URL without reload
+   */
+  clearCallbackParams(): void {
+    const url = new URL(window.location.href);
+    url.searchParams.delete("code");
+    url.searchParams.delete("state");
+    url.searchParams.delete("error");
+    window.history.replaceState({}, "", url.toString());
+  }
+}
+
+export const oidcService = new OIDCService();

raggr-frontend/src/api/userService.ts

@@ -0,0 +1,139 @@
+interface LoginResponse {
+  access_token: string;
+  refresh_token: string;
+  user: {
+    id: string;
+    username: string;
+    email?: string;
+  };
+}
+
+interface RefreshResponse {
+  access_token: string;
+}
+
+class UserService {
+  private baseUrl = "/api/user";
+
+  async login(username: string, password: string): Promise<LoginResponse> {
+    const response = await fetch(`${this.baseUrl}/login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username, password }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Invalid credentials");
+    }
+
+    return await response.json();
+  }
+
+  async refreshToken(): Promise<string> {
+    const refreshToken = localStorage.getItem("refresh_token");
+
+    if (!refreshToken) {
+      throw new Error("No refresh token available");
+    }
+
+    const response = await fetch(`${this.baseUrl}/refresh`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${refreshToken}`,
+      },
+    });
+
+    if (!response.ok) {
+      // Refresh token is invalid or expired, clear storage
+      localStorage.removeItem("access_token");
+      localStorage.removeItem("refresh_token");
+      throw new Error("Failed to refresh token");
+    }
+
+    const data: RefreshResponse = await response.json();
+    localStorage.setItem("access_token", data.access_token);
+    return data.access_token;
+  }
+
+  async validateToken(): Promise<boolean> {
+    const refreshToken = localStorage.getItem("refresh_token");
+
+    if (!refreshToken) {
+      return false;
+    }
+
+    try {
+      await this.refreshToken();
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  async fetchWithAuth(
+    url: string,
+    options: RequestInit = {},
+  ): Promise<Response> {
+    const accessToken = localStorage.getItem("access_token");
+
+    // Add authorization header
+    const headers = {
+      "Content-Type": "application/json",
+      ...(options.headers || {}),
+      ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
+    };
+
+    let response = await fetch(url, { ...options, headers });
+
+    // If unauthorized, try refreshing the token
+    if (response.status === 401) {
+      try {
+        const newAccessToken = await this.refreshToken();
+
+        // Retry the request with new token
+        headers.Authorization = `Bearer ${newAccessToken}`;
+        response = await fetch(url, { ...options, headers });
+      } catch (error) {
+        // Refresh failed, redirect to login or throw error
+        throw new Error("Session expired. Please log in again.");
+      }
+    }
+
+    return response;
+  }
+
+  async fetchWithRefreshToken(
+    url: string,
+    options: RequestInit = {},
+  ): Promise<Response> {
+    const refreshToken = localStorage.getItem("refresh_token");
+
+    // Add authorization header
+    const headers = {
+      "Content-Type": "application/json",
+      ...(options.headers || {}),
+      ...(refreshToken && { Authorization: `Bearer ${refreshToken}` }),
+    };
+
+    let response = await fetch(url, { ...options, headers });
+
+    // If unauthorized, try refreshing the token
+    if (response.status === 401) {
+      try {
+        const newAccessToken = await this.refreshToken();
+
+        // Retry the request with new token
+        headers.Authorization = `Bearer ${newAccessToken}`;
+        response = await fetch(url, { ...options, headers });
+      } catch (error) {
+        // Refresh failed, redirect to login or throw error
+        throw new Error("Session expired. Please log in again.");
+      }
+    }
+
+    return response;
+  }
+}
+
+export const userService = new UserService();

raggr-frontend/src/assets/favicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <text y="80" font-size="80" font-family="system-ui, -apple-system, sans-serif">🐱</text>
+</svg>

raggr-frontend/src/components/AnswerBubble.tsx

@@ -0,0 +1,31 @@
+import ReactMarkdown from "react-markdown";
+
+type AnswerBubbleProps = {
+  text: string;
+  loading?: boolean;
+};
+
+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>
+      ) : (
+        <div className=" flex flex-col break-words overflow-wrap-anywhere text-sm sm:text-base [&>*]:break-words">
+          <ReactMarkdown>
+            {"🐈: " + text}
+          </ReactMarkdown>
+        </div>
+      )}
+    </div>
+  );
+};

raggr-frontend/src/components/ChatScreen.tsx

@@ -0,0 +1,310 @@
+import { useEffect, useState, useRef } from "react";
+import { conversationService } from "../api/conversationService";
+import { QuestionBubble } from "./QuestionBubble";
+import { AnswerBubble } from "./AnswerBubble";
+import { MessageInput } from "./MessageInput";
+import { ConversationList } from "./ConversationList";
+import catIcon from "../assets/cat.png";
+
+type Message = {
+  text: string;
+  speaker: "simba" | "user";
+};
+
+type QuestionAnswer = {
+  question: string;
+  answer: string;
+};
+
+type Conversation = {
+  title: string;
+  id: string;
+};
+
+type ChatScreenProps = {
+  setAuthenticated: (isAuth: boolean) => void;
+};
+
+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 [showConversations, setShowConversations] = useState<boolean>(false);
+  const [selectedConversation, setSelectedConversation] =
+    useState<Conversation | null>(null);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const simbaAnswers = ["meow.", "hiss...", "purrrrrr", "yowOWROWWowowr"];
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  const handleSelectConversation = (conversation: Conversation) => {
+    setShowConversations(false);
+    setSelectedConversation(conversation);
+    const loadMessages = async () => {
+      try {
+        const fetchedConversation = await conversationService.getConversation(
+          conversation.id,
+        );
+        setMessages(
+          fetchedConversation.messages.map((message) => ({
+            text: message.text,
+            speaker: message.speaker,
+          })),
+        );
+      } catch (error) {
+        console.error("Failed to load messages:", error);
+      }
+    };
+    loadMessages();
+  };
+
+  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]);
+      console.log(parsedConversations);
+      console.log("JELLYFISH@");
+    } catch (error) {
+      console.error("Failed to load messages:", error);
+    }
+  };
+
+  const handleCreateNewConversation = async () => {
+    const newConversation = await conversationService.createConversation();
+    await loadConversations();
+    setSelectedConversation({
+      title: newConversation.name,
+      id: newConversation.id,
+    });
+  };
+
+  useEffect(() => {
+    loadConversations();
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  useEffect(() => {
+    const loadMessages = async () => {
+      console.log(selectedConversation);
+      console.log("JELLYFISH");
+      if (selectedConversation == null) 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);
+      }
+    };
+    loadMessages();
+  }, [selectedConversation?.id]);
+
+  const handleQuestionSubmit = async () => {
+    if (!query.trim() || isLoading) return; // Don't submit empty messages or while loading
+
+    const currMessages = messages.concat([{ text: query, speaker: "user" }]);
+    setMessages(currMessages);
+    setQuery(""); // Clear input immediately after submission
+    setIsLoading(true);
+
+    if (simbaMode) {
+      console.log("simba mode activated");
+      const randomIndex = Math.floor(Math.random() * simbaAnswers.length);
+      const randomElement = simbaAnswers[randomIndex];
+      setAnswer(randomElement);
+      setQuestionsAnswers(
+        questionsAnswers.concat([
+          {
+            question: query,
+            answer: randomElement,
+          },
+        ]),
+      );
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const result = await conversationService.sendQuery(
+        query,
+        selectedConversation.id,
+      );
+      setQuestionsAnswers(
+        questionsAnswers.concat([{ question: query, answer: result.response }]),
+      );
+      setMessages(
+        currMessages.concat([{ text: result.response, speaker: "simba" }]),
+      );
+    } catch (error) {
+      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 {
+      setIsLoading(false);
+    }
+  };
+
+  const handleQueryChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    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();
+      handleQuestionSubmit();
+    }
+  };
+
+  return (
+    <div className="h-screen flex flex-row bg-[#F9F5EB]">
+      {/* Sidebar - Expanded */}
+      <aside
+        className={`hidden md:flex md:flex-col bg-[#F9F5EB] border-r border-gray-200 p-4 overflow-y-auto transition-all duration-300 ${sidebarCollapsed ? "w-20" : "w-64"}`}
+      >
+        {!sidebarCollapsed ? (
+          <div className="bg-[#F9F5EB]">
+            <div className="flex flex-row items-center gap-2 mb-6">
+              <img
+                src={catIcon}
+                alt="Simba"
+                className="cursor-pointer hover:opacity-80"
+                onClick={() => setSidebarCollapsed(true)}
+              />
+              <h2 className="text-3xl bg-[#F9F5EB] font-semibold">asksimba!</h2>
+            </div>
+            <ConversationList
+              conversations={conversations}
+              onCreateNewConversation={handleCreateNewConversation}
+              onSelectConversation={handleSelectConversation}
+            />
+            <div className="mt-auto pt-4">
+              <button
+                className="w-full p-2 border border-red-400 bg-red-200 hover:bg-red-400 cursor-pointer rounded-md text-sm"
+                onClick={() => setAuthenticated(false)}
+              >
+                logout
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center gap-4">
+            <img
+              src={catIcon}
+              alt="Simba"
+              className="cursor-pointer hover:opacity-80"
+              onClick={() => setSidebarCollapsed(false)}
+            />
+          </div>
+        )}
+      </aside>
+
+      {/* Main chat area */}
+      <div className="flex-1 flex flex-col h-screen overflow-hidden">
+        {/* Mobile header */}
+        <header className="md:hidden flex flex-row justify-between items-center gap-3 p-4 border-b border-gray-200 bg-white">
+          <div className="flex flex-row items-center gap-2">
+            <img src={catIcon} alt="Simba" className="w-10 h-10" />
+            <h1 className="text-xl">asksimba!</h1>
+          </div>
+          <div className="flex flex-row gap-2">
+            <button
+              className="p-2 border border-green-400 bg-green-200 hover:bg-green-400 cursor-pointer rounded-md text-sm"
+              onClick={() => setShowConversations(!showConversations)}
+            >
+              {showConversations ? "hide" : "show"}
+            </button>
+            <button
+              className="p-2 border border-red-400 bg-red-200 hover:bg-red-400 cursor-pointer rounded-md text-sm"
+              onClick={() => setAuthenticated(false)}
+            >
+              logout
+            </button>
+          </div>
+        </header>
+
+        {/* Messages area */}
+        {selectedConversation && (
+          <div className="sticky top-0 mx-auto w-full">
+            <div className="bg-[#F9F5EB] text-black px-6 w-full py-3">
+              <h2 className="text-lg font-semibold">
+                {selectedConversation.title || "Untitled Conversation"}
+              </h2>
+            </div>
+          </div>
+        )}
+        <div className="flex-1 overflow-y-auto relative px-4 py-6">
+          {/* Floating conversation name */}
+
+          <div className="max-w-2xl mx-auto flex flex-col gap-4">
+            {showConversations && (
+              <div className="md:hidden">
+                <ConversationList
+                  conversations={conversations}
+                  onCreateNewConversation={handleCreateNewConversation}
+                  onSelectConversation={handleSelectConversation}
+                />
+              </div>
+            )}
+            {messages.map((msg, index) => {
+              if (msg.speaker === "simba") {
+                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="p-4 bg-[#F9F5EB]">
+          <div className="max-w-2xl mx-auto">
+            <MessageInput
+              query={query}
+              handleQueryChange={handleQueryChange}
+              handleKeyDown={handleKeyDown}
+              handleQuestionSubmit={handleQuestionSubmit}
+              setSimbaMode={setSimbaMode}
+              isLoading={isLoading}
+            />
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+};

raggr-frontend/src/components/ConversationList.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from "react";
+
+import { conversationService } from "../api/conversationService";
+type Conversation = {
+  title: string;
+  id: string;
+};
+
+type ConversationProps = {
+  conversations: Conversation[];
+  onSelectConversation: (conversation: Conversation) => void;
+  onCreateNewConversation: () => void;
+};
+
+export const ConversationList = ({
+  conversations,
+  onSelectConversation,
+  onCreateNewConversation,
+}: ConversationProps) => {
+  const [conservations, setConversations] = useState(conversations);
+
+  useEffect(() => {
+    const loadConversations = async () => {
+      try {
+        let fetchedConversations =
+          await conversationService.getAllConversations();
+
+        if (conversations.length == 0) {
+          await conversationService.createConversation();
+          fetchedConversations =
+            await conversationService.getAllConversations();
+        }
+        setConversations(
+          fetchedConversations.map((conversation) => ({
+            id: conversation.id,
+            title: conversation.name,
+          })),
+        );
+      } catch (error) {
+        console.error("Failed to load messages:", error);
+      }
+    };
+    loadConversations();
+  }, []);
+
+  return (
+    <div className="bg-indigo-300 rounded-md p-3 sm:p-4 flex flex-col gap-1">
+      {conservations.map((conversation) => {
+        return (
+          <div
+            key={conversation.id}
+            className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 cursor-pointer rounded-md p-3 min-h-[44px] flex items-center"
+            onClick={() => onSelectConversation(conversation)}
+          >
+            <p className="text-sm sm:text-base truncate w-full">
+              {conversation.title}
+            </p>
+          </div>
+        );
+      })}
+      <div
+        className="border-blue-400 bg-indigo-300 hover:bg-indigo-200 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>
+  );
+};

raggr-frontend/src/components/ConversationMenu.tsx

@@ -0,0 +1,24 @@
+type Conversation = {
+  title: string;
+  id: string;
+};
+
+type ConversationMenuProps = {
+  conversations: Conversation[];
+};
+
+export const ConversationMenu = ({ conversations }: ConversationMenuProps) => {
+  return (
+    <div className="absolute bg-white w-md rounded-md shadow-xl m-4 p-4">
+      <p className="py-2 px-4 rounded-md w-full text-xl font-bold">askSimba!</p>
+      {conversations.map((conversation) => (
+        <p
+          key={conversation.id}
+          className="py-2 px-4 rounded-md hover:bg-stone-200 w-full text-xl font-bold cursor-pointer"
+        >
+          {conversation.title}
+        </p>
+      ))}
+    </div>
+  );
+};

raggr-frontend/src/components/LoginScreen.tsx

@@ -0,0 +1,130 @@
+import { useState, useEffect } from "react";
+import { userService } from "../api/userService";
+import { oidcService } from "../api/oidcService";
+
+type LoginScreenProps = {
+  setAuthenticated: (isAuth: boolean) => void;
+};
+
+export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
+  const [error, setError] = useState<string>("");
+  const [isChecking, setIsChecking] = useState<boolean>(true);
+  const [isLoggingIn, setIsLoggingIn] = useState<boolean>(false);
+
+  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
+          );
+
+          // 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;
+        } catch (err) {
+          console.error("OIDC callback error:", err);
+          setError("Login failed. Please try again.");
+          oidcService.clearCallbackParams();
+          setIsLoggingIn(false);
+          setIsChecking(false);
+          return;
+        }
+      }
+
+      // Check if user is already authenticated
+      const isValid = await userService.validateToken();
+      if (isValid) {
+        setAuthenticated(true);
+      }
+      setIsChecking(false);
+    };
+
+    initAuth();
+  }, [setAuthenticated]);
+
+  const handleOIDCLogin = async () => {
+    try {
+      setIsLoggingIn(true);
+      setError("");
+
+      // Get authorization URL from backend
+      const authUrl = await oidcService.initiateLogin();
+
+      // Redirect to Authelia
+      window.location.href = authUrl;
+    } catch (err) {
+      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 bg-opacity-20">
+        <div className="bg-white/85 h-screen flex items-center justify-center">
+          <div className="text-center">
+            <p className="text-lg sm:text-xl">
+              {isLoggingIn ? "Logging in..." : "Checking authentication..."}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen bg-opacity-20">
+      <div className="bg-white/85 h-screen">
+        <div className="flex flex-row justify-center py-4">
+          <div className="flex flex-col gap-4 w-full px-4 sm:w-11/12 sm:max-w-2xl lg:max-w-4xl sm:px-0">
+            <div className="flex flex-col gap-4">
+              <div className="flex flex-grow justify-center w-full bg-amber-400 p-2">
+                <h1 className="text-base sm:text-xl font-bold text-center">
+                  I AM LOOKING FOR A DESIGNER. THIS APP WILL REMAIN UGLY UNTIL A
+                  DESIGNER COMES.
+                </h1>
+              </div>
+              <header className="flex flex-row justify-center gap-2 grow sticky top-0 z-10 bg-white">
+                <h1 className="text-2xl sm:text-3xl">ask simba!</h1>
+              </header>
+
+              {error && (
+                <div className="text-red-600 font-semibold text-sm sm:text-base bg-red-50 p-3 rounded-md">
+                  {error}
+                </div>
+              )}
+
+              <div className="text-center text-sm sm:text-base text-gray-600 py-2">
+                Click below to login with Authelia
+              </div>
+            </div>
+
+            <button
+              className="p-3 sm:p-4 min-h-[44px] border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow text-sm sm:text-base font-semibold"
+              onClick={handleOIDCLogin}
+              disabled={isLoggingIn}
+            >
+              {isLoggingIn ? "Redirecting..." : "Login with Authelia"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

raggr-frontend/src/components/MessageInput.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState, useRef } from "react";
+
+type MessageInputProps = {
+  handleQueryChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleKeyDown: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleQuestionSubmit: () => void;
+  setSimbaMode: (sdf: boolean) => void;
+  query: string;
+  isLoading: boolean;
+};
+
+export const MessageInput = ({
+  query,
+  handleKeyDown,
+  handleQueryChange,
+  handleQuestionSubmit,
+  setSimbaMode,
+  isLoading,
+}: MessageInputProps) => {
+  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">
+        <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}
+        >
+          {isLoading ? "Sending..." : "Submit"}
+        </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>
+  );
+};

raggr-frontend/src/components/QuestionBubble.tsx

@@ -0,0 +1,11 @@
+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>
+  );
+};

raggr-frontend/src/contexts/AuthContext.tsx

@@ -0,0 +1,56 @@
+import { createContext, useContext, useState, ReactNode } from "react";
+import { userService } from "../api/userService";
+
+interface AuthContextType {
+  token: string | null;
+  login: (username: string, password: string) => Promise<any>;
+  logout: () => void;
+  isAuthenticated: () => boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export const AuthProvider = ({ children }: AuthProviderProps) => {
+  const [token, setToken] = useState(localStorage.getItem("access_token"));
+
+  const login = async (username: string, password: string) => {
+    try {
+      const data = await userService.login(username, password);
+      setToken(data.access_token);
+      localStorage.setItem("access_token", data.access_token);
+      localStorage.setItem("refresh_token", data.refresh_token);
+      return data;
+    } catch (error) {
+      console.error("Login failed:", error);
+      throw error;
+    }
+  };
+
+  const logout = () => {
+    setToken(null);
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("refresh_token");
+  };
+
+  const isAuthenticated = () => {
+    return token !== null && token !== undefined && token !== "";
+  };
+
+  return (
+    <AuthContext.Provider value={{ token, login, logout, isAuthenticated }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};

raggr-frontend/src/env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@rsbuild/core/types" />
+
+/**
+ * Imports the SVG file as a React component.
+ * @requires [@rsbuild/plugin-svgr](https://npmjs.com/package/@rsbuild/plugin-svgr)
+ */
+declare module '*.svg?react' {
+  import type React from 'react';
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}

raggr-frontend/src/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  const root = ReactDOM.createRoot(rootEl);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  );
+}