mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-12-17 22:47:14 +00:00
fixed width behavior and made session list cleaner
Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>
This commit is contained in:
Francisco Javier Arceo
parent
3bfc4488b0
commit
709dd76f74
6 changed files with 878 additions and 92 deletions
|
|
@ -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 (
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -201,11 +201,13 @@ export function Chat({
|
|||
<div className="flex-1 flex flex-col">
|
||||
{isEmpty && append && suggestions ? (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<PromptSuggestions
|
||||
label="Try these prompts ✨"
|
||||
append={append}
|
||||
suggestions={suggestions}
|
||||
/>
|
||||
<div className="max-w-4xl mx-auto w-full">
|
||||
<PromptSuggestions
|
||||
label="Try these prompts ✨"
|
||||
append={append}
|
||||
suggestions={suggestions}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
|
|
@ -267,7 +269,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>
|
||||
|
||||
|
|
|
|||
256
llama_stack/ui/components/chat-playground/session-manager.tsx
Normal file
256
llama_stack/ui/components/chat-playground/session-manager.tsx
Normal file
|
|
@ -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(),
|
||||
}),
|
||||
};
|
||||
380
llama_stack/ui/components/vector-db/vector-db-manager.tsx
Normal file
380
llama_stack/ui/components/vector-db/vector-db-manager.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue