Merge branch 'main' into settings-copy
This commit is contained in:
Edwin Jose
GitHub
commit
4b861da83e
12 changed files with 735 additions and 497 deletions
|
|
@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
|
|||
import * as React from "react";
|
||||
|
||||
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: {
|
||||
variant: {
|
||||
|
|
|
|||
62
frontend/components/ui/inputs/embedding-model.tsx
Normal file
62
frontend/components/ui/inputs/embedding-model.tsx
Normal 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
74
frontend/components/ui/inputs/number-input.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
|
|
@ -351,4 +351,17 @@
|
|||
.discord-error {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"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 { useRouter, useSearchParams } from "next/navigation";
|
||||
import { Suspense, useCallback, useEffect, useState } from "react";
|
||||
|
|
@ -101,34 +101,6 @@ interface Connection {
|
|||
created_at: 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() {
|
||||
const { isAuthenticated, isNoAuthMode } = useAuth();
|
||||
const { addTask, tasks } = useTask();
|
||||
|
|
@ -203,7 +175,7 @@ function KnowledgeSourcesPage() {
|
|||
onSuccess: () => {
|
||||
console.log("Setting updated successfully");
|
||||
},
|
||||
onError: error => {
|
||||
onError: (error) => {
|
||||
console.error("Failed to update setting:", error.message);
|
||||
},
|
||||
});
|
||||
|
|
@ -304,16 +276,8 @@ function KnowledgeSourcesPage() {
|
|||
const getConnectorIcon = useCallback((iconName: string) => {
|
||||
const iconMap: { [key: string]: React.ReactElement } = {
|
||||
"google-drive": <GoogleDriveIcon />,
|
||||
sharepoint: (
|
||||
<div className="w-8 h-8 bg-blue-700 rounded flex items-center justify-center text-white font-bold leading-none shrink-0">
|
||||
SP
|
||||
</div>
|
||||
),
|
||||
onedrive: (
|
||||
<div className="w-8 h-8 bg-white border border-gray-300 rounded flex items-center justify-center">
|
||||
<OneDriveIcon />
|
||||
</div>
|
||||
),
|
||||
sharepoint: <SharePointIcon />,
|
||||
onedrive: <OneDriveIcon />,
|
||||
};
|
||||
return (
|
||||
iconMap[iconName] || (
|
||||
|
|
@ -338,14 +302,15 @@ function KnowledgeSourcesPage() {
|
|||
|
||||
// Initialize connectors list with metadata from backend
|
||||
const initialConnectors = connectorTypes
|
||||
.filter(type => connectorsResult.connectors[type].available) // Only show available connectors
|
||||
.map(type => ({
|
||||
.filter((type) => connectorsResult.connectors[type].available) // Only show available connectors
|
||||
.map((type) => ({
|
||||
id: type,
|
||||
name: connectorsResult.connectors[type].name,
|
||||
description: connectorsResult.connectors[type].description,
|
||||
icon: getConnectorIcon(connectorsResult.connectors[type].icon),
|
||||
status: "not_connected" as const,
|
||||
type: type,
|
||||
available: connectorsResult.connectors[type].available,
|
||||
}));
|
||||
|
||||
setConnectors(initialConnectors);
|
||||
|
|
@ -362,8 +327,8 @@ function KnowledgeSourcesPage() {
|
|||
);
|
||||
const isConnected = activeConnection !== undefined;
|
||||
|
||||
setConnectors(prev =>
|
||||
prev.map(c =>
|
||||
setConnectors((prev) =>
|
||||
prev.map((c) =>
|
||||
c.type === connectorType
|
||||
? {
|
||||
...c,
|
||||
|
|
@ -382,7 +347,7 @@ function KnowledgeSourcesPage() {
|
|||
|
||||
const handleConnect = async (connector: Connector) => {
|
||||
setIsConnecting(connector.id);
|
||||
setSyncResults(prev => ({ ...prev, [connector.id]: null }));
|
||||
setSyncResults((prev) => ({ ...prev, [connector.id]: null }));
|
||||
|
||||
try {
|
||||
// Use the shared auth callback URL, same as connectors page
|
||||
|
|
@ -522,9 +487,9 @@ function KnowledgeSourcesPage() {
|
|||
// Watch for task completions and refresh stats
|
||||
useEffect(() => {
|
||||
// Find newly completed tasks by comparing with previous state
|
||||
const newlyCompletedTasks = tasks.filter(task => {
|
||||
const newlyCompletedTasks = tasks.filter((task) => {
|
||||
const wasCompleted =
|
||||
prevTasks.find(prev => prev.task_id === task.task_id)?.status ===
|
||||
prevTasks.find((prev) => prev.task_id === task.task_id)?.status ===
|
||||
"completed";
|
||||
return task.status === "completed" && !wasCompleted;
|
||||
});
|
||||
|
|
@ -578,7 +543,7 @@ function KnowledgeSourcesPage() {
|
|||
fetch(`/api/reset-flow/retrieval`, {
|
||||
method: "POST",
|
||||
})
|
||||
.then(response => {
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
}
|
||||
|
|
@ -591,7 +556,7 @@ function KnowledgeSourcesPage() {
|
|||
handleModelChange(DEFAULT_AGENT_SETTINGS.llm_model);
|
||||
closeDialog(); // Close after successful completion
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
console.error("Error restoring retrieval flow:", error);
|
||||
closeDialog(); // Close even on error (could show error toast instead)
|
||||
});
|
||||
|
|
@ -601,7 +566,7 @@ function KnowledgeSourcesPage() {
|
|||
fetch(`/api/reset-flow/ingest`, {
|
||||
method: "POST",
|
||||
})
|
||||
.then(response => {
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
}
|
||||
|
|
@ -616,7 +581,7 @@ function KnowledgeSourcesPage() {
|
|||
setPictureDescriptions(false);
|
||||
closeDialog(); // Close after successful completion
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
console.error("Error restoring ingest flow:", error);
|
||||
closeDialog(); // Close even on error (could show error toast instead)
|
||||
});
|
||||
|
|
@ -735,11 +700,9 @@ function KnowledgeSourcesPage() {
|
|||
// </div>
|
||||
// </div>
|
||||
}
|
||||
|
||||
{/* Connectors Grid */}
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{DEFAULT_CONNECTORS.map(connector => {
|
||||
const actualConnector = connectors.find(c => c.id === connector.id);
|
||||
{connectors.map((connector) => {
|
||||
return (
|
||||
<Card key={connector.id} className="relative flex flex-col">
|
||||
<CardHeader>
|
||||
|
|
@ -748,7 +711,7 @@ function KnowledgeSourcesPage() {
|
|||
<div className="mb-1">
|
||||
<div
|
||||
className={`w-8 h-8 ${
|
||||
actualConnector ? "bg-white" : "bg-muted grayscale"
|
||||
connector ? "bg-white" : "bg-muted grayscale"
|
||||
} rounded flex items-center justify-center`}
|
||||
>
|
||||
{connector.icon}
|
||||
|
|
@ -756,45 +719,66 @@ function KnowledgeSourcesPage() {
|
|||
</div>
|
||||
<CardTitle className="flex flex-row items-center gap-2">
|
||||
{connector.name}
|
||||
{actualConnector &&
|
||||
getStatusBadge(actualConnector.status)}
|
||||
{connector && getStatusBadge(connector.status)}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-[13px]">
|
||||
{actualConnector?.description
|
||||
? `${actualConnector.name} is configured.`
|
||||
{connector?.description
|
||||
? `${connector.name} is configured.`
|
||||
: connector.description}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col justify-end space-y-4">
|
||||
{actualConnector?.status === "connected" ? (
|
||||
{connector?.available ? (
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
onClick={() => navigateToKnowledgePage(connector)}
|
||||
disabled={isSyncing === connector.id}
|
||||
className="w-full cursor-pointer"
|
||||
size="sm"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Add Knowledge
|
||||
</Button>
|
||||
|
||||
{syncResults[connector.id] && (
|
||||
<div className="text-xs text-muted-foreground bg-muted/50 p-2 rounded">
|
||||
<div>
|
||||
Processed:{" "}
|
||||
{syncResults[connector.id]?.processed || 0}
|
||||
</div>
|
||||
<div>
|
||||
Added: {syncResults[connector.id]?.added || 0}
|
||||
</div>
|
||||
{syncResults[connector.id]?.errors && (
|
||||
<div>
|
||||
Errors: {syncResults[connector.id]?.errors}
|
||||
{connector?.status === "connected" ? (
|
||||
<>
|
||||
<Button
|
||||
onClick={() => navigateToKnowledgePage(connector)}
|
||||
disabled={isSyncing === connector.id}
|
||||
className="w-full cursor-pointer"
|
||||
size="sm"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Add Knowledge
|
||||
</Button>
|
||||
{syncResults[connector.id] && (
|
||||
<div className="text-xs text-muted-foreground bg-muted/50 p-2 rounded">
|
||||
<div>
|
||||
Processed:{" "}
|
||||
{syncResults[connector.id]?.processed || 0}
|
||||
</div>
|
||||
<div>
|
||||
Added: {syncResults[connector.id]?.added || 0}
|
||||
</div>
|
||||
{syncResults[connector.id]?.errors && (
|
||||
<div>
|
||||
Errors: {syncResults[connector.id]?.errors}
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
) : (
|
||||
|
|
@ -877,7 +861,7 @@ function KnowledgeSourcesPage() {
|
|||
}
|
||||
confirmText="Proceed"
|
||||
confirmIcon={<ArrowUpRight />}
|
||||
onConfirm={closeDialog =>
|
||||
onConfirm={(closeDialog) =>
|
||||
handleEditInLangflow("chat", closeDialog)
|
||||
}
|
||||
variant="warning"
|
||||
|
|
@ -916,7 +900,7 @@ function KnowledgeSourcesPage() {
|
|||
id="system-prompt"
|
||||
placeholder="Enter your agent instructions here..."
|
||||
value={systemPrompt}
|
||||
onChange={e => setSystemPrompt(e.target.value)}
|
||||
onChange={(e) => setSystemPrompt(e.target.value)}
|
||||
rows={6}
|
||||
className={`resize-none ${
|
||||
systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
|
||||
|
|
@ -1025,7 +1009,7 @@ function KnowledgeSourcesPage() {
|
|||
confirmText="Proceed"
|
||||
confirmIcon={<ArrowUpRight />}
|
||||
variant="warning"
|
||||
onConfirm={closeDialog =>
|
||||
onConfirm={(closeDialog) =>
|
||||
handleEditInLangflow("ingest", closeDialog)
|
||||
}
|
||||
/>
|
||||
|
|
@ -1048,7 +1032,8 @@ function KnowledgeSourcesPage() {
|
|||
disabled={true}
|
||||
value={
|
||||
settings.knowledge?.embedding_model ||
|
||||
modelsData?.embedding_models?.find(m => m.default)?.value ||
|
||||
modelsData?.embedding_models?.find((m) => m.default)
|
||||
?.value ||
|
||||
"text-embedding-ada-002"
|
||||
}
|
||||
onValueChange={handleEmbeddingModelChange}
|
||||
|
|
@ -1084,7 +1069,7 @@ function KnowledgeSourcesPage() {
|
|||
type="number"
|
||||
min="1"
|
||||
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"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center">
|
||||
|
|
@ -1127,7 +1112,7 @@ function KnowledgeSourcesPage() {
|
|||
type="number"
|
||||
min="0"
|
||||
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"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center">
|
||||
|
|
|
|||
|
|
@ -6,373 +6,394 @@ import { useEffect, useState } from "react";
|
|||
import { type CloudFile, UnifiedCloudPicker } from "@/components/cloud-picker";
|
||||
import type { IngestSettings } from "@/components/cloud-picker/types";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Toast } from "@/components/ui/toast";
|
||||
import { useTask } from "@/contexts/task-context";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
|
||||
// CloudFile interface is now imported from the unified cloud picker
|
||||
|
||||
interface CloudConnector {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
status: "not_connected" | "connecting" | "connected" | "error";
|
||||
type: string;
|
||||
connectionId?: string;
|
||||
clientId: string;
|
||||
hasAccessToken: boolean;
|
||||
accessTokenError?: string;
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
status: "not_connected" | "connecting" | "connected" | "error";
|
||||
type: string;
|
||||
connectionId?: string;
|
||||
clientId: string;
|
||||
hasAccessToken: boolean;
|
||||
accessTokenError?: string;
|
||||
}
|
||||
|
||||
export default function UploadProviderPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const provider = params.provider as string;
|
||||
const { addTask, tasks } = useTask();
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const provider = params.provider as string;
|
||||
const { addTask, tasks } = useTask();
|
||||
|
||||
const [connector, setConnector] = useState<CloudConnector | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [accessToken, setAccessToken] = useState<string | null>(null);
|
||||
const [selectedFiles, setSelectedFiles] = useState<CloudFile[]>([]);
|
||||
const [isIngesting, setIsIngesting] = useState<boolean>(false);
|
||||
const [currentSyncTaskId, setCurrentSyncTaskId] = useState<string | null>(
|
||||
null,
|
||||
);
|
||||
const [ingestSettings, setIngestSettings] = useState<IngestSettings>({
|
||||
chunkSize: 1000,
|
||||
chunkOverlap: 200,
|
||||
ocr: false,
|
||||
pictureDescriptions: false,
|
||||
embeddingModel: "text-embedding-3-small",
|
||||
});
|
||||
const [connector, setConnector] = useState<CloudConnector | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [accessToken, setAccessToken] = useState<string | null>(null);
|
||||
const [selectedFiles, setSelectedFiles] = useState<CloudFile[]>([]);
|
||||
const [isIngesting, setIsIngesting] = useState<boolean>(false);
|
||||
const [currentSyncTaskId, setCurrentSyncTaskId] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
const [ingestSettings, setIngestSettings] = useState<IngestSettings>({
|
||||
chunkSize: 1000,
|
||||
chunkOverlap: 200,
|
||||
ocr: false,
|
||||
pictureDescriptions: false,
|
||||
embeddingModel: "text-embedding-3-small",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchConnectorInfo = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
useEffect(() => {
|
||||
const fetchConnectorInfo = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Fetch available connectors to validate the provider
|
||||
const connectorsResponse = await fetch("/api/connectors");
|
||||
if (!connectorsResponse.ok) {
|
||||
throw new Error("Failed to load connectors");
|
||||
}
|
||||
try {
|
||||
// Fetch available connectors to validate the provider
|
||||
const connectorsResponse = await fetch("/api/connectors");
|
||||
if (!connectorsResponse.ok) {
|
||||
throw new Error("Failed to load connectors");
|
||||
}
|
||||
|
||||
const connectorsResult = await connectorsResponse.json();
|
||||
const providerInfo = connectorsResult.connectors[provider];
|
||||
const connectorsResult = await connectorsResponse.json();
|
||||
const providerInfo = connectorsResult.connectors[provider];
|
||||
|
||||
if (!providerInfo || !providerInfo.available) {
|
||||
setError(
|
||||
`Cloud provider "${provider}" is not available or configured.`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (!providerInfo || !providerInfo.available) {
|
||||
setError(
|
||||
`Cloud provider "${provider}" is not available or configured.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check connector status
|
||||
const statusResponse = await fetch(
|
||||
`/api/connectors/${provider}/status`,
|
||||
);
|
||||
if (!statusResponse.ok) {
|
||||
throw new Error(`Failed to check ${provider} status`);
|
||||
}
|
||||
// Check connector status
|
||||
const statusResponse = await fetch(
|
||||
`/api/connectors/${provider}/status`
|
||||
);
|
||||
if (!statusResponse.ok) {
|
||||
throw new Error(`Failed to check ${provider} status`);
|
||||
}
|
||||
|
||||
const statusData = await statusResponse.json();
|
||||
const connections = statusData.connections || [];
|
||||
const activeConnection = connections.find(
|
||||
(conn: { is_active: boolean; connection_id: string }) =>
|
||||
conn.is_active,
|
||||
);
|
||||
const isConnected = activeConnection !== undefined;
|
||||
const statusData = await statusResponse.json();
|
||||
const connections = statusData.connections || [];
|
||||
const activeConnection = connections.find(
|
||||
(conn: { is_active: boolean; connection_id: string }) =>
|
||||
conn.is_active
|
||||
);
|
||||
const isConnected = activeConnection !== undefined;
|
||||
|
||||
let hasAccessToken = false;
|
||||
let accessTokenError: string | undefined;
|
||||
let hasAccessToken = false;
|
||||
let accessTokenError: string | undefined;
|
||||
|
||||
// Try to get access token for connected connectors
|
||||
if (isConnected && activeConnection) {
|
||||
try {
|
||||
const tokenResponse = await fetch(
|
||||
`/api/connectors/${provider}/token?connection_id=${activeConnection.connection_id}`,
|
||||
);
|
||||
if (tokenResponse.ok) {
|
||||
const tokenData = await tokenResponse.json();
|
||||
if (tokenData.access_token) {
|
||||
hasAccessToken = true;
|
||||
setAccessToken(tokenData.access_token);
|
||||
}
|
||||
} else {
|
||||
const errorData = await tokenResponse
|
||||
.json()
|
||||
.catch(() => ({ error: "Token unavailable" }));
|
||||
accessTokenError = errorData.error || "Access token unavailable";
|
||||
}
|
||||
} catch {
|
||||
accessTokenError = "Failed to fetch access token";
|
||||
}
|
||||
}
|
||||
// Try to get access token for connected connectors
|
||||
if (isConnected && activeConnection) {
|
||||
try {
|
||||
const tokenResponse = await fetch(
|
||||
`/api/connectors/${provider}/token?connection_id=${activeConnection.connection_id}`
|
||||
);
|
||||
if (tokenResponse.ok) {
|
||||
const tokenData = await tokenResponse.json();
|
||||
if (tokenData.access_token) {
|
||||
hasAccessToken = true;
|
||||
setAccessToken(tokenData.access_token);
|
||||
}
|
||||
} else {
|
||||
const errorData = await tokenResponse
|
||||
.json()
|
||||
.catch(() => ({ error: "Token unavailable" }));
|
||||
accessTokenError = errorData.error || "Access token unavailable";
|
||||
}
|
||||
} catch {
|
||||
accessTokenError = "Failed to fetch access token";
|
||||
}
|
||||
}
|
||||
|
||||
setConnector({
|
||||
id: provider,
|
||||
name: providerInfo.name,
|
||||
description: providerInfo.description,
|
||||
status: isConnected ? "connected" : "not_connected",
|
||||
type: provider,
|
||||
connectionId: activeConnection?.connection_id,
|
||||
clientId: activeConnection?.client_id,
|
||||
hasAccessToken,
|
||||
accessTokenError,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to load connector info:", error);
|
||||
setError(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Failed to load connector information",
|
||||
);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
setConnector({
|
||||
id: provider,
|
||||
name: providerInfo.name,
|
||||
description: providerInfo.description,
|
||||
status: isConnected ? "connected" : "not_connected",
|
||||
type: provider,
|
||||
connectionId: activeConnection?.connection_id,
|
||||
clientId: activeConnection?.client_id,
|
||||
hasAccessToken,
|
||||
accessTokenError,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to load connector info:", error);
|
||||
setError(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Failed to load connector information"
|
||||
);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (provider) {
|
||||
fetchConnectorInfo();
|
||||
}
|
||||
}, [provider]);
|
||||
if (provider) {
|
||||
fetchConnectorInfo();
|
||||
}
|
||||
}, [provider]);
|
||||
|
||||
// Watch for sync task completion and redirect
|
||||
useEffect(() => {
|
||||
if (!currentSyncTaskId) return;
|
||||
// Watch for sync task completion and redirect
|
||||
useEffect(() => {
|
||||
if (!currentSyncTaskId) return;
|
||||
|
||||
const currentTask = tasks.find(
|
||||
(task) => task.task_id === currentSyncTaskId,
|
||||
);
|
||||
const currentTask = tasks.find(
|
||||
(task) => task.task_id === currentSyncTaskId
|
||||
);
|
||||
|
||||
if (currentTask && currentTask.status === "completed") {
|
||||
// Task completed successfully, show toast and redirect
|
||||
setIsIngesting(false);
|
||||
setTimeout(() => {
|
||||
router.push("/knowledge");
|
||||
}, 2000); // 2 second delay to let user see toast
|
||||
} else if (currentTask && currentTask.status === "failed") {
|
||||
// Task failed, clear the tracking but don't redirect
|
||||
setIsIngesting(false);
|
||||
setCurrentSyncTaskId(null);
|
||||
}
|
||||
}, [tasks, currentSyncTaskId, router]);
|
||||
if (currentTask && currentTask.status === "completed") {
|
||||
// Task completed successfully, show toast and redirect
|
||||
setIsIngesting(false);
|
||||
setTimeout(() => {
|
||||
router.push("/knowledge");
|
||||
}, 2000); // 2 second delay to let user see toast
|
||||
} else if (currentTask && currentTask.status === "failed") {
|
||||
// Task failed, clear the tracking but don't redirect
|
||||
setIsIngesting(false);
|
||||
setCurrentSyncTaskId(null);
|
||||
}
|
||||
}, [tasks, currentSyncTaskId, router]);
|
||||
|
||||
const handleFileSelected = (files: CloudFile[]) => {
|
||||
setSelectedFiles(files);
|
||||
console.log(`Selected ${files.length} files from ${provider}:`, files);
|
||||
// You can add additional handling here like triggering sync, etc.
|
||||
};
|
||||
const handleFileSelected = (files: CloudFile[]) => {
|
||||
setSelectedFiles(files);
|
||||
console.log(`Selected ${files.length} files from ${provider}:`, files);
|
||||
// You can add additional handling here like triggering sync, etc.
|
||||
};
|
||||
|
||||
const handleSync = async (connector: CloudConnector) => {
|
||||
if (!connector.connectionId || selectedFiles.length === 0) return;
|
||||
const handleSync = async (connector: CloudConnector) => {
|
||||
if (!connector.connectionId || selectedFiles.length === 0) return;
|
||||
|
||||
setIsIngesting(true);
|
||||
setIsIngesting(true);
|
||||
|
||||
try {
|
||||
const syncBody: {
|
||||
connection_id: string;
|
||||
max_files?: number;
|
||||
selected_files?: string[];
|
||||
settings?: IngestSettings;
|
||||
} = {
|
||||
connection_id: connector.connectionId,
|
||||
selected_files: selectedFiles.map((file) => file.id),
|
||||
settings: ingestSettings,
|
||||
};
|
||||
try {
|
||||
const syncBody: {
|
||||
connection_id: string;
|
||||
max_files?: number;
|
||||
selected_files?: string[];
|
||||
settings?: IngestSettings;
|
||||
} = {
|
||||
connection_id: connector.connectionId,
|
||||
selected_files: selectedFiles.map((file) => file.id),
|
||||
settings: ingestSettings,
|
||||
};
|
||||
|
||||
const response = await fetch(`/api/connectors/${connector.type}/sync`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(syncBody),
|
||||
});
|
||||
const response = await fetch(`/api/connectors/${connector.type}/sync`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(syncBody),
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
const result = await response.json();
|
||||
|
||||
if (response.status === 201) {
|
||||
const taskIds = result.task_ids;
|
||||
if (taskIds && taskIds.length > 0) {
|
||||
const taskId = taskIds[0]; // Use the first task ID
|
||||
addTask(taskId);
|
||||
setCurrentSyncTaskId(taskId);
|
||||
}
|
||||
} else {
|
||||
console.error("Sync failed:", result.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Sync error:", error);
|
||||
setIsIngesting(false);
|
||||
}
|
||||
};
|
||||
if (response.status === 201) {
|
||||
const taskIds = result.task_ids;
|
||||
if (taskIds && taskIds.length > 0) {
|
||||
const taskId = taskIds[0]; // Use the first task ID
|
||||
addTask(taskId);
|
||||
setCurrentSyncTaskId(taskId);
|
||||
}
|
||||
} else {
|
||||
console.error("Sync failed:", result.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Sync error:", error);
|
||||
setIsIngesting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getProviderDisplayName = () => {
|
||||
const nameMap: { [key: string]: string } = {
|
||||
google_drive: "Google Drive",
|
||||
onedrive: "OneDrive",
|
||||
sharepoint: "SharePoint",
|
||||
};
|
||||
return nameMap[provider] || provider;
|
||||
};
|
||||
const getProviderDisplayName = () => {
|
||||
const nameMap: { [key: string]: string } = {
|
||||
google_drive: "Google Drive",
|
||||
onedrive: "OneDrive",
|
||||
sharepoint: "SharePoint",
|
||||
};
|
||||
return nameMap[provider] || provider;
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
|
||||
<p>Loading {getProviderDisplayName()} connector...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
|
||||
<p>Loading {getProviderDisplayName()} connector...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !connector) {
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="mb-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => router.back()}
|
||||
className="mb-4"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
if (error || !connector) {
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="mb-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => router.back()}
|
||||
className="mb-4"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center max-w-md">
|
||||
<AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold mb-2">
|
||||
Provider Not Available
|
||||
</h2>
|
||||
<p className="text-muted-foreground mb-4">{error}</p>
|
||||
<Button onClick={() => router.push("/settings")}>
|
||||
Configure Connectors
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center max-w-md">
|
||||
<AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold mb-2">
|
||||
Provider Not Available
|
||||
</h2>
|
||||
<p className="text-muted-foreground mb-4">{error}</p>
|
||||
<Button onClick={() => router.push("/settings")}>
|
||||
Configure Connectors
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (connector.status !== "connected") {
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="mb-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => router.back()}
|
||||
className="mb-4"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
if (connector.status !== "connected") {
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="mb-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => router.back()}
|
||||
className="mb-4"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center max-w-md">
|
||||
<AlertCircle className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold mb-2">
|
||||
{connector.name} Not Connected
|
||||
</h2>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
You need to connect your {connector.name} account before you can
|
||||
select files.
|
||||
</p>
|
||||
<Button onClick={() => router.push("/settings")}>
|
||||
Connect {connector.name}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center max-w-md">
|
||||
<AlertCircle className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold mb-2">
|
||||
{connector.name} Not Connected
|
||||
</h2>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
You need to connect your {connector.name} account before you can
|
||||
select files.
|
||||
</p>
|
||||
<Button onClick={() => router.push("/settings")}>
|
||||
Connect {connector.name}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!connector.hasAccessToken) {
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="mb-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => router.back()}
|
||||
className="mb-4"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
if (!connector.hasAccessToken) {
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="mb-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => router.back()}
|
||||
className="mb-4"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center max-w-md">
|
||||
<AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold mb-2">
|
||||
Access Token Required
|
||||
</h2>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
{connector.accessTokenError ||
|
||||
`Unable to get access token for ${connector.name}. Try reconnecting your account.`}
|
||||
</p>
|
||||
<Button onClick={() => router.push("/settings")}>
|
||||
Reconnect {connector.name}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center max-w-md">
|
||||
<AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold mb-2">
|
||||
Access Token Required
|
||||
</h2>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
{connector.accessTokenError ||
|
||||
`Unable to get access token for ${connector.name}. Try reconnecting your account.`}
|
||||
</p>
|
||||
<Button onClick={() => router.push("/settings")}>
|
||||
Reconnect {connector.name}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-3xl p-6">
|
||||
<div className="mb-6 flex gap-2 items-center">
|
||||
<Button variant="ghost" onClick={() => router.back()}>
|
||||
<ArrowLeft className="h-4 w-4 scale-125" />
|
||||
</Button>
|
||||
<h2 className="text-2xl font-bold">
|
||||
Add from {getProviderDisplayName()}
|
||||
</h2>
|
||||
</div>
|
||||
const hasSelectedFiles = selectedFiles.length > 0;
|
||||
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<UnifiedCloudPicker
|
||||
provider={
|
||||
connector.type as "google_drive" | "onedrive" | "sharepoint"
|
||||
}
|
||||
onFileSelected={handleFileSelected}
|
||||
selectedFiles={selectedFiles}
|
||||
isAuthenticated={true}
|
||||
accessToken={accessToken || undefined}
|
||||
clientId={connector.clientId}
|
||||
onSettingsChange={setIngestSettings}
|
||||
/>
|
||||
</div>
|
||||
return (
|
||||
<div className="container mx-auto max-w-3xl px-6">
|
||||
<div className="mb-8 flex gap-2 items-center">
|
||||
<Button variant="ghost" onClick={() => router.back()} size="icon">
|
||||
<ArrowLeft size={18} />
|
||||
</Button>
|
||||
<h2 className="text-xl text-[18px] font-semibold">
|
||||
Add from {getProviderDisplayName()}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="max-w-3xl mx-auto mt-6">
|
||||
<div className="flex justify-between gap-3 mb-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className=" border bg-transparent border-border rounded-lg text-secondary-foreground"
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => handleSync(connector)}
|
||||
disabled={selectedFiles.length === 0 || isIngesting}
|
||||
>
|
||||
{isIngesting ? (
|
||||
<>Ingesting {selectedFiles.length} Files...</>
|
||||
) : (
|
||||
<>Start ingest</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<UnifiedCloudPicker
|
||||
provider={
|
||||
connector.type as "google_drive" | "onedrive" | "sharepoint"
|
||||
}
|
||||
onFileSelected={handleFileSelected}
|
||||
selectedFiles={selectedFiles}
|
||||
isAuthenticated={true}
|
||||
isIngesting={isIngesting}
|
||||
accessToken={accessToken || undefined}
|
||||
clientId={connector.clientId}
|
||||
onSettingsChange={setIngestSettings}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="border bg-transparent border-border rounded-lg text-secondary-foreground"
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Button
|
||||
className="bg-foreground text-background hover:bg-foreground/90 font-semibold"
|
||||
variant={!hasSelectedFiles ? "secondary" : undefined}
|
||||
onClick={() => handleSync(connector)}
|
||||
loading={isIngesting}
|
||||
disabled={!hasSelectedFiles || isIngesting}
|
||||
>
|
||||
{!hasSelectedFiles ? (
|
||||
<>Ingest files</>
|
||||
) : (
|
||||
<>
|
||||
Ingest {selectedFiles.length} file
|
||||
{selectedFiles.length > 1 ? "s" : ""}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
{!hasSelectedFiles ? (
|
||||
<TooltipContent side="left">
|
||||
Select at least one file before ingesting
|
||||
</TooltipContent>
|
||||
) : null}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
"use client";
|
||||
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { FileText, Folder, Trash } from "lucide-react";
|
||||
import { FileText, Folder, Trash2 } from "lucide-react";
|
||||
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 {
|
||||
provider: string;
|
||||
file: CloudFile;
|
||||
shouldDisableActions: boolean;
|
||||
onRemove: (fileId: string) => void;
|
||||
}
|
||||
|
||||
|
|
@ -41,27 +46,43 @@ const formatFileSize = (bytes?: number) => {
|
|||
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
|
||||
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">
|
||||
{getFileIcon(file.mimeType)}
|
||||
{provider ? getProviderIcon(provider) : getFileIcon(file.mimeType)}
|
||||
<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)}
|
||||
</Badge>
|
||||
</span>
|
||||
</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">
|
||||
{formatFileSize(file.size) || "—"}
|
||||
</span>
|
||||
|
||||
<Trash
|
||||
className="text-muted-foreground w-5 h-5 cursor-pointer hover:text-destructive"
|
||||
<Button
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => onRemove(file.id)}
|
||||
/>
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,37 +5,50 @@ import { CloudFile } from "./types";
|
|||
import { FileItem } from "./file-item";
|
||||
|
||||
interface FileListProps {
|
||||
provider: string;
|
||||
files: CloudFile[];
|
||||
onClearAll: () => void;
|
||||
onRemoveFile: (fileId: string) => void;
|
||||
shouldDisableActions: boolean;
|
||||
}
|
||||
|
||||
export const FileList = ({
|
||||
provider,
|
||||
files,
|
||||
onClearAll,
|
||||
onRemoveFile,
|
||||
shouldDisableActions,
|
||||
}: FileListProps) => {
|
||||
if (files.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-2 relative">
|
||||
<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
|
||||
ignoreTitleCase={true}
|
||||
onClick={onClearAll}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="text-sm text-muted-foreground"
|
||||
>
|
||||
Clear all
|
||||
Remove all
|
||||
</Button>
|
||||
</div>
|
||||
<div className="max-h-64 overflow-y-auto space-y-1">
|
||||
{files.map(file => (
|
||||
<FileItem key={file.id} file={file} onRemove={onRemoveFile} />
|
||||
))}
|
||||
<div className="box-shadow-inner">
|
||||
<div className="max-h-[calc(100vh-720px)] overflow-y-auto space-y-1 pr-1 pb-4 relative">
|
||||
{files.map((file) => (
|
||||
<FileItem
|
||||
key={file.id}
|
||||
file={file}
|
||||
onRemove={onRemoveFile}
|
||||
provider={provider}
|
||||
shouldDisableActions={shouldDisableActions}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,28 @@
|
|||
"use client";
|
||||
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { ChevronRight, Info } from "lucide-react";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
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 {
|
||||
isOpen: boolean;
|
||||
|
|
@ -44,7 +58,7 @@ export const IngestSettings = ({
|
|||
<Collapsible
|
||||
open={isOpen}
|
||||
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">
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
@ -58,35 +72,85 @@ export const IngestSettings = ({
|
|||
</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">
|
||||
<div className="pt-5 space-y-5">
|
||||
<div className="flex items-center gap-4 w-full">
|
||||
<div className="mt-6">
|
||||
{/* 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="text-sm mb-2 font-semibold">Chunk size</div>
|
||||
<Input
|
||||
type="number"
|
||||
<NumberInput
|
||||
id="chunk-size"
|
||||
label="Chunk size"
|
||||
value={currentSettings.chunkSize}
|
||||
onChange={e =>
|
||||
handleSettingsChange({
|
||||
chunkSize: parseInt(e.target.value) || 0,
|
||||
})
|
||||
}
|
||||
onChange={(value) => handleSettingsChange({ chunkSize: value })}
|
||||
unit="characters"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="text-sm mb-2 font-semibold">Chunk overlap</div>
|
||||
<Input
|
||||
type="number"
|
||||
<NumberInput
|
||||
id="chunk-overlap"
|
||||
label="Chunk overlap"
|
||||
value={currentSettings.chunkOverlap}
|
||||
onChange={e =>
|
||||
handleSettingsChange({
|
||||
chunkOverlap: parseInt(e.target.value) || 0,
|
||||
})
|
||||
onChange={(value) =>
|
||||
handleSettingsChange({ chunkOverlap: value })
|
||||
}
|
||||
unit="characters"
|
||||
/>
|
||||
</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 className="text-sm font-semibold pb-2">OCR</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
|
|
@ -95,13 +159,13 @@ export const IngestSettings = ({
|
|||
</div>
|
||||
<Switch
|
||||
checked={currentSettings.ocr}
|
||||
onCheckedChange={checked =>
|
||||
onCheckedChange={(checked) =>
|
||||
handleSettingsChange({ ocr: checked })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 items-center justify-between">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm pb-2 font-semibold">
|
||||
Picture descriptions
|
||||
|
|
@ -112,26 +176,11 @@ export const IngestSettings = ({
|
|||
</div>
|
||||
<Switch
|
||||
checked={currentSettings.pictureDescriptions}
|
||||
onCheckedChange={checked =>
|
||||
onCheckedChange={(checked) =>
|
||||
handleSettingsChange({ pictureDescriptions: checked })
|
||||
}
|
||||
/>
|
||||
</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>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
|
|
|||
|
|
@ -51,19 +51,13 @@ export const PickerHeader = ({
|
|||
Select files from {getProviderName(provider)} to ingest.
|
||||
</p>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={onAddFiles}
|
||||
disabled={!isPickerLoaded || isPickerOpen || !accessToken}
|
||||
className="bg-foreground text-background hover:bg-foreground/90 font-semibold"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Add Files
|
||||
{isPickerOpen ? "Opening picker..." : "Add files"}
|
||||
</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>
|
||||
</Card>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ export interface UnifiedCloudPickerProps {
|
|||
baseUrl?: string;
|
||||
// Ingest settings
|
||||
onSettingsChange?: (settings: IngestSettings) => void;
|
||||
isIngesting: boolean;
|
||||
}
|
||||
|
||||
export interface GoogleAPI {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ export const UnifiedCloudPicker = ({
|
|||
onFileSelected,
|
||||
selectedFiles = [],
|
||||
isAuthenticated,
|
||||
isIngesting,
|
||||
accessToken,
|
||||
onPickerStateChange,
|
||||
clientId,
|
||||
|
|
@ -116,7 +117,7 @@ export const UnifiedCloudPicker = ({
|
|||
const handler = createProviderHandler(
|
||||
provider,
|
||||
accessToken,
|
||||
isOpen => {
|
||||
(isOpen) => {
|
||||
setIsPickerOpen(isOpen);
|
||||
onPickerStateChange?.(isOpen);
|
||||
},
|
||||
|
|
@ -126,8 +127,8 @@ export const UnifiedCloudPicker = ({
|
|||
|
||||
handler.openPicker((files: CloudFile[]) => {
|
||||
// Merge new files with existing ones, avoiding duplicates
|
||||
const existingIds = new Set(selectedFiles.map(f => f.id));
|
||||
const newFiles = files.filter(f => !existingIds.has(f.id));
|
||||
const existingIds = new Set(selectedFiles.map((f) => f.id));
|
||||
const newFiles = files.filter((f) => !existingIds.has(f.id));
|
||||
onFileSelected([...selectedFiles, ...newFiles]);
|
||||
});
|
||||
} catch (error) {
|
||||
|
|
@ -138,7 +139,7 @@ export const UnifiedCloudPicker = ({
|
|||
};
|
||||
|
||||
const handleRemoveFile = (fileId: string) => {
|
||||
const updatedFiles = selectedFiles.filter(file => file.id !== fileId);
|
||||
const updatedFiles = selectedFiles.filter((file) => file.id !== fileId);
|
||||
onFileSelected(updatedFiles);
|
||||
};
|
||||
|
||||
|
|
@ -168,20 +169,24 @@ export const UnifiedCloudPicker = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PickerHeader
|
||||
provider={provider}
|
||||
onAddFiles={handleAddFiles}
|
||||
isPickerLoaded={isPickerLoaded}
|
||||
isPickerOpen={isPickerOpen}
|
||||
accessToken={accessToken}
|
||||
isAuthenticated={isAuthenticated}
|
||||
/>
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<PickerHeader
|
||||
provider={provider}
|
||||
onAddFiles={handleAddFiles}
|
||||
isPickerLoaded={isPickerLoaded}
|
||||
isPickerOpen={isPickerOpen}
|
||||
accessToken={accessToken}
|
||||
isAuthenticated={isAuthenticated}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FileList
|
||||
provider={provider}
|
||||
files={selectedFiles}
|
||||
onClearAll={handleClearAll}
|
||||
onRemoveFile={handleRemoveFile}
|
||||
shouldDisableActions={isIngesting}
|
||||
/>
|
||||
|
||||
<IngestSettings
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue