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

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 {
ChevronDown,
Cloud,
File,
FolderOpen,
Loader2,
PlugZap,
Upload,
} from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
@ -23,6 +23,9 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useTask } from "@/contexts/task-context";
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() {
const { addTask } = useTask();
@ -48,6 +51,15 @@ export function KnowledgeDropdown() {
const fileInputRef = useRef<HTMLInputElement>(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
useEffect(() => {
const checkAvailability = async () => {
@ -368,7 +380,7 @@ export function KnowledgeDropdown() {
.filter(([, info]) => info.available)
.map(([type, info]) => ({
label: info.name,
icon: PlugZap,
icon: connectorIconMap[type] || PlugZap,
onClick: async () => {
setIsOpen(false);
if (info.connected && info.hasToken) {
@ -395,7 +407,7 @@ export function KnowledgeDropdown() {
const menuItems = [
{
label: "Add File",
icon: Upload,
icon: File,
onClick: handleFileUpload,
},
{

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

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

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

@ -1,7 +1,6 @@
"use client";
import {
AtSign,
Bot,
Check,
ChevronDown,
@ -11,7 +10,6 @@ import {
Loader2,
Plus,
Settings,
Upload,
User,
X,
Zap,
@ -150,8 +148,8 @@ function ChatPage() {
const streamAbortRef = useRef<AbortController | null>(null);
const streamIdRef = useRef(0);
const lastLoadedConversationRef = useRef<string | null>(null);
const { addTask, isMenuOpen } = useTask();
const { selectedFilter, parsedFilterData, isPanelOpen, setSelectedFilter } =
const { addTask } = useTask();
const { selectedFilter, parsedFilterData, setSelectedFilter } =
useKnowledgeFilter();
const scrollToBottom = () => {
@ -258,7 +256,7 @@ function ChatPage() {
"Upload failed with status:",
response.status,
"Response:",
errorText,
errorText
);
throw new Error("Failed to process document");
}
@ -468,7 +466,7 @@ function ChatPage() {
console.log(
"Loading conversation with",
conversationData.messages.length,
"messages",
"messages"
);
// Convert backend message format to frontend Message interface
const convertedMessages: Message[] = conversationData.messages.map(
@ -596,7 +594,7 @@ function ChatPage() {
) === "string"
? toolCall.function?.arguments || toolCall.arguments
: JSON.stringify(
toolCall.function?.arguments || toolCall.arguments,
toolCall.function?.arguments || toolCall.arguments
),
result: toolCall.result,
status: "completed",
@ -615,7 +613,7 @@ function ChatPage() {
}
return message;
},
}
);
setMessages(convertedMessages);
@ -704,7 +702,7 @@ function ChatPage() {
console.log(
"Chat page received file upload error event:",
filename,
error,
error
);
// Replace the last message with error message
@ -718,43 +716,43 @@ function ChatPage() {
window.addEventListener(
"fileUploadStart",
handleFileUploadStart as EventListener,
handleFileUploadStart as EventListener
);
window.addEventListener(
"fileUploaded",
handleFileUploaded as EventListener,
handleFileUploaded as EventListener
);
window.addEventListener(
"fileUploadComplete",
handleFileUploadComplete as EventListener,
handleFileUploadComplete as EventListener
);
window.addEventListener(
"fileUploadError",
handleFileUploadError as EventListener,
handleFileUploadError as EventListener
);
return () => {
window.removeEventListener(
"fileUploadStart",
handleFileUploadStart as EventListener,
handleFileUploadStart as EventListener
);
window.removeEventListener(
"fileUploaded",
handleFileUploaded as EventListener,
handleFileUploaded as EventListener
);
window.removeEventListener(
"fileUploadComplete",
handleFileUploadComplete as EventListener,
handleFileUploadComplete as EventListener
);
window.removeEventListener(
"fileUploadError",
handleFileUploadError as EventListener,
handleFileUploadError as EventListener
);
};
}, [endpoint, setPreviousResponseIds]);
const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery(
previousResponseIds[endpoint],
previousResponseIds[endpoint]
);
const handleSSEStream = async (userMessage: Message) => {
@ -859,7 +857,7 @@ function ChatPage() {
console.log(
"Received chunk:",
chunk.type || chunk.object,
chunk,
chunk
);
// Extract response ID if present
@ -875,14 +873,14 @@ function ChatPage() {
if (chunk.delta.function_call) {
console.log(
"Function call in delta:",
chunk.delta.function_call,
chunk.delta.function_call
);
// Check if this is a new function call
if (chunk.delta.function_call.name) {
console.log(
"New function call:",
chunk.delta.function_call.name,
chunk.delta.function_call.name
);
const functionCall: FunctionCall = {
name: chunk.delta.function_call.name,
@ -898,7 +896,7 @@ function ChatPage() {
else if (chunk.delta.function_call.arguments) {
console.log(
"Function call arguments delta:",
chunk.delta.function_call.arguments,
chunk.delta.function_call.arguments
);
const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1];
@ -910,14 +908,14 @@ function ChatPage() {
chunk.delta.function_call.arguments;
console.log(
"Accumulated arguments:",
lastFunctionCall.argumentsString,
lastFunctionCall.argumentsString
);
// Try to parse arguments if they look complete
if (lastFunctionCall.argumentsString.includes("}")) {
try {
const parsed = JSON.parse(
lastFunctionCall.argumentsString,
lastFunctionCall.argumentsString
);
lastFunctionCall.arguments = parsed;
lastFunctionCall.status = "completed";
@ -925,7 +923,7 @@ function ChatPage() {
} catch (e) {
console.log(
"Arguments not yet complete or invalid JSON:",
e,
e
);
}
}
@ -958,7 +956,7 @@ function ChatPage() {
else if (toolCall.function.arguments) {
console.log(
"Tool call arguments delta:",
toolCall.function.arguments,
toolCall.function.arguments
);
const lastFunctionCall =
currentFunctionCalls[
@ -972,7 +970,7 @@ function ChatPage() {
toolCall.function.arguments;
console.log(
"Accumulated tool arguments:",
lastFunctionCall.argumentsString,
lastFunctionCall.argumentsString
);
// Try to parse arguments if they look complete
@ -981,7 +979,7 @@ function ChatPage() {
) {
try {
const parsed = JSON.parse(
lastFunctionCall.argumentsString,
lastFunctionCall.argumentsString
);
lastFunctionCall.arguments = parsed;
lastFunctionCall.status = "completed";
@ -989,7 +987,7 @@ function ChatPage() {
} catch (e) {
console.log(
"Tool arguments not yet complete or invalid JSON:",
e,
e
);
}
}
@ -1021,7 +1019,7 @@ function ChatPage() {
console.log(
"Error parsing function call on finish:",
fc,
e,
e
);
}
}
@ -1037,12 +1035,12 @@ function ChatPage() {
console.log(
"🟢 CREATING function call (added):",
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)
let existing = currentFunctionCalls.find(
(fc) => fc.id === chunk.item.id,
(fc) => fc.id === chunk.item.id
);
if (!existing) {
existing = [...currentFunctionCalls]
@ -1051,7 +1049,7 @@ function ChatPage() {
(fc) =>
fc.status === "pending" &&
!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;
console.log(
"🟢 UPDATED existing pending function call with id:",
existing.id,
existing.id
);
} else {
const functionCall: FunctionCall = {
@ -1082,7 +1080,7 @@ function ChatPage() {
currentFunctionCalls.map((fc) => ({
id: fc.id,
name: fc.name,
})),
}))
);
}
}
@ -1093,7 +1091,7 @@ function ChatPage() {
) {
console.log(
"Function args delta (Realtime API):",
chunk.delta,
chunk.delta
);
const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1];
@ -1104,7 +1102,7 @@ function ChatPage() {
lastFunctionCall.argumentsString += chunk.delta || "";
console.log(
"Accumulated arguments (Realtime API):",
lastFunctionCall.argumentsString,
lastFunctionCall.argumentsString
);
}
}
@ -1115,26 +1113,26 @@ function ChatPage() {
) {
console.log(
"Function args done (Realtime API):",
chunk.arguments,
chunk.arguments
);
const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1];
if (lastFunctionCall) {
try {
lastFunctionCall.arguments = JSON.parse(
chunk.arguments || "{}",
chunk.arguments || "{}"
);
lastFunctionCall.status = "completed";
console.log(
"Parsed function arguments (Realtime API):",
lastFunctionCall.arguments,
lastFunctionCall.arguments
);
} catch (e) {
lastFunctionCall.arguments = { raw: chunk.arguments };
lastFunctionCall.status = "error";
console.log(
"Error parsing function arguments (Realtime API):",
e,
e
);
}
}
@ -1148,14 +1146,14 @@ function ChatPage() {
console.log(
"🔵 UPDATING function call (done):",
chunk.item.id,
chunk.item.tool_name || chunk.item.name,
chunk.item.tool_name || chunk.item.name
);
console.log(
"🔵 Looking for existing function calls:",
currentFunctionCalls.map((fc) => ({
id: fc.id,
name: fc.name,
})),
}))
);
// Find existing function call by ID or name
@ -1163,14 +1161,14 @@ function ChatPage() {
(fc) =>
fc.id === chunk.item.id ||
fc.name === chunk.item.tool_name ||
fc.name === chunk.item.name,
fc.name === chunk.item.name
);
if (functionCall) {
console.log(
"🔵 FOUND existing function call, updating:",
functionCall.id,
functionCall.name,
functionCall.name
);
// Update existing function call with completion data
functionCall.status =
@ -1193,7 +1191,7 @@ function ChatPage() {
"🔴 WARNING: Could not find existing function call to update:",
chunk.item.id,
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.type ||
fc.name.includes(chunk.item.type.replace("_call", "")) ||
chunk.item.type.includes(fc.name),
chunk.item.type.includes(fc.name)
);
if (functionCall) {
@ -1258,12 +1256,12 @@ function ChatPage() {
"🟡 CREATING tool call (added):",
chunk.item.id,
chunk.item.tool_name || chunk.item.name,
chunk.item.type,
chunk.item.type
);
// Dedupe by id or pending with same name
let existing = currentFunctionCalls.find(
(fc) => fc.id === chunk.item.id,
(fc) => fc.id === chunk.item.id
);
if (!existing) {
existing = [...currentFunctionCalls]
@ -1275,7 +1273,7 @@ function ChatPage() {
fc.name ===
(chunk.item.tool_name ||
chunk.item.name ||
chunk.item.type),
chunk.item.type)
);
}
@ -1291,7 +1289,7 @@ function ChatPage() {
chunk.item.inputs || existing.arguments;
console.log(
"🟡 UPDATED existing pending tool call with id:",
existing.id,
existing.id
);
} else {
const functionCall = {
@ -1312,7 +1310,7 @@ function ChatPage() {
id: fc.id,
name: fc.name,
type: fc.type,
})),
}))
);
}
}
@ -1590,7 +1588,7 @@ function ChatPage() {
const handleForkConversation = (
messageIndex: number,
event?: React.MouseEvent,
event?: React.MouseEvent
) => {
// Prevent any default behavior and stop event propagation
if (event) {
@ -1655,7 +1653,7 @@ function ChatPage() {
const renderFunctionCalls = (
functionCalls: FunctionCall[],
messageIndex?: number,
messageIndex?: number
) => {
if (!functionCalls || functionCalls.length === 0) return null;
@ -1906,7 +1904,7 @@ function ChatPage() {
if (isFilterDropdownOpen) {
const filteredFilters = availableFilters.filter((filter) =>
filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase()),
filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase())
);
if (e.key === "Escape") {
@ -1924,7 +1922,7 @@ function ChatPage() {
if (e.key === "ArrowDown") {
e.preventDefault();
setSelectedFilterIndex((prev) =>
prev < filteredFilters.length - 1 ? prev + 1 : 0,
prev < filteredFilters.length - 1 ? prev + 1 : 0
);
return;
}
@ -1932,7 +1930,7 @@ function ChatPage() {
if (e.key === "ArrowUp") {
e.preventDefault();
setSelectedFilterIndex((prev) =>
prev > 0 ? prev - 1 : filteredFilters.length - 1,
prev > 0 ? prev - 1 : filteredFilters.length - 1
);
return;
}
@ -2029,7 +2027,7 @@ function ChatPage() {
// Get button position for popover anchoring
const button = document.querySelector(
"[data-filter-button]",
"[data-filter-button]"
) as HTMLElement;
if (button) {
const rect = button.getBoundingClientRect();
@ -2045,20 +2043,10 @@ function ChatPage() {
};
return (
<div
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
}`}
>
<div className="flex flex-col h-full">
{/* Debug header - only show in debug mode */}
{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-4">
{/* Async Mode Toggle */}
@ -2164,7 +2152,7 @@ function ChatPage() {
<div className="flex-1 min-w-0">
{renderFunctionCalls(
message.functionCalls || [],
index,
index
)}
<MarkdownRenderer chatMessage={message.content} />
</div>
@ -2193,7 +2181,7 @@ function ChatPage() {
<div className="flex-1">
{renderFunctionCalls(
streamingMessage.functionCalls,
messages.length,
messages.length
)}
<MarkdownRenderer
chatMessage={streamingMessage.content}
@ -2260,29 +2248,31 @@ function ChatPage() {
</span>
</div>
)}
<div className="relative" style={{height: `${textareaHeight + 60}px`}}>
<TextareaAutosize
ref={inputRef}
value={input}
onChange={onChange}
onKeyDown={handleKeyDown}
onHeightChange={(height) => setTextareaHeight(height)}
maxRows={7}
minRows={2}
placeholder="Type to ask a question..."
disabled={loading}
className={`w-full bg-transparent px-4 ${
selectedFilter ? "pt-2" : "pt-4"
} focus-visible:outline-none resize-none`}
rows={2}
/>
<div
className="relative"
style={{ height: `${textareaHeight + 60}px` }}
>
<TextareaAutosize
ref={inputRef}
value={input}
onChange={onChange}
onKeyDown={handleKeyDown}
onHeightChange={(height) => setTextareaHeight(height)}
maxRows={7}
minRows={2}
placeholder="Type to ask a question..."
disabled={loading}
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 */}
<div
<div
className="absolute bottom-0 left-0 right-0 bg-transparent pointer-events-none"
style={{ height: '60px' }}
style={{ height: "60px" }}
/>
</div>
</div>
<input
ref={fileInputRef}
@ -2367,7 +2357,7 @@ function ChatPage() {
.filter((filter) =>
filter.name
.toLowerCase()
.includes(filterSearchTerm.toLowerCase()),
.includes(filterSearchTerm.toLowerCase())
)
.map((filter, index) => (
<button
@ -2396,7 +2386,7 @@ function ChatPage() {
{availableFilters.filter((filter) =>
filter.name
.toLowerCase()
.includes(filterSearchTerm.toLowerCase()),
.includes(filterSearchTerm.toLowerCase())
).length === 0 &&
filterSearchTerm && (
<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 { 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 { type ChangeEvent, useCallback, useRef, useState } from "react";
import { SiGoogledrive } from "react-icons/si";
import { TbBrandOnedrive } from "react-icons/tb";
import {
type ChangeEvent,
FormEvent,
useCallback,
useRef,
useState,
} from "react";
import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
import { ProtectedRoute } from "@/components/protected-route";
import { Button } from "@/components/ui/button";
@ -21,25 +25,28 @@ import { StatusBadge } from "@/components/ui/status-badge";
import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog";
import { useDeleteDocument } from "../api/mutations/useDeleteDocument";
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 getSourceIcon(connectorType?: string) {
switch (connectorType) {
case "google_drive":
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":
return (
<TbBrandOnedrive className="h-4 w-4 text-foreground flex-shrink-0" />
);
return <OneDriveIcon className="h-4 w-4 text-foreground flex-shrink-0" />;
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":
return <Cloud className="h-4 w-4 text-foreground flex-shrink-0" />;
default:
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() {
const router = useRouter();
const { files: taskFiles } = useTask();
const { selectedFilter, setSelectedFilter, parsedFilterData } =
useKnowledgeFilter();
const {
selectedFilter,
setSelectedFilter,
parsedFilterData,
queryOverride,
setQueryOverride,
} = useKnowledgeFilter();
const [searchQueryInput, setSearchQueryInput] = useState(queryOverride || "");
const [selectedRows, setSelectedRows] = useState<File[]>([]);
const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
const deleteDocumentMutation = useDeleteDocument();
const { data = [], isFetching } = useGetSearchQuery(
parsedFilterData?.query || "*",
queryOverride,
parsedFilterData
);
const handleTableSearch = (e: ChangeEvent<HTMLInputElement>) => {
gridRef.current?.api.setGridOption("quickFilterText", e.target.value);
};
const handleSearch = useCallback(
(e?: FormEvent<HTMLFormElement>) => {
if (e) e.preventDefault();
setQueryOverride(searchQueryInput.trim());
},
[searchQueryInput, setQueryOverride]
);
// Convert TaskFiles to File format and merge with backend results
const taskFilesAsFiles: File[] = taskFiles.map((taskFile) => {
@ -236,7 +253,10 @@ function SearchPage() {
{/* Search Input Area */}
<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]">
{selectedFilter?.name && (
<div
@ -263,7 +283,10 @@ function SearchPage() {
id="search-query"
type="text"
placeholder="Search your documents..."
onChange={handleTableSearch}
value={searchQueryInput}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setSearchQueryInput(e.target.value)
}
/>
</div>
{/* <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
xmlns="http://www.w3.org/2000/svg"
width="18"
height="16"
viewBox="0 0 18 16"
fill="none"
className={className}
>
<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"

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

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

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

@ -10,6 +10,9 @@ body {
--ag-row-hover-color: hsl(var(--muted));
--ag-wrapper-border: none;
--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 */
--ag-checkbox-background-color: hsl(var(--background));

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

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

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

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

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

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