✨ UPDATE CHAT COMPONENT AND PLAYGROUND PAGE: Refactor for improved functionality and consistency

✅ Changes made:
- Enhanced the Chat component with better scrolling behavior and improved message rendering.
- Refactored Playground page for consistent formatting and improved state management.
- Updated various UI elements for better accessibility and user experience.

🛠️ These updates contribute to a more robust and user-friendly interface across the application!

frontend/src/components/ui/chat.tsx

@@ -1,48 +1,78 @@
-import * as React from 'react'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { Textarea } from '@/components/ui/textarea'
-import { Send, Square, User, Bot } from 'lucide-react'
-import ReactMarkdown from 'react-markdown'
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Send, Square, User, Bot } from "lucide-react";
+import ReactMarkdown from "react-markdown";
 
-import { AssistantInfo } from '@/types/chat'
+import { AssistantInfo } from "@/types/chat";
 
 export interface ChatProps extends React.HTMLAttributes<HTMLDivElement> {
   messages: Array<{
-    id: string
-    role: 'user' | 'assistant' | 'system'
-    content: string
-    createdAt?: Date
-    assistantInfo?: AssistantInfo
-  }>
-  input: string
-  handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
-  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void
-  isGenerating?: boolean
-  stop?: () => void
+    id: string;
+    role: "user" | "assistant" | "system";
+    content: string;
+    createdAt?: Date;
+    assistantInfo?: AssistantInfo;
+  }>;
+  input: string;
+  handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  isGenerating?: boolean;
+  stop?: () => void;
 }
 
 const Chat = React.forwardRef<HTMLDivElement, ChatProps>(
-  ({ className, messages, input, handleInputChange, handleSubmit, isGenerating, stop, ...props }, ref) => {
-    const messagesEndRef = React.useRef<HTMLDivElement>(null)
+  (
+    {
+      className,
+      messages,
+      input,
+      handleInputChange,
+      handleSubmit,
+      isGenerating,
+      stop,
+      ...props
+    },
+    ref
+  ) => {
+    const messagesEndRef = React.useRef<HTMLDivElement>(null);
+    const messagesContainerRef = React.useRef<HTMLDivElement>(null);
 
     const scrollToBottom = () => {
-      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-    }
+      if (messagesContainerRef.current) {
+        messagesContainerRef.current.scrollTop =
+          messagesContainerRef.current.scrollHeight;
+      }
+    };
 
     React.useEffect(() => {
-      console.log('Chat component - messages updated:', messages.length, messages.map(m => ({ id: m.id, role: m.role, content: m.content.slice(0, 50) + '...' })))
-      scrollToBottom()
-    }, [messages])
+      console.log(
+        "Chat component - messages updated:",
+        messages.length,
+        messages.map((m) => ({
+          id: m.id,
+          role: m.role,
+          content: m.content.slice(0, 50) + "...",
+        }))
+      );
+      // Use setTimeout to ensure the DOM has updated
+      setTimeout(() => {
+        scrollToBottom();
+      }, 100);
+    }, [messages]);
 
     return (
       <div
-        className={cn('flex h-full flex-col', className)}
+        className={cn("flex h-full flex-col", className)}
         ref={ref}
         {...props}
       >
         {/* Messages */}
-        <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        <div
+          ref={messagesContainerRef}
+          className="flex-1 overflow-y-auto p-4 space-y-4 scroll-smooth"
+        >
           {messages.length === 0 ? (
             <div className="flex items-center justify-center h-full text-muted-foreground">
               <p>No messages yet. Start a conversation!</p>
@@ -52,88 +82,142 @@ const Chat = React.forwardRef<HTMLDivElement, ChatProps>(
               <div
                 key={`${message.id}-${index}`}
                 className={cn(
-                  'flex gap-3 w-full',
-                  message.role === 'user' ? 'justify-end' : 'justify-start'
+                  "flex gap-3 w-full items-start",
+                  message.role === "user" ? "justify-end" : "justify-start"
                 )}
               >
                 {/* Avatar for assistant */}
-                {message.role !== 'user' && (
-                  <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                {message.role !== "user" && (
+                  <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0 mt-1">
                     <Bot className="h-4 w-4 text-primary-foreground" />
                   </div>
                 )}
-                
+
                 {/* Message content */}
                 <div
                   className={cn(
-                    'max-w-[75%] flex flex-col gap-2 rounded-lg px-3 py-2 text-sm',
-                    message.role === 'user'
-                      ? 'bg-primary text-primary-foreground'
-                      : 'bg-muted'
+                    "max-w-[75%] min-w-0 flex flex-col gap-2 rounded-lg px-3 py-2 text-sm break-words",
+                    message.role === "user"
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-muted"
                   )}
                 >
                   <div className="text-xs opacity-70 flex items-center gap-2">
                     <span>
-                      {message.role === 'user' ? 'You' : (
-                        message.assistantInfo ? (
-                          <>
-                            <span className="font-medium">{message.assistantInfo.name}</span>
-                            {message.assistantInfo.type !== 'default' && (
-                              <span className={cn(
+                      {message.role === "user" ? (
+                        "You"
+                      ) : message.assistantInfo ? (
+                        <>
+                          <span className="font-medium">
+                            {message.assistantInfo.name}
+                          </span>
+                          {message.assistantInfo.type !== "default" && (
+                            <span
+                              className={cn(
                                 "inline-block px-1.5 py-0.5 rounded text-[10px] font-medium ml-1",
-                                message.assistantInfo.type === 'user' && "bg-blue-100 text-blue-700",
-                                message.assistantInfo.type === 'template' && "bg-gray-100 text-gray-700", 
-                                message.assistantInfo.type === 'new' && "bg-green-100 text-green-700"
-                              )}>
-                                {message.assistantInfo.type === 'user' ? 'Mine' : 
-                                 message.assistantInfo.type === 'template' ? 'Template' : 'New'}
-                              </span>
-                            )}
-                            {message.assistantInfo.originalTemplate && (
-                              <span className="text-[10px] text-muted-foreground">
-                                (from {message.assistantInfo.originalTemplate})
-                              </span>
-                            )}
-                          </>
-                        ) : 'Assistant'
+                                message.assistantInfo.type === "user" &&
+                                  "bg-blue-100 text-blue-700",
+                                message.assistantInfo.type === "template" &&
+                                  "bg-gray-100 text-gray-700",
+                                message.assistantInfo.type === "new" &&
+                                  "bg-green-100 text-green-700"
+                              )}
+                            >
+                              {message.assistantInfo.type === "user"
+                                ? "Mine"
+                                : message.assistantInfo.type === "template"
+                                ? "Template"
+                                : "New"}
+                            </span>
+                          )}
+                          {message.assistantInfo.originalTemplate && (
+                            <span className="text-[10px] text-muted-foreground">
+                              (from {message.assistantInfo.originalTemplate})
+                            </span>
+                          )}
+                        </>
+                      ) : (
+                        "Assistant"
                       )}
                     </span>
                     <span>•</span>
                     <span>#{index + 1}</span>
                   </div>
-                  <div className="leading-relaxed prose prose-sm dark:prose-invert max-w-none">
+                  <div className="leading-relaxed prose prose-sm dark:prose-invert max-w-none overflow-hidden">
                     <ReactMarkdown
                       components={{
                         // Customize components for better styling
-                        p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
-                        ul: ({ children }) => <ul className="mb-2 last:mb-0 list-disc pl-4">{children}</ul>,
-                        ol: ({ children }) => <ol className="mb-2 last:mb-0 list-decimal pl-4">{children}</ol>,
-                        li: ({ children }) => <li className="mb-1">{children}</li>,
+                        p: ({ children }) => (
+                          <p className="mb-2 last:mb-0 break-words">
+                            {children}
+                          </p>
+                        ),
+                        ul: ({ children }) => (
+                          <ul className="mb-2 last:mb-0 list-disc pl-4 break-words">
+                            {children}
+                          </ul>
+                        ),
+                        ol: ({ children }) => (
+                          <ol className="mb-2 last:mb-0 list-decimal pl-4 break-words">
+                            {children}
+                          </ol>
+                        ),
+                        li: ({ children }) => (
+                          <li className="mb-1 break-words">{children}</li>
+                        ),
                         code: ({ children, className }) => {
                           const isInline = !className;
                           return isInline ? (
-                            <code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{children}</code>
+                            <code className="bg-muted px-1 py-0.5 rounded text-xs font-mono break-words">
+                              {children}
+                            </code>
                           ) : (
-                            <code className="block bg-muted p-2 rounded text-xs font-mono overflow-x-auto whitespace-pre">{children}</code>
-                          )
+                            <code className="block bg-muted p-2 rounded text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all">
+                              {children}
+                            </code>
+                          );
                         },
-                        pre: ({ children }) => <div className="mb-2 last:mb-0">{children}</div>,
-                        strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
-                        em: ({ children }) => <em className="italic">{children}</em>,
-                        blockquote: ({ children }) => <blockquote className="border-l-4 border-muted pl-4 italic mb-2 last:mb-0">{children}</blockquote>,
-                        h1: ({ children }) => <h1 className="text-lg font-bold mb-2 last:mb-0">{children}</h1>,
-                        h2: ({ children }) => <h2 className="text-base font-bold mb-2 last:mb-0">{children}</h2>,
-                        h3: ({ children }) => <h3 className="text-sm font-bold mb-2 last:mb-0">{children}</h3>,
+                        pre: ({ children }) => (
+                          <div className="mb-2 last:mb-0 overflow-hidden">
+                            {children}
+                          </div>
+                        ),
+                        strong: ({ children }) => (
+                          <strong className="font-semibold">{children}</strong>
+                        ),
+                        em: ({ children }) => (
+                          <em className="italic">{children}</em>
+                        ),
+                        blockquote: ({ children }) => (
+                          <blockquote className="border-l-4 border-muted pl-4 italic mb-2 last:mb-0">
+                            {children}
+                          </blockquote>
+                        ),
+                        h1: ({ children }) => (
+                          <h1 className="text-lg font-bold mb-2 last:mb-0">
+                            {children}
+                          </h1>
+                        ),
+                        h2: ({ children }) => (
+                          <h2 className="text-base font-bold mb-2 last:mb-0">
+                            {children}
+                          </h2>
+                        ),
+                        h3: ({ children }) => (
+                          <h3 className="text-sm font-bold mb-2 last:mb-0">
+                            {children}
+                          </h3>
+                        ),
                       }}
                     >
                       {message.content}
                     </ReactMarkdown>
                   </div>
                 </div>
-                
+
                 {/* Avatar for user */}
-                {message.role === 'user' && (
-                  <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
+                {message.role === "user" && (
+                  <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0 mt-1">
                     <User className="h-4 w-4" />
                   </div>
                 )}
@@ -152,14 +236,19 @@ const Chat = React.forwardRef<HTMLDivElement, ChatProps>(
               placeholder="Type your message..."
               className="min-h-[60px] resize-none"
               onKeyDown={(e) => {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                  e.preventDefault()
-                  handleSubmit(e as any)
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  handleSubmit(e as any);
                 }
               }}
             />
             {isGenerating ? (
-              <Button type="button" onClick={stop} variant="outline" size="icon">
+              <Button
+                type="button"
+                onClick={stop}
+                variant="outline"
+                size="icon"
+              >
                 <Square className="h-4 w-4" />
               </Button>
             ) : (
@@ -170,9 +259,9 @@ const Chat = React.forwardRef<HTMLDivElement, ChatProps>(
           </form>
         </div>
       </div>
-    )
+    );
   }
-)
-Chat.displayName = 'Chat'
+);
+Chat.displayName = "Chat";
 
-export { Chat }
+export { Chat };

frontend/src/pages/Playground.tsx

@@ -1,10 +1,10 @@
-import { useState, useEffect } from 'react'
-import { AssistantInfo } from '@/types/chat'
-import { getPresetsFromConfigs } from '@/config/assistants'
-import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Label } from '@/components/ui/label'
+import { useState, useEffect } from "react";
+import { AssistantInfo } from "@/types/chat";
+import { getPresetsFromConfigs } from "@/config/assistants";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Label } from "@/components/ui/label";
 
 import {
   AlertDialog,
@@ -15,10 +15,10 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
-import { Chat } from '@/components/ui/chat'
-import { useChat } from '@/hooks/useChat'
-import { 
+} from "@/components/ui/alert-dialog";
+import { Chat } from "@/components/ui/chat";
+import { useChat } from "@/hooks/useChat";
+import {
   Plus,
   Trash2,
   Save,
@@ -27,30 +27,30 @@ import {
   BookOpen,
   MessageSquare,
   ChevronLeft,
-  ChevronRight
-} from 'lucide-react'
+  ChevronRight,
+} from "lucide-react";
 
 // Import refactored components
-import { 
-  ModelParametersTab, 
-  AssistantSelector, 
-  SystemInstructionsTab, 
-  DocumentsTab 
-} from '@/components/playground'
+import {
+  ModelParametersTab,
+  AssistantSelector,
+  SystemInstructionsTab,
+  DocumentsTab,
+} from "@/components/playground";
 
 interface ModelInfo {
-  model_name: string
-  name: string
-  supports_thinking: boolean
-  description: string
-  size_gb: string
-  is_loaded: boolean
-  type: 'local' | 'api'
+  model_name: string;
+  name: string;
+  supports_thinking: boolean;
+  description: string;
+  size_gb: string;
+  is_loaded: boolean;
+  type: "local" | "api";
 }
 
 interface ModelsResponse {
-  models: ModelInfo[]
-  current_model: string
+  models: ModelInfo[];
+  current_model: string;
 }
 
 export function Playground() {
@@ -74,68 +74,76 @@ export function Playground() {
     temperature,
     setTemperature,
     maxTokens,
-    setMaxTokens
-  } = useChat()
+    setMaxTokens,
+  } = useChat();
 
   // RAG configuration state
-  const [ragEnabled, setRagEnabled] = useState(false)
-  const [retrievalCount, setRetrievalCount] = useState(3)
+  const [ragEnabled, setRagEnabled] = useState(false);
+  const [retrievalCount, setRetrievalCount] = useState(3);
 
   // UI state - sidebar collapse states
-  const [sessionsCollapsed, setSessionsCollapsed] = useState(false)
-  const [configCollapsed, setConfigCollapsed] = useState(false)
-  const [autoLoadingModel, setAutoLoadingModel] = useState<string | null>(null)
-  const [showLoadConfirm, setShowLoadConfirm] = useState(false)
-  const [pendingModelToLoad, setPendingModelToLoad] = useState<ModelInfo | null>(null)
-  
+  const [sessionsCollapsed, setSessionsCollapsed] = useState(false);
+  const [configCollapsed, setConfigCollapsed] = useState(false);
+  const [autoLoadingModel, setAutoLoadingModel] = useState<string | null>(null);
+  const [showLoadConfirm, setShowLoadConfirm] = useState(false);
+  const [pendingModelToLoad, setPendingModelToLoad] =
+    useState<ModelInfo | null>(null);
+
   // Model management state
-  const [models, setModels] = useState<ModelInfo[]>([])
+  const [models, setModels] = useState<ModelInfo[]>([]);
 
   // Saved assistants state
-  const [savedAssistants, setSavedAssistants] = useState<any[]>([])
-  const [selectedAssistant, setSelectedAssistant] = useState<{id: string, name: string, type: 'user'|'template'|'new', originalTemplate?: string} | null>(null)
-  
+  const [savedAssistants, setSavedAssistants] = useState<any[]>([]);
+  const [selectedAssistant, setSelectedAssistant] = useState<{
+    id: string;
+    name: string;
+    type: "user" | "template" | "new";
+    originalTemplate?: string;
+  } | null>(null);
+
   // Save assistant dialog state
-  const [showSaveDialog, setShowSaveDialog] = useState(false)
-  const [saveAssistantName, setSaveAssistantName] = useState('')
-  
+  const [showSaveDialog, setShowSaveDialog] = useState(false);
+  const [saveAssistantName, setSaveAssistantName] = useState("");
+
   // Rename assistant dialog state
-  const [showRenameDialog, setShowRenameDialog] = useState(false)
-  const [renameAssistantName, setRenameAssistantName] = useState('')
+  const [showRenameDialog, setShowRenameDialog] = useState(false);
+  const [renameAssistantName, setRenameAssistantName] = useState("");
 
   // Load saved assistants
   const loadSavedAssistants = () => {
     try {
-      const assistants = JSON.parse(localStorage.getItem('savedAssistants') || '[]')
-      setSavedAssistants(assistants)
+      const assistants = JSON.parse(
+        localStorage.getItem("savedAssistants") || "[]"
+      );
+      setSavedAssistants(assistants);
     } catch (error) {
-      console.error('Failed to load saved assistants:', error)
+      console.error("Failed to load saved assistants:", error);
     }
-  }
+  };
 
   // Open save assistant dialog
   const openSaveDialog = () => {
-    if (!systemPrompt.trim()) return
-    
+    if (!systemPrompt.trim()) return;
+
     // Set default name based on selected assistant or create a default
-    let defaultName = 'My Assistant'
+    let defaultName = "My Assistant";
     if (selectedAssistant) {
-      if (selectedAssistant.type === 'new') {
-        defaultName = selectedAssistant.name
-      } else if (selectedAssistant.type === 'template') {
-        defaultName = `My ${selectedAssistant.name}`
+      if (selectedAssistant.type === "new") {
+        defaultName = selectedAssistant.name;
+      } else if (selectedAssistant.type === "template") {
+        defaultName = `My ${selectedAssistant.name}`;
       } else {
-        defaultName = selectedAssistant.name + ' Copy'
+        defaultName = selectedAssistant.name + " Copy";
       }
     }
-    
-    setSaveAssistantName(defaultName)
-    setShowSaveDialog(true)
-  }
+
+    setSaveAssistantName(defaultName);
+    setShowSaveDialog(true);
+  };
 
   // Actually save the assistant with user-defined name
   const confirmSaveAssistant = () => {
-    if (!saveAssistantName.trim() || !systemPrompt.trim()) return
+    if (!saveAssistantName.trim() || !systemPrompt.trim()) return;
 
     const newAssistant = {
       id: Date.now().toString(),
@@ -147,391 +155,421 @@ export function Playground() {
       ragEnabled,
       retrievalCount,
       documents: [], // Assistant-specific documents (future: populated from DocumentsTab)
-      createdAt: new Date().toISOString()
-    }
+      createdAt: new Date().toISOString(),
+    };
+
+    const updatedAssistants = [...savedAssistants, newAssistant];
+    setSavedAssistants(updatedAssistants);
+    localStorage.setItem("savedAssistants", JSON.stringify(updatedAssistants));
 
-    const updatedAssistants = [...savedAssistants, newAssistant]
-    setSavedAssistants(updatedAssistants)
-    localStorage.setItem('savedAssistants', JSON.stringify(updatedAssistants))
-    
     // Update current selection to the newly saved assistant
     setSelectedAssistant({
       id: newAssistant.id,
       name: newAssistant.name,
-      type: 'user'
-    })
-    
+      type: "user",
+    });
+
     // Close dialog
-    setShowSaveDialog(false)
-    setSaveAssistantName('')
-  }
+    setShowSaveDialog(false);
+    setSaveAssistantName("");
+  };
 
   // Cancel save dialog
   const cancelSaveDialog = () => {
-    setShowSaveDialog(false)
-    setSaveAssistantName('')
-  }
+    setShowSaveDialog(false);
+    setSaveAssistantName("");
+  };
 
   // Load saved assistant
   const loadSavedAssistant = (assistantId: string) => {
-    const assistant = savedAssistants.find(a => a.id === assistantId)
+    const assistant = savedAssistants.find((a) => a.id === assistantId);
     if (assistant) {
-      setSystemPrompt(assistant.systemPrompt)
-      setTemperature(assistant.temperature)
-      setMaxTokens(assistant.maxTokens)
+      setSystemPrompt(assistant.systemPrompt);
+      setTemperature(assistant.temperature);
+      setMaxTokens(assistant.maxTokens);
       // Load RAG settings with defaults for backwards compatibility
-      setRagEnabled(assistant.ragEnabled || false)
-      setRetrievalCount(assistant.retrievalCount || 3)
+      setRagEnabled(assistant.ragEnabled || false);
+      setRetrievalCount(assistant.retrievalCount || 3);
       if (assistant.model) {
-        setSelectedModel(assistant.model)
+        setSelectedModel(assistant.model);
       }
       setSelectedAssistant({
         id: assistant.id,
         name: assistant.name,
-        type: 'user'
-      })
+        type: "user",
+      });
     }
-  }
+  };
 
   // Preset system prompts from shared config
-  const systemPromptPresets = getPresetsFromConfigs()
+  const systemPromptPresets = getPresetsFromConfigs();
 
   // Handle preset selection
   const handlePresetSelect = (presetName: string) => {
-    const preset = systemPromptPresets.find(p => p.name === presetName)
+    const preset = systemPromptPresets.find((p) => p.name === presetName);
     if (preset) {
-      setSystemPrompt(preset.prompt)
+      setSystemPrompt(preset.prompt);
       // Reset RAG settings to defaults for templates
-      setRagEnabled(false)
-      setRetrievalCount(3)
+      setRagEnabled(false);
+      setRetrievalCount(3);
       setSelectedAssistant({
         id: presetName,
         name: preset.name,
-        type: 'template'
-      })
+        type: "template",
+      });
     }
-  }
+  };
 
   // Create new assistant (clear all settings but keep current session)
   const createNewAssistant = () => {
-    setSystemPrompt('')
-    setTemperature(0.7)
-    setMaxTokens(1024)
+    setSystemPrompt("");
+    setTemperature(0.7);
+    setMaxTokens(1024);
     // Reset RAG settings to defaults
-    setRagEnabled(false)
-    setRetrievalCount(3)
+    setRagEnabled(false);
+    setRetrievalCount(3);
     setSelectedAssistant({
-      id: 'new_assistant',
-      name: 'New Assistant',
-      type: 'new'
-    })
+      id: "new_assistant",
+      name: "New Assistant",
+      type: "new",
+    });
     // Keep current session - only clear assistant settings
