fixed width behavior and made session list cleaner

Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>

llama_stack/ui/app/api/fetch-url/route.ts

@@ -0,0 +1,58 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { url } = await request.json();
+
+    if (!url || typeof url !== 'string') {
+      return NextResponse.json(
+        { error: 'URL is required' },
+        { status: 400 }
+      );
+    }
+
+    // Fetch the URL content
+    const response = await fetch(url, {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
+      }
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const contentType = response.headers.get('content-type') || '';
+    let content: string;
+
+    if (contentType.includes('application/json')) {
+      const json = await response.json();
+      content = JSON.stringify(json, null, 2);
+    } else if (contentType.includes('text/html')) {
+      const html = await response.text();
+      // Basic HTML to text conversion - remove tags and decode entities
+      content = html
+        .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+        .replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '')
+        .replace(/<[^>]*>/g, '')
+        .replace(/&nbsp;/g, ' ')
+        .replace(/&amp;/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'")
+        .replace(/\s+/g, ' ')
+        .trim();
+    } else {
+      content = await response.text();
+    }
+
+    return NextResponse.json({ content });
+  } catch (error) {
+    console.error('Error fetching URL:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch URL content' },
+      { status: 500 }
+    );
+  }
+}

llama_stack/ui/app/chat-playground/page.tsx

@@ -17,24 +17,52 @@ import type { CompletionCreateParams } from "llama-stack-client/resources/chat/c
 import type { Model } from "llama-stack-client/resources/models";
 import type { VectorDBListResponse } from "llama-stack-client/resources/vector-dbs";
 import { VectorDbManager } from "@/components/vector-db/vector-db-manager";
+import { SessionManager, SessionUtils } from "@/components/chat-playground/session-manager";
+
+interface ChatSession {
+  id: string;
+  name: string;
+  messages: Message[];
+  selectedModel: string;
+  selectedVectorDb: string;
+  createdAt: number;
+  updatedAt: number;
+}
 
 export default function ChatPlaygroundPage() {
-  const [messages, setMessages] = useState<Message[]>([]);
+  const [currentSession, setCurrentSession] = useState<ChatSession | null>(null);
   const [input, setInput] = useState("");
   const [isGenerating, setIsGenerating] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [models, setModels] = useState<Model[]>([]);
-  const [selectedModel, setSelectedModel] = useState<string>("");
   const [modelsLoading, setModelsLoading] = useState(true);
   const [modelsError, setModelsError] = useState<string | null>(null);
   const [vectorDbs, setVectorDbs] = useState<VectorDBListResponse>([]);
-  const [selectedVectorDb, setSelectedVectorDb] = useState<string>("");
   const [vectorDbsLoading, setVectorDbsLoading] = useState(true);
   const [vectorDbsError, setVectorDbsError] = useState<string | null>(null);
   const client = useAuthClient();
 
   const isModelsLoading = modelsLoading ?? true;
 
+  // Load current session on mount
+  useEffect(() => {
+    const savedSession = SessionUtils.loadCurrentSession();
+    if (savedSession) {
+      setCurrentSession(savedSession);
+    } else {
+      // Create default session if none exists - will be updated with model when models load
+      const defaultSession = SessionUtils.createDefaultSession();
+      setCurrentSession(defaultSession);
+      SessionUtils.saveCurrentSession(defaultSession);
+    }
+  }, []);
+
+  // Save session when it changes
+  useEffect(() => {
+    if (currentSession) {
+      SessionUtils.saveCurrentSession(currentSession);
+    }
+  }, [currentSession]);
 
   useEffect(() => {
     const fetchModels = async () => {
@@ -44,8 +72,8 @@ export default function ChatPlaygroundPage() {
         const modelList = await client.models.list();
         const llmModels = modelList.filter(model => model.model_type === 'llm');
         setModels(llmModels);
-        if (llmModels.length > 0) {
+        if (llmModels.length > 0 && currentSession && !currentSession.selectedModel) {
-          setSelectedModel(llmModels[0].identifier);
+          setCurrentSession(prev => prev ? { ...prev, selectedModel: llmModels[0].identifier } : null);
         }
       } catch (err) {
         console.error("Error fetching models:", err);
@@ -95,7 +123,7 @@ export default function ChatPlaygroundPage() {
 
 const handleSubmit = async (event?: { preventDefault?: () => void }) => {
   event?.preventDefault?.();
-  if (!input.trim()) return;
+  if (!input.trim() || !currentSession || !currentSession.selectedModel) return;
 
   // Add user message to chat
   const userMessage: Message = {
@@ -105,7 +133,11 @@ const handleSubmit = async (event?: { preventDefault?: () => void }) => {
     createdAt: new Date(),
   };
 
-  setMessages(prev => [...prev, userMessage]);
+  setCurrentSession(prev => prev ? {
+    ...prev,
+    messages: [...prev.messages, userMessage],
+    updatedAt: Date.now()
+  } : null);
   setInput("");
 
   // Use the helper function with the content
@@ -118,26 +150,26 @@ const handleSubmitWithContent = async (content: string) => {
 
   try {
     let enhancedContent = content;
-    
+
     // If a vector DB is selected, query for relevant context
-    if (selectedVectorDb && selectedVectorDb !== "none") {
+    if (currentSession?.selectedVectorDb && currentSession.selectedVectorDb !== "none") {
       try {
         const vectorResponse = await client.vectorIo.query({
           query: content,
-          vector_db_id: selectedVectorDb,
+          vector_db_id: currentSession.selectedVectorDb,
         });
-        
+
         if (vectorResponse.chunks && vectorResponse.chunks.length > 0) {
           const context = vectorResponse.chunks
             .map(chunk => {
               // Extract text content from the chunk
-              const chunkContent = typeof chunk.content === 'string' 
+              const chunkContent = typeof chunk.content === 'string'
-                ? chunk.content 
+                ? chunk.content
                 : extractTextContent(chunk.content);
               return chunkContent;
             })
             .join('\n\n');
-          
+
           enhancedContent = `Please answer the following query using the context below.\n\nCONTEXT:\n${context}\n\nQUERY:\n${content}`;
         }
       } catch (vectorErr) {
@@ -147,7 +179,7 @@ const handleSubmitWithContent = async (content: string) => {
     }
 
     const messageParams: CompletionCreateParams["messages"] = [
-      ...messages.map(msg => {
+      ...(currentSession?.messages || []).map(msg => {
         const msgContent = typeof msg.content === 'string' ? msg.content : extractTextContent(msg.content);
         if (msg.role === "user") {
           return { role: "user" as const, content: msgContent };
@@ -161,7 +193,7 @@ const handleSubmitWithContent = async (content: string) => {
     ];
 
     const response = await client.chat.completions.create({
-      model: selectedModel,
+      model: currentSession?.selectedModel || "",
       messages: messageParams,
       stream: true,
     });
@@ -173,7 +205,12 @@ const handleSubmitWithContent = async (content: string) => {
       createdAt: new Date(),
     };
 
-    setMessages(prev => [...prev, assistantMessage]);
+    setCurrentSession(prev => prev ? {
+      ...prev,
+      messages: [...prev.messages, assistantMessage],
+      updatedAt: Date.now()
+    } : null);
+
     let fullContent = "";
     for await (const chunk of response) {
       if (chunk.choices && chunk.choices[0]?.delta?.content) {
@@ -181,13 +218,14 @@ const handleSubmitWithContent = async (content: string) => {
         fullContent += deltaContent;
 
         flushSync(() => {
-          setMessages(prev => {
+          setCurrentSession(prev => {
-            const newMessages = [...prev];
+            if (!prev) return null;
+            const newMessages = [...prev.messages];
             const lastMessage = newMessages[newMessages.length - 1];
             if (lastMessage.role === "assistant") {
               lastMessage.content = fullContent;
             }
-            return newMessages;
+            return { ...prev, messages: newMessages, updatedAt: Date.now() };
           });
         });
       }
@@ -195,7 +233,11 @@ const handleSubmitWithContent = async (content: string) => {
   } catch (err) {
     console.error("Error sending message:", err);
     setError("Failed to send message. Please try again.");
-    setMessages(prev => prev.slice(0, -1));
+    setCurrentSession(prev => prev ? {
+      ...prev,
+      messages: prev.messages.slice(0, -1),
+      updatedAt: Date.now()
+    } : null);
   } finally {
     setIsGenerating(false);
   }
@@ -213,15 +255,41 @@ const handleSubmitWithContent = async (content: string) => {
       content: message.content,
       createdAt: new Date(),
     };
-    setMessages(prev => [...prev, newMessage])
+    setCurrentSession(prev => prev ? {
+      ...prev,
+      messages: [...prev.messages, newMessage],
+      updatedAt: Date.now()
+    } : null);
     handleSubmitWithContent(newMessage.content);
   };
 
   const clearChat = () => {
-    setMessages([]);
+    setCurrentSession(prev => prev ? {
+      ...prev,
+      messages: [],
+      updatedAt: Date.now()
+    } : null);
     setError(null);
   };
 
+  const handleSessionChange = (session: ChatSession) => {
+    setCurrentSession(session);
+    setError(null);
+  };
+
+  const handleNewSession = () => {
+    const defaultModel = currentSession?.selectedModel || (models.length > 0 ? models[0].identifier : "");
+    const defaultVectorDb = currentSession?.selectedVectorDb || "";
+
+    const newSession = {
+      ...SessionUtils.createDefaultSession(),
+      selectedModel: defaultModel,
+      selectedVectorDb: defaultVectorDb,
+    };
+    setCurrentSession(newSession);
+    SessionUtils.saveCurrentSession(newSession);
+  };
+
   const refreshVectorDbs = async () => {
     try {
       setVectorDbsLoading(true);
@@ -237,43 +305,70 @@ const handleSubmitWithContent = async (content: string) => {
   };
 
   return (
-    <div className="flex flex-col h-full max-w-4xl mx-auto">
+    <div className="flex flex-col h-full w-full max-w-4xl mx-auto">
-      <div className="mb-4 flex justify-between items-center">
+      <div className="mb-4 space-y-3">
-        <h1 className="text-2xl font-bold">Chat Playground</h1>
+        <div>
-        <div className="flex gap-2">
+          <h1 className="text-2xl font-bold">Chat Playground</h1>
-          <Select value={selectedModel} onValueChange={setSelectedModel} disabled={isModelsLoading || isGenerating}>
+        </div>
-            <SelectTrigger className="w-[180px]">
+
-              <SelectValue placeholder={isModelsLoading ? "Loading models..." : "Select Model"} />
+        <div className="flex justify-between items-center">
-            </SelectTrigger>
+          <SessionManager
-            <SelectContent>
+            currentSession={currentSession}
-              {models.map((model) => (
+            onSessionChange={handleSessionChange}
-                <SelectItem key={model.identifier} value={model.identifier}>
+            onNewSession={handleNewSession}
-                  {model.identifier}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Select value={selectedVectorDb} onValueChange={setSelectedVectorDb} disabled={vectorDbsLoading || isGenerating}>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder={vectorDbsLoading ? "Loading vector DBs..." : "Select Vector DB (Optional)"} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="none">None (No RAG)</SelectItem>
-              {vectorDbs.map((vectorDb) => (
-                <SelectItem key={vectorDb.identifier} value={vectorDb.identifier}>
-                  {vectorDb.identifier}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <VectorDbManager 
-            client={client}
-            onVectorDbCreated={refreshVectorDbs}
           />
           <Button variant="outline" onClick={clearChat} disabled={isGenerating}>
             Clear Chat
           </Button>
         </div>
+
+        <div className="flex flex-wrap gap-2 items-center">
+          <div className="flex items-center gap-1">
+            <span className="text-sm font-medium text-gray-600">Model:</span>
+            <Select
+              value={currentSession?.selectedModel || ""}
+              onValueChange={(value) => setCurrentSession(prev => prev ? { ...prev, selectedModel: value, updatedAt: Date.now() } : null)}
+              disabled={isModelsLoading || isGenerating}
+            >
+              <SelectTrigger className="w-[160px]">
+                <SelectValue placeholder={isModelsLoading ? "Loading..." : "Select Model"} />
+              </SelectTrigger>
+              <SelectContent>
+                {models.map((model) => (
+                  <SelectItem key={model.identifier} value={model.identifier}>
+                    {model.identifier}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center gap-1">
+            <span className="text-sm font-medium text-gray-600">Vector DB:</span>
+            <Select
+              value={currentSession?.selectedVectorDb || ""}
+              onValueChange={(value) => setCurrentSession(prev => prev ? { ...prev, selectedVectorDb: value, updatedAt: Date.now() } : null)}
+              disabled={vectorDbsLoading || isGenerating}
+            >
+              <SelectTrigger className="w-[160px]">
+                <SelectValue placeholder={vectorDbsLoading ? "Loading..." : "None"} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">None</SelectItem>
+                {vectorDbs.map((vectorDb) => (
+                  <SelectItem key={vectorDb.identifier} value={vectorDb.identifier}>
+                    {vectorDb.identifier}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <VectorDbManager
+            client={client}
+            onVectorDbCreated={refreshVectorDbs}
+          />
+        </div>
       </div>
 
       {modelsError && (
@@ -296,14 +391,14 @@ const handleSubmitWithContent = async (content: string) => {
 
       <Chat
         className="flex-1"
-        messages={messages}
+        messages={currentSession?.messages || []}
         handleSubmit={handleSubmit}
         input={input}
         handleInputChange={handleInputChange}
         isGenerating={isGenerating}
         append={append}
         suggestions={suggestions}
-        setMessages={setMessages}
+        setMessages={(messages) => setCurrentSession(prev => prev ? { ...prev, messages, updatedAt: Date.now() } : null)}
       />
     </div>
   );

llama_stack/ui/components/chat-playground/chat-message.tsx

@@ -161,10 +161,10 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
 
   const isUser = role === "user"
 
-  const formattedTime = createdAt?.toLocaleTimeString("en-US", {
+  const formattedTime = createdAt ? new Date(createdAt).toLocaleTimeString("en-US", {
     hour: "2-digit",
     minute: "2-digit",
-  })
+  }) : undefined
 
   if (isUser) {
     return (
@@ -185,7 +185,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
 
         {showTimeStamp && createdAt ? (
           <time
-            dateTime={createdAt.toISOString()}
+            dateTime={new Date(createdAt).toISOString()}
             className={cn(
               "mt-1 block px-1 text-xs opacity-50",
               animation !== "none" && "duration-500 animate-in fade-in-0"
@@ -220,7 +220,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
 
             {showTimeStamp && createdAt ? (
               <time
-                dateTime={createdAt.toISOString()}
+                dateTime={new Date(createdAt).toISOString()}
                 className={cn(
                   "mt-1 block px-1 text-xs opacity-50",
                   animation !== "none" && "duration-500 animate-in fade-in-0"
@@ -262,7 +262,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
 
       {showTimeStamp && createdAt ? (
         <time
-          dateTime={createdAt.toISOString()}
+          dateTime={new Date(createdAt).toISOString()}
           className={cn(
             "mt-1 block px-1 text-xs opacity-50",
             animation !== "none" && "duration-500 animate-in fade-in-0"

llama_stack/ui/components/chat-playground/chat.tsx

@@ -196,11 +196,13 @@ export function Chat({
       <div className="flex-1 flex flex-col">
         {isEmpty && append && suggestions ? (
           <div className="flex-1 flex items-center justify-center">
-            <PromptSuggestions
+            <div className="max-w-4xl mx-auto w-full">
-              label="Try these prompts ✨"
+              <PromptSuggestions
-              append={append}
+                label="Try these prompts ✨"
-              suggestions={suggestions}
+                append={append}
-            />
+                suggestions={suggestions}
+              />
+            </div>
           </div>
         ) : null}
 
@@ -262,7 +264,7 @@ export function ChatMessages({
       onScroll={handleScroll}
       onTouchStart={handleTouchStart}
     >
-      <div className="max-w-full [grid-column:1/1] [grid-row:1/1]">
+      <div className="max-w-4xl mx-auto w-full [grid-column:1/1] [grid-row:1/1]">
         {children}
       </div>
 

llama_stack/ui/components/chat-playground/session-manager.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Card } from "@/components/ui/card";
+import type { Message } from "@/components/chat-playground/chat-message";
+
+interface ChatSession {
+  id: string;
+  name: string;
+  messages: Message[];
+  selectedModel: string;
+  selectedVectorDb: string;
+  createdAt: number;
+  updatedAt: number;
+}
+
+interface SessionManagerProps {
+  currentSession: ChatSession | null;
+  onSessionChange: (session: ChatSession) => void;
+  onNewSession: () => void;
+}
+
+const SESSIONS_STORAGE_KEY = 'chat-playground-sessions';
+const CURRENT_SESSION_KEY = 'chat-playground-current-session';
+
+export function SessionManager({ currentSession, onSessionChange, onNewSession }: SessionManagerProps) {
+  const [sessions, setSessions] = useState<ChatSession[]>([]);
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [newSessionName, setNewSessionName] = useState("");
+
+  // Load sessions from localStorage
+  useEffect(() => {
+    const savedSessions = localStorage.getItem(SESSIONS_STORAGE_KEY);
+    if (savedSessions) {
+      try {
+        setSessions(JSON.parse(savedSessions));
+      } catch (err) {
+        console.error("Error loading sessions:", err);
+      }
+    }
+  }, []);
+
+  // Save sessions to localStorage
+  const saveSessions = (updatedSessions: ChatSession[]) => {
+    setSessions(updatedSessions);
+    localStorage.setItem(SESSIONS_STORAGE_KEY, JSON.stringify(updatedSessions));
+  };
+
+  const createNewSession = () => {
+    const sessionName = newSessionName.trim() || `Session ${sessions.length + 1}`;
+    const newSession: ChatSession = {
+      id: Date.now().toString(),
+      name: sessionName,
+      messages: [],
+      selectedModel: currentSession?.selectedModel || "",
+      selectedVectorDb: currentSession?.selectedVectorDb || "",
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    };
+
+    const updatedSessions = [...sessions, newSession];
+    saveSessions(updatedSessions);
+
+    localStorage.setItem(CURRENT_SESSION_KEY, newSession.id);
+    onSessionChange(newSession);
+
+    setNewSessionName("");
+    setShowCreateForm(false);
+  };
+
+  const switchToSession = (sessionId: string) => {
+    const session = sessions.find(s => s.id === sessionId);
+    if (session) {
+      localStorage.setItem(CURRENT_SESSION_KEY, sessionId);
+      onSessionChange(session);
+    }
+  };
+
+  // These functions are available for future use but not currently implemented in UI
+  // const deleteSession = (sessionId: string) => {
+  //   const updatedSessions = sessions.filter(s => s.id !== sessionId);
+  //   saveSessions(updatedSessions);
+
+  //   // If we deleted the current session, switch to the first available or create new
+  //   if (currentSession?.id === sessionId) {
+  //     if (updatedSessions.length > 0) {
+  //       switchToSession(updatedSessions[0].id);
+  //     } else {
+  //       localStorage.removeItem(CURRENT_SESSION_KEY);
+  //       onNewSession();
+  //     }
+  //   }
+  // };
+
+  // const renameSession = (sessionId: string, newName: string) => {
+  //   const updatedSessions = sessions.map(session =>
+  //     session.id === sessionId
+  //       ? { ...session, name: newName, updatedAt: Date.now() }
+  //       : session
+  //   );
+  //   saveSessions(updatedSessions);
+
+  //   if (currentSession?.id === sessionId) {
+  //     onSessionChange({ ...currentSession, name: newName });
+  //   }
+  // };
+
+  // Update current session in the sessions list
+  useEffect(() => {
+    if (currentSession) {
+      const updatedSessions = sessions.map(session =>
+        session.id === currentSession.id ? currentSession : session
+      );
+
+      // Add session if it doesn't exist
+      if (!sessions.find(s => s.id === currentSession.id)) {
+        updatedSessions.push(currentSession);
+      }
+
+      saveSessions(updatedSessions);
+    }
+  }, [currentSession]);
+
+  return (
+    <div className="relative">
+      <div className="flex items-center gap-2">
+        <Select
+          value={currentSession?.id || ""}
+          onValueChange={switchToSession}
+        >
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder="Select Session" />
+          </SelectTrigger>
+          <SelectContent>
+            {sessions.map((session) => (
+              <SelectItem key={session.id} value={session.id}>
+                {session.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Button
+          onClick={() => setShowCreateForm(true)}
+          variant="outline"
+          size="sm"
+        >
+          + New
+        </Button>
+      </div>
+
+      {showCreateForm && (
+        <Card className="absolute top-full left-0 mt-2 p-4 space-y-3 w-80 z-50 bg-background border shadow-lg">
+          <h3 className="text-md font-semibold">Create New Session</h3>
+
+          <Input
+            value={newSessionName}
+            onChange={(e) => setNewSessionName(e.target.value)}
+            placeholder="Session name (optional)"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                createNewSession();
+              } else if (e.key === 'Escape') {
+                setShowCreateForm(false);
+                setNewSessionName("");
+              }
+            }}
+          />
+
+          <div className="flex gap-2">
+            <Button onClick={createNewSession} className="flex-1">
+              Create
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setShowCreateForm(false);
+                setNewSessionName("");
+              }}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+          </div>
+        </Card>
+      )}
+
+      {currentSession && sessions.length > 1 && (
+        <div className="mt-2 text-xs text-gray-500">
+          {sessions.length} sessions • Current: {currentSession.name}
+          {currentSession.messages.length > 0 && ` • ${currentSession.messages.length} messages`}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Export utility functions for session management
+export const SessionUtils = {
+  loadCurrentSession: (): ChatSession | null => {
+    const currentSessionId = localStorage.getItem(CURRENT_SESSION_KEY);
+    const savedSessions = localStorage.getItem(SESSIONS_STORAGE_KEY);
+
+    if (currentSessionId && savedSessions) {
+      try {
+        const sessions: ChatSession[] = JSON.parse(savedSessions);
+        return sessions.find(s => s.id === currentSessionId) || null;
+      } catch (err) {
+        console.error("Error loading current session:", err);
+      }
+    }
+    return null;
+  },
+
+  saveCurrentSession: (session: ChatSession) => {
+    const savedSessions = localStorage.getItem(SESSIONS_STORAGE_KEY);
+    let sessions: ChatSession[] = [];
+
+    if (savedSessions) {
+      try {
+        sessions = JSON.parse(savedSessions);
+      } catch (err) {
+        console.error("Error parsing sessions:", err);
+      }
+    }
+
+    const existingIndex = sessions.findIndex(s => s.id === session.id);
+    if (existingIndex >= 0) {
+      sessions[existingIndex] = { ...session, updatedAt: Date.now() };
+    } else {
+      sessions.push({ ...session, createdAt: Date.now(), updatedAt: Date.now() });
+    }
+
+    localStorage.setItem(SESSIONS_STORAGE_KEY, JSON.stringify(sessions));
+    localStorage.setItem(CURRENT_SESSION_KEY, session.id);
+  },
+
+  createDefaultSession: (inheritModel?: string, inheritVectorDb?: string): ChatSession => ({
+    id: Date.now().toString(),
+    name: "Default Session",
+    messages: [],
+    selectedModel: inheritModel || "",
+    selectedVectorDb: inheritVectorDb || "",
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+  }),
+};

llama_stack/ui/components/vector-db/vector-db-manager.tsx

@@ -0,0 +1,380 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Card } from "@/components/ui/card";
+import type LlamaStackClient from "llama-stack-client";
+
+interface VectorDbManagerProps {
+  client: LlamaStackClient;
+  onVectorDbCreated: () => void;
+}
+
+interface UploadState {
+  isUploading: boolean;
+  uploadProgress: string;
+  uploadError: string | null;
+}
+
+export function VectorDbManager({ client, onVectorDbCreated }: VectorDbManagerProps) {
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+  const [formData, setFormData] = useState({
+    vectorDbId: "",
+    embeddingModel: "all-MiniLM-L6-v2",
+    embeddingDimension: "384",
+  });
+  const [uploadState, setUploadState] = useState<UploadState>({
+    isUploading: false,
+    uploadProgress: "",
+    uploadError: null,
+  });
+  const [urlInput, setUrlInput] = useState("");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleCreateVectorDb = async () => {
+    if (!formData.vectorDbId.trim()) {
+      setCreateError("Vector DB ID is required");
+      return;
+    }
+
+    setIsCreating(true);
+    setCreateError(null);
+
+    try {
+      // Get available providers to find a vector_io provider
+      const providers = await client.providers.list();
+      const vectorIoProvider = providers.find(p => p.api === "vector_io");
+
+      if (!vectorIoProvider) {
+        throw new Error("No vector_io provider found");
+      }
+
+      await client.vectorDBs.register({
+        vector_db_id: formData.vectorDbId.trim(),
+        embedding_model: formData.embeddingModel,
+        embedding_dimension: parseInt(formData.embeddingDimension),
+        provider_id: vectorIoProvider.provider_id,
+      });
+
+      // Reset form and close
+      setFormData({
+        vectorDbId: "",
+        embeddingModel: "all-MiniLM-L6-v2",
+        embeddingDimension: "384",
+      });
+      setShowCreateForm(false);
+
+      // Refresh the vector DB list
+      onVectorDbCreated();
+    } catch (err) {
+      console.error("Error creating vector DB:", err);
+      setCreateError(err instanceof Error ? err.message : "Failed to create vector database");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setShowCreateForm(false);
+    setCreateError(null);
+    setFormData({
+      vectorDbId: "",
+      embeddingModel: "all-MiniLM-L6-v2",
+      embeddingDimension: "384",
+    });
+    setUploadState({
+      isUploading: false,
+      uploadProgress: "",
+      uploadError: null,
+    });
+    setUrlInput("");
+  };
+
+  const chunkText = (text: string, chunkSize: number = 512): string[] => {
+    const words = text.split(/\s+/);
+    const chunks: string[] = [];
+
+    for (let i = 0; i < words.length; i += chunkSize) {
+      chunks.push(words.slice(i, i + chunkSize).join(' '));
+    }
+
+    return chunks;
+  };
+
+  const ingestDocument = async (content: string, documentId: string, vectorDbId: string) => {
+    const chunks = chunkText(content);
+
+    const vectorChunks = chunks.map((chunk, index) => ({
+      content: chunk,
+      metadata: {
+        document_id: documentId,
+        chunk_index: index,
+        source: documentId,
+      },
+    }));
+
+    await client.vectorIo.insert({
+      vector_db_id: vectorDbId,
+      chunks: vectorChunks,
+    });
+  };
+
+  const handleFileUpload = async (vectorDbId: string) => {
+    if (!fileInputRef.current?.files?.length) return;
+
+    const file = fileInputRef.current.files[0];
+    setUploadState({
+      isUploading: true,
+      uploadProgress: `Reading ${file.name}...`,
+      uploadError: null,
+    });
+
+    try {
+      const text = await file.text();
+
+      setUploadState({
+        isUploading: true,
+        uploadProgress: `Ingesting ${file.name} into vector database...`,
+        uploadError: null,
+      });
+
+      await ingestDocument(text, file.name, vectorDbId);
+
+      setUploadState({
+        isUploading: false,
+        uploadProgress: `Successfully ingested ${file.name}`,
+        uploadError: null,
+      });
+
+      // Clear file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    } catch (err) {
+      console.error("Error uploading file:", err);
+      setUploadState({
+        isUploading: false,
+        uploadProgress: "",
+        uploadError: err instanceof Error ? err.message : "Failed to upload file",
+      });
+    }
+  };
+
+  const handleUrlUpload = async (vectorDbId: string) => {
+    if (!urlInput.trim()) return;
+
+    setUploadState({
+      isUploading: true,
+      uploadProgress: `Fetching content from ${urlInput}...`,
+      uploadError: null,
+    });
+
+    try {
+      const response = await fetch(`/api/fetch-url`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url: urlInput }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch URL: ${response.statusText}`);
+      }
+
+      const { content } = await response.json();
+
+      setUploadState({
+        isUploading: true,
+        uploadProgress: `Ingesting content from ${urlInput}...`,
+        uploadError: null,
+      });
+
+      await ingestDocument(content, urlInput, vectorDbId);
+
+      setUploadState({
+        isUploading: false,
+        uploadProgress: `Successfully ingested content from ${urlInput}`,
+        uploadError: null,
+      });
+
+      setUrlInput("");
+    } catch (err) {
+      console.error("Error uploading URL:", err);
+      setUploadState({
+        isUploading: false,
+        uploadProgress: "",
+        uploadError: err instanceof Error ? err.message : "Failed to fetch URL content",
+      });
+    }
+  };
+
+  return (
+    <div className="relative">
+      {!showCreateForm ? (
+        <Button
+          onClick={() => setShowCreateForm(true)}
+          variant="outline"
+          size="default"
+        >
+          + Vector DB
+        </Button>
+      ) : (
+        <Card className="absolute top-full right-0 mt-2 p-4 space-y-4 w-96 z-50 bg-background border shadow-lg">
+          <h3 className="text-lg font-semibold">Create Vector Database</h3>
+
+          {createError && (
+            <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+              <p className="text-destructive text-sm">{createError}</p>
+            </div>
+          )}
+
+          {uploadState.uploadError && (
+            <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+              <p className="text-destructive text-sm">{uploadState.uploadError}</p>
+            </div>
+          )}
+
+          {uploadState.uploadProgress && (
+            <div className="p-3 bg-blue-50 border border-blue-200 rounded-md">
+              <p className="text-blue-700 text-sm">{uploadState.uploadProgress}</p>
+            </div>
+          )}
+
+          <div className="space-y-3">
+            <div>
+              <label className="text-sm font-medium block mb-1">
+                Vector DB ID *
+              </label>
+              <Input
+                value={formData.vectorDbId}
+                onChange={(e) => setFormData({ ...formData, vectorDbId: e.target.value })}
+                placeholder="Enter unique vector DB identifier"
+                disabled={isCreating || uploadState.isUploading}
+              />
+            </div>
+
+            <div>
+              <label className="text-sm font-medium block mb-1">
+                Embedding Model
+              </label>
+              <Select
+                value={formData.embeddingModel}
+                onValueChange={(value) => setFormData({ ...formData, embeddingModel: value })}
+                disabled={isCreating || uploadState.isUploading}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all-MiniLM-L6-v2">all-MiniLM-L6-v2</SelectItem>
+                  <SelectItem value="text-embedding-ada-002">text-embedding-ada-002</SelectItem>
+                  <SelectItem value="text-embedding-3-small">text-embedding-3-small</SelectItem>
+                  <SelectItem value="text-embedding-3-large">text-embedding-3-large</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div>
+              <label className="text-sm font-medium block mb-1">
+                Embedding Dimension
+              </label>
+              <Select
+                value={formData.embeddingDimension}
+                onValueChange={(value) => setFormData({ ...formData, embeddingDimension: value })}
+                disabled={isCreating || uploadState.isUploading}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="384">384 (all-MiniLM-L6-v2)</SelectItem>
+                  <SelectItem value="1536">1536 (ada-002, 3-small)</SelectItem>
+                  <SelectItem value="3072">3072 (3-large)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <Button
+              onClick={handleCreateVectorDb}
+              disabled={isCreating || uploadState.isUploading}
+              className="flex-1"
+            >
+              {isCreating ? "Creating..." : "Create"}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={handleCancel}
+              disabled={isCreating || uploadState.isUploading}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+          </div>
+
+          {/* Document Upload Section */}
+          <div className="border-t pt-4 space-y-3">
+            <h4 className="text-md font-medium">Upload Documents (Optional)</h4>
+
+            <div>
+              <label className="text-sm font-medium block mb-1">
+                Upload File (TXT, PDF)
+              </label>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".txt,.pdf"
+                className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
+                disabled={!formData.vectorDbId || uploadState.isUploading}
+              />
+              <Button
+                onClick={() => handleFileUpload(formData.vectorDbId)}
+                disabled={!formData.vectorDbId || !fileInputRef.current?.files?.length || uploadState.isUploading}
+                className="mt-2 w-full"
+                variant="outline"
+                size="sm"
+              >
+                {uploadState.isUploading ? "Uploading..." : "Upload File"}
+              </Button>
+            </div>
+
+            <div>
+              <label className="text-sm font-medium block mb-1">
+                Or Enter URL
+              </label>
+              <Input
+                value={urlInput}
+                onChange={(e) => setUrlInput(e.target.value)}
+                placeholder="https://example.com/article"
+                disabled={!formData.vectorDbId || uploadState.isUploading}
+              />
+              <Button
+                onClick={() => handleUrlUpload(formData.vectorDbId)}
+                disabled={!formData.vectorDbId || !urlInput.trim() || uploadState.isUploading}
+                className="mt-2 w-full"
+                variant="outline"
+                size="sm"
+              >
+                {uploadState.isUploading ? "Fetching..." : "Fetch & Upload"}
+              </Button>
+            </div>
+
+            <p className="text-xs text-gray-500">
+              Note: Create the Vector DB first, then upload documents to it.
+            </p>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}