update

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@fontsource/fira-mono": "^5.0.14",
+        "@microlink/react-json-view": "^1.26.1",
         "@reduxjs/toolkit": "^2.3.0",
         "@tanstack/react-query": "^5.54.1",
         "@tanstack/react-query-devtools": "^5.54.1",
@@ -1175,6 +1176,23 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@microlink/react-json-view": {
+      "version": "1.26.1",
+      "resolved": "https://registry.npmjs.org/@microlink/react-json-view/-/react-json-view-1.26.1.tgz",
+      "integrity": "sha512-2H5QCYdZlJi+oN4YBiUYPPFTNh/KLCN9i9yz8NwmSkRqXSRXYtEVIRffc9L34jdopKGK/tK21SeuzXVJHQLkfQ==",
+      "dependencies": {
+        "react-base16-styling": "~0.9.0",
+        "react-lifecycles-compat": "~3.0.4",
+        "react-textarea-autosize": "~8.5.7"
+      },
+      "engines": {
+        "node": ">=17"
+      },
+      "peerDependencies": {
+        "react": ">= 15",
+        "react-dom": ">= 15"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1610,6 +1628,11 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/base16": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/base16/-/base16-1.0.5.tgz",
+      "integrity": "sha512-OzOWrTluG9cwqidEzC/Q6FAmIPcnZfm8BFRlIx0+UIUqnuAmi5OS88O0RpT3Yz6qdmqObvUhasrbNsCofE4W9A=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1624,6 +1647,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.16",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.16.tgz",
+      "integrity": "sha512-HX7Em5NYQAXKW+1T+FiuG27NGwzJfCX3s1GjOa7ujxZa52kjJLOr4FUxT+giF6Tgxv1e+/czV/iTtBw27WTU9g=="
+    },
     "node_modules/@types/node": {
       "version": "22.13.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.0.tgz",
@@ -2051,6 +2079,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base16": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
+      "integrity": "sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ=="
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -2273,6 +2306,15 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2290,9 +2332,30 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/color/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
     "node_modules/colorjs.io": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
@@ -3408,6 +3471,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.curry": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
+      "integrity": "sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3988,6 +4056,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-base16-styling": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.9.1.tgz",
+      "integrity": "sha512-1s0CY1zRBOQ5M3T61wetEpvQmsYSNtWEcdYzyZNxKa8t7oDvaOn9d21xrGezGAHFWLM7SHcktPuPTrvoqxSfKw==",
+      "dependencies": {
+        "@babel/runtime": "^7.16.7",
+        "@types/base16": "^1.0.2",
+        "@types/lodash": "^4.14.178",
+        "base16": "^1.0.0",
+        "color": "^3.2.1",
+        "csstype": "^3.0.10",
+        "lodash.curry": "^4.1.1"
+      }
+    },
     "node_modules/react-contenteditable": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.3.7.tgz",
@@ -4191,6 +4273,22 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/react-textarea-autosize": {
+      "version": "8.5.9",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.9.tgz",
+      "integrity": "sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "use-composed-ref": "^1.3.0",
+        "use-latest": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -4887,6 +4985,19 @@
         "simple-concat": "^1.0.0"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -5180,6 +5291,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-composed-ref": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.4.0.tgz",
+      "integrity": "sha512-djviaxuOOh7wkj0paeO1Q/4wMZ8Zrnag5H6yBvzN7AKKe8beOaED9SF5/ByLqsku8NP4zQqsvM2u3ew/tJK8/w==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-isomorphic-layout-effect": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.0.tgz",
@@ -5194,6 +5318,22 @@
         }
       }
     },
+    "node_modules/use-latest": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.3.0.tgz",
+      "integrity": "sha512-mhg3xdm9NaM8q+gLT8KryJPnRFOz1/5XPBhmDEVZK1webPzDjrPk7f/mbpeLqTgB9msytYWANxgALOCJKnLvcQ==",
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fontsource/fira-mono": "^5.0.14",
+    "@microlink/react-json-view": "^1.26.1",
     "@reduxjs/toolkit": "^2.3.0",
     "@tanstack/react-query": "^5.54.1",
     "@tanstack/react-query-devtools": "^5.54.1",

