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

changed settings page to get models when is no ajth mode

Browse source
This commit is contained in:
Lucas Oliveira 2025-09-24 10:00:53 -03:00
parent fad175efe3
commit c3c7b9a836
1 changed files with 77 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,11 +4,13 @@ import { Loader2, PlugZap, RefreshCw } from "lucide-react";
import { useSearchParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
import { Suspense, useCallback, useEffect, useState } from "react"; import { Suspense, useCallback, useEffect, useState } from "react";
import { useUpdateFlowSettingMutation } from "@/app/api/mutations/useUpdateFlowSettingMutation"; import { useUpdateFlowSettingMutation } from "@/app/api/mutations/useUpdateFlowSettingMutation";
import {
useGetIBMModelsQuery,
useGetOllamaModelsQuery,
useGetOpenAIModelsQuery,
} from "@/app/api/queries/useGetModelsQuery";
import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery"; import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery";
import { useGetOpenAIModelsQuery, useGetOllamaModelsQuery, useGetIBMModelsQuery } from "@/app/api/queries/useGetModelsQuery";
import { ConfirmationDialog } from "@/components/confirmation-dialog"; import { ConfirmationDialog } from "@/components/confirmation-dialog";
import { ModelSelectItems } from "./helpers/model-select-item";
import { getFallbackModels, type ModelProvider } from "./helpers/model-helpers";
import { ProtectedRoute } from "@/components/protected-route"; import { ProtectedRoute } from "@/components/protected-route";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -33,6 +35,8 @@ 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 { getFallbackModels, type ModelProvider } from "./helpers/model-helpers";
import { ModelSelectItems } from "./helpers/model-select-item";
const MAX_SYSTEM_PROMPT_CHARS = 2000; const MAX_SYSTEM_PROMPT_CHARS = 2000;
@ -105,42 +109,46 @@ function KnowledgeSourcesPage() {
// Fetch settings using React Query // Fetch settings using React Query
const { data: settings = {} } = useGetSettingsQuery({ const { data: settings = {} } = useGetSettingsQuery({
enabled: isAuthenticated, enabled: isAuthenticated || isNoAuthMode,
}); });
// Get the current provider from settings // Get the current provider from settings
const currentProvider = (settings.provider?.model_provider || 'openai') as ModelProvider; const currentProvider = (settings.provider?.model_provider ||
"openai") as ModelProvider;
// Fetch available models based on provider // Fetch available models based on provider
const { data: openaiModelsData } = useGetOpenAIModelsQuery( const { data: openaiModelsData } = useGetOpenAIModelsQuery(
undefined, // Let backend use stored API key from configuration undefined, // Let backend use stored API key from configuration
{ {
enabled: isAuthenticated && currentProvider === 'openai', enabled:
} (isAuthenticated || isNoAuthMode) && currentProvider === "openai",
},
); );
const { data: ollamaModelsData } = useGetOllamaModelsQuery( const { data: ollamaModelsData } = useGetOllamaModelsQuery(
undefined, // No params for now, could be extended later undefined, // No params for now, could be extended later
{ {
enabled: isAuthenticated && currentProvider === 'ollama', enabled:
} (isAuthenticated || isNoAuthMode) && currentProvider === "ollama",
},
); );
const { data: ibmModelsData } = useGetIBMModelsQuery( const { data: ibmModelsData } = useGetIBMModelsQuery(
undefined, // No params for now, could be extended later undefined, // No params for now, could be extended later
{ {
enabled: isAuthenticated && currentProvider === 'ibm', enabled: (isAuthenticated || isNoAuthMode) && currentProvider === "ibm",
} },
); );
// Select the appropriate models data based on provider // Select the appropriate models data based on provider
const modelsData = currentProvider === 'openai' const modelsData =
? openaiModelsData currentProvider === "openai"
: currentProvider === 'ollama' ? openaiModelsData
? ollamaModelsData : currentProvider === "ollama"
: currentProvider === 'ibm' ? ollamaModelsData
? ibmModelsData : currentProvider === "ibm"
: openaiModelsData; // fallback to openai ? ibmModelsData
: openaiModelsData; // fallback to openai
// Mutations // Mutations
const updateFlowSettingMutation = useUpdateFlowSettingMutation({ const updateFlowSettingMutation = useUpdateFlowSettingMutation({
@ -152,7 +160,6 @@ function KnowledgeSourcesPage() {
}, },
}); });
// Debounced update function // Debounced update function
const debouncedUpdate = useDebounce( const debouncedUpdate = useDebounce(
(variables: Parameters<typeof updateFlowSettingMutation.mutate>[0]) => { (variables: Parameters<typeof updateFlowSettingMutation.mutate>[0]) => {
@ -224,7 +231,6 @@ function KnowledgeSourcesPage() {
debouncedUpdate({ doclingPresets: mode }); debouncedUpdate({ doclingPresets: mode });
}; };
// Helper function to get connector icon // Helper function to get connector icon
const getConnectorIcon = useCallback((iconName: string) => { const getConnectorIcon = useCallback((iconName: string) => {
const iconMap: { [key: string]: React.ReactElement } = { const iconMap: { [key: string]: React.ReactElement } = {
@ -613,7 +619,11 @@ function KnowledgeSourcesPage() {
Language Model Language Model
</Label> </Label>
<Select <Select
value={settings.agent?.llm_model || modelsData?.language_models?.find(m => m.default)?.value || "gpt-4"} value={
settings.agent?.llm_model ||
modelsData?.language_models?.find((m) => m.default)?.value ||
"gpt-4"
}
onValueChange={handleModelChange} onValueChange={handleModelChange}
> >
<SelectTrigger id="model-select"> <SelectTrigger id="model-select">
@ -638,10 +648,20 @@ function KnowledgeSourcesPage() {
value={systemPrompt} value={systemPrompt}
onChange={(e) => setSystemPrompt(e.target.value)} onChange={(e) => setSystemPrompt(e.target.value)}
rows={6} rows={6}
className={`resize-none ${systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS ? 'border-red-500 focus:border-red-500' : ''}`} className={`resize-none ${
systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
? "border-red-500 focus:border-red-500"
: ""
}`}
/> />
<div className="flex justify-start"> <div className="flex justify-start">
<span className={`text-xs ${systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS ? 'text-red-500' : 'text-muted-foreground'}`}> <span
className={`text-xs ${
systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
? "text-red-500"
: "text-muted-foreground"
}`}
>
{systemPrompt.length}/{MAX_SYSTEM_PROMPT_CHARS} characters {systemPrompt.length}/{MAX_SYSTEM_PROMPT_CHARS} characters
</span> </span>
</div> </div>
@ -649,7 +669,10 @@ function KnowledgeSourcesPage() {
<div className="flex justify-end pt-2"> <div className="flex justify-end pt-2">
<Button <Button
onClick={handleSystemPromptSave} onClick={handleSystemPromptSave}
disabled={updateFlowSettingMutation.isPending || systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS} disabled={
updateFlowSettingMutation.isPending ||
systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
}
className="min-w-[120px]" className="min-w-[120px]"
size="sm" size="sm"
variant="outline" variant="outline"
@ -736,7 +759,9 @@ function KnowledgeSourcesPage() {
</Label> </Label>
<Select <Select
value={ value={
settings.knowledge?.embedding_model || modelsData?.embedding_models?.find(m => m.default)?.value || "text-embedding-ada-002" settings.knowledge?.embedding_model ||
modelsData?.embedding_models?.find((m) => m.default)?.value ||
"text-embedding-ada-002"
} }
onValueChange={handleEmbeddingModelChange} onValueChange={handleEmbeddingModelChange}
> >
@ -746,7 +771,9 @@ function KnowledgeSourcesPage() {
<SelectContent> <SelectContent>
<ModelSelectItems <ModelSelectItems
models={modelsData?.embedding_models} models={modelsData?.embedding_models}
fallbackModels={getFallbackModels(currentProvider).embedding} fallbackModels={
getFallbackModels(currentProvider).embedding
}
provider={currentProvider} provider={currentProvider}
/> />
</SelectContent> </SelectContent>
@ -807,7 +834,10 @@ function KnowledgeSourcesPage() {
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<RadioGroupItem value="standard" id="standard" /> <RadioGroupItem value="standard" id="standard" />
<div className="flex-1"> <div className="flex-1">
<Label htmlFor="standard" className="text-base font-medium cursor-pointer"> <Label
htmlFor="standard"
className="text-base font-medium cursor-pointer"
>
Standard Standard
</Label> </Label>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
@ -818,18 +848,28 @@ function KnowledgeSourcesPage() {
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<RadioGroupItem value="ocr" id="ocr" /> <RadioGroupItem value="ocr" id="ocr" />
<div className="flex-1"> <div className="flex-1">
<Label htmlFor="ocr" className="text-base font-medium cursor-pointer"> <Label
htmlFor="ocr"
className="text-base font-medium cursor-pointer"
>
Extract text from images Extract text from images
</Label> </Label>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
Uses OCR to extract text from images/PDFs. Ingest is slower when enabled Uses OCR to extract text from images/PDFs. Ingest is
slower when enabled
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<RadioGroupItem value="picture_description" id="picture_description" /> <RadioGroupItem
value="picture_description"
id="picture_description"
/>
<div className="flex-1"> <div className="flex-1">
<Label htmlFor="picture_description" className="text-base font-medium cursor-pointer"> <Label
htmlFor="picture_description"
className="text-base font-medium cursor-pointer"
>
Generate Description Generate Description
</Label> </Label>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
@ -840,11 +880,15 @@ function KnowledgeSourcesPage() {
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<RadioGroupItem value="VLM" id="VLM" /> <RadioGroupItem value="VLM" id="VLM" />
<div className="flex-1"> <div className="flex-1">
<Label htmlFor="VLM" className="text-base font-medium cursor-pointer"> <Label
htmlFor="VLM"
className="text-base font-medium cursor-pointer"
>
AI Vision AI Vision
</Label> </Label>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
Advanced processing with vision language models. Highest quality but most expensive Advanced processing with vision language models. Highest
quality but most expensive
</div> </div>
</div> </div>
</div> </div>