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

modify colors and improve various components to match designs

Browse source
This commit is contained in:
Cole Goldsmith 2025-10-01 15:24:53 -05:00
parent 6c75fc92d5
commit e6a48ff7c8
9 changed files with 159 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/components/filter-icon-popover.tsx
View file

@ -133,7 +133,7 @@ export function FilterIconPopover({
type="button"
onClick={() => onColorChange(c)}
className={cn(
"flex items-center justify-center h-6 w-6 rounded-sm transition-colors text-primary",
"flex items-center justify-center h-6 w-6 rounded-sm transition-colors text-white",
colorSwatchClasses[c]
)}
aria-label={c}

147
frontend/components/knowledge-filter-panel.tsx
View file

@ -3,7 +3,13 @@
import { useState, useEffect } from "react";
import { X, Save, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
@ -146,25 +152,6 @@ export function KnowledgeFilterPanel() {
// 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
setSelectedFilters({
data_sources: ["*"],
document_types: ["*"],
owners: ["*"],
connector_types: ["*"],
});
};
const clearAllFilters = () => {
setSelectedFilters({
data_sources: [],
document_types: [],
owners: [],
connector_types: [],
});
};
const handleSaveConfiguration = async () => {
if (!name.trim()) return;
const filterData = {
@ -238,8 +225,8 @@ export function KnowledgeFilterPanel() {
};
return (
<div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l border-border/40 z-40 overflow-y-auto">
<Card className="h-full rounded-none border-0 shadow-lg">
<div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l border z-40 overflow-y-auto">
<Card className="h-full rounded-none border-0 shadow-lg flex flex-col">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-lg flex items-center gap-2">
@ -282,13 +269,19 @@ export function KnowledgeFilterPanel() {
{formatDate(selectedFilter.created_at)}
</div>
)}
{createMode && (
<div className="space-y-2 text-xs text-right text-muted-foreground">
<span className="text-placeholder-foreground">Created</span>{" "}
{formatDate(new Date().toISOString())}
</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"
placeholder="Provide a brief description of your knowledge filter..."
rows={3}
/>
</div>
@ -301,7 +294,7 @@ export function KnowledgeFilterPanel() {
</Label>
<Textarea
id="search-query"
placeholder="e.g., 'financial reports from Q4'"
placeholder="Enter your search query..."
value={query}
onChange={(e) => setQuery(e.target.value)}
rows={3}
@ -311,7 +304,6 @@ export function KnowledgeFilterPanel() {
{/* Filter Dropdowns */}
<div className="space-y-4">
<div className="space-y-2">
<Label className="text-sm font-medium">Data Sources</Label>
<MultiSelect
options={(availableFacets.data_sources || []).map((bucket) => ({
value: bucket.key,
@ -322,13 +314,12 @@ export function KnowledgeFilterPanel() {
onValueChange={(values) =>
handleFilterChange("data_sources", values)
}
placeholder="Select data sources..."
allOptionLabel="All Data Sources"
placeholder="Select sources..."
allOptionLabel="All sources"
/>
</div>
<div className="space-y-2">
<Label className="text-sm font-medium">Document Types</Label>
<MultiSelect
options={(availableFacets.document_types || []).map(
(bucket) => ({
@ -341,13 +332,12 @@ export function KnowledgeFilterPanel() {
onValueChange={(values) =>
handleFilterChange("document_types", values)
}
placeholder="Select document types..."
allOptionLabel="All Document Types"
placeholder="Select types..."
allOptionLabel="All types"
/>
</div>
<div className="space-y-2">
<Label className="text-sm font-medium">Owners</Label>
<MultiSelect
options={(availableFacets.owners || []).map((bucket) => ({
value: bucket.key,
@ -362,7 +352,6 @@ export function KnowledgeFilterPanel() {
</div>
<div className="space-y-2">
<Label className="text-sm font-medium">Sources</Label>
<MultiSelect
options={(availableFacets.connector_types || []).map(
(bucket) => ({
@ -375,33 +364,13 @@ export function KnowledgeFilterPanel() {
onValueChange={(values) =>
handleFilterChange("connector_types", values)
}
placeholder="Select sources..."
allOptionLabel="All Sources"
placeholder="Select connectors..."
allOptionLabel="All connectors"
/>
</div>
{/* All/None buttons */}
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
onClick={selectAllFilters}
className="h-auto px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 border-border/50"
>
All
</Button>
<Button
variant="outline"
size="sm"
onClick={clearAllFilters}
className="h-auto px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 border-border/50"
>
None
</Button>
</div>
{/* Result Limit Control - exactly like search page */}
<div className="space-y-4 pt-4 border-t border-border/50">
<div className="space-y-4">
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label className="text-sm font-medium text-nowrap">
@ -462,39 +431,45 @@ export function KnowledgeFilterPanel() {
/>
</div>
</div>
{/* Save Configuration Button */}
<div className="flex flex-col gap-3 pt-4 border-t border-border/50">
<Button
onClick={handleSaveConfiguration}
disabled={isSaving}
className="w-full"
size="sm"
>
{isSaving ? (
<>
<RefreshCw className="h-3 w-3 mr-2 animate-spin" />
Saving...
</>
) : (
<>
<Save className="h-3 w-3 mr-2" />
Save Configuration
</>
)}
</Button>
{!createMode && (
<Button
variant="destructive"
className="w-full"
onClick={handleDeleteFilter}
>
Delete Filter
</Button>
)}
</div>
</div>
</CardContent>
<CardFooter className="mt-auto align-bottom justify-end gap-2">
{/* Save Configuration Button */}
{createMode && (
<Button
onClick={closePanelOnly}
disabled={isSaving}
variant="outline"
size="sm"
>
Cancel
</Button>
)}
{!createMode && (
<Button
variant="destructive"
size="sm"
onClick={handleDeleteFilter}
disabled={isSaving}
>
Delete Filter
</Button>
)}
<Button
onClick={handleSaveConfiguration}
disabled={isSaving}
size="sm"
className="relative"
>
{isSaving && (
<>
<RefreshCw className="h-3 w-3 animate-spin" />
Saving...
</>
)}
{!isSaving && (createMode ? "Create Filter" : "Update Filter")}
</Button>
</CardFooter>
</Card>
</div>
);

2
frontend/components/ui/button.tsx
View file

@ -14,7 +14,7 @@ const buttonVariants = cva(
"border border-input hover:bg-muted hover:text-accent-foreground disabled:bg-muted disabled:!border-none",
primary:
"border bg-background text-secondary-foreground hover:bg-muted hover:shadow-sm",
warning: "bg-warning text-secondary hover:bg-warning/90",
warning: "bg-warning text-warning-foreground hover:bg-warning/90",
secondary:
"border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
ghost:

123
frontend/components/ui/multi-select.tsx
View file

@ -1,39 +1,39 @@
"use client"
"use client";
import * as React from "react"
import { ChevronDown, Check } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import * as React from "react";
import { ChevronDown, Check } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
} from "@/components/ui/command"
} from "@/components/ui/command";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
import { ScrollArea } from "@/components/ui/scroll-area"
} from "@/components/ui/popover";
import { ScrollArea } from "@/components/ui/scroll-area";
interface Option {
value: string
label: string
count?: number
value: string;
label: string;
count?: number;
}
interface MultiSelectProps {
options: Option[]
value: string[]
onValueChange: (value: string[]) => void
placeholder?: string
className?: string
maxSelection?: number
searchPlaceholder?: string
showAllOption?: boolean
allOptionLabel?: string
options: Option[];
value: string[];
onValueChange: (value: string[]) => void;
placeholder?: string;
className?: string;
maxSelection?: number;
searchPlaceholder?: string;
showAllOption?: boolean;
allOptionLabel?: string;
}
export function MultiSelect({
@ -43,60 +43,61 @@ export function MultiSelect({
placeholder = "Select items...",
className,
maxSelection,
searchPlaceholder = "Search...",
searchPlaceholder = "Search options...",
showAllOption = true,
allOptionLabel = "All"
allOptionLabel = "All",
}: MultiSelectProps) {
const [open, setOpen] = React.useState(false)
const [searchValue, setSearchValue] = React.useState("")
const [open, setOpen] = React.useState(false);
const [searchValue, setSearchValue] = React.useState("");
const isAllSelected = value.includes("*")
const filteredOptions = options.filter(option =>
const isAllSelected = value.includes("*");
const filteredOptions = options.filter((option) =>
option.label.toLowerCase().includes(searchValue.toLowerCase())
)
);
const handleSelect = (optionValue: string) => {
if (optionValue === "*") {
// Toggle "All" selection
if (isAllSelected) {
onValueChange([])
onValueChange([]);
} else {
onValueChange(["*"])
onValueChange(["*"]);
}
} else {
let newValue: string[]
let newValue: string[];
if (value.includes(optionValue)) {
// Remove the item
newValue = value.filter(v => v !== optionValue && v !== "*")
newValue = value.filter((v) => v !== optionValue && v !== "*");
} else {
// Add the item and remove "All" if present
newValue = [...value.filter(v => v !== "*"), optionValue]
newValue = [...value.filter((v) => v !== "*"), optionValue];
// Check max selection limit
if (maxSelection && newValue.length > maxSelection) {
return
return;
}
}
onValueChange(newValue)
onValueChange(newValue);
}
}
};
const getDisplayText = () => {
if (isAllSelected) {
return allOptionLabel
return allOptionLabel;
}
if (value.length === 0) {
return placeholder
return placeholder;
}
// Extract the noun from placeholder (e.g., "Select data sources..." -> "data sources")
const noun = placeholder.toLowerCase().replace('select ', '').replace('...', '')
return `${value.length} ${noun}`
}
const noun = placeholder
.toLowerCase()
.replace("select ", "")
.replace("...", "");
return `${value.length} ${noun}`;
};
return (
<Popover open={open} onOpenChange={setOpen}>
@ -106,17 +107,15 @@ export function MultiSelect({
role="combobox"
aria-expanded={open}
className={cn(
"w-full justify-between min-h-[40px] h-auto text-left",
"w-full justify-between h-8 py-0 text-left",
className
)}
>
<span className="text-foreground text-sm">
{getDisplayText()}
</span>
<span className="text-foreground text-sm">{getDisplayText()}</span>
<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-full p-0" align="start">
<PopoverContent className="p-0" align="start">
<Command>
<CommandInput
placeholder={searchPlaceholder}
@ -132,16 +131,13 @@ export function MultiSelect({
onSelect={() => handleSelect("*")}
className="cursor-pointer"
>
<span className="flex-1">{allOptionLabel}</span>
<Check
className={cn(
"mr-2 h-4 w-4",
isAllSelected ? "opacity-100" : "opacity-0"
)}
/>
<span className="flex-1">{allOptionLabel}</span>
<span className="text-xs text-blue-500 bg-blue-500/10 px-1.5 py-0.5 rounded ml-2">
*
</span>
</CommandItem>
)}
{filteredOptions.map((option) => (
@ -149,20 +145,19 @@ export function MultiSelect({
key={option.value}
onSelect={() => handleSelect(option.value)}
className="cursor-pointer"
disabled={isAllSelected}
>
<Check
className={cn(
"mr-2 h-4 w-4",
value.includes(option.value) ? "opacity-100" : "opacity-0"
)}
/>
<span className="flex-1">{option.label}</span>
{option.count !== undefined && (
<span className="text-xs text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded ml-2">
{option.count}
</span>
)}
<Check
className={cn(
"mr-2 h-4 w-4",
value.includes(option.value) ? "opacity-100" : "opacity-0"
)}
/>
</CommandItem>
))}
</ScrollArea>
@ -170,5 +165,5 @@ export function MultiSelect({
</Command>
</PopoverContent>
</Popover>
)
}
);
}

6
frontend/components/ui/slider.tsx
View file

@ -17,10 +17,10 @@ const Slider = React.forwardRef<
)}
{...props}
>
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-muted/40">
<SliderPrimitive.Range className="absolute h-full bg-primary" />
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-muted">
<SliderPrimitive.Range className="absolute h-full bg-muted-foreground" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
</SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

9
frontend/package-lock.json generated
View file

@ -28,7 +28,6 @@
"@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-tooltip": "^1.2.8",
"@tailwindcss/forms": "^0.5.10",
"@tailwindcss/line-clamp": "^0.4.4",
"@tailwindcss/typography": "^0.5.16",
"@tanstack/react-query": "^5.86.0",
"ag-grid-community": "^34.2.0",
@ -2318,14 +2317,6 @@
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
}
},
"node_modules/@tailwindcss/line-clamp": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",
"integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==",
"peerDependencies": {
"tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
}
},
"node_modules/@tailwindcss/typography": {
"version": "0.5.16",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",

1
frontend/package.json
View file

@ -29,7 +29,6 @@
"@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-tooltip": "^1.2.8",
"@tailwindcss/forms": "^0.5.10",
"@tailwindcss/line-clamp": "^0.4.4",
"@tailwindcss/typography": "^0.5.16",
"@tanstack/react-query": "^5.86.0",
"ag-grid-community": "^34.2.0",

66
frontend/src/app/globals.css
View file

@ -25,27 +25,28 @@
--muted-foreground: 240 4% 46%;
--accent: 240 5% 96%;
--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-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 */
--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 */
--destructive: 0 72% 51%; /* red-600 #dc2626 */
--destructive-foreground: 0 0% 100%;
--warning: 26 90% 37%; /* amber-700 #b45309 */
--warning-foreground: 0 0% 100%;
/* Component Colors */
--component-icon: #d8598a;
@ -71,27 +72,28 @@
--muted-foreground: 240 5% 65%;
--accent: 240 4% 16%;
--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-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 */
--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 */
--destructive: 0 84% 60%; /* red-500 #ef4444 */
--destructive-foreground: 0 0% 100%;
--warning: 46 97% 65%; /* amber-300 #fcd34d */
--warning-foreground: 0 0% 0%;
}
* {

2
frontend/tailwind.config.ts
View file

@ -4,7 +4,6 @@ import tailwindcssTypography from "@tailwindcss/typography";
import { fontFamily } from "tailwindcss/defaultTheme";
import plugin from "tailwindcss/plugin";
import tailwindcssAnimate from "tailwindcss-animate";
import tailwindcssLineClamp from "@tailwindcss/line-clamp";
const config = {
darkMode: ["class"],
@ -167,7 +166,6 @@ const config = {
},
plugins: [
tailwindcssAnimate,
tailwindcssLineClamp,
tailwindcssForms({
strategy: "class",
}),