gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Merge branch 'main' into settings-copy

Browse source
This commit is contained in:
Edwin Jose 2025-10-06 18:11:59 -04:00 • committed by GitHub
commit 4b861da83e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 735 additions and 497 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/components/ui/button.tsx
View file

@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react"; import * as React from "react";
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{ {
variants: { variants: {
variant: { variant: {

62
frontend/components/ui/inputs/embedding-model.tsx Normal file
View file

@ -0,0 +1,62 @@
import { ModelOption } from "@/app/api/queries/useGetModelsQuery";
import {
getFallbackModels,
ModelProvider,
} from "@/app/settings/helpers/model-helpers";
import { ModelSelectItems } from "@/app/settings/helpers/model-select-item";
import { LabelWrapper } from "@/components/label-wrapper";
import {
Select,
SelectContent,
SelectTrigger,
SelectValue,
} from "@radix-ui/react-select";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@radix-ui/react-tooltip";
interface EmbeddingModelInputProps {
disabled?: boolean;
value: string;
onChange: (value: string) => void;
modelsData?: {
embedding_models: ModelOption[];
};
currentProvider?: ModelProvider;
}
export const EmbeddingModelInput = ({
disabled,
value,
onChange,
modelsData,
currentProvider = "openai",
}: EmbeddingModelInputProps) => {
return (
<LabelWrapper
helperText="Model used for knowledge ingest and retrieval"
id="embedding-model-select"
label="Embedding model"
>
<Select disabled={disabled} value={value} onValueChange={onChange}>
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>
<SelectTrigger disabled id="embedding-model-select">
<SelectValue placeholder="Select an embedding model" />
</SelectTrigger>
</TooltipTrigger>
<TooltipContent>Locked to keep embeddings consistent</TooltipContent>
</Tooltip>
<SelectContent>
<ModelSelectItems
models={modelsData?.embedding_models}
fallbackModels={getFallbackModels(currentProvider).embedding}
provider={currentProvider}
/>
</SelectContent>
</Select>
</LabelWrapper>
);
};

74
frontend/components/ui/inputs/number-input.tsx Normal file
View file

@ -0,0 +1,74 @@
import { LabelWrapper } from "@/components/label-wrapper";
import { Button } from "../button";
import { Input } from "../input";
import { Minus, Plus } from "lucide-react";
interface NumberInputProps {
id: string;
label: string;
value: number;
onChange: (value: number) => void;
unit: string;
min?: number;
max?: number;
disabled?: boolean;
}
export const NumberInput = ({
id,
label,
value,
onChange,
min = 1,
max,
disabled,
unit,
}: NumberInputProps) => {
return (
<LabelWrapper id={id} label={label}>
<div className="relative">
<Input
id="chunk-size"
type="number"
disabled={disabled}
max={max}
min={min}
value={value}
onChange={(e) => onChange(parseInt(e.target.value) || 0)}
className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/>
<div className="absolute inset-y-0 right-0 top-0 p-[1px] py-[1.5px] flex items-center ">
<span className="text-sm text-placeholder-foreground mr-4 pointer-events-none">
{unit}
</span>
<div className="flex flex-col mt-[2px] mb-[2px]">
<Button
aria-label={`Increase ${label} value`}
className="h-5 rounded-l-none rounded-br-none border-input border-t-transparent border-r-transparent border-b-[0.5px] hover:border-t-[.5px] hover:border-foreground"
variant="outline"
size="iconSm"
onClick={() => onChange(value + 1)}
>
<Plus
className="text-muted-foreground hover:text-foreground"
size={8}
/>
</Button>
<Button
aria-label={`Decrease ${label} value`}
className="h-5 rounded-l-none rounded-tr-none border-input border-b-transparent border-r-transparent hover:border-b-1 hover:border-b-[.5px] hover:border-foreground"
variant="outline"
size="iconSm"
onClick={() => onChange(value - 1)}
>
<Minus
className="text-muted-foreground hover:text-foreground"
size={8}
/>
</Button>
</div>
</div>
</div>
</LabelWrapper>
);
};

13
frontend/src/app/globals.css
View file

@ -351,4 +351,17 @@
.discord-error { .discord-error {
@apply text-xs opacity-70; @apply text-xs opacity-70;
} }
.box-shadow-inner::after {
content: " ";
position: absolute;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
background: linear-gradient(to top, hsl(var(--background)), transparent);
display: block;
width: 100%;
height: 30px;
}
} }

119
frontend/src/app/settings/page.tsx
View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { ArrowUpRight, Loader2, Minus, Plus } from "lucide-react"; import { ArrowUpRight, Loader2, Minus, PlugZap, Plus } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useCallback, useEffect, useState } from "react"; import { Suspense, useCallback, useEffect, useState } from "react";
@ -101,34 +101,6 @@ interface Connection {
created_at: string; created_at: string;
last_sync?: string; last_sync?: string;
} }
const DEFAULT_CONNECTORS: Connector[] = [
{
id: "google_drive",
name: "Google Drive",
description: "Google Drive is not configured.",
icon: <GoogleDriveIcon />,
status: "not_connected",
type: "google_drive",
},
{
id: "one_drive",
name: "OneDrive",
description: "OneDrive is not configured.",
icon: <OneDriveIcon />,
status: "not_connected",
type: "one_drive",
},
{
id: "amazon_s3",
name: "SharePoint",
description: "SharePoint is not configured.",
icon: <SharePointIcon />,
status: "not_connected",
type: "sharepoint",
},
];
function KnowledgeSourcesPage() { function KnowledgeSourcesPage() {
const { isAuthenticated, isNoAuthMode } = useAuth(); const { isAuthenticated, isNoAuthMode } = useAuth();
const { addTask, tasks } = useTask(); const { addTask, tasks } = useTask();
@ -203,7 +175,7 @@ function KnowledgeSourcesPage() {
onSuccess: () => { onSuccess: () => {
console.log("Setting updated successfully"); console.log("Setting updated successfully");
}, },
onError: error => { onError: (error) => {
console.error("Failed to update setting:", error.message); console.error("Failed to update setting:", error.message);
}, },
}); });
@ -304,16 +276,8 @@ function KnowledgeSourcesPage() {
const getConnectorIcon = useCallback((iconName: string) => { const getConnectorIcon = useCallback((iconName: string) => {
const iconMap: { [key: string]: React.ReactElement } = { const iconMap: { [key: string]: React.ReactElement } = {
"google-drive": <GoogleDriveIcon />, "google-drive": <GoogleDriveIcon />,
sharepoint: ( sharepoint: <SharePointIcon />,
<div className="w-8 h-8 bg-blue-700 rounded flex items-center justify-center text-white font-bold leading-none shrink-0"> onedrive: <OneDriveIcon />,
SP
</div>
),
onedrive: (
<div className="w-8 h-8 bg-white border border-gray-300 rounded flex items-center justify-center">
<OneDriveIcon />
</div>
),
}; };
return ( return (
iconMap[iconName] || ( iconMap[iconName] || (
@ -338,14 +302,15 @@ function KnowledgeSourcesPage() {
// Initialize connectors list with metadata from backend // Initialize connectors list with metadata from backend
const initialConnectors = connectorTypes const initialConnectors = connectorTypes
.filter(type => connectorsResult.connectors[type].available) // Only show available connectors .filter((type) => connectorsResult.connectors[type].available) // Only show available connectors
.map(type => ({ .map((type) => ({
id: type, id: type,
name: connectorsResult.connectors[type].name, name: connectorsResult.connectors[type].name,
description: connectorsResult.connectors[type].description, description: connectorsResult.connectors[type].description,
icon: getConnectorIcon(connectorsResult.connectors[type].icon), icon: getConnectorIcon(connectorsResult.connectors[type].icon),
status: "not_connected" as const, status: "not_connected" as const,
type: type, type: type,
available: connectorsResult.connectors[type].available,
})); }));
setConnectors(initialConnectors); setConnectors(initialConnectors);
@ -362,8 +327,8 @@ function KnowledgeSourcesPage() {
); );
const isConnected = activeConnection !== undefined; const isConnected = activeConnection !== undefined;
setConnectors(prev => setConnectors((prev) =>
prev.map(c => prev.map((c) =>
c.type === connectorType c.type === connectorType
? { ? {
...c, ...c,
@ -382,7 +347,7 @@ function KnowledgeSourcesPage() {
const handleConnect = async (connector: Connector) => { const handleConnect = async (connector: Connector) => {
setIsConnecting(connector.id); setIsConnecting(connector.id);
setSyncResults(prev => ({ ...prev, [connector.id]: null })); setSyncResults((prev) => ({ ...prev, [connector.id]: null }));
try { try {
// Use the shared auth callback URL, same as connectors page // Use the shared auth callback URL, same as connectors page
@ -522,9 +487,9 @@ function KnowledgeSourcesPage() {
// Watch for task completions and refresh stats // Watch for task completions and refresh stats
useEffect(() => { useEffect(() => {
// Find newly completed tasks by comparing with previous state // Find newly completed tasks by comparing with previous state
const newlyCompletedTasks = tasks.filter(task => { const newlyCompletedTasks = tasks.filter((task) => {
const wasCompleted = const wasCompleted =
prevTasks.find(prev => prev.task_id === task.task_id)?.status === prevTasks.find((prev) => prev.task_id === task.task_id)?.status ===
"completed"; "completed";
return task.status === "completed" && !wasCompleted; return task.status === "completed" && !wasCompleted;
}); });
@ -578,7 +543,7 @@ function KnowledgeSourcesPage() {
fetch(`/api/reset-flow/retrieval`, { fetch(`/api/reset-flow/retrieval`, {
method: "POST", method: "POST",
}) })
.then(response => { .then((response) => {
if (response.ok) { if (response.ok) {
return response.json(); return response.json();
} }
@ -591,7 +556,7 @@ function KnowledgeSourcesPage() {
handleModelChange(DEFAULT_AGENT_SETTINGS.llm_model); handleModelChange(DEFAULT_AGENT_SETTINGS.llm_model);
closeDialog(); // Close after successful completion closeDialog(); // Close after successful completion
}) })
.catch(error => { .catch((error) => {
console.error("Error restoring retrieval flow:", error); console.error("Error restoring retrieval flow:", error);
closeDialog(); // Close even on error (could show error toast instead) closeDialog(); // Close even on error (could show error toast instead)
}); });
@ -601,7 +566,7 @@ function KnowledgeSourcesPage() {
fetch(`/api/reset-flow/ingest`, { fetch(`/api/reset-flow/ingest`, {
method: "POST", method: "POST",
}) })
.then(response => { .then((response) => {
if (response.ok) { if (response.ok) {
return response.json(); return response.json();
} }
@ -616,7 +581,7 @@ function KnowledgeSourcesPage() {
setPictureDescriptions(false); setPictureDescriptions(false);
closeDialog(); // Close after successful completion closeDialog(); // Close after successful completion
}) })
.catch(error => { .catch((error) => {
console.error("Error restoring ingest flow:", error); console.error("Error restoring ingest flow:", error);
closeDialog(); // Close even on error (could show error toast instead) closeDialog(); // Close even on error (could show error toast instead)
}); });
@ -735,11 +700,9 @@ function KnowledgeSourcesPage() {
// </div> // </div>
// </div> // </div>
} }
{/* Connectors Grid */} {/* Connectors Grid */}
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{DEFAULT_CONNECTORS.map(connector => { {connectors.map((connector) => {
const actualConnector = connectors.find(c => c.id === connector.id);
return ( return (
<Card key={connector.id} className="relative flex flex-col"> <Card key={connector.id} className="relative flex flex-col">
<CardHeader> <CardHeader>
@ -748,7 +711,7 @@ function KnowledgeSourcesPage() {
<div className="mb-1"> <div className="mb-1">
<div <div
className={`w-8 h-8 ${ className={`w-8 h-8 ${
actualConnector ? "bg-white" : "bg-muted grayscale" connector ? "bg-white" : "bg-muted grayscale"
} rounded flex items-center justify-center`} } rounded flex items-center justify-center`}
> >
{connector.icon} {connector.icon}
@ -756,20 +719,21 @@ function KnowledgeSourcesPage() {
</div> </div>
<CardTitle className="flex flex-row items-center gap-2"> <CardTitle className="flex flex-row items-center gap-2">
{connector.name} {connector.name}
{actualConnector && {connector && getStatusBadge(connector.status)}
getStatusBadge(actualConnector.status)}
</CardTitle> </CardTitle>
<CardDescription className="text-[13px]"> <CardDescription className="text-[13px]">
{actualConnector?.description {connector?.description
? `${actualConnector.name} is configured.` ? `${connector.name} is configured.`
: connector.description} : connector.description}
</CardDescription> </CardDescription>
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="flex-1 flex flex-col justify-end space-y-4"> <CardContent className="flex-1 flex flex-col justify-end space-y-4">
{actualConnector?.status === "connected" ? ( {connector?.available ? (
<div className="space-y-3"> <div className="space-y-3">
{connector?.status === "connected" ? (
<>
<Button <Button
onClick={() => navigateToKnowledgePage(connector)} onClick={() => navigateToKnowledgePage(connector)}
disabled={isSyncing === connector.id} disabled={isSyncing === connector.id}
@ -779,7 +743,6 @@ function KnowledgeSourcesPage() {
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Add Knowledge Add Knowledge
</Button> </Button>
{syncResults[connector.id] && ( {syncResults[connector.id] && (
<div className="text-xs text-muted-foreground bg-muted/50 p-2 rounded"> <div className="text-xs text-muted-foreground bg-muted/50 p-2 rounded">
<div> <div>
@ -796,6 +759,27 @@ function KnowledgeSourcesPage() {
)} )}
</div> </div>
)} )}
</>
) : (
<Button
onClick={() => handleConnect(connector)}
disabled={isConnecting === connector.id}
className="w-full cursor-pointer"
size="sm"
>
{isConnecting === connector.id ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Connecting...
</>
) : (
<>
<PlugZap className="mr-2 h-4 w-4" />
Connect
</>
)}
</Button>
)}
</div> </div>
) : ( ) : (
<div className="text-[13px] text-muted-foreground"> <div className="text-[13px] text-muted-foreground">
@ -877,7 +861,7 @@ function KnowledgeSourcesPage() {
} }
confirmText="Proceed" confirmText="Proceed"
confirmIcon={<ArrowUpRight />} confirmIcon={<ArrowUpRight />}
onConfirm={closeDialog => onConfirm={(closeDialog) =>
handleEditInLangflow("chat", closeDialog) handleEditInLangflow("chat", closeDialog)
} }
variant="warning" variant="warning"
@ -916,7 +900,7 @@ function KnowledgeSourcesPage() {
id="system-prompt" id="system-prompt"
placeholder="Enter your agent instructions here..." placeholder="Enter your agent instructions here..."
value={systemPrompt} value={systemPrompt}
onChange={e => setSystemPrompt(e.target.value)} onChange={(e) => setSystemPrompt(e.target.value)}
rows={6} rows={6}
className={`resize-none ${ className={`resize-none ${
systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
@ -1025,7 +1009,7 @@ function KnowledgeSourcesPage() {
confirmText="Proceed" confirmText="Proceed"
confirmIcon={<ArrowUpRight />} confirmIcon={<ArrowUpRight />}
variant="warning" variant="warning"
onConfirm={closeDialog => onConfirm={(closeDialog) =>
handleEditInLangflow("ingest", closeDialog) handleEditInLangflow("ingest", closeDialog)
} }
/> />
@ -1048,7 +1032,8 @@ function KnowledgeSourcesPage() {
disabled={true} disabled={true}
value={ value={
settings.knowledge?.embedding_model || settings.knowledge?.embedding_model ||
modelsData?.embedding_models?.find(m => m.default)?.value || modelsData?.embedding_models?.find((m) => m.default)
?.value ||
"text-embedding-ada-002" "text-embedding-ada-002"
} }
onValueChange={handleEmbeddingModelChange} onValueChange={handleEmbeddingModelChange}
@ -1084,7 +1069,7 @@ function KnowledgeSourcesPage() {
type="number" type="number"
min="1" min="1"
value={chunkSize} value={chunkSize}
onChange={e => handleChunkSizeChange(e.target.value)} onChange={(e) => handleChunkSizeChange(e.target.value)}
className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/> />
<div className="absolute inset-y-0 right-0 flex items-center"> <div className="absolute inset-y-0 right-0 flex items-center">
@ -1127,7 +1112,7 @@ function KnowledgeSourcesPage() {
type="number" type="number"
min="0" min="0"
value={chunkOverlap} value={chunkOverlap}
onChange={e => handleChunkOverlapChange(e.target.value)} onChange={(e) => handleChunkOverlapChange(e.target.value)}
className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/> />
<div className="absolute inset-y-0 right-0 flex items-center"> <div className="absolute inset-y-0 right-0 flex items-center">

59
frontend/src/app/upload/[provider]/page.tsx
View file

@ -6,8 +6,12 @@ import { useEffect, useState } from "react";
import { type CloudFile, UnifiedCloudPicker } from "@/components/cloud-picker"; import { type CloudFile, UnifiedCloudPicker } from "@/components/cloud-picker";
import type { IngestSettings } from "@/components/cloud-picker/types"; import type { IngestSettings } from "@/components/cloud-picker/types";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Toast } from "@/components/ui/toast";
import { useTask } from "@/contexts/task-context"; import { useTask } from "@/contexts/task-context";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
// CloudFile interface is now imported from the unified cloud picker // CloudFile interface is now imported from the unified cloud picker
@ -36,7 +40,7 @@ export default function UploadProviderPage() {
const [selectedFiles, setSelectedFiles] = useState<CloudFile[]>([]); const [selectedFiles, setSelectedFiles] = useState<CloudFile[]>([]);
const [isIngesting, setIsIngesting] = useState<boolean>(false); const [isIngesting, setIsIngesting] = useState<boolean>(false);
const [currentSyncTaskId, setCurrentSyncTaskId] = useState<string | null>( const [currentSyncTaskId, setCurrentSyncTaskId] = useState<string | null>(
null, null
); );
const [ingestSettings, setIngestSettings] = useState<IngestSettings>({ const [ingestSettings, setIngestSettings] = useState<IngestSettings>({
chunkSize: 1000, chunkSize: 1000,
@ -63,14 +67,14 @@ export default function UploadProviderPage() {
if (!providerInfo || !providerInfo.available) { if (!providerInfo || !providerInfo.available) {
setError( setError(
`Cloud provider "${provider}" is not available or configured.`, `Cloud provider "${provider}" is not available or configured.`
); );
return; return;
} }
// Check connector status // Check connector status
const statusResponse = await fetch( const statusResponse = await fetch(
`/api/connectors/${provider}/status`, `/api/connectors/${provider}/status`
); );
if (!statusResponse.ok) { if (!statusResponse.ok) {
throw new Error(`Failed to check ${provider} status`); throw new Error(`Failed to check ${provider} status`);
@ -80,7 +84,7 @@ export default function UploadProviderPage() {
const connections = statusData.connections || []; const connections = statusData.connections || [];
const activeConnection = connections.find( const activeConnection = connections.find(
(conn: { is_active: boolean; connection_id: string }) => (conn: { is_active: boolean; connection_id: string }) =>
conn.is_active, conn.is_active
); );
const isConnected = activeConnection !== undefined; const isConnected = activeConnection !== undefined;
@ -91,7 +95,7 @@ export default function UploadProviderPage() {
if (isConnected && activeConnection) { if (isConnected && activeConnection) {
try { try {
const tokenResponse = await fetch( const tokenResponse = await fetch(
`/api/connectors/${provider}/token?connection_id=${activeConnection.connection_id}`, `/api/connectors/${provider}/token?connection_id=${activeConnection.connection_id}`
); );
if (tokenResponse.ok) { if (tokenResponse.ok) {
const tokenData = await tokenResponse.json(); const tokenData = await tokenResponse.json();
@ -126,7 +130,7 @@ export default function UploadProviderPage() {
setError( setError(
error instanceof Error error instanceof Error
? error.message ? error.message
: "Failed to load connector information", : "Failed to load connector information"
); );
} finally { } finally {
setIsLoading(false); setIsLoading(false);
@ -143,7 +147,7 @@ export default function UploadProviderPage() {
if (!currentSyncTaskId) return; if (!currentSyncTaskId) return;
const currentTask = tasks.find( const currentTask = tasks.find(
(task) => task.task_id === currentSyncTaskId, (task) => task.task_id === currentSyncTaskId
); );
if (currentTask && currentTask.status === "completed") { if (currentTask && currentTask.status === "completed") {
@ -326,13 +330,15 @@ export default function UploadProviderPage() {
); );
} }
const hasSelectedFiles = selectedFiles.length > 0;
return ( return (
<div className="container mx-auto max-w-3xl p-6"> <div className="container mx-auto max-w-3xl px-6">
<div className="mb-6 flex gap-2 items-center"> <div className="mb-8 flex gap-2 items-center">
<Button variant="ghost" onClick={() => router.back()}> <Button variant="ghost" onClick={() => router.back()} size="icon">
<ArrowLeft className="h-4 w-4 scale-125" /> <ArrowLeft size={18} />
</Button> </Button>
<h2 className="text-2xl font-bold"> <h2 className="text-xl text-[18px] font-semibold">
Add from {getProviderDisplayName()} Add from {getProviderDisplayName()}
</h2> </h2>
</div> </div>
@ -345,13 +351,14 @@ export default function UploadProviderPage() {
onFileSelected={handleFileSelected} onFileSelected={handleFileSelected}
selectedFiles={selectedFiles} selectedFiles={selectedFiles}
isAuthenticated={true} isAuthenticated={true}
isIngesting={isIngesting}
accessToken={accessToken || undefined} accessToken={accessToken || undefined}
clientId={connector.clientId} clientId={connector.clientId}
onSettingsChange={setIngestSettings} onSettingsChange={setIngestSettings}
/> />
</div> </div>
<div className="max-w-3xl mx-auto mt-6"> <div className="max-w-3xl mx-auto mt-6 sticky bottom-0 left-0 right-0 pb-6 bg-background pt-4">
<div className="flex justify-between gap-3 mb-4"> <div className="flex justify-between gap-3 mb-4">
<Button <Button
variant="ghost" variant="ghost"
@ -360,17 +367,31 @@ export default function UploadProviderPage() {
> >
Back Back
</Button> </Button>
<Tooltip>
<TooltipTrigger>
<Button <Button
variant="secondary" className="bg-foreground text-background hover:bg-foreground/90 font-semibold"
variant={!hasSelectedFiles ? "secondary" : undefined}
onClick={() => handleSync(connector)} onClick={() => handleSync(connector)}
disabled={selectedFiles.length === 0 || isIngesting} loading={isIngesting}
disabled={!hasSelectedFiles || isIngesting}
> >
{isIngesting ? ( {!hasSelectedFiles ? (
<>Ingesting {selectedFiles.length} Files...</> <>Ingest files</>
) : ( ) : (
<>Start ingest</> <>
Ingest {selectedFiles.length} file
{selectedFiles.length > 1 ? "s" : ""}
</>
)} )}
</Button> </Button>
</TooltipTrigger>
{!hasSelectedFiles ? (
<TooltipContent side="left">
Select at least one file before ingesting
</TooltipContent>
) : null}
</Tooltip>
</div> </div>
</div> </div>
</div> </div>

45
frontend/src/components/cloud-picker/file-item.tsx
View file

@ -1,11 +1,16 @@
"use client"; "use client";
import { Badge } from "@/components/ui/badge"; import { FileText, Folder, Trash2 } from "lucide-react";
import { FileText, Folder, Trash } from "lucide-react";
import { CloudFile } from "./types"; import { CloudFile } from "./types";
import GoogleDriveIcon from "@/app/settings/icons/google-drive-icon";
import SharePointIcon from "@/app/settings/icons/share-point-icon";
import OneDriveIcon from "@/app/settings/icons/one-drive-icon";
import { Button } from "@/components/ui/button";
interface FileItemProps { interface FileItemProps {
provider: string;
file: CloudFile; file: CloudFile;
shouldDisableActions: boolean;
onRemove: (fileId: string) => void; onRemove: (fileId: string) => void;
} }
@ -41,27 +46,43 @@ const formatFileSize = (bytes?: number) => {
return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`; return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
}; };
export const FileItem = ({ file, onRemove }: FileItemProps) => ( const getProviderIcon = (provider: string) => {
switch (provider) {
case "google_drive":
return <GoogleDriveIcon />;
case "onedrive":
return <OneDriveIcon />;
case "sharepoint":
return <SharePointIcon />;
default:
return <FileText className="h-6 w-6" />;
}
};
export const FileItem = ({ file, onRemove, provider }: FileItemProps) => (
<div <div
key={file.id} key={file.id}
className="flex items-center justify-between p-2 rounded-md text-xs" className="flex items-center justify-between p-1.5 rounded-md text-xs"
> >
<div className="flex items-center gap-2 flex-1 min-w-0"> <div className="flex items-center gap-2 flex-1 min-w-0">
{getFileIcon(file.mimeType)} {provider ? getProviderIcon(provider) : getFileIcon(file.mimeType)}
<span className="truncate font-medium text-sm mr-2">{file.name}</span> <span className="truncate font-medium text-sm mr-2">{file.name}</span>
<Badge variant="secondary" className="text-xs px-1 py-0.5 h-auto"> <span className="text-sm text-muted-foreground">
{getMimeTypeLabel(file.mimeType)} {getMimeTypeLabel(file.mimeType)}
</Badge> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-1">
<span className="text-xs text-muted-foreground mr-4" title="file size"> <span className="text-xs text-muted-foreground mr-4" title="file size">
{formatFileSize(file.size) || "—"} {formatFileSize(file.size) || "—"}
</span> </span>
<Button
<Trash className="text-muted-foreground hover:text-destructive"
className="text-muted-foreground w-5 h-5 cursor-pointer hover:text-destructive" size="icon"
variant="ghost"
onClick={() => onRemove(file.id)} onClick={() => onRemove(file.id)}
/> >
<Trash2 size={16} />
</Button>
</div> </div>
</div> </div>
); );

25
frontend/src/components/cloud-picker/file-list.tsx
View file

@ -5,38 +5,51 @@ import { CloudFile } from "./types";
import { FileItem } from "./file-item"; import { FileItem } from "./file-item";
interface FileListProps { interface FileListProps {
provider: string;
files: CloudFile[]; files: CloudFile[];
onClearAll: () => void; onClearAll: () => void;
onRemoveFile: (fileId: string) => void; onRemoveFile: (fileId: string) => void;
shouldDisableActions: boolean;
} }
export const FileList = ({ export const FileList = ({
provider,
files, files,
onClearAll, onClearAll,
onRemoveFile, onRemoveFile,
shouldDisableActions,
}: FileListProps) => { }: FileListProps) => {
if (files.length === 0) { if (files.length === 0) {
return null; return null;
} }
return ( return (
<div className="space-y-2"> <div className="space-y-2 relative">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-sm font-medium">Added files</p> <p className="text-sm font-medium">Added files ({files.length})</p>
<Button <Button
ignoreTitleCase={true}
onClick={onClearAll} onClick={onClearAll}
size="sm" size="sm"
variant="ghost" variant="ghost"
className="text-sm text-muted-foreground" className="text-sm text-muted-foreground"
> >
Clear all Remove all
</Button> </Button>
</div> </div>
<div className="max-h-64 overflow-y-auto space-y-1"> <div className="box-shadow-inner">
{files.map(file => ( <div className="max-h-[calc(100vh-720px)] overflow-y-auto space-y-1 pr-1 pb-4 relative">
<FileItem key={file.id} file={file} onRemove={onRemoveFile} /> {files.map((file) => (
<FileItem
key={file.id}
file={file}
onRemove={onRemoveFile}
provider={provider}
shouldDisableActions={shouldDisableActions}
/>
))} ))}
</div> </div>
</div> </div>
</div>
); );
}; };

127
frontend/src/components/cloud-picker/ingest-settings.tsx
View file

@ -1,14 +1,28 @@
"use client"; "use client";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import { import {
Collapsible, Collapsible,
CollapsibleContent, CollapsibleContent,
CollapsibleTrigger, CollapsibleTrigger,
} from "@/components/ui/collapsible"; } from "@/components/ui/collapsible";
import { ChevronRight, Info } from "lucide-react"; import { ChevronRight } from "lucide-react";
import { IngestSettings as IngestSettingsType } from "./types"; import { IngestSettings as IngestSettingsType } from "./types";
import { LabelWrapper } from "@/components/label-wrapper";
import {
Select,
SelectContent,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { ModelSelectItems } from "@/app/settings/helpers/model-select-item";
import { getFallbackModels } from "@/app/settings/helpers/model-helpers";
import { NumberInput } from "@/components/ui/inputs/number-input";
interface IngestSettingsProps { interface IngestSettingsProps {
isOpen: boolean; isOpen: boolean;
@ -44,7 +58,7 @@ export const IngestSettings = ({
<Collapsible <Collapsible
open={isOpen} open={isOpen}
onOpenChange={onOpenChange} onOpenChange={onOpenChange}
className="border rounded-md p-4 border-muted-foreground/20" className="border rounded-xl p-4 border-border"
> >
<CollapsibleTrigger className="flex items-center gap-2 justify-between w-full -m-4 p-4 rounded-md transition-colors"> <CollapsibleTrigger className="flex items-center gap-2 justify-between w-full -m-4 p-4 rounded-md transition-colors">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -58,35 +72,85 @@ export const IngestSettings = ({
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-up-2 data-[state=open]:slide-down-2"> <CollapsibleContent className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-up-2 data-[state=open]:slide-down-2">
<div className="pt-5 space-y-5"> <div className="mt-6">
<div className="flex items-center gap-4 w-full"> {/* Embedding model selection - currently disabled */}
<LabelWrapper
helperText="Model used for knowledge ingest and retrieval"
id="embedding-model-select"
label="Embedding model"
>
<Select
// Disabled until API supports multiple embedding models
disabled={true}
value={currentSettings.embeddingModel}
onValueChange={() => {}}
>
<Tooltip>
<TooltipTrigger asChild>
<SelectTrigger disabled id="embedding-model-select">
<SelectValue placeholder="Select an embedding model" />
</SelectTrigger>
</TooltipTrigger>
<TooltipContent>
Locked to keep embeddings consistent
</TooltipContent>
</Tooltip>
<SelectContent>
<ModelSelectItems
models={[
{
value: "text-embedding-3-small",
label: "text-embedding-3-small",
},
]}
fallbackModels={getFallbackModels("openai").embedding}
provider={"openai"}
/>
</SelectContent>
</Select>
</LabelWrapper>
</div>
<div className="mt-6">
<div className="flex items-center gap-4 w-full mb-6">
<div className="w-full"> <div className="w-full">
<div className="text-sm mb-2 font-semibold">Chunk size</div> <NumberInput
<Input id="chunk-size"
type="number" label="Chunk size"
value={currentSettings.chunkSize} value={currentSettings.chunkSize}
onChange={e => onChange={(value) => handleSettingsChange({ chunkSize: value })}
handleSettingsChange({ unit="characters"
chunkSize: parseInt(e.target.value) || 0,
})
}
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="text-sm mb-2 font-semibold">Chunk overlap</div> <NumberInput
<Input id="chunk-overlap"
type="number" label="Chunk overlap"
value={currentSettings.chunkOverlap} value={currentSettings.chunkOverlap}
onChange={e => onChange={(value) =>
handleSettingsChange({ handleSettingsChange({ chunkOverlap: value })
chunkOverlap: parseInt(e.target.value) || 0,
})
} }
unit="characters"
/> />
</div> </div>
</div> </div>
<div className="flex gap-2 items-center justify-between"> {/* <div className="flex gap-2 items-center justify-between">
<div>
<div className="text-sm font-semibold pb-2">Table Structure</div>
<div className="text-sm text-muted-foreground">
Capture table structure during ingest.
</div>
</div>
<Switch
id="table-structure"
checked={currentSettings.tableStructure}
onCheckedChange={(checked) =>
handleSettingsChange({ tableStructure: checked })
}
/>
</div> */}
<div className="flex items-center justify-between border-b pb-3 mb-3">
<div> <div>
<div className="text-sm font-semibold pb-2">OCR</div> <div className="text-sm font-semibold pb-2">OCR</div>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
@ -95,13 +159,13 @@ export const IngestSettings = ({
</div> </div>
<Switch <Switch
checked={currentSettings.ocr} checked={currentSettings.ocr}
onCheckedChange={checked => onCheckedChange={(checked) =>
handleSettingsChange({ ocr: checked }) handleSettingsChange({ ocr: checked })
} }
/> />
</div> </div>
<div className="flex gap-2 items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<div className="text-sm pb-2 font-semibold"> <div className="text-sm pb-2 font-semibold">
Picture descriptions Picture descriptions
@ -112,26 +176,11 @@ export const IngestSettings = ({
</div> </div>
<Switch <Switch
checked={currentSettings.pictureDescriptions} checked={currentSettings.pictureDescriptions}
onCheckedChange={checked => onCheckedChange={(checked) =>
handleSettingsChange({ pictureDescriptions: checked }) handleSettingsChange({ pictureDescriptions: checked })
} }
/> />
</div> </div>
<div>
<div className="text-sm font-semibold pb-2 flex items-center">
Embedding model
<Info className="w-3.5 h-3.5 text-muted-foreground ml-2" />
</div>
<Input
disabled
value={currentSettings.embeddingModel}
onChange={e =>
handleSettingsChange({ embeddingModel: e.target.value })
}
placeholder="text-embedding-3-small"
/>
</div>
</div> </div>
</CollapsibleContent> </CollapsibleContent>
</Collapsible> </Collapsible>

8
frontend/src/components/cloud-picker/picker-header.tsx
View file

@ -51,19 +51,13 @@ export const PickerHeader = ({
Select files from {getProviderName(provider)} to ingest. Select files from {getProviderName(provider)} to ingest.
</p> </p>
<Button <Button
size="sm"
onClick={onAddFiles} onClick={onAddFiles}
disabled={!isPickerLoaded || isPickerOpen || !accessToken} disabled={!isPickerLoaded || isPickerOpen || !accessToken}
className="bg-foreground text-background hover:bg-foreground/90 font-semibold" className="bg-foreground text-background hover:bg-foreground/90 font-semibold"
> >
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Add Files {isPickerOpen ? "Opening picker..." : "Add files"}
</Button> </Button>
<div className="text-xs text-muted-foreground pt-4">
csv, json, pdf,{" "}
<a className="underline dark:text-pink-400 text-pink-600">+16 more</a>{" "}
<b>150 MB</b> max
</div>
</CardContent> </CardContent>
</Card> </Card>
); );

1
frontend/src/components/cloud-picker/types.ts
View file

@ -25,6 +25,7 @@ export interface UnifiedCloudPickerProps {
baseUrl?: string; baseUrl?: string;
// Ingest settings // Ingest settings
onSettingsChange?: (settings: IngestSettings) => void; onSettingsChange?: (settings: IngestSettings) => void;
isIngesting: boolean;
} }
export interface GoogleAPI { export interface GoogleAPI {

15
frontend/src/components/cloud-picker/unified-cloud-picker.tsx
View file

@ -16,6 +16,7 @@ export const UnifiedCloudPicker = ({
onFileSelected, onFileSelected,
selectedFiles = [], selectedFiles = [],
isAuthenticated, isAuthenticated,
isIngesting,
accessToken, accessToken,
onPickerStateChange, onPickerStateChange,
clientId, clientId,
@ -116,7 +117,7 @@ export const UnifiedCloudPicker = ({
const handler = createProviderHandler( const handler = createProviderHandler(
provider, provider,
accessToken, accessToken,
isOpen => { (isOpen) => {
setIsPickerOpen(isOpen); setIsPickerOpen(isOpen);
onPickerStateChange?.(isOpen); onPickerStateChange?.(isOpen);
}, },
@ -126,8 +127,8 @@ export const UnifiedCloudPicker = ({
handler.openPicker((files: CloudFile[]) => { handler.openPicker((files: CloudFile[]) => {
// Merge new files with existing ones, avoiding duplicates // Merge new files with existing ones, avoiding duplicates
const existingIds = new Set(selectedFiles.map(f => f.id)); const existingIds = new Set(selectedFiles.map((f) => f.id));
const newFiles = files.filter(f => !existingIds.has(f.id)); const newFiles = files.filter((f) => !existingIds.has(f.id));
onFileSelected([...selectedFiles, ...newFiles]); onFileSelected([...selectedFiles, ...newFiles]);
}); });
} catch (error) { } catch (error) {
@ -138,7 +139,7 @@ export const UnifiedCloudPicker = ({
}; };
const handleRemoveFile = (fileId: string) => { const handleRemoveFile = (fileId: string) => {
const updatedFiles = selectedFiles.filter(file => file.id !== fileId); const updatedFiles = selectedFiles.filter((file) => file.id !== fileId);
onFileSelected(updatedFiles); onFileSelected(updatedFiles);
}; };
@ -168,7 +169,8 @@ export const UnifiedCloudPicker = ({
} }
return ( return (
<div className="space-y-6"> <div>
<div className="mb-6">
<PickerHeader <PickerHeader
provider={provider} provider={provider}
onAddFiles={handleAddFiles} onAddFiles={handleAddFiles}
@ -177,11 +179,14 @@ export const UnifiedCloudPicker = ({
accessToken={accessToken} accessToken={accessToken}
isAuthenticated={isAuthenticated} isAuthenticated={isAuthenticated}
/> />
</div>
<FileList <FileList
provider={provider}
files={selectedFiles} files={selectedFiles}
onClearAll={handleClearAll} onClearAll={handleClearAll}
onRemoveFile={handleRemoveFile} onRemoveFile={handleRemoveFile}
shouldDisableActions={isIngesting}
/> />
<IngestSettings <IngestSettings