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

Settings screen design match spec

Browse source
This commit is contained in:
Brent O'Neill 2025-09-30 12:55:32 -06:00
parent f54479cf48
commit 08594672c8
1 changed files with 69 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
frontend/src/app/settings/page.tsx
View file

@ -35,7 +35,11 @@ import { Textarea } from "@/components/ui/textarea";
import { useAuth } from "@/contexts/auth-context"; import { useAuth } from "@/contexts/auth-context";
import { useTask } from "@/contexts/task-context"; import { useTask } from "@/contexts/task-context";
import { useDebounce } from "@/lib/debounce"; import { useDebounce } from "@/lib/debounce";
import { DEFAULT_AGENT_SETTINGS, DEFAULT_KNOWLEDGE_SETTINGS, UI_CONSTANTS } from "@/lib/constants"; import {
DEFAULT_AGENT_SETTINGS,
DEFAULT_KNOWLEDGE_SETTINGS,
UI_CONSTANTS,
} from "@/lib/constants";
import { getFallbackModels, type ModelProvider } from "./helpers/model-helpers"; import { getFallbackModels, type ModelProvider } from "./helpers/model-helpers";
import { ModelSelectItems } from "./helpers/model-select-item"; import { ModelSelectItems } from "./helpers/model-select-item";
import { LabelWrapper } from "@/components/label-wrapper"; import { LabelWrapper } from "@/components/label-wrapper";
@ -109,7 +113,8 @@ function KnowledgeSourcesPage() {
const [chunkOverlap, setChunkOverlap] = useState<number>(50); const [chunkOverlap, setChunkOverlap] = useState<number>(50);
const [tableStructure, setTableStructure] = useState<boolean>(false); const [tableStructure, setTableStructure] = useState<boolean>(false);
const [ocr, setOcr] = useState<boolean>(false); const [ocr, setOcr] = useState<boolean>(false);
const [pictureDescriptions, setPictureDescriptions] = useState<boolean>(false); const [pictureDescriptions, setPictureDescriptions] =
useState<boolean>(false);
// Fetch settings using React Query // Fetch settings using React Query
const { data: settings = {} } = useGetSettingsQuery({ const { data: settings = {} } = useGetSettingsQuery({
@ -603,13 +608,13 @@ function KnowledgeSourcesPage() {
{/* Connectors Section */} {/* Connectors Section */}
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h2 className="text-2xl font-semibold tracking-tight mb-2"> <h2 className="text-lg font-semibold tracking-tight mb-2">
Cloud Connectors Cloud Connectors
</h2> </h2>
</div> </div>
{/* Conditional Sync Settings or No-Auth Message */} {/* Conditional Sync Settings or No-Auth Message */}
{isNoAuthMode ? ( {false ? (
<Card className="border-yellow-500/50 bg-yellow-500/5"> <Card className="border-yellow-500/50 bg-yellow-500/5">
<CardHeader> <CardHeader>
<CardTitle className="text-lg text-yellow-600"> <CardTitle className="text-lg text-yellow-600">
@ -872,32 +877,31 @@ function KnowledgeSourcesPage() {
</LabelWrapper> </LabelWrapper>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="system-prompt" className="text-base font-medium"> <LabelWrapper label="Agent Instructions" id="system-prompt">
Agent Instructions <Textarea
</Label> id="system-prompt"
<Textarea placeholder="Enter your agent instructions here..."
id="system-prompt" value={systemPrompt}
placeholder="Enter your agent instructions here..." onChange={(e) => setSystemPrompt(e.target.value)}
value={systemPrompt} rows={6}
onChange={(e) => setSystemPrompt(e.target.value)} className={`resize-none ${
rows={6}
className={`resize-none ${
systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
? "border-red-500 focus:border-red-500"
: ""
}`}
/>
<div className="flex justify-start">
<span
className={`text-xs ${
systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
? "text-red-500" ? "border-red-500 focus:border-red-500"
: "text-muted-foreground" : ""
}`} }`}
> />
{systemPrompt.length}/{MAX_SYSTEM_PROMPT_CHARS} characters <div className="flex justify-start">
</span> <span
</div> className={`text-xs ${
systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
? "text-red-500"
: "text-muted-foreground"
}`}
>
{systemPrompt.length}/{MAX_SYSTEM_PROMPT_CHARS} characters
</span>
</div>
</LabelWrapper>
</div> </div>
<div className="flex justify-end pt-2"> <div className="flex justify-end pt-2">
<Button <Button
@ -929,7 +933,9 @@ function KnowledgeSourcesPage() {
<CardHeader> <CardHeader>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<CardTitle className="text-lg mb-4">Knowledge</CardTitle> <CardTitle className="text-lg mb-4">
Knowledge ingestion and retrieval
</CardTitle>
<CardDescription> <CardDescription>
Quick knowledge settings. Edit in Langflow for full control. Quick knowledge settings. Edit in Langflow for full control.
</CardDescription> </CardDescription>
@ -1040,47 +1046,42 @@ function KnowledgeSourcesPage() {
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="chunk-size" className="text-base font-medium"> <LabelWrapper id="chunk-size" label="Chunk size">
Chunk size <div className="relative">
</Label> <Input
<div className="relative"> id="chunk-size"
<Input type="number"
id="chunk-size" min="1"
type="number" value={chunkSize}
min="1" onChange={(e) => handleChunkSizeChange(e.target.value)}
value={chunkSize} className="w-full pr-20"
onChange={(e) => handleChunkSizeChange(e.target.value)} />
className="w-full pr-20" <div className="absolute inset-y-0 right-0 flex items-center pr-8 pointer-events-none">
/> <span className="text-sm text-muted-foreground">
<div className="absolute inset-y-0 right-0 flex items-center pr-8 pointer-events-none"> characters
<span className="text-sm text-muted-foreground"> </span>
characters </div>
</span>
</div> </div>
</div> </LabelWrapper>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label <LabelWrapper id="chunk-overlap" label="Chunk overlap">
htmlFor="chunk-overlap" <div className="relative">
className="text-base font-medium" <Input
> id="chunk-overlap"
Chunk overlap type="number"
</Label> min="0"
<div className="relative"> value={chunkOverlap}
<Input onChange={(e) => handleChunkOverlapChange(e.target.value)}
id="chunk-overlap" className="w-full pr-20"
type="number" />
min="0" <div className="absolute inset-y-0 right-0 flex items-center pr-8 pointer-events-none">
value={chunkOverlap} <span className="text-sm text-muted-foreground">
onChange={(e) => handleChunkOverlapChange(e.target.value)} characters
className="w-full pr-20" </span>
/> </div>
<div className="absolute inset-y-0 right-0 flex items-center pr-8 pointer-events-none">
<span className="text-sm text-muted-foreground">
characters
</span>
</div> </div>
</div> </LabelWrapper>
</div> </div>
</div> </div>
<div className=""> <div className="">
@ -1111,7 +1112,8 @@ function KnowledgeSourcesPage() {
OCR OCR
</Label> </Label>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
Extracts text from images/PDFs. Ingest is slower when enabled. Extracts text from images/PDFs. Ingest is slower when
enabled.
</div> </div>
</div> </div>
<Switch <Switch