Merge pull request #150 from langflow-ai/feat/filters-design-sweep
Customize color and icon for knowledge filters
This commit is contained in:
Cole Goldsmith
GitHub
commit
f4e1ca2ab7
11 changed files with 493 additions and 448 deletions
169
frontend/components/filter-icon-popover.tsx
Normal file
169
frontend/components/filter-icon-popover.tsx
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
"use client";
|
||||
|
||||
import React, { type SVGProps } from "react";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Book,
|
||||
Scroll,
|
||||
Library,
|
||||
Map,
|
||||
FileImage,
|
||||
Layers3,
|
||||
Database,
|
||||
Folder,
|
||||
Archive,
|
||||
MessagesSquare,
|
||||
SquareStack,
|
||||
Ghost,
|
||||
Gem,
|
||||
Swords,
|
||||
Bolt,
|
||||
Shield,
|
||||
Hammer,
|
||||
Globe,
|
||||
HardDrive,
|
||||
Upload,
|
||||
Cable,
|
||||
ShoppingCart,
|
||||
ShoppingBag,
|
||||
Check,
|
||||
Filter,
|
||||
} from "lucide-react";
|
||||
import { filterAccentClasses } from "./knowledge-filter-panel";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const ICON_MAP = {
|
||||
filter: Filter,
|
||||
book: Book,
|
||||
scroll: Scroll,
|
||||
library: Library,
|
||||
map: Map,
|
||||
image: FileImage,
|
||||
layers3: Layers3,
|
||||
database: Database,
|
||||
folder: Folder,
|
||||
archive: Archive,
|
||||
messagesSquare: MessagesSquare,
|
||||
squareStack: SquareStack,
|
||||
ghost: Ghost,
|
||||
gem: Gem,
|
||||
swords: Swords,
|
||||
bolt: Bolt,
|
||||
shield: Shield,
|
||||
hammer: Hammer,
|
||||
globe: Globe,
|
||||
hardDrive: HardDrive,
|
||||
upload: Upload,
|
||||
cable: Cable,
|
||||
shoppingCart: ShoppingCart,
|
||||
shoppingBag: ShoppingBag,
|
||||
} as const;
|
||||
|
||||
export type IconKey = keyof typeof ICON_MAP;
|
||||
|
||||
export function iconKeyToComponent(
|
||||
key?: string
|
||||
): React.ComponentType<SVGProps<SVGSVGElement>> | undefined {
|
||||
if (!key) return undefined;
|
||||
return (
|
||||
ICON_MAP as Record<string, React.ComponentType<SVGProps<SVGSVGElement>>>
|
||||
)[key];
|
||||
}
|
||||
|
||||
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",
|
||||
};
|
||||
|
||||
export interface FilterIconPopoverProps {
|
||||
color: FilterColor;
|
||||
iconKey: IconKey;
|
||||
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
|
||||
className={cn(
|
||||
"h-10 w-10 min-w-10 min-h-10 rounded-md flex items-center justify-center transition-colors",
|
||||
filterAccentClasses[color],
|
||||
triggerClassName
|
||||
)}
|
||||
>
|
||||
{Icon && <Icon className="h-5 w-5" />}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-80" align="start">
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-7 items-center gap-2">
|
||||
{COLORS.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
onClick={() => onColorChange(c)}
|
||||
className={cn(
|
||||
"flex items-center justify-center h-6 w-6 rounded-sm transition-colors text-primary",
|
||||
colorSwatchClasses[c]
|
||||
)}
|
||||
aria-label={c}
|
||||
>
|
||||
{c === color && <Check className="h-3.5 w-3.5" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-2">
|
||||
{Object.keys(ICON_MAP).map((k: string) => {
|
||||
const OptIcon = ICON_MAP[k as IconKey];
|
||||
const active = iconKey === k;
|
||||
return (
|
||||
<button
|
||||
key={k}
|
||||
type="button"
|
||||
onClick={() => onIconChange(k as IconKey)}
|
||||
className={
|
||||
"h-8 w-8 inline-flex items-center hover:text-foreground justify-center rounded " +
|
||||
(active ? "bg-muted text-primary" : "text-muted-foreground")
|
||||
}
|
||||
aria-label={k}
|
||||
>
|
||||
<OptIcon className="h-4 w-4" />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,24 +2,19 @@
|
|||
|
||||
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 { Loader2, Plus } 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 { useKnowledgeFilter } from "@/src/contexts/knowledge-filter-context";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
FilterColor,
|
||||
IconKey,
|
||||
iconKeyToComponent,
|
||||
} from "./filter-icon-popover";
|
||||
import { filterAccentClasses } from "./knowledge-filter-panel";
|
||||
|
||||
interface ParsedQueryData {
|
||||
query: string;
|
||||
|
|
@ -30,6 +25,8 @@ interface ParsedQueryData {
|
|||
};
|
||||
limit: number;
|
||||
scoreThreshold: number;
|
||||
color: FilterColor;
|
||||
icon: IconKey;
|
||||
}
|
||||
|
||||
interface KnowledgeFilterListProps {
|
||||
|
|
@ -42,10 +39,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 +48,16 @@ export function KnowledgeFilterList({
|
|||
|
||||
const filters = data || [];
|
||||
|
||||
const createFilterMutation = useCreateFilter();
|
||||
|
||||
const handleFilterSelect = (filter: KnowledgeFilter) => {
|
||||
if (filter.id === selectedFilter?.id) {
|
||||
onFilterSelect(null);
|
||||
return;
|
||||
}
|
||||
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 +66,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 +89,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>
|
||||
) : (
|
||||
|
|
@ -147,32 +100,45 @@ export function KnowledgeFilterList({
|
|||
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",
|
||||
selectedFilter?.id === filter.id &&
|
||||
"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 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) as ParsedQueryData;
|
||||
const Icon = iconKeyToComponent(parsed.icon);
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center w-5 h-5 rounded transition-colors",
|
||||
filterAccentClasses[parsed.color],
|
||||
parsed.color === "zinc" &&
|
||||
"group-hover:bg-background group-[.active]:bg-background"
|
||||
)}
|
||||
>
|
||||
{Icon && <Icon className="h-3 w-3" />}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
<div className="text-sm font-medium truncate group-hover:text-accent-foreground">
|
||||
{filter.name}
|
||||
</div>
|
||||
</div>
|
||||
{filter.description && (
|
||||
<div className="text-xs text-muted-foreground group-hover:text-accent-foreground/70 line-clamp-2">
|
||||
<div className="text-xs text-muted-foreground line-clamp-2">
|
||||
{filter.description}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-xs text-muted-foreground group-hover:text-accent-foreground/70">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{new Date(filter.created_at).toLocaleDateString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</div>
|
||||
<span className="text-xs bg-muted text-muted-foreground px-1 py-0.5 rounded-sm">
|
||||
<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)
|
||||
.filters.data_sources;
|
||||
|
|
@ -183,89 +149,11 @@ export function KnowledgeFilterList({
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{selectedFilter?.id === filter.id && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="px-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onFilterSelect(null);
|
||||
}}
|
||||
>
|
||||
<X className="h-4 w-4 flex-shrink-0 opacity-0 group-hover:opacity-100 text-muted-foreground" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</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,13 @@ 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 {
|
||||
FilterColor,
|
||||
FilterIconPopover,
|
||||
IconKey,
|
||||
} from "@/components/filter-icon-popover";
|
||||
|
||||
interface FacetBucket {
|
||||
key: string;
|
||||
|
|
@ -26,6 +32,16 @@ interface AvailableFacets {
|
|||
connector_types: FacetBucket[];
|
||||
}
|
||||
|
||||
export const filterAccentClasses: Record<FilterColor, string> = {
|
||||
zinc: "bg-muted text-muted-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",
|
||||
};
|
||||
|
||||
export function KnowledgeFilterPanel() {
|
||||
const {
|
||||
selectedFilter,
|
||||
|
|
@ -33,15 +49,18 @@ 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<FilterColor>("zinc");
|
||||
const [iconKey, setIconKey] = useState<IconKey>("filter");
|
||||
|
||||
// Filter configuration states (mirror search page exactly)
|
||||
const [query, setQuery] = useState("");
|
||||
|
|
@ -62,7 +81,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 +103,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);
|
||||
setIconKey(parsedFilterData.icon);
|
||||
}
|
||||
}, [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);
|
||||
setIconKey(parsedFilterData.icon);
|
||||
}
|
||||
}, [createMode, parsedFilterData]);
|
||||
|
||||
// Load available facets using search aggregations hook
|
||||
const { data: aggregations } = useGetSearchAggregations("*", 1, 0, {
|
||||
enabled: isPanelOpen,
|
||||
|
|
@ -108,8 +143,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 +165,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 +227,7 @@ export function KnowledgeFilterPanel() {
|
|||
};
|
||||
|
||||
const handleDeleteFilter = async () => {
|
||||
if (!selectedFilter) return;
|
||||
const result = await deleteFilterMutation.mutateAsync({
|
||||
id: selectedFilter.id,
|
||||
});
|
||||
|
|
@ -238,81 +258,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={setIconKey}
|
||||
/>
|
||||
<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 +483,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";
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ export const useGetSearchQuery = (
|
|||
|
||||
const queryResult = useQuery(
|
||||
{
|
||||
queryKey: ["search", effectiveQuery],
|
||||
queryKey: ["search", queryData],
|
||||
placeholderData: (prev) => prev,
|
||||
queryFn: getFiles,
|
||||
...options,
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import { useTask } from "@/contexts/task-context";
|
|||
import { useLoadingStore } from "@/stores/loadingStore";
|
||||
import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
|
||||
import Nudges from "./nudges";
|
||||
import { filterAccentClasses } from "@/components/knowledge-filter-panel";
|
||||
|
||||
interface Message {
|
||||
role: "user" | "assistant";
|
||||
|
|
@ -194,7 +195,7 @@ function ChatPage() {
|
|||
"Upload failed with status:",
|
||||
response.status,
|
||||
"Response:",
|
||||
errorText,
|
||||
errorText
|
||||
);
|
||||
throw new Error("Failed to process document");
|
||||
}
|
||||
|
|
@ -448,7 +449,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(
|
||||
|
|
@ -576,7 +577,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",
|
||||
|
|
@ -595,7 +596,7 @@ function ChatPage() {
|
|||
}
|
||||
|
||||
return message;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
setMessages(convertedMessages);
|
||||
|
|
@ -684,7 +685,7 @@ function ChatPage() {
|
|||
console.log(
|
||||
"Chat page received file upload error event:",
|
||||
filename,
|
||||
error,
|
||||
error
|
||||
);
|
||||
|
||||
// Replace the last message with error message
|
||||
|
|
@ -698,37 +699,37 @@ 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]);
|
||||
|
|
@ -755,7 +756,7 @@ function ChatPage() {
|
|||
}, [isFilterDropdownOpen]);
|
||||
|
||||
const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery(
|
||||
previousResponseIds[endpoint],
|
||||
previousResponseIds[endpoint]
|
||||
);
|
||||
|
||||
const handleSSEStream = async (userMessage: Message) => {
|
||||
|
|
@ -860,7 +861,7 @@ function ChatPage() {
|
|||
console.log(
|
||||
"Received chunk:",
|
||||
chunk.type || chunk.object,
|
||||
chunk,
|
||||
chunk
|
||||
);
|
||||
|
||||
// Extract response ID if present
|
||||
|
|
@ -876,14 +877,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,
|
||||
|
|
@ -899,7 +900,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];
|
||||
|
|
@ -911,14 +912,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";
|
||||
|
|
@ -926,7 +927,7 @@ function ChatPage() {
|
|||
} catch (e) {
|
||||
console.log(
|
||||
"Arguments not yet complete or invalid JSON:",
|
||||
e,
|
||||
e
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -959,7 +960,7 @@ function ChatPage() {
|
|||
else if (toolCall.function.arguments) {
|
||||
console.log(
|
||||
"Tool call arguments delta:",
|
||||
toolCall.function.arguments,
|
||||
toolCall.function.arguments
|
||||
);
|
||||
const lastFunctionCall =
|
||||
currentFunctionCalls[
|
||||
|
|
@ -973,7 +974,7 @@ function ChatPage() {
|
|||
toolCall.function.arguments;
|
||||
console.log(
|
||||
"Accumulated tool arguments:",
|
||||
lastFunctionCall.argumentsString,
|
||||
lastFunctionCall.argumentsString
|
||||
);
|
||||
|
||||
// Try to parse arguments if they look complete
|
||||
|
|
@ -982,7 +983,7 @@ function ChatPage() {
|
|||
) {
|
||||
try {
|
||||
const parsed = JSON.parse(
|
||||
lastFunctionCall.argumentsString,
|
||||
lastFunctionCall.argumentsString
|
||||
);
|
||||
lastFunctionCall.arguments = parsed;
|
||||
lastFunctionCall.status = "completed";
|
||||
|
|
@ -990,7 +991,7 @@ function ChatPage() {
|
|||
} catch (e) {
|
||||
console.log(
|
||||
"Tool arguments not yet complete or invalid JSON:",
|
||||
e,
|
||||
e
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1022,7 +1023,7 @@ function ChatPage() {
|
|||
console.log(
|
||||
"Error parsing function call on finish:",
|
||||
fc,
|
||||
e,
|
||||
e
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1038,12 +1039,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]
|
||||
|
|
@ -1052,7 +1053,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)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1065,7 +1066,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 = {
|
||||
|
|
@ -1083,7 +1084,7 @@ function ChatPage() {
|
|||
currentFunctionCalls.map((fc) => ({
|
||||
id: fc.id,
|
||||
name: fc.name,
|
||||
})),
|
||||
}))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1094,7 +1095,7 @@ function ChatPage() {
|
|||
) {
|
||||
console.log(
|
||||
"Function args delta (Realtime API):",
|
||||
chunk.delta,
|
||||
chunk.delta
|
||||
);
|
||||
const lastFunctionCall =
|
||||
currentFunctionCalls[currentFunctionCalls.length - 1];
|
||||
|
|
@ -1105,7 +1106,7 @@ function ChatPage() {
|
|||
lastFunctionCall.argumentsString += chunk.delta || "";
|
||||
console.log(
|
||||
"Accumulated arguments (Realtime API):",
|
||||
lastFunctionCall.argumentsString,
|
||||
lastFunctionCall.argumentsString
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1116,26 +1117,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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1149,14 +1150,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
|
||||
|
|
@ -1164,14 +1165,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 =
|
||||
|
|
@ -1194,7 +1195,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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1215,7 +1216,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) {
|
||||
|
|
@ -1259,12 +1260,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]
|
||||
|
|
@ -1276,7 +1277,7 @@ function ChatPage() {
|
|||
fc.name ===
|
||||
(chunk.item.tool_name ||
|
||||
chunk.item.name ||
|
||||
chunk.item.type),
|
||||
chunk.item.type)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1292,7 +1293,7 @@ function ChatPage() {
|
|||
chunk.item.inputs || existing.arguments;
|
||||
console.log(
|
||||
"🟡 UPDATED existing pending tool call with id:",
|
||||
existing.id,
|
||||
existing.id
|
||||
);
|
||||
} else {
|
||||
const functionCall = {
|
||||
|
|
@ -1313,7 +1314,7 @@ function ChatPage() {
|
|||
id: fc.id,
|
||||
name: fc.name,
|
||||
type: fc.type,
|
||||
})),
|
||||
}))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1591,7 +1592,7 @@ function ChatPage() {
|
|||
|
||||
const handleForkConversation = (
|
||||
messageIndex: number,
|
||||
event?: React.MouseEvent,
|
||||
event?: React.MouseEvent
|
||||
) => {
|
||||
// Prevent any default behavior and stop event propagation
|
||||
if (event) {
|
||||
|
|
@ -1656,7 +1657,7 @@ function ChatPage() {
|
|||
|
||||
const renderFunctionCalls = (
|
||||
functionCalls: FunctionCall[],
|
||||
messageIndex?: number,
|
||||
messageIndex?: number
|
||||
) => {
|
||||
if (!functionCalls || functionCalls.length === 0) return null;
|
||||
|
||||
|
|
@ -2024,7 +2025,7 @@ function ChatPage() {
|
|||
<div className="flex-1 min-w-0">
|
||||
{renderFunctionCalls(
|
||||
message.functionCalls || [],
|
||||
index,
|
||||
index
|
||||
)}
|
||||
<MarkdownRenderer chatMessage={message.content} />
|
||||
</div>
|
||||
|
|
@ -2053,7 +2054,7 @@ function ChatPage() {
|
|||
<div className="flex-1">
|
||||
{renderFunctionCalls(
|
||||
streamingMessage.functionCalls,
|
||||
messages.length,
|
||||
messages.length
|
||||
)}
|
||||
<MarkdownRenderer
|
||||
chatMessage={streamingMessage.content}
|
||||
|
|
@ -2115,9 +2116,7 @@ function ChatPage() {
|
|||
<div className="flex items-center gap-2 px-4 pt-3 pb-1">
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors ${
|
||||
isFilterHighlighted
|
||||
? "bg-blue-500/40 text-blue-300 ring-2 ring-blue-400/50"
|
||||
: "bg-blue-500/20 text-blue-400"
|
||||
filterAccentClasses[parsedFilterData?.color || "zinc"]
|
||||
}`}
|
||||
>
|
||||
@filter:{selectedFilter.name}
|
||||
|
|
@ -2127,7 +2126,7 @@ function ChatPage() {
|
|||
setSelectedFilter(null);
|
||||
setIsFilterHighlighted(false);
|
||||
}}
|
||||
className="ml-1 hover:bg-blue-500/30 rounded-full p-0.5"
|
||||
className="ml-1 rounded-full p-0.5"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
|
|
@ -2196,7 +2195,7 @@ function ChatPage() {
|
|||
const filteredFilters = availableFilters.filter((filter) =>
|
||||
filter.name
|
||||
.toLowerCase()
|
||||
.includes(filterSearchTerm.toLowerCase()),
|
||||
.includes(filterSearchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
if (e.key === "Escape") {
|
||||
|
|
@ -2214,7 +2213,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;
|
||||
}
|
||||
|
|
@ -2222,7 +2221,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;
|
||||
}
|
||||
|
|
@ -2240,7 +2239,7 @@ function ChatPage() {
|
|||
) {
|
||||
e.preventDefault();
|
||||
handleFilterSelect(
|
||||
filteredFilters[selectedFilterIndex],
|
||||
filteredFilters[selectedFilterIndex]
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
|
@ -2259,7 +2258,7 @@ function ChatPage() {
|
|||
) {
|
||||
e.preventDefault();
|
||||
handleFilterSelect(
|
||||
filteredFilters[selectedFilterIndex],
|
||||
filteredFilters[selectedFilterIndex]
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
|
@ -2339,7 +2338,7 @@ function ChatPage() {
|
|||
.filter((filter) =>
|
||||
filter.name
|
||||
.toLowerCase()
|
||||
.includes(filterSearchTerm.toLowerCase()),
|
||||
.includes(filterSearchTerm.toLowerCase())
|
||||
)
|
||||
.map((filter, index) => (
|
||||
<button
|
||||
|
|
@ -2365,7 +2364,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">
|
||||
|
|
|
|||
|
|
@ -27,41 +27,30 @@
|
|||
--accent-foreground: 0 0% 0%;
|
||||
--destructive: 0 72% 51%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--warning: 48, 96%, 89%;
|
||||
--warning-foreground: 26, 90%, 37%;
|
||||
--border: 240 4.8% 95.9%;
|
||||
--input: 240 6% 90%;
|
||||
--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%, 89%; /* amber-100 #fef3c7 */
|
||||
--accent-amber-foreground: 26, 90%, 37%; /* amber-700 #b45309 */
|
||||
--accent-emerald: 149, 80%, 90%; /* emerald-100 #d1fae5 */
|
||||
--accent-emerald-foreground: 161, 94%, 30%; /* emerald-600 #059669 */
|
||||
--accent-red: 0, 93%, 94%; /* red-100 #fee2e2 */
|
||||
--accent-red-foreground: 0, 72%, 51%; /* red-600 #dc2626 */
|
||||
--accent-indigo: 226, 100%, 94%; /* indigo-100 #e0e7ff */
|
||||
--accent-indigo-foreground: 243, 75%, 59%; /* indigo-600 #4f46e5 */
|
||||
--accent-pink: 326, 78%, 95%; /* pink-100 #fce7f3 */
|
||||
--accent-pink-foreground: 333, 71%, 51%; /* pink-600 #db2777 */
|
||||
--accent-purple: 269, 100%, 95%; /* purple-100 #f3e8ff */
|
||||
--accent-purple-foreground: 271, 81%, 56%; /* 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%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -84,29 +73,25 @@
|
|||
--accent-foreground: 0 0% 100%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--warning: 22, 78%, 26%;
|
||||
--warning-foreground: 46, 97%, 65%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 5% 34%;
|
||||
--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%;
|
||||
|
||||
--warning: 45.9 96.7% 64.5%;
|
||||
--warning-foreground: 240 6% 10%;
|
||||
--accent-amber: 22, 78%, 26%; /* amber-900 #78350f */
|
||||
--accent-amber-foreground: 46, 97%, 65%; /* amber-300 #fcd34d */
|
||||
--accent-emerald: 164, 86%, 16%; /* emerald-900 #064e3b */
|
||||
--accent-emerald-foreground: 158, 64%, 52%; /* emerald-400 #34d399 */
|
||||
--accent-red: 0, 63%, 31%; /* red-900 #7f1d1d */
|
||||
--accent-red-foreground: 0, 91%, 71%; /* red-400 #f87171 */
|
||||
--accent-indigo: 242, 47%, 34%; /* indigo-900 #312e81 */
|
||||
--accent-indigo-foreground: 234, 89%, 74%; /* indigo-400 #818cf8 */
|
||||
--accent-pink: 336, 69%, 30%; /* pink-900 #831843 */
|
||||
--accent-pink-foreground: 329, 86%, 70%; /* pink-400 #f472b6 */
|
||||
--accent-purple: 274, 66%, 32%; /* purple-900 #4c1d95 */
|
||||
--accent-purple-foreground: 270, 95%, 75%; /* purple-400 #a78bfa */
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -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 ?? ""
|
||||
)}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
|
|
@ -146,7 +147,7 @@ function SearchPage() {
|
|||
initialFlex: 0.5,
|
||||
cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
|
||||
return (
|
||||
<span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
|
||||
<span className="text-xs text-accent-emerald-foreground bg-accent-emerald px-2 py-1 rounded">
|
||||
{value?.toFixed(2) ?? "-"}
|
||||
</span>
|
||||
);
|
||||
|
|
@ -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 || "zinc"]
|
||||
}`}
|
||||
>
|
||||
<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"
|
||||
|
|
|
|||
|
|
@ -16,27 +16,27 @@ interface StatusBadgeProps {
|
|||
const statusConfig = {
|
||||
processing: {
|
||||
label: "Processing",
|
||||
className: "text-muted-foreground dark:text-muted-foreground ",
|
||||
className: "text-muted-foreground ",
|
||||
},
|
||||
active: {
|
||||
label: "Active",
|
||||
className: "text-emerald-600 dark:text-emerald-400 ",
|
||||
className: "text-accent-emerald-foreground ",
|
||||
},
|
||||
unavailable: {
|
||||
label: "Unavailable",
|
||||
className: "text-red-600 dark:text-red-400 ",
|
||||
className: "text-accent-red-foreground ",
|
||||
},
|
||||
failed: {
|
||||
label: "Failed",
|
||||
className: "text-red-600 dark:text-red-400 ",
|
||||
className: "text-accent-red-foreground ",
|
||||
},
|
||||
hidden: {
|
||||
label: "Hidden",
|
||||
className: "text-zinc-400 dark:text-zinc-500 ",
|
||||
className: "text-muted-foreground ",
|
||||
},
|
||||
sync: {
|
||||
label: "Sync",
|
||||
className: "text-amber-700 dark:text-amber-300 underline",
|
||||
className: "text-accent-amber-foreground underline",
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import { FilterColor, IconKey } from "@/components/filter-icon-popover";
|
||||
import React, {
|
||||
createContext,
|
||||
type ReactNode,
|
||||
|
|
@ -27,6 +28,8 @@ export interface ParsedQueryData {
|
|||
};
|
||||
limit: number;
|
||||
scoreThreshold: number;
|
||||
color: FilterColor;
|
||||
icon: IconKey;
|
||||
}
|
||||
|
||||
interface KnowledgeFilterContextType {
|
||||
|
|
@ -38,6 +41,9 @@ interface KnowledgeFilterContextType {
|
|||
openPanel: () => void;
|
||||
closePanel: () => void;
|
||||
closePanelOnly: () => void;
|
||||
createMode: boolean;
|
||||
startCreateMode: () => void;
|
||||
endCreateMode: () => void;
|
||||
}
|
||||
|
||||
const KnowledgeFilterContext = createContext<
|
||||
|
|
@ -48,7 +54,7 @@ export function useKnowledgeFilter() {
|
|||
const context = useContext(KnowledgeFilterContext);
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
"useKnowledgeFilter must be used within a KnowledgeFilterProvider",
|
||||
"useKnowledgeFilter must be used within a KnowledgeFilterProvider"
|
||||
);
|
||||
}
|
||||
return context;
|
||||
|
|
@ -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