update accent colors, add first pass at color and icon selector for filters
This commit is contained in:
Cole Goldsmith
parent
1ce9f2923e
commit
0257017d9b
8 changed files with 490 additions and 353 deletions
181
frontend/components/filter-icon-popover.tsx
Normal file
181
frontend/components/filter-icon-popover.tsx
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
"use client";
|
||||
|
||||
import React, { type SVGProps } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Filter as FilterIcon,
|
||||
Star,
|
||||
Book,
|
||||
FileText,
|
||||
Folder,
|
||||
Globe,
|
||||
Calendar,
|
||||
User,
|
||||
Users,
|
||||
Tag,
|
||||
Briefcase,
|
||||
Building2,
|
||||
Cog,
|
||||
Database,
|
||||
Cpu,
|
||||
Bot,
|
||||
MessageSquare,
|
||||
Search,
|
||||
Shield,
|
||||
Lock,
|
||||
Key,
|
||||
Link,
|
||||
Mail,
|
||||
Phone,
|
||||
Check,
|
||||
} from "lucide-react";
|
||||
import { filterAccentClasses } from "./knowledge-filter-panel";
|
||||
|
||||
const ICON_MAP = {
|
||||
Filter: FilterIcon,
|
||||
Star,
|
||||
Book,
|
||||
FileText,
|
||||
Folder,
|
||||
Globe,
|
||||
Calendar,
|
||||
User,
|
||||
Users,
|
||||
Tag,
|
||||
Briefcase,
|
||||
Building2,
|
||||
Cog,
|
||||
Database,
|
||||
Cpu,
|
||||
Bot,
|
||||
MessageSquare,
|
||||
Search,
|
||||
Shield,
|
||||
Lock,
|
||||
Key,
|
||||
Link,
|
||||
Mail,
|
||||
Phone,
|
||||
} as const;
|
||||
|
||||
export type IconKey = keyof typeof ICON_MAP;
|
||||
|
||||
function iconKeyToComponent(
|
||||
key: string
|
||||
): React.ComponentType<SVGProps<SVGSVGElement>> {
|
||||
return (
|
||||
(ICON_MAP as Record<string, React.ComponentType<SVGProps<SVGSVGElement>>>)[
|
||||
key
|
||||
] || FilterIcon
|
||||
);
|
||||
}
|
||||
|
||||
const COLORS = [
|
||||
"zinc",
|
||||
"pink",
|
||||
"purple",
|
||||
"indigo",
|
||||
"emerald",
|
||||
"amber",
|
||||
"red",
|
||||
] as const;
|
||||
export type FilterColor = (typeof COLORS)[number];
|
||||
|
||||
const colorSwatchClasses = {
|
||||
zinc: "bg-muted-foreground",
|
||||
pink: "bg-accent-pink-foreground",
|
||||
purple: "bg-accent-purple-foreground",
|
||||
indigo: "bg-accent-indigo-foreground",
|
||||
emerald: "bg-accent-emerald-foreground",
|
||||
amber: "bg-accent-amber-foreground",
|
||||
red: "bg-accent-red-foreground",
|
||||
"": "bg-muted-foreground",
|
||||
};
|
||||
|
||||
export interface FilterIconPopoverProps {
|
||||
color: FilterColor;
|
||||
iconKey: IconKey | string;
|
||||
onColorChange: (c: FilterColor) => void;
|
||||
onIconChange: (k: IconKey) => void;
|
||||
triggerClassName?: string;
|
||||
}
|
||||
|
||||
export function FilterIconPopover({
|
||||
color,
|
||||
iconKey,
|
||||
onColorChange,
|
||||
onIconChange,
|
||||
triggerClassName,
|
||||
}: FilterIconPopoverProps) {
|
||||
const Icon = iconKeyToComponent(iconKey);
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className={"h-8 w-8 p-0 " + (triggerClassName || "")}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
filterAccentClasses[color || ""] +
|
||||
" inline-flex items-center justify-center rounded h-6 w-6"
|
||||
}
|
||||
>
|
||||
<Icon className="h-3.5 w-3.5" />
|
||||
</span>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-80" align="start">
|
||||
<div className="space-y-3">
|
||||
<div className="grid grid-cols-7 items-center gap-2">
|
||||
{COLORS.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
onClick={() => onColorChange(c)}
|
||||
className={
|
||||
|
||||
"flex items-center justify-center h-6 w-6 rounded-sm transition-colors " +
|
||||
colorSwatchClasses[c || ""]
|
||||
}
|
||||
aria-label={c}
|
||||
>
|
||||
{c === color && <Check className="h-3.5 w-3.5" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-xs font-medium text-muted-foreground mt-2">
|
||||
Icon
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-2">
|
||||
{(Object.keys(ICON_MAP) as IconKey[]).map((k) => {
|
||||
const OptIcon = ICON_MAP[k];
|
||||
const active = iconKey === k;
|
||||
return (
|
||||
<button
|
||||
key={k}
|
||||
type="button"
|
||||
onClick={() => onIconChange(k)}
|
||||
className={
|
||||
"h-8 w-8 inline-flex items-center justify-center rounded border " +
|
||||
(active ? "border-foreground" : "border-border")
|
||||
}
|
||||
aria-label={k}
|
||||
>
|
||||
<OptIcon className="h-4 w-4" />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,24 +2,73 @@
|
|||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Filter, Loader2, Plus, Save, X } from "lucide-react";
|
||||
import {
|
||||
Filter as FilterIcon,
|
||||
Loader2,
|
||||
Plus,
|
||||
X,
|
||||
Star,
|
||||
Book,
|
||||
FileText,
|
||||
Folder,
|
||||
Globe,
|
||||
Calendar,
|
||||
User,
|
||||
Users,
|
||||
Tag,
|
||||
Briefcase,
|
||||
Building2,
|
||||
Cog,
|
||||
Database,
|
||||
Cpu,
|
||||
Bot,
|
||||
MessageSquare,
|
||||
Search,
|
||||
Shield,
|
||||
Lock,
|
||||
Key,
|
||||
Link,
|
||||
Mail,
|
||||
Phone,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
useGetFiltersSearchQuery,
|
||||
type KnowledgeFilter,
|
||||
} from "@/src/app/api/queries/useGetFiltersSearchQuery";
|
||||
import { useCreateFilter } from "@/src/app/api/mutations/useCreateFilter";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { useKnowledgeFilter } from "@/src/contexts/knowledge-filter-context";
|
||||
import type { SVGProps } from "react";
|
||||
|
||||
const ICON_MAP = {
|
||||
Filter: FilterIcon,
|
||||
Star,
|
||||
Book,
|
||||
FileText,
|
||||
Folder,
|
||||
Globe,
|
||||
Calendar,
|
||||
User,
|
||||
Users,
|
||||
Tag,
|
||||
Briefcase,
|
||||
Building2,
|
||||
Cog,
|
||||
Database,
|
||||
Cpu,
|
||||
Bot,
|
||||
MessageSquare,
|
||||
Search,
|
||||
Shield,
|
||||
Lock,
|
||||
Key,
|
||||
Link,
|
||||
Mail,
|
||||
Phone,
|
||||
} as const;
|
||||
|
||||
function iconKeyToComponent(key: string): React.ComponentType<SVGProps<SVGSVGElement>> {
|
||||
return (ICON_MAP as Record<string, React.ComponentType<SVGProps<SVGSVGElement>>>)[key] || FilterIcon;
|
||||
}
|
||||
|
||||
interface ParsedQueryData {
|
||||
query: string;
|
||||
|
|
@ -30,6 +79,8 @@ interface ParsedQueryData {
|
|||
};
|
||||
limit: number;
|
||||
scoreThreshold: number;
|
||||
color?: "zinc" | "pink" | "purple" | "indigo" | "emerald" | "amber" | "red";
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
interface KnowledgeFilterListProps {
|
||||
|
|
@ -42,10 +93,7 @@ export function KnowledgeFilterList({
|
|||
onFilterSelect,
|
||||
}: KnowledgeFilterListProps) {
|
||||
const [searchQuery] = useState("");
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [createName, setCreateName] = useState("");
|
||||
const [createDescription, setCreateDescription] = useState("");
|
||||
const [creating, setCreating] = useState(false);
|
||||
const { startCreateMode } = useKnowledgeFilter();
|
||||
|
||||
const { data, isFetching: loading } = useGetFiltersSearchQuery(
|
||||
searchQuery,
|
||||
|
|
@ -54,57 +102,12 @@ export function KnowledgeFilterList({
|
|||
|
||||
const filters = data || [];
|
||||
|
||||
const createFilterMutation = useCreateFilter();
|
||||
|
||||
const handleFilterSelect = (filter: KnowledgeFilter) => {
|
||||
onFilterSelect(filter);
|
||||
};
|
||||
|
||||
const handleCreateNew = () => {
|
||||
setShowCreateModal(true);
|
||||
};
|
||||
|
||||
const handleCreateFilter = async () => {
|
||||
if (!createName.trim()) return;
|
||||
|
||||
setCreating(true);
|
||||
try {
|
||||
// Create a basic filter with wildcards (match everything by default)
|
||||
const defaultFilterData = {
|
||||
query: "",
|
||||
filters: {
|
||||
data_sources: ["*"],
|
||||
document_types: ["*"],
|
||||
owners: ["*"],
|
||||
},
|
||||
limit: 10,
|
||||
scoreThreshold: 0,
|
||||
};
|
||||
|
||||
const result = await createFilterMutation.mutateAsync({
|
||||
name: createName.trim(),
|
||||
description: createDescription.trim(),
|
||||
queryData: JSON.stringify(defaultFilterData),
|
||||
});
|
||||
|
||||
// Select the new filter from API response
|
||||
onFilterSelect(result.filter);
|
||||
|
||||
// Close modal and reset form
|
||||
setShowCreateModal(false);
|
||||
setCreateName("");
|
||||
setCreateDescription("");
|
||||
} catch (error) {
|
||||
console.error("Error creating knowledge filter:", error);
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelCreate = () => {
|
||||
setShowCreateModal(false);
|
||||
setCreateName("");
|
||||
setCreateDescription("");
|
||||
startCreateMode();
|
||||
};
|
||||
|
||||
const parseQueryData = (queryData: string): ParsedQueryData => {
|
||||
|
|
@ -113,7 +116,7 @@ export function KnowledgeFilterList({
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center gap-1 px-3 !mb-12 mt-0 h-full overflow-y-auto">
|
||||
<div className="flex flex-col gap-1 px-3 !mb-12 mt-0 h-full overflow-y-auto">
|
||||
<div className="flex items-center w-full justify-between pl-3">
|
||||
<div className="text-sm font-medium text-muted-foreground">
|
||||
Knowledge Filters
|
||||
|
|
@ -136,7 +139,7 @@ export function KnowledgeFilterList({
|
|||
</span>
|
||||
</div>
|
||||
) : filters.length === 0 ? (
|
||||
<div className="p-4 text-center text-sm text-muted-foreground">
|
||||
<div className="py-2 px-4 text-sm text-muted-foreground">
|
||||
{searchQuery ? "No filters found" : "No saved filters"}
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -152,9 +155,33 @@ export function KnowledgeFilterList({
|
|||
>
|
||||
<div className="flex flex-col gap-1 flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-center bg-blue-500/20 w-5 h-5 rounded">
|
||||
<Filter className="h-3 w-3 text-blue-400" />
|
||||
</div>
|
||||
{(() => {
|
||||
const parsed = parseQueryData(filter.query_data);
|
||||
const color = (parsed.color || "zinc") as
|
||||
| "zinc"
|
||||
| "pink"
|
||||
| "purple"
|
||||
| "indigo"
|
||||
| "emerald"
|
||||
| "amber"
|
||||
| "red";
|
||||
const Icon = iconKeyToComponent(parsed.icon || "Filter");
|
||||
const colorMap = {
|
||||
zinc: "bg-zinc-500/20 text-zinc-500",
|
||||
pink: "bg-pink-500/20 text-pink-500",
|
||||
purple: "bg-purple-500/20 text-purple-500",
|
||||
indigo: "bg-indigo-500/20 text-indigo-500",
|
||||
emerald: "bg-emerald-500/20 text-emerald-500",
|
||||
amber: "bg-amber-500/20 text-amber-500",
|
||||
red: "bg-red-500/20 text-red-500",
|
||||
} as const;
|
||||
const colorClasses = colorMap[color];
|
||||
return (
|
||||
<div className={`flex items-center justify-center ${colorClasses} w-5 h-5 rounded`}>
|
||||
<Icon className="h-3 w-3" />
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
<div className="text-sm font-medium truncate group-hover:text-accent-foreground">
|
||||
{filter.name}
|
||||
</div>
|
||||
|
|
@ -200,72 +227,7 @@ export function KnowledgeFilterList({
|
|||
))
|
||||
)}
|
||||
</div>
|
||||
{/* Create Filter Dialog */}
|
||||
<Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create a new knowledge filter</DialogTitle>
|
||||
<DialogDescription>
|
||||
Save a reusable filter to quickly scope searches across your
|
||||
knowledge base.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-2 space-y-2">
|
||||
<div>
|
||||
<Label htmlFor="filter-name" className="font-medium mb-2 gap-1">
|
||||
Name<span className="text-red-400">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="filter-name"
|
||||
type="text"
|
||||
placeholder="Enter filter name"
|
||||
value={createName}
|
||||
onChange={(e) => setCreateName(e.target.value)}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="filter-description" className="font-medium mb-2">
|
||||
Description (optional)
|
||||
</Label>
|
||||
<Textarea
|
||||
id="filter-description"
|
||||
placeholder="Brief description of this filter"
|
||||
value={createDescription}
|
||||
onChange={(e) => setCreateDescription(e.target.value)}
|
||||
className="mt-1"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCancelCreate}
|
||||
disabled={creating}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCreateFilter}
|
||||
disabled={!createName.trim() || creating}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{creating ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="h-4 w-4" />
|
||||
Create Filter
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
{/* Create flow moved to panel create mode */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { X, Edit3, Save, RefreshCw } from "lucide-react";
|
||||
import { X, Save, RefreshCw } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
|
@ -12,7 +12,9 @@ import { Slider } from "@/components/ui/slider";
|
|||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||
import { useDeleteFilter } from "@/app/api/mutations/useDeleteFilter";
|
||||
import { useUpdateFilter } from "@/app/api/mutations/useUpdateFilter";
|
||||
import { useCreateFilter } from "@/app/api/mutations/useCreateFilter";
|
||||
import { useGetSearchAggregations } from "@/src/app/api/queries/useGetSearchAggregations";
|
||||
import { FilterIconPopover } from "@/components/filter-icon-popover";
|
||||
|
||||
interface FacetBucket {
|
||||
key: string;
|
||||
|
|
@ -26,6 +28,20 @@ interface AvailableFacets {
|
|||
connector_types: FacetBucket[];
|
||||
}
|
||||
|
||||
export const filterAccentClasses: Record<
|
||||
"zinc" | "pink" | "purple" | "indigo" | "emerald" | "amber" | "red" | "",
|
||||
string
|
||||
> = {
|
||||
zinc: "bg-accent text-accent-foreground",
|
||||
pink: "bg-accent-pink text-accent-pink-foreground",
|
||||
purple: "bg-accent-purple text-accent-purple-foreground",
|
||||
indigo: "bg-accent-indigo text-accent-indigo-foreground",
|
||||
emerald: "bg-accent-emerald text-accent-emerald-foreground",
|
||||
amber: "bg-accent-amber text-accent-amber-foreground",
|
||||
red: "bg-accent-red text-accent-red-foreground",
|
||||
"": "bg-accent text-accent-foreground",
|
||||
};
|
||||
|
||||
export function KnowledgeFilterPanel() {
|
||||
const {
|
||||
selectedFilter,
|
||||
|
|
@ -33,15 +49,20 @@ export function KnowledgeFilterPanel() {
|
|||
setSelectedFilter,
|
||||
isPanelOpen,
|
||||
closePanelOnly,
|
||||
createMode,
|
||||
endCreateMode,
|
||||
} = useKnowledgeFilter();
|
||||
const deleteFilterMutation = useDeleteFilter();
|
||||
const updateFilterMutation = useUpdateFilter();
|
||||
const createFilterMutation = useCreateFilter();
|
||||
|
||||
// Edit mode states
|
||||
const [isEditingMeta, setIsEditingMeta] = useState(false);
|
||||
const [editingName, setEditingName] = useState("");
|
||||
const [editingDescription, setEditingDescription] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [color, setColor] = useState<
|
||||
"zinc" | "pink" | "purple" | "indigo" | "emerald" | "amber" | "red"
|
||||
>("zinc");
|
||||
const [iconKey, setIconKey] = useState<string>("Filter");
|
||||
|
||||
// Filter configuration states (mirror search page exactly)
|
||||
const [query, setQuery] = useState("");
|
||||
|
|
@ -62,7 +83,7 @@ export function KnowledgeFilterPanel() {
|
|||
connector_types: [],
|
||||
});
|
||||
|
||||
// Load current filter data into controls
|
||||
// Load current filter data into controls when a filter is selected
|
||||
useEffect(() => {
|
||||
if (selectedFilter && parsedFilterData) {
|
||||
setQuery(parsedFilterData.query || "");
|
||||
|
|
@ -84,11 +105,27 @@ export function KnowledgeFilterPanel() {
|
|||
setSelectedFilters(processedFilters);
|
||||
setResultLimit(parsedFilterData.limit || 10);
|
||||
setScoreThreshold(parsedFilterData.scoreThreshold || 0);
|
||||
setEditingName(selectedFilter.name);
|
||||
setEditingDescription(selectedFilter.description || "");
|
||||
setName(selectedFilter.name);
|
||||
setDescription(selectedFilter.description || "");
|
||||
setColor(parsedFilterData.color || "zinc");
|
||||
setIconKey(parsedFilterData.icon || "Filter");
|
||||
}
|
||||
}, [selectedFilter, parsedFilterData]);
|
||||
|
||||
// Initialize defaults when entering create mode
|
||||
useEffect(() => {
|
||||
if (createMode && parsedFilterData) {
|
||||
setQuery(parsedFilterData.query || "");
|
||||
setSelectedFilters(parsedFilterData.filters);
|
||||
setResultLimit(parsedFilterData.limit || 10);
|
||||
setScoreThreshold(parsedFilterData.scoreThreshold || 0);
|
||||
setName("");
|
||||
setDescription("");
|
||||
setColor(parsedFilterData.color || "zinc");
|
||||
setIconKey(parsedFilterData.icon || "Filter");
|
||||
}
|
||||
}, [createMode, parsedFilterData]);
|
||||
|
||||
// Load available facets using search aggregations hook
|
||||
const { data: aggregations } = useGetSearchAggregations("*", 1, 0, {
|
||||
enabled: isPanelOpen,
|
||||
|
|
@ -108,8 +145,8 @@ export function KnowledgeFilterPanel() {
|
|||
setAvailableFacets(facets);
|
||||
}, [aggregations]);
|
||||
|
||||
// Don't render if panel is closed or no filter selected
|
||||
if (!isPanelOpen || !selectedFilter || !parsedFilterData) return null;
|
||||
// Don't render if panel is closed or we don't have any data
|
||||
if (!isPanelOpen || !parsedFilterData) return null;
|
||||
|
||||
const selectAllFilters = () => {
|
||||
// Use wildcards instead of listing all specific items
|
||||
|
|
@ -130,58 +167,42 @@ export function KnowledgeFilterPanel() {
|
|||
});
|
||||
};
|
||||
|
||||
const handleEditMeta = () => {
|
||||
setIsEditingMeta(true);
|
||||
};
|
||||
|
||||
const handleCancelEdit = () => {
|
||||
setIsEditingMeta(false);
|
||||
setEditingName(selectedFilter.name);
|
||||
setEditingDescription(selectedFilter.description || "");
|
||||
};
|
||||
|
||||
const handleSaveMeta = async () => {
|
||||
if (!editingName.trim()) return;
|
||||
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const result = await updateFilterMutation.mutateAsync({
|
||||
id: selectedFilter.id,
|
||||
name: editingName.trim(),
|
||||
description: editingDescription.trim(),
|
||||
});
|
||||
|
||||
if (result.success && result.filter) {
|
||||
setSelectedFilter(result.filter);
|
||||
setIsEditingMeta(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error updating filter:", error);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveConfiguration = async () => {
|
||||
if (!name.trim()) return;
|
||||
const filterData = {
|
||||
query,
|
||||
filters: selectedFilters,
|
||||
limit: resultLimit,
|
||||
scoreThreshold,
|
||||
color,
|
||||
icon: iconKey,
|
||||
};
|
||||
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const result = await updateFilterMutation.mutateAsync({
|
||||
id: selectedFilter.id,
|
||||
queryData: JSON.stringify(filterData),
|
||||
});
|
||||
|
||||
if (result.success && result.filter) {
|
||||
setSelectedFilter(result.filter);
|
||||
if (createMode) {
|
||||
const result = await createFilterMutation.mutateAsync({
|
||||
name: name.trim(),
|
||||
description: description.trim(),
|
||||
queryData: JSON.stringify(filterData),
|
||||
});
|
||||
if (result.success && result.filter) {
|
||||
setSelectedFilter(result.filter);
|
||||
endCreateMode();
|
||||
}
|
||||
} else if (selectedFilter) {
|
||||
const result = await updateFilterMutation.mutateAsync({
|
||||
id: selectedFilter.id,
|
||||
name: name.trim(),
|
||||
description: description.trim(),
|
||||
queryData: JSON.stringify(filterData),
|
||||
});
|
||||
if (result.success && result.filter) {
|
||||
setSelectedFilter(result.filter);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error updating filter configuration:", error);
|
||||
console.error("Error saving knowledge filter:", error);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
|
|
@ -208,6 +229,7 @@ export function KnowledgeFilterPanel() {
|
|||
};
|
||||
|
||||
const handleDeleteFilter = async () => {
|
||||
if (!selectedFilter) return;
|
||||
const result = await deleteFilterMutation.mutateAsync({
|
||||
id: selectedFilter.id,
|
||||
});
|
||||
|
|
@ -238,81 +260,40 @@ export function KnowledgeFilterPanel() {
|
|||
|
||||
<CardContent className="space-y-6">
|
||||
{/* Filter Name and Description */}
|
||||
<div className="space-y-4">
|
||||
{isEditingMeta ? (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="filter-name">Name</Label>
|
||||
<Input
|
||||
id="filter-name"
|
||||
value={editingName}
|
||||
onChange={(e) => setEditingName(e.target.value)}
|
||||
placeholder="Filter name"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="filter-description">Description</Label>
|
||||
<Textarea
|
||||
id="filter-description"
|
||||
value={editingDescription}
|
||||
onChange={(e) => setEditingDescription(e.target.value)}
|
||||
placeholder="Optional description"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={handleSaveMeta}
|
||||
disabled={!editingName.trim() || isSaving}
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
>
|
||||
<Save className="h-3 w-3 mr-1" />
|
||||
{isSaving ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCancelEdit}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="filter-name">Filter name</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<FilterIconPopover
|
||||
color={color}
|
||||
iconKey={iconKey}
|
||||
onColorChange={setColor}
|
||||
onIconChange={(k) => setIconKey(k)}
|
||||
/>
|
||||
<Input
|
||||
id="filter-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Filter name"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-lg">
|
||||
{selectedFilter.name}
|
||||
</h3>
|
||||
{selectedFilter.description && (
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{selectedFilter.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleEditMeta}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<Edit3 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Created {formatDate(selectedFilter.created_at)}
|
||||
{selectedFilter.updated_at !== selectedFilter.created_at && (
|
||||
<span>
|
||||
{" "}
|
||||
• Updated {formatDate(selectedFilter.updated_at)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{!createMode && selectedFilter?.created_at && (
|
||||
<div className="space-y-2 text-xs text-right text-muted-foreground">
|
||||
<span className="text-placeholder-foreground">Created</span>{" "}
|
||||
{formatDate(selectedFilter.created_at)}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="filter-description">Description</Label>
|
||||
<Textarea
|
||||
id="filter-description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Optional description"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Query */}
|
||||
|
|
@ -504,13 +485,15 @@ export function KnowledgeFilterPanel() {
|
|||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
onClick={handleDeleteFilter}
|
||||
>
|
||||
Delete Filter
|
||||
</Button>
|
||||
{!createMode && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
onClick={handleDeleteFilter}
|
||||
>
|
||||
Delete Filter
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export interface InputProps
|
|||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, inputClassName, icon, type, placeholder, ...props }, ref) => {
|
||||
const [hasValue, setHasValue] = React.useState(
|
||||
Boolean(props.value || props.defaultValue),
|
||||
Boolean(props.value || props.defaultValue)
|
||||
);
|
||||
const [showPassword, setShowPassword] = React.useState(false);
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|||
<label
|
||||
className={cn(
|
||||
"relative block h-fit w-full text-sm group",
|
||||
icon ? className : "",
|
||||
icon ? className : ""
|
||||
)}
|
||||
>
|
||||
{icon && (
|
||||
|
|
@ -43,10 +43,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|||
type={type === "password" && showPassword ? "text" : type}
|
||||
placeholder={placeholder}
|
||||
className={cn(
|
||||
"primary-input !placeholder-transparent",
|
||||
"primary-input",
|
||||
icon && "pl-9",
|
||||
type === "password" && "!pr-8",
|
||||
icon ? inputClassName : className,
|
||||
icon ? inputClassName : className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
|
|
@ -66,18 +66,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|||
)}
|
||||
</button>
|
||||
)}
|
||||
<span
|
||||
className={cn(
|
||||
"pointer-events-none absolute top-1/2 -translate-y-1/2 pl-px text-placeholder-foreground font-mono",
|
||||
icon ? "left-9" : "left-3",
|
||||
hasValue && "hidden",
|
||||
)}
|
||||
>
|
||||
{placeholder}
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
Input.displayName = "Input";
|
||||
|
|
|
|||
|
|
@ -32,32 +32,23 @@
|
|||
--ring: 0 0% 0%;
|
||||
--placeholder-foreground: 240 5% 65%;
|
||||
|
||||
--accent-emerald-foreground: 161.4 93.5% 30.4%;
|
||||
--accent-pink-foreground: 333.3 71.4% 50.6%;
|
||||
--accent-amber-foreground: 26 90.5% 37.1%;
|
||||
|
||||
/* Status Colors */
|
||||
--status-red: #ef4444;
|
||||
--status-yellow: #eab308;
|
||||
--status-green: #4ade80;
|
||||
--status-blue: #2563eb;
|
||||
--accent-amber: 48 96% 88%; /* amber-100 #fef3c7 */
|
||||
--accent-amber-foreground: 26 90.5% 37.1%; /* amber-700 #b45309 */
|
||||
--accent-emerald: 152 76% 90%; /* emerald-100 #d1fae5 */
|
||||
--accent-emerald-foreground: 161.4 93.5% 30.4%; /* emerald-600 #059669 */
|
||||
--accent-red: 0 93.5% 94.1%; /* red-100 #fee2e2 */
|
||||
--accent-red-foreground: 0 72.2% 50.6%; /* red-600 #dc2626 */
|
||||
--accent-indigo: 226.7 100% 94.9%; /* indigo-100 #e0e7ff */
|
||||
--accent-indigo-foreground: 243.4 75.4% 58.6%; /* indigo-600 #4f46e5 */
|
||||
--accent-pink: 320.6 76.1% 95.5%; /* pink-100 #fce7f3 */
|
||||
--accent-pink-foreground: 333.3 71.4% 50.6%; /* pink-600 #db2777 */
|
||||
--accent-purple: 270 100% 95.5%; /* purple-100 #f3e8ff */
|
||||
--accent-purple-foreground: 262.1 83.3% 57.8%; /* purple-600 #7c3aed */
|
||||
|
||||
/* Component Colors */
|
||||
--component-icon: #d8598a;
|
||||
--flow-icon: #2f67d0;
|
||||
|
||||
/* Data Type Colors */
|
||||
--datatype-blue: 221.2 83.2% 53.3%;
|
||||
--datatype-blue-foreground: 214.3 94.6% 92.7%;
|
||||
--datatype-yellow: 40.6 96.1% 40.4%;
|
||||
--datatype-yellow-foreground: 54.9 96.7% 88%;
|
||||
--datatype-red: 0 72.2% 50.6%;
|
||||
--datatype-red-foreground: 0 93.3% 94.1%;
|
||||
--datatype-emerald: 161.4 93.5% 30.4%;
|
||||
--datatype-emerald-foreground: 149.3 80.4% 90%;
|
||||
--datatype-violet: 262.1 83.3% 57.8%;
|
||||
--datatype-violet-foreground: 251.4 91.3% 95.5%;
|
||||
|
||||
/* Warning */
|
||||
--warning: 48 96.6% 76.7%;
|
||||
--warning-foreground: 240 6% 10%;
|
||||
|
|
@ -89,21 +80,18 @@
|
|||
--ring: 0 0% 100%;
|
||||
--placeholder-foreground: 240 4% 46%;
|
||||
|
||||
--accent-emerald-foreground: 158.1 64.4% 51.6%;
|
||||
--accent-pink-foreground: 328.6 85.5% 70.2%;
|
||||
--accent-amber-foreground: 45.9 96.7% 64.5%;
|
||||
|
||||
/* Dark mode data type colors */
|
||||
--datatype-blue: 211.7 96.4% 78.4%;
|
||||
--datatype-blue-foreground: 221.2 83.2% 53.3%;
|
||||
--datatype-yellow: 50.4 97.8% 63.5%;
|
||||
--datatype-yellow-foreground: 40.6 96.1% 40.4%;
|
||||
--datatype-red: 0 93.5% 81.8%;
|
||||
--datatype-red-foreground: 0 72.2% 50.6%;
|
||||
--datatype-emerald: 156.2 71.6% 66.9%;
|
||||
--datatype-emerald-foreground: 161.4 93.5% 30.4%;
|
||||
--datatype-violet: 252.5 94.7% 85.1%;
|
||||
--datatype-violet-foreground: 262.1 83.3% 57.8%;
|
||||
--accent-amber: 23 88% 27%; /* amber-900 #78350f */
|
||||
--accent-amber-foreground: 45.9 96.7% 64.5%; /* amber-300 #fcd34d */
|
||||
--accent-emerald: 164.3 88% 16.1%; /* emerald-900 #064e3b */
|
||||
--accent-emerald-foreground: 156.2 71.6% 66.9%; /* emerald-400 #34d399 */
|
||||
--accent-red: 0 75% 30%; /* red-900 #7f1d1d */
|
||||
--accent-red-foreground: 0 93.5% 81.8%; /* red-400 #f87171 */
|
||||
--accent-indigo: 239 46% 34.5%; /* indigo-900 #312e81 */
|
||||
--accent-indigo-foreground: 234.5 89.5% 74.9%; /* indigo-400 #818cf8 */
|
||||
--accent-pink: 327.4 70.7% 31.4%; /* pink-900 #831843 */
|
||||
--accent-pink-foreground: 328.6 85.5% 70.2%; /* pink-400 #f472b6 */
|
||||
--accent-purple: 261.2 67.8% 34.3%; /* purple-900 #4c1d95 */
|
||||
--accent-purple-foreground: 255.1 89.5% 76.3%; /* purple-400 #a78bfa */
|
||||
|
||||
--warning: 45.9 96.7% 64.5%;
|
||||
--warning-foreground: 240 6% 10%;
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import { KnowledgeActionsDropdown } from "@/components/knowledge-actions-dropdow
|
|||
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";
|
||||
|
||||
// Function to get the appropriate icon for a connector type
|
||||
function getSourceIcon(connectorType?: string) {
|
||||
|
|
@ -55,7 +56,7 @@ function SearchPage() {
|
|||
|
||||
const { data = [], isFetching } = useGetSearchQuery(
|
||||
parsedFilterData?.query || "*",
|
||||
parsedFilterData,
|
||||
parsedFilterData
|
||||
);
|
||||
|
||||
const handleTableSearch = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
|
|
@ -80,7 +81,7 @@ function SearchPage() {
|
|||
return (
|
||||
taskFile.status !== "active" &&
|
||||
!backendFiles.some(
|
||||
(backendFile) => backendFile.filename === taskFile.filename,
|
||||
(backendFile) => backendFile.filename === taskFile.filename
|
||||
)
|
||||
);
|
||||
});
|
||||
|
|
@ -106,8 +107,8 @@ function SearchPage() {
|
|||
onClick={() => {
|
||||
router.push(
|
||||
`/knowledge/chunks?filename=${encodeURIComponent(
|
||||
data?.filename ?? "",
|
||||
)}`,
|
||||
data?.filename ?? ""
|
||||
)}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
|
|
@ -201,7 +202,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);
|
||||
|
|
@ -209,7 +210,7 @@ function SearchPage() {
|
|||
toast.success(
|
||||
`Successfully deleted ${selectedRows.length} document${
|
||||
selectedRows.length > 1 ? "s" : ""
|
||||
}`,
|
||||
}`
|
||||
);
|
||||
setSelectedRows([]);
|
||||
setShowBulkDeleteDialog(false);
|
||||
|
|
@ -222,7 +223,7 @@ function SearchPage() {
|
|||
toast.error(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Failed to delete some documents",
|
||||
: "Failed to delete some documents"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
@ -251,9 +252,13 @@ function SearchPage() {
|
|||
{/* 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 gap-2 focus-within:border-foreground transition-colors !py-0">
|
||||
<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 bg-blue-500/20 text-blue-400 px-1.5 py-0.5 rounded max-w-[300px]">
|
||||
<div
|
||||
className={`flex items-center gap-1 h-full px-1.5 py-0.5 rounded max-w-[300px] ${
|
||||
filterAccentClasses[parsedFilterData?.color || ""]
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{selectedFilter?.name}</span>
|
||||
<X
|
||||
aria-label="Remove filter"
|
||||
|
|
@ -263,7 +268,7 @@ function SearchPage() {
|
|||
</div>
|
||||
)}
|
||||
<input
|
||||
className="bg-transparent w-full h-full focus:outline-none focus-visible:outline-none placeholder:font-mono"
|
||||
className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none placeholder:font-mono"
|
||||
name="search-query"
|
||||
id="search-query"
|
||||
type="text"
|
||||
|
|
|
|||
|
|
@ -27,6 +27,9 @@ export interface ParsedQueryData {
|
|||
};
|
||||
limit: number;
|
||||
scoreThreshold: number;
|
||||
// Optional visual metadata for UI
|
||||
color?: "zinc" | "pink" | "purple" | "indigo" | "emerald" | "amber" | "red";
|
||||
icon?: string; // lucide icon key we store in the UI mapping
|
||||
}
|
||||
|
||||
interface KnowledgeFilterContextType {
|
||||
|
|
@ -38,6 +41,9 @@ interface KnowledgeFilterContextType {
|
|||
openPanel: () => void;
|
||||
closePanel: () => void;
|
||||
closePanelOnly: () => void;
|
||||
createMode: boolean;
|
||||
startCreateMode: () => void;
|
||||
endCreateMode: () => void;
|
||||
}
|
||||
|
||||
const KnowledgeFilterContext = createContext<
|
||||
|
|
@ -66,11 +72,13 @@ export function KnowledgeFilterProvider({
|
|||
const [parsedFilterData, setParsedFilterData] =
|
||||
useState<ParsedQueryData | null>(null);
|
||||
const [isPanelOpen, setIsPanelOpen] = useState(false);
|
||||
const [createMode, setCreateMode] = useState(false);
|
||||
|
||||
const setSelectedFilter = (filter: KnowledgeFilter | null) => {
|
||||
setSelectedFilterState(filter);
|
||||
|
||||
if (filter) {
|
||||
setCreateMode(false);
|
||||
try {
|
||||
const parsed = JSON.parse(filter.query_data) as ParsedQueryData;
|
||||
setParsedFilterData(parsed);
|
||||
|
|
@ -96,6 +104,7 @@ export function KnowledgeFilterProvider({
|
|||
};
|
||||
|
||||
const closePanel = () => {
|
||||
setCreateMode(false);
|
||||
setSelectedFilter(null); // This will also close the panel
|
||||
};
|
||||
|
||||
|
|
@ -103,6 +112,30 @@ export function KnowledgeFilterProvider({
|
|||
setIsPanelOpen(false); // Close panel but keep filter selected
|
||||
};
|
||||
|
||||
const startCreateMode = () => {
|
||||
// Initialize defaults
|
||||
setCreateMode(true);
|
||||
setSelectedFilterState(null);
|
||||
setParsedFilterData({
|
||||
query: "",
|
||||
filters: {
|
||||
data_sources: ["*"],
|
||||
document_types: ["*"],
|
||||
owners: ["*"],
|
||||
connector_types: ["*"],
|
||||
},
|
||||
limit: 10,
|
||||
scoreThreshold: 0,
|
||||
color: "zinc",
|
||||
icon: "Filter",
|
||||
});
|
||||
setIsPanelOpen(true);
|
||||
};
|
||||
|
||||
const endCreateMode = () => {
|
||||
setCreateMode(false);
|
||||
};
|
||||
|
||||
const value: KnowledgeFilterContextType = {
|
||||
selectedFilter,
|
||||
parsedFilterData,
|
||||
|
|
@ -112,6 +145,9 @@ export function KnowledgeFilterProvider({
|
|||
openPanel,
|
||||
closePanel,
|
||||
closePanelOnly,
|
||||
createMode,
|
||||
startCreateMode,
|
||||
endCreateMode,
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -109,14 +109,29 @@ const config = {
|
|||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
"accent-emerald-foreground": {
|
||||
DEFAULT: "hsl(var(--accent-emerald-foreground))",
|
||||
"accent-emerald": {
|
||||
DEFAULT: "hsl(var(--accent-emerald))",
|
||||
foreground: "hsl(var(--accent-emerald-foreground))",
|
||||
},
|
||||
"accent-pink-foreground": {
|
||||
DEFAULT: "hsl(var(--accent-pink-foreground))",
|
||||
"accent-pink": {
|
||||
DEFAULT: "hsl(var(--accent-pink))",
|
||||
foreground: "hsl(var(--accent-pink-foreground))",
|
||||
},
|
||||
"accent-amber-foreground": {
|
||||
DEFAULT: "hsl(var(--accent-amber-foreground))",
|
||||
"accent-amber": {
|
||||
DEFAULT: "hsl(var(--accent-amber))",
|
||||
foreground: "hsl(var(--accent-amber-foreground))",
|
||||
},
|
||||
"accent-purple": {
|
||||
DEFAULT: "hsl(var(--accent-purple))",
|
||||
foreground: "hsl(var(--accent-purple-foreground))",
|
||||
},
|
||||
"accent-indigo": {
|
||||
DEFAULT: "hsl(var(--accent-indigo))",
|
||||
foreground: "hsl(var(--accent-indigo-foreground))",
|
||||
},
|
||||
"accent-red": {
|
||||
DEFAULT: "hsl(var(--accent-red))",
|
||||
foreground: "hsl(var(--accent-red-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
|
|
@ -126,33 +141,9 @@ const config = {
|
|||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
"status-blue": "var(--status-blue)",
|
||||
"status-green": "var(--status-green)",
|
||||
"status-red": "var(--status-red)",
|
||||
"status-yellow": "var(--status-yellow)",
|
||||
"component-icon": "var(--component-icon)",
|
||||
"flow-icon": "var(--flow-icon)",
|
||||
"placeholder-foreground": "hsl(var(--placeholder-foreground))",
|
||||
"datatype-blue": {
|
||||
DEFAULT: "hsl(var(--datatype-blue))",
|
||||
foreground: "hsl(var(--datatype-blue-foreground))",
|
||||
},
|
||||
"datatype-yellow": {
|
||||
DEFAULT: "hsl(var(--datatype-yellow))",
|
||||
foreground: "hsl(var(--datatype-yellow-foreground))",
|
||||
},
|
||||
"datatype-red": {
|
||||
DEFAULT: "hsl(var(--datatype-red))",
|
||||
foreground: "hsl(var(--datatype-red-foreground))",
|
||||
},
|
||||
"datatype-emerald": {
|
||||
DEFAULT: "hsl(var(--datatype-emerald))",
|
||||
foreground: "hsl(var(--datatype-emerald-foreground))",
|
||||
},
|
||||
"datatype-violet": {
|
||||
DEFAULT: "hsl(var(--datatype-violet))",
|
||||
foreground: "hsl(var(--datatype-violet-foreground))",
|
||||
},
|
||||
warning: {
|
||||
DEFAULT: "hsl(var(--warning))",
|
||||
foreground: "hsl(var(--warning-foreground))",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue