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

sweeeeeeeep

Browse source
This commit is contained in:
Cole Goldsmith 2025-10-03 15:56:08 -05:00
parent b6c6049a3a
commit 85de6c8026
11 changed files with 215 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,10 +3,10 @@
import { import {
ChevronDown, ChevronDown,
Cloud, Cloud,
File,
FolderOpen, FolderOpen,
Loader2, Loader2,
PlugZap, PlugZap,
Upload,
} from "lucide-react"; } from "lucide-react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
@ -23,6 +23,9 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { useTask } from "@/contexts/task-context"; import { useTask } from "@/contexts/task-context";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
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";
export function KnowledgeDropdown() { export function KnowledgeDropdown() {
const { addTask } = useTask(); const { addTask } = useTask();
@ -48,6 +51,15 @@ export function KnowledgeDropdown() {
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const dropdownRef = useRef<HTMLDivElement>(null); const dropdownRef = useRef<HTMLDivElement>(null);
const connectorIconMap: Record<
string,
React.ComponentType<{ className?: string }>
> = {
google_drive: GoogleDriveIcon,
sharepoint: SharePointIcon,
onedrive: OneDriveIcon,
};
// Check AWS availability and cloud connectors on mount // Check AWS availability and cloud connectors on mount
useEffect(() => { useEffect(() => {
const checkAvailability = async () => { const checkAvailability = async () => {
@ -368,7 +380,7 @@ export function KnowledgeDropdown() {
.filter(([, info]) => info.available) .filter(([, info]) => info.available)
.map(([type, info]) => ({ .map(([type, info]) => ({
label: info.name, label: info.name,
icon: PlugZap, icon: connectorIconMap[type] || PlugZap,
onClick: async () => { onClick: async () => {
setIsOpen(false); setIsOpen(false);
if (info.connected && info.hasToken) { if (info.connected && info.hasToken) {
@ -395,7 +407,7 @@ export function KnowledgeDropdown() {
const menuItems = [ const menuItems = [
{ {
label: "Add File", label: "Add File",
icon: Upload, icon: File,
onClick: handleFileUpload, onClick: handleFileUpload,
}, },
{ {

2
frontend/src/app/api/queries/useGetSearchQuery.ts
View file

@ -179,7 +179,7 @@ export const useGetSearchQuery = (
const queryResult = useQuery( const queryResult = useQuery(
{ {
queryKey: ["search", queryData], queryKey: ["search", queryData, query],
placeholderData: (prev) => prev, placeholderData: (prev) => prev,
queryFn: getFiles, queryFn: getFiles,
...options, ...options,

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

@ -1,7 +1,6 @@
"use client"; "use client";
import { import {
AtSign,
Bot, Bot,
Check, Check,
ChevronDown, ChevronDown,
@ -11,7 +10,6 @@ import {
Loader2, Loader2,
Plus, Plus,
Settings, Settings,
Upload,
User, User,
X, X,
Zap, Zap,
@ -150,8 +148,8 @@ function ChatPage() {
const streamAbortRef = useRef<AbortController | null>(null); const streamAbortRef = useRef<AbortController | null>(null);
const streamIdRef = useRef(0); const streamIdRef = useRef(0);
const lastLoadedConversationRef = useRef<string | null>(null); const lastLoadedConversationRef = useRef<string | null>(null);
const { addTask, isMenuOpen } = useTask(); const { addTask } = useTask();
const { selectedFilter, parsedFilterData, isPanelOpen, setSelectedFilter } = const { selectedFilter, parsedFilterData, setSelectedFilter } =
useKnowledgeFilter(); useKnowledgeFilter();
const scrollToBottom = () => { const scrollToBottom = () => {
@ -258,7 +256,7 @@ function ChatPage() {
"Upload failed with status:", "Upload failed with status:",
response.status, response.status,
"Response:", "Response:",
errorText, errorText
); );
throw new Error("Failed to process document"); throw new Error("Failed to process document");
} }
@ -468,7 +466,7 @@ function ChatPage() {
console.log( console.log(
"Loading conversation with", "Loading conversation with",
conversationData.messages.length, conversationData.messages.length,
"messages", "messages"
); );
// Convert backend message format to frontend Message interface // Convert backend message format to frontend Message interface
const convertedMessages: Message[] = conversationData.messages.map( const convertedMessages: Message[] = conversationData.messages.map(
@ -596,7 +594,7 @@ function ChatPage() {
) === "string" ) === "string"
? toolCall.function?.arguments || toolCall.arguments ? toolCall.function?.arguments || toolCall.arguments
: JSON.stringify( : JSON.stringify(
toolCall.function?.arguments || toolCall.arguments, toolCall.function?.arguments || toolCall.arguments
), ),
result: toolCall.result, result: toolCall.result,
status: "completed", status: "completed",
@ -615,7 +613,7 @@ function ChatPage() {
} }
return message; return message;
}, }
); );
setMessages(convertedMessages); setMessages(convertedMessages);
@ -704,7 +702,7 @@ function ChatPage() {
console.log( console.log(
"Chat page received file upload error event:", "Chat page received file upload error event:",
filename, filename,
error, error
); );
// Replace the last message with error message // Replace the last message with error message
@ -718,43 +716,43 @@ function ChatPage() {
window.addEventListener( window.addEventListener(
"fileUploadStart", "fileUploadStart",
handleFileUploadStart as EventListener, handleFileUploadStart as EventListener
); );
window.addEventListener( window.addEventListener(
"fileUploaded", "fileUploaded",
handleFileUploaded as EventListener, handleFileUploaded as EventListener
); );
window.addEventListener( window.addEventListener(
"fileUploadComplete", "fileUploadComplete",
handleFileUploadComplete as EventListener, handleFileUploadComplete as EventListener
); );
window.addEventListener( window.addEventListener(
"fileUploadError", "fileUploadError",
handleFileUploadError as EventListener, handleFileUploadError as EventListener
); );
return () => { return () => {
window.removeEventListener( window.removeEventListener(
"fileUploadStart", "fileUploadStart",
handleFileUploadStart as EventListener, handleFileUploadStart as EventListener
); );
window.removeEventListener( window.removeEventListener(
"fileUploaded", "fileUploaded",
handleFileUploaded as EventListener, handleFileUploaded as EventListener
); );
window.removeEventListener( window.removeEventListener(
"fileUploadComplete", "fileUploadComplete",
handleFileUploadComplete as EventListener, handleFileUploadComplete as EventListener
); );
window.removeEventListener( window.removeEventListener(
"fileUploadError", "fileUploadError",
handleFileUploadError as EventListener, handleFileUploadError as EventListener
); );
}; };
}, [endpoint, setPreviousResponseIds]); }, [endpoint, setPreviousResponseIds]);
const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery( const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery(
previousResponseIds[endpoint], previousResponseIds[endpoint]
); );
const handleSSEStream = async (userMessage: Message) => { const handleSSEStream = async (userMessage: Message) => {
@ -859,7 +857,7 @@ function ChatPage() {
console.log( console.log(
"Received chunk:", "Received chunk:",
chunk.type || chunk.object, chunk.type || chunk.object,
chunk, chunk
); );
// Extract response ID if present // Extract response ID if present
@ -875,14 +873,14 @@ function ChatPage() {
if (chunk.delta.function_call) { if (chunk.delta.function_call) {
console.log( console.log(
"Function call in delta:", "Function call in delta:",
chunk.delta.function_call, chunk.delta.function_call
); );
// Check if this is a new function call // Check if this is a new function call
if (chunk.delta.function_call.name) { if (chunk.delta.function_call.name) {
console.log( console.log(
"New function call:", "New function call:",
chunk.delta.function_call.name, chunk.delta.function_call.name
); );
const functionCall: FunctionCall = { const functionCall: FunctionCall = {
name: chunk.delta.function_call.name, name: chunk.delta.function_call.name,
@ -898,7 +896,7 @@ function ChatPage() {
else if (chunk.delta.function_call.arguments) { else if (chunk.delta.function_call.arguments) {
console.log( console.log(
"Function call arguments delta:", "Function call arguments delta:",
chunk.delta.function_call.arguments, chunk.delta.function_call.arguments
); );
const lastFunctionCall = const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1]; currentFunctionCalls[currentFunctionCalls.length - 1];
@ -910,14 +908,14 @@ function ChatPage() {
chunk.delta.function_call.arguments; chunk.delta.function_call.arguments;
console.log( console.log(
"Accumulated arguments:", "Accumulated arguments:",
lastFunctionCall.argumentsString, lastFunctionCall.argumentsString
); );
// Try to parse arguments if they look complete // Try to parse arguments if they look complete
if (lastFunctionCall.argumentsString.includes("}")) { if (lastFunctionCall.argumentsString.includes("}")) {
try { try {
const parsed = JSON.parse( const parsed = JSON.parse(
lastFunctionCall.argumentsString, lastFunctionCall.argumentsString
); );
lastFunctionCall.arguments = parsed; lastFunctionCall.arguments = parsed;
lastFunctionCall.status = "completed"; lastFunctionCall.status = "completed";
@ -925,7 +923,7 @@ function ChatPage() {
} catch (e) { } catch (e) {
console.log( console.log(
"Arguments not yet complete or invalid JSON:", "Arguments not yet complete or invalid JSON:",
e, e
); );
} }
} }
@ -958,7 +956,7 @@ function ChatPage() {
else if (toolCall.function.arguments) { else if (toolCall.function.arguments) {
console.log( console.log(
"Tool call arguments delta:", "Tool call arguments delta:",
toolCall.function.arguments, toolCall.function.arguments
); );
const lastFunctionCall = const lastFunctionCall =
currentFunctionCalls[ currentFunctionCalls[
@ -972,7 +970,7 @@ function ChatPage() {
toolCall.function.arguments; toolCall.function.arguments;
console.log( console.log(
"Accumulated tool arguments:", "Accumulated tool arguments:",
lastFunctionCall.argumentsString, lastFunctionCall.argumentsString
); );
// Try to parse arguments if they look complete // Try to parse arguments if they look complete
@ -981,7 +979,7 @@ function ChatPage() {
) { ) {
try { try {
const parsed = JSON.parse( const parsed = JSON.parse(
lastFunctionCall.argumentsString, lastFunctionCall.argumentsString
); );
lastFunctionCall.arguments = parsed; lastFunctionCall.arguments = parsed;
lastFunctionCall.status = "completed"; lastFunctionCall.status = "completed";
@ -989,7 +987,7 @@ function ChatPage() {
} catch (e) { } catch (e) {
console.log( console.log(
"Tool arguments not yet complete or invalid JSON:", "Tool arguments not yet complete or invalid JSON:",
e, e
); );
} }
} }
@ -1021,7 +1019,7 @@ function ChatPage() {
console.log( console.log(
"Error parsing function call on finish:", "Error parsing function call on finish:",
fc, fc,
e, e
); );
} }
} }
@ -1037,12 +1035,12 @@ function ChatPage() {
console.log( console.log(
"🟢 CREATING function call (added):", "🟢 CREATING function call (added):",
chunk.item.id, chunk.item.id,
chunk.item.tool_name || chunk.item.name, chunk.item.tool_name || chunk.item.name
); );
// 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]
@ -1051,7 +1049,7 @@ function ChatPage() {
(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)
); );
} }
@ -1064,7 +1062,7 @@ function ChatPage() {
chunk.item.inputs || existing.arguments; chunk.item.inputs || existing.arguments;
console.log( console.log(
"🟢 UPDATED existing pending function call with id:", "🟢 UPDATED existing pending function call with id:",
existing.id, existing.id
); );
} else { } else {
const functionCall: FunctionCall = { const functionCall: FunctionCall = {
@ -1082,7 +1080,7 @@ function ChatPage() {
currentFunctionCalls.map((fc) => ({ currentFunctionCalls.map((fc) => ({
id: fc.id, id: fc.id,
name: fc.name, name: fc.name,
})), }))
); );
} }
} }
@ -1093,7 +1091,7 @@ function ChatPage() {
) { ) {
console.log( console.log(
"Function args delta (Realtime API):", "Function args delta (Realtime API):",
chunk.delta, chunk.delta
); );
const lastFunctionCall = const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1]; currentFunctionCalls[currentFunctionCalls.length - 1];
@ -1104,7 +1102,7 @@ function ChatPage() {
lastFunctionCall.argumentsString += chunk.delta || ""; lastFunctionCall.argumentsString += chunk.delta || "";
console.log( console.log(
"Accumulated arguments (Realtime API):", "Accumulated arguments (Realtime API):",
lastFunctionCall.argumentsString, lastFunctionCall.argumentsString
); );
} }
} }
@ -1115,26 +1113,26 @@ function ChatPage() {
) { ) {
console.log( console.log(
"Function args done (Realtime API):", "Function args done (Realtime API):",
chunk.arguments, chunk.arguments
); );
const lastFunctionCall = const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1]; currentFunctionCalls[currentFunctionCalls.length - 1];
if (lastFunctionCall) { if (lastFunctionCall) {
try { try {
lastFunctionCall.arguments = JSON.parse( lastFunctionCall.arguments = JSON.parse(
chunk.arguments || "{}", chunk.arguments || "{}"
); );
lastFunctionCall.status = "completed"; lastFunctionCall.status = "completed";
console.log( console.log(
"Parsed function arguments (Realtime API):", "Parsed function arguments (Realtime API):",
lastFunctionCall.arguments, lastFunctionCall.arguments
); );
} catch (e) { } catch (e) {
lastFunctionCall.arguments = { raw: chunk.arguments }; lastFunctionCall.arguments = { raw: chunk.arguments };
lastFunctionCall.status = "error"; lastFunctionCall.status = "error";
console.log( console.log(
"Error parsing function arguments (Realtime API):", "Error parsing function arguments (Realtime API):",
e, e
); );
} }
} }
@ -1148,14 +1146,14 @@ function ChatPage() {
console.log( console.log(
"🔵 UPDATING function call (done):", "🔵 UPDATING function call (done):",
chunk.item.id, chunk.item.id,
chunk.item.tool_name || chunk.item.name, chunk.item.tool_name || chunk.item.name
); );
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,
})), }))
); );
// Find existing function call by ID or name // Find existing function call by ID or name
@ -1163,14 +1161,14 @@ function ChatPage() {
(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
); );
if (functionCall) { if (functionCall) {
console.log( console.log(
"🔵 FOUND existing function call, updating:", "🔵 FOUND existing function call, updating:",
functionCall.id, functionCall.id,
functionCall.name, functionCall.name
); );
// Update existing function call with completion data // Update existing function call with completion data
functionCall.status = functionCall.status =
@ -1193,7 +1191,7 @@ function ChatPage() {
"🔴 WARNING: Could not find existing function call to update:", "🔴 WARNING: Could not find existing function call to update:",
chunk.item.id, chunk.item.id,
chunk.item.tool_name, chunk.item.tool_name,
chunk.item.name, chunk.item.name
); );
} }
} }
@ -1214,7 +1212,7 @@ function ChatPage() {
fc.name === chunk.item.name || fc.name === chunk.item.name ||
fc.name === chunk.item.type || fc.name === chunk.item.type ||
fc.name.includes(chunk.item.type.replace("_call", "")) || fc.name.includes(chunk.item.type.replace("_call", "")) ||
chunk.item.type.includes(fc.name), chunk.item.type.includes(fc.name)
); );
if (functionCall) { if (functionCall) {
@ -1258,12 +1256,12 @@ function ChatPage() {
"🟡 CREATING tool call (added):", "🟡 CREATING tool call (added):",
chunk.item.id, chunk.item.id,
chunk.item.tool_name || chunk.item.name, chunk.item.tool_name || chunk.item.name,
chunk.item.type, chunk.item.type
); );
// 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]
@ -1275,7 +1273,7 @@ function ChatPage() {
fc.name === fc.name ===
(chunk.item.tool_name || (chunk.item.tool_name ||
chunk.item.name || chunk.item.name ||
chunk.item.type), chunk.item.type)
); );
} }
@ -1291,7 +1289,7 @@ function ChatPage() {
chunk.item.inputs || existing.arguments; chunk.item.inputs || existing.arguments;
console.log( console.log(
"🟡 UPDATED existing pending tool call with id:", "🟡 UPDATED existing pending tool call with id:",
existing.id, existing.id
); );
} else { } else {
const functionCall = { const functionCall = {
@ -1312,7 +1310,7 @@ function ChatPage() {
id: fc.id, id: fc.id,
name: fc.name, name: fc.name,
type: fc.type, type: fc.type,
})), }))
); );
} }
} }
@ -1590,7 +1588,7 @@ function ChatPage() {
const handleForkConversation = ( const handleForkConversation = (
messageIndex: number, messageIndex: number,
event?: React.MouseEvent, event?: React.MouseEvent
) => { ) => {
// Prevent any default behavior and stop event propagation // Prevent any default behavior and stop event propagation
if (event) { if (event) {
@ -1655,7 +1653,7 @@ function ChatPage() {
const renderFunctionCalls = ( const renderFunctionCalls = (
functionCalls: FunctionCall[], functionCalls: FunctionCall[],
messageIndex?: number, messageIndex?: number
) => { ) => {
if (!functionCalls || functionCalls.length === 0) return null; if (!functionCalls || functionCalls.length === 0) return null;
@ -1906,7 +1904,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())
); );
if (e.key === "Escape") { if (e.key === "Escape") {
@ -1924,7 +1922,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;
} }
@ -1932,7 +1930,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;
} }
@ -2029,7 +2027,7 @@ function ChatPage() {
// Get button position for popover anchoring // Get button position for popover anchoring
const button = document.querySelector( const button = document.querySelector(
"[data-filter-button]", "[data-filter-button]"
) as HTMLElement; ) as HTMLElement;
if (button) { if (button) {
const rect = button.getBoundingClientRect(); const rect = button.getBoundingClientRect();
@ -2045,20 +2043,10 @@ function ChatPage() {
}; };
return ( return (
<div <div className="flex flex-col h-full">
className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
isMenuOpen && isPanelOpen
? "md:right-[704px]" // Both open: 384px (menu) + 320px (KF panel)
: isMenuOpen
? "md:right-96" // Only menu open: 384px
: isPanelOpen
? "md:right-80" // Only KF panel open: 320px
: "md:right-6" // Neither open: 24px
}`}
>
{/* Debug header - only show in debug mode */} {/* Debug header - only show in debug mode */}
{isDebugMode && ( {isDebugMode && (
<div className="flex items-center justify-between mb-6 px-6 pt-6"> <div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-2"></div> <div className="flex items-center gap-2"></div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{/* Async Mode Toggle */} {/* Async Mode Toggle */}
@ -2164,7 +2152,7 @@ function ChatPage() {
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
{renderFunctionCalls( {renderFunctionCalls(
message.functionCalls || [], message.functionCalls || [],
index, index
)} )}
<MarkdownRenderer chatMessage={message.content} /> <MarkdownRenderer chatMessage={message.content} />
</div> </div>
@ -2193,7 +2181,7 @@ function ChatPage() {
<div className="flex-1"> <div className="flex-1">
{renderFunctionCalls( {renderFunctionCalls(
streamingMessage.functionCalls, streamingMessage.functionCalls,
messages.length, messages.length
)} )}
<MarkdownRenderer <MarkdownRenderer
chatMessage={streamingMessage.content} chatMessage={streamingMessage.content}
@ -2260,29 +2248,31 @@ function ChatPage() {
</span> </span>
</div> </div>
)} )}
<div className="relative" style={{height: `${textareaHeight + 60}px`}}> <div
<TextareaAutosize className="relative"
ref={inputRef} style={{ height: `${textareaHeight + 60}px` }}
value={input} >
onChange={onChange} <TextareaAutosize
onKeyDown={handleKeyDown} ref={inputRef}
onHeightChange={(height) => setTextareaHeight(height)} value={input}
maxRows={7} onChange={onChange}
minRows={2} onKeyDown={handleKeyDown}
placeholder="Type to ask a question..." onHeightChange={(height) => setTextareaHeight(height)}
disabled={loading} maxRows={7}
className={`w-full bg-transparent px-4 ${ minRows={2}
selectedFilter ? "pt-2" : "pt-4" placeholder="Type to ask a question..."
} focus-visible:outline-none resize-none`} disabled={loading}
rows={2} className={`w-full bg-transparent px-4 ${
/> selectedFilter ? "pt-2" : "pt-4"
} focus-visible:outline-none resize-none`}
rows={2}
/>
{/* Safe area at bottom for buttons */} {/* Safe area at bottom for buttons */}
<div <div
className="absolute bottom-0 left-0 right-0 bg-transparent pointer-events-none" className="absolute bottom-0 left-0 right-0 bg-transparent pointer-events-none"
style={{ height: '60px' }} style={{ height: "60px" }}
/> />
</div> </div>
</div> </div>
<input <input
ref={fileInputRef} ref={fileInputRef}
@ -2367,7 +2357,7 @@ function ChatPage() {
.filter((filter) => .filter((filter) =>
filter.name filter.name
.toLowerCase() .toLowerCase()
.includes(filterSearchTerm.toLowerCase()), .includes(filterSearchTerm.toLowerCase())
) )
.map((filter, index) => ( .map((filter, index) => (
<button <button
@ -2396,7 +2386,7 @@ function ChatPage() {
{availableFilters.filter((filter) => {availableFilters.filter((filter) =>
filter.name filter.name
.toLowerCase() .toLowerCase()
.includes(filterSearchTerm.toLowerCase()), .includes(filterSearchTerm.toLowerCase())
).length === 0 && ).length === 0 &&
filterSearchTerm && ( filterSearchTerm && (
<div className="px-2 py-3 text-sm text-muted-foreground"> <div className="px-2 py-3 text-sm text-muted-foreground">

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

@ -2,11 +2,15 @@
import { themeQuartz, type ColDef } from "ag-grid-community"; import { themeQuartz, type ColDef } from "ag-grid-community";
import { AgGridReact, type CustomCellRendererProps } from "ag-grid-react"; import { AgGridReact, type CustomCellRendererProps } from "ag-grid-react";
import { Building2, Cloud, HardDrive, Search, X } from "lucide-react"; import { Cloud, FileIcon, Search, X } from "lucide-react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { type ChangeEvent, useCallback, useRef, useState } from "react"; import {
import { SiGoogledrive } from "react-icons/si"; type ChangeEvent,
import { TbBrandOnedrive } from "react-icons/tb"; FormEvent,
useCallback,
useRef,
useState,
} from "react";
import { KnowledgeDropdown } from "@/components/knowledge-dropdown"; import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
import { ProtectedRoute } from "@/components/protected-route"; import { ProtectedRoute } from "@/components/protected-route";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -21,25 +25,28 @@ import { StatusBadge } from "@/components/ui/status-badge";
import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog"; import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog";
import { useDeleteDocument } from "../api/mutations/useDeleteDocument"; import { useDeleteDocument } from "../api/mutations/useDeleteDocument";
import { filterAccentClasses } from "@/components/knowledge-filter-panel"; import { filterAccentClasses } from "@/components/knowledge-filter-panel";
import GoogleDriveIcon from "../settings/icons/google-drive-icon";
import OneDriveIcon from "../settings/icons/one-drive-icon";
import SharePointIcon from "../settings/icons/share-point-icon";
// Function to get the appropriate icon for a connector type // Function to get the appropriate icon for a connector type
function getSourceIcon(connectorType?: string) { function getSourceIcon(connectorType?: string) {
switch (connectorType) { switch (connectorType) {
case "google_drive": case "google_drive":
return ( return (
<SiGoogledrive className="h-4 w-4 text-foreground flex-shrink-0" /> <GoogleDriveIcon className="h-4 w-4 text-foreground flex-shrink-0" />
); );
case "onedrive": case "onedrive":
return ( return <OneDriveIcon className="h-4 w-4 text-foreground flex-shrink-0" />;
<TbBrandOnedrive className="h-4 w-4 text-foreground flex-shrink-0" />
);
case "sharepoint": case "sharepoint":
return <Building2 className="h-4 w-4 text-foreground flex-shrink-0" />; return (
<SharePointIcon className="h-4 w-4 text-foreground flex-shrink-0" />
);
case "s3": case "s3":
return <Cloud className="h-4 w-4 text-foreground flex-shrink-0" />; return <Cloud className="h-4 w-4 text-foreground flex-shrink-0" />;
default: default:
return ( return (
<HardDrive className="h-4 w-4 text-muted-foreground flex-shrink-0" /> <FileIcon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
); );
} }
} }
@ -47,21 +54,31 @@ function getSourceIcon(connectorType?: string) {
function SearchPage() { function SearchPage() {
const router = useRouter(); const router = useRouter();
const { files: taskFiles } = useTask(); const { files: taskFiles } = useTask();
const { selectedFilter, setSelectedFilter, parsedFilterData } = const {
useKnowledgeFilter(); selectedFilter,
setSelectedFilter,
parsedFilterData,
queryOverride,
setQueryOverride,
} = useKnowledgeFilter();
const [searchQueryInput, setSearchQueryInput] = useState(queryOverride || "");
const [selectedRows, setSelectedRows] = useState<File[]>([]); const [selectedRows, setSelectedRows] = useState<File[]>([]);
const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false); const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
const deleteDocumentMutation = useDeleteDocument(); const deleteDocumentMutation = useDeleteDocument();
const { data = [], isFetching } = useGetSearchQuery( const { data = [], isFetching } = useGetSearchQuery(
parsedFilterData?.query || "*", queryOverride,
parsedFilterData parsedFilterData
); );
const handleTableSearch = (e: ChangeEvent<HTMLInputElement>) => { const handleSearch = useCallback(
gridRef.current?.api.setGridOption("quickFilterText", e.target.value); (e?: FormEvent<HTMLFormElement>) => {
}; if (e) e.preventDefault();
setQueryOverride(searchQueryInput.trim());
},
[searchQueryInput, setQueryOverride]
);
// 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) => {
@ -236,7 +253,10 @@ function SearchPage() {
{/* Search Input Area */} {/* Search Input Area */}
<div className="flex-1 flex flex-shrink-0 flex-wrap-reverse gap-3 mb-6"> <div className="flex-1 flex flex-shrink-0 flex-wrap-reverse gap-3 mb-6">
<form className="flex flex-1 gap-3 max-w-full"> <form
className="flex flex-1 gap-3 max-w-full"
onSubmit={handleSearch}
>
<div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem] max-w-[min(640px,100%)] min-w-[100px]"> <div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem] max-w-[min(640px,100%)] min-w-[100px]">
{selectedFilter?.name && ( {selectedFilter?.name && (
<div <div
@ -263,7 +283,10 @@ function SearchPage() {
id="search-query" id="search-query"
type="text" type="text"
placeholder="Search your documents..." placeholder="Search your documents..."
onChange={handleTableSearch} value={searchQueryInput}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setSearchQueryInput(e.target.value)
}
/> />
</div> </div>
{/* <Button {/* <Button

3
frontend/src/app/settings/icons/google-drive-icon.tsx
View file

@ -1,10 +1,11 @@
const GoogleDriveIcon = () => ( const GoogleDriveIcon = ({ className }: { className?: string }) => (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="18" width="18"
height="16" height="16"
viewBox="0 0 18 16" viewBox="0 0 18 16"
fill="none" fill="none"
className={className}
> >
<path <path
d="M2.03338 13.2368L2.75732 14.4872C2.90774 14.7504 3.12398 14.9573 3.37783 15.1077L5.9633 10.6325H0.792358C0.792358 10.9239 0.867572 11.2154 1.018 11.4786L2.03338 13.2368Z" d="M2.03338 13.2368L2.75732 14.4872C2.90774 14.7504 3.12398 14.9573 3.37783 15.1077L5.9633 10.6325H0.792358C0.792358 10.9239 0.867572 11.2154 1.018 11.4786L2.03338 13.2368Z"

3
frontend/src/app/settings/icons/one-drive-icon.tsx
View file

@ -1,10 +1,11 @@
const OneDriveIcon = () => ( const OneDriveIcon = ({ className }: { className?: string }) => (
<svg <svg
width="17" width="17"
height="12" height="12"
viewBox="0 0 17 12" viewBox="0 0 17 12"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className}
> >
<g clip-path="url(#clip0_3016_367)"> <g clip-path="url(#clip0_3016_367)">
<path <path

3
frontend/src/app/settings/icons/share-point-icon.tsx
View file

@ -1,10 +1,11 @@
const SharePointIcon = () => ( const SharePointIcon = ({ className }: { className?: string }) => (
<svg <svg
width="15" width="15"
height="16" height="16"
viewBox="0 0 15 16" viewBox="0 0 15 16"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className}
> >
<g clip-path="url(#clip0_3016_409)"> <g clip-path="url(#clip0_3016_409)">
<path <path

3
frontend/src/components/AgGrid/agGridStyles.css
View file

@ -10,6 +10,9 @@ body {
--ag-row-hover-color: hsl(var(--muted)); --ag-row-hover-color: hsl(var(--muted));
--ag-wrapper-border: none; --ag-wrapper-border: none;
--ag-font-family: var(--font-sans); --ag-font-family: var(--font-sans);
--ag-selected-row-background-color: hsl(var(--accent));
--ag-focus-shadow: none;
--ag-range-selection-border-color: hsl(var(--primary));
/* Checkbox styling */ /* Checkbox styling */
--ag-checkbox-background-color: hsl(var(--background)); --ag-checkbox-background-color: hsl(var(--background));

99
frontend/src/components/ui/animated-processing-icon.tsx
View file

@ -1,49 +1,70 @@
interface AnimatedProcessingIconProps { import { cn } from "@/lib/utils";
className?: string; import { motion, easeInOut } from "framer-motion";
size?: number;
}
export const AnimatedProcessingIcon = ({ export const AnimatedProcessingIcon = ({
className = "", className,
size = 10, }: {
}: AnimatedProcessingIconProps) => { className?: string;
const width = Math.round((size * 6) / 10); }) => {
const height = size; const createAnimationFrames = (delay: number) => ({
opacity: [1, 1, 0.5, 0], // Opacity Steps
transition: {
delay,
duration: 1,
ease: easeInOut,
repeat: Infinity,
times: [0, 0.33, 0.66, 1], // Duration Percentages that Correspond to opacity Array
},
});
return ( return (
<svg <svg
width={width} data-testid="rotating-dot-animation"
height={height} className={cn("h-[10px] w-[6px]", className)}
viewBox="0 0 6 10" viewBox="0 0 6 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
> >
<style> <motion.circle
{` animate={createAnimationFrames(0)}
.dot-1 { animation: pulse-wave 1.5s infinite; animation-delay: 0s; } fill="currentColor"
.dot-2 { animation: pulse-wave 1.5s infinite; animation-delay: 0.1s; } cx="1"
.dot-3 { animation: pulse-wave 1.5s infinite; animation-delay: 0.2s; } cy="1"
.dot-4 { animation: pulse-wave 1.5s infinite; animation-delay: 0.3s; } r="1"
.dot-5 { animation: pulse-wave 1.5s infinite; animation-delay: 0.4s; } />
<motion.circle
@keyframes pulse-wave { animate={createAnimationFrames(0.16)}
0%, 60%, 100% { fill="currentColor"
opacity: 0.25; cx="1"
transform: scale(1); cy="5"
} r="1"
30% { />
opacity: 1; <motion.circle
transform: scale(1.2); animate={createAnimationFrames(0.33)}
} fill="currentColor"
} cx="1"
`} cy="9"
</style> r="1"
<circle className="dot-1" cx="1" cy="5" r="1" fill="currentColor" /> />
<circle className="dot-2" cx="1" cy="9" r="1" fill="currentColor" /> <motion.circle
<circle className="dot-3" cx="5" cy="1" r="1" fill="currentColor" /> animate={createAnimationFrames(0.83)}
<circle className="dot-4" cx="5" cy="5" r="1" fill="currentColor" /> fill="currentColor"
<circle className="dot-5" cx="5" cy="9" r="1" fill="currentColor" /> cx="5"
cy="1"
r="1"
/>
<motion.circle
animate={createAnimationFrames(0.66)}
fill="currentColor"
cx="5"
cy="5"
r="1"
/>
<motion.circle
animate={createAnimationFrames(0.5)}
fill="currentColor"
cx="5"
cy="9"
r="1"
/>
</svg> </svg>
); );
}; };

4
frontend/src/components/ui/status-badge.tsx
View file

@ -49,9 +49,7 @@ export const StatusBadge = ({ status, className }: StatusBadgeProps) => {
className || "" className || ""
}`} }`}
> >
{status === "processing" && ( {status === "processing" && <AnimatedProcessingIcon className="mr-1.5" />}
<AnimatedProcessingIcon className="text-current mr-2" size={10} />
)}
{config.label} {config.label}
</div> </div>
); );

5
frontend/src/contexts/knowledge-filter-context.tsx
View file

@ -44,6 +44,8 @@ interface KnowledgeFilterContextType {
createMode: boolean; createMode: boolean;
startCreateMode: () => void; startCreateMode: () => void;
endCreateMode: () => void; endCreateMode: () => void;
queryOverride: string;
setQueryOverride: (query: string) => void;
} }
const KnowledgeFilterContext = createContext< const KnowledgeFilterContext = createContext<
@ -73,6 +75,7 @@ export function KnowledgeFilterProvider({
useState<ParsedQueryData | null>(null); useState<ParsedQueryData | null>(null);
const [isPanelOpen, setIsPanelOpen] = useState(false); const [isPanelOpen, setIsPanelOpen] = useState(false);
const [createMode, setCreateMode] = useState(false); const [createMode, setCreateMode] = useState(false);
const [queryOverride, setQueryOverride] = useState('');
const setSelectedFilter = (filter: KnowledgeFilter | null) => { const setSelectedFilter = (filter: KnowledgeFilter | null) => {
setSelectedFilterState(filter); setSelectedFilterState(filter);
@ -148,6 +151,8 @@ export function KnowledgeFilterProvider({
createMode, createMode,
startCreateMode, startCreateMode,
endCreateMode, endCreateMode,
queryOverride,
setQueryOverride,
}; };
return ( return (