-  }
+  };
 
   // Clear current assistant
   const clearCurrentAssistant = () => {
-    setSelectedAssistant(null)
-  }
+    setSelectedAssistant(null);
+  };
 
   // Open rename assistant dialog
   const openRenameDialog = () => {
     if (selectedAssistant) {
-      setRenameAssistantName(selectedAssistant.name)
-      setShowRenameDialog(true)
+      setRenameAssistantName(selectedAssistant.name);
+      setShowRenameDialog(true);
     }
-  }
+  };
 
   // Confirm rename assistant
   const confirmRenameAssistant = () => {
-    if (!selectedAssistant || !renameAssistantName.trim()) return
-    
+    if (!selectedAssistant || !renameAssistantName.trim()) return;
+
     // Update selectedAssistant state
     const updatedAssistant = {
       ...selectedAssistant,
-      name: renameAssistantName.trim()
-    }
-    setSelectedAssistant(updatedAssistant)
-    
+      name: renameAssistantName.trim(),
+    };
+    setSelectedAssistant(updatedAssistant);
+
     // If it's a saved user assistant, update localStorage
-    if (selectedAssistant.type === 'user') {
-      const updatedAssistants = savedAssistants.map(assistant => 
-        assistant.id === selectedAssistant.id 
+    if (selectedAssistant.type === "user") {
+      const updatedAssistants = savedAssistants.map((assistant) =>
+        assistant.id === selectedAssistant.id
           ? { ...assistant, name: renameAssistantName.trim() }
           : assistant
-      )
-      setSavedAssistants(updatedAssistants)
-      localStorage.setItem('savedAssistants', JSON.stringify(updatedAssistants))
+      );
+      setSavedAssistants(updatedAssistants);
+      localStorage.setItem(
+        "savedAssistants",
+        JSON.stringify(updatedAssistants)
+      );
     }
-    
+
     // Close dialog
-    setShowRenameDialog(false)
-    setRenameAssistantName('')
-  }
+    setShowRenameDialog(false);
+    setRenameAssistantName("");
+  };
 
   // Cancel rename dialog
   const cancelRenameDialog = () => {
-    setShowRenameDialog(false)
-    setRenameAssistantName('')
-  }
+    setShowRenameDialog(false);
+    setRenameAssistantName("");
+  };
 
   // Get current assistant information
   const getCurrentAssistantInfo = (): AssistantInfo => {
     return {
-      name: selectedAssistant?.name || 'Default Assistant',
-      type: selectedAssistant?.type || 'default',
+      name: selectedAssistant?.name || "Default Assistant",
+      type: selectedAssistant?.type || "default",
       systemPrompt,
       temperature,
       maxTokens,
-      originalTemplate: selectedAssistant?.originalTemplate
-    }
-  }
+      originalTemplate: selectedAssistant?.originalTemplate,
+    };
+  };
 
   // Convert template to new assistant when settings change
   const convertTemplateToNew = () => {
-    if (selectedAssistant && selectedAssistant.type === 'template') {
+    if (selectedAssistant && selectedAssistant.type === "template") {
       setSelectedAssistant({
-        id: 'new_assistant',
+        id: "new_assistant",
         name: `Custom ${selectedAssistant.name}`,
-        type: 'new',
-        originalTemplate: selectedAssistant.name
-      })
+        type: "new",
+        originalTemplate: selectedAssistant.name,
+      });
     }
-  }
+  };
 
   // Wrapped setters that trigger template conversion
   const handleSystemPromptChange = (prompt: string) => {
-    setSystemPrompt(prompt)
-    convertTemplateToNew()
-  }
+    setSystemPrompt(prompt);
+    convertTemplateToNew();
+  };
 
   const handleTemperatureChange = (temp: number) => {
-    setTemperature(temp)
-    convertTemplateToNew()
-  }
+    setTemperature(temp);
+    convertTemplateToNew();
+  };
 
   const handleMaxTokensChange = (tokens: number) => {
-    setMaxTokens(tokens)
-    convertTemplateToNew()
-  }
+    setMaxTokens(tokens);
+    convertTemplateToNew();
+  };
 
   const handleRagEnabledChange = (enabled: boolean) => {
-    setRagEnabled(enabled)
-    convertTemplateToNew()
-  }
+    setRagEnabled(enabled);
+    convertTemplateToNew();
+  };
 
   const handleRetrievalCountChange = (count: number) => {
-    setRetrievalCount(count)
-    convertTemplateToNew()
-  }
+    setRetrievalCount(count);
+    convertTemplateToNew();
+  };
 
   // Load available models and saved assistants on startup
   useEffect(() => {
-    fetchModels()
-    loadSavedAssistants()
-    
+    fetchModels();
+    loadSavedAssistants();
+
     // Check if there's a template configuration to load
-    const loadConfig = localStorage.getItem('loadAssistantConfig')
+    const loadConfig = localStorage.getItem("loadAssistantConfig");
     if (loadConfig) {
       try {
-        const config = JSON.parse(loadConfig)
-        setSystemPrompt(config.systemPrompt || '')
-        setTemperature(config.temperature || 0.7)
-        setMaxTokens(config.maxTokens || 1024)
+        const config = JSON.parse(loadConfig);
+        setSystemPrompt(config.systemPrompt || "");
+        setTemperature(config.temperature || 0.7);
+        setMaxTokens(config.maxTokens || 1024);
         if (config.model) {
-          setSelectedModel(config.model)
+          setSelectedModel(config.model);
         }
         setSelectedAssistant({
-          id: 'loaded_template',
-          name: config.name || 'Loaded Template',
-          type: 'template'
-        })
-        
+          id: "loaded_template",
+          name: config.name || "Loaded Template",
+          type: "template",
+        });
+
         // Clear the config after loading
-        localStorage.removeItem('loadAssistantConfig')
+        localStorage.removeItem("loadAssistantConfig");
       } catch (error) {
-        console.error('Failed to load assistant config:', error)
-        localStorage.removeItem('loadAssistantConfig')
+        console.error("Failed to load assistant config:", error);
+        localStorage.removeItem("loadAssistantConfig");
       }
     }
