Merge branch 'main' into docling-health-improvement
This commit is contained in:
Sebastián Estévez
GitHub
commit
eba449d655
20 changed files with 490 additions and 521 deletions
|
|
@ -7,7 +7,6 @@ import {
|
|||
FolderOpen,
|
||||
Loader2,
|
||||
PlugZap,
|
||||
Plus,
|
||||
Upload,
|
||||
} from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
|
@ -29,15 +28,7 @@ import { useTask } from "@/contexts/task-context";
|
|||
import { cn } from "@/lib/utils";
|
||||
import type { File as SearchFile } from "@/src/app/api/queries/useGetSearchQuery";
|
||||
|
||||
interface KnowledgeDropdownProps {
|
||||
active?: boolean;
|
||||
variant?: "navigation" | "button";
|
||||
}
|
||||
|
||||
export function KnowledgeDropdown({
|
||||
active,
|
||||
variant = "navigation",
|
||||
}: KnowledgeDropdownProps) {
|
||||
export function KnowledgeDropdown() {
|
||||
const { addTask } = useTask();
|
||||
const { refetch: refetchTasks } = useGetTasksQuery();
|
||||
const queryClient = useQueryClient();
|
||||
|
|
@ -498,28 +489,16 @@ export function KnowledgeDropdown({
|
|||
return (
|
||||
<>
|
||||
<div ref={dropdownRef} className="relative">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => !isLoading && setIsOpen(!isOpen)}
|
||||
disabled={isLoading}
|
||||
className={cn(
|
||||
variant === "button"
|
||||
? "rounded-lg h-12 px-4 flex items-center gap-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
: "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:bg-accent hover:text-accent-foreground rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed",
|
||||
variant === "navigation" && active
|
||||
? "bg-accent text-accent-foreground shadow-sm"
|
||||
: variant === "navigation"
|
||||
? "text-foreground hover:text-accent-foreground"
|
||||
: "",
|
||||
)}
|
||||
>
|
||||
{variant === "button" ? (
|
||||
|
||||
<>
|
||||
{isLoading ? (
|
||||
{isLoading &&
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Plus className="h-4 w-4" />
|
||||
)}
|
||||
}
|
||||
<span>
|
||||
{isLoading
|
||||
? fileUploading
|
||||
|
|
@ -542,34 +521,7 @@ export function KnowledgeDropdown({
|
|||
/>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center flex-1">
|
||||
{isLoading ? (
|
||||
<Loader2 className="h-4 w-4 mr-3 shrink-0 animate-spin" />
|
||||
) : (
|
||||
<Upload
|
||||
className={cn(
|
||||
"h-4 w-4 mr-3 shrink-0",
|
||||
active
|
||||
? "text-accent-foreground"
|
||||
: "text-muted-foreground group-hover:text-foreground",
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
Knowledge
|
||||
</div>
|
||||
{!isLoading && (
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
"h-4 w-4 transition-transform",
|
||||
isOpen && "rotate-180",
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
{isOpen && !isLoading && (
|
||||
<div className="absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-md z-50">
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ export const filterAccentClasses: Record<FilterColor, string> = {
|
|||
|
||||
export function KnowledgeFilterPanel() {
|
||||
const {
|
||||
queryOverride,
|
||||
selectedFilter,
|
||||
parsedFilterData,
|
||||
setSelectedFilter,
|
||||
|
|
@ -231,8 +232,8 @@ export function KnowledgeFilterPanel() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l z-40 overflow-y-auto">
|
||||
<Card className="h-full rounded-none border-0 shadow-lg flex flex-col">
|
||||
<div className="h-full bg-background border-l">
|
||||
<Card className="h-full rounded-none border-0 flex flex-col">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
|
|
@ -320,6 +321,7 @@ export function KnowledgeFilterPanel() {
|
|||
className="font-mono placeholder:font-mono"
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
rows={2}
|
||||
disabled={!!queryOverride && !createMode}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
100
frontend/components/knowledge-search-input.tsx
Normal file
100
frontend/components/knowledge-search-input.tsx
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||
import {
|
||||
ChangeEvent,
|
||||
FormEvent,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import { filterAccentClasses } from "./knowledge-filter-panel";
|
||||
import { ArrowRight, Search, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const KnowledgeSearchInput = () => {
|
||||
const {
|
||||
selectedFilter,
|
||||
setSelectedFilter,
|
||||
parsedFilterData,
|
||||
queryOverride,
|
||||
setQueryOverride,
|
||||
} = useKnowledgeFilter();
|
||||
|
||||
const [searchQueryInput, setSearchQueryInput] = useState(queryOverride || "");
|
||||
|
||||
const handleSearch = useCallback(
|
||||
(e?: FormEvent<HTMLFormElement>) => {
|
||||
if (e) e.preventDefault();
|
||||
setQueryOverride(searchQueryInput.trim());
|
||||
},
|
||||
[searchQueryInput, setQueryOverride]
|
||||
);
|
||||
|
||||
// Reset the query text when the selected filter changes
|
||||
useEffect(() => {
|
||||
setSearchQueryInput(queryOverride);
|
||||
}, [queryOverride]);
|
||||
|
||||
return (
|
||||
<form
|
||||
className="flex flex-1 max-w-[min(640px,100%)] min-w-[100px]"
|
||||
onSubmit={handleSearch}
|
||||
>
|
||||
<div className="primary-input group/input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
|
||||
{selectedFilter?.name && (
|
||||
<div
|
||||
title={selectedFilter?.name}
|
||||
className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
|
||||
filterAccentClasses[parsedFilterData?.color || "zinc"]
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{selectedFilter?.name}</span>
|
||||
<X
|
||||
aria-label="Remove filter"
|
||||
className="h-4 w-4 flex-shrink-0 cursor-pointer"
|
||||
onClick={() => setSelectedFilter(null)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Search
|
||||
className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
<input
|
||||
className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
|
||||
name="search-query"
|
||||
id="search-query"
|
||||
type="text"
|
||||
placeholder="Search your documents..."
|
||||
value={searchQueryInput}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setSearchQueryInput(e.target.value)
|
||||
}
|
||||
/>
|
||||
{queryOverride && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-full !px-1.5 !py-0"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSearchQueryInput("");
|
||||
setQueryOverride("");
|
||||
}}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className={cn(
|
||||
"h-full !px-1.5 !py-0 hidden group-focus-within/input:block",
|
||||
searchQueryInput && "block"
|
||||
)}
|
||||
type="submit"
|
||||
>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
|
@ -180,7 +180,7 @@ export const useGetSearchQuery = (
|
|||
|
||||
const queryResult = useQuery(
|
||||
{
|
||||
queryKey: ["search", queryData],
|
||||
queryKey: ["search", queryData, query],
|
||||
placeholderData: (prev) => prev,
|
||||
queryFn: getFiles,
|
||||
...options,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import {
|
||||
AtSign,
|
||||
Bot,
|
||||
Check,
|
||||
ChevronDown,
|
||||
|
|
@ -11,7 +10,6 @@ import {
|
|||
Loader2,
|
||||
Plus,
|
||||
Settings,
|
||||
Upload,
|
||||
User,
|
||||
X,
|
||||
Zap,
|
||||
|
|
@ -31,7 +29,6 @@ import {
|
|||
import { useAuth } from "@/contexts/auth-context";
|
||||
import { type EndpointType, useChat } from "@/contexts/chat-context";
|
||||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||
import { useLayout } from "@/contexts/layout-context";
|
||||
import { useTask } from "@/contexts/task-context";
|
||||
import { useLoadingStore } from "@/stores/loadingStore";
|
||||
import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
|
||||
|
|
@ -151,9 +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 { totalTopOffset } = useLayout();
|
||||
const { selectedFilter, parsedFilterData, isPanelOpen, setSelectedFilter } =
|
||||
const { addTask } = useTask();
|
||||
const { selectedFilter, parsedFilterData, setSelectedFilter } =
|
||||
useKnowledgeFilter();
|
||||
|
||||
const scrollToBottom = () => {
|
||||
|
|
@ -260,7 +256,7 @@ function ChatPage() {
|
|||
"Upload failed with status:",
|
||||
response.status,
|
||||
"Response:",
|
||||
errorText,
|
||||
errorText
|
||||
);
|
||||
throw new Error("Failed to process document");
|
||||
}
|
||||
|
|
@ -470,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(
|
||||
|
|
@ -598,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",
|
||||
|
|
@ -617,7 +613,7 @@ function ChatPage() {
|
|||
}
|
||||
|
||||
return message;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
setMessages(convertedMessages);
|
||||
|
|
@ -706,7 +702,7 @@ function ChatPage() {
|
|||
console.log(
|
||||
"Chat page received file upload error event:",
|
||||
filename,
|
||||
error,
|
||||
error
|
||||
);
|
||||
|
||||
// Replace the last message with error message
|
||||
|
|
@ -720,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) => {
|
||||
|
|
@ -861,7 +857,7 @@ function ChatPage() {
|
|||
console.log(
|
||||
"Received chunk:",
|
||||
chunk.type || chunk.object,
|
||||
chunk,
|
||||
chunk
|
||||
);
|
||||
|
||||
// Extract response ID if present
|
||||
|
|
@ -877,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,
|
||||
|
|
@ -900,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];
|
||||
|
|
@ -912,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";
|
||||
|
|
@ -927,7 +923,7 @@ function ChatPage() {
|
|||
} catch (e) {
|
||||
console.log(
|
||||
"Arguments not yet complete or invalid JSON:",
|
||||
e,
|
||||
e
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -960,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[
|
||||
|
|
@ -974,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
|
||||
|
|
@ -983,7 +979,7 @@ function ChatPage() {
|
|||
) {
|
||||
try {
|
||||
const parsed = JSON.parse(
|
||||
lastFunctionCall.argumentsString,
|
||||
lastFunctionCall.argumentsString
|
||||
);
|
||||
lastFunctionCall.arguments = parsed;
|
||||
lastFunctionCall.status = "completed";
|
||||
|
|
@ -991,7 +987,7 @@ function ChatPage() {
|
|||
} catch (e) {
|
||||
console.log(
|
||||
"Tool arguments not yet complete or invalid JSON:",
|
||||
e,
|
||||
e
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1023,7 +1019,7 @@ function ChatPage() {
|
|||
console.log(
|
||||
"Error parsing function call on finish:",
|
||||
fc,
|
||||
e,
|
||||
e
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1039,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]
|
||||
|
|
@ -1053,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)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1066,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 = {
|
||||
|
|
@ -1084,7 +1080,7 @@ function ChatPage() {
|
|||
currentFunctionCalls.map((fc) => ({
|
||||
id: fc.id,
|
||||
name: fc.name,
|
||||
})),
|
||||
}))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1095,7 +1091,7 @@ function ChatPage() {
|
|||
) {
|
||||
console.log(
|
||||
"Function args delta (Realtime API):",
|
||||
chunk.delta,
|
||||
chunk.delta
|
||||
);
|
||||
const lastFunctionCall =
|
||||
currentFunctionCalls[currentFunctionCalls.length - 1];
|
||||
|
|
@ -1106,7 +1102,7 @@ function ChatPage() {
|
|||
lastFunctionCall.argumentsString += chunk.delta || "";
|
||||
console.log(
|
||||
"Accumulated arguments (Realtime API):",
|
||||
lastFunctionCall.argumentsString,
|
||||
lastFunctionCall.argumentsString
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1117,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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1150,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
|
||||
|
|
@ -1165,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 =
|
||||
|
|
@ -1195,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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1216,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) {
|
||||
|
|
@ -1260,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]
|
||||
|
|
@ -1277,7 +1273,7 @@ function ChatPage() {
|
|||
fc.name ===
|
||||
(chunk.item.tool_name ||
|
||||
chunk.item.name ||
|
||||
chunk.item.type),
|
||||
chunk.item.type)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1293,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 = {
|
||||
|
|
@ -1314,7 +1310,7 @@ function ChatPage() {
|
|||
id: fc.id,
|
||||
name: fc.name,
|
||||
type: fc.type,
|
||||
})),
|
||||
}))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1592,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) {
|
||||
|
|
@ -1657,7 +1653,7 @@ function ChatPage() {
|
|||
|
||||
const renderFunctionCalls = (
|
||||
functionCalls: FunctionCall[],
|
||||
messageIndex?: number,
|
||||
messageIndex?: number
|
||||
) => {
|
||||
if (!functionCalls || functionCalls.length === 0) return null;
|
||||
|
||||
|
|
@ -1908,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") {
|
||||
|
|
@ -1926,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;
|
||||
}
|
||||
|
|
@ -1934,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;
|
||||
}
|
||||
|
|
@ -2031,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();
|
||||
|
|
@ -2047,21 +2043,10 @@ function ChatPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed inset-0 md:left-72 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
|
||||
}`}
|
||||
style={{ top: `${totalTopOffset}px` }}
|
||||
>
|
||||
<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 */}
|
||||
|
|
@ -2167,7 +2152,7 @@ function ChatPage() {
|
|||
<div className="flex-1 min-w-0">
|
||||
{renderFunctionCalls(
|
||||
message.functionCalls || [],
|
||||
index,
|
||||
index
|
||||
)}
|
||||
<MarkdownRenderer chatMessage={message.content} />
|
||||
</div>
|
||||
|
|
@ -2196,7 +2181,7 @@ function ChatPage() {
|
|||
<div className="flex-1">
|
||||
{renderFunctionCalls(
|
||||
streamingMessage.functionCalls,
|
||||
messages.length,
|
||||
messages.length
|
||||
)}
|
||||
<MarkdownRenderer
|
||||
chatMessage={streamingMessage.content}
|
||||
|
|
@ -2263,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}
|
||||
|
|
@ -2370,7 +2357,7 @@ function ChatPage() {
|
|||
.filter((filter) =>
|
||||
filter.name
|
||||
.toLowerCase()
|
||||
.includes(filterSearchTerm.toLowerCase()),
|
||||
.includes(filterSearchTerm.toLowerCase())
|
||||
)
|
||||
.map((filter, index) => (
|
||||
<button
|
||||
|
|
@ -2399,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">
|
||||
|
|
|
|||
|
|
@ -108,8 +108,47 @@
|
|||
}
|
||||
|
||||
@layer components {
|
||||
.app-grid-arrangement {
|
||||
--sidebar-width: 0px;
|
||||
--notifications-width: 0px;
|
||||
--filters-width: 0px;
|
||||
--app-header-height: 53px;
|
||||
--top-banner-height: 0px;
|
||||
|
||||
@media (width >= 48rem) {
|
||||
--sidebar-width: 288px;
|
||||
}
|
||||
&.notifications-open {
|
||||
--notifications-width: 320px;
|
||||
}
|
||||
&.filters-open {
|
||||
--filters-width: 320px;
|
||||
}
|
||||
&.banner-visible {
|
||||
--top-banner-height: 52px;
|
||||
}
|
||||
display: grid;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
grid-template-rows:
|
||||
var(--top-banner-height)
|
||||
var(--app-header-height)
|
||||
1fr;
|
||||
grid-template-columns:
|
||||
var(--sidebar-width)
|
||||
1fr
|
||||
var(--notifications-width)
|
||||
var(--filters-width);
|
||||
grid-template-areas:
|
||||
"banner banner banner banner"
|
||||
"header header header header"
|
||||
"nav main notifications filters";
|
||||
transition: grid-template-columns 0.25s ease-in-out,
|
||||
grid-template-rows 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.header-arrangement {
|
||||
@apply flex w-full h-[53px] items-center justify-between border-b border-border;
|
||||
@apply flex w-full items-center justify-between border-b border-border;
|
||||
}
|
||||
|
||||
.header-start-display {
|
||||
|
|
|
|||
|
|
@ -12,13 +12,15 @@ import { Checkbox } from "@/components/ui/checkbox";
|
|||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||
import { useLayout } from "@/contexts/layout-context";
|
||||
import { useTask } from "@/contexts/task-context";
|
||||
import {
|
||||
type ChunkResult,
|
||||
type File,
|
||||
useGetSearchQuery,
|
||||
} from "../../api/queries/useGetSearchQuery";
|
||||
// import { Label } from "@/components/ui/label";
|
||||
// import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { KnowledgeSearchInput } from "@/components/knowledge-search-input";
|
||||
|
||||
const getFileTypeLabel = (mimetype: string) => {
|
||||
if (mimetype === "application/pdf") return "PDF";
|
||||
|
|
@ -28,22 +30,18 @@ const getFileTypeLabel = (mimetype: string) => {
|
|||
};
|
||||
|
||||
function ChunksPageContent() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } =
|
||||
useKnowledgeFilter();
|
||||
const { isMenuOpen } = useTask();
|
||||
const { totalTopOffset } = useLayout();
|
||||
|
||||
const filename = searchParams.get("filename");
|
||||
const [chunks, setChunks] = useState<ChunkResult[]>([]);
|
||||
const [chunksFilteredByQuery, setChunksFilteredByQuery] = useState<
|
||||
ChunkResult[]
|
||||
>([]);
|
||||
const [selectedChunks, setSelectedChunks] = useState<Set<number>>(new Set());
|
||||
const [activeCopiedChunkIndex, setActiveCopiedChunkIndex] = useState<
|
||||
number | null
|
||||
>(null);
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const { parsedFilterData, queryOverride } = useKnowledgeFilter();
|
||||
const filename = searchParams.get("filename");
|
||||
const [chunks, setChunks] = useState<ChunkResult[]>([]);
|
||||
const [chunksFilteredByQuery, setChunksFilteredByQuery] = useState<
|
||||
ChunkResult[]
|
||||
>([]);
|
||||
// const [selectedChunks, setSelectedChunks] = useState<Set<number>>(new Set());
|
||||
const [activeCopiedChunkIndex, setActiveCopiedChunkIndex] = useState<
|
||||
number | null
|
||||
>(null);
|
||||
|
||||
// Calculate average chunk length
|
||||
const averageChunkLength = useMemo(
|
||||
|
|
@ -53,25 +51,13 @@ function ChunksPageContent() {
|
|||
[chunks],
|
||||
);
|
||||
|
||||
const [selectAll, setSelectAll] = useState(false);
|
||||
const [queryInputText, setQueryInputText] = useState(
|
||||
parsedFilterData?.query ?? "",
|
||||
);
|
||||
// const [selectAll, setSelectAll] = useState(false);
|
||||
|
||||
// Use the same search query as the knowledge page, but we'll filter for the specific file
|
||||
const { data = [], isFetching } = useGetSearchQuery("*", parsedFilterData);
|
||||
|
||||
useEffect(() => {
|
||||
if (queryInputText === "") {
|
||||
setChunksFilteredByQuery(chunks);
|
||||
} else {
|
||||
setChunksFilteredByQuery(
|
||||
chunks.filter((chunk) =>
|
||||
chunk.text.toLowerCase().includes(queryInputText.toLowerCase()),
|
||||
),
|
||||
);
|
||||
}
|
||||
}, [queryInputText, chunks]);
|
||||
// Use the same search query as the knowledge page, but we'll filter for the specific file
|
||||
const { data = [], isFetching } = useGetSearchQuery(
|
||||
queryOverride,
|
||||
parsedFilterData
|
||||
);
|
||||
|
||||
const handleCopy = useCallback((text: string, index: number) => {
|
||||
// Trim whitespace and remove new lines/tabs for cleaner copy
|
||||
|
|
@ -138,67 +124,28 @@ function ChunksPageContent() {
|
|||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed inset-0 md:left-72 flex flex-row 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
|
||||
}`}
|
||||
style={{ top: `${totalTopOffset}px` }}
|
||||
>
|
||||
<div className="flex-1 flex flex-col min-h-0 px-6 py-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col mb-6">
|
||||
<div className="flex flex-row items-center gap-3 mb-6">
|
||||
<Button variant="ghost" onClick={handleBack} size="sm">
|
||||
<ArrowLeft size={24} />
|
||||
</Button>
|
||||
<h1 className="text-lg font-semibold">
|
||||
{/* Removes file extension from filename */}
|
||||
{filename.replace(/\.[^/.]+$/, "")}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex flex-col items-start mt-2">
|
||||
<div className="flex-1 flex items-center gap-2 w-full max-w-[640px]">
|
||||
<div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
|
||||
{selectedFilter?.name && (
|
||||
<div
|
||||
className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
|
||||
filterAccentClasses[parsedFilterData?.color || "zinc"]
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{selectedFilter?.name}</span>
|
||||
<X
|
||||
aria-label="Remove filter"
|
||||
className="h-4 w-4 flex-shrink-0 cursor-pointer"
|
||||
onClick={() => setSelectedFilter(null)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Search
|
||||
className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
<input
|
||||
className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
|
||||
name="search-query"
|
||||
id="search-query"
|
||||
type="text"
|
||||
placeholder="Enter your search query..."
|
||||
onChange={(e) => setQueryInputText(e.target.value)}
|
||||
value={queryInputText}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="flex items-center pl-4 gap-2">
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col mb-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleBack}
|
||||
size="sm"
|
||||
className="max-w-8 max-h-8 -m-2"
|
||||
>
|
||||
<ArrowLeft size={24} />
|
||||
</Button>
|
||||
<h1 className="text-lg font-semibold">
|
||||
{/* Removes file extension from filename */}
|
||||
{filename.replace(/\.[^/.]+$/, "")}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex flex-1">
|
||||
<KnowledgeSearchInput />
|
||||
{/* <div className="flex items-center pl-4 gap-2">
|
||||
<Checkbox
|
||||
id="selectAllChunks"
|
||||
checked={selectAll}
|
||||
|
|
@ -216,36 +163,36 @@ function ChunksPageContent() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Area - matches knowledge page structure */}
|
||||
<div className="flex-1 overflow-scroll pr-6">
|
||||
{isFetching ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Loading chunks...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : chunks.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<p className="text-xl font-semibold mb-2">No knowledge</p>
|
||||
<p className="text-sm text-secondary-foreground">
|
||||
Clear the knowledge filter or return to the knowledge page
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4 pb-6">
|
||||
{chunksFilteredByQuery.map((chunk, index) => (
|
||||
<div
|
||||
key={chunk.filename + index}
|
||||
className="bg-muted rounded-lg p-4 border border-border/50"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* <div>
|
||||
{/* Content Area - matches knowledge page structure */}
|
||||
<div className="flex-1 overflow-auto pr-6">
|
||||
{isFetching ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Loading chunks...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : chunks.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<p className="text-xl font-semibold mb-2">No knowledge</p>
|
||||
<p className="text-sm text-secondary-foreground">
|
||||
Clear the knowledge filter or return to the knowledge page
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4 pb-6">
|
||||
{chunksFilteredByQuery.map((chunk, index) => (
|
||||
<div
|
||||
key={chunk.filename + index}
|
||||
className="bg-muted rounded-lg p-4 border border-border/50"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* <div>
|
||||
<Checkbox
|
||||
checked={selectedChunks.has(index)}
|
||||
onCheckedChange={() =>
|
||||
|
|
|
|||
|
|
@ -1,72 +1,60 @@
|
|||
"use client";
|
||||
|
||||
import type { ColDef, GetRowIdParams } from "ag-grid-community";
|
||||
import {
|
||||
themeQuartz,
|
||||
type ColDef,
|
||||
type GetRowIdParams,
|
||||
} from "ag-grid-community";
|
||||
import { AgGridReact, type CustomCellRendererProps } from "ag-grid-react";
|
||||
import {
|
||||
Building2,
|
||||
Cloud,
|
||||
Globe,
|
||||
HardDrive,
|
||||
Search,
|
||||
Trash2,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { Cloud, FileIcon, Globe } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
type ChangeEvent,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { SiGoogledrive } from "react-icons/si";
|
||||
import { TbBrandOnedrive } from "react-icons/tb";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
|
||||
import { ProtectedRoute } from "@/components/protected-route";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||
import { useLayout } from "@/contexts/layout-context";
|
||||
import { useTask } from "@/contexts/task-context";
|
||||
import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
|
||||
import "@/components/AgGrid/registerAgGridModules";
|
||||
import "@/components/AgGrid/agGridStyles.css";
|
||||
import { toast } from "sonner";
|
||||
import { KnowledgeActionsDropdown } from "@/components/knowledge-actions-dropdown";
|
||||
import { filterAccentClasses } from "@/components/knowledge-filter-panel";
|
||||
import { StatusBadge } from "@/components/ui/status-badge";
|
||||
import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog";
|
||||
import { useDeleteDocument } from "../api/mutations/useDeleteDocument";
|
||||
import GoogleDriveIcon from "../settings/icons/google-drive-icon";
|
||||
import OneDriveIcon from "../settings/icons/one-drive-icon";
|
||||
import SharePointIcon from "../settings/icons/share-point-icon";
|
||||
import { KnowledgeSearchInput } from "@/components/knowledge-search-input";
|
||||
|
||||
// Function to get the appropriate icon for a connector type
|
||||
function getSourceIcon(connectorType?: string) {
|
||||
switch (connectorType) {
|
||||
case "url":
|
||||
return <Globe className="h-4 w-4 text-muted-foreground flex-shrink-0" />;
|
||||
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 "url":
|
||||
return <Globe className="h-4 w-4 text-muted-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" />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function SearchPage() {
|
||||
const router = useRouter();
|
||||
const { isMenuOpen, files: taskFiles, refreshTasks } = useTask();
|
||||
const { totalTopOffset } = useLayout();
|
||||
const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } =
|
||||
useKnowledgeFilter();
|
||||
const { files: taskFiles, refreshTasks } = useTask();
|
||||
const { parsedFilterData, queryOverride } = useKnowledgeFilter();
|
||||
const [selectedRows, setSelectedRows] = useState<File[]>([]);
|
||||
const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
|
||||
|
||||
|
|
@ -77,8 +65,8 @@ function SearchPage() {
|
|||
}, [refreshTasks]);
|
||||
|
||||
const { data: searchData = [], isFetching } = useGetSearchQuery(
|
||||
parsedFilterData?.query || "*",
|
||||
parsedFilterData,
|
||||
queryOverride,
|
||||
parsedFilterData
|
||||
);
|
||||
// Convert TaskFiles to File format and merge with backend results
|
||||
const taskFilesAsFiles: File[] = taskFiles.map((taskFile) => {
|
||||
|
|
@ -94,7 +82,7 @@ function SearchPage() {
|
|||
|
||||
// Create a map of task files by filename for quick lookup
|
||||
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
|
||||
|
|
@ -117,7 +105,7 @@ function SearchPage() {
|
|||
return (
|
||||
taskFile.status !== "active" &&
|
||||
!backendFiles.some(
|
||||
(backendFile) => backendFile.filename === taskFile.filename,
|
||||
(backendFile) => backendFile.filename === taskFile.filename
|
||||
)
|
||||
);
|
||||
});
|
||||
|
|
@ -125,10 +113,6 @@ function SearchPage() {
|
|||
// Combine task files first, then backend files
|
||||
const fileResults = [...backendFiles, ...filteredTaskFiles];
|
||||
|
||||
const handleTableSearch = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
gridRef.current?.api.setGridOption("quickFilterText", e.target.value);
|
||||
};
|
||||
|
||||
const gridRef = useRef<AgGridReact>(null);
|
||||
|
||||
const columnDefs = [
|
||||
|
|
@ -161,8 +145,8 @@ function SearchPage() {
|
|||
}
|
||||
router.push(
|
||||
`/knowledge/chunks?filename=${encodeURIComponent(
|
||||
data?.filename ?? "",
|
||||
)}`,
|
||||
data?.filename ?? ""
|
||||
)}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
|
|
@ -263,7 +247,7 @@ function SearchPage() {
|
|||
try {
|
||||
// Delete each file individually since the API expects one filename at a time
|
||||
const deletePromises = selectedRows.map((row) =>
|
||||
deleteDocumentMutation.mutateAsync({ filename: row.filename }),
|
||||
deleteDocumentMutation.mutateAsync({ filename: row.filename })
|
||||
);
|
||||
|
||||
await Promise.all(deletePromises);
|
||||
|
|
@ -271,7 +255,7 @@ function SearchPage() {
|
|||
toast.success(
|
||||
`Successfully deleted ${selectedRows.length} document${
|
||||
selectedRows.length > 1 ? "s" : ""
|
||||
}`,
|
||||
}`
|
||||
);
|
||||
setSelectedRows([]);
|
||||
setShowBulkDeleteDialog(false);
|
||||
|
|
@ -284,74 +268,23 @@ function SearchPage() {
|
|||
toast.error(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Failed to delete some documents",
|
||||
: "Failed to delete some documents"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed inset-0 md:left-72 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
|
||||
}`}
|
||||
style={{ top: `${totalTopOffset}px` }}
|
||||
>
|
||||
<div className="flex-1 flex flex-col min-h-0 px-6 py-6">
|
||||
<>
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-semibold">Project Knowledge</h2>
|
||||
<KnowledgeDropdown variant="button" />
|
||||
</div>
|
||||
|
||||
{/* Search Input Area */}
|
||||
<div className="flex-shrink-0 mb-6 xl:max-w-[75%]">
|
||||
<form className="flex gap-3">
|
||||
<div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
|
||||
{selectedFilter?.name && (
|
||||
<div
|
||||
className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
|
||||
filterAccentClasses[parsedFilterData?.color || "zinc"]
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{selectedFilter?.name}</span>
|
||||
<X
|
||||
aria-label="Remove filter"
|
||||
className="h-4 w-4 flex-shrink-0 cursor-pointer"
|
||||
onClick={() => setSelectedFilter(null)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Search className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground" />
|
||||
<input
|
||||
className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
|
||||
name="search-query"
|
||||
id="search-query"
|
||||
type="text"
|
||||
placeholder="Enter your search query..."
|
||||
onChange={handleTableSearch}
|
||||
/>
|
||||
</div>
|
||||
{/* <Button
|
||||
type="submit"
|
||||
variant="outline"
|
||||
className="rounded-lg p-0 flex-shrink-0"
|
||||
>
|
||||
{isFetching ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Search className="h-4 w-4" />
|
||||
)}
|
||||
</Button> */}
|
||||
{/* //TODO: Implement sync button */}
|
||||
{/* <Button
|
||||
<div className="flex-1 flex items-center flex-shrink-0 flex-wrap-reverse gap-3 mb-6">
|
||||
<KnowledgeSearchInput />
|
||||
{/* //TODO: Implement sync button */}
|
||||
{/* <Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="rounded-lg flex-shrink-0"
|
||||
|
|
@ -359,17 +292,19 @@ function SearchPage() {
|
|||
>
|
||||
Sync
|
||||
</Button> */}
|
||||
{selectedRows.length > 0 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
className="rounded-lg flex-shrink-0"
|
||||
onClick={() => setShowBulkDeleteDialog(true)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" /> Delete
|
||||
</Button>
|
||||
)}
|
||||
</form>
|
||||
{selectedRows.length > 0 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
className="rounded-lg flex-shrink-0"
|
||||
onClick={() => setShowBulkDeleteDialog(true)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
<div className="ml-auto">
|
||||
<KnowledgeDropdown />
|
||||
</div>
|
||||
</div>
|
||||
<AgGridReact
|
||||
className="w-full overflow-auto"
|
||||
|
|
@ -377,6 +312,7 @@ function SearchPage() {
|
|||
defaultColDef={defaultColDef}
|
||||
loading={isFetching}
|
||||
ref={gridRef}
|
||||
theme={themeQuartz.withParams({ browserColorScheme: "inherit" })}
|
||||
rowData={fileResults}
|
||||
rowSelection="multiple"
|
||||
rowMultiSelectWithClick={false}
|
||||
|
|
@ -414,7 +350,7 @@ ${selectedRows.map((row) => `• ${row.filename}`).join("\n")}`}
|
|||
onConfirm={handleBulkDelete}
|
||||
isLoading={deleteDocumentMutation.isPending}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export default function RootLayout({
|
|||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body
|
||||
className={`${inter.variable} ${jetbrainsMono.variable} ${chivo.variable} antialiased h-full w-full overflow-hidden`}
|
||||
className={`${inter.variable} ${jetbrainsMono.variable} ${chivo.variable} antialiased h-lvh w-full overflow-hidden`}
|
||||
>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -623,7 +623,7 @@ function KnowledgeSourcesPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-8 pb-6">
|
||||
{/* Connectors Section */}
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -12,12 +12,10 @@ import { KnowledgeFilterPanel } from "@/components/knowledge-filter-panel";
|
|||
import Logo from "@/components/logo/logo";
|
||||
import { Navigation } from "@/components/navigation";
|
||||
import { TaskNotificationMenu } from "@/components/task-notification-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { UserNav } from "@/components/user-nav";
|
||||
import { useAuth } from "@/contexts/auth-context";
|
||||
import { useChat } from "@/contexts/chat-context";
|
||||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||
import { LayoutProvider } from "@/contexts/layout-context";
|
||||
// import { GitHubStarButton } from "@/components/github-star-button"
|
||||
// import { DiscordLink } from "@/components/discord-link"
|
||||
import { useTask } from "@/contexts/task-context";
|
||||
|
|
@ -35,7 +33,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
|||
refreshConversations,
|
||||
startNewConversation,
|
||||
} = useChat();
|
||||
const { isLoading: isSettingsLoading, data: settings } = useGetSettingsQuery({
|
||||
const { isLoading: isSettingsLoading } = useGetSettingsQuery({
|
||||
enabled: isAuthenticated || isNoAuthMode,
|
||||
});
|
||||
const {
|
||||
|
|
@ -59,6 +57,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
|||
// List of paths that should not show navigation
|
||||
const authPaths = ["/login", "/auth/callback", "/onboarding"];
|
||||
const isAuthPage = authPaths.includes(pathname);
|
||||
const isOnKnowledgePage = pathname.startsWith("/knowledge");
|
||||
|
||||
// List of paths with smaller max-width
|
||||
const smallWidthPaths = ["/settings", "/settings/connector/new"];
|
||||
|
|
@ -66,7 +65,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
|||
|
||||
// Calculate active tasks for the bell icon
|
||||
const activeTasks = tasks.filter(
|
||||
task =>
|
||||
(task) =>
|
||||
task.status === "pending" ||
|
||||
task.status === "running" ||
|
||||
task.status === "processing"
|
||||
|
|
@ -75,14 +74,6 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
|||
const isUnhealthy = health?.status === "unhealthy" || isError;
|
||||
const isBannerVisible = !isHealthLoading && isUnhealthy;
|
||||
|
||||
// Dynamic height calculations based on banner visibility
|
||||
const headerHeight = 53;
|
||||
const bannerHeight = 52; // Approximate banner height
|
||||
const totalTopOffset = isBannerVisible
|
||||
? headerHeight + bannerHeight
|
||||
: headerHeight;
|
||||
const mainContentHeight = `calc(100vh - ${totalTopOffset}px)`;
|
||||
|
||||
// Show loading state when backend isn't ready
|
||||
if (isLoading || isSettingsLoading) {
|
||||
return (
|
||||
|
|
@ -102,9 +93,18 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
|||
|
||||
// For all other pages, render with Langflow-styled navigation and task menu
|
||||
return (
|
||||
<div className="h-full relative">
|
||||
<DoclingHealthBanner className="w-full pt-2" />
|
||||
<header className="header-arrangement bg-background sticky top-0 z-50 h-10">
|
||||
<div
|
||||
className={cn(
|
||||
"app-grid-arrangement",
|
||||
isBannerVisible && "banner-visible",
|
||||
isPanelOpen && isOnKnowledgePage && !isMenuOpen && "filters-open",
|
||||
isMenuOpen && "notifications-open"
|
||||
)}
|
||||
>
|
||||
<div className="w-full [grid-area:banner]">
|
||||
<DoclingHealthBanner className="w-full" />
|
||||
</div>
|
||||
<header className="header-arrangement bg-background [grid-area:header]">
|
||||
<div className="header-start-display px-[16px]">
|
||||
{/* Logo/Title */}
|
||||
<div className="flex items-center">
|
||||
|
|
@ -144,47 +144,37 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
|||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div
|
||||
className="side-bar-arrangement bg-background fixed left-0 top-[40px] bottom-0 md:flex hidden pt-1"
|
||||
style={{ top: `${totalTopOffset}px` }}
|
||||
>
|
||||
|
||||
{/* Sidebar Navigation */}
|
||||
<aside className="bg-background border-r overflow-hidden [grid-area:nav]">
|
||||
<Navigation
|
||||
conversations={conversations}
|
||||
isConversationsLoading={isConversationsLoading}
|
||||
onNewConversation={handleNewConversation}
|
||||
/>
|
||||
</div>
|
||||
<main
|
||||
className={`md:pl-72 transition-all duration-300 overflow-y-auto ${
|
||||
isMenuOpen && isPanelOpen
|
||||
? "md:pr-[728px]"
|
||||
: // Both open: 384px (menu) + 320px (KF panel) + 24px (original padding)
|
||||
isMenuOpen
|
||||
? "md:pr-96"
|
||||
: // Only menu open: 384px
|
||||
isPanelOpen
|
||||
? "md:pr-80"
|
||||
: // Only KF panel open: 320px
|
||||
"md:pr-0" // Neither open: 24px
|
||||
}`}
|
||||
style={{ height: mainContentHeight }}
|
||||
>
|
||||
<LayoutProvider
|
||||
headerHeight={headerHeight}
|
||||
totalTopOffset={totalTopOffset}
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="overflow-y-auto [grid-area:main]">
|
||||
<div
|
||||
className={cn(
|
||||
"p-6 h-full container",
|
||||
isSmallWidthPath && "max-w-[850px] ml-0"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"py-6 lg:py-8 px-4 lg:px-6",
|
||||
isSmallWidthPath ? "max-w-[850px]" : "container"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</LayoutProvider>
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
<TaskNotificationMenu />
|
||||
<KnowledgeFilterPanel />
|
||||
|
||||
{/* Task Notifications Panel */}
|
||||
<aside className="overflow-y-auto overflow-x-hidden [grid-area:notifications]">
|
||||
{isMenuOpen && <TaskNotificationMenu />}
|
||||
</aside>
|
||||
|
||||
{/* Knowledge Filter Panel */}
|
||||
<aside className="overflow-y-auto overflow-x-hidden [grid-area:filters]">
|
||||
{isPanelOpen && <KnowledgeFilterPanel />}
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -143,10 +143,10 @@ export function TaskNotificationMenu() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="fixed top-14 right-0 z-40 w-80 h-[calc(100vh-3.5rem)] bg-background border-l border-border/40">
|
||||
<div className="h-full bg-background border-l">
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-border/40">
|
||||
<div className="p-4 border-b">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bell className="h-5 w-5 text-muted-foreground" />
|
||||
|
|
|
|||
|
|
@ -1,37 +1,70 @@
|
|||
import type { SVGProps } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { motion, easeInOut } from "framer-motion";
|
||||
|
||||
export const AnimatedProcessingIcon = (props: SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 8 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<title>Processing</title>
|
||||
<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;
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<circle className="dot-1" cx="2" cy="6" r="1" fill="currentColor" />
|
||||
<circle className="dot-2" cx="2" cy="10" r="1" fill="currentColor" />
|
||||
<circle className="dot-3" cx="6" cy="2" r="1" fill="currentColor" />
|
||||
<circle className="dot-4" cx="6" cy="6" r="1" fill="currentColor" />
|
||||
<circle className="dot-5" cx="6" cy="10" r="1" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
export const AnimatedProcessingIcon = ({
|
||||
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
|
||||
data-testid="rotating-dot-animation"
|
||||
className={cn("h-[10px] w-[6px]", className)}
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export const StatusBadge = ({ status, className }: StatusBadgeProps) => {
|
|||
}`}
|
||||
>
|
||||
{status === "processing" && (
|
||||
<AnimatedProcessingIcon className="text-current h-3 w-3 shrink-0" />
|
||||
<AnimatedProcessingIcon className="text-current shrink-0" />
|
||||
)}
|
||||
{config.label}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import React, {
|
|||
createContext,
|
||||
type ReactNode,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
|
|
@ -44,6 +45,8 @@ interface KnowledgeFilterContextType {
|
|||
createMode: boolean;
|
||||
startCreateMode: () => void;
|
||||
endCreateMode: () => void;
|
||||
queryOverride: string;
|
||||
setQueryOverride: (query: string) => void;
|
||||
}
|
||||
|
||||
const KnowledgeFilterContext = createContext<
|
||||
|
|
@ -73,6 +76,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);
|
||||
|
|
@ -136,6 +140,11 @@ export function KnowledgeFilterProvider({
|
|||
setCreateMode(false);
|
||||
};
|
||||
|
||||
// Clear the search override when we change filters
|
||||
useEffect(() => {
|
||||
setQueryOverride("");
|
||||
}, [selectedFilter]);
|
||||
|
||||
const value: KnowledgeFilterContextType = {
|
||||
selectedFilter,
|
||||
parsedFilterData,
|
||||
|
|
@ -148,6 +157,8 @@ export function KnowledgeFilterProvider({
|
|||
createMode,
|
||||
startCreateMode,
|
||||
endCreateMode,
|
||||
queryOverride,
|
||||
setQueryOverride,
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { createContext, useContext } from "react";
|
||||
|
||||
interface LayoutContextType {
|
||||
headerHeight: number;
|
||||
totalTopOffset: number;
|
||||
}
|
||||
|
||||
const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
|
||||
|
||||
export function useLayout() {
|
||||
const context = useContext(LayoutContext);
|
||||
if (context === undefined) {
|
||||
throw new Error("useLayout must be used within a LayoutProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
export function LayoutProvider({
|
||||
children,
|
||||
headerHeight,
|
||||
totalTopOffset
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
headerHeight: number;
|
||||
totalTopOffset: number;
|
||||
}) {
|
||||
return (
|
||||
<LayoutContext.Provider value={{ headerHeight, totalTopOffset }}>
|
||||
{children}
|
||||
</LayoutContext.Provider>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue