web

Sleeping

Chandima Prabhath commited on May 1

Commit

1904e4c

1 Parent(s): 22b1735

feat: Add chat components and modals for enhanced user interaction

- Implement DeleteChatDialog for confirming chat deletions.
- Create ThinkingAnimation component to indicate processing state.
- Develop WelcomeScreen to greet users and initiate new chats.
- Establish ChatLayout to manage chat interface and settings modals.
- Introduce ProfileModal for user profile management with avatar support.
- Add SettingsModal for configuring application settings and preferences.
- Create SourcesModal for displaying and filtering knowledge sources.
- Enhance apiService for querying and managing data interactions.
- Define chat and message types for structured data handling.

Files changed (24) hide show

frontend/README.md +5 -0
frontend/index.html +5 -4
frontend/package.json +1 -0
frontend/src/App.tsx +3 -8
frontend/src/components/chat/ChatBubble.tsx +238 -80
frontend/src/components/chat/ChatInputArea.tsx +60 -0
frontend/src/{pages/HomePage.tsx → components/chat/ChatInterface.tsx} +314 -333
frontend/src/components/chat/ChatMessage.tsx +16 -6
frontend/src/components/chat/ChatSidebar.tsx +168 -0
frontend/src/components/chat/DeleteChatDialog.tsx +46 -0
frontend/src/components/chat/ThinkingAnimation.tsx +53 -0
frontend/src/components/chat/WelcomeScreen.tsx +25 -0
frontend/src/components/layout/ChatLayout.tsx +31 -0
frontend/src/components/layout/MainLayout.tsx +0 -24
frontend/src/components/layout/ModeToggle.tsx +7 -10
frontend/src/components/modals/ProfileModal.tsx +223 -0
frontend/src/{pages/SettingsPage.tsx → components/modals/SettingsModal.tsx} +165 -182
frontend/src/components/modals/SourcesModal.tsx +301 -0
frontend/src/index.css +234 -1
frontend/src/lib/storage.ts +44 -7
frontend/src/pages/Index.tsx +0 -8
frontend/src/pages/SourcesPage.tsx +0 -286
frontend/src/services/{rulingService.ts → apiService.ts} +17 -9
frontend/src/types/chat.ts +20 -0

frontend/README.md CHANGED Viewed

@@ -71,3 +71,8 @@ Yes, you can!
 To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
 Read more here: [Setting up a custom domain](https://docs.lovable.dev/tips-tricks/custom-domain#step-by-step-guide)

 To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
 Read more here: [Setting up a custom domain](https://docs.lovable.dev/tips-tricks/custom-domain#step-by-step-guide)
+TODO:
+make it that the think messege is by default colapsed and can be exapnded. implement that in a creative modern way. and make the thinking animation more noticable. also messeges after a certain msg variation are belong to that specific variention so when we switch between varietions other messages that belongs to that variention needs to be changed too. also i had to regenrate to make it the first varietion and then again to second varietion. but thats not how it needs to be. every messege is by default the first varietion. so if we regenerate the message it becomes second varietion.

frontend/index.html CHANGED Viewed

@@ -1,14 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ruling-insight-navigator</title>
-    <meta name="description" content="Lovable Generated Project" />
     <meta name="author" content="Lovable" />
-    <meta property="og:title" content="ruling-insight-navigator" />
-    <meta property="og:description" content="Lovable Generated Project" />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Insight AI - Chat Assistant</title>
+    <meta name="description" content="AI-powered chat assistant with RAG capabilities" />
     <meta name="author" content="Lovable" />
+    <meta property="og:title" content="Insight AI" />
+    <meta property="og:description" content="AI-powered chat assistant with RAG capabilities" />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />

frontend/package.json CHANGED Viewed

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.0",

   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@multiavatar/multiavatar": "^1.0.7",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.0",

frontend/src/App.tsx CHANGED Viewed

@@ -5,10 +5,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useEffect } from "react";
-import MainLayout from "@/components/layout/MainLayout";
-import HomePage from "@/pages/HomePage";
-import SourcesPage from "@/pages/SourcesPage";
-import SettingsPage from "@/pages/SettingsPage";
 import NotFound from "@/pages/NotFound";
 const queryClient = new QueryClient({
@@ -23,7 +20,7 @@ const queryClient = new QueryClient({
 const App = () => {
   // Set the window title
   useEffect(() => {
-    document.title = "Financial Insight System (FIS)";
   }, []);
   return (
@@ -33,9 +30,7 @@ const App = () => {
         <Sonner />
         <BrowserRouter>
           <Routes>
-            <Route path="/" element={<MainLayout><HomePage /></MainLayout>} />
-            <Route path="/sources" element={<MainLayout><SourcesPage /></MainLayout>} />
-            <Route path="/settings" element={<MainLayout><SettingsPage /></MainLayout>} />
             <Route path="*" element={<NotFound />} />
           </Routes>
         </BrowserRouter>

 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useEffect } from "react";
+import ChatLayout from "@/components/layout/ChatLayout";
 import NotFound from "@/pages/NotFound";
 const queryClient = new QueryClient({
 const App = () => {
   // Set the window title
   useEffect(() => {
+    document.title = "Insight AI - Chat Assistant";
   }, []);
   return (
         <Sonner />
         <BrowserRouter>
           <Routes>
+            <Route path="/" element={<ChatLayout />} />
             <Route path="*" element={<NotFound />} />
           </Routes>
         </BrowserRouter>

frontend/src/components/chat/ChatBubble.tsx CHANGED Viewed

@@ -1,12 +1,22 @@
 import { useState } from "react";
-import { ArrowRight, RefreshCcw, Copy, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { format } from "date-fns";
 import { Avatar, AvatarFallback } from "../ui/avatar";
 import { ChatMessage } from "./ChatMessage";
-import { toast } from '../ui/sonner'
 interface Message {
   id: string;
@@ -16,106 +26,254 @@ interface Message {
   isLoading?: boolean;
   error?: boolean;
   result?: any;
 }
 interface ChatBubbleProps {
   message: Message;
   onViewSearchResults?: (messageId: string) => void;
   onRetry?: (messageId: string) => void;
 }
-export const ChatBubble = ({ message, onViewSearchResults, onRetry }: ChatBubbleProps) => {
-  const [copied, setCopied] = useState(false)
   const isSystem = message.sender === "system";
-  const showCopyButton = true
   const copyToClipboard = () => {
-    navigator.clipboard.writeText(message.content)
-    setCopied(true)
-    toast.success('Copied to clipboard!')
-    setTimeout(() => setCopied(false), 2000)
-  }
   return (
-    <div
-      className={cn(
-        "group flex w-full animate-slide-in mb-4",
-        isSystem ? "justify-start" : "justify-end"
-      )}
-    >
-      <div className={cn(
-        "flex gap-3 max-w-[80%]",
-        isSystem ? "flex-row" : "flex-row-reverse"
-      )}>
-        <Avatar className={cn(
-          "h-8 w-8 border",
-          isSystem
-            ? "bg-financial-accent text-white shadow-lg"
-            : "bg-muted"
         )}>
-          <AvatarFallback className="text-xs font-semibold">
-            {isSystem ? "AI" : "You"}
-          </AvatarFallback>
-        </Avatar>
-        <div className="flex flex-col">
-          <div className={cn(
-            "rounded-2xl shadow-lg message-bubble backdrop-blur-sm",
             isSystem
-              ? "bg-white/90 dark:bg-card/90 border border-border text-foreground message-bubble-ai"
-              : "bg-financial-accent/30 border border-financial-accent/30 text-white message-bubble-user",
-            message.error && "border-destructive dark:border-red-500"
           )}>
-            {message.isLoading ? (
-              <div className="typing-indicator flex items-center space-x-1 px-2">
-                <span></span>
-                <span></span>
-                <span></span>
-              </div>
-            ) : (
-              <ChatMessage
-                content={message.content}
-              />
-            )}
-          </div>
-          {/* Chat bubble footer */}
-          <div className="flex flex-row chat-bubble-footer justify-between">
-            {/* Time */}
             <div className={cn(
-              "text-xs text-muted-foreground mt-1",
-              isSystem ? "text-left" : "text-right"
             )}>
-              {format(message.timestamp, "h:mm a")}
-            </div>
-            {/* Controls */}
-            <div className="controls flex ">
-              {/* Retry button for failed messages */}
-              {message.error && onRetry && (
-                <div className="flex justify-end mt-1">
-                  <Button
-                    variant="secondary"
-                    size="sm"
-                    onClick={() => onRetry(message.id)}
-                    className="text-xs flex items-center gap-1.5 text-muted-foreground hover:border border-financial-accent/30 bg-background/50 backdrop-blur-sm"
-                  >
-                    <RefreshCcw className="h-3 w-3" />
-                    Retry
-                  </Button>
-                </div>
-              )}
-              {/* Copy */}
-              {showCopyButton && (
-                <div className="relative top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                  <Button variant="link" size="sm" onClick={copyToClipboard}>
-                    {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-                  </Button>
-                </div>
               )}
             </div>
           </div>
         </div>
       </div>
-    </div>
   );
 };

 import { useState } from "react";
+import { ArrowRight, RefreshCcw, Copy, Check, Trash2, RotateCcw, ListFilter, ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { format } from "date-fns";
 import { Avatar, AvatarFallback } from "../ui/avatar";
 import { ChatMessage } from "./ChatMessage";
+import { ThinkingAnimation } from "./ThinkingAnimation";
+import { toast } from '../ui/sonner';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+interface MessageVariation {
+  id: string;
+  content: string;
+  timestamp: Date;
+}
 interface Message {
   id: string;
   isLoading?: boolean;
   error?: boolean;
   result?: any;
+  variations?: MessageVariation[];
+  activeVariation?: string;
 }
 interface ChatBubbleProps {
   message: Message;
   onViewSearchResults?: (messageId: string) => void;
   onRetry?: (messageId: string) => void;
+  onRegenerate?: (messageId: string) => void;
+  onDelete?: (messageId: string) => void;
+  onSelectVariation?: (messageId: string, variationId: string) => void;
 }
+export const ChatBubble = ({
+  message,
+  onViewSearchResults,
+  onRetry,
+  onRegenerate,
+  onDelete,
+  onSelectVariation
+}: ChatBubbleProps) => {
+  const [copied, setCopied] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const isWelcomeMessage = message.id === "welcomems"
   const isSystem = message.sender === "system";
+  const showCopyButton = true;
+  const hasVariations = isSystem && message.variations && message.variations.length > 0;
+  // If the message has variations, display the active one or the first one
+  const displayContent = isSystem && hasVariations && message.activeVariation
+    ? message.variations.find(v => v.id === message.activeVariation)?.content || message.content
+    : message.content;
   const copyToClipboard = () => {
+    navigator.clipboard.writeText(displayContent);
+    setCopied(true);
+    toast.success('Copied to clipboard!');
+    setTimeout(() => setCopied(false), 2000);
+  };
+  const handleDelete = () => {
+    setDeleteDialogOpen(false);
+    if (onDelete) {
+      onDelete(message.id);
+    }
+  };
+  const handleSelectVariation = (variationId: string) => {
+    if (onSelectVariation) {
+      onSelectVariation(message.id, variationId);
+    }
+  };
+  // Function to get the current variation index and navigate through variations
+  const navigateVariations = (direction: 'prev' | 'next') => {
+    if (!hasVariations || !message.variations || message.variations.length <= 1) return;
+    const currentIndex = message.activeVariation
+      ? message.variations.findIndex(v => v.id === message.activeVariation)
+      : 0;
+    let newIndex;
+    if (direction === 'prev') {
+      newIndex = (currentIndex - 1 + message.variations.length) % message.variations.length;
+    } else {
+      newIndex = (currentIndex + 1) % message.variations.length;
+    }
+    handleSelectVariation(message.variations[newIndex].id);
+  };
+  // Get current variation index for display
+  const getCurrentVariationIndex = () => {
+    if (!hasVariations || !message.variations) return 0;
+    return message.activeVariation
+      ? message.variations.findIndex(v => v.id === message.activeVariation) + 1
+      : 1;
+  };
   return (
+    <>
+      <div
+        className={cn(
+          "group flex w-full animate-slide-in mb-4",
+          isSystem ? "justify-start" : "justify-end"
+        )}
+      >
+        <div className={cn(
+          "flex gap-3 max-w-[80%]",
+          isSystem ? "flex-row" : "flex-row-reverse"
         )}>
+          <Avatar className={cn(
+            "h-8 w-8 border",
             isSystem
+              ? "bg-financial-accent dark:text-white shadow-lg"
+              : "bg-muted"
           )}>
+            <AvatarFallback className="text-xs font-semibold">
+              {isSystem ? "AI" : "You"}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col">
             <div className={cn(
+              "rounded-2xl shadow-lg message-bubble backdrop-blur-sm",
+              isSystem
+                ? "bg-white/90 dark:bg-card/90 border border-border text-foreground message-bubble-ai"
+                : "bg-financial-accent/30 border border-financial-accent/30 dark:text-white message-bubble-user",
+              message.error && "border-destructive dark:border-red-500"
             )}>
+              {message.isLoading ? (
+                <ThinkingAnimation />
+              ) : (
+                <ChatMessage
+                  content={displayContent}
+                />
               )}
             </div>
+            {/* Chat bubble footer */}
+            <div className="flex flex-row chat-bubble-footer justify-between">
+              {/* Time */}
+              <div className={cn(
+                "text-xs text-muted-foreground mt-1",
+                isSystem ? "text-left" : "text-right"
+              )}>
+                {format(message.timestamp, "h:mm a")}
+              </div>
+              {/* Controls */}
+              {!isWelcomeMessage && <div className="controls flex gap-1">
+                {/* Variation Navigation */}
+                {hasVariations && message.variations && message.variations.length > 1 && (
+                  <div className="flex items-center mt-1 opacity-0 group-hover:opacity-100 transition-opacity bg-background/50 rounded-md border">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => navigateVariations('prev')}
+                      disabled={message.variations.length <= 1}
+                      className="h-6 px-1"
+                    >
+                      <ChevronLeft className="h-3 w-3" />
+                    </Button>
+                    <span className="text-xs px-1">
+                      {getCurrentVariationIndex()}/{message.variations.length}
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => navigateVariations('next')}
+                      disabled={message.variations.length <= 1}
+                      className="h-6 px-1"
+                    >
+                      <ChevronRight className="h-3 w-3" />
+                    </Button>
+                  </div>
+                )}
+                {/* Retry button for failed messages */}
+                {message.error && onRetry && (
+                  <div className="flex mt-1">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={() => onRetry(message.id)}
+                      className="text-xs flex items-center gap-1.5 text-muted-foreground hover:border border-financial-accent/30 bg-background/50 backdrop-blur-sm"
+                    >
+                      <RefreshCcw className="h-3 w-3" />
+                      Retry
+                    </Button>
+                  </div>
+                )}
+                {/* Regenerate button for system messages */}
+                {isSystem && !message.isLoading && onRegenerate && (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div className="flex mt-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                          <Button
+                            variant="link"
+                            size="sm"
+                            onClick={() => onRegenerate(message.id)}
+                          >
+                            <RotateCcw className="h-3 w-3" />
+                          </Button>
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Generate variation</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
+                {/* Delete button */}
+                {onDelete && !message.isLoading && (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div className="flex mt-1 opacity-0 group-hover:opacity-100">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setDeleteDialogOpen(true)}
+                            className="text-xs flex items-center gap-1.5 text-muted-foreground hover:text-destructive hover:bg-background/50 backdrop-blur-sm"
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Delete message</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
+                {/* Copy */}
+                {showCopyButton && !message.isLoading && (
+                  <div className="relative top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <Button variant="link" size="sm" onClick={copyToClipboard}>
+                      {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                    </Button>
+                  </div>
+                )}
+              </div>}
+            </div>
           </div>
         </div>
       </div>
+      {/* Delete confirmation dialog */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Message</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete this message? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 };

frontend/src/components/chat/ChatInputArea.tsx ADDED Viewed

	@@ -0,0 +1,60 @@

+import React, { RefObject } from "react";
+import { CornerDownLeft } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+interface ChatInputAreaProps {
+  inputRef: RefObject<HTMLInputElement>;
+  inputValue: string;
+  setInputValue: (value: string) => void;
+  handleSendMessage: (e?: React.FormEvent) => void;
+  isLoading: boolean;
+}
+export const ChatInputArea: React.FC<ChatInputAreaProps> = ({
+  inputRef,
+  inputValue,
+  setInputValue,
+  handleSendMessage,
+  isLoading
+}) => {
+  return (
+    <div className="absolute bottom-0 left-0 right-0 p-4 bg-background/80 dark:bg-background/50 backdrop-blur-md border-t border-border/30">
+      <div className="max-w-3xl mx-auto">
+        <form onSubmit={handleSendMessage} className="relative">
+          <div className="relative">
+            <Input
+              ref={inputRef}
+              type="text"
+              placeholder="Message Insight AI..."
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              className="pr-20 py-6 text-base bg-background/50 border border-border/50 focus-visible:ring-1 focus-visible:ring-primary/50 rounded-xl"
+              disabled={isLoading}
+            />
+            <div className="absolute right-2 top-1/2 -translate-y-1/2">
+              <Button
+                type="submit"
+                size="icon"
+                className="rounded-lg"
+                disabled={isLoading || !inputValue.trim()}
+              >
+                {isLoading ? (
+                  <div className="h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                ) : (
+                  <CornerDownLeft className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+          <div className="mt-2 text-center text-xs text-muted-foreground">
+            Insight AI may produce inaccurate information. Verify important information.
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

frontend/src/{pages/HomePage.tsx → components/chat/ChatInterface.tsx} RENAMED Viewed

@@ -1,48 +1,29 @@
 import { useState, useRef, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { Send, Plus, CornerDownLeft, TrashIcon, RefreshCcw, Bot, Sparkles, Menu } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { rulingService, Message as APIMessage } from "@/services/rulingService";
 import { toast } from "@/components/ui/sonner";
 import { ChatBubble } from "@/components/chat/ChatBubble";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 import { storage, STORAGE_KEYS } from "@/lib/storage";
-import { format } from "date-fns";
-import { ModeToggle } from "@/components/layout/ModeToggle";
-import { Link } from "react-router-dom";
-import { FileText, MessageCircle, Settings, PanelLeft } from "lucide-react";
-interface Message {
-  id: string;
-  content: string;
-  sender: "user" | "system";
-  timestamp: Date;
-  isLoading?: boolean;
-  error?: boolean;
-  result?: any;
-}
-interface Chat {
-  id: string;
-  title: string;
-  messages: Message[];
-  createdAt: Date;
-  updatedAt: Date;
 }
-const WELCOME_MESSAGE = "Hello! I'm Insight AI. How can I help you today?";
 const generateId = () => Math.random().toString(36).substring(2, 11);
-const navItems = [
-  { name: "Conversations", path: "/", icon: MessageCircle },
-  { name: "Sources", path: "/sources", icon: FileText }
-];
-const HomePage = () => {
   const [chats, setChats] = useState<Chat[]>(() => {
     const savedChats = storage.get<Chat[]>(STORAGE_KEYS.CHATS);
     if (savedChats) {
@@ -69,32 +50,15 @@ const HomePage = () => {
     if (chats.length > 0) {
       return chats[0];
     }
-    // Create initial chat if none exists
-    const initialChat: Chat = {
-      id: generateId(),
-      title: "New Chat",
-      messages: [
-        {
-          id: generateId(),
-          content: WELCOME_MESSAGE,
-          sender: "system" as const,
-          timestamp: new Date()
-        }
-      ],
-      createdAt: new Date(),
-      updatedAt: new Date()
-    };
-    return initialChat;
   });
   const [inputValue, setInputValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [isGeneratingTitle, setIsGeneratingTitle] = useState(false);
-  const navigate = useNavigate();
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -112,9 +76,6 @@ const HomePage = () => {
       : chats;
     storage.set(STORAGE_KEYS.CHATS, allChats);
-    // Dispatch a custom event to notify storage updates
-    window.dispatchEvent(new Event("storage-updated"));
   }, [chats, activeChat]);
   const scrollToBottom = () => {
@@ -134,63 +95,21 @@ const HomePage = () => {
     }
   }, [isLoading]);
-  // Event listeners for custom events
   useEffect(() => {
-    const handleNewChat = () => {
-      const newChat: Chat = {
-        id: generateId(),
-        title: "New Chat",
-        messages: [
-          {
-            id: generateId(),
-            content: WELCOME_MESSAGE,
-            sender: "system" as const,
-            timestamp: new Date()
-          }
-        ],
-        createdAt: new Date(),
-        updatedAt: new Date()
-      };
-      setActiveChat(newChat);
-      setChats(prev => [newChat, ...prev]);
-      setIsSidebarOpen(false);
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 100);
-    };
     const handleSelectChat = (e: Event) => {
       const customEvent = e as CustomEvent;
       const chatId = customEvent.detail?.chatId;
       if (chatId) {
-        const selectedChat = chats.find(chat => chat.id === chatId);
-        if (selectedChat) {
-          setActiveChat(selectedChat);
-          setIsSidebarOpen(false);
-          setTimeout(() => {
-            inputRef.current?.focus();
-          }, 100);
-        }
       }
     };
     const handleDeleteChat = (e: Event) => {
       const customEvent = e as CustomEvent;
       const chatId = customEvent.detail?.chatId;
       if (chatId) {
-        const updatedChats = chats.filter(chat => chat.id !== chatId);
-        setChats(updatedChats);
-        // If we're deleting the active chat, switch to another one
-        if (activeChat?.id === chatId) {
-          setActiveChat(updatedChats.length > 0 ? updatedChats[0] : null);
-          // If no chats left, create a new one
-          if (updatedChats.length === 0) {
-            handleNewChat();
-          }
-        }
       }
     };
@@ -206,25 +125,19 @@ const HomePage = () => {
   }, [chats, activeChat]);
   const generateChatTitle = async (query: string) => {
-    if (!activeChat) return;
-    // Only generate titles for new chats
-    if (activeChat.title !== "New Chat") return;
     setIsGeneratingTitle(true);
     try {
-      const response = await rulingService.generateTitle(query);
       if (response.title) {
-        // Update the existing chat object directly
         setActiveChat(prevChat => {
           if (!prevChat) return null;
-          const updatedChat = {
-            ...prevChat,
-            title: response.title
-          };
           // Update chats list
           setChats(prevChats =>
@@ -238,7 +151,7 @@ const HomePage = () => {
       }
     } catch (error) {
       console.error("Error generating chat title:", error);
-      // Fallback to using query as title if title generation fails
       if (activeChat.title === "New Chat") {
         setActiveChat(prevChat => {
           if (!prevChat) return null;
@@ -248,7 +161,6 @@ const HomePage = () => {
             title: query.slice(0, 30) + (query.length > 30 ? '...' : '')
           };
-          // Update chats list
           setChats(prevChats =>
             prevChats.map(chat =>
               chat.id === updatedChat.id ? updatedChat : chat
@@ -297,14 +209,14 @@ const HomePage = () => {
     try {
       // Prepare chat history for the API
       const chatHistory: APIMessage[] = updatedChat.messages
-        .filter(msg => !msg.isLoading && msg.content) // filter out loading messages and empty messages
         .slice(0, -1) // exclude the loading message we just added
         .map(msg => ({
           role: msg.sender === "user" ? "user" : "assistant",
           content: msg.content
         }));
-      const response = await rulingService.queryRulings({
         query: userMessage.content,
         chat_history: chatHistory
       });
@@ -341,7 +253,7 @@ const HomePage = () => {
       }
     } catch (error) {
-      console.error("Error querying rulings:", error);
       // Replace loading message with error
       const updatedMessages = updatedChat.messages.map(msg =>
@@ -370,20 +282,13 @@ const HomePage = () => {
     }
   };
-  const handleViewSearchResults = (messageId: string) => {
-    const message = activeChat?.messages.find(msg => msg.id === messageId);
-    if (message && message.content) {
-      navigate(`/sources`);
-    }
-  };
-  const handleNewChat = () => {
     const newChat: Chat = {
       id: generateId(),
       title: "New Chat",
       messages: [
         {
-          id: generateId(),
           content: WELCOME_MESSAGE,
           sender: "system" as const,
           timestamp: new Date()
@@ -395,11 +300,13 @@ const HomePage = () => {
     setActiveChat(newChat);
     setChats(prev => [newChat, ...prev]);
-    inputRef.current?.focus();
     setIsSidebarOpen(false);
   };
-  const handleSelectChat = (chatId: string) => {
     const selectedChat = chats.find(chat => chat.id === chatId);
     if (selectedChat) {
       setActiveChat(selectedChat);
@@ -410,9 +317,7 @@ const HomePage = () => {
     }
   };
-  const handleDeleteChat = (chatId: string, e: React.MouseEvent) => {
-    e.stopPropagation();
     const updatedChats = chats.filter(chat => chat.id !== chatId);
     setChats(updatedChats);
@@ -422,9 +327,214 @@ const HomePage = () => {
       // If no chats left, create a new one
       if (updatedChats.length === 0) {
-        handleNewChat();
       }
     }
   };
   const handleRetryMessage = (messageId: string) => {
@@ -474,7 +584,7 @@ const HomePage = () => {
       }));
     // Retry the query
-    rulingService.queryRulings({
       query: userMessageContent,
       chat_history: chatHistory
     })
@@ -494,8 +604,6 @@ const HomePage = () => {
         };
         setActiveChat(finalChat);
-        // Update chats list
         setChats(prevChats =>
           prevChats.map(chat =>
             chat.id === finalChat.id ? finalChat : chat
@@ -528,217 +636,90 @@ const HomePage = () => {
       });
   };
-  const toggleSidebar = () => {
-    setIsSidebarOpen(!isSidebarOpen);
   };
   return (
-    <div className="flex h-full">
-      {/* Chat Sidebar */}
-      <div className={cn(
-        "fixed top-0 bottom-0 left-0 z-20 bg-background/90 backdrop-blur-lg",
-        "transition-transform duration-300 ease-in-out",
-        isSidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
-        "w-72 lg:w-80 border-r border-border/50 flex-shrink-0",
-        "md:relative md:inset-auto h-full md:z-0"
-      )}>
-        <div className="flex flex-col h-full">
-          <div className="p-4 pb-0 border-b border-border/50">
-            <div className="flex pb-4 justify-between items-center gap-3">
-              <Link to="/" className="flex items-center space-x-2">
-                <div className="h-8 w-8 bg-financial-accent rounded-md flex items-center justify-center">
-                  <span className="text-white font-bold text-lg">AI</span>
-                </div>
-                <h1 className="text-xl font-semibold text-financial-navy dark:text-white">
-                  Insight AI
-                </h1>
-              </Link>
-              <Button className="md:hidden" variant="ghost" size="icon" onClick={toggleSidebar}>
-                <PanelLeft className="h-5 w-5" />
-              </Button>
-            </div>
-            <Separator />
-            {/* navigation */}
-            <div className="flex flex-row gap-2 mb-4">
-              {navItems.map((item) => (
-                <Link
-                  key={item.name}
-                  to={item.path}
-                  className={cn(
-                    "flex items-center gap-2 p-2 rounded-md text-sm",
-                    item.path === location.pathname
-                      ? "bg-financial-accent/30 border border-financial-accent/30"
-                      : "hover:bg-muted text-muted-foreground"
-                  )}
-                  onClick={() => setIsSidebarOpen(false)}
-                >
-                  <item.icon className="h-4 w-4" />
-                  <span>{item.name}</span>
-                </Link>
-              ))}
-            </div>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Bot className="h-5 w-5 text-financial-accent" />
-                <span className="font-semibold">Recent Chats</span>
-              </div>
-              <Button
-                onClick={handleNewChat}
-                variant="ghost"
-                className="h-8 w-8 p-0 hover:bg-financial-accent/10 hover:text-financial-accent"
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
             </div>
           </div>
-          <div className="flex-1 overflow-y-auto p-1 space-y-2 scrollbar-thin">
-            {chats.length === 0 ? (
-              <div className="text-center text-muted-foreground p-4">
-                No conversations yet. Start a new one!
-              </div>
             ) : (
-              chats.map(chat => (
-                <div
-                  key={chat.id}
-                  onClick={() => handleSelectChat(chat.id)}
-                  className={cn(
-                    "flex items-center justify-between p-1 px-4 rounded-lg cursor-pointer group transition-all",
-                    activeChat?.id === chat.id
-                      ? "bg-financial-accent/20 border border-financial-accent/30"
-                      : "hover:bg-muted/50 border border-transparent"
-                  )}
-                >
-                  <div className="flex-1 truncate">
-                    <div className={cn(
-                      "font-medium truncate flex items-center",
-                      activeChat?.id === chat.id && "text-financial-accent"
-                    )}>
-                      <Bot className="h-3.5 w-3.5 mr-1.5 opacity-70" />
-                      {chat.title}
-                      {chat.id === activeChat?.id && isGeneratingTitle && (
-                        <span className="ml-1.5 inline-block h-2 w-2 rounded-full bg-financial-accent/70 animate-pulse"></span>
-                      )}
-                    </div>
-                    <div className="text-xs text-muted-foreground">
-                      {chat.messages.filter(m => m.sender === "user").length} messages • {format(new Date(chat.updatedAt), "MMM d")}
-                    </div>
                   </div>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-destructive/10 hover:text-destructive"
-                    onClick={(e) => handleDeleteChat(chat.id, e)}
-                  >
-                    <TrashIcon className="h-3.5 w-3.5" />
-                  </Button>
                 </div>
-              ))
-            )}
-          </div>
-          {/* Sidebar Footer */}
-          <div className="p-3 border-t mt-auto flex justify-between items-center">
-            <Link to="/settings" className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1.5">
-              <Settings className="h-3.5 w-3.5" />
-              <span>Settings</span>
-            </Link>
-            <ModeToggle />
-          </div>
-        </div>
-      </div>
-      {/* Chat Main Area */}
-      <div className="flex-1 flex flex-col overflow-hidden">
-        {/* Mobile Header */}
-        <div className="md:hidden p-2 flex items-center border-b">
-          <Button variant="ghost" size="icon" onClick={toggleSidebar}>
-            <PanelLeft className="h-5 w-5" />
-          </Button>
-          <div className="mx-auto font-medium flex items-center">
-            <Bot className="h-4 w-4 mr-1.5" />
-            {activeChat?.title || "New Chat"}
           </div>
-          <Button variant="ghost" size="icon" onClick={handleNewChat}>
-            <Plus className="h-5 w-5" />
-          </Button>
-        </div>
-        {/* Chat Area */}
-        <div className="relative flex-1 overflow-hidden">
-          {!activeChat ? (
-            <div className="h-full flex flex-col items-center justify-center">
-              <div className="text-center max-w-md p-8 bg-card/40 backdrop-blur-sm rounded-2xl border border-border/50">
-                <Bot className="h-10 w-10 mx-auto mb-4 text-financial-accent" />
-                <h2 className="text-2xl font-bold mb-2 bg-gradient-to-br from-financial-accent to-financial-light-accent bg-clip-text text-transparent">Welcome to Insight AI</h2>
-                <p className="text-muted-foreground mb-6">
-                  Ask me anything, and I'll do my best to help you
-                </p>
-                <Button onClick={handleNewChat} className="animate-bounce-in bg-financial-accent hover:bg-financial-accent/90">
-                  Start a new conversation
-                </Button>
-              </div>
-            </div>
-          ) : (
-            <>
-              <div className="h-full overflow-y-auto px-4 pb-32 pt-4">
-                <div className="max-w-3xl mx-auto space-y-4">
-                  {activeChat.messages.map((message) => (
-                    <ChatBubble
-                      key={message.id}
-                      message={message}
-                      onViewSearchResults={handleViewSearchResults}
-                      onRetry={handleRetryMessage}
-                    />
-                  ))}
-                  <div ref={messagesEndRef} />
-                </div>
-              </div>
-              {/* Input Area */}
-              <div className="absolute bottom-0 left-0 right-0 p-4 bg-background/80 dark:bg-background/50 backdrop-blur-md border-t border-border/30">
-                <div className="max-w-3xl mx-auto">
-                  <form onSubmit={handleSendMessage} className="relative">
-                    <div className="relative">
-                      <Input
-                        ref={inputRef}
-                        type="text"
-                        placeholder="Ask me anything..."
-                        value={inputValue}
-                        onChange={(e) => setInputValue(e.target.value)}
-                        className="pr-20 py-6 text-base bg-background/50 border border-border/50 focus:border-financial-accent/50 focus-visible:ring-1 focus-visible:ring-financial-accent/50 rounded-xl"
-                        disabled={isLoading}
-                      />
-                      <div className="absolute right-2 top-1/2 -translate-y-1/2">
-                        <Button
-                          type="submit"
-                          size="icon"
-                          className="rounded-lg bg-financial-accent hover:bg-financial-accent/90"
-                          disabled={isLoading || !inputValue.trim()}
-                        >
-                          {isLoading ? (
-                            <div className="h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
-                          ) : (
-                            <CornerDownLeft className="h-4 w-4" />
-                          )}
-                        </Button>
-                      </div>
-                    </div>
-                    <div className="mt-2 text-center text-xs text-muted-foreground">
-                      Insight AI may produce inaccurate information. Verify important details.
-                    </div>
-                  </form>
-                </div>
-              </div>
-            </>
-          )}
         </div>
       </div>
-    </div>
   );
 };
-export default HomePage;

 import { useState, useRef, useEffect } from "react";
+import { Send, Plus, PanelLeft, Bot } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { apiService, Message as APIMessage } from "@/services/apiService";
 import { toast } from "@/components/ui/sonner";
 import { ChatBubble } from "@/components/chat/ChatBubble";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 import { storage, STORAGE_KEYS } from "@/lib/storage";
+import { Message, Chat } from "@/types/chat";
+import { ProfileModal } from "../modals/ProfileModal";
+import { ChatSidebar } from "./ChatSidebar";
+import { ChatInputArea } from "./ChatInputArea";
+import { WelcomeScreen } from "./WelcomeScreen";
+import { DeleteChatDialog } from "./DeleteChatDialog";
+interface ChatInterfaceProps {
+  onOpenSettings: () => void;
+  onOpenSources: () => void;
 }
+const WELCOME_MESSAGE = "Hello! I'm Insight AI, How can I help you today?";
 const generateId = () => Math.random().toString(36).substring(2, 11);
+export const ChatInterface = ({ onOpenSettings, onOpenSources }: ChatInterfaceProps) => {
   const [chats, setChats] = useState<Chat[]>(() => {
     const savedChats = storage.get<Chat[]>(STORAGE_KEYS.CHATS);
     if (savedChats) {
     if (chats.length > 0) {
       return chats[0];
     }
   });
   const [inputValue, setInputValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [isGeneratingTitle, setIsGeneratingTitle] = useState(false);
+  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
+  const [chatToDelete, setChatToDelete] = useState<string | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
       : chats;
     storage.set(STORAGE_KEYS.CHATS, allChats);
   }, [chats, activeChat]);
   const scrollToBottom = () => {
     }
   }, [isLoading]);
+  // Handle new chat and chat selection events
   useEffect(() => {
+    const handleNewChat = () => createNewChat();
     const handleSelectChat = (e: Event) => {
       const customEvent = e as CustomEvent;
       const chatId = customEvent.detail?.chatId;
       if (chatId) {
+        selectChat(chatId);
       }
     };
     const handleDeleteChat = (e: Event) => {
       const customEvent = e as CustomEvent;
       const chatId = customEvent.detail?.chatId;
       if (chatId) {
+        setChatToDelete(chatId);
       }
     };
   }, [chats, activeChat]);
   const generateChatTitle = async (query: string) => {
+    if (!activeChat || activeChat.title !== "New Chat") return;
     setIsGeneratingTitle(true);
     try {
+      const response = await apiService.generateTitle(query);
       if (response.title) {
+        // Update the active chat with the new title
         setActiveChat(prevChat => {
           if (!prevChat) return null;
+          const updatedChat = { ...prevChat, title: response.title };
           // Update chats list
           setChats(prevChats =>
       }
     } catch (error) {
       console.error("Error generating chat title:", error);
+      // Fallback to using query as title
       if (activeChat.title === "New Chat") {
         setActiveChat(prevChat => {
           if (!prevChat) return null;
             title: query.slice(0, 30) + (query.length > 30 ? '...' : '')
           };
           setChats(prevChats =>
             prevChats.map(chat =>
               chat.id === updatedChat.id ? updatedChat : chat
     try {
       // Prepare chat history for the API
       const chatHistory: APIMessage[] = updatedChat.messages
+        .filter(msg => !msg.isLoading && msg.content) // filter out loading messages
         .slice(0, -1) // exclude the loading message we just added
         .map(msg => ({
           role: msg.sender === "user" ? "user" : "assistant",
           content: msg.content
         }));
+      const response = await apiService.queryRulings({
         query: userMessage.content,
         chat_history: chatHistory
       });
       }
     } catch (error) {
+      console.error("Error querying AI:", error);
       // Replace loading message with error
       const updatedMessages = updatedChat.messages.map(msg =>
     }
   };
+  const createNewChat = () => {
     const newChat: Chat = {
       id: generateId(),
       title: "New Chat",
       messages: [
         {
+          id: "welcomems",
           content: WELCOME_MESSAGE,
           sender: "system" as const,
           timestamp: new Date()
     setActiveChat(newChat);
     setChats(prev => [newChat, ...prev]);
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 100);
     setIsSidebarOpen(false);
   };
+  const selectChat = (chatId: string) => {
     const selectedChat = chats.find(chat => chat.id === chatId);
     if (selectedChat) {
       setActiveChat(selectedChat);
     }
   };
+  const deleteChat = (chatId: string) => {
     const updatedChats = chats.filter(chat => chat.id !== chatId);
     setChats(updatedChats);
       // If no chats left, create a new one
       if (updatedChats.length === 0) {
+        createNewChat();
       }
     }
+    // Clear the chat being deleted
+    setChatToDelete(null);
+  };
+  const handleDeleteMessage = (messageId: string) => {
+    if (!activeChat) return;
+    // Find the index of the message to delete
+    const messageIndex = activeChat.messages.findIndex(msg => msg.id === messageId);
+    if (messageIndex === -1) return;
+    // Determine if we need to delete a pair (user message + assistant response)
+    const isUserMessage = activeChat.messages[messageIndex].sender === "user";
+    const updatedMessages = [...activeChat.messages];
+    if (isUserMessage && messageIndex + 1 < updatedMessages.length &&
+        updatedMessages[messageIndex + 1].sender === "system") {
+      // Remove both the user message and the following assistant response
+      updatedMessages.splice(messageIndex, 2);
+    } else if (!isUserMessage && messageIndex > 0 &&
+               updatedMessages[messageIndex - 1].sender === "user") {
+      // Remove both the assistant message and the preceding user message
+      updatedMessages.splice(messageIndex - 1, 2);
+    } else {
+      // Just remove the single message
+      updatedMessages.splice(messageIndex, 1);
+    }
+    const updatedChat = {
+      ...activeChat,
+      messages: updatedMessages,
+      updatedAt: new Date()
+    };
+    setActiveChat(updatedChat);
+    // Update chats list
+    setChats(prevChats =>
+      prevChats.map(chat =>
+        chat.id === updatedChat.id ? updatedChat : chat
+      )
+    );
+  };
+  const handleRegenerateMessage = (messageId: string) => {
+    if (!activeChat) return;
+    // Find the system message that needs to be regenerated
+    const messageIndex = activeChat.messages.findIndex(
+      msg => msg.id === messageId && msg.sender === "system"
+    );
+    if (messageIndex < 0) return;
+    const message = activeChat.messages[messageIndex];
+    // Find the last user message before this system message
+    let userMessageContent = "";
+    let userMessageIndex = -1;
+    for (let i = messageIndex - 1; i >= 0; i--) {
+      if (activeChat.messages[i].sender === "user") {
+        userMessageContent = activeChat.messages[i].content;
+        userMessageIndex = i;
+        break;
+      }
+    }
+    if (!userMessageContent) return;
+    // Create a new variation
+    const variationId = generateId();
+    const now = new Date();
+    // Prepare the updated message with a loading variation
+    const variations = message.variations || [];
+    const existingVariations = variations.map(v => ({ ...v }));
+    // Create a new variations array with the loading state
+    const updatedVariations = [
+      ...existingVariations,
+      { id: variationId, content: "", timestamp: now }
+    ];
+    // Update the message with loading state
+    const updatedMessages = [...activeChat.messages];
+    updatedMessages[messageIndex] = {
+      ...updatedMessages[messageIndex],
+      isLoading: true,
+      variations: updatedVariations,
+      activeVariation: variationId
+    };
+    const updatedChat = {
+      ...activeChat,
+      messages: updatedMessages
+    };
+    setActiveChat(updatedChat);
+    setIsLoading(true);
+    // Prepare chat history for the API
+    // Include only the messages up to the user message that triggered the original response
+    const chatHistory: APIMessage[] = activeChat.messages
+      .slice(0, userMessageIndex)
+      .filter(msg => !msg.isLoading && msg.content)
+      .map(msg => ({
+        role: msg.sender === "user" ? "user" : "assistant",
+        content: msg.content
+      }));
+    // Send the API request
+    apiService.queryRulings({
+      query: userMessageContent,
+      chat_history: chatHistory
+    })
+      .then(response => {
+        // Update the variation with the actual response
+        const finalVariations = updatedMessages[messageIndex].variations!.map(v =>
+          v.id === variationId
+            ? { ...v, content: response.answer, timestamp: new Date() }
+            : v
+        );
+        const finalMessages = [...updatedMessages];
+        finalMessages[messageIndex] = {
+          ...finalMessages[messageIndex],
+          variations: finalVariations,
+          isLoading: false,
+          error: false,
+          result: response.retrieved_sources,
+          activeVariation: variationId
+        };
+        const finalChat = {
+          ...updatedChat,
+          messages: finalMessages
+        };
+        setActiveChat(finalChat);
+        setChats(prevChats =>
+          prevChats.map(chat =>
+            chat.id === finalChat.id ? finalChat : chat
+          )
+        );
+      })
+      .catch(error => {
+        console.error("Error regenerating response:", error);
+        // Remove the failed variation
+        const finalVariations = updatedMessages[messageIndex].variations!.filter(v =>
+          v.id !== variationId
+        );
+        const finalMessages = [...updatedMessages];
+        finalMessages[messageIndex] = {
+          ...finalMessages[messageIndex],
+          variations: finalVariations,
+          isLoading: false,
+          activeVariation: finalVariations.length > 0 ? finalVariations[0].id : undefined
+        };
+        setActiveChat({
+          ...updatedChat,
+          messages: finalMessages
+        });
+        toast.error("Failed to generate variation");
+      })
+      .finally(() => {
+        setIsLoading(false);
+        setTimeout(() => {
+          inputRef.current?.focus();
+        }, 100);
+      });
+  };
+  const handleSelectVariation = (messageId: string, variationId: string) => {
+    if (!activeChat) return;
+    // Find the message
+    const messageIndex = activeChat.messages.findIndex(msg => msg.id === messageId);
+    if (messageIndex < 0) return;
+    // Set the active variation
+    const updatedMessages = [...activeChat.messages];
+    updatedMessages[messageIndex] = {
+      ...updatedMessages[messageIndex],
+      activeVariation: variationId
+    };
+    const updatedChat = {
+      ...activeChat,
+      messages: updatedMessages
+    };
+    setActiveChat(updatedChat);
+    // Update chats list
+    setChats(prevChats =>
+      prevChats.map(chat =>
+        chat.id === updatedChat.id ? updatedChat : chat
+      )
+    );
   };
   const handleRetryMessage = (messageId: string) => {
       }));
     // Retry the query
+    apiService.queryRulings({
       query: userMessageContent,
       chat_history: chatHistory
     })
         };
         setActiveChat(finalChat);
         setChats(prevChats =>
           prevChats.map(chat =>
             chat.id === finalChat.id ? finalChat : chat
       });
   };
+  const openProfileModal = () => {
+    setIsProfileModalOpen(true);
   };
   return (
+    <>
+      <div className="flex h-full w-full">
+        {/* Chat Sidebar */}
+        <ChatSidebar
+          chats={chats}
+          activeChat={activeChat}
+          isGeneratingTitle={isGeneratingTitle}
+          createNewChat={createNewChat}
+          selectChat={selectChat}
+          onRequestDelete={setChatToDelete}
+          onOpenSettings={onOpenSettings}
+          onOpenSources={onOpenSources}
+          openProfileModal={openProfileModal}
+          isSidebarOpen={isSidebarOpen}
+          setIsSidebarOpen={setIsSidebarOpen}
+        />
+        {/* Chat Main Area */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Mobile Header */}
+          <div className="md:hidden p-2 flex items-center border-b">
+            <Button variant="ghost" size="icon" onClick={() => setIsSidebarOpen(true)}>
+              <PanelLeft className="h-5 w-5" />
+            </Button>
+            <div className="mx-auto font-medium flex items-center">
+              <Bot className="h-4 w-4 mr-1.5" />
+              {activeChat?.title || "New Chat"}
             </div>
+            <Button variant="ghost" size="icon" onClick={createNewChat}>
+              <Plus className="h-5 w-5" />
+            </Button>
           </div>
+          {/* Chat Area */}
+          <div className="relative flex-1 overflow-hidden">
+            {!activeChat ? (
+              <WelcomeScreen onCreateNewChat={createNewChat} />
             ) : (
+              <>
+                <div className="h-full overflow-y-auto px-4 pb-32 pt-4">
+                  <div className="max-w-3xl mx-auto space-y-4">
+                    {activeChat.messages.map((message) => (
+                      <ChatBubble
+                        key={message.id}
+                        message={message}
+                        onViewSearchResults={onOpenSources}
+                        onRetry={handleRetryMessage}
+                        onRegenerate={handleRegenerateMessage}
+                        onDelete={handleDeleteMessage}
+                        onSelectVariation={handleSelectVariation}
+                      />
+                    ))}
+                    <div ref={messagesEndRef} />
                   </div>
                 </div>
+                {/* Input Area */}
+                <ChatInputArea
+                  inputRef={inputRef}
+                  inputValue={inputValue}
+                  setInputValue={setInputValue}
+                  handleSendMessage={handleSendMessage}
+                  isLoading={isLoading}
+                />
+              </>
+            )}
           </div>
         </div>
       </div>
+      {/* Profile Modal */}
+      <ProfileModal isOpen={isProfileModalOpen} onClose={() => setIsProfileModalOpen(false)} />
+      {/* Delete Chat Confirmation Dialog */}
+      <DeleteChatDialog
+        isOpen={chatToDelete !== null}
+        onOpenChange={() => setChatToDelete(null)}
+        onDelete={() => chatToDelete && deleteChat(chatToDelete)}
+      />
+    </>
   );
 };

frontend/src/components/chat/ChatMessage.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
 // src/components/ChatMessage.tsx
 import React, { useState, useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
@@ -16,9 +17,18 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
   className,
 }) => {
-  //  ←––– THIS MEMO does the magic replace
-  const mdWithBadges = useMemo(() => {
-    return content.replace(
       /<source\s+path=["'](.+?)["']\s*\/>/g,
       (_match, path) => {
         const filename = path
@@ -33,8 +43,8 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
             </svg>
           </a>`
       }
-    )
-  }, [content])
   return (
     <div
@@ -65,7 +75,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
             ),
         }}
       >
-        {mdWithBadges}
       </ReactMarkdown>
     </div>
   )

 // src/components/ChatMessage.tsx
 import React, { useState, useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
   className,
 }) => {
+  // Process thinking tags
+  const processedContent = useMemo(() => {
+    // Replace <think>...</think> tags with a special format
+    const contentWithProcessedThinking = content.replace(
+      /<think>([\s\S]*?)<\/think>/g,
+      (_, thinkContent) => {
+        return `<div class="think-block">${thinkContent}</div>`;
+      }
+    );
+    // Continue processing source tags as before
+    return contentWithProcessedThinking.replace(
       /<source\s+path=["'](.+?)["']\s*\/>/g,
       (_match, path) => {
         const filename = path
             </svg>
           </a>`
       }
+    );
+  }, [content]);
   return (
     <div
             ),
         }}
       >
+        {processedContent}
       </ReactMarkdown>
     </div>
   )

frontend/src/components/chat/ChatSidebar.tsx ADDED Viewed

	@@ -0,0 +1,168 @@

+import React from "react";
+import { format } from "date-fns";
+import { Bot, TrashIcon, User, FileText, Settings, PanelLeft, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { Chat } from "@/types/chat";
+import { ModeToggle } from "@/components/layout/ModeToggle";
+interface ChatSidebarProps {
+  chats: Chat[];
+  activeChat: Chat | null;
+  isGeneratingTitle: boolean;
+  createNewChat: () => void;
+  selectChat: (id: string) => void;
+  onRequestDelete: (id: string) => void;
+  onOpenSettings: () => void;
+  onOpenSources: () => void;
+  openProfileModal: () => void;
+  isSidebarOpen: boolean;
+  setIsSidebarOpen: (open: boolean) => void;
+}
+export const ChatSidebar: React.FC<ChatSidebarProps> = ({
+  chats,
+  activeChat,
+  isGeneratingTitle,
+  createNewChat,
+  selectChat,
+  onRequestDelete,
+  onOpenSettings,
+  onOpenSources,
+  openProfileModal,
+  isSidebarOpen,
+  setIsSidebarOpen,
+}) => {
+  return (
+    <div className={cn(
+      "fixed top-0 bottom-0 left-0 z-20 bg-background/90 backdrop-blur-lg",
+      "transition-transform duration-300 ease-in-out",
+      isSidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
+      "w-72 lg:w-80 border-r border-border/50 flex-shrink-0",
+      "md:relative md:inset-auto h-full md:z-0"
+    )}>
+      <div className="flex flex-col h-full">
+        <div className="p-4 pb-0">
+          <div className="flex justify-between items-center">
+            <div className="flex items-center space-x-2">
+              <div className="h-8 w-8 bg-primary/90 rounded-md flex items-center justify-center">
+                <span className="text-white font-bold text-lg">AI</span>
+              </div>
+              <h1 className="text-xl font-semibold">
+                Insight AI
+              </h1>
+            </div>
+            <Button className="md:hidden" variant="ghost" size="icon" onClick={() => setIsSidebarOpen(false)}>
+              <PanelLeft className="h-5 w-5" />
+            </Button>
+          </div>
+          <div className="py-4">
+            <Button
+              onClick={createNewChat}
+              className="w-full justify-start gap-2"
+              variant="outline"
+            >
+              <Plus className="h-4 w-4" />
+              New Chat
+            </Button>
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Bot className="h-5 w-5 text-primary" />
+              <span className="font-medium">Recent Chats</span>
+            </div>
+          </div>
+        </div>
+        <div className="flex-1 overflow-y-auto p-2 space-y-1 scrollbar-thin">
+          {chats.length === 0 ? (
+            <div className="text-center text-muted-foreground p-4">
+              No conversations yet. Start a new one!
+            </div>
+          ) : (
+            chats.map(chat => (
+              <div
+                key={chat.id}
+                onClick={() => selectChat(chat.id)}
+                className={cn(
+                  "flex items-center justify-between p-2 px-3 rounded-lg cursor-pointer group transition-all",
+                  activeChat?.id === chat.id
+                    ? "bg-primary/10 border border-primary/20"
+                    : "hover:bg-muted/50 border border-transparent"
+                )}
+              >
+                <div className="flex-1 truncate">
+                  <div className={cn(
+                    "font-medium truncate flex items-center",
+                    activeChat?.id === chat.id && "text-primary"
+                  )}>
+                    <Bot className="h-3.5 w-3.5 mr-1.5 opacity-70" />
+                    {chat.title}
+                    {chat.id === activeChat?.id && isGeneratingTitle && (
+                      <span className="ml-1.5 inline-block h-2 w-2 rounded-full bg-primary/70 animate-pulse"></span>
+                    )}
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {chat.messages.filter(m => m.sender === "user").length} messages • {format(new Date(chat.updatedAt), "MMM d")}
+                  </div>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-destructive/10 hover:text-destructive"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onRequestDelete(chat.id);
+                  }}
+                >
+                  <TrashIcon className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            ))
+          )}
+        </div>
+        {/* Sidebar Footer */}
+        <div className="p-3 space-y-2">
+          <Button
+            onClick={openProfileModal}
+            variant="ghost"
+            className="w-full justify-start gap-2 text-muted-foreground hover:text-foreground"
+            size="sm"
+          >
+            <User className="h-4 w-4" />
+            Profile
+          </Button>
+          <Button
+            onClick={onOpenSources}
+            variant="ghost"
+            className="w-full justify-start gap-2 text-muted-foreground hover:text-foreground"
+            size="sm"
+          >
+            <FileText className="h-4 w-4" />
+            View Sources
+          </Button>
+          <Button
+            onClick={onOpenSettings}
+            variant="ghost"
+            className="w-full justify-start gap-2 text-muted-foreground hover:text-foreground"
+            size="sm"
+          >
+            <Settings className="h-4 w-4" />
+            Settings
+          </Button>
+          <div className="flex items-center justify-between pt-2 border-t">
+            <span className="text-xs text-muted-foreground">Theme</span>
+            <ModeToggle />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/chat/DeleteChatDialog.tsx ADDED Viewed

	@@ -0,0 +1,46 @@

+import React from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+interface DeleteChatDialogProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onDelete: () => void;
+}
+export const DeleteChatDialog: React.FC<DeleteChatDialogProps> = ({
+  isOpen,
+  onOpenChange,
+  onDelete,
+}) => {
+  return (
+    <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Chat</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete this chat? This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onDelete}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

frontend/src/components/chat/ThinkingAnimation.tsx ADDED Viewed

	@@ -0,0 +1,53 @@

+import { useState, useEffect } from "react";
+export const ThinkingAnimation = () => {
+  const [dots, setDots] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDots((prev) => (prev + 1) % 4);
+    }, 400);
+    return () => clearInterval(interval);
+  }, []);
+  return (
+    <div className="flex flex-col items-start gap-2 px-4 py-3">
+      <div className="thinking-brain">
+        <svg viewBox="0 0 24 24" width="24" height="24" className="thinking-brain-svg">
+          <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-5A2.5 2.5 0 0 1 2 19.5v-15A2.5 2.5 0 0 1 4.5 2h5Z"
+            className="fill-financial-accent/20 stroke-financial-accent stroke-[1.5]" />
+          <path d="M12 4.5A2.5 2.5 0 0 1 14.5 2h5A2.5 2.5 0 0 1 22 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-5A2.5 2.5 0 0 1 12 19.5v-15Z"
+            className="fill-financial-accent/10 stroke-financial-accent stroke-[1.5]" />
+          <path d="M6 12h4" className="stroke-financial-accent stroke-[1.5]" />
+          <path d="M14 12h4" className="stroke-financial-accent stroke-[1.5]" />
+          <path d="M13.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
+          <path d="M16.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
+          <path d="M13.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
+          <path d="M16.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
+          <path d="M9.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
+          <path d="M6.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
+          <path d="M9.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
+          <path d="M6.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
+        </svg>
+        <div className="thinking-waves">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+      <span className="text-sm font-medium text-muted-foreground flex items-center">
+        Thinking
+        <span className="thinking-dots-container ml-2">
+          {Array(3).fill(0).map((_, i) => (
+            <span
+              key={i}
+              className={`thinking-dot ${i <= dots ? 'thinking-dot-active' : ''}`}
+            ></span>
+          ))}
+        </span>
+      </span>
+    </div>
+  );
+};

frontend/src/components/chat/WelcomeScreen.tsx ADDED Viewed

	@@ -0,0 +1,25 @@

+import React from "react";
+import { Bot } from "lucide-react";
+import { Button } from "@/components/ui/button";
+interface WelcomeScreenProps {
+  onCreateNewChat: () => void;
+}
+export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ onCreateNewChat }) => {
+  return (
+    <div className="h-full flex flex-col items-center justify-center">
+      <div className="text-center max-w-md p-8 bg-card/40 backdrop-blur-sm rounded-2xl border border-border/50">
+        <Bot className="h-10 w-10 mx-auto mb-4 text-primary" />
+        <h2 className="text-2xl font-bold mb-2">Welcome to Insight AI</h2>
+        <p className="text-muted-foreground mb-6">
+          Ask me anything, and I'll do my best to help you
+        </p>
+        <Button onClick={onCreateNewChat} className="animate-fade-in">
+          Start a new conversation
+        </Button>
+      </div>
+    </div>
+  );
+};

frontend/src/components/layout/ChatLayout.tsx ADDED Viewed

	@@ -0,0 +1,31 @@

+import { useState } from "react";
+import { ChatInterface } from "@/components/chat/ChatInterface";
+import { SettingsModal } from "@/components/modals/SettingsModal";
+import { SourcesModal } from "@/components/modals/SourcesModal";
+const ChatLayout = () => {
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isSourcesOpen, setIsSourcesOpen] = useState(false);
+  return (
+    <div className="flex h-[100dvh] md:h-screen w-full">
+      <ChatInterface
+        onOpenSettings={() => setIsSettingsOpen(true)}
+        onOpenSources={() => setIsSourcesOpen(true)}
+      />
+      <SettingsModal
+        open={isSettingsOpen}
+        onOpenChange={setIsSettingsOpen}
+      />
+      <SourcesModal
+        open={isSourcesOpen}
+        onOpenChange={setIsSourcesOpen}
+      />
+    </div>
+  );
+};
+export default ChatLayout;

frontend/src/components/layout/MainLayout.tsx DELETED Viewed

@@ -1,24 +0,0 @@
-import { ReactNode } from "react";
-import { useIsMobile } from "@/hooks/use-mobile";
-import { useLocation } from "react-router-dom";
-interface MainLayoutProps {
-  children: ReactNode;
-}
-const MainLayout = ({ children }: MainLayoutProps) => {
-  const isMobile = useIsMobile();
-  const location = useLocation();
-  const isHomePage = location.pathname === "/";
-  return (
-    <div className="flex h-screen w-full">
-      <main className="flex-1 overflow-y-auto">
-        {children}
-      </main>
-    </div>
-  );
-};
-export default MainLayout;

frontend/src/components/layout/ModeToggle.tsx CHANGED Viewed

@@ -1,33 +1,30 @@
 import { Moon, Sun } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 export function ModeToggle() {
   const [theme, setTheme] = useState(() => {
-    // Check local storage or default to system preference
-    const storedTheme = localStorage.getItem("theme");
     if (storedTheme) return storedTheme;
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   });
   useEffect(() => {
     const root = window.document.documentElement;
     if (theme === "dark") {
       root.classList.add("dark");
     } else {
       root.classList.remove("dark");
     }
-    localStorage.setItem("theme", theme);
   }, [theme]);
   const toggleTheme = () => {
     setTheme(theme === "light" ? "dark" : "light");
   };
   return (
     <Button variant="outline" size="icon" onClick={toggleTheme} className="h-9 w-9">
       <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />

 import { Moon, Sun } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
+import { storage, STORAGE_KEYS } from "@/lib/storage";
 export function ModeToggle() {
   const [theme, setTheme] = useState(() => {
+    // Use storage lib or default to system preference
+    const storedTheme = storage.get<string>(STORAGE_KEYS.THEME);
     if (storedTheme) return storedTheme;
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   });
   useEffect(() => {
     const root = window.document.documentElement;
     if (theme === "dark") {
       root.classList.add("dark");
     } else {
       root.classList.remove("dark");
     }
+    storage.set(STORAGE_KEYS.THEME, theme);
   }, [theme]);
   const toggleTheme = () => {
     setTheme(theme === "light" ? "dark" : "light");
   };
   return (
     <Button variant="outline" size="icon" onClick={toggleTheme} className="h-9 w-9">
       <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />

frontend/src/components/modals/ProfileModal.tsx ADDED Viewed

	@@ -0,0 +1,223 @@

+import { useState, useEffect, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Switch } from "@/components/ui/switch";
+import { User, Mail, Shield, LogOut } from "lucide-react";
+import { Separator } from "@/components/ui/separator";
+import { toast } from "@/components/ui/sonner";
+import { storage, STORAGE_KEYS } from "@/lib/storage";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+// Use the ESM build of multiavatar to generate SVG strings
+import multiavatar from "@multiavatar/multiavatar/esm";
+interface ProfileModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+interface ProfileSettings {
+  name: string;
+  email: string;
+  avatarUrl?: string;        // now optional
+  saveHistory: boolean;
+}
+const PROFILE_STORAGE_KEY = STORAGE_KEYS.PROFILE_STORAGE_KEY;
+export const ProfileModal = ({ isOpen, onClose }: ProfileModalProps) => {
+  const [signOutDialogOpen, setSignOutDialogOpen] = useState(false);
+  const [profileSettings, setProfileSettings] = useState<ProfileSettings>(() => {
+    // load, or default (no external URL here)
+    return (
+      storage.get<ProfileSettings>(PROFILE_STORAGE_KEY) || {
+        name: "John Doe",
+        email: "[email protected]",
+        avatarUrl: undefined,
+        saveHistory: true,
+      }
+    );
+  });
+  // reload from storage whenever modal re-opens
+  useEffect(() => {
+    if (isOpen) {
+      const saved = storage.get<ProfileSettings>(PROFILE_STORAGE_KEY);
+      if (saved) setProfileSettings(saved);
+    }
+  }, [isOpen]);
+  // memoize the SVG data URI so it only regenerates when the name changes
+  const defaultAvatarDataUri = useMemo(() => {
+    const svg = multiavatar(profileSettings.name);
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+  }, [profileSettings.name]);
+  // pick either the custom URL or the inline SVG
+  const avatarSrc = profileSettings.avatarUrl || defaultAvatarDataUri;
+  const handleSaveChanges = () => {
+    storage.set(PROFILE_STORAGE_KEY, profileSettings);
+    toast.success("Profile settings saved successfully");
+    onClose();
+  };
+  const handleSignOut = () => {
+    toast.success("Signed out successfully");
+    setSignOutDialogOpen(false);
+    onClose();
+    // clear auth tokens, etc.
+  };
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent className="sm:max-w-[500px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-xl flex items-center">
+              <User className="mr-2 h-5 w-5" />
+              Profile Settings
+            </DialogTitle>
+            <DialogDescription>
+              Manage your profile information and preferences.
+            </DialogDescription>
+          </DialogHeader>
+          <Separator />
+          <div className="flex flex-col space-y-6 py-4">
+            {/* Profile section */}
+            <div className="flex flex-col space-y-4">
+              <div className="flex items-center space-x-4">
+                <Avatar className="h-20 w-20">
+                  <AvatarImage src={avatarSrc} alt="User avatar" />
+                  <AvatarFallback className="bg-primary/10 text-lg">
+                    <User className="h-8 w-8 text-primary" />
+                  </AvatarFallback>
+                </Avatar>
+                <div className="space-y-1">
+                  <h3 className="font-medium text-lg">{profileSettings.name}</h3>
+                  <p className="text-sm text-muted-foreground">{profileSettings.email}</p>
+                  <Button variant="outline" size="sm" className="mt-2">
+                    Change picture
+                  </Button>
+                </div>
+              </div>
+              <Separator />
+              <div className="grid gap-4">
+                {/* Name */}
+                <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="name" className="text-right">
+                    Name
+                  </Label>
+                  <Input
+                    id="name"
+                    value={profileSettings.name}
+                    onChange={(e) =>
+                      setProfileSettings({ ...profileSettings, name: e.target.value })
+                    }
+                    className="col-span-3"
+                  />
+                </div>
+                {/* Email */}
+                <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="email" className="text-right">
+                    Email
+                  </Label>
+                  <Input
+                    id="email"
+                    value={profileSettings.email}
+                    onChange={(e) =>
+                      setProfileSettings({ ...profileSettings, email: e.target.value })
+                    }
+                    className="col-span-3"
+                  />
+                </div>
+              </div>
+            </div>
+            {/* Privacy */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-medium flex items-center gap-2">
+                <Shield className="h-5 w-5" />
+                Privacy and Data
+              </h3>
+              <Separator />
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="chat-history">Save Chat History</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Keep your chat history saved
+                  </p>
+                </div>
+                <Switch
+                  id="chat-history"
+                  checked={profileSettings.saveHistory}
+                  onCheckedChange={(saveHistory) =>
+                    setProfileSettings({ ...profileSettings, saveHistory })
+                  }
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter className="flex items-center justify-between mt-6">
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={() => setSignOutDialogOpen(true)}
+            >
+              <LogOut className="mr-2 h-4 w-4" />
+              Sign Out
+            </Button>
+            <Button onClick={handleSaveChanges}>Save changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      {/* Sign-out confirmation */}
+      <AlertDialog open={signOutDialogOpen} onOpenChange={setSignOutDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Sign Out</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to sign out? You will need to sign in again to
+              access your account.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleSignOut}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Sign Out
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};

frontend/src/{pages/SettingsPage.tsx → components/modals/SettingsModal.tsx} RENAMED Viewed

@@ -1,30 +1,49 @@
-import { useState, useRef } from "react";
-import { Settings, Moon, Sun, Globe, Shield, Database, Cloud } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/sonner";
 import { storage, STORAGE_KEYS } from "@/lib/storage";
-const SettingsPage = () => {
   const [theme, setTheme] = useState(() => {
     return storage.get<string>(STORAGE_KEYS.THEME) || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
   });
-  const [apiEndpoint, setApiEndpoint] = useState(
-    storage.get<string>(STORAGE_KEYS.API_ENDPOINT) || "http://localhost:8000"
   );
   const fileInputRef = useRef<HTMLInputElement>(null);
   const handleThemeChange = (newTheme: string) => {
     setTheme(newTheme);
     const root = window.document.documentElement;
     if (newTheme === "dark") {
       root.classList.add("dark");
     } else if (newTheme === "light") {
@@ -37,33 +56,31 @@ const SettingsPage = () => {
         root.classList.remove("dark");
       }
     }
     storage.set(STORAGE_KEYS.THEME, newTheme);
     toast.success("Theme updated successfully");
   };
   const handleSaveEndpoint = () => {
     storage.set(STORAGE_KEYS.API_ENDPOINT, apiEndpoint);
     toast.success("API endpoint saved successfully");
   };
   const handleClearChats = () => {
     storage.set(STORAGE_KEYS.CHATS, []);
     toast.success("Chat history cleared successfully");
   };
   const handleClearSources = () => {
     storage.set(STORAGE_KEYS.SOURCES, []);
     toast.success("Sources cleared successfully");
   };
   const handleResetSettings = () => {
-    storage.remove(STORAGE_KEYS.THEME);
-    storage.remove(STORAGE_KEYS.API_ENDPOINT);
-    setApiEndpoint("http://localhost:8000");
-    setTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
     toast.success("Settings reset to defaults");
   };
@@ -101,172 +118,138 @@ const SettingsPage = () => {
     reader.readAsText(file);
     event.target.value = "";
   };
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="max-w-4xl mx-auto">
-        <h1 className="text-2xl font-bold mb-6 text-gradient flex items-center">
-          <Settings className="mr-2 h-5 w-5" />
-          System Settings
-        </h1>
-        <div className="grid gap-6">
-          <Card className="glass-effect">
-            <CardHeader className="border-b border-border/40 pb-4">
-              <CardTitle className="flex items-center">
-                <Moon className="mr-2 h-4 w-4" />
-                Appearance
-              </CardTitle>
-              <CardDescription>
-                Customize how Insight AI looks
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="pt-4">
-              <RadioGroup
-                value={theme}
-                onValueChange={handleThemeChange}
-                className="space-y-4"
-              >
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="light" id="light" />
-                  <Label htmlFor="light" className="flex items-center cursor-pointer">
-                    <Sun className="h-4 w-4 mr-2" />
-                    Light
-                  </Label>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="dark" id="dark" />
-                  <Label htmlFor="dark" className="flex items-center cursor-pointer">
-                    <Moon className="h-4 w-4 mr-2" />
-                    Dark
-                  </Label>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="system" id="system" />
-                  <Label htmlFor="system" className="flex items-center cursor-pointer">
-                    <Globe className="h-4 w-4 mr-2" />
-                    System
-                  </Label>
-                </div>
-              </RadioGroup>
-            </CardContent>
-          </Card>
-          <Card className="glass-effect">
-            <CardHeader className="border-b border-border/40 pb-4">
-              <CardTitle className="flex items-center">
-                <Database className="mr-2 h-4 w-4" />
-                API Configuration
-              </CardTitle>
-              <CardDescription>
-                Configure connection to the financial rulings database
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4 pt-4">
-              <div className="space-y-2">
-                <Label htmlFor="api-endpoint">API Endpoint</Label>
-                <div className="flex space-x-2">
-                  <Input
-                    id="api-endpoint"
-                    value={apiEndpoint}
-                    onChange={(e) => setApiEndpoint(e.target.value)}
-                    placeholder="http://localhost:8000"
-                    className="glass-input"
-                  />
-                  <Button onClick={handleSaveEndpoint} variant="outline" className="tech-button">
-                    <Cloud className="h-4 w-4 mr-2" />
-                    Save
-                  </Button>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-          <Card className="glass-effect">
-            <CardHeader className="border-b border-border/40 pb-4">
-              <CardTitle className="flex items-center">
-                <Shield className="mr-2 h-4 w-4" />
-                Privacy & Data
-              </CardTitle>
-              <CardDescription>
-                Manage your data and privacy settings
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="pt-4 space-y-4">
-              <div className="space-y-2">
-                <h3 className="text-sm font-medium">Data Management</h3>
-                <div className="flex flex-wrap gap-3">
-                  <Button
-                    variant="outline"
-                    onClick={handleClearChats}
-                    className="tech-button"
-                  >
-                    Clear Chat History
-                  </Button>
-                  <Button
-                    variant="outline"
-                    onClick={handleClearSources}
-                    className="tech-button"
-                  >
-                    Clear Source References
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    onClick={handleResetSettings}
-                    className="tech-button"
                   >
-                    Reset All Settings
-                  </Button>
                 </div>
-              </div>
-            </CardContent>
-          </Card>
-          <Card className="glass-effect">
-            <CardHeader className="border-b border-border/40 pb-4">
-              <CardTitle className="flex items-center">
-                <Cloud className="mr-2 h-4 w-4" />
-                Storage Export / Import
-              </CardTitle>
-              <CardDescription>
-                Backup or restore your application data
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="pt-4 space-y-4">
-              <div className="flex flex-wrap gap-3">
-                <Button
-                  variant="outline"
-                  onClick={handleExportStorage}
-                  className="tech-button"
-                >
-                  Export Storage
-                </Button>
-                <Button
-                  variant="outline"
-                  onClick={() => fileInputRef.current?.click()}
-                  className="tech-button"
-                >
-                  Import Storage
-                </Button>
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  accept="application/json"
-                  style={{ display: "none" }}
-                  onChange={handleImportStorage}
                 />
               </div>
-              <div className="text-xs text-muted-foreground">
-                Export will download your data as a JSON file. Import will overwrite your current data with the file contents.
-              </div>
-            </CardContent>
-          </Card>
         </div>
-      </div>
-    </div>
   );
 };
-export default SettingsPage;

+import { useState, useRef, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
 import { toast } from "@/components/ui/sonner";
 import { storage, STORAGE_KEYS } from "@/lib/storage";
+import { X, Settings, Moon, Sun, Globe, Shield, Database, Cloud } from "lucide-react";
+interface SettingsModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+const THEME_OPTIONS = [
+  { value: "light", label: "Light", icon: Sun },
+  { value: "dark", label: "Dark", icon: Moon },
+  { value: "system", label: "System", icon: Globe },
+];
+export const SettingsModal = ({ open, onOpenChange }: SettingsModalProps) => {
+  // Load settings from storage on mount
   const [theme, setTheme] = useState(() => {
     return storage.get<string>(STORAGE_KEYS.THEME) || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
   });
+  const [apiEndpoint, setApiEndpoint] = useState(() =>
+    storage.get<string>(STORAGE_KEYS.API_ENDPOINT) || "https://insight-ai-api.hf.space"
   );
   const fileInputRef = useRef<HTMLInputElement>(null);
+  // Sync settings from storage when modal opens
+  useEffect(() => {
+    if (open) {
+      setTheme(storage.get<string>(STORAGE_KEYS.THEME));
+      setApiEndpoint(storage.get<string>(STORAGE_KEYS.API_ENDPOINT));
+    }
+  }, [open]);
   const handleThemeChange = (newTheme: string) => {
     setTheme(newTheme);
     const root = window.document.documentElement;
     if (newTheme === "dark") {
       root.classList.add("dark");
     } else if (newTheme === "light") {
         root.classList.remove("dark");
       }
     }
     storage.set(STORAGE_KEYS.THEME, newTheme);
     toast.success("Theme updated successfully");
   };
   const handleSaveEndpoint = () => {
     storage.set(STORAGE_KEYS.API_ENDPOINT, apiEndpoint);
     toast.success("API endpoint saved successfully");
   };
   const handleClearChats = () => {
     storage.set(STORAGE_KEYS.CHATS, []);
     toast.success("Chat history cleared successfully");
+    window.location.reload();
   };
   const handleClearSources = () => {
     storage.set(STORAGE_KEYS.SOURCES, []);
     toast.success("Sources cleared successfully");
   };
   const handleResetSettings = () => {
+    // Reset all keys to their default values using storage lib
+    storage.resetToDefaults();
+    window.location.reload();
     toast.success("Settings reset to defaults");
   };
     reader.readAsText(file);
     event.target.value = "";
   };
   return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-full max-w-3xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center text-xl">
+            <Settings className="mr-2 h-5 w-5" />
+            Settings
+          </DialogTitle>
+        </DialogHeader>
+        <Separator />
+        <div className="max-h-[80dvh] md:max-h-[75vh] overflow-y-auto grid gap-6">
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium flex items-center">
+              <Moon className="mr-2 h-4 w-4" />
+              Appearance
+            </h3>
+            <RadioGroup
+              value={theme}
+              onValueChange={handleThemeChange}
+              className="grid grid-cols-3 gap-2"
+            >
+              {THEME_OPTIONS.map(({ value, label, icon: Icon }) => (
+                <div key={value} className="flex flex-col items-center space-y-2">
+                  <Label
+                    htmlFor={value}
+                    className={
+                      `flex flex-col items-center justify-center w-full h-20 border rounded-md cursor-pointer transition-colors
+                      ${theme === value
+                        ? "bg-financial-accent/30 border-financial-accent/30 ring-2 ring-financial-accent"
+                        : "hover:bg-financial-accent/30 hover:border-financial-accent/30"}
+                      `
+                    }
                   >
+                    <Icon className="h-8 w-8 mb-2" />
+                    {label}
+                  </Label>
+                  <RadioGroupItem value={value} id={value} className="sr-only" />
                 </div>
+              ))}
+            </RadioGroup>
+          </div>
+          <Separator />
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium flex items-center">
+              <Database className="mr-2 h-4 w-4" />
+              API Configuration
+            </h3>
+            <div className="space-y-2">
+              <Label htmlFor="api-endpoint">API Endpoint</Label>
+              <div className="flex space-x-2">
+                <Input
+                  id="api-endpoint"
+                  value={apiEndpoint}
+                  onChange={(e) => setApiEndpoint(e.target.value)}
+                  placeholder="Ex: http://localhost:8000"
                 />
+                <Button onClick={handleSaveEndpoint} variant="outline">
+                  <Cloud className="h-4 w-4 mr-2" />
+                  Save
+                </Button>
               </div>
+            </div>
+          </div>
+          <Separator />
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium flex items-center">
+              <Shield className="mr-2 h-4 w-4" />
+              Data Management
+            </h3>
+            <div className="flex flex-wrap gap-3">
+              <Button
+                variant="outline"
+                onClick={handleClearChats}
+              >
+                Clear Chat History
+              </Button>
+              <Button
+                variant="outline"
+                onClick={handleClearSources}
+              >
+                Clear Sources
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={handleResetSettings}
+              >
+                Reset All Settings
+              </Button>
+            </div>
+          </div>
+          <Separator />
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium flex items-center">
+              <Cloud className="mr-2 h-4 w-4" />
+              Backup & Restore
+            </h3>
+            <div className="flex flex-wrap gap-3">
+              <Button
+                variant="outline"
+                onClick={handleExportStorage}
+              >
+                Export Data
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                Import Data
+              </Button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="application/json"
+                style={{ display: "none" }}
+                onChange={handleImportStorage}
+              />
+            </div>
+            <div className="text-xs text-muted-foreground">
+              Export will download your data as a JSON file. Import will overwrite your current data.
+            </div>
+          </div>
         </div>
+      </DialogContent>
+    </Dialog>
   );
 };

frontend/src/components/modals/SourcesModal.tsx ADDED Viewed

	@@ -0,0 +1,301 @@

+import { useState, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Calendar as CalendarComponent } from "@/components/ui/calendar";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { DateRange } from "@/types";
+import { RetrievedSource } from "@/services/apiService";
+import { storage, STORAGE_KEYS } from "@/lib/storage";
+import {
+  Search,
+  ArrowUpDown,
+  Calendar,
+  FileText,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink
+} from "lucide-react";
+interface SourcesModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+export const SourcesModal = ({ open, onOpenChange }: SourcesModalProps) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedSource, setSelectedSource] = useState<string>("");
+  const [selectedCategory, setSelectedCategory] = useState<string>("");
+  const [date, setDate] = useState<DateRange>({
+    from: undefined,
+    to: undefined,
+  });
+  const [sortBy, setSortBy] = useState<string>("date-desc");
+  const [sources, setSources] = useState<RetrievedSource[]>([]);
+  const [sourceTypes, setSourceTypes] = useState<string[]>([]);
+  const [categories, setCategories] = useState<string[]>([]);
+  // Load sources from storage
+  useEffect(() => {
+    if (open) {
+      const storedSources = storage.get<RetrievedSource[]>(STORAGE_KEYS.SOURCES) || [];
+      setSources(storedSources);
+      // Extract unique source types and categories
+      const types = Array.from(new Set(storedSources.map(s => s.metadata?.source).filter(Boolean)));
+      setSourceTypes(types as string[]);
+      const cats = Array.from(new Set(storedSources.map(s => {
+        // For this example, we'll use the first word of the content as a mock category
+        const firstWord = s.content_snippet.split(' ')[0];
+        return firstWord.length > 3 ? firstWord : "General";
+      })));
+      setCategories(cats);
+    }
+  }, [open]);
+  // Filter sources based on search term, source, category, and date
+  const filteredSources = sources.filter(source => {
+    const matchesSearch = !searchTerm ||
+      source.content_snippet.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      (source.metadata?.source || "").toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesSource = !selectedSource || selectedSource === "All" || source.metadata?.source === selectedSource;
+    // Mock category matching based on first word of content
+    const sourceCategory = source.content_snippet.split(' ')[0].length > 3 ?
+      source.content_snippet.split(' ')[0] : "General";
+    const matchesCategory = !selectedCategory || selectedCategory === "All" || sourceCategory === selectedCategory;
+    let matchesDate = true;
+    if (date.from && source.metadata?.ruling_date) {
+      matchesDate = matchesDate && new Date(source.metadata.ruling_date) >= date.from;
+    }
+    if (date.to && source.metadata?.ruling_date) {
+      matchesDate = matchesDate && new Date(source.metadata.ruling_date) <= date.to;
+    }
+    return matchesSearch && matchesSource && matchesCategory && matchesDate;
+  });
+  // Sort sources
+  const sortedSources = [...filteredSources].sort((a, b) => {
+    if (sortBy === "date-desc") {
+      return new Date(b.metadata?.ruling_date || "").getTime() -
+             new Date(a.metadata?.ruling_date || "").getTime();
+    } else if (sortBy === "date-asc") {
+      return new Date(a.metadata?.ruling_date || "").getTime() -
+             new Date(b.metadata?.ruling_date || "").getTime();
+    } else if (sortBy === "relevance-desc") {
+      return b.content_snippet.length - a.content_snippet.length;
+    }
+    return 0;
+  });
+  const resetFilters = () => {
+    setSearchTerm("");
+    setSelectedSource("");
+    setSelectedCategory("");
+    setDate({ from: undefined, to: undefined });
+  };
+  const [expandedSources, setExpandedSources] = useState<Record<number, boolean>>({});
+  const toggleSource = (index: number) => {
+    setExpandedSources(prev => ({
+      ...prev,
+      [index]: !prev[index]
+    }));
+  };
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-full max-w-4xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center text-xl">
+            <FileText className="mr-2 h-5 w-5" />
+            Knowledge Sources
+          </DialogTitle>
+        </DialogHeader>
+        <div>
+          <div className="flex flex-col md:flex-row md:items-center justify-between mb-2">
+            <div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
+              <Select value={sortBy} onValueChange={setSortBy}>
+                <SelectTrigger className="w-[180px]">
+                  <div className="flex items-center">
+                    <ArrowUpDown className="mr-2 h-3.5 w-3.5 text-muted-foreground" />
+                    <span>Sort By</span>
+                  </div>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="date-desc">Date (Newest)</SelectItem>
+                  <SelectItem value="date-asc">Date (Oldest)</SelectItem>
+                  <SelectItem value="relevance-desc">Relevance</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="bg-accent/30 rounded-lg p-1 mb-2">
+            <div className="flex flex-col md:flex-row space-y-1 md:space-y-0 md:space-x-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+                <Input
+                  type="text"
+                  placeholder="Search sources..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-10"
+                />
+              </div>
+              <Select value={selectedSource} onValueChange={setSelectedSource}>
+                <SelectTrigger className="w-full md:w-[180px]">
+                  <span className="truncate">
+                    {selectedSource || "All Sources"}
+                  </span>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="All">All Sources</SelectItem>
+                  {sourceTypes.map(type => (
+                    <SelectItem key={type} value={type}>{type}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+                <SelectTrigger className="w-full md:w-[180px]">
+                  <span className="truncate">
+                    {selectedCategory || "All Categories"}
+                  </span>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="All">All Categories</SelectItem>
+                  {categories.map(category => (
+                    <SelectItem key={category} value={category}>{category}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" className="w-full md:w-[180px] justify-start text-left">
+                    <Calendar className="mr-2 h-4 w-4" />
+                    <span>
+                      {date.from || date.to ? (
+                        <>
+                          {date.from ? format(date.from, "LLL dd, y") : "From"} - {" "}
+                          {date.to ? format(date.to, "LLL dd, y") : "To"}
+                        </>
+                      ) : (
+                        "Date Range"
+                      )}
+                    </span>
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0">
+                  <CalendarComponent
+                    mode="range"
+                    selected={date}
+                    onSelect={(value: DateRange | undefined) => {
+                      if (value) setDate(value);
+                    }}
+                    className="p-3"
+                  />
+                </PopoverContent>
+              </Popover>
+              <Button
+                variant="outline"
+                className="md:w-auto"
+                onClick={resetFilters}
+              >
+                Reset
+              </Button>
+            </div>
+          </div>
+          <div className="max-h-[45dvh] md:max-h-[60vh] overflow-y-auto space-y-4">
+            {sortedSources.length > 0 ? (
+              sortedSources.map((source, index) => (
+                <div key={index} className="border rounded-lg overflow-hidden transition-all duration-300">
+                  <div className="p-4 bg-card">
+                    <div className="flex items-start justify-between">
+                      <div>
+                        <h3 className="font-medium">
+                          {source.metadata?.source || "Source"}
+                        </h3>
+                        <div className="flex items-center mt-1 text-sm text-muted-foreground">
+                          <FileText className="h-3.5 w-3.5 mr-1.5" />
+                          <span>{source.metadata?.source || "Unknown Source"}</span>
+                          {source.metadata?.ruling_date && (
+                            <>
+                              <span className="mx-1.5">•</span>
+                              <Calendar className="h-3.5 w-3.5 mr-1.5" />
+                              <span>{new Date(source.metadata.ruling_date).toLocaleDateString()}</span>
+                            </>
+                          )}
+                        </div>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => toggleSource(index)}
+                        className="p-0 h-8 w-8 hover:bg-accent/10"
+                      >
+                        {expandedSources[index] ? (
+                          <ChevronUp className="h-4 w-4" />
+                        ) : (
+                          <ChevronDown className="h-4 w-4" />
+                        )}
+                      </Button>
+                    </div>
+                    <div className={expandedSources[index] ? "" : "max-h-10 md:max-h-16 overflow-hidden relative"}>
+                      <p className="text-sm text-muted-foreground mt-2">
+                        {source.content_snippet}
+                      </p>
+                      {!expandedSources[index] && (
+                        <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-card to-transparent"></div>
+                      )}
+                    </div>
+                    {expandedSources[index] && (
+                      <div className="mt-4 text-sm flex justify-end">
+                        <Button variant="link" size="sm" className="h-8 p-0 text-primary">
+                          <ExternalLink className="h-3 w-3 mr-1" />
+                          View source
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="text-center p-8">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-muted/30 flex items-center justify-center">
+                  <FileText className="h-8 w-8 text-muted-foreground" />
+                </div>
+                <h3 className="text-lg font-medium mb-2">No sources found</h3>
+                <p className="text-muted-foreground">
+                  {sources.length > 0
+                    ? "No sources match your current search criteria. Try adjusting your filters."
+                    : "Chat with Insight AI to get information with source citations."}
+                </p>
+                <Button
+                  variant="outline"
+                  className="mt-4"
+                  onClick={resetFilters}
+                >
+                  Reset Filters
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

frontend/src/index.css CHANGED Viewed

@@ -1,10 +1,34 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 @layer base {
   :root {
     --background: 222 45% 98%;
@@ -176,6 +200,122 @@
 .message-bubble-user {
   border-top-right-radius: 4px;
 }
 .typing-indicator span {
   @apply inline-block h-2 w-2 rounded-full bg-current;
@@ -297,3 +437,96 @@ pre code {
   transform: translateX(100%);
   transition: transform 0.5s;
 }

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@layer utilities {
+  /* Custom scrollbar utility */
+  .scrollbar-thin {
+    scrollbar-width: thin;
+  }
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background: rgba(var(--muted-foreground), 0.3);
+    border-radius: 9999px;
+  }
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--muted-foreground), 0.5);
+  }
+}
 @layer base {
   :root {
     --background: 222 45% 98%;
 .message-bubble-user {
   border-top-right-radius: 4px;
 }
+/* Thinking animation */
+.thinking-brain {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.thinking-brain-svg {
+  z-index: 10;
+  position: relative;
+}
+.thinking-waves {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.thinking-waves span {
+  position: absolute;
+  border: 1px solid var(--financial-accent, #7C3AED);
+  border-radius: 50%;
+  opacity: 0;
+  animation: thinking-wave 2s ease-out infinite;
+}
+.thinking-waves span:nth-child(1) {
+  width: 100%;
+  height: 100%;
+  animation-delay: 0s;
+}
+.thinking-waves span:nth-child(2) {
+  width: 80%;
+  height: 80%;
+  animation-delay: 0.3s;
+}
+.thinking-waves span:nth-child(3) {
+  width: 60%;
+  height: 60%;
+  animation-delay: 0.6s;
+}
+@keyframes thinking-wave {
+  0% {
+    transform: scale(0.5);
+    opacity: 0.1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+}
+.thinking-dots-container {
+  display: inline-flex;
+  align-items: center;
+}
+.thinking-dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--muted-foreground);
+  margin: 0 2px;
+  opacity: 0.3;
+  transition: opacity 0.2s ease;
+}
+.thinking-dot-active {
+  opacity: 1;
+}
+/* Variations UI */
+.variations-container {
+  margin-top: 0.5rem;
+  border-top: 1px solid var(--border);
+  padding-top: 0.5rem;
+}
+.variation-tabs {
+  display: flex;
+  gap: 0.5rem;
+}
+.variation-tab {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+.variation-tab:hover {
+  background-color: var(--accent);
+}
+.variation-tab.active {
+  background-color: var(--financial-accent);
+  color: white;
+  border-color: var(--financial-accent);
+}
 .typing-indicator span {
   @apply inline-block h-2 w-2 rounded-full bg-current;
   transform: translateX(100%);
   transition: transform 0.5s;
 }
+/* Chat bubble styles */
+.thinking-dot {
+  @apply inline-block rounded-full bg-financial-accent;
+  opacity: 0.7;
+}
+@keyframes pulse {
+  0%, 100% { transform: scale(0.8); opacity: 0.5; }
+  50% { transform: scale(1.2); opacity: 0.8; }
+}
+.animate-pulse {
+  animation: pulse 1.5s infinite ease-in-out;
+}
+/* Thinking text styles */
+.thinking-text {
+  @apply bg-gradient-to-r from-financial-accent to-financial-light-accent bg-clip-text text-transparent px-2 py-1 rounded;
+  animation: thinking-glow 2s infinite alternate;
+}
+@keyframes thinking-glow {
+  from { box-shadow: 0 0 5px rgba(var(--accent), 0.2); }
+  to { box-shadow: 0 0 15px rgba(var(--accent), 0.5); }
+}
+/* Think tag styling */
+.think-block {
+  @apply bg-stone-50/70 dark:bg-stone-900/50 border-l-4 border-financial-accent/50 p-3 my-2 rounded-md italic text-muted-foreground;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(6px);
+}
+.think-block::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 4px;
+  background: linear-gradient(to bottom, theme('colors.financial.accent'), theme('colors.financial.light-accent'));
+  animation: pulse-border 2s infinite alternate;
+}
+.think-block::after {
+  content: '💭';
+  position: absolute;
+  right: 10px;
+  bottom: 5px;
+  opacity: 0.2;
+  font-size: 1.5rem;
+}
+/* Message variations styling */
+.variations-container {
+  @apply border-t border-border/30 mt-2 pt-2;
+}
+.variation-tabs {
+  @apply flex gap-1 overflow-x-auto pb-2 scrollbar-thin;
+}
+.variation-tab {
+  @apply text-xs px-3 py-1.5 rounded-full bg-muted/50 text-muted-foreground hover:bg-muted transition-all cursor-pointer flex-shrink-0;
+}
+.variation-tab.active {
+  @apply bg-financial-accent/20 text-financial-accent border border-financial-accent/30 font-medium;
+}
+@keyframes pulse-border {
+  from { opacity: 0.5; }
+  to { opacity: 1; }
+}
+/* Regeneration button pulse effect */
+.regenerate-pulse {
+  animation: regenerate-pulse 2s infinite;
+}
+@keyframes regenerate-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--accent), 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(var(--accent), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--accent), 0);
+  }
+}

frontend/src/lib/storage.ts CHANGED Viewed

@@ -10,6 +10,7 @@ export const STORAGE_KEYS = {
   API_ENDPOINT: 'apiEndpoint',
   THEME: 'fis-theme',
   SOURCES: 'fis-sources',
 } as const;
 // Types for our storage
@@ -24,24 +25,40 @@ export type StorageValue = string | object | number | boolean | null | undefined
  * Currently uses localStorage, but can be extended to use external storage in the future
  */
 class StorageService {
-  // Get item from storage with automatic parsing
   get<T = any>(key: string): T | null {
     try {
       const item = localStorage.getItem(key);
-      if (!item) return null;
-      // Parse the stored value
       const { value, expires } = JSON.parse(item);
-      // Check if the value has expired
       if (expires && expires < Date.now()) {
         this.remove(key);
         return null;
       }
       return value as T;
     } catch (error) {
       console.error(`Error getting item from storage: ${key}`, error);
       return null;
     }
   }
@@ -131,7 +148,27 @@ class StorageService {
       return false;
     }
   }
 }
 // Create and export a singleton instance
 export const storage = new StorageService();

   API_ENDPOINT: 'apiEndpoint',
   THEME: 'fis-theme',
   SOURCES: 'fis-sources',
+  PROFILE_STORAGE_KEY: 'fis-profile'
 } as const;
 // Types for our storage
  * Currently uses localStorage, but can be extended to use external storage in the future
  */
 class StorageService {
+  private defaults: Partial<Record<string, StorageValue>> = {};
+  // Set default values for storage keys
+  setDefaults(defaults: Partial<Record<string, StorageValue>>) {
+    this.defaults = defaults;
+  }
+  // Get item from storage with automatic parsing and default fallback
   get<T = any>(key: string): T | null {
     try {
       const item = localStorage.getItem(key);
+      if (!item) {
+        // Return default if available
+        if (key in this.defaults) {
+          return this.defaults[key] as T;
+        }
+        return null;
+      }
       const { value, expires } = JSON.parse(item);
       if (expires && expires < Date.now()) {
         this.remove(key);
+        // Return default if available
+        if (key in this.defaults) {
+          return this.defaults[key] as T;
+        }
         return null;
       }
       return value as T;
     } catch (error) {
       console.error(`Error getting item from storage: ${key}`, error);
+      // Return default if available
+      if (key in this.defaults) {
+        return this.defaults[key] as T;
+      }
       return null;
     }
   }
       return false;
     }
   }
+  // Reset all keys to their default values
+  resetToDefaults(): boolean {
+    try {
+      Object.entries(this.defaults).forEach(([key, value]) => {
+        this.set(key, value);
+      });
+      return true;
+    } catch (error) {
+      console.error('Error resetting storage to defaults', error);
+      return false;
+    }
+  }
 }
 // Create and export a singleton instance
 export const storage = new StorageService();
+storage.setDefaults({
+  [STORAGE_KEYS.CHATS]: [],
+  [STORAGE_KEYS.SETTINGS]: {},
+  [STORAGE_KEYS.API_ENDPOINT]: "https://insight-ai-api.hf.space",
+  [STORAGE_KEYS.THEME]: "dark",
+  [STORAGE_KEYS.SOURCES]: [],
+});

frontend/src/pages/Index.tsx DELETED Viewed

@@ -1,8 +0,0 @@
-import { Navigate } from "react-router-dom";
-const Index = () => {
-  return <Navigate to="/" replace />;
-};
-export default Index;

frontend/src/pages/SourcesPage.tsx DELETED Viewed

@@ -1,286 +0,0 @@
-import { useState, useEffect } from "react";
-import { FileText, Search, Filter, Calendar, ArrowUpDown, ChevronDown, ChevronUp, ExternalLink } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Calendar as CalendarComponent } from "@/components/ui/calendar";
-import { cn } from "@/lib/utils";
-import { Separator } from "@/components/ui/separator";
-import { format } from "date-fns";
-import { DateRange } from "@/types";
-import { RetrievedSource } from "@/services/rulingService";
-import { storage, STORAGE_KEYS } from "@/lib/storage";
-const SourcesPage = () => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedSource, setSelectedSource] = useState<string>("");
-  const [selectedCategory, setSelectedCategory] = useState<string>("");
-  const [date, setDate] = useState<DateRange>({
-    from: undefined,
-    to: undefined,
-  });
-  const [sortBy, setSortBy] = useState<string>("date-desc");
-  const [sources, setSources] = useState<RetrievedSource[]>([]);
-  const [sourceTypes, setSourceTypes] = useState<string[]>([]);
-  const [categories, setCategories] = useState<string[]>([]);
-  // Load sources from storage
-  useEffect(() => {
-    const storedSources = storage.get<RetrievedSource[]>(STORAGE_KEYS.SOURCES) || [];
-    setSources(storedSources);
-    // Extract unique source types and categories
-    const types = Array.from(new Set(storedSources.map(s => s.metadata?.source).filter(Boolean)));
-    setSourceTypes(types as string[]);
-    const cats = Array.from(new Set(storedSources.map(s => {
-      // For this example, we'll use the first word of the content as a mock category
-      // In a real app, you'd use a proper category field from metadata
-      const firstWord = s.content_snippet.split(' ')[0];
-      return firstWord.length > 3 ? firstWord : "General";
-    })));
-    setCategories(cats);
-  }, []);
-  // Filter sources based on search term, source, category, and date
-  const filteredSources = sources.filter(source => {
-    const matchesSearch = !searchTerm ||
-      source.content_snippet.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      (source.metadata?.source || "").toLowerCase().includes(searchTerm.toLowerCase());
-    const matchesSource = !selectedSource || source.metadata?.source === selectedSource;
-    // Mock category matching based on first word of content
-    const sourceCategory = source.content_snippet.split(' ')[0].length > 3 ?
-      source.content_snippet.split(' ')[0] : "General";
-    const matchesCategory = !selectedCategory || sourceCategory === selectedCategory;
-    let matchesDate = true;
-    if (date.from && source.metadata?.ruling_date) {
-      matchesDate = matchesDate && new Date(source.metadata.ruling_date) >= date.from;
-    }
-    if (date.to && source.metadata?.ruling_date) {
-      matchesDate = matchesDate && new Date(source.metadata.ruling_date) <= date.to;
-    }
-    return matchesSearch && matchesSource && matchesCategory && matchesDate;
-  });
-  // Sort sources
-  const sortedSources = [...filteredSources].sort((a, b) => {
-    if (sortBy === "date-desc") {
-      return new Date(b.metadata?.ruling_date || "").getTime() -
-             new Date(a.metadata?.ruling_date || "").getTime();
-    } else if (sortBy === "date-asc") {
-      return new Date(a.metadata?.ruling_date || "").getTime() -
-             new Date(b.metadata?.ruling_date || "").getTime();
-    } else if (sortBy === "relevance-desc") {
-      return b.content_snippet.length - a.content_snippet.length;
-    }
-    return 0;
-  });
-  const resetFilters = () => {
-    setSearchTerm("");
-    setSelectedSource("");
-    setSelectedCategory("");
-    setDate({ from: undefined, to: undefined });
-  };
-  const [expandedSources, setExpandedSources] = useState<Record<number, boolean>>({});
-  const toggleSource = (index: number) => {
-    setExpandedSources(prev => ({
-      ...prev,
-      [index]: !prev[index]
-    }));
-  };
-  return (
-    <div className="container mx-auto px-4 py-8 animate-fade-in">
-      <div className="flex flex-col md:flex-row md:items-center justify-between mb-6">
-        <h1 className="text-3xl font-bold mb-4 md:mb-0 text-financial-navy dark:text-white bg-clip-text text-transparent bg-gradient-to-r from-financial-accent to-financial-light-accent">
-          Financial Sources
-        </h1>
-        <div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
-          <Select value={sortBy} onValueChange={setSortBy}>
-            <SelectTrigger className="w-[180px] glass-effect">
-              <div className="flex items-center">
-                <ArrowUpDown className="mr-2 h-3.5 w-3.5 text-muted-foreground" />
-                <span>Sort By</span>
-              </div>
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="date-desc">Date (Newest)</SelectItem>
-              <SelectItem value="date-asc">Date (Oldest)</SelectItem>
-              <SelectItem value="relevance-desc">Relevance</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      <div className="glass-effect rounded-lg p-6 mb-8 shadow-lg">
-        <div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
-          <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-            <Input
-              type="text"
-              placeholder="Search sources..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10 glass-input"
-            />
-          </div>
-          <Select value={selectedSource} onValueChange={setSelectedSource}>
-            <SelectTrigger className="w-full md:w-[180px] glass-input">
-              <span className="truncate">
-                {selectedSource || "All Sources"}
-              </span>
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="All">All Sources</SelectItem>
-              {sourceTypes.map(type => (
-                <SelectItem key={type} value={type}>{type}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Select value={selectedCategory} onValueChange={setSelectedCategory}>
-            <SelectTrigger className="w-full md:w-[180px] glass-input">
-              <span className="truncate">
-                {selectedCategory || "All Categories"}
-              </span>
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="All">All Categories</SelectItem>
-              {categories.map(category => (
-                <SelectItem key={category} value={category}>{category}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="outline" className="w-full md:w-[180px] justify-start text-left glass-input">
-                <Calendar className="mr-2 h-4 w-4" />
-                <span>
-                  {date.from || date.to ? (
-                    <>
-                      {date.from ? format(date.from, "LLL dd, y") : "From"} - {" "}
-                      {date.to ? format(date.to, "LLL dd, y") : "To"}
-                    </>
-                  ) : (
-                    "Date Range"
-                  )}
-                </span>
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0">
-              <CalendarComponent
-                mode="range"
-                selected={date}
-                onSelect={(value: DateRange | undefined) => {
-                  if (value) setDate(value);
-                }}
-                className={cn("p-3 pointer-events-auto")}
-              />
-            </PopoverContent>
-          </Popover>
-          <Button
-            variant="outline"
-            className="md:w-auto glass-input"
-            onClick={resetFilters}
-          >
-            Reset
-          </Button>
-        </div>
-      </div>
-      <div className="space-y-4">
-        {sortedSources.length > 0 ? (
-          sortedSources.map((source, index) => (
-            <Card key={index} className="result-card glass-effect overflow-hidden transition-all duration-300">
-              <CardHeader className="pb-2">
-                <div className="flex items-start justify-between">
-                  <div>
-                    <CardTitle className="text-lg text-gradient">
-                      {source.metadata?.source || "Financial Ruling"}
-                    </CardTitle>
-                    <div className="flex items-center mt-1 text-sm text-muted-foreground">
-                      <FileText className="h-3.5 w-3.5 mr-1.5" />
-                      <span>{source.metadata?.source || "Unknown Source"}</span>
-                      {source.metadata?.ruling_date && (
-                        <>
-                          <span className="mx-1.5">•</span>
-                          <Calendar className="h-3.5 w-3.5 mr-1.5" />
-                          <span>{new Date(source.metadata.ruling_date).toLocaleDateString()}</span>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => toggleSource(index)}
-                    className="p-0 h-8 w-8 hover:bg-accent/10"
-                  >
-                    {expandedSources[index] ? (
-                      <ChevronUp className="h-4 w-4" />
-                    ) : (
-                      <ChevronDown className="h-4 w-4" />
-                    )}
-                  </Button>
-                </div>
-              </CardHeader>
-              <CardContent className={expandedSources[index] ? "pb-2" : "max-h-24 overflow-hidden relative"}>
-                <p className="text-sm text-muted-foreground">
-                  {expandedSources[index]
-                    ? source.content_snippet
-                    : source.content_snippet.substring(0, 150) + "..."}
-                </p>
-                {!expandedSources[index] && (
-                  <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-card to-transparent"></div>
-                )}
-              </CardContent>
-              {expandedSources[index] && (
-                <CardFooter className="pt-0 text-sm flex justify-end">
-                  <Button variant="link" size="sm" className="h-8 p-0 text-financial-accent">
-                    <ExternalLink className="h-3 w-3 mr-1" />
-                    View source
-                  </Button>
-                </CardFooter>
-              )}
-            </Card>
-          ))
-        ) : (
-          <div className="glass-effect rounded-lg p-8 text-center shadow-lg">
-            <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-muted/30 flex items-center justify-center">
-              <FileText className="h-8 w-8 text-muted-foreground" />
-            </div>
-            <h3 className="text-lg font-medium mb-2 text-gradient">No sources found</h3>
-            <p className="text-muted-foreground">
-              {sources.length > 0
-                ? "No sources match your current search criteria. Try adjusting your filters."
-                : "Chat with Insight AI to get information with source citations."}
-            </p>
-            <Button
-              variant="outline"
-              className="mt-4 glass-input"
-              onClick={resetFilters}
-            >
-              Reset Filters
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-export default SourcesPage;

frontend/src/services/{rulingService.ts → apiService.ts} RENAMED Viewed

@@ -32,25 +32,22 @@ export interface QueryRequest {
   query: string;
   chat_history?: Message[];
   filters?: Record<string, any>;
 }
 // Add a delay function for better UX when showing loading states
 const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
-export const rulingService = {
   async getApiUrl(): Promise<string> {
-    // Get API URL from storage or use default
-    let API_URL = "http://localhost:8000";
     const storedUrl = storage.get<string>(STORAGE_KEYS.API_ENDPOINT);
     if (storedUrl) {
-      API_URL = storedUrl;
     } else {
       // Set default if not found
-      storage.set(STORAGE_KEYS.API_ENDPOINT, API_URL);
     }
-    return API_URL;
   },
   async queryRulings(request: QueryRequest): Promise<QueryResponse> {
@@ -60,6 +57,12 @@ export const rulingService = {
       const API_URL = await this.getApiUrl();
       const response = await fetch(`${API_URL}/query`, {
         method: "POST",
         headers: {
@@ -101,8 +104,8 @@ export const rulingService = {
       return result;
     } catch (error) {
-      console.error("Failed to query rulings:", error);
-      const errorMessage = error instanceof Error ? error.message : "Failed to query rulings";
       toast.error(errorMessage);
       throw error;
     }
@@ -112,6 +115,11 @@ export const rulingService = {
     try {
       const API_URL = await this.getApiUrl();
       const response = await fetch(`${API_URL}/generate-title`, {
         method: "POST",
         headers: {

   query: string;
   chat_history?: Message[];
   filters?: Record<string, any>;
+  regenerate?: boolean;
 }
 // Add a delay function for better UX when showing loading states
 const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+export const apiService = {
   async getApiUrl(): Promise<string> {
     const storedUrl = storage.get<string>(STORAGE_KEYS.API_ENDPOINT);
     if (storedUrl) {
+      return storedUrl;
     } else {
       // Set default if not found
+      return null;
     }
   },
   async queryRulings(request: QueryRequest): Promise<QueryResponse> {
       const API_URL = await this.getApiUrl();
+      if (!API_URL) {
+        return {
+          answer: "<think>The user hasn't configured an API endpoint yet. I should provide a helpful response.</think>\n\nIt looks like you haven't configured the API endpoint yet. Please go to Settings and enter your API URL to connect to your data source."
+        };
+      }
       const response = await fetch(`${API_URL}/query`, {
         method: "POST",
         headers: {
       return result;
     } catch (error) {
+      console.error("Failed to query AI:", error);
+      const errorMessage = error instanceof Error ? error.message : "Failed to get a response";
       toast.error(errorMessage);
       throw error;
     }
     try {
       const API_URL = await this.getApiUrl();
+      // If no API URL is configured, return a generic title
+      if (!API_URL) {
+        return { title: query.slice(0, 30) + (query.length > 30 ? '...' : '') };
+      }
       const response = await fetch(`${API_URL}/generate-title`, {
         method: "POST",
         headers: {

frontend/src/types/chat.ts ADDED Viewed

	@@ -0,0 +1,20 @@

+export interface Message {
+  id: string;
+  content: string;
+  sender: "user" | "system";
+  timestamp: Date;
+  isLoading?: boolean;
+  error?: boolean;
+  result?: any;
+  variations?: { id: string, content: string, timestamp: Date }[];
+  activeVariation?: string;
+}
+export interface Chat {
+  id: string;
+  title: string;
+  messages: Message[];
+  createdAt: Date;
+  updatedAt: Date;
+}