-  }, [])
+  }, []);
 
   // Debug logs for Session issue
   useEffect(() => {
-    console.log('Sidebar states:', { sessionsCollapsed, configCollapsed, sessionsCount: sessions.length, currentSessionId })
-  }, [sessionsCollapsed, configCollapsed, sessions.length, currentSessionId])
+    console.log("Sidebar states:", {
+      sessionsCollapsed,
+      configCollapsed,
+      sessionsCount: sessions.length,
+      currentSessionId,
+    });
+  }, [sessionsCollapsed, configCollapsed, sessions.length, currentSessionId]);
 
   useEffect(() => {
-    console.log('Rendering sessions:', sessions.length, sessions.map(s => ({id: s.id, title: s.title})))
-  }, [sessions])
+    console.log(
+      "Rendering sessions:",
+      sessions.length,
+      sessions.map((s) => ({ id: s.id, title: s.title }))
+    );
+  }, [sessions]);
 
   // Update selected model when models change
   useEffect(() => {
     // Only reset if the selected model no longer exists in the models list
-    if (selectedModel && !models.find(m => m.model_name === selectedModel)) {
-      const firstModel = models[0]
+    if (selectedModel && !models.find((m) => m.model_name === selectedModel)) {
+      const firstModel = models[0];
       if (firstModel) {
-        setSelectedModel(firstModel.model_name)
+        setSelectedModel(firstModel.model_name);
       }
     }
-  }, [models, selectedModel, setSelectedModel])
+  }, [models, selectedModel, setSelectedModel]);
 
   // Auto-load/unload local models when selection changes
   useEffect(() => {
     const handleModelChange = async () => {
-      if (!selectedModel || !models.length) return
+      if (!selectedModel || !models.length) return;
 
-      const selectedModelInfo = models.find(m => m.model_name === selectedModel)
-      if (!selectedModelInfo) return
+      const selectedModelInfo = models.find(
+        (m) => m.model_name === selectedModel
+      );
+      if (!selectedModelInfo) return;
 
-      const baseUrl = `${window.location.protocol}//${window.location.host}`
+      const baseUrl = `${window.location.protocol}//${window.location.host}`;
 
       // If selected model is a local model and not loaded, show confirmation
-      if (selectedModelInfo.type === 'local' && !selectedModelInfo.is_loaded) {
-        setPendingModelToLoad(selectedModelInfo)
-        setShowLoadConfirm(true)
-        return // Don't auto-load, wait for user confirmation
+      if (selectedModelInfo.type === "local" && !selectedModelInfo.is_loaded) {
+        setPendingModelToLoad(selectedModelInfo);
+        setShowLoadConfirm(true);
+        return; // Don't auto-load, wait for user confirmation
       }
 
       // Unload other local models that are loaded but not selected
-      const loadedLocalModels = models.filter(m => 
-        m.type === 'local' && 
-        m.is_loaded && 
-        m.model_name !== selectedModel
-      )
+      const loadedLocalModels = models.filter(
+        (m) =>
+          m.type === "local" && m.is_loaded && m.model_name !== selectedModel
+      );
 
       for (const model of loadedLocalModels) {
         try {
           const response = await fetch(`${baseUrl}/unload-model`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ model_name: model.model_name })
-          })
-          
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ model_name: model.model_name }),
+          });
+
           if (response.ok) {
-            console.log(`✅ Auto-unloaded local model: ${model.model_name}`)
+            console.log(`✅ Auto-unloaded local model: ${model.model_name}`);
           }
         } catch (error) {
-          console.error(`Error auto-unloading model ${model.model_name}:`, error)
+          console.error(
+            `Error auto-unloading model ${model.model_name}:`,
+            error
+          );
         }
       }
-      
+
       // Refresh models after any unloading
       if (loadedLocalModels.length > 0) {
-        fetchModels()
+        fetchModels();
       }
-    }
+    };
 
-    handleModelChange()
-  }, [selectedModel, models])
+    handleModelChange();
+  }, [selectedModel, models]);
 
   const handleLoadModelConfirm = async () => {
-    if (!pendingModelToLoad) return
-    
-    setShowLoadConfirm(false)
-    setAutoLoadingModel(pendingModelToLoad.model_name)
-    
+    if (!pendingModelToLoad) return;
+
+    setShowLoadConfirm(false);
+    setAutoLoadingModel(pendingModelToLoad.model_name);
+
     try {
-      const baseUrl = `${window.location.protocol}//${window.location.host}`
+      const baseUrl = `${window.location.protocol}//${window.location.host}`;
       const response = await fetch(`${baseUrl}/load-model`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ model_name: pendingModelToLoad.model_name })
-      })
-      
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ model_name: pendingModelToLoad.model_name }),
+      });
+
       if (response.ok) {
-        console.log(`✅ User confirmed and loaded: ${pendingModelToLoad.model_name}`)
-        fetchModels() // Refresh model states
+        console.log(
+          `✅ User confirmed and loaded: ${pendingModelToLoad.model_name}`
+        );
+        fetchModels(); // Refresh model states
       } else {
-        console.error(`❌ Failed to load model: ${pendingModelToLoad.model_name}`)
+        console.error(
+          `❌ Failed to load model: ${pendingModelToLoad.model_name}`
+        );
         // Revert to an API model if load failed
-        const apiModel = models.find(m => m.type === 'api')
+        const apiModel = models.find((m) => m.type === "api");
         if (apiModel) {
-          setSelectedModel(apiModel.model_name)
+          setSelectedModel(apiModel.model_name);
         }
       }
     } catch (error) {
-      console.error('Error loading model:', error)
+      console.error("Error loading model:", error);
       // Revert to an API model if error
-      const apiModel = models.find(m => m.type === 'api')
+      const apiModel = models.find((m) => m.type === "api");
       if (apiModel) {
-        setSelectedModel(apiModel.model_name)
+        setSelectedModel(apiModel.model_name);
       }
     } finally {
-      setAutoLoadingModel(null)
-      setPendingModelToLoad(null)
+      setAutoLoadingModel(null);
+      setPendingModelToLoad(null);
     }
-  }
+  };
 
   const handleLoadModelCancel = () => {
-    setShowLoadConfirm(false)
-    setPendingModelToLoad(null)
-    
+    setShowLoadConfirm(false);
+    setPendingModelToLoad(null);
+
     // Revert to an API model
-    const apiModel = models.find(m => m.type === 'api')
+    const apiModel = models.find((m) => m.type === "api");
     if (apiModel) {
-      setSelectedModel(apiModel.model_name)
+      setSelectedModel(apiModel.model_name);
     }
-  }
+  };
 
   // Cleanup: unload all local models when component unmounts or user leaves
   useEffect(() => {
     const handlePageUnload = async () => {
-      const baseUrl = `${window.location.protocol}//${window.location.host}`
-      const loadedLocalModels = models.filter(m => m.type === 'local' && m.is_loaded)
-      
+      const baseUrl = `${window.location.protocol}//${window.location.host}`;
+      const loadedLocalModels = models.filter(
+        (m) => m.type === "local" && m.is_loaded
+      );
+
       for (const model of loadedLocalModels) {
         try {
           await fetch(`${baseUrl}/unload-model`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ model_name: model.model_name })
-          })
-          console.log(`✅ Cleanup: unloaded ${model.model_name}`)
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ model_name: model.model_name }),
+          });
+          console.log(`✅ Cleanup: unloaded ${model.model_name}`);
         } catch (error) {
-          console.error(`Error cleaning up model ${model.model_name}:`, error)
+          console.error(`Error cleaning up model ${model.model_name}:`, error);
         }
       }
-    }
+    };
 
     // Cleanup on component unmount
     return () => {
-      handlePageUnload()
-    }
-  }, [models])
+      handlePageUnload();
+    };
+  }, [models]);
 
   const fetchModels = async () => {
     try {
-      const baseUrl = `${window.location.protocol}//${window.location.host}`
-      const res = await fetch(`${baseUrl}/models`)
+      const baseUrl = `${window.location.protocol}//${window.location.host}`;
+      const res = await fetch(`${baseUrl}/models`);
       if (res.ok) {
-        const data: ModelsResponse = await res.json()
-        setModels(data.models)
-        
+        const data: ModelsResponse = await res.json();
+        setModels(data.models);
+
         // Set selected model to current model if available, otherwise first API model
         if (data.current_model && selectedModel !== data.current_model) {
-          setSelectedModel(data.current_model)
+          setSelectedModel(data.current_model);
         } else if (!selectedModel && data.models.length > 0) {
           // Prefer API models as default
-          const apiModel = data.models.find(m => m.type === 'api')
-          const defaultModel = apiModel || data.models[0]
-          setSelectedModel(defaultModel.model_name)
+          const apiModel = data.models.find((m) => m.type === "api");
+          const defaultModel = apiModel || data.models[0];
+          setSelectedModel(defaultModel.model_name);
         }
       }
     } catch (err) {
-      console.error('Failed to fetch models:', err)
+      console.error("Failed to fetch models:", err);
     }
-  }
+  };
 
   return (
     <div className="h-screen bg-background flex">
       {/* Chat Sessions Sidebar */}
-      <div className={`
+      <div
+        className={`
         bg-background border-r flex-shrink-0 transition-all duration-300 ease-in-out
-        ${sessionsCollapsed ? 'w-12' : 'w-80'}
-      `}>
+        ${sessionsCollapsed ? "w-12" : "w-80"}
+      `}
+      >
         <div className="p-4 space-y-4 h-full">
-          <div className={`flex items-center ${sessionsCollapsed ? 'justify-center' : 'justify-between'}`}>
-            {!sessionsCollapsed && <h2 className="font-semibold">Chat Sessions</h2>}
+          <div
+            className={`flex items-center ${
+              sessionsCollapsed ? "justify-center" : "justify-between"
+            }`}
+          >
+            {!sessionsCollapsed && (
+              <h2 className="font-semibold">Chat Sessions</h2>
+            )}
             <div className="flex gap-1">
               {!sessionsCollapsed && (
                 <Button onClick={clearCurrentSession} size="sm">
@@ -539,76 +577,102 @@ export function Playground() {
                   New
                 </Button>
               )}
-              <Button 
-                onClick={() => setSessionsCollapsed(!sessionsCollapsed)} 
-                size="sm" 
+              <Button
+                onClick={() => setSessionsCollapsed(!sessionsCollapsed)}
+                size="sm"
                 variant="ghost"
                 className="h-8 w-8 p-0 hover:bg-gray-100"
-                title={sessionsCollapsed ? "Expand Sessions" : "Collapse Sessions"}
+                title={
+                  sessionsCollapsed ? "Expand Sessions" : "Collapse Sessions"
+                }
               >
-                {sessionsCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+                {sessionsCollapsed ? (
+                  <ChevronRight className="h-4 w-4" />
+                ) : (
+                  <ChevronLeft className="h-4 w-4" />
+                )}
               </Button>
             </div>
           </div>
-          
+
           {sessionsCollapsed && (
-            <Button onClick={clearCurrentSession} size="sm" variant="ghost" className="w-full p-2">
+            <Button
+              onClick={clearCurrentSession}
+              size="sm"
+              variant="ghost"
+              className="w-full p-2"
+            >
               <Plus className="h-4 w-4" />
             </Button>
           )}
           <div className="space-y-2">
-
-{!sessionsCollapsed && sessions.map((session) => (
-              <Card 
-                key={session.id}
-                className={`p-3 cursor-pointer transition-colors hover:bg-accent ${
-                  currentSessionId === session.id ? 'bg-accent border-primary' : ''
-                }`}
-                onClick={() => {
-                  console.log('Session card clicked:', session.id, session.title)
-                  selectSession(session.id)
-                }}
-              >
-                <div className="flex items-center justify-between">
-                  <span className="text-sm font-medium truncate">{session.title}</span>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      deleteSession(session.id)
-                    }}
-                    className="h-6 w-6 p-0"
-                  >
-                    <Trash2 className="h-3 w-3" />
-                  </Button>
-                </div>
-                <div className="text-xs text-muted-foreground">
-                  {session.messages.length} messages
-                </div>
-              </Card>
-            ))}
-            
-            {sessionsCollapsed && sessions.map((session) => (
-              <Button
-                key={session.id}
-                variant={currentSessionId === session.id ? "default" : "ghost"}
-                size="sm"
-                className="w-full p-1 h-8 relative"
-                title={session.title}
-                onClick={() => {
-                  console.log('Session icon clicked:', session.id, session.title)
-                  selectSession(session.id)
-                }}
-              >
-                <MessageSquare className="h-4 w-4" />
-                {session.messages && session.messages.length > 0 && (
-                  <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 text-white text-xs rounded-full flex items-center justify-center">
-                    {Math.min(session.messages.length, 9)}
+            {!sessionsCollapsed &&
+              sessions.map((session) => (
+                <Card
+                  key={session.id}
+                  className={`p-3 cursor-pointer transition-colors hover:bg-accent ${
+                    currentSessionId === session.id
+                      ? "bg-accent border-primary"
+                      : ""
+                  }`}
+                  onClick={() => {
+                    console.log(
+                      "Session card clicked:",
+                      session.id,
+                      session.title
+                    );
+                    selectSession(session.id);
+                  }}
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium truncate">
+                      {session.title}
+                    </span>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        deleteSession(session.id);
+                      }}
+                      className="h-6 w-6 p-0"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
                   </div>
-                )}
-              </Button>
-            ))}
+                  <div className="text-xs text-muted-foreground">
+                    {session.messages.length} messages
+                  </div>
+                </Card>
+              ))}
+
+            {sessionsCollapsed &&
+              sessions.map((session) => (
+                <Button
+                  key={session.id}
+                  variant={
+                    currentSessionId === session.id ? "default" : "ghost"
+                  }
+                  size="sm"
+                  className="w-full p-1 h-8 relative"
+                  title={session.title}
+                  onClick={() => {
+                    console.log(
+                      "Session icon clicked:",
+                      session.id,
+                      session.title
+                    );
+                    selectSession(session.id);
+                  }}
+                >
+                  <MessageSquare className="h-4 w-4" />
+                  {session.messages && session.messages.length > 0 && (
+                    <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 text-white text-xs rounded-full flex items-center justify-center">
+                      {Math.min(session.messages.length, 9)}
+                    </div>
+                  )}
+                </Button>
+              ))}
           </div>
         </div>
       </div>
@@ -621,21 +685,25 @@ export function Playground() {
           <div className="flex-1 flex flex-col">
             {/* Chat Messages and Input */}
             <Chat
-              messages={messages.map(msg => ({
+              messages={messages.map((msg) => ({
                 id: msg.id,
-                role: msg.role as 'user' | 'assistant' | 'system',
+                role: msg.role as "user" | "assistant" | "system",
                 content: msg.content,
                 createdAt: new Date(msg.timestamp),
-                assistantInfo: msg.assistantInfo
+                assistantInfo: msg.assistantInfo,
               }))}
               input={input}
               handleInputChange={(e) => setInput(e.target.value)}
               handleSubmit={async (e) => {
-                e.preventDefault()
-                if (!selectedModel || !models.find(m => m.model_name === selectedModel)) return
-                const assistantInfo = getCurrentAssistantInfo()
-                const ragConfig = { useRag: ragEnabled, retrievalCount }
-                await sendMessage(assistantInfo, ragConfig)
+                e.preventDefault();
+                if (
+                  !selectedModel ||
+                  !models.find((m) => m.model_name === selectedModel)
+                )
+                  return;
+                const assistantInfo = getCurrentAssistantInfo();
+                const ragConfig = { useRag: ragEnabled, retrievalCount };
+                await sendMessage(assistantInfo, ragConfig);
               }}
               isGenerating={isLoading}
               stop={stopGeneration}
@@ -644,28 +712,48 @@ export function Playground() {
           </div>
 
           {/* Settings Panel - Tabbed Configuration Sidebar */}
-          <div className={`
+          <div
+            className={`
             border-l bg-background flex-shrink-0 transition-all duration-300 ease-in-out
-            ${configCollapsed ? 'w-12' : 'w-[480px] xl:w-[520px]'}
-          `}>
+            ${configCollapsed ? "w-12" : "w-[480px] xl:w-[520px]"}
+          `}
+          >
             <div className="p-4 space-y-4 h-full">
-              <div className={`flex items-center ${configCollapsed ? 'justify-center' : 'justify-between'}`}>
-                {!configCollapsed && <h2 className="font-semibold">Configuration</h2>}
+              <div
+                className={`flex items-center ${
+                  configCollapsed ? "justify-center" : "justify-between"
+                }`}
+              >
+                {!configCollapsed && (
+                  <h2 className="font-semibold">Configuration</h2>
+                )}
                 <div className="flex gap-1">
-                  <Button 
-                    onClick={() => setConfigCollapsed(!configCollapsed)} 
-                    size="sm" 
+                  <Button
+                    onClick={() => setConfigCollapsed(!configCollapsed)}
+                    size="sm"
                     variant="ghost"
                     className="h-8 w-8 p-0 hover:bg-gray-100"
-                    title={configCollapsed ? "Expand Configuration" : "Collapse Configuration"}
+                    title={
+                      configCollapsed
+                        ? "Expand Configuration"
+                        : "Collapse Configuration"
+                    }
                   >
-                    {configCollapsed ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                    {configCollapsed ? (
+                      <ChevronLeft className="h-4 w-4" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4" />
+                    )}
                   </Button>
                 </div>
               </div>
-              
+
               {configCollapsed && (
-                <Button size="sm" variant="ghost" className="w-full p-2 invisible">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="w-full p-2 invisible"
+                >
                   <Settings className="h-4 w-4" />
                 </Button>
               )}
@@ -674,7 +762,7 @@ export function Playground() {
                   <>
                     {/* Assistant Selection Section */}
                     <div className="border-b bg-white p-4 -mx-4">
-                      <AssistantSelector 
+                      <AssistantSelector
                         savedAssistants={savedAssistants}
                         loadSavedAssistant={loadSavedAssistant}
                         openSaveDialog={openSaveDialog}
@@ -689,56 +777,77 @@ export function Playground() {
                       />
                     </div>
 
-                    <Tabs defaultValue="parameters" className="flex-1 flex flex-col -mx-4">
-              <TabsList className="grid w-full grid-cols-3 m-4 mb-0">
-                <TabsTrigger value="parameters" className="flex items-center gap-2">
-                  <Sliders className="h-4 w-4" />
-                  <span className="hidden sm:inline">Parameters</span>
-                </TabsTrigger>
-                <TabsTrigger value="instructions" className="flex items-center gap-2">
-                  <Settings className="h-4 w-4" />
-                  <span className="hidden sm:inline">Instructions</span>
-                </TabsTrigger>
-                <TabsTrigger value="documents" className="flex items-center gap-2">
-                  <BookOpen className="h-4 w-4" />
-                  <span className="hidden sm:inline">Documents</span>
-                </TabsTrigger>
-              </TabsList>
-
-              <div className="flex-1 overflow-hidden">
-                <TabsContent value="parameters" className="p-6 space-y-6 m-0 h-full overflow-y-auto">
-                  <ModelParametersTab 
-                    models={models}
-                    selectedModel={selectedModel}
-                    setSelectedModel={setSelectedModel}
-                    autoLoadingModel={autoLoadingModel}
-                    temperature={temperature}
-                    setTemperature={handleTemperatureChange}
-                    maxTokens={maxTokens}
-                    setMaxTokens={handleMaxTokensChange}
-                  />
-                </TabsContent>
-
-                <TabsContent value="instructions" className="p-6 space-y-6 m-0 h-full overflow-y-auto">
-                  <SystemInstructionsTab 
-                    systemPrompt={systemPrompt}
-                    setSystemPrompt={handleSystemPromptChange}
-                    isLoading={isLoading}
-                  />
-                </TabsContent>
-
-                <TabsContent value="documents" className="p-6 space-y-6 m-0 h-full overflow-y-auto">
-                  <DocumentsTab 
-                    isLoading={isLoading}
-                    ragEnabled={ragEnabled}
-                    setRagEnabled={handleRagEnabledChange}
-                    retrievalCount={retrievalCount}
-                    setRetrievalCount={handleRetrievalCountChange}
-                    currentAssistant={selectedAssistant}
-                  />
-                </TabsContent>
-              </div>
-            </Tabs>
+                    <Tabs
+                      defaultValue="parameters"
+                      className="flex-1 flex flex-col -mx-4"
+                    >
+                      <TabsList className="grid w-full grid-cols-3 m-4 mb-0">
+                        <TabsTrigger
+                          value="parameters"
+                          className="flex items-center gap-2"
+                        >
+                          <Sliders className="h-4 w-4" />
+                          <span className="hidden sm:inline">Parameters</span>
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="instructions"
+                          className="flex items-center gap-2"
+                        >
+                          <Settings className="h-4 w-4" />
+                          <span className="hidden sm:inline">Instructions</span>
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="documents"
+                          className="flex items-center gap-2"
+                        >
+                          <BookOpen className="h-4 w-4" />
+                          <span className="hidden sm:inline">Documents</span>
+                        </TabsTrigger>
+                      </TabsList>
+
+                      <div className="flex-1 overflow-hidden">
+                        <TabsContent
+                          value="parameters"
+                          className="p-6 space-y-6 m-0 h-full overflow-y-auto"
+                        >
+                          <ModelParametersTab
+                            models={models}
+                            selectedModel={selectedModel}
+                            setSelectedModel={setSelectedModel}
+                            autoLoadingModel={autoLoadingModel}
+                            temperature={temperature}
+                            setTemperature={handleTemperatureChange}
+                            maxTokens={maxTokens}
+                            setMaxTokens={handleMaxTokensChange}
+                          />
+                        </TabsContent>
+
+                        <TabsContent
+                          value="instructions"
+                          className="p-6 space-y-6 m-0 h-full overflow-y-auto"
+                        >
+                          <SystemInstructionsTab
+                            systemPrompt={systemPrompt}
+                            setSystemPrompt={handleSystemPromptChange}
+                            isLoading={isLoading}
+                          />
+                        </TabsContent>
+
+                        <TabsContent
+                          value="documents"
+                          className="p-6 space-y-6 m-0 h-full overflow-y-auto"
+                        >
+                          <DocumentsTab
+                            isLoading={isLoading}
+                            ragEnabled={ragEnabled}
+                            setRagEnabled={handleRagEnabledChange}
+                            retrievalCount={retrievalCount}
+                            setRetrievalCount={handleRetrievalCountChange}
+                            currentAssistant={selectedAssistant}
+                          />
+                        </TabsContent>
+                      </div>
+                    </Tabs>
                   </>
                 )}
               </div>
@@ -753,8 +862,10 @@ export function Playground() {
           <AlertDialogHeader>
             <AlertDialogTitle>Load Local Model</AlertDialogTitle>
             <AlertDialogDescription>
-              Loading <strong>{pendingModelToLoad?.name}</strong> will use approximately <strong>{pendingModelToLoad?.size_gb}</strong> of RAM and storage. 
-              First-time loading may require downloading the model.
+              Loading <strong>{pendingModelToLoad?.name}</strong> will use
+              approximately <strong>{pendingModelToLoad?.size_gb}</strong> of
+              RAM and storage. First-time loading may require downloading the
+              model.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
@@ -774,7 +885,8 @@ export function Playground() {
           <AlertDialogHeader>
             <AlertDialogTitle>Save Assistant</AlertDialogTitle>
             <AlertDialogDescription>
-              Give your assistant a custom name. This will be displayed in your assistant list.
+              Give your assistant a custom name. This will be displayed in your
+              assistant list.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <div className="py-4">
@@ -791,11 +903,11 @@ export function Playground() {
               maxLength={100}
               autoFocus
               onKeyDown={(e) => {
-                if (e.key === 'Enter' && saveAssistantName.trim()) {
-                  confirmSaveAssistant()
+                if (e.key === "Enter" && saveAssistantName.trim()) {
+                  confirmSaveAssistant();
                 }
-                if (e.key === 'Escape') {
-                  cancelSaveDialog()
+                if (e.key === "Escape") {
+                  cancelSaveDialog();
                 }
               }}
             />
@@ -807,7 +919,7 @@ export function Playground() {
             <AlertDialogCancel onClick={cancelSaveDialog}>
               Cancel
             </AlertDialogCancel>
-            <AlertDialogAction 
+            <AlertDialogAction
               onClick={confirmSaveAssistant}
               disabled={!saveAssistantName.trim()}
             >
@@ -828,7 +940,10 @@ export function Playground() {
             </AlertDialogDescription>
           </AlertDialogHeader>
           <div className="py-4">
-            <Label htmlFor="rename-assistant-name" className="text-sm font-medium">
+            <Label
+              htmlFor="rename-assistant-name"
+              className="text-sm font-medium"
+            >
               Assistant Name
             </Label>
             <input
@@ -841,11 +956,11 @@ export function Playground() {
               maxLength={100}
               autoFocus
               onKeyDown={(e) => {
-                if (e.key === 'Enter' && renameAssistantName.trim()) {
-                  confirmRenameAssistant()
+                if (e.key === "Enter" && renameAssistantName.trim()) {
+                  confirmRenameAssistant();
                 }
-                if (e.key === 'Escape') {
-                  cancelRenameDialog()
+                if (e.key === "Escape") {
+                  cancelRenameDialog();
                 }
               }}
             />
@@ -857,7 +972,7 @@ export function Playground() {
             <AlertDialogCancel onClick={cancelRenameDialog}>
               Cancel
             </AlertDialogCancel>
-            <AlertDialogAction 
+            <AlertDialogAction
               onClick={confirmRenameAssistant}
               disabled={!renameAssistantName.trim()}
             >
@@ -868,5 +983,5 @@ export function Playground() {
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }

frontend/src/pages/Technology.tsx

@@ -1,13 +1,13 @@
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { Card, CardContent } from '@/components/ui/card'
-import { Menu } from 'lucide-react'
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Menu } from "lucide-react";
 
 export function Technology() {
-  const [activeTab, setActiveTab] = useState('Hardware')
-  const navigate = useNavigate()
+  const [activeTab, setActiveTab] = useState("Hardware");
+  const navigate = useNavigate();
 
   return (
     <div className="min-h-screen bg-gray-50">
@@ -17,34 +17,37 @@ export function Technology() {
           <div className="flex justify-between items-center h-20">
             {/* Logo */}
             <div className="flex items-center">
-              <img 
-                src="/assets/logo.png" 
-                alt="EdgeLLM Logo" 
+              <img
+                src="/assets/logo.png"
+                alt="EdgeLLM Logo"
                 className="h-20 w-20"
                 onError={(e) => {
-                  console.error('Logo failed to load')
-                  e.currentTarget.style.display = 'none'
+                  console.error("Logo failed to load");
+                  e.currentTarget.style.display = "none";
                 }}
               />
             </div>
 
             {/* Navigation Links */}
             <div className="hidden md:flex items-center space-x-8">
-              <button onClick={() => navigate('/')} className="text-gray-700 hover:text-purple-600 font-medium">
+              <button
+                onClick={() => navigate("/")}
+                className="text-gray-700 hover:text-purple-600 font-medium"
+              >
                 Home
               </button>
               <span className="text-white bg-purple-600 px-4 py-2 rounded-md font-medium">
                 Technology
               </span>
-              <button 
-                onClick={() => navigate('/usecases')} 
+              <button
+                onClick={() => navigate("/usecases")}
                 className="text-gray-700 hover:text-purple-600 font-medium transition-colors"
               >
                 Use Cases
               </button>
-              <Button 
-                variant="outline" 
-                onClick={() => navigate('/mydevice')}
+              <Button
+                variant="outline"
+                onClick={() => navigate("/mydevice")}
                 className="border-purple-600 text-purple-600 hover:bg-purple-50"
               >
                 My Device
@@ -61,28 +64,29 @@ export function Technology() {
         </div>
       </nav>
 
-       {/* Header Section */}
-       <div className="py-24 px-4 sm:px-6 lg:px-8">
-         <div className="max-w-4xl mx-auto text-center">
-           {/* Title */}
-           <h1 className="text-4xl md:text-5xl font-bold text-black mb-6">
-             Our Technology
-           </h1>
+      {/* Header Section */}
+      <div className="py-24 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-4xl mx-auto text-center">
+          {/* Title */}
+          <h1 className="text-4xl md:text-5xl font-bold text-black mb-6">
+            Our Technology
+          </h1>
           <p className="text-xl text-purple-700 font-semibold max-w-2xl mx-auto mb-8">
-            Low-cost FPGA-based design, optimized for Large Language Models on-device.
+            Low-cost FPGA-based design, optimized for Large Language Models
+            on-device.
           </p>
 
           {/* Tabs */}
           <div className="flex justify-center mb-12">
             <div className="bg-white rounded-lg p-1 shadow-sm">
-              {['Hardware', 'Software'].map((tab) => (
+              {["Hardware", "Software"].map((tab) => (
                 <button
                   key={tab}
                   onClick={() => setActiveTab(tab)}
                   className={`px-6 py-2 rounded-md text-sm font-medium transition-all ${
                     activeTab === tab
-                      ? 'bg-purple-600 text-white'
-                      : 'text-gray-700 hover:text-purple-600'
+                      ? "bg-purple-600 text-white"
+                      : "text-gray-700 hover:text-purple-600"
                   }`}
                 >
                   {tab}
@@ -95,7 +99,7 @@ export function Technology() {
 
       {/* Tab Content */}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
-        {activeTab === 'Hardware' && (
+        {activeTab === "Hardware" && (
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
             {/* Hardware Text Content */}
             <div>
@@ -103,21 +107,26 @@ export function Technology() {
                 Hardware Description
               </h2>
               <p className="text-lg text-gray-800 leading-relaxed">
-                EdgeMate is an ultra–low-budget single-board computer designed specifically for large language model (LLM) deployment. 
-                Despite its compact form factor and low power consumption, we provide:
+                EdgeMate is an ultra–low-budget single-board computer designed
+                specifically for large language model (LLM) deployment. Despite
+                its compact form factor and low power consumption, we provide:
               </p>
               <ul className="mt-6 space-y-3 text-lg text-gray-800">
                 <li className="flex items-start">
                   <span className="text-purple-600 mr-2">•</span>
-                  Accelerated inference performance — delivering up to 15 tokens per second on a 30B model, thanks to its optimized FPGA-based AI engine.
+                  Accelerated inference performance — delivering up to 15 tokens
+                  per second on a 30B model, thanks to its optimized FPGA-based
+                  AI engine.
                 </li>
                 <li className="flex items-start">
                   <span className="text-purple-600 mr-2">•</span>
-                  High memory capacity — up to 40GB RAM, enabling hosting of LLMs up to ≥30B parameters.
+                  High memory capacity — up to 40GB RAM, enabling hosting of
+                  LLMs up to ≥30B parameters.
                 </li>
                 <li className="flex items-start">
                   <span className="text-purple-600 mr-2">•</span>
-                  Cost efficiency — making advanced AI workloads accessible at low cost.
+                  Cost efficiency — making advanced AI workloads accessible at
+                  low cost.
                 </li>
               </ul>
             </div>
@@ -127,12 +136,18 @@ export function Technology() {
               <CardContent className="p-8 space-y-6">
                 <div className="flex flex-col space-y-4">
                   <div className="flex justify-between items-start">
-                    <span className="text-lg font-bold text-gray-900">Chip</span>
-                    <span className="text-base text-gray-700">AMD Zynq UltraScale+ XCZU3EG</span>
+                    <span className="text-lg font-bold text-gray-900">
+                      Chip
+                    </span>
+                    <span className="text-base text-gray-700">
+                      AMD Zynq UltraScale+ XCZU3EG
+                    </span>
                   </div>
-                  
+
                   <div className="flex justify-between items-start">
-                    <span className="text-lg font-bold text-gray-900">Processor</span>
+                    <span className="text-lg font-bold text-gray-900">
+                      Processor
+                    </span>
                     <div className="text-base text-gray-700 text-right">
                       <div>Quad-core 64-bit Arm Cortex-A53 CPU</div>
                       <div>Dual-core 64-bit Arm Cortex-R5 CPU</div>
@@ -141,20 +156,31 @@ export function Technology() {
                   </div>
 
                   <div className="flex justify-between items-start">
-                    <span className="text-lg font-bold text-gray-900">FPGA Fabric</span>
-                    <span className="text-base text-gray-700">70K LUT, 360 DSP slices</span>
+                    <span className="text-lg font-bold text-gray-900">
+                      FPGA Fabric
+                    </span>
+                    <span className="text-base text-gray-700">
+                      70K LUT, 360 DSP slices
+                    </span>
                   </div>
 
                   <div className="flex justify-between items-start">
-                    <span className="text-lg font-bold text-gray-900">Memory</span>
+                    <span className="text-lg font-bold text-gray-900">
+                      Memory
+                    </span>
                     <div className="text-base text-gray-700 text-right">
                       <div>8 GB 64-bit DDR4 (2400 Mbps) on CPU side</div>
-                      <div>8 GB / 16 GB / 32 GB DDR4 (2133 Mbps) on FPGA side (SODIMM)</div>
+                      <div>
+                        8 GB / 16 GB / 32 GB DDR4 (2133 Mbps) on FPGA side
+                        (SODIMM)
+                      </div>
                     </div>
                   </div>
 
                   <div className="flex justify-between items-start">
-                    <span className="text-lg font-bold text-gray-900">Storage</span>
+                    <span className="text-lg font-bold text-gray-900">
+                      Storage
+                    </span>
                     <div className="text-base text-gray-700 text-right">
                       <div>256 GB PCIe 2.0 x1 NVMe SSD</div>
                       <div>MicroSD card slot</div>
@@ -174,7 +200,7 @@ export function Technology() {
           </div>
         )}
 
-        {activeTab === 'Software' && (
+        {activeTab === "Software" && (
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
             {/* Software Text Content */}
             <div>
@@ -182,25 +208,30 @@ export function Technology() {
                 Software Stack
               </h2>
               <p className="text-lg text-gray-800 leading-relaxed">
-                Our comprehensive software ecosystem is designed to maximize the potential of EdgeMate hardware, 
-                providing seamless LLM deployment and management capabilities:
+                Our comprehensive software platform enables non-experts to
+                personalize, test, and deploy LLM agents to edge devices with an
+                intuitive web-based interface:
               </p>
               <ul className="mt-6 space-y-3 text-lg text-gray-800">
                 <li className="flex items-start">
                   <span className="text-purple-600 mr-2">•</span>
-                  Custom FPGA-optimized inference engine with quantization support for efficient model deployment.
+                  React 18 + TypeScript frontend with shadcn/ui design system
+                  for modern, accessible components.
                 </li>
                 <li className="flex items-start">
                   <span className="text-purple-600 mr-2">•</span>
-                  Edge LLM Platform — intuitive web interface for model management, chat, and system monitoring.
+                  FastAPI + Python 3.11+ backend with hybrid inference routing
+                  between local FPGA and cloud APIs.
                 </li>
                 <li className="flex items-start">
                   <span className="text-purple-600 mr-2">•</span>
-                  Support for popular model formats (GGUF, ONNX) and frameworks (Transformers, LLaMA.cpp).
+                  Integrated RAG system using LangChain, FAISS, and HuggingFace
+                  Transformers for document processing.
                 </li>
                 <li className="flex items-start">
                   <span className="text-purple-600 mr-2">•</span>
-                  REST API for seamless integration with existing applications and services.
+                  Docker containerization with deployment on Hugging Face Spaces
+                  for accessible demonstrations.
                 </li>
               </ul>
             </div>
@@ -210,43 +241,53 @@ export function Technology() {
               <CardContent className="p-8 space-y-6">
                 <div className="flex flex-col space-y-4">
                   <div className="flex justify-between items-start">
-                    <span className="text-lg font-semibold text-gray-900">OS Support</span>
+                    <span className="text-lg font-semibold text-gray-900">
+                      Frontend Stack
+                    </span>
                     <div className="text-base text-gray-700 text-right">
-                      <div>Ubuntu 22.04 LTS</div>
-                      <div>Custom Linux Distribution</div>
+                      <div>React 18 + TypeScript</div>
+                      <div>shadcn/ui + Radix UI</div>
+                      <div>Tailwind CSS + Vite</div>
                     </div>
                   </div>
-                  
+
                   <div className="flex justify-between items-start">
-                    <span className="text-lg font-semibold text-gray-900">Model Formats</span>
+                    <span className="text-lg font-semibold text-gray-900">
+                      Backend Stack
+                    </span>
                     <div className="text-base text-gray-700 text-right">
-                      <div>GGUF (LLaMA.cpp)</div>
-                      <div>ONNX</div>
-                      <div>PyTorch</div>
-                      <div>Transformers</div>
+                      <div>FastAPI + Python 3.11+</div>
+                      <div>HuggingFace Transformers</div>
+                      <div>OpenAI-compatible APIs</div>
                     </div>
                   </div>
 
                   <div className="flex justify-between items-start">
-                    <span className="text-lg font-semibold text-gray-900">Inference Engine</span>
+                    <span className="text-lg font-semibold text-gray-900">
+                      AI/ML Components
+                    </span>
                     <div className="text-base text-gray-700 text-right">
-                      <div>Custom FPGA Accelerator</div>
-                      <div>LLaMA.cpp Integration</div>
+                      <div>LangChain + FAISS</div>
+                      <div>sentence-transformers</div>
                       <div>Quantization Support</div>
                     </div>
                   </div>
 
                   <div className="flex justify-between items-start">
-                    <span className="text-lg font-semibold text-gray-900">Management Interface</span>
+                    <span className="text-lg font-semibold text-gray-900">
+                      Deployment
+                    </span>
                     <div className="text-base text-gray-700 text-right">
-                      <div>Web-based Dashboard</div>
-                      <div>REST API</div>
-                      <div>CLI Tools</div>
+                      <div>Docker Containerization</div>
+                      <div>Hugging Face Spaces</div>
+                      <div>REST API Integration</div>
                     </div>
                   </div>
 
                   <div className="flex justify-between items-start">
-                    <span className="text-lg font-semibold text-gray-900">Development Tools</span>
+                    <span className="text-lg font-semibold text-gray-900">
+                      Development Tools
+                    </span>
                     <div className="text-base text-gray-700 text-right">
                       <div>Python SDK</div>
                       <div>Model Optimization Tools</div>
@@ -255,7 +296,9 @@ export function Technology() {
                   </div>
 
                   <div className="flex justify-between items-start">
-                    <span className="text-lg font-semibold text-gray-900">Security</span>
+                    <span className="text-lg font-semibold text-gray-900">
+                      Security
+                    </span>
                     <div className="text-base text-gray-700 text-right">
                       <div>Secure Boot</div>
                       <div>Model Encryption</div>
@@ -272,14 +315,16 @@ export function Technology() {
       {/* Why us? Comparison Section */}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
         <h2 className="text-3xl font-semibold text-purple-600 mb-8">Why us?</h2>
-        
+
         {/* Comparison Table */}
         <div className="bg-white rounded-3xl shadow-xl overflow-hidden">
           {/* Table Header */}
           <div className="grid grid-cols-4 bg-gradient-to-r from-gray-50 to-gray-100">
             <div className="p-6"></div>
             <div className="p-6 text-center">
-              <Badge className="bg-purple-600 text-white font-bold px-4 py-2">Ours</Badge>
+              <Badge className="bg-purple-600 text-white font-bold px-4 py-2">
+                Ours
+              </Badge>
             </div>
             <div className="p-6 text-center">
               <span className="font-bold text-gray-800">Raspberry Pi 5</span>
@@ -291,20 +336,40 @@ export function Technology() {
 
           {/* Table Rows */}
           {[
-            { label: 'Price', ours: '$199', pi: '$120', jetson: '$249' },
-            { label: 'RAM', ours: '24GB/40GB', pi: '16GB', jetson: '8GB' },
-            { label: 'CPU', ours: 'Cortex-A53', pi: 'Cortex-A72', jetson: 'Cortex-A78' },
-            { label: 'AI Engine', ours: 'Optimized Accelerator on FPGA', pi: 'Neon SIMD Instructions', jetson: 'Cuda/Tensor Core' },
-            { label: 'Power', ours: '<10W', pi: '5-12 W', jetson: '7-25' },
-            { label: 'LLM decode Performance', ours: '15 tokens/s', pi: '<5 tokens/s', jetson: '15 tokens/s' },
+            { label: "Price", ours: "$199", pi: "$120", jetson: "$249" },
+            { label: "RAM", ours: "24GB/40GB", pi: "16GB", jetson: "8GB" },
+            {
+              label: "CPU",
+              ours: "Cortex-A53",
+              pi: "Cortex-A72",
+              jetson: "Cortex-A78",
+            },
+            {
+              label: "AI Engine",
+              ours: "Optimized Accelerator on FPGA",
+              pi: "Neon SIMD Instructions",
+              jetson: "Cuda/Tensor Core",
+            },
+            { label: "Power", ours: "<10W", pi: "5-12 W", jetson: "7-25" },
+            {
+              label: "LLM decode Performance",
+              ours: "15 tokens/s",
+              pi: "<5 tokens/s",
+              jetson: "15 tokens/s",
+            },
           ].map((row, index) => (
-            <div key={row.label} className={`grid grid-cols-4 ${index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}`}>
+            <div
+              key={row.label}
+              className={`grid grid-cols-4 ${
+                index % 2 === 0 ? "bg-gray-50" : "bg-white"
+              }`}
+            >
               <div className="p-4 font-medium text-gray-900 border-r border-gray-200">
                 {row.label}
               </div>
-              <div 
-                className="p-4 text-center font-medium" 
-                style={{ backgroundColor: '#F0EEF5', color: '#6750A4' }}
+              <div
+                className="p-4 text-center font-medium"
+                style={{ backgroundColor: "#F0EEF5", color: "#6750A4" }}
               >
                 {row.ours}
               </div>
@@ -319,8 +384,8 @@ export function Technology() {
         </div>
 
         <div className="text-center mt-8">
-          <Button 
-            onClick={() => navigate('/usecases')}
+          <Button
+            onClick={() => navigate("/usecases")}
             className="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3"
           >
             View use cases
@@ -330,26 +395,31 @@ export function Technology() {
 
       {/* Device Layout Section */}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
-        <h2 className="text-3xl font-semibold text-purple-600 mb-8">The device layout plan</h2>
-        
+        <h2 className="text-3xl font-semibold text-purple-600 mb-8">
+          The device layout plan
+        </h2>
+
         <div className="bg-white rounded-2xl shadow-xl p-8 text-center">
           <div className="relative max-w-4xl mx-auto">
-             <img 
-               src="/assets/chips.png" 
-               alt="Device Layout Plan" 
-               className="w-full h-auto rounded-lg shadow-lg"
-               onError={(e) => {
-                 console.error('Chips image failed to load')
-                 e.currentTarget.style.display = 'none'
-               }}
-             />
+            <img
+              src="/assets/chips.png"
+              alt="Device Layout Plan"
+              className="w-full h-auto rounded-lg shadow-lg"
+              onError={(e) => {
+                console.error("Chips image failed to load");
+                e.currentTarget.style.display = "none";
+              }}
+            />
           </div>
-          
+
           <div className="flex justify-center space-x-4 mt-8">
             <Button className="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2">
               Get your device
             </Button>
-            <Button variant="outline" className="border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-2">
+            <Button
+              variant="outline"
+              className="border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-2"
+            >
               View use cases
             </Button>
           </div>
@@ -360,5 +430,5 @@ export function Technology() {
         </p>
       </div>
     </div>
-  )
+  );
 }

software_implementation.tex

@@ -0,0 +1,11 @@
+\section{Demo Overview}
+
+We demonstrate a complete web-based platform that enables non-experts to personalize, test, and deploy LLM agents to edge devices. Our live demo showcases three key capabilities: (1) \textit{Interactive Model Tuning} - users adjust parameters and prompts in real-time using intuitive sliders and text editors, (2) \textit{Scenario-Based Agent Creation} - pre-built templates transform base models into specialized assistants (outdoor rescue, healthcare companion, AI tutor), and (3) \textit{Seamless Edge Deployment} - one-click transfer of configured agents to FPGA hardware for offline operation.
+
+The system architecture combines a React frontend with FastAPI backend, featuring hybrid inference that intelligently routes between local FPGA acceleration and cloud APIs.
+
+\textbf{Frontend Technology Stack:} Built with React 18 and TypeScript for type-safe development, using Vite as the modern build system for fast development and optimized production builds. The UI implementation follows shadcn/ui design system, combining Radix UI primitives (alert-dialog, select, slider, tabs) with Tailwind CSS 3.3.0 for accessible, consistent components. The component architecture uses class-variance-authority for variant management, clsx and tailwind-merge for style composition, and Lucide React for iconography. State management uses React hooks with localStorage persistence via a custom ChatStorageManager. The chat interface integrates Vercel AI SDK for streaming responses, with react-markdown for rendering formatted content. Navigation is handled by React Router DOM 6.15.0 with nested routing structure.
+
+\textbf{Backend Technology Stack:} Implemented with FastAPI and Python 3.11+, providing async request handling and automatic OpenAPI documentation. Model inference combines HuggingFace Transformers for local models with OpenAI-compatible API clients for cloud models. The RAG system uses LangChain for document processing (PDF, DOCX, TXT, MD via pypdf, python-docx, unstructured), FAISS for vector storage, and sentence-transformers (all-MiniLM-L6-v2) for embeddings. Data validation uses Pydantic models with automatic serialization. The system supports dynamic model loading with differnt quantization settings, torch precision and device mapping.
+
+We containerize the entire platform using Docker, enabling consistent deployment across diverse environments. The system is successfully deployed on Hugging Face Spaces with automatic port detection (7860) and frontend building. Key technical innovations include a modular assistant framework defined in TypeScript interfaces, environment-agnostic deployment that automatically adapts to different hosting platforms, and seamless integration between React components and FastAPI endpoints through RESTful APIs.

static/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Edge LLM</title>
-    <script type="module" crossorigin src="/assets/index-ce47adf7.js"></script>
+    <script type="module" crossorigin src="/assets/index-af83f62d.js"></script>
     <link rel="stylesheet" href="/assets/index-8f20e118.css">
   </head>
   <body>