src/App.css

@@ -11,3 +11,7 @@
   padding-left: 10px;
   font-weight: 600;
 }
+
+.app-content {
+  margin-top: 40px;
+}

src/App.tsx

@@ -1,14 +1,15 @@
-import "./App.css";
-import { Routes, Route, BrowserRouter as Router, Navigate } from "react-router-dom";
 import Navbar from '@/components/common/navbar/Navbar';
-import Page from "@/components/pages/main/Page";
-import Logs from "@/components/pages/logsPage/Logs";
-import Vectorization from "@/components/pages/vectorizationPage/Vectorization";
-import { pdfjs } from "react-pdf";
+import LoginPage from "@/components/pages/auth/Login";
 import LLMConfigList from "@/components/pages/llmConfigs/LlmConfigList";
 import LlmPromptList from "@/components/pages/llmPrompts/LlmPromptList";
-import LoginPage from "@/components/pages/auth/Login";
+import Logs from "@/components/pages/logs/Logs";
+import Vectorization from "@/components/pages/vectorizationPage/Vectorization";
 import { AuthProvider, useAuth } from "@/context/AuthContext";
+import { pdfjs } from "react-pdf";
+import { Navigate, Route, BrowserRouter as Router, Routes } from "react-router-dom";
+import "./App.css";
+import QePromptList from "./components/pages/qePrompts/QePromptList";
+
 
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   "pdfjs-dist/build/pdf.worker.min.mjs",
@@ -45,6 +46,10 @@ const App: React.FC = () => {
             <PrivateRoute>
               <LlmPromptList />
             </PrivateRoute>} />
+          <Route path="/qeprompt" element={
+            <PrivateRoute>
+              <QePromptList />
+            </PrivateRoute>} />            
         </Routes>
       </div>
     </Router>

src/api/qePrompts/hooks.ts

@@ -0,0 +1,49 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { createQePrompt, deleteQePrompt, fetchQePrompts, setDefaultQePrompt, updateQePrompt } from './qePromptApi';
+
+export const useQePrompts = () => {
+  const queryClient = useQueryClient();
+
+  const { data: prompts = [], isLoading, error } = useQuery({
+    queryKey: ['qePrompts'],
+    queryFn: fetchQePrompts,
+  });
+
+  const createMutation = useMutation({
+    mutationFn: createQePrompt,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['qePrompts'] });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: updateQePrompt,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['qePrompts'] });
+    },
+  });
+
+  const setDefaultMutation = useMutation({
+    mutationFn: setDefaultQePrompt,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['qePrompts'] });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteQePrompt,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['qePrompts'] });
+    },
+  });
+
+  return {
+    prompts,
+    isLoading,
+    error: error ? (error instanceof Error ? error.message : 'Failed to fetch prompturations') : null,
+    createPrompt: createMutation.mutateAsync,
+    updatePrompt: updateMutation.mutateAsync,
+    setAsDefaultPrompt: setDefaultMutation.mutateAsync,
+    deletePrompt: deleteMutation.mutateAsync,
+  };
+};

src/api/qePrompts/qePromptApi.ts

@@ -0,0 +1,79 @@
+import { query } from '@/shared/api/query';
+import { QePrompt } from './types';
+
+export const fetchQePrompts = async (): Promise<QePrompt[]> => {
+  const response = await query<QePrompt[]>({
+    url: '/qe_prompt/',
+    method: 'get',
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка получения промптов: ${response.error.status}`);
+  }
+  return response.data;
+};
+
+export const fetchQePromptById = async (id: number): Promise<QePrompt> => {
+  const response = await query<QePrompt>({
+    url: `/qe_prompt/${id}`,
+    method: 'get',
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка получения промпта: ${response.error.status}`);
+  }
+  return response.data;
+};
+
+export const createQePrompt = async (config: Omit<QePrompt, 'id' | 'created_at'>): Promise<QePrompt> => {
+  const response = await query<QePrompt>({
+    url: '/qe_prompt/',
+    method: 'post',
+    data: config,
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка создания промпта: ${response.error.status}`);
+  }
+  return response.data;
+};
+
+export const updateQePrompt = async (config: QePrompt): Promise<void> => {
+  const response = await query<void>({
+    url: `/qe_prompt/${config.id}`,
+    method: 'put',
+    data: config,
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка обновления промпта: ${response.error.status}`);
+  }
+};
+
+export const setDefaultQePrompt = async (id: number): Promise<void> => {
+  const response = await query<void>({
+    url: `/qe_prompt/default/${id}`,
+    method: 'put',
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка установки промпта по умолчанию: ${response.error.status}`);
+  }
+};
+
+export const deleteQePrompt = async (id: number): Promise<void> => {
+  const response = await query<void>({
+    url: `/qe_prompt/${id}`,
+    method: 'delete',
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка удаления промпта: ${response.error.status}`);
+  }
+};
+
+export const fetchDefaultQePrompt = async (): Promise<QePrompt | null> => {
+  const response = await query<QePrompt>({
+    url: '/qe_prompt/default',
+    method: 'get',
+  });
+  if ('error' in response) {
+    if (response.error.status === 404) return null; // Если дефолтной записи нет
+    throw new Error(`Ошибка получения дефолтной промпта: ${response.error.status}`);
+  }
+  return response.data;
+};

src/api/qePrompts/types.ts

@@ -0,0 +1,9 @@
+// src/api/qe_configs/types.ts
+export interface QePrompt {
+  id: number;
+  is_default: boolean;
+  text: string;
+  name: string;
+  type: string;
+  created_at?: string;
+}

src/components/common/navbar/Navbar.tsx

@@ -1,7 +1,7 @@
+import { useAuth } from '@/context/AuthContext';
 import React from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
 import './Navbar.scss';
-import { useAuth } from '@/context/AuthContext';
 
 const Navbar: React.FC = () => {
     const { isAuthenticated, logout } = useAuth();
@@ -49,6 +49,14 @@ const Navbar: React.FC = () => {
                                 Системные промпты
                             </NavLink>
                         </li>
+                        <li>
+                            <NavLink
+                                to="/qeprompt"
+                                className={({ isActive }) => (isActive ? 'active' : '')}
+                            >
+                                QE промпты
+                            </NavLink>
+                        </li>
                         <li>
                             <button onClick={handleLogout}>Выход</button>
                         </li>

src/components/generics/button/Button.scss

@@ -9,6 +9,7 @@
   font-family: inherit;
   display: flex;
   gap: 10px;
+  align-items: center;
 }
 
 .btn:hover {

src/components/generics/button/Button.tsx

@@ -12,7 +12,7 @@ const Button = ({
   className,
 }: ButtonProps) => {
   return (
-    <button onClick={onClick} className={`btn ${buttonType} ${className}`} disabled={disabled}>
+    <button onClick={onClick} className={`btn ${buttonType} ${className ?? ''}`} disabled={disabled}>
       {name}
       {icon}
       {loading && <Spinner />}

src/components/pages/documentsPage/Documents.tsx

@@ -33,9 +33,9 @@ const Documents: FC = () => {
     if (
       (!searchParams.get("datasetId") ||
         !datasetsData?.find((e) => e.id.toString() == searchParams.get("datasetId"))) &&
-      datasetsData?.[0].id
+      datasetsData?.[0]?.id
     ) {
-      setSearchParams({ datasetId: String(datasetsData?.[0].id) });
+      setSearchParams({ datasetId: String(datasetsData?.[0]?.id) });
     }
   }, [datasetsData, searchParams, setSearchParams]);
 

src/components/pages/llmConfigs/LlmConfigModal.scss

@@ -49,7 +49,7 @@
         label {
             display: contents;
 
-            span {
+            span.title {
                 font-weight: 500;
                 color: #444;
                 text-align: right;

src/components/pages/llmConfigs/LlmConfigModal.tsx

@@ -128,12 +128,12 @@ interface LLMConfigModalProps {
           <form onSubmit={handleSubmit}>
             {isEditMode && 'id' in formData && (
               <label>
-                <span>ID:</span>
+                <span className='title'>ID:</span>
                 <input type="text" value={formData.id} disabled />
               </label>
             )}
             <label>
-              <span>Задать по-умолчанию:</span>
+              <span className='title'>Задать по-умолчанию:</span>
               <input
                 type="checkbox"
                 name="is_default"
@@ -142,7 +142,7 @@ interface LLMConfigModalProps {
               />
             </label>
             <label>
-              <span>Модель:</span>
+              <span className='title'>Модель:</span>
               <input
                 type="text"
                 name="model"
@@ -151,7 +151,7 @@ interface LLMConfigModalProps {
               />
             </label>
             <label>
-              <span>Temperature:</span>
+              <span className='title'>Temperature:</span>
               <input
                 type="number"
                 name="temperature"
@@ -161,7 +161,7 @@ interface LLMConfigModalProps {
               />
             </label>
             <label>
-              <span>Top P:</span>
+              <span className='title'>Top P:</span>
               <input
                 type="number"
                 name="top_p"
@@ -171,7 +171,7 @@ interface LLMConfigModalProps {
               />
             </label>
             <label>
-              <span>Min P:</span>
+              <span className='title'>Min P:</span>
               <input
                 type="number"
                 name="min_p"
@@ -181,7 +181,7 @@ interface LLMConfigModalProps {
               />
             </label>
             <label>
-              <span>Frequency Penalty:</span>
+              <span className='title'>Frequency Penalty:</span>
               <input
                 type="number"
                 name="frequency_penalty"
@@ -191,7 +191,7 @@ interface LLMConfigModalProps {
               />
             </label>
             <label>
-              <span>Presence Penalty:</span>
+              <span className='title'>Presence Penalty:</span>
               <input
                 type="number"
                 name="presence_penalty"
@@ -201,7 +201,7 @@ interface LLMConfigModalProps {
               />
             </label>
             <label>
-              <span>N predict:</span>
+              <span className='title'>N predict:</span>
               <input
                 type="number"
                 name="n_predict"
@@ -211,7 +211,7 @@ interface LLMConfigModalProps {
               />
             </label>
             <label>
-              <span>Seed:</span>
+              <span className='title'>Seed:</span>
               <input
                 type="number"
                 name="seed"

src/components/pages/llmPrompts/LlmPromptModal.scss

@@ -13,6 +13,7 @@
     overflow-y: auto;
     overflow-x: hidden;
 
+
     .label {
         display: flex;
         justify-content: space-between;
@@ -49,7 +50,7 @@
         label {
             display: contents;
 
-            span {
+            span.title {
                 font-weight: 500;
                 color: #444;
                 text-align: right;

src/components/pages/llmPrompts/LlmPromptModal.tsx

@@ -117,12 +117,12 @@ const LlmPromptModal: React.FC<LlmPromptModalProps> = ({
         <form onSubmit={handleSubmit}>
           {isEditMode && 'id' in formData && (
             <label>
-              <span>ID:</span>
+              <span className='title'>ID:</span>
               <input type="text" value={formData.id} disabled />
             </label>
           )}
           <label>
-            <span>Задать по-умолчанию:</span>
+            <span className='title'>Задать по-умолчанию:</span>
             <input
               type="checkbox"
               name="is_default"
@@ -131,7 +131,7 @@ const LlmPromptModal: React.FC<LlmPromptModalProps> = ({
             />
           </label>
           <label>
-            <span>Название:</span>
+            <span className='title'>Название:</span>
             <input
               type="text"
               name="name"
@@ -140,7 +140,7 @@ const LlmPromptModal: React.FC<LlmPromptModalProps> = ({
             />
           </label>
           <label>
-            <span>Текст:</span>
+            <span className='title'>Текст:</span>
             <textarea
               name="text"
               value={formData.text || ''}

src/components/pages/qePrompts/QePromptList.scss

@@ -0,0 +1,209 @@
+.qe-prompt-list {
+    padding: 20px;
+
+    .create-button {
+        margin-bottom: 20px;
+        padding: 8px 16px;
+        background-color: #007bff;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+
+        &:hover {
+            background-color: #0056b3;
+        }
+    }
+
+    .table-container {
+        width: 100%;
+        margin-top: 20px;
+        border: 1px solid #ddd;
+
+        .table-header {
+            display: flex;
+            background-color: #f2f2f2;
+            font-weight: bold;
+
+            .table-cell {
+                flex: 1;
+                padding: 8px;
+                border-right: 1px solid #ddd;
+                cursor: pointer;
+
+                &:nth-child(1) {
+                    min-width: 30px;
+                }
+
+                &:nth-child(2) {
+                    flex: 30;
+                }
+
+                &:nth-child(3) {
+                    min-width: 100px;
+                }
+
+                &:last-child {
+                    border-right: none;
+                }
+            }
+        }
+
+        .table-row {
+            display: flex;
+            border-top: 1px solid #ddd;
+
+            &:hover {
+                background-color: #f5f5f5;
+                cursor: pointer;
+            }
+
+            .table-cell {
+                flex: 1;
+                padding: 8px;
+                border-right: 1px solid #ddd;
+
+                &:nth-child(1) {
+                    min-width: 30px;
+                }
+
+                &:nth-child(2) {
+                    flex: 30;
+                }
+
+                &:nth-child(3) {
+                    min-width: 100px;
+                }
+
+                &:last-child {
+                    border-right: none;
+                    display: flex;
+                    justify-content: center;
+                }
+            }
+        }
+
+        .set-default-button,
+        .delete-button {
+            padding: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin:3px;
+        }
+
+        .delete-button {
+            background-color: #dc3545;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+
+            &:hover {
+                background-color: #c82333;
+            }
+        }
+
+        .set-default-button {
+            background-color: #28a745;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+
+            &:hover {
+                background-color: #218838;
+            }
+        }
+    }
+
+    .modal-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 1000;
+    }
+
+    .modal-content {
+        padding: 20px;
+
+        .label {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+
+            .name {
+                margin: 0;
+            }
+
+            .close-button {
+                background: none;
+                border: none;
+                cursor: pointer;
+                padding: 0;
+            }
+        }
+
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+
+            label {
+                display: flex;
+                flex-direction: column;
+                gap: 5px;
+            }
+
+            input {
+                padding: 8px;
+                border: 1px solid #ddd;
+                border-radius: 5px;
+            }
+
+            .button-group {
+                display: flex;
+                gap: 10px;
+                margin-top: 20px;
+
+                button {
+                    padding: 8px 16px;
+                    border: none;
+                    border-radius: 5px;
+                    cursor: pointer;
+
+                    &:first-child {
+                        background-color: #007bff;
+                        color: white;
+
+                        &:hover {
+                            background-color: #0056b3;
+                        }
+                    }
+
+                    &:nth-child(2) {
+                        background-color: #28a745;
+                        color: white;
+
+                        &:hover {
+                            background-color: #218838;
+                        }
+                    }
+
+                    &:last-child {
+                        background-color: #6c757d;
+                        color: white;
+
+                        &:hover {
+                            background-color: #5a6268;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/components/pages/qePrompts/QePromptList.tsx

@@ -0,0 +1,124 @@
+import { useQePrompts, } from "@/api/qePrompts/hooks";
+import { QePrompt } from "@/api/qePrompts/types";
+import React, { useState } from 'react';
+import { GoStar, GoStarFill, GoTrash } from 'react-icons/go';
+import Modal from 'react-modal';
+import './QePromptList.scss';
+import QePromptModal from './QePromptModal';
+
+
+
+Modal.setAppElement('#root');
+
+
+
+const QePromptList: React.FC = () => {
+  const { prompts, isLoading, error, createPrompt, updatePrompt, setAsDefaultPrompt, deletePrompt } = useQePrompts();
+  const [sortField, setSortField] = useState<keyof QePrompt | 'created_at'>('id');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+  const [selectedPrompt, setSelectedPrompt] = useState<QePrompt | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+
+
+  const handleSort = (field: keyof QePrompt | 'created_at') => {
+    const newDirection = sortField === field && sortDirection === 'asc' ? 'desc' : 'asc';
+    setSortField(field);
+    setSortDirection(newDirection);
+    const sortedPrompts = [...prompts].sort((a, b) => {
+      const aValue = field === 'created_at' ? a.created_at || '' : a[field];
+      const bValue = field === 'created_at' ? b.created_at || '' : b[field];
+      return newDirection === 'asc' ? (aValue > bValue ? 1 : -1) : (aValue < bValue ? 1 : -1);
+    });
+    prompts.splice(0, prompts.length, ...sortedPrompts);
+  };
+
+  const openEditModal = (prompt: QePrompt) => {
+    setSelectedPrompt(prompt);
+    setIsEditMode(true);
+    setIsModalOpen(true);
+  };
+
+  const openCreateModal = () => {
+    setSelectedPrompt(null); // Ничего не передаем, запрос будет в модалке
+    setIsEditMode(false);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setSelectedPrompt(null);
+    setIsModalOpen(false);
+  };
+
+  const handleSave = async (prompt: QePrompt | Omit<QePrompt, 'id' | 'created_at'>) => {
+    if (isEditMode && 'id' in prompt) {
+      await updatePrompt(prompt as QePrompt);
+    } else {
+      await createPrompt(prompt as Omit<QePrompt, 'id' | 'created_at'>);
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    if (window.confirm('Удаляем версию промпта?')) {
+      await deletePrompt(id);
+    }
+  };
+
+  const handleSetDefault = async (id: number) => {
+    await setAsDefaultPrompt(id);
+  };
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return (
+    <div className="qe-prompt-list">
+      <h1>Промпты Query Expansion</h1>
+      <button className="create-button" onClick={openCreateModal}>
+        Добавить промпт
+      </button>
+      <div className="table-container">
+        <div className="table-header">
+          <div className="table-cell"></div>
+          <div className="table-cell" onClick={() => handleSort('created_at')}>
+            Промпты
+          </div>
+          <div className="table-cell"></div>
+        </div>
+        {prompts.map(prompt => (
+          <div key={prompt.id} className="table-row">
+            <div className="table-cell">
+              <button
+                className="set-default-button"
+                onClick={() => handleSetDefault(prompt.id)}
+              >
+                {prompt.is_default ? <GoStarFill size={20} /> : <GoStar size={20} />}
+              </button>
+            </div>
+            <div className="table-cell" onClick={() => openEditModal(prompt)}>
+              {prompt.name}
+            </div>
+            {/* <div className="table-cell" onClick={() => openEditModal(prompt)}>
+              {prompt.created_at || 'N/A'}
+            </div> */}
+            <div className="table-cell">
+              <button className="delete-button" onClick={() => handleDelete(prompt.id)}>
+                <GoTrash size={20} />
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <QePromptModal
+        isOpen={isModalOpen}
+        onRequestClose={closeModal}
+        prompt={selectedPrompt}
+        onSave={handleSave}
+        isEditMode={isEditMode}
+      />
+    </div>
+  );
+};
+
+export default QePromptList;

src/components/pages/qePrompts/QePromptModal.scss

@@ -0,0 +1,137 @@
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+}
+
+.modal-content {
+    max-height: 80vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .label {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+
+        .name {
+            margin: 0;
+            font-size: 1.5rem;
+            color: #333;
+        }
+
+        .close-button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0;
+            color: #666;
+
+            &:hover {
+                color: #333;
+            }
+        }
+    }
+
+    form {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        gap: 15px;
+        align-items: center;
+        width: 100%;
+        box-sizing: border-box;
+
+        label {
+            display: contents;
+
+            span.title {
+                font-weight: 500;
+                color: #444;
+                text-align: right;
+                padding-right: 10px;
+            }
+
+            input {
+                max-width: 100%;
+            }
+
+            input[type="text"],
+            input[type="number"] {
+                padding: 8px 12px;
+                border: 1px solid #ccc;
+                border-radius: 5px;
+                font-size: 1rem;
+                color: #333;
+                background-color: #f9f9f9;
+                transition: border-color 0.2s;
+
+                &:focus {
+                    border-color: #007bff;
+                    outline: none;
+                    background-color: #fff;
+                }
+
+                &:disabled {
+                    background-color: #e9ecef;
+                    color: #666;
+                }
+            }
+
+            input[type="checkbox"] {
+                width: 20px;
+                height: 20px;
+                margin: 0;
+                cursor: pointer;
+            }
+        }
+
+        .button-group {
+            grid-column: span 2;
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            margin-top: 20px;
+
+            button {
+                padding: 10px 20px;
+                border: none;
+                border-radius: 5px;
+                font-size: 1rem;
+                cursor: pointer;
+                transition: background-color 0.2s;
+
+                &:first-child {
+                    background-color: #007bff;
+                    color: white;
+
+                    &:hover {
+                        background-color: #0056b3;
+                    }
+                }
+
+                &:nth-child(2) {
+                    background-color: #28a745;
+                    color: white;
+
+                    &:hover {
+                        background-color: #218838;
+                    }
+                }
+
+                &:last-child {
+                    background-color: #6c757d;
+                    color: white;
+
+                    &:hover {
+                        background-color: #5a6268;
+                    }
+                }
+            }
+        }
+    }
+}

src/components/pages/qePrompts/QePromptModal.tsx

@@ -0,0 +1,159 @@
+import { fetchDefaultQePrompt, fetchQePromptById } from '@/api/qePrompts/qePromptApi';
+import { QePrompt } from '@/api/qePrompts/types';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+import { GoX } from 'react-icons/go';
+import Modal from 'react-modal';
+import './QePromptModal.scss';
+
+interface QePromptModalProps {
+  isOpen: boolean;
+  onRequestClose: () => void;
+  prompt: QePrompt | null;
+  onSave: (prompt: QePrompt | Omit<QePrompt, 'id' | 'created_at'>) => Promise<void>;
+  isEditMode: boolean;
+}
+
+const customStyles = {
+  content: {
+    top: '40%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    transform: 'translate(-50%, -50%)',
+    borderRadius: '15px',
+    maxWidth: '100%',
+    overflow: 'hidden',
+  },
+};
+
+const QePromptModal: React.FC<QePromptModalProps> = ({
+  isOpen,
+  onRequestClose,
+  prompt,
+  onSave,
+  isEditMode,
+}) => {
+  const [formData, setFormData] = React.useState<QePrompt | Omit<QePrompt, 'id' | 'created_at'>>(() => ({
+    is_default: false,
+    name: 'Промпт ' + Date.now().toLocaleString(),
+    text: "",
+    type: 'query_expansion'
+  }));
+
+  // Запрос промпта для редактирования
+  const { data: serverPrompt, isLoading: isPromptLoading } = useQuery({
+    queryKey: ['qePrompt', prompt?.id],
+    queryFn: () => fetchQePromptById(prompt!.id),
+    enabled: isOpen && isEditMode && !!prompt?.id,
+  });
+
+  // Запрос дефолтного промпта для создания
+  const { data: defaultPrompt, isLoading: isDefaultLoading } = useQuery({
+    queryKey: ['defaultQePrompt'],
+    queryFn: fetchDefaultQePrompt,
+    enabled: isOpen && !isEditMode, // Запрашиваем только при создании
+  });
+
+  React.useEffect(() => {
+    if (isOpen) {
+      if (isEditMode && serverPrompt) {
+        setFormData(serverPrompt); // Данные с сервера для редактирования
+      } else if (!isEditMode && defaultPrompt) {
+        setFormData(defaultPrompt); // Дефолтная запись с сервера для создания
+      } else if (!isEditMode && !defaultPrompt && !isDefaultLoading) {
+        setFormData({ // Если дефолтной записи нет и загрузка завершена
+          is_default: true,
+          name: 'Промпт ' + Date.now().toLocaleString(),
+          text: "",
+          type: 'query_expansion'
+        });
+      }
+    }
+  }, [isOpen, isEditMode, serverPrompt, defaultPrompt, isDefaultLoading]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]:
+        name === 'is_default' ? (e.target as HTMLInputElement).checked :
+          name === 'text' || name === 'name'  ? value :
+              parseFloat(value) || 0,
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await onSave(formData);
+      onRequestClose();
+    } catch (err) {
+      console.error('Save failed:', err);
+    }
+  };
+
+  if (isPromptLoading && isEditMode) {
+    return <div>Loading prompt...</div>;
+  }
+  if (isDefaultLoading && !isEditMode) {
+    return <div>Loading default prompt...</div>;
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      style={customStyles}
+      overlayClassName="modal-overlay"
+    >
+      <div className="modal-content">
+        <div className="label">
+          <h3 className="name">{isEditMode ? 'Редактирование промпта' : 'Новый промпт'}</h3>
+          <button className="close-button" onClick={onRequestClose}>
+            <GoX style={{ height: '25px', width: '25px' }} />
+          </button>
+        </div>
+        <form onSubmit={handleSubmit}>
+          {isEditMode && 'id' in formData && (
+            <label>
+              <span className='title'>ID:</span>
+              <input type="text" value={formData.id} disabled />
+            </label>
+          )}
+          <label>
+            <span className='title'>Задать по-умолчанию:</span>
+            <input
+              type="checkbox"
+              name="is_default"
+              checked={formData.is_default}
+              onChange={handleChange}
+            />
+          </label>
+          <label>
+            <span className='title'>Название:</span>
+            <input
+              type="text"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+            />
+          </label>
+          <label>
+            <span className='title'>Текст:</span>
+            <textarea
+              name="text"
+              value={formData.text || ''}
+              onChange={handleChange}
+            />
+          </label>
+          <div className="button-group">
+            <button type="submit">{isEditMode ? 'Сохранит��' : 'Создать'}</button>
+          </div>
+        </form>
+      </div>
+    </Modal>
+  );
+};
+
+export default QePromptModal;

src/components/views/documents/docsList/DocsList.tsx

@@ -21,9 +21,9 @@ export const DocsList: FC<DocsListProps> = ({ datasetId, handleDeleteFile }) =>
   const [searchInput, setSearchInput] = useState<string | undefined>(undefined);
   const [search, setSearch] = useState<string | undefined>(undefined);
   const [sort, setSort] = useState<undefined | { field: string; direction: SortDirections }[]>(undefined);
-
+ 
   const { data: datasetData, isFetching } = useGetDataset(datasetId ?? -1, { page, page_size: pageSize, search, sort });
-
+  
   const toggleSort = (field: string) => {
     setSort((prevSort) => {
       if (prevSort?.length && prevSort?.length > 0) {