use new hook to get all knowledges
This commit is contained in:
Lucas Oliveira
parent
f22f479b1f
commit
fb554445ce
1 changed files with 135 additions and 142 deletions
|
|
@ -1,165 +1,158 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { Plus } from "lucide-react";
|
import { Plus } from "lucide-react";
|
||||||
import { useState } from "react";
|
import { useGetAllFiltersQuery } from "@/app/api/queries/useGetAllFiltersQuery";
|
||||||
import {
|
import type { KnowledgeFilter } from "@/app/api/queries/useGetFiltersSearchQuery";
|
||||||
type KnowledgeFilter,
|
|
||||||
useGetFiltersSearchQuery,
|
|
||||||
} from "@/app/api/queries/useGetFiltersSearchQuery";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
import {
|
import {
|
||||||
type FilterColor,
|
type FilterColor,
|
||||||
type IconKey,
|
type IconKey,
|
||||||
iconKeyToComponent,
|
iconKeyToComponent,
|
||||||
} from "./filter-icon-popover";
|
} from "./filter-icon-popover";
|
||||||
import { filterAccentClasses } from "./knowledge-filter-panel";
|
import { filterAccentClasses } from "./knowledge-filter-panel";
|
||||||
|
|
||||||
interface ParsedQueryData {
|
interface ParsedQueryData {
|
||||||
query: string;
|
query: string;
|
||||||
filters: {
|
filters: {
|
||||||
data_sources: string[];
|
data_sources: string[];
|
||||||
document_types: string[];
|
document_types: string[];
|
||||||
owners: string[];
|
owners: string[];
|
||||||
};
|
};
|
||||||
limit: number;
|
limit: number;
|
||||||
scoreThreshold: number;
|
scoreThreshold: number;
|
||||||
color: FilterColor;
|
color: FilterColor;
|
||||||
icon: IconKey;
|
icon: IconKey;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface KnowledgeFilterListProps {
|
interface KnowledgeFilterListProps {
|
||||||
selectedFilter: KnowledgeFilter | null;
|
selectedFilter: KnowledgeFilter | null;
|
||||||
onFilterSelect: (filter: KnowledgeFilter | null) => void;
|
onFilterSelect: (filter: KnowledgeFilter | null) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function KnowledgeFilterList({
|
export function KnowledgeFilterList({
|
||||||
selectedFilter,
|
selectedFilter,
|
||||||
onFilterSelect,
|
onFilterSelect,
|
||||||
}: KnowledgeFilterListProps) {
|
}: KnowledgeFilterListProps) {
|
||||||
const [searchQuery] = useState("");
|
const { startCreateMode } = useKnowledgeFilter();
|
||||||
const { startCreateMode } = useKnowledgeFilter();
|
|
||||||
|
|
||||||
const { data, isFetching: loading } = useGetFiltersSearchQuery(
|
const { data, isFetching: loading } = useGetAllFiltersQuery();
|
||||||
searchQuery,
|
|
||||||
20,
|
|
||||||
);
|
|
||||||
|
|
||||||
const filters = data || [];
|
const filters = data || [];
|
||||||
|
|
||||||
const handleFilterSelect = (filter: KnowledgeFilter) => {
|
const handleFilterSelect = (filter: KnowledgeFilter) => {
|
||||||
if (filter.id === selectedFilter?.id) {
|
if (filter.id === selectedFilter?.id) {
|
||||||
onFilterSelect(null);
|
onFilterSelect(null);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
onFilterSelect(filter);
|
onFilterSelect(filter);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCreateNew = () => {
|
const handleCreateNew = () => {
|
||||||
startCreateMode();
|
startCreateMode();
|
||||||
};
|
};
|
||||||
|
|
||||||
const parseQueryData = (queryData: string): ParsedQueryData => {
|
const parseQueryData = (queryData: string): ParsedQueryData => {
|
||||||
return JSON.parse(queryData) as ParsedQueryData;
|
return JSON.parse(queryData) as ParsedQueryData;
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex-1 min-h-0 flex flex-col">
|
<div className="flex-1 min-h-0 flex flex-col">
|
||||||
<div className="px-3 flex-1 min-h-0 flex flex-col">
|
<div className="px-3 flex-1 min-h-0 flex flex-col">
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
<div className="flex items-center justify-between mb-3 mr-2 ml-4">
|
<div className="flex items-center justify-between mb-3 mr-2 ml-4">
|
||||||
<h3 className="text-xs font-medium text-muted-foreground">
|
<h3 className="text-xs font-medium text-muted-foreground">
|
||||||
Knowledge Filters
|
Knowledge Filters
|
||||||
</h3>
|
</h3>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="p-1 hover:bg-accent rounded"
|
className="p-1 hover:bg-accent rounded"
|
||||||
onClick={handleCreateNew}
|
onClick={handleCreateNew}
|
||||||
title="Create New Filter"
|
title="Create New Filter"
|
||||||
>
|
>
|
||||||
<Plus className="h-4 w-4 text-muted-foreground" />
|
<Plus className="h-4 w-4 text-muted-foreground" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="overflow-y-auto scrollbar-hide space-y-1">
|
<div className="overflow-y-auto scrollbar-hide space-y-1">
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div className="text-[13px] text-muted-foreground p-2 ml-2">
|
<div className="text-[13px] text-muted-foreground p-2 ml-2">
|
||||||
Loading...
|
Loading...
|
||||||
</div>
|
</div>
|
||||||
) : filters.length === 0 ? (
|
) : filters.length === 0 ? (
|
||||||
<div className="text-[13px] text-muted-foreground pb-2 pt-3 ml-4">
|
<div className="text-[13px] text-muted-foreground pb-2 pt-3 ml-4">
|
||||||
{searchQuery ? "No filters found" : "No saved filters"}
|
No saved filters
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
filters.map((filter) => (
|
filters.map((filter) => (
|
||||||
<div
|
<div
|
||||||
key={filter.id}
|
key={filter.id}
|
||||||
onClick={() => handleFilterSelect(filter)}
|
onClick={() => handleFilterSelect(filter)}
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex items-center gap-3 px-3 py-2 w-full rounded-lg hover:bg-accent hover:text-accent-foreground cursor-pointer group transition-colors",
|
"flex items-center gap-3 px-3 py-2 w-full rounded-lg hover:bg-accent hover:text-accent-foreground cursor-pointer group transition-colors",
|
||||||
selectedFilter?.id === filter.id &&
|
selectedFilter?.id === filter.id &&
|
||||||
"active bg-accent text-accent-foreground",
|
"active bg-accent text-accent-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col gap-1 flex-1 min-w-0">
|
<div className="flex flex-col gap-1 flex-1 min-w-0">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{(() => {
|
{(() => {
|
||||||
const parsed = parseQueryData(
|
const parsed = parseQueryData(
|
||||||
filter.query_data,
|
filter.query_data,
|
||||||
) as ParsedQueryData;
|
) as ParsedQueryData;
|
||||||
const Icon = iconKeyToComponent(parsed.icon);
|
const Icon = iconKeyToComponent(parsed.icon);
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex items-center justify-center w-5 h-5 rounded transition-colors",
|
"flex items-center justify-center w-5 h-5 rounded transition-colors",
|
||||||
filterAccentClasses[parsed.color],
|
filterAccentClasses[parsed.color],
|
||||||
parsed.color === "zinc" &&
|
parsed.color === "zinc" &&
|
||||||
"group-hover:bg-background group-[.active]:bg-background",
|
"group-hover:bg-background group-[.active]:bg-background",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{Icon && <Icon className="h-3 w-3" />}
|
{Icon && <Icon className="h-3 w-3" />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})()}
|
})()}
|
||||||
<div className="text-sm font-medium truncate group-hover:text-accent-foreground">
|
<div className="text-sm font-medium truncate group-hover:text-accent-foreground">
|
||||||
{filter.name}
|
{filter.name}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{filter.description && (
|
{filter.description && (
|
||||||
<div className="text-xs text-muted-foreground line-clamp-2">
|
<div className="text-xs text-muted-foreground line-clamp-2">
|
||||||
{filter.description}
|
{filter.description}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="text-xs text-muted-foreground">
|
<div className="text-xs text-muted-foreground">
|
||||||
{new Date(filter.created_at).toLocaleDateString(
|
{new Date(filter.created_at).toLocaleDateString(
|
||||||
undefined,
|
undefined,
|
||||||
{
|
{
|
||||||
month: "short",
|
month: "short",
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
},
|
},
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<span className="text-xs bg-muted text-muted-foreground px-1 py-0.5 rounded-sm group-hover:bg-background group-[.active]:bg-background transition-colors">
|
<span className="text-xs bg-muted text-muted-foreground px-1 py-0.5 rounded-sm group-hover:bg-background group-[.active]:bg-background transition-colors">
|
||||||
{(() => {
|
{(() => {
|
||||||
const dataSources = parseQueryData(filter.query_data)
|
const dataSources = parseQueryData(filter.query_data)
|
||||||
.filters.data_sources;
|
.filters.data_sources;
|
||||||
if (dataSources[0] === "*") return "All sources";
|
if (dataSources[0] === "*") return "All sources";
|
||||||
const count = dataSources.length;
|
const count = dataSources.length;
|
||||||
return `${count} ${
|
return `${count} ${
|
||||||
count === 1 ? "source" : "sources"
|
count === 1 ? "source" : "sources"
|
||||||
}`;
|
}`;
|
||||||
})()}
|
})()}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Create flow moved to panel create mode */}
|
{/* Create flow moved to panel create mode */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue