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

Merge branch 'main' into feat-google-drive-folder-select

Browse source
This commit is contained in:
phact 2025-10-06 21:53:11 -04:00
commit 653825527a
24 changed files with 2662 additions and 2324 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1149
frontend/components/knowledge-dropdown.tsx
View file

File diff suppressed because it is too large Load diff

6
frontend/components/knowledge-filter-list.tsx
View file

@ -67,7 +67,7 @@ export function KnowledgeFilterList({
<div className="flex-1 min-h-0 flex flex-col"> <div className="flex-1 min-h-0 flex flex-col">
<div className="px-3 flex-1 min-h-0 flex flex-col"> <div className="px-3 flex-1 min-h-0 flex flex-col">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<div className="flex items-center justify-between mb-3 ml-3 mr-2"> <div className="flex items-center justify-between mb-3 mr-2 ml-4">
<h3 className="text-xs font-medium text-muted-foreground"> <h3 className="text-xs font-medium text-muted-foreground">
Knowledge Filters Knowledge Filters
</h3> </h3>
@ -82,11 +82,11 @@ export function KnowledgeFilterList({
</div> </div>
<div className="overflow-y-auto scrollbar-hide space-y-1"> <div className="overflow-y-auto scrollbar-hide space-y-1">
{loading ? ( {loading ? (
<div className="text-[13px] text-muted-foreground p-2 ml-1"> <div className="text-[13px] text-muted-foreground p-2 ml-2">
Loading... Loading...
</div> </div>
) : filters.length === 0 ? ( ) : filters.length === 0 ? (
<div className="text-[13px] text-muted-foreground p-2 ml-1"> <div className="text-[13px] text-muted-foreground pb-2 pt-3 ml-4">
{searchQuery ? "No filters found" : "No saved filters"} {searchQuery ? "No filters found" : "No saved filters"}
</div> </div>
) : ( ) : (

46
frontend/components/knowledge-filter-panel.tsx
View file

@ -136,7 +136,7 @@ export function KnowledgeFilterPanel() {
// Load available facets using search aggregations hook // Load available facets using search aggregations hook
const { data: aggregations } = useGetSearchAggregations("*", 1, 0, { const { data: aggregations } = useGetSearchAggregations("*", 1, 0, {
enabled: isPanelOpen, enabled: isPanelOpen,
placeholderData: (prev) => prev, placeholderData: prev => prev,
staleTime: 60_000, staleTime: 60_000,
gcTime: 5 * 60_000, gcTime: 5 * 60_000,
}); });
@ -214,7 +214,7 @@ export function KnowledgeFilterPanel() {
facetType: keyof typeof selectedFilters, facetType: keyof typeof selectedFilters,
newValues: string[] newValues: string[]
) => { ) => {
setSelectedFilters((prev) => ({ setSelectedFilters(prev => ({
...prev, ...prev,
[facetType]: newValues, [facetType]: newValues,
})); }));
@ -234,7 +234,7 @@ export function KnowledgeFilterPanel() {
return ( return (
<div className="h-full bg-background border-l"> <div className="h-full bg-background border-l">
<Card className="h-full rounded-none border-0 flex flex-col"> <Card className="h-full rounded-none border-0 flex flex-col">
<CardHeader className="pb-3"> <CardHeader className="pb-3 pt-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-lg flex items-center gap-2"> <CardTitle className="text-lg flex items-center gap-2">
Knowledge Filter Knowledge Filter
@ -271,7 +271,7 @@ export function KnowledgeFilterPanel() {
<Input <Input
id="filter-name" id="filter-name"
value={name} value={name}
onChange={(e) => { onChange={e => {
const v = e.target.value; const v = e.target.value;
setName(v); setName(v);
if (nameError && v.trim()) { if (nameError && v.trim()) {
@ -302,7 +302,7 @@ export function KnowledgeFilterPanel() {
<Textarea <Textarea
id="filter-description" id="filter-description"
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={e => setDescription(e.target.value)}
placeholder="Provide a brief description of your knowledge filter..." placeholder="Provide a brief description of your knowledge filter..."
rows={3} rows={3}
/> />
@ -319,7 +319,7 @@ export function KnowledgeFilterPanel() {
placeholder="Enter your search query..." placeholder="Enter your search query..."
value={query} value={query}
className="font-mono placeholder:font-mono" className="font-mono placeholder:font-mono"
onChange={(e) => setQuery(e.target.value)} onChange={e => setQuery(e.target.value)}
rows={2} rows={2}
disabled={!!queryOverride && !createMode} disabled={!!queryOverride && !createMode}
/> />
@ -329,13 +329,13 @@ export function KnowledgeFilterPanel() {
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<MultiSelect <MultiSelect
options={(availableFacets.data_sources || []).map((bucket) => ({ options={(availableFacets.data_sources || []).map(bucket => ({
value: bucket.key, value: bucket.key,
label: bucket.key, label: bucket.key,
count: bucket.count, count: bucket.count,
}))} }))}
value={selectedFilters.data_sources} value={selectedFilters.data_sources}
onValueChange={(values) => onValueChange={values =>
handleFilterChange("data_sources", values) handleFilterChange("data_sources", values)
} }
placeholder="Select sources..." placeholder="Select sources..."
@ -345,15 +345,13 @@ export function KnowledgeFilterPanel() {
<div className="space-y-2"> <div className="space-y-2">
<MultiSelect <MultiSelect
options={(availableFacets.document_types || []).map( options={(availableFacets.document_types || []).map(bucket => ({
(bucket) => ({ value: bucket.key,
value: bucket.key, label: bucket.key,
label: bucket.key, count: bucket.count,
count: bucket.count, }))}
})
)}
value={selectedFilters.document_types} value={selectedFilters.document_types}
onValueChange={(values) => onValueChange={values =>
handleFilterChange("document_types", values) handleFilterChange("document_types", values)
} }
placeholder="Select types..." placeholder="Select types..."
@ -363,13 +361,13 @@ export function KnowledgeFilterPanel() {
<div className="space-y-2"> <div className="space-y-2">
<MultiSelect <MultiSelect
options={(availableFacets.owners || []).map((bucket) => ({ options={(availableFacets.owners || []).map(bucket => ({
value: bucket.key, value: bucket.key,
label: bucket.key, label: bucket.key,
count: bucket.count, count: bucket.count,
}))} }))}
value={selectedFilters.owners} value={selectedFilters.owners}
onValueChange={(values) => handleFilterChange("owners", values)} onValueChange={values => handleFilterChange("owners", values)}
placeholder="Select owners..." placeholder="Select owners..."
allOptionLabel="All Owners" allOptionLabel="All Owners"
/> />
@ -378,14 +376,14 @@ export function KnowledgeFilterPanel() {
<div className="space-y-2"> <div className="space-y-2">
<MultiSelect <MultiSelect
options={(availableFacets.connector_types || []).map( options={(availableFacets.connector_types || []).map(
(bucket) => ({ bucket => ({
value: bucket.key, value: bucket.key,
label: bucket.key, label: bucket.key,
count: bucket.count, count: bucket.count,
}) })
)} )}
value={selectedFilters.connector_types} value={selectedFilters.connector_types}
onValueChange={(values) => onValueChange={values =>
handleFilterChange("connector_types", values) handleFilterChange("connector_types", values)
} }
placeholder="Select connectors..." placeholder="Select connectors..."
@ -405,7 +403,7 @@ export function KnowledgeFilterPanel() {
min="1" min="1"
max="1000" max="1000"
value={resultLimit} value={resultLimit}
onChange={(e) => { onChange={e => {
const newLimit = Math.max( const newLimit = Math.max(
1, 1,
Math.min(1000, parseInt(e.target.value) || 1) Math.min(1000, parseInt(e.target.value) || 1)
@ -418,7 +416,7 @@ export function KnowledgeFilterPanel() {
</div> </div>
<Slider <Slider
value={[resultLimit]} value={[resultLimit]}
onValueChange={(values) => setResultLimit(values[0])} onValueChange={values => setResultLimit(values[0])}
max={1000} max={1000}
min={1} min={1}
step={1} step={1}
@ -438,7 +436,7 @@ export function KnowledgeFilterPanel() {
max="5" max="5"
step="0.1" step="0.1"
value={scoreThreshold} value={scoreThreshold}
onChange={(e) => onChange={e =>
setScoreThreshold(parseFloat(e.target.value) || 0) setScoreThreshold(parseFloat(e.target.value) || 0)
} }
className="h-6 text-xs text-right px-2 bg-muted/30 !border-0 rounded ml-auto focus:ring-0 focus:outline-none" className="h-6 text-xs text-right px-2 bg-muted/30 !border-0 rounded ml-auto focus:ring-0 focus:outline-none"
@ -447,7 +445,7 @@ export function KnowledgeFilterPanel() {
</div> </div>
<Slider <Slider
value={[scoreThreshold]} value={[scoreThreshold]}
onValueChange={(values) => setScoreThreshold(values[0])} onValueChange={values => setScoreThreshold(values[0])}
max={5} max={5}
min={0} min={0}
step={0.1} step={0.1}

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>
);
};

3
frontend/src/app/api/queries/useGetNudgesQuery.ts
View file

@ -6,8 +6,7 @@ import {
type Nudge = string; type Nudge = string;
const DEFAULT_NUDGES = [ const DEFAULT_NUDGES: Nudge[] = [];
];
export const useGetNudgesQuery = ( export const useGetNudgesQuery = (
chatId?: string | null, chatId?: string | null,

84
frontend/src/app/chat/page.tsx
View file

@ -230,7 +230,7 @@ function ChatPage() {
content: `🔄 Starting upload of **${file.name}**...`, content: `🔄 Starting upload of **${file.name}**...`,
timestamp: new Date(), timestamp: new Date(),
}; };
setMessages((prev) => [...prev, uploadStartMessage]); setMessages(prev => [...prev, uploadStartMessage]);
try { try {
const formData = new FormData(); const formData = new FormData();
@ -282,7 +282,7 @@ function ChatPage() {
content: `⏳ Upload initiated for **${file.name}**. Processing in background... (Task ID: ${taskId})`, content: `⏳ Upload initiated for **${file.name}**. Processing in background... (Task ID: ${taskId})`,
timestamp: new Date(), timestamp: new Date(),
}; };
setMessages((prev) => [...prev.slice(0, -1), pollingMessage]); setMessages(prev => [...prev.slice(0, -1), pollingMessage]);
} else if (response.ok) { } else if (response.ok) {
// Original flow: Direct response // Original flow: Direct response
@ -296,7 +296,7 @@ function ChatPage() {
timestamp: new Date(), timestamp: new Date(),
}; };
setMessages((prev) => [...prev.slice(0, -1), uploadMessage]); setMessages(prev => [...prev.slice(0, -1), uploadMessage]);
// Add file to conversation docs // Add file to conversation docs
if (result.filename) { if (result.filename) {
@ -305,7 +305,7 @@ function ChatPage() {
// Update the response ID for this endpoint // Update the response ID for this endpoint
if (result.response_id) { if (result.response_id) {
setPreviousResponseIds((prev) => ({ setPreviousResponseIds(prev => ({
...prev, ...prev,
[endpoint]: result.response_id, [endpoint]: result.response_id,
})); }));
@ -329,7 +329,7 @@ function ChatPage() {
content: `❌ Failed to process document. Please try again.`, content: `❌ Failed to process document. Please try again.`,
timestamp: new Date(), timestamp: new Date(),
}; };
setMessages((prev) => [...prev.slice(0, -1), errorMessage]); setMessages(prev => [...prev.slice(0, -1), errorMessage]);
} finally { } finally {
setIsUploading(false); setIsUploading(false);
setLoading(false); setLoading(false);
@ -620,7 +620,7 @@ function ChatPage() {
lastLoadedConversationRef.current = conversationData.response_id; lastLoadedConversationRef.current = conversationData.response_id;
// Set the previous response ID for this conversation // Set the previous response ID for this conversation
setPreviousResponseIds((prev) => ({ setPreviousResponseIds(prev => ({
...prev, ...prev,
[conversationData.endpoint]: conversationData.response_id, [conversationData.endpoint]: conversationData.response_id,
})); }));
@ -662,7 +662,7 @@ function ChatPage() {
content: `🔄 Starting upload of **${filename}**...`, content: `🔄 Starting upload of **${filename}**...`,
timestamp: new Date(), timestamp: new Date(),
}; };
setMessages((prev) => [...prev, uploadStartMessage]); setMessages(prev => [...prev, uploadStartMessage]);
}; };
const handleFileUploaded = (event: CustomEvent) => { const handleFileUploaded = (event: CustomEvent) => {
@ -680,11 +680,11 @@ function ChatPage() {
timestamp: new Date(), timestamp: new Date(),
}; };
setMessages((prev) => [...prev.slice(0, -1), uploadMessage]); setMessages(prev => [...prev.slice(0, -1), uploadMessage]);
// Update the response ID for this endpoint // Update the response ID for this endpoint
if (result.response_id) { if (result.response_id) {
setPreviousResponseIds((prev) => ({ setPreviousResponseIds(prev => ({
...prev, ...prev,
[endpoint]: result.response_id, [endpoint]: result.response_id,
})); }));
@ -711,7 +711,7 @@ function ChatPage() {
content: `❌ Upload failed for **${filename}**: ${error}`, content: `❌ Upload failed for **${filename}**: ${error}`,
timestamp: new Date(), timestamp: new Date(),
}; };
setMessages((prev) => [...prev.slice(0, -1), errorMessage]); setMessages(prev => [...prev.slice(0, -1), errorMessage]);
}; };
window.addEventListener( window.addEventListener(
@ -1007,7 +1007,7 @@ function ChatPage() {
if (chunk.delta.finish_reason) { if (chunk.delta.finish_reason) {
console.log("Finish reason:", chunk.delta.finish_reason); console.log("Finish reason:", chunk.delta.finish_reason);
// Mark any pending function calls as completed // Mark any pending function calls as completed
currentFunctionCalls.forEach((fc) => { currentFunctionCalls.forEach(fc => {
if (fc.status === "pending" && fc.argumentsString) { if (fc.status === "pending" && fc.argumentsString) {
try { try {
fc.arguments = JSON.parse(fc.argumentsString); fc.arguments = JSON.parse(fc.argumentsString);
@ -1040,13 +1040,13 @@ function ChatPage() {
// Try to find an existing pending call to update (created by earlier deltas) // Try to find an existing pending call to update (created by earlier deltas)
let existing = currentFunctionCalls.find( let existing = currentFunctionCalls.find(
(fc) => fc.id === chunk.item.id fc => fc.id === chunk.item.id
); );
if (!existing) { if (!existing) {
existing = [...currentFunctionCalls] existing = [...currentFunctionCalls]
.reverse() .reverse()
.find( .find(
(fc) => fc =>
fc.status === "pending" && fc.status === "pending" &&
!fc.id && !fc.id &&
fc.name === (chunk.item.tool_name || chunk.item.name) fc.name === (chunk.item.tool_name || chunk.item.name)
@ -1077,7 +1077,7 @@ function ChatPage() {
currentFunctionCalls.push(functionCall); currentFunctionCalls.push(functionCall);
console.log( console.log(
"🟢 Function calls now:", "🟢 Function calls now:",
currentFunctionCalls.map((fc) => ({ currentFunctionCalls.map(fc => ({
id: fc.id, id: fc.id,
name: fc.name, name: fc.name,
})) }))
@ -1150,7 +1150,7 @@ function ChatPage() {
); );
console.log( console.log(
"🔵 Looking for existing function calls:", "🔵 Looking for existing function calls:",
currentFunctionCalls.map((fc) => ({ currentFunctionCalls.map(fc => ({
id: fc.id, id: fc.id,
name: fc.name, name: fc.name,
})) }))
@ -1158,7 +1158,7 @@ function ChatPage() {
// Find existing function call by ID or name // Find existing function call by ID or name
const functionCall = currentFunctionCalls.find( const functionCall = currentFunctionCalls.find(
(fc) => fc =>
fc.id === chunk.item.id || fc.id === chunk.item.id ||
fc.name === chunk.item.tool_name || fc.name === chunk.item.tool_name ||
fc.name === chunk.item.name fc.name === chunk.item.name
@ -1206,7 +1206,7 @@ function ChatPage() {
// Find existing function call by ID, or by name/type if ID not available // Find existing function call by ID, or by name/type if ID not available
const functionCall = currentFunctionCalls.find( const functionCall = currentFunctionCalls.find(
(fc) => fc =>
fc.id === chunk.item.id || fc.id === chunk.item.id ||
fc.name === chunk.item.tool_name || fc.name === chunk.item.tool_name ||
fc.name === chunk.item.name || fc.name === chunk.item.name ||
@ -1261,13 +1261,13 @@ function ChatPage() {
// Dedupe by id or pending with same name // Dedupe by id or pending with same name
let existing = currentFunctionCalls.find( let existing = currentFunctionCalls.find(
(fc) => fc.id === chunk.item.id fc => fc.id === chunk.item.id
); );
if (!existing) { if (!existing) {
existing = [...currentFunctionCalls] existing = [...currentFunctionCalls]
.reverse() .reverse()
.find( .find(
(fc) => fc =>
fc.status === "pending" && fc.status === "pending" &&
!fc.id && !fc.id &&
fc.name === fc.name ===
@ -1306,7 +1306,7 @@ function ChatPage() {
currentFunctionCalls.push(functionCall); currentFunctionCalls.push(functionCall);
console.log( console.log(
"🟡 Function calls now:", "🟡 Function calls now:",
currentFunctionCalls.map((fc) => ({ currentFunctionCalls.map(fc => ({
id: fc.id, id: fc.id,
name: fc.name, name: fc.name,
type: fc.type, type: fc.type,
@ -1404,7 +1404,7 @@ function ChatPage() {
}; };
if (!controller.signal.aborted && thisStreamId === streamIdRef.current) { if (!controller.signal.aborted && thisStreamId === streamIdRef.current) {
setMessages((prev) => [...prev, finalMessage]); setMessages(prev => [...prev, finalMessage]);
setStreamingMessage(null); setStreamingMessage(null);
if (previousResponseIds[endpoint]) { if (previousResponseIds[endpoint]) {
cancelNudges(); cancelNudges();
@ -1417,7 +1417,7 @@ function ChatPage() {
!controller.signal.aborted && !controller.signal.aborted &&
thisStreamId === streamIdRef.current thisStreamId === streamIdRef.current
) { ) {
setPreviousResponseIds((prev) => ({ setPreviousResponseIds(prev => ({
...prev, ...prev,
[endpoint]: newResponseId, [endpoint]: newResponseId,
})); }));
@ -1445,7 +1445,7 @@ function ChatPage() {
"Sorry, I couldn't connect to the chat service. Please try again.", "Sorry, I couldn't connect to the chat service. Please try again.",
timestamp: new Date(), timestamp: new Date(),
}; };
setMessages((prev) => [...prev, errorMessage]); setMessages(prev => [...prev, errorMessage]);
} }
}; };
@ -1458,7 +1458,7 @@ function ChatPage() {
timestamp: new Date(), timestamp: new Date(),
}; };
setMessages((prev) => [...prev, userMessage]); setMessages(prev => [...prev, userMessage]);
setInput(""); setInput("");
setLoading(true); setLoading(true);
setIsFilterHighlighted(false); setIsFilterHighlighted(false);
@ -1524,14 +1524,14 @@ function ChatPage() {
content: result.response, content: result.response,
timestamp: new Date(), timestamp: new Date(),
}; };
setMessages((prev) => [...prev, assistantMessage]); setMessages(prev => [...prev, assistantMessage]);
if (result.response_id) { if (result.response_id) {
cancelNudges(); cancelNudges();
} }
// Store the response ID if present for this endpoint // Store the response ID if present for this endpoint
if (result.response_id) { if (result.response_id) {
setPreviousResponseIds((prev) => ({ setPreviousResponseIds(prev => ({
...prev, ...prev,
[endpoint]: result.response_id, [endpoint]: result.response_id,
})); }));
@ -1552,7 +1552,7 @@ function ChatPage() {
content: "Sorry, I encountered an error. Please try again.", content: "Sorry, I encountered an error. Please try again.",
timestamp: new Date(), timestamp: new Date(),
}; };
setMessages((prev) => [...prev, errorMessage]); setMessages(prev => [...prev, errorMessage]);
} }
} catch (error) { } catch (error) {
console.error("Chat error:", error); console.error("Chat error:", error);
@ -1562,7 +1562,7 @@ function ChatPage() {
"Sorry, I couldn't connect to the chat service. Please try again.", "Sorry, I couldn't connect to the chat service. Please try again.",
timestamp: new Date(), timestamp: new Date(),
}; };
setMessages((prev) => [...prev, errorMessage]); setMessages(prev => [...prev, errorMessage]);
} }
} }
@ -1575,7 +1575,7 @@ function ChatPage() {
}; };
const toggleFunctionCall = (functionCallId: string) => { const toggleFunctionCall = (functionCallId: string) => {
setExpandedFunctionCalls((prev) => { setExpandedFunctionCalls(prev => {
const newSet = new Set(prev); const newSet = new Set(prev);
if (newSet.has(functionCallId)) { if (newSet.has(functionCallId)) {
newSet.delete(functionCallId); newSet.delete(functionCallId);
@ -1632,7 +1632,7 @@ function ChatPage() {
// Set the response_id we want to continue from as the previous response ID // Set the response_id we want to continue from as the previous response ID
// This tells the backend to continue the conversation from this point // This tells the backend to continue the conversation from this point
setPreviousResponseIds((prev) => ({ setPreviousResponseIds(prev => ({
...prev, ...prev,
[endpoint]: responseIdToForkFrom, [endpoint]: responseIdToForkFrom,
})); }));
@ -1903,7 +1903,7 @@ function ChatPage() {
} }
if (isFilterDropdownOpen) { if (isFilterDropdownOpen) {
const filteredFilters = availableFilters.filter((filter) => const filteredFilters = availableFilters.filter(filter =>
filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase()) filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase())
); );
@ -1921,7 +1921,7 @@ function ChatPage() {
if (e.key === "ArrowDown") { if (e.key === "ArrowDown") {
e.preventDefault(); e.preventDefault();
setSelectedFilterIndex((prev) => setSelectedFilterIndex(prev =>
prev < filteredFilters.length - 1 ? prev + 1 : 0 prev < filteredFilters.length - 1 ? prev + 1 : 0
); );
return; return;
@ -1929,7 +1929,7 @@ function ChatPage() {
if (e.key === "ArrowUp") { if (e.key === "ArrowUp") {
e.preventDefault(); e.preventDefault();
setSelectedFilterIndex((prev) => setSelectedFilterIndex(prev =>
prev > 0 ? prev - 1 : filteredFilters.length - 1 prev > 0 ? prev - 1 : filteredFilters.length - 1
); );
return; return;
@ -2159,7 +2159,7 @@ function ChatPage() {
{endpoint === "chat" && ( {endpoint === "chat" && (
<div className="flex-shrink-0 ml-2"> <div className="flex-shrink-0 ml-2">
<button <button
onClick={(e) => handleForkConversation(index, e)} onClick={e => handleForkConversation(index, e)}
className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-accent rounded text-muted-foreground hover:text-foreground" className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-accent rounded text-muted-foreground hover:text-foreground"
title="Fork conversation from here" title="Fork conversation from here"
> >
@ -2223,8 +2223,8 @@ function ChatPage() {
)} )}
{/* Input Area - Fixed at bottom */} {/* Input Area - Fixed at bottom */}
<div className="flex-shrink-0 p-6 pb-8 pt-4 flex justify-center"> <div className="pb-8 pt-4 flex px-6">
<div className="w-full max-w-[75%]"> <div className="w-full">
<form onSubmit={handleSubmit} className="relative"> <form onSubmit={handleSubmit} className="relative">
<div className="relative w-full bg-muted/20 rounded-lg border border-border/50 focus-within:ring-1 focus-within:ring-ring"> <div className="relative w-full bg-muted/20 rounded-lg border border-border/50 focus-within:ring-1 focus-within:ring-ring">
{selectedFilter && ( {selectedFilter && (
@ -2257,7 +2257,7 @@ function ChatPage() {
value={input} value={input}
onChange={onChange} onChange={onChange}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onHeightChange={(height) => setTextareaHeight(height)} onHeightChange={height => setTextareaHeight(height)}
maxRows={7} maxRows={7}
minRows={2} minRows={2}
placeholder="Type to ask a question..." placeholder="Type to ask a question..."
@ -2286,7 +2286,7 @@ function ChatPage() {
variant="outline" variant="outline"
size="iconSm" size="iconSm"
className="absolute bottom-3 left-3 h-8 w-8 p-0 rounded-full hover:bg-muted/50" className="absolute bottom-3 left-3 h-8 w-8 p-0 rounded-full hover:bg-muted/50"
onMouseDown={(e) => { onMouseDown={e => {
e.preventDefault(); e.preventDefault();
}} }}
onClick={onAtClick} onClick={onAtClick}
@ -2296,7 +2296,7 @@ function ChatPage() {
</Button> </Button>
<Popover <Popover
open={isFilterDropdownOpen} open={isFilterDropdownOpen}
onOpenChange={(open) => { onOpenChange={open => {
setIsFilterDropdownOpen(open); setIsFilterDropdownOpen(open);
}} }}
> >
@ -2321,7 +2321,7 @@ function ChatPage() {
align="start" align="start"
sideOffset={6} sideOffset={6}
alignOffset={-18} alignOffset={-18}
onOpenAutoFocus={(e) => { onOpenAutoFocus={e => {
// Prevent auto focus on the popover content // Prevent auto focus on the popover content
e.preventDefault(); e.preventDefault();
// Keep focus on the input // Keep focus on the input
@ -2354,7 +2354,7 @@ function ChatPage() {
</button> </button>
)} )}
{availableFilters {availableFilters
.filter((filter) => .filter(filter =>
filter.name filter.name
.toLowerCase() .toLowerCase()
.includes(filterSearchTerm.toLowerCase()) .includes(filterSearchTerm.toLowerCase())
@ -2383,7 +2383,7 @@ function ChatPage() {
)} )}
</button> </button>
))} ))}
{availableFilters.filter((filter) => {availableFilters.filter(filter =>
filter.name filter.name
.toLowerCase() .toLowerCase()
.includes(filterSearchTerm.toLowerCase()) .includes(filterSearchTerm.toLowerCase())

1
frontend/src/app/connectors/page.tsx
View file

@ -92,6 +92,7 @@ export default function ConnectorsPage() {
selectedFiles={selectedFiles} selectedFiles={selectedFiles}
isAuthenticated={false} // This would come from auth context in real usage isAuthenticated={false} // This would come from auth context in real usage
accessToken={undefined} // This would come from connected account accessToken={undefined} // This would come from connected account
isIngesting={isSyncing}
/> />
</div> </div>

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;
}
} }

368
frontend/src/app/knowledge/chunks/page.tsx
View file

@ -14,19 +14,19 @@ import { Label } from "@/components/ui/label";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context"; import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { useTask } from "@/contexts/task-context"; import { useTask } from "@/contexts/task-context";
import { import {
type ChunkResult, type ChunkResult,
type File, type File,
useGetSearchQuery, useGetSearchQuery,
} from "../../api/queries/useGetSearchQuery"; } from "../../api/queries/useGetSearchQuery";
// import { Label } from "@/components/ui/label"; // import { Label } from "@/components/ui/label";
// import { Checkbox } from "@/components/ui/checkbox"; // import { Checkbox } from "@/components/ui/checkbox";
import { KnowledgeSearchInput } from "@/components/knowledge-search-input"; import { KnowledgeSearchInput } from "@/components/knowledge-search-input";
const getFileTypeLabel = (mimetype: string) => { const getFileTypeLabel = (mimetype: string) => {
if (mimetype === "application/pdf") return "PDF"; if (mimetype === "application/pdf") return "PDF";
if (mimetype === "text/plain") return "Text"; if (mimetype === "text/plain") return "Text";
if (mimetype === "application/msword") return "Word Document"; if (mimetype === "application/msword") return "Word Document";
return "Unknown"; return "Unknown";
}; };
function ChunksPageContent() { function ChunksPageContent() {
@ -43,13 +43,13 @@ function ChunksPageContent() {
number | null number | null
>(null); >(null);
// Calculate average chunk length // Calculate average chunk length
const averageChunkLength = useMemo( const averageChunkLength = useMemo(
() => () =>
chunks.reduce((acc, chunk) => acc + chunk.text.length, 0) / chunks.reduce((acc, chunk) => acc + chunk.text.length, 0) /
chunks.length || 0, chunks.length || 0,
[chunks], [chunks]
); );
// const [selectAll, setSelectAll] = useState(false); // const [selectAll, setSelectAll] = useState(false);
@ -59,70 +59,70 @@ function ChunksPageContent() {
parsedFilterData parsedFilterData
); );
const handleCopy = useCallback((text: string, index: number) => { const handleCopy = useCallback((text: string, index: number) => {
// Trim whitespace and remove new lines/tabs for cleaner copy // Trim whitespace and remove new lines/tabs for cleaner copy
navigator.clipboard.writeText(text.trim().replace(/[\n\r\t]/gm, "")); navigator.clipboard.writeText(text.trim().replace(/[\n\r\t]/gm, ""));
setActiveCopiedChunkIndex(index); setActiveCopiedChunkIndex(index);
setTimeout(() => setActiveCopiedChunkIndex(null), 10 * 1000); // 10 seconds setTimeout(() => setActiveCopiedChunkIndex(null), 10 * 1000); // 10 seconds
}, []); }, []);
const fileData = (data as File[]).find( const fileData = (data as File[]).find(
(file: File) => file.filename === filename, (file: File) => file.filename === filename
); );
// Extract chunks for the specific file // Extract chunks for the specific file
useEffect(() => { useEffect(() => {
if (!filename || !(data as File[]).length) { if (!filename || !(data as File[]).length) {
setChunks([]); setChunks([]);
return; return;
} }
setChunks( setChunks(
fileData?.chunks?.map((chunk, i) => ({ ...chunk, index: i + 1 })) || [], fileData?.chunks?.map((chunk, i) => ({ ...chunk, index: i + 1 })) || []
); );
}, [data, filename]); }, [data, filename]);
// Set selected state for all checkboxes when selectAll changes // Set selected state for all checkboxes when selectAll changes
useEffect(() => { // useEffect(() => {
if (selectAll) { // if (selectAll) {
setSelectedChunks(new Set(chunks.map((_, index) => index))); // setSelectedChunks(new Set(chunks.map((_, index) => index)));
} else { // } else {
setSelectedChunks(new Set()); // setSelectedChunks(new Set());
} // }
}, [selectAll, setSelectedChunks, chunks]); // }, [selectAll, setSelectedChunks, chunks]);
const handleBack = useCallback(() => { const handleBack = useCallback(() => {
router.push("/knowledge"); router.push("/knowledge");
}, [router]); }, [router]);
// const handleChunkCardCheckboxChange = useCallback( // const handleChunkCardCheckboxChange = useCallback(
// (index: number) => { // (index: number) => {
// setSelectedChunks((prevSelected) => { // setSelectedChunks((prevSelected) => {
// const newSelected = new Set(prevSelected); // const newSelected = new Set(prevSelected);
// if (newSelected.has(index)) { // if (newSelected.has(index)) {
// newSelected.delete(index); // newSelected.delete(index);
// } else { // } else {
// newSelected.add(index); // newSelected.add(index);
// } // }
// return newSelected; // return newSelected;
// }); // });
// }, // },
// [setSelectedChunks] // [setSelectedChunks]
// ); // );
if (!filename) { if (!filename) {
return ( return (
<div className="flex items-center justify-center h-64"> <div className="flex items-center justify-center h-64">
<div className="text-center"> <div className="text-center">
<Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" /> <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
<p className="text-lg text-muted-foreground">No file specified</p> <p className="text-lg text-muted-foreground">No file specified</p>
<p className="text-sm text-muted-foreground/70 mt-2"> <p className="text-sm text-muted-foreground/70 mt-2">
Please select a file from the knowledge page Please select a file from the knowledge page
</p> </p>
</div> </div>
</div> </div>
); );
} }
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
@ -149,7 +149,7 @@ function ChunksPageContent() {
<Checkbox <Checkbox
id="selectAllChunks" id="selectAllChunks"
checked={selectAll} checked={selectAll}
onCheckedChange={(handleSelectAll) => onCheckedChange={handleSelectAll =>
setSelectAll(!!handleSelectAll) setSelectAll(!!handleSelectAll)
} }
/> />
@ -160,8 +160,8 @@ function ChunksPageContent() {
Select all Select all
</Label> </Label>
</div> */} </div> */}
</div> </div>
</div> </div>
{/* Content Area - matches knowledge page structure */} {/* Content Area - matches knowledge page structure */}
<div className="flex-1 overflow-auto pr-6"> <div className="flex-1 overflow-auto pr-6">
@ -200,73 +200,73 @@ function ChunksPageContent() {
} }
/> />
</div> */} </div> */}
<span className="text-sm font-bold"> <span className="text-sm font-bold">
Chunk {chunk.index} Chunk {chunk.index}
</span> </span>
<span className="bg-background p-1 rounded text-xs text-muted-foreground/70"> <span className="bg-background p-1 rounded text-xs text-muted-foreground/70">
{chunk.text.length} chars {chunk.text.length} chars
</span> </span>
<div className="py-1"> <div className="py-1">
<Button <Button
onClick={() => handleCopy(chunk.text, index)} onClick={() => handleCopy(chunk.text, index)}
variant="ghost" variant="ghost"
size="sm" size="sm"
> >
{activeCopiedChunkIndex === index ? ( {activeCopiedChunkIndex === index ? (
<Check className="text-muted-foreground" /> <Check className="text-muted-foreground" />
) : ( ) : (
<Copy className="text-muted-foreground" /> <Copy className="text-muted-foreground" />
)} )}
</Button> </Button>
</div> </div>
</div> </div>
<span className="bg-background p-1 rounded text-xs text-muted-foreground/70"> <span className="bg-background p-1 rounded text-xs text-muted-foreground/70">
{chunk.score.toFixed(2)} score {chunk.score.toFixed(2)} score
</span> </span>
{/* TODO: Update to use active toggle */} {/* TODO: Update to use active toggle */}
{/* <span className="px-2 py-1 text-green-500"> {/* <span className="px-2 py-1 text-green-500">
<Switch <Switch
className="ml-2 bg-green-500" className="ml-2 bg-green-500"
checked={true} checked={true}
/> />
Active Active
</span> */} </span> */}
</div> </div>
<blockquote className="text-sm text-muted-foreground leading-relaxed ml-1.5"> <blockquote className="text-sm text-muted-foreground leading-relaxed ml-1.5">
{chunk.text} {chunk.text}
</blockquote> </blockquote>
</div> </div>
))} ))}
</div> </div>
)} )}
</div> </div>
</div> </div>
{/* Right panel - Summary (TODO), Technical details, */} {/* Right panel - Summary (TODO), Technical details, */}
{chunks.length > 0 && ( {chunks.length > 0 && (
<div className="w-[320px] py-20 px-2"> <div className="w-[320px] py-20 px-2">
<div className="mb-8"> <div className="mb-8">
<h2 className="text-xl font-semibold mt-3 mb-4"> <h2 className="text-xl font-semibold mt-3 mb-4">
Technical details Technical details
</h2> </h2>
<dl> <dl>
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5"> <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
<dt className="text-sm/6 text-muted-foreground"> <dt className="text-sm/6 text-muted-foreground">
Total chunks Total chunks
</dt> </dt>
<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"> <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
{chunks.length} {chunks.length}
</dd> </dd>
</div> </div>
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5"> <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
<dt className="text-sm/6 text-muted-foreground">Avg length</dt> <dt className="text-sm/6 text-muted-foreground">Avg length</dt>
<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"> <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
{averageChunkLength.toFixed(0)} chars {averageChunkLength.toFixed(0)} chars
</dd> </dd>
</div> </div>
{/* TODO: Uncomment after data is available */} {/* TODO: Uncomment after data is available */}
{/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5"> {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
<dt className="text-sm/6 text-muted-foreground">Process time</dt> <dt className="text-sm/6 text-muted-foreground">Process time</dt>
<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"> <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
</dd> </dd>
@ -276,79 +276,79 @@ function ChunksPageContent() {
<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"> <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
</dd> </dd>
</div> */} </div> */}
</dl> </dl>
</div> </div>
<div className="mb-8"> <div className="mb-8">
<h2 className="text-xl font-semibold mt-2 mb-3"> <h2 className="text-xl font-semibold mt-2 mb-3">
Original document Original document
</h2> </h2>
<dl> <dl>
{/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5"> {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
<dt className="text-sm/6 text-muted-foreground">Name</dt> <dt className="text-sm/6 text-muted-foreground">Name</dt>
<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"> <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
{fileData?.filename} {fileData?.filename}
</dd> </dd>
</div> */} </div> */}
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5"> <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
<dt className="text-sm/6 text-muted-foreground">Type</dt> <dt className="text-sm/6 text-muted-foreground">Type</dt>
<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"> <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
{fileData ? getFileTypeLabel(fileData.mimetype) : "Unknown"} {fileData ? getFileTypeLabel(fileData.mimetype) : "Unknown"}
</dd> </dd>
</div> </div>
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5"> <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
<dt className="text-sm/6 text-muted-foreground">Size</dt> <dt className="text-sm/6 text-muted-foreground">Size</dt>
<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"> <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
{fileData?.size {fileData?.size
? `${Math.round(fileData.size / 1024)} KB` ? `${Math.round(fileData.size / 1024)} KB`
: "Unknown"} : "Unknown"}
</dd> </dd>
</div> </div>
{/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5"> {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
<dt className="text-sm/6 text-muted-foreground">Uploaded</dt> <dt className="text-sm/6 text-muted-foreground">Uploaded</dt>
<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"> <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
N/A N/A
</dd> </dd>
</div> */} </div> */}
{/* TODO: Uncomment after data is available */} {/* TODO: Uncomment after data is available */}
{/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5"> {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
<dt className="text-sm/6 text-muted-foreground">Source</dt> <dt className="text-sm/6 text-muted-foreground">Source</dt>
<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"></dd> <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"></dd>
</div> */} </div> */}
{/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5"> {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
<dt className="text-sm/6 text-muted-foreground">Updated</dt> <dt className="text-sm/6 text-muted-foreground">Updated</dt>
<dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"> <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
N/A N/A
</dd> </dd>
</div> */} </div> */}
</dl> </dl>
</div> </div>
</div> </div>
)} )}
</div> </div>
); );
} }
function ChunksPage() { function ChunksPage() {
return ( return (
<Suspense <Suspense
fallback={ fallback={
<div className="flex items-center justify-center h-64"> <div className="flex items-center justify-center h-64">
<div className="text-center"> <div className="text-center">
<Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" /> <Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
<p className="text-lg text-muted-foreground">Loading...</p> <p className="text-lg text-muted-foreground">Loading...</p>
</div> </div>
</div> </div>
} }
> >
<ChunksPageContent /> <ChunksPageContent />
</Suspense> </Suspense>
); );
} }
export default function ProtectedChunksPage() { export default function ProtectedChunksPage() {
return ( return (
<ProtectedRoute> <ProtectedRoute>
<ChunksPage /> <ChunksPage />
</ProtectedRoute> </ProtectedRoute>
); );
} }

17
frontend/src/app/knowledge/page.tsx
View file

@ -69,7 +69,7 @@ function SearchPage() {
parsedFilterData parsedFilterData
); );
// Convert TaskFiles to File format and merge with backend results // Convert TaskFiles to File format and merge with backend results
const taskFilesAsFiles: File[] = taskFiles.map((taskFile) => { const taskFilesAsFiles: File[] = taskFiles.map(taskFile => {
return { return {
filename: taskFile.filename, filename: taskFile.filename,
mimetype: taskFile.mimetype, mimetype: taskFile.mimetype,
@ -82,12 +82,12 @@ function SearchPage() {
// Create a map of task files by filename for quick lookup // Create a map of task files by filename for quick lookup
const taskFileMap = new Map( const taskFileMap = new Map(
taskFilesAsFiles.map((file) => [file.filename, file]) taskFilesAsFiles.map(file => [file.filename, file])
); );
// Override backend files with task file status if they exist // Override backend files with task file status if they exist
const backendFiles = (searchData as File[]) const backendFiles = (searchData as File[])
.map((file) => { .map(file => {
const taskFile = taskFileMap.get(file.filename); const taskFile = taskFileMap.get(file.filename);
if (taskFile) { if (taskFile) {
// Override backend file with task file data (includes status) // Override backend file with task file data (includes status)
@ -95,17 +95,17 @@ function SearchPage() {
} }
return file; return file;
}) })
.filter((file) => { .filter(file => {
// Only filter out files that are currently processing AND in taskFiles // Only filter out files that are currently processing AND in taskFiles
const taskFile = taskFileMap.get(file.filename); const taskFile = taskFileMap.get(file.filename);
return !taskFile || taskFile.status !== "processing"; return !taskFile || taskFile.status !== "processing";
}); });
const filteredTaskFiles = taskFilesAsFiles.filter((taskFile) => { const filteredTaskFiles = taskFilesAsFiles.filter(taskFile => {
return ( return (
taskFile.status !== "active" && taskFile.status !== "active" &&
!backendFiles.some( !backendFiles.some(
(backendFile) => backendFile.filename === taskFile.filename backendFile => backendFile.filename === taskFile.filename
) )
); );
}); });
@ -184,7 +184,6 @@ function SearchPage() {
{ {
field: "avgScore", field: "avgScore",
headerName: "Avg score", headerName: "Avg score",
initialFlex: 0.5,
cellRenderer: ({ value }: CustomCellRendererProps<File>) => { cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
return ( return (
<span className="text-xs text-accent-emerald-foreground bg-accent-emerald px-2 py-1 rounded"> <span className="text-xs text-accent-emerald-foreground bg-accent-emerald px-2 py-1 rounded">
@ -246,7 +245,7 @@ function SearchPage() {
try { try {
// Delete each file individually since the API expects one filename at a time // Delete each file individually since the API expects one filename at a time
const deletePromises = selectedRows.map((row) => const deletePromises = selectedRows.map(row =>
deleteDocumentMutation.mutateAsync({ filename: row.filename }) deleteDocumentMutation.mutateAsync({ filename: row.filename })
); );
@ -345,7 +344,7 @@ function SearchPage() {
}? This will remove all chunks and data associated with these documents. This action cannot be undone. }? This will remove all chunks and data associated with these documents. This action cannot be undone.
Documents to be deleted: Documents to be deleted:
${selectedRows.map((row) => `• ${row.filename}`).join("\n")}`} ${selectedRows.map(row => `• ${row.filename}`).join("\n")}`}
confirmText="Delete All" confirmText="Delete All"
onConfirm={handleBulkDelete} onConfirm={handleBulkDelete}
isLoading={deleteDocumentMutation.isPending} isLoading={deleteDocumentMutation.isPending}

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

File diff suppressed because it is too large Load diff

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

@ -6,373 +6,394 @@ 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
interface CloudConnector { interface CloudConnector {
id: string; id: string;
name: string; name: string;
description: string; description: string;
status: "not_connected" | "connecting" | "connected" | "error"; status: "not_connected" | "connecting" | "connected" | "error";
type: string; type: string;
connectionId?: string; connectionId?: string;
clientId: string; clientId: string;
hasAccessToken: boolean; hasAccessToken: boolean;
accessTokenError?: string; accessTokenError?: string;
} }
export default function UploadProviderPage() { export default function UploadProviderPage() {
const params = useParams(); const params = useParams();
const router = useRouter(); const router = useRouter();
const provider = params.provider as string; const provider = params.provider as string;
const { addTask, tasks } = useTask(); const { addTask, tasks } = useTask();
const [connector, setConnector] = useState<CloudConnector | null>(null); const [connector, setConnector] = useState<CloudConnector | null>(null);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [accessToken, setAccessToken] = useState<string | null>(null); const [accessToken, setAccessToken] = useState<string | null>(null);
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,
chunkOverlap: 200, chunkOverlap: 200,
ocr: false, ocr: false,
pictureDescriptions: false, pictureDescriptions: false,
embeddingModel: "text-embedding-3-small", embeddingModel: "text-embedding-3-small",
}); });
useEffect(() => { useEffect(() => {
const fetchConnectorInfo = async () => { const fetchConnectorInfo = async () => {
setIsLoading(true); setIsLoading(true);
setError(null); setError(null);
try { try {
// Fetch available connectors to validate the provider // Fetch available connectors to validate the provider
const connectorsResponse = await fetch("/api/connectors"); const connectorsResponse = await fetch("/api/connectors");
if (!connectorsResponse.ok) { if (!connectorsResponse.ok) {
throw new Error("Failed to load connectors"); throw new Error("Failed to load connectors");
} }
const connectorsResult = await connectorsResponse.json(); const connectorsResult = await connectorsResponse.json();
const providerInfo = connectorsResult.connectors[provider]; const providerInfo = connectorsResult.connectors[provider];
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`);
} }
const statusData = await statusResponse.json(); const statusData = await statusResponse.json();
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;
let hasAccessToken = false; let hasAccessToken = false;
let accessTokenError: string | undefined; let accessTokenError: string | undefined;
// Try to get access token for connected connectors // Try to get access token for connected connectors
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();
if (tokenData.access_token) { if (tokenData.access_token) {
hasAccessToken = true; hasAccessToken = true;
setAccessToken(tokenData.access_token); setAccessToken(tokenData.access_token);
} }
} else { } else {
const errorData = await tokenResponse const errorData = await tokenResponse
.json() .json()
.catch(() => ({ error: "Token unavailable" })); .catch(() => ({ error: "Token unavailable" }));
accessTokenError = errorData.error || "Access token unavailable"; accessTokenError = errorData.error || "Access token unavailable";
} }
} catch { } catch {
accessTokenError = "Failed to fetch access token"; accessTokenError = "Failed to fetch access token";
} }
} }
setConnector({ setConnector({
id: provider, id: provider,
name: providerInfo.name, name: providerInfo.name,
description: providerInfo.description, description: providerInfo.description,
status: isConnected ? "connected" : "not_connected", status: isConnected ? "connected" : "not_connected",
type: provider, type: provider,
connectionId: activeConnection?.connection_id, connectionId: activeConnection?.connection_id,
clientId: activeConnection?.client_id, clientId: activeConnection?.client_id,
hasAccessToken, hasAccessToken,
accessTokenError, accessTokenError,
}); });
} catch (error) { } catch (error) {
console.error("Failed to load connector info:", error); console.error("Failed to load connector info:", error);
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);
} }
}; };
if (provider) { if (provider) {
fetchConnectorInfo(); fetchConnectorInfo();
} }
}, [provider]); }, [provider]);
// Watch for sync task completion and redirect // Watch for sync task completion and redirect
useEffect(() => { useEffect(() => {
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") {
// Task completed successfully, show toast and redirect // Task completed successfully, show toast and redirect
setIsIngesting(false); setIsIngesting(false);
setTimeout(() => { setTimeout(() => {
router.push("/knowledge"); router.push("/knowledge");
}, 2000); // 2 second delay to let user see toast }, 2000); // 2 second delay to let user see toast
} else if (currentTask && currentTask.status === "failed") { } else if (currentTask && currentTask.status === "failed") {
// Task failed, clear the tracking but don't redirect // Task failed, clear the tracking but don't redirect
setIsIngesting(false); setIsIngesting(false);
setCurrentSyncTaskId(null); setCurrentSyncTaskId(null);
} }
}, [tasks, currentSyncTaskId, router]); }, [tasks, currentSyncTaskId, router]);
const handleFileSelected = (files: CloudFile[]) => { const handleFileSelected = (files: CloudFile[]) => {
setSelectedFiles(files); setSelectedFiles(files);
console.log(`Selected ${files.length} files from ${provider}:`, files); console.log(`Selected ${files.length} files from ${provider}:`, files);
// You can add additional handling here like triggering sync, etc. // You can add additional handling here like triggering sync, etc.
}; };
const handleSync = async (connector: CloudConnector) => { const handleSync = async (connector: CloudConnector) => {
if (!connector.connectionId || selectedFiles.length === 0) return; if (!connector.connectionId || selectedFiles.length === 0) return;
setIsIngesting(true); setIsIngesting(true);
try { try {
const syncBody: { const syncBody: {
connection_id: string; connection_id: string;
max_files?: number; max_files?: number;
selected_files?: string[]; selected_files?: string[];
settings?: IngestSettings; settings?: IngestSettings;
} = { } = {
connection_id: connector.connectionId, connection_id: connector.connectionId,
selected_files: selectedFiles.map((file) => file.id), selected_files: selectedFiles.map((file) => file.id),
settings: ingestSettings, settings: ingestSettings,
}; };
const response = await fetch(`/api/connectors/${connector.type}/sync`, { const response = await fetch(`/api/connectors/${connector.type}/sync`, {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify(syncBody), body: JSON.stringify(syncBody),
}); });
const result = await response.json(); const result = await response.json();
if (response.status === 201) { if (response.status === 201) {
const taskIds = result.task_ids; const taskIds = result.task_ids;
if (taskIds && taskIds.length > 0) { if (taskIds && taskIds.length > 0) {
const taskId = taskIds[0]; // Use the first task ID const taskId = taskIds[0]; // Use the first task ID
addTask(taskId); addTask(taskId);
setCurrentSyncTaskId(taskId); setCurrentSyncTaskId(taskId);
} }
} else { } else {
console.error("Sync failed:", result.error); console.error("Sync failed:", result.error);
} }
} catch (error) { } catch (error) {
console.error("Sync error:", error); console.error("Sync error:", error);
setIsIngesting(false); setIsIngesting(false);
} }
}; };
const getProviderDisplayName = () => { const getProviderDisplayName = () => {
const nameMap: { [key: string]: string } = { const nameMap: { [key: string]: string } = {
google_drive: "Google Drive", google_drive: "Google Drive",
onedrive: "OneDrive", onedrive: "OneDrive",
sharepoint: "SharePoint", sharepoint: "SharePoint",
}; };
return nameMap[provider] || provider; return nameMap[provider] || provider;
}; };
if (isLoading) { if (isLoading) {
return ( return (
<div className="container mx-auto p-6"> <div className="container mx-auto p-6">
<div className="flex items-center justify-center py-12"> <div className="flex items-center justify-center py-12">
<div className="text-center"> <div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div> <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> <p>Loading {getProviderDisplayName()} connector...</p>
</div> </div>
</div> </div>
</div> </div>
); );
} }
if (error || !connector) { if (error || !connector) {
return ( return (
<div className="container mx-auto p-6"> <div className="container mx-auto p-6">
<div className="mb-6"> <div className="mb-6">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => router.back()} onClick={() => router.back()}
className="mb-4" className="mb-4"
> >
<ArrowLeft className="h-4 w-4 mr-2" /> <ArrowLeft className="h-4 w-4 mr-2" />
Back Back
</Button> </Button>
</div> </div>
<div className="flex items-center justify-center py-12"> <div className="flex items-center justify-center py-12">
<div className="text-center max-w-md"> <div className="text-center max-w-md">
<AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" /> <AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
<h2 className="text-xl font-semibold mb-2"> <h2 className="text-xl font-semibold mb-2">
Provider Not Available Provider Not Available
</h2> </h2>
<p className="text-muted-foreground mb-4">{error}</p> <p className="text-muted-foreground mb-4">{error}</p>
<Button onClick={() => router.push("/settings")}> <Button onClick={() => router.push("/settings")}>
Configure Connectors Configure Connectors
</Button> </Button>
</div> </div>
</div> </div>
</div> </div>
); );
} }
if (connector.status !== "connected") { if (connector.status !== "connected") {
return ( return (
<div className="container mx-auto p-6"> <div className="container mx-auto p-6">
<div className="mb-6"> <div className="mb-6">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => router.back()} onClick={() => router.back()}
className="mb-4" className="mb-4"
> >
<ArrowLeft className="h-4 w-4 mr-2" /> <ArrowLeft className="h-4 w-4 mr-2" />
Back Back
</Button> </Button>
</div> </div>
<div className="flex items-center justify-center py-12"> <div className="flex items-center justify-center py-12">
<div className="text-center max-w-md"> <div className="text-center max-w-md">
<AlertCircle className="h-12 w-12 text-yellow-500 mx-auto mb-4" /> <AlertCircle className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
<h2 className="text-xl font-semibold mb-2"> <h2 className="text-xl font-semibold mb-2">
{connector.name} Not Connected {connector.name} Not Connected
</h2> </h2>
<p className="text-muted-foreground mb-4"> <p className="text-muted-foreground mb-4">
You need to connect your {connector.name} account before you can You need to connect your {connector.name} account before you can
select files. select files.
</p> </p>
<Button onClick={() => router.push("/settings")}> <Button onClick={() => router.push("/settings")}>
Connect {connector.name} Connect {connector.name}
</Button> </Button>
</div> </div>
</div> </div>
</div> </div>
); );
} }
if (!connector.hasAccessToken) { if (!connector.hasAccessToken) {
return ( return (
<div className="container mx-auto p-6"> <div className="container mx-auto p-6">
<div className="mb-6"> <div className="mb-6">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => router.back()} onClick={() => router.back()}
className="mb-4" className="mb-4"
> >
<ArrowLeft className="h-4 w-4 mr-2" /> <ArrowLeft className="h-4 w-4 mr-2" />
Back Back
</Button> </Button>
</div> </div>
<div className="flex items-center justify-center py-12"> <div className="flex items-center justify-center py-12">
<div className="text-center max-w-md"> <div className="text-center max-w-md">
<AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" /> <AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
<h2 className="text-xl font-semibold mb-2"> <h2 className="text-xl font-semibold mb-2">
Access Token Required Access Token Required
</h2> </h2>
<p className="text-muted-foreground mb-4"> <p className="text-muted-foreground mb-4">
{connector.accessTokenError || {connector.accessTokenError ||
`Unable to get access token for ${connector.name}. Try reconnecting your account.`} `Unable to get access token for ${connector.name}. Try reconnecting your account.`}
</p> </p>
<Button onClick={() => router.push("/settings")}> <Button onClick={() => router.push("/settings")}>
Reconnect {connector.name} Reconnect {connector.name}
</Button> </Button>
</div> </div>
</div> </div>
</div> </div>
); );
} }
return ( const hasSelectedFiles = selectedFiles.length > 0;
<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>
<div className="max-w-3xl mx-auto"> return (
<UnifiedCloudPicker <div className="container mx-auto max-w-3xl px-6">
provider={ <div className="mb-8 flex gap-2 items-center">
connector.type as "google_drive" | "onedrive" | "sharepoint" <Button variant="ghost" onClick={() => router.back()} size="icon">
} <ArrowLeft size={18} />
onFileSelected={handleFileSelected} </Button>
selectedFiles={selectedFiles} <h2 className="text-xl text-[18px] font-semibold">
isAuthenticated={true} Add from {getProviderDisplayName()}
accessToken={accessToken || undefined} </h2>
clientId={connector.clientId} </div>
onSettingsChange={setIngestSettings}
/>
</div>
<div className="max-w-3xl mx-auto mt-6"> <div className="max-w-3xl mx-auto">
<div className="flex justify-between gap-3 mb-4"> <UnifiedCloudPicker
<Button provider={
variant="ghost" connector.type as "google_drive" | "onedrive" | "sharepoint"
className=" border bg-transparent border-border rounded-lg text-secondary-foreground" }
onClick={() => router.back()} onFileSelected={handleFileSelected}
> selectedFiles={selectedFiles}
Back isAuthenticated={true}
</Button> isIngesting={isIngesting}
<Button accessToken={accessToken || undefined}
variant="secondary" clientId={connector.clientId}
onClick={() => handleSync(connector)} onSettingsChange={setIngestSettings}
disabled={selectedFiles.length === 0 || isIngesting} />
> </div>
{isIngesting ? (
<>Ingesting {selectedFiles.length} Files...</> <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">
<>Start ingest</> <Button
)} variant="ghost"
</Button> className="border bg-transparent border-border rounded-lg text-secondary-foreground"
</div> onClick={() => router.back()}
</div> >
</div> 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
frontend/src/components/cloud-connectors-dialog.tsx
View file

@ -283,6 +283,7 @@ export function CloudConnectorsDialog({
accessToken={connectorAccessTokens[connector.type]} accessToken={connectorAccessTokens[connector.type]}
onPickerStateChange={() => {}} onPickerStateChange={() => {}}
clientId={connector.clientId} clientId={connector.clientId}
isIngesting={false}
/> />
</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>
); );

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

@ -5,37 +5,50 @@ 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 {

31
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,20 +169,24 @@ export const UnifiedCloudPicker = ({
} }
return ( return (
<div className="space-y-6"> <div>
<PickerHeader <div className="mb-6">
provider={provider} <PickerHeader
onAddFiles={handleAddFiles} provider={provider}
isPickerLoaded={isPickerLoaded} onAddFiles={handleAddFiles}
isPickerOpen={isPickerOpen} isPickerLoaded={isPickerLoaded}
accessToken={accessToken} isPickerOpen={isPickerOpen}
isAuthenticated={isAuthenticated} accessToken={accessToken}
/> isAuthenticated={isAuthenticated}
/>
</div>
<FileList <FileList
provider={provider}
files={selectedFiles} files={selectedFiles}
onClearAll={handleClearAll} onClearAll={handleClearAll}
onRemoveFile={handleRemoveFile} onRemoveFile={handleRemoveFile}
shouldDisableActions={isIngesting}
/> />
<IngestSettings <IngestSettings

4
frontend/src/components/layout-wrapper.tsx
View file

@ -60,12 +60,12 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
const isOnKnowledgePage = pathname.startsWith("/knowledge"); const isOnKnowledgePage = pathname.startsWith("/knowledge");
// List of paths with smaller max-width // List of paths with smaller max-width
const smallWidthPaths = ["/settings", "/settings/connector/new"]; const smallWidthPaths = ["/settings/connector/new"];
const isSmallWidthPath = smallWidthPaths.includes(pathname); const isSmallWidthPath = smallWidthPaths.includes(pathname);
// Calculate active tasks for the bell icon // Calculate active tasks for the bell icon
const activeTasks = tasks.filter( const activeTasks = tasks.filter(
(task) => task =>
task.status === "pending" || task.status === "pending" ||
task.status === "running" || task.status === "running" ||
task.status === "processing" task.status === "processing"

1
frontend/src/contexts/task-context.tsx
View file

@ -19,6 +19,7 @@ import {
import { useAuth } from "@/contexts/auth-context"; import { useAuth } from "@/contexts/auth-context";
// Task interface is now imported from useGetTasksQuery // Task interface is now imported from useGetTasksQuery
export type { Task };
export interface TaskFile { export interface TaskFile {
filename: string; filename: string;

104
src/api/docling.py Normal file
View file

@ -0,0 +1,104 @@
"""Docling service proxy endpoints."""
import socket
import struct
from pathlib import Path
import httpx
from starlette.requests import Request
from starlette.responses import JSONResponse
from utils.container_utils import (
detect_container_environment,
get_container_host,
guess_host_ip_for_containers,
)
from utils.logging_config import get_logger
logger = get_logger(__name__)
def _get_gateway_ip_from_route() -> str | None:
"""Return the default gateway IP visible from the current network namespace."""
try:
with Path("/proc/net/route").open() as route_table:
next(route_table) # Skip header
for line in route_table:
fields = line.strip().split()
min_fields = 3 # interface, destination, gateway
if len(fields) >= min_fields and fields[1] == "00000000":
gateway_hex = fields[2]
gw_int = int(gateway_hex, 16)
gateway_ip = socket.inet_ntoa(struct.pack("<L", gw_int))
return gateway_ip
except (FileNotFoundError, PermissionError, IndexError, ValueError) as err:
logger.warning("Could not read routing table: %s", err)
return None
def determine_docling_host() -> str:
"""Determine the host address used for docling health checks."""
container_type = detect_container_environment()
if container_type:
container_host = get_container_host()
if container_host:
logger.info("Using container-aware host '%s'", container_host)
return container_host
gateway_ip = _get_gateway_ip_from_route()
if gateway_ip:
logger.info("Detected host gateway IP: %s", gateway_ip)
return gateway_ip
# Either we're not inside a container or gateway detection failed.
fallback_ip = guess_host_ip_for_containers(logger=logger)
if container_type:
logger.info("Falling back to container bridge host %s", fallback_ip)
else:
logger.info("Running outside a container; using host %s", fallback_ip)
return fallback_ip
# Detect the host IP once at startup
HOST_IP = determine_docling_host()
DOCLING_SERVICE_URL = f"http://{HOST_IP}:5001"
async def health(request: Request) -> JSONResponse:
"""
Proxy health check to docling-serve.
This allows the frontend to check docling status via same-origin request.
"""
try:
async with httpx.AsyncClient() as client:
response = await client.get(
f"{DOCLING_SERVICE_URL}/health",
timeout=2.0
)
if response.status_code == 200:
return JSONResponse({
"status": "healthy",
"host": HOST_IP
})
else:
return JSONResponse({
"status": "unhealthy",
"message": f"Health check failed with status: {response.status_code}",
"host": HOST_IP
}, status_code=503)
except httpx.TimeoutException:
return JSONResponse({
"status": "unhealthy",
"message": "Connection timeout",
"host": HOST_IP
}, status_code=503)
except Exception as e:
logger.error("Docling health check failed", error=str(e))
return JSONResponse({
"status": "unhealthy",
"message": str(e),
"host": HOST_IP
}, status_code=503)