Spaces:

muryshev
/

generic-chatbot-admin

Sleeping

App Files Files Community

muryshev commited on Mar 31

Commit

79278ec

1 Parent(s): 3c616c4

init

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.dockerignore +6 -0
.gitignore +24 -0
Dockerfile +25 -0
README.md +3 -3
devops/nginx.default.conf +23 -0
eslint.config.js +28 -0
index.html +12 -0
package-lock.json +0 -0
package.json +49 -0
public/pdf.worker.mjs +0 -0
src/App.css +13 -0
src/App.tsx +33 -0
src/api/documents/documentsApi.ts +170 -0
src/api/documents/hooks.ts +121 -0
src/api/documents/types.ts +67 -0
src/api/llmConfigs/hooks.ts +49 -0
src/api/llmConfigs/llmConfigApi.ts +79 -0
src/api/llmConfigs/types.ts +14 -0
src/api/llmPrompts/hooks.ts +49 -0
src/api/llmPrompts/llmPromptApi.ts +79 -0
src/api/llmPrompts/types.ts +9 -0
src/api/predictions/hooks.ts +143 -0
src/api/predictions/predictionsApi.ts +159 -0
src/api/predictions/types.ts +159 -0
src/components/common/navbar/Navbar.scss +36 -0
src/components/common/navbar/Navbar.tsx +46 -0
src/components/generics/button/Button.interface.ts +11 -0
src/components/generics/button/Button.scss +70 -0
src/components/generics/button/Button.tsx +23 -0
src/components/generics/collapse/Collapse.inreface.ts +8 -0
src/components/generics/collapse/Collapse.scss +40 -0
src/components/generics/collapse/Collapse.tsx +22 -0
src/components/generics/dropdown/Dropdown.interface.ts +4 -0
src/components/generics/dropdown/Dropdown.scss +21 -0
src/components/generics/dropdown/Dropdown.tsx +14 -0
src/components/generics/editable/Editable.interface.ts +10 -0
src/components/generics/editable/Editable.scss +31 -0
src/components/generics/editable/Editable.tsx +112 -0
src/components/generics/input/Input.interface.ts +13 -0
src/components/generics/input/Input.scss +34 -0
src/components/generics/input/Input.tsx +77 -0
src/components/generics/loading/Loading.tsx +23 -0
src/components/generics/modal/Modal.interface.ts +6 -0
src/components/generics/modal/Modal.scss +9 -0
src/components/generics/modal/Modal.tsx +34 -0
src/components/generics/sizeChanger/SizeChanger.scss +31 -0
src/components/generics/sizeChanger/SizeChanger.tsx +38 -0
src/components/generics/sizeChanger/SizeChangerProps.ts +6 -0
src/components/generics/spinner/Spinner.scss +14 -0
src/components/generics/spinner/Spinner.tsx +7 -0

.dockerignore ADDED Viewed

	@@ -0,0 +1,6 @@

+.env
+desktop.ini
+*.bat
+/logs
+/build
+/node_modules

.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Dockerfile ADDED Viewed

	@@ -0,0 +1,25 @@

+# Build
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY package.json ./
+COPY package-lock.json* ./
+RUN npm ci
+COPY . .
+ARG VITE_API_BASE_URL=https://muryshev-generic-chatbot-backend.hf.space
+ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
+RUN npm run build
+# Production
+FROM nginx:alpine
+WORKDIR /usr/share/nginx/html
+COPY --from=builder /app/dist .
+COPY devops/nginx.default.conf /etc/nginx/conf.d/default.conf
+ENV PORT=7860
+EXPOSE ${PORT}
+CMD ["nginx", "-g", "daemon off;"]

README.md CHANGED Viewed

@@ -1,10 +1,10 @@
 ---
 title: Generic Chatbot Admin
 emoji: 😻
-colorFrom: gray
-colorTo: red
 sdk: docker
-pinned: false
 ---
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Generic Chatbot Admin
 emoji: 😻
+colorFrom: red
+colorTo: green
 sdk: docker
+pinned: true
 ---
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

devops/nginx.default.conf ADDED Viewed

	@@ -0,0 +1,23 @@

+server {
+    listen       80 default_server;
+    server_name  _;
+    root   /usr/share/nginx/html;
+    index  index.html;
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    location = /favicon.ico {
+        log_not_found off;
+        access_log off;
+    }
+    location = /robots.txt {
+        log_not_found off;
+        access_log off;
+    }
+    error_page 404 /index.html;
+}

eslint.config.js ADDED Viewed

	@@ -0,0 +1,28 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

index.html ADDED Viewed

	@@ -0,0 +1,12 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Чат бот</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,49 @@

+{
+  "name": "nmd-front",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource/fira-mono": "^5.0.14",
+    "@reduxjs/toolkit": "^2.3.0",
+    "@tanstack/react-query": "^5.54.1",
+    "@tanstack/react-query-devtools": "^5.54.1",
+    "axios": "^1.7.4",
+    "react": "^18.3.1",
+    "react-contenteditable": "^3.3.7",
+    "react-datepicker": "^7.3.0",
+    "react-dom": "^18.3.1",
+    "react-flip-move": "^3.0.5",
+    "react-icons": "^5.3.0",
+    "react-modal": "^3.16.1",
+    "react-pdf": "^9.2.1",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.26.2",
+    "react-select": "^5.9.0",
+    "sanitize-html": "^2.13.1",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@types/node": "^22.4.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-modal": "^3.16.3",
+    "@types/sanitize-html": "^2.13.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "sass-embedded": "^1.77.8",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1"
+  }
+}

public/pdf.worker.mjs ADDED Viewed

The diff for this file is too large to render. See raw diff

src/App.css ADDED Viewed

	@@ -0,0 +1,13 @@

+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+.header {
+  font-size: 20px;
+  text-align: left;
+  padding-left: 10px;
+  font-weight: 600;
+}

src/App.tsx ADDED Viewed

	@@ -0,0 +1,33 @@

+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 LLMConfigList from "./components/pages/llmConfigs/LlmConfigList";
+import LlmPromptList from "./components/pages/llmPrompts/LlmPromptList";
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  "pdfjs-dist/build/pdf.worker.min.mjs",
+  import.meta.url
+).toString();
+function App() {
+  return (
+    <Router>
+      <Navbar />
+        <Routes>
+          {/* <Route path="" element={<Page />} /> */}
+          <Route path="/logs" element={<Logs />} />
+          {/* <Route path="/test" element={<TestPage />} /> */}
+          <Route path="/docs" element={<Vectorization />} />
+          <Route path="/llmconfig" element={<LLMConfigList />} />
+          <Route path="/llmprompt" element={<LlmPromptList />} />
+          {/* <Route path="/" element={<Navigate to="/logs" />} /> */}
+        </Routes>
+    </Router>
+  );
+}
+export default App;

src/api/documents/documentsApi.ts ADDED Viewed

	@@ -0,0 +1,170 @@

+import {
+  DatasetDataType,
+  DatasetInfoDataType,
+  DatasetsResponseType,
+  GetDatasetRequestParams,
+  GetProcessingRequest,
+} from "./types";
+import { downloadFile } from "@/shared/utils/downloadFile";
+import { query } from "@/shared/api/query";
+export const getDatasets = async (): Promise<DatasetsResponseType> => {
+  const response = await query<DatasetsResponseType>({
+    url: "/datasets/",
+    method: "get",
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const createDataset = async (data: FormData): Promise<DatasetDataType> => {
+  const response = await query<DatasetDataType>({
+    url: "/datasets/",
+    method: "post",
+    data,
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const activateDataset = async (id: number): Promise<DatasetDataType> => {
+  const response = await query<DatasetDataType>({
+    url: `/datasets/${id}`,
+    method: "post",
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const getDataset = async (id: number, params: GetDatasetRequestParams): Promise<DatasetDataType> => {
+  const requestParams = { ...params, sort: undefined };
+  const sortParam: string[] = [];
+  if (params.sort) {
+    params.sort.forEach((element) => {
+      if (element.field && element.direction) {
+        sortParam.push(`${element.field}:${element.direction}`);
+      }
+    });
+  }
+  const response = await query<DatasetDataType>({
+    url: `/datasets/${id}`,
+    method: "get",
+    params: { ...requestParams, sort: sortParam.length > 0 ? sortParam.join(",") : undefined },
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const createDatasetsDraft = async (id: number): Promise<DatasetInfoDataType> => {
+  const response = await query<DatasetInfoDataType>({
+    url: `/datasets/${id}/edit`,
+    method: "post",
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const deleteDataset = async (id: number): Promise<void> => {
+  const response = await query<void>({
+    url: `/datasets/${id}`,
+    method: "delete",
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const addFileToDataset = async (id: number, data: FormData): Promise<void> => {
+  const response = await query<void>({
+    url: `/datasets/${id}/documents/`,
+    method: "post",
+    data,
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const deleteFileFromDataset = async (datasetId: number, fileId: number): Promise<void> => {
+  const response = await query<void>({
+    url: `/datasets/${datasetId}/documents/${fileId}`,
+    method: "delete",
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const getProcessing = async (): Promise<GetProcessingRequest> => {
+  const response = await query<GetProcessingRequest>({
+    url: "/datasets/processing",
+    method: "get",
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const downloadDocument = async (
+  datasetId: number | null,
+  fileId: string,
+  filename: string
+): Promise<Blob> => {
+  const response = await query<Blob>({
+    url: `/datasets/${datasetId}/documents/${fileId}`,
+    method: "get",
+    responseType: "blob",
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  downloadFile(response, filename);
+  return response.data;
+};
+export const getDocumentPdf = async (
+  datasetId: number | null,
+  fileId: string,
+  filename: string
+): Promise<{ file: Blob; filename: string }> => {
+  const response = await query<Blob>({
+    url: `/datasets/${datasetId}/documents/${fileId}/pdf`,
+    method: "get",
+    responseType: "blob",
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  return { file: response.data, filename };
+};

src/api/documents/hooks.ts ADDED Viewed

	@@ -0,0 +1,121 @@

+import { useMutation, useQuery } from "@tanstack/react-query";
+import {
+  activateDataset,
+  addFileToDataset,
+  createDataset,
+  createDatasetsDraft,
+  deleteDataset,
+  deleteFileFromDataset,
+  getDataset,
+  getDatasets,
+  getProcessing,
+} from "./documentsApi";
+import { GetDatasetRequestParams } from "./types";
+import { queryClient } from "@/main";
+export const useGetDatasets = () => {
+  return useQuery({
+    queryKey: ["datasets"],
+    queryFn: async () => {
+      const response = await getDatasets();
+      return response;
+    },
+  });
+};
+export const useCreateDataset = () => {
+  return useMutation({
+    mutationFn: async (data: FormData) => {
+      const response = await createDataset(data);
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["datasets"] });
+    },
+  });
+};
+export const useActivateDataset = () => {
+  return useMutation({
+    mutationFn: async (id: number) => {
+      const response = await activateDataset(id);
+      return response;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["processing"] });
+      queryClient.invalidateQueries({ queryKey: ["datasets"] });
+      queryClient.invalidateQueries({ queryKey: ["dataset", data.id] });
+    },
+  });
+};
+export const useGetDataset = (id: number, params: GetDatasetRequestParams) => {
+  return useQuery({
+    queryKey: ["dataset", id, params],
+    queryFn: async () => {
+      const response = await getDataset(id, params);
+      return response;
+    },
+  });
+};
+export const useCreateDatasetsDraft = () => {
+  return useMutation({
+    mutationFn: async (id: number) => {
+      const response = await createDatasetsDraft(id);
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["datasets"] });
+      queryClient.invalidateQueries({ queryKey: ["dataset"] });
+    },
+  });
+};
+export const useDeleteDataset = () => {
+  return useMutation({
+    mutationFn: async (id: number) => {
+      const response = await deleteDataset(id);
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["datasets"] });
+    },
+  });
+};
+export const useAddFileToDataset = () => {
+  return useMutation({
+    mutationFn: async ({ id, data }: { id: number; data: FormData }) => {
+      const response = await addFileToDataset(id, data);
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["datasets"] });
+      queryClient.invalidateQueries({ queryKey: ["dataset"] });
+    },
+  });
+};
+export const useDeleteFileFromDataset = () => {
+  return useMutation({
+    mutationFn: async ({ datasetId, fileId }: { datasetId: number; fileId: number }) => {
+      const response = await deleteFileFromDataset(datasetId, fileId);
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["datasets"] });
+      queryClient.invalidateQueries({ queryKey: ["dataset"] });
+    },
+  });
+};
+export const useGetProcessing = () => {
+  return useQuery({
+    queryKey: ["processing"],
+    queryFn: async () => {
+      const response = await getProcessing();
+      return response;
+    },
+  });
+};

src/api/documents/types.ts ADDED Viewed

	@@ -0,0 +1,67 @@

+export type DatasetInfoDataType = {
+  id: number;
+  dateCreated: string; //2024-12-02
+  name: string;
+  isDraft: boolean;
+  isActive: boolean;
+};
+export type DatasetsResponseType = DatasetInfoDataType[];
+export type CreateDatasetRequestType = {
+  zip: File; //проверить
+};
+export type DatasetDataType = DatasetInfoDataType & {
+  data: PaginationType & {
+    page: FileDataType[];
+  };
+};
+export type PaginationType = {
+  total: number;
+  pageNumber: number;
+  pageSize: number;
+};
+export enum FileStatus {
+  "Актуален" = "Актуален",
+  "Требует актуализации" = "Требует актуализации",
+  "Упразднён" = "Упразднён",
+}
+export type FileDataType = {
+  id: number;
+  name: string;
+  owner: string;
+  status: FileStatus;
+};
+export type AddDocumentRequest = {
+  document: File;
+};
+export enum SortDirections {
+  asc = "asc",
+  desc = "desc",
+}
+export type GetDatasetRequestParams = {
+  page: number;
+  search?: string;
+  page_size?: number;
+  sort?: { field: string; direction: SortDirections }[];
+};
+export enum ProcessingStatus {
+  ready = "ready",
+  in_progress = "in_progress",
+}
+export type GetProcessingRequest = {
+  status: ProcessingStatus;
+  datasetName: string;
+  current: number;
+  total: number;
+  ready: number;
+};

src/api/llmConfigs/hooks.ts ADDED Viewed

	@@ -0,0 +1,49 @@

+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { fetchLLMConfigs, createLLMConfig, updateLLMConfig, setDefaultLLMConfig, deleteLLMConfig } from './llmConfigApi';
+export const useLLMConfigs = () => {
+  const queryClient = useQueryClient();
+  const { data: configs = [], isLoading, error } = useQuery({
+    queryKey: ['llmConfigs'],
+    queryFn: fetchLLMConfigs,
+  });
+  const createMutation = useMutation({
+    mutationFn: createLLMConfig,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['llmConfigs'] });
+    },
+  });
+  const updateMutation = useMutation({
+    mutationFn: updateLLMConfig,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['llmConfigs'] });
+    },
+  });
+  const setDefaultMutation = useMutation({
+    mutationFn: setDefaultLLMConfig,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['llmConfigs'] });
+    },
+  });
+  const deleteMutation = useMutation({
+    mutationFn: deleteLLMConfig,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['llmConfigs'] });
+    },
+  });
+  return {
+    configs,
+    isLoading,
+    error: error ? (error instanceof Error ? error.message : 'Failed to fetch configurations') : null,
+    createConfig: createMutation.mutateAsync,
+    updateConfig: updateMutation.mutateAsync,
+    setAsDefaultConfig: setDefaultMutation.mutateAsync,
+    deleteConfig: deleteMutation.mutateAsync,
+  };
+};

src/api/llmConfigs/llmConfigApi.ts ADDED Viewed

	@@ -0,0 +1,79 @@

+import { query } from '@/shared/api/query';
+import { LLMConfig } from './types';
+export const fetchLLMConfigs = async (): Promise<LLMConfig[]> => {
+  const response = await query<LLMConfig[]>({
+    url: '/llm_config/',
+    method: 'get',
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка получения конфигураций: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const fetchLLMConfigById = async (id: number): Promise<LLMConfig> => {
+  const response = await query<LLMConfig>({
+    url: `/llm_config/${id}`,
+    method: 'get',
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка получения конфигурации: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const createLLMConfig = async (config: Omit<LLMConfig, 'id' | 'created_at'>): Promise<LLMConfig> => {
+  const response = await query<LLMConfig>({
+    url: '/llm_config/',
+    method: 'post',
+    data: config,
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка создания конфигурации: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const updateLLMConfig = async (config: LLMConfig): Promise<void> => {
+  const response = await query<void>({
+    url: `/llm_config/${config.id}`,
+    method: 'put',
+    data: config,
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка обновления конфигурации: ${response.error.status}`);
+  }
+};
+export const setDefaultLLMConfig = async (id: number): Promise<void> => {
+  const response = await query<void>({
+    url: `/llm_config/default/${id}`,
+    method: 'put',
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка установки конфигурации по умолчанию: ${response.error.status}`);
+  }
+};
+export const deleteLLMConfig = async (id: number): Promise<void> => {
+  const response = await query<void>({
+    url: `/llm_config/${id}`,
+    method: 'delete',
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка удаления конфигурации: ${response.error.status}`);
+  }
+};
+export const fetchDefaultLLMConfig = async (): Promise<LLMConfig | null> => {
+  const response = await query<LLMConfig>({
+    url: '/llm_config/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/llmConfigs/types.ts ADDED Viewed

	@@ -0,0 +1,14 @@

+// src/api/llm_configs/types.ts
+export interface LLMConfig {
+  id: number;
+  is_default: boolean;
+  model: string;
+  temperature: number;
+  top_p: number;
+  min_p: number;
+  frequency_penalty: number;
+  presence_penalty: number;
+  n_predict: number;
+  seed: number;
+  created_at?: string;
+}

src/api/llmPrompts/hooks.ts ADDED Viewed

	@@ -0,0 +1,49 @@

+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { fetchLlmPrompts, createLlmPrompt, updateLlmPrompt, setDefaultLlmPrompt, deleteLlmPrompt } from './llmPromptApi';
+export const useLlmPrompts = () => {
+  const queryClient = useQueryClient();
+  const { data: prompts = [], isLoading, error } = useQuery({
+    queryKey: ['llmPrompts'],
+    queryFn: fetchLlmPrompts,
+  });
+  const createMutation = useMutation({
+    mutationFn: createLlmPrompt,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['llmPrompts'] });
+    },
+  });
+  const updateMutation = useMutation({
+    mutationFn: updateLlmPrompt,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['llmPrompts'] });
+    },
+  });
+  const setDefaultMutation = useMutation({
+    mutationFn: setDefaultLlmPrompt,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['llmPrompts'] });
+    },
+  });
+  const deleteMutation = useMutation({
+    mutationFn: deleteLlmPrompt,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['llmPrompts'] });
+    },
+  });
+  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/llmPrompts/llmPromptApi.ts ADDED Viewed

	@@ -0,0 +1,79 @@

+import { query } from '@/shared/api/query';
+import { LlmPrompt } from './types';
+export const fetchLlmPrompts = async (): Promise<LlmPrompt[]> => {
+  const response = await query<LlmPrompt[]>({
+    url: '/llm_prompt/',
+    method: 'get',
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка получения промптов: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const fetchLlmPromptById = async (id: number): Promise<LlmPrompt> => {
+  const response = await query<LlmPrompt>({
+    url: `/llm_prompt/${id}`,
+    method: 'get',
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка получения промпта: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const createLlmPrompt = async (config: Omit<LlmPrompt, 'id' | 'created_at'>): Promise<LlmPrompt> => {
+  const response = await query<LlmPrompt>({
+    url: '/llm_prompt/',
+    method: 'post',
+    data: config,
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка создания промпта: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const updateLlmPrompt = async (config: LlmPrompt): Promise<void> => {
+  const response = await query<void>({
+    url: `/llm_prompt/${config.id}`,
+    method: 'put',
+    data: config,
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка обновления промпта: ${response.error.status}`);
+  }
+};
+export const setDefaultLlmPrompt = async (id: number): Promise<void> => {
+  const response = await query<void>({
+    url: `/llm_prompt/default/${id}`,
+    method: 'put',
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка установки промпта по умолчанию: ${response.error.status}`);
+  }
+};
+export const deleteLlmPrompt = async (id: number): Promise<void> => {
+  const response = await query<void>({
+    url: `/llm_prompt/${id}`,
+    method: 'delete',
+  });
+  if ('error' in response) {
+    throw new Error(`Ошибка удаления промпта: ${response.error.status}`);
+  }
+};
+export const fetchDefaultLlmPrompt = async (): Promise<LlmPrompt | null> => {
+  const response = await query<LlmPrompt>({
+    url: '/llm_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/llmPrompts/types.ts ADDED Viewed

	@@ -0,0 +1,9 @@

+// src/api/llm_configs/types.ts
+export interface LlmPrompt {
+  id: number;
+  is_default: boolean;
+  text: string;
+  name: string;
+  type: string;
+  created_at?: string;
+}

src/api/predictions/hooks.ts ADDED Viewed

	@@ -0,0 +1,143 @@

+import { useMutation, UseMutationResult, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRef } from "react";
+import {
+  LlmResponseType,
+  LlmRequestType,
+  ChunksResponseType,
+  ChunksArrayItem,
+  ChunkRequestType,
+  FeedbackRequestType,
+  LogRequestType,
+} from "./types";
+import { getLlmResponse, getChunks, postFeedback, getLogs, getAbbreviations } from "./predictionsApi";
+export function useGetLlmResponse() {
+  const queryClient = useQueryClient();
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const cancelQuery = () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    queryClient.cancelQueries({ queryKey: ["llm"] });
+  };
+  const mutation: UseMutationResult<LlmResponseType | undefined, Error, LlmRequestType, unknown> = useMutation({
+    mutationFn: async (data: LlmRequestType) => {
+      // Отменить предыдущий запрос
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+      try {
+        const response = await getLlmResponse(data, abortController.signal);
+        return response;
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") {
+          console.log("Запрос был отменен");
+          return undefined;
+        } else {
+          throw error;
+        }
+      } finally {
+        if (abortControllerRef.current === abortController) {
+          abortControllerRef.current = null;
+        }
+      }
+    },
+    onSuccess: () => {},
+    onError: () => {},
+  });
+  return { mutation, cancelQuery };
+}
+export function useGetChunks() {
+  const queryClient = useQueryClient();
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const cancelQuery = () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    queryClient.cancelQueries({ queryKey: ["predictions"] });
+  };
+  const mutation: UseMutationResult<
+    { chunks: ChunksResponseType; chunksArray: ChunksArrayItem[] } | undefined,
+    Error,
+    ChunkRequestType,
+    unknown
+  > = useMutation({
+    mutationFn: async (data: ChunkRequestType) => {
+      // Отменить предыдущий запрос
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+      try {
+        const response = await getChunks(data, abortController.signal);
+        return response;
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") {
+          console.log("Запрос был отменен");
+          return undefined;
+        } else {
+          throw error;
+        }
+      } finally {
+        if (abortControllerRef.current === abortController) {
+          abortControllerRef.current = null;
+        }
+      }
+    },
+    onSuccess: () => {
+      // if (chunksData) {
+      //   llmMutation.mutate({ query: query, chunks: chunksData });
+      // }
+    },
+    onError: () => {},
+  });
+  return { mutation, cancelQuery };
+}
+export const usePostFeedback = () => {
+  return useMutation({
+    mutationFn: async (data: FeedbackRequestType) => {
+      const response = await postFeedback(data);
+      return response;
+    },
+    onSuccess: () => {},
+    onError: () => {},
+  });
+};
+export const useGetLogs = () => {
+  return useMutation({
+    mutationKey: ["logs"],
+    mutationFn: async (data: LogRequestType | undefined) => {
+      const response = await getLogs(data);
+      return response;
+    },
+  });
+};
+export const useGetAbbreviations = () => {
+  return useQuery({
+    queryKey: ["abbreviations"],
+    queryFn: async () => {
+      const response = await getAbbreviations();
+      return response;
+    },
+  });
+};

src/api/predictions/predictionsApi.ts ADDED Viewed

	@@ -0,0 +1,159 @@

+import { query } from "@/shared/api/query";
+import axios from "axios";
+import { parseDocumetnsInLlmAnswer } from "@/shared/utils/parseDocumnetsInLlmAnswer";
+import {
+  ChunkRequestType,
+  ChunksResponseType,
+  ChunksArrayItem,
+  ChunkType,
+  LlmRequestType,
+  LlmResponseType,
+  FeedbackRequestType,
+  FeedbackResponseType,
+  LogRequestType,
+  LogResponseType,
+  AbbreviationsDataType,
+  AbbreviationsResponseDataType,
+} from "./types";
+export const getChunks = async (
+  data: ChunkRequestType,
+  signal: AbortSignal
+): Promise<{ chunks: ChunksResponseType; chunksArray: ChunksArrayItem[] }> => {
+  const response = await query<ChunksResponseType>({
+    url: "/chunks",
+    method: "post",
+    data,
+    signal,
+  });
+  if ("error" in response) {
+    if (axios.isCancel(response.error)) {
+      console.log("Запроса был отменен");
+    }
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  const chunksArray: ChunksArrayItem[] = [];
+  // Проверки на null добавлены для корретной сквозной нумерации результатов в случае,
+  // если чанков одного типа не пришло с бэка
+  if (response.data.doc_chunks !== null) {
+    response.data.doc_chunks?.forEach((element) => {
+      chunksArray.push({
+        type: ChunkType.doc_chunks,
+        number: chunksArray.length,
+        chunk: { doc_chunks: element },
+      });
+    });
+  }
+  if (response.data.people_search !== null) {
+    response.data.people_search?.forEach((element) => {
+      chunksArray.push({
+        type: ChunkType.people_search,
+        number: chunksArray.length,
+        chunk: { people_search: element },
+      });
+    });
+  }
+  if (response.data.groups_search !== null) {
+    chunksArray.push({
+      type: ChunkType.groups_search,
+      number: chunksArray.length,
+      chunk: { groups_search: response.data.groups_search },
+    });
+  }
+  if (response.data.rocks_nn_search !== null) {
+    chunksArray.push({
+      type: ChunkType.rocks_nn_search,
+      number: chunksArray.length,
+      chunk: { rocks_nn_search: response.data.rocks_nn_search },
+    });
+  }
+  if (response.data.segmentation_search !== null) {
+    chunksArray.push({
+      type: ChunkType.segmentation_search,
+      number: chunksArray.length,
+      chunk: { segmentation_search: response.data.segmentation_search },
+    });
+  }
+  return { chunks: response.data, chunksArray };
+};
+export const getLlmResponse = async (
+  data: LlmRequestType,
+  signal: AbortSignal
+): Promise<LlmResponseType> => {
+  const response = await query<LlmResponseType>({
+    url: "/answer_llm",
+    method: "post",
+    data: { query: data.query, chunks: data.chunks },
+    signal,
+  });
+  if ("error" in response) {
+    if (axios.isCancel(response.error)) {
+      console.log("Запроса был отменен");
+    }
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  const { matches, resultString } = parseDocumetnsInLlmAnswer(
+    response.data.answer_llm,
+    data.chunksArray
+  );
+  return {
+    answer_llm: resultString,
+    log_id: response.data.log_id,
+    documentsNumbers: matches,
+  };
+};
+export const postFeedback = async (
+  data: FeedbackRequestType
+): Promise<FeedbackResponseType> => {
+  const response = await query<FeedbackResponseType>({
+    url: "/feedback",
+    method: "post",
+    data,
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const getLogs = async (
+  data: LogRequestType | undefined
+): Promise<LogResponseType[]> => {
+  const response = await query<LogResponseType[]>({
+    url: "/logs",
+    method: "get",
+    params: data,
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  return response.data;
+};
+export const getAbbreviations = async (): Promise<AbbreviationsDataType> => {
+  const response = await query<AbbreviationsResponseDataType>({
+    url: "/collection/default",
+    method: "get",
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  return response.data.acronyms;
+};

src/api/predictions/types.ts ADDED Viewed

	@@ -0,0 +1,159 @@

+export type UserScore = 1 | 2 | 3 | 4 | 5;
+export interface DocumentDataType {
+  file_xml_name: string;
+  filename: string;
+  id: string | null;
+  title: string | null;
+  chunks: ChunkDataType[];
+}
+export interface ChunkDataType {
+  index_answer: number;
+  doc_name: string;
+  title: string;
+  text_answer: string;
+  other_info: string[];
+  start_index_paragraph: number;
+}
+export interface BusinessCuratorDataType {
+  division: string;
+  company_name: string;
+}
+export interface BusinessProcessDataType {
+  production_activities_section: string;
+  processes_name: string;
+  level_process: string;
+}
+export interface GroupDataType {
+  group_name: string;
+  position_in_group: string;
+  block: string;
+}
+export interface OrganizatinalStructureDataType {
+  position: string;
+  leads:
+    | {
+        person: string;
+        leads: string;
+      }[]
+    | null;
+  subordinates: {
+    person_name: string | undefined;
+    position: string | undefined;
+  } | null;
+}
+export interface PeopleDataType {
+  person_name: string;
+  business_curator: BusinessCuratorDataType[] | null;
+  business_processes: BusinessProcessDataType[] | null;
+  groups: GroupDataType[] | null;
+  organizatinal_structure: OrganizatinalStructureDataType[] | null;
+}
+export interface RocksNNDataType {
+  division: string;
+  company_name: string[];
+}
+export interface ChunksResponseType {
+  doc_chunks: DocumentDataType[] | null;
+  people_search: PeopleDataType[] | null;
+  groups_search: GroupSearchDataType | null;
+  rocks_nn_search: RocksNNDataType | null;
+  segmentation_search: SegmentationModelDataType | null;
+}
+export enum ChunkType {
+  doc_chunks = "doc_chunks",
+  people_search = "people_search",
+  groups_search = "groups_search",
+  rocks_nn_search = "rocks_nn_search",
+  segmentation_search = "segmentation_search",
+}
+export interface ChunksArrayItem {
+  type: ChunkType;
+  number: number;
+  chunk: Partial<{
+    doc_chunks: DocumentDataType | null;
+    people_search: PeopleDataType | null;
+    groups_search: GroupSearchDataType | null;
+    rocks_nn_search: RocksNNDataType | null;
+    segmentation_search: SegmentationModelDataType | null;
+  }>;
+}
+export interface LlmResponseType {
+  text_chunks?: string; //TODO: убрать, тк созданно для тестирования
+  documentsNumbers?: number[];
+  answer_llm: string;
+  log_id: number;
+}
+export interface ChunkRequestType {
+  userName: string;
+  query: string;
+  query_abbreviation: string;
+  abbreviations_replaced: string[];
+}
+export interface LlmRequestType {
+  query: ChunkRequestType;
+  chunks: ChunksResponseType;
+  chunksArray: ChunksArrayItem[];
+}
+export interface FeedbackRequestType {
+  log_id: number;
+  userComment: string;
+  userScore: UserScore;
+  manualEstimate: number;
+  llmEstimate: number;
+}
+export interface FeedbackResponseType extends FeedbackRequestType {
+  feedback_id: number;
+}
+export interface LogResponseType {
+  log_id: number;
+  llmPrompt: string;
+  llmResponse: string;
+  llm_classifier: string;
+  dateCreated: string;
+  userRequest: string;
+  feedback_id: number | null;
+  userComment: string | null;
+  userScore: UserScore | null;
+}
+export interface LogRequestType {
+  date_start?: string;
+  date_end?: string;
+}
+export interface GroupSearchDataType {
+  group_name: string;
+  group_composition: {
+    person_name: string;
+    position_in_group: string;
+  }[];
+}
+export interface AbbreviationsDataType {
+  [key: string]: string[];
+}
+export interface AbbreviationsResponseDataType {
+  collection_name: string;
+  collection_filename: string;
+  updated_at: string;
+  acronyms: AbbreviationsDataType;
+}
+export interface SegmentationModelDataType {
+  segmentation_model: string;
+  company_name: string[];
+}

src/components/common/navbar/Navbar.scss ADDED Viewed

	@@ -0,0 +1,36 @@

+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #333;
+    padding: 10px 0;
+    z-index: 1000;
+    ul {
+        list-style: none;
+        display: flex;
+        justify-content: center;
+        margin: 0;
+        padding: 0;
+        li {
+            margin: 0 20px;
+            a {
+                color: white;
+                text-decoration: none;
+                font-size: 16px;
+                &.active {
+                    font-weight: bold;
+                    border-bottom: 2px solid white;
+                }
+                &:hover {
+                    color: #ddd;
+                }
+            }
+        }
+    }
+}

src/components/common/navbar/Navbar.tsx ADDED Viewed

	@@ -0,0 +1,46 @@

+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import './Navbar.scss';
+const Navbar: React.FC = () => {
+    return (
+        <nav className="navbar">
+            <ul>
+                <li>
+                    <NavLink
+                        to="/logs"
+                        className={({ isActive }) => (isActive ? 'active' : '')}
+                    >
+                        Логи
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink
+                        to="/docs"
+                        className={({ isActive }) => (isActive ? 'active' : '')}
+                    >
+                        Датасеты
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink
+                        to="/llmconfig"
+                        className={({ isActive }) => (isActive ? 'active' : '')}
+                    >
+                        Настройки LLM
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink
+                        to="/llmprompt"
+                        className={({ isActive }) => (isActive ? 'active' : '')}
+                    >
+                        Системные промпты
+                    </NavLink>
+                </li>
+            </ul>
+        </nav>
+    );
+};
+export default Navbar;

src/components/generics/button/Button.interface.ts ADDED Viewed

	@@ -0,0 +1,11 @@

+import { ReactNode } from "react";
+export type ButtonProps = {
+  name?: string;
+  onClick: () => void;
+  buttonType?: "primary" | "outlined" | "secondary" | "link";
+  disabled?: boolean;
+  loading?: boolean;
+  icon?: ReactNode;
+  className?: string;
+} & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;

src/components/generics/button/Button.scss ADDED Viewed

	@@ -0,0 +1,70 @@

+.btn {
+  border-radius: 15px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 9px;
+  padding-bottom: 9px;
+  font-family: inherit;
+  display: flex;
+  gap: 10px;
+}
+.btn:hover {
+  cursor: pointer;
+  background-color: var(--hover-bg-color);
+}
+.primary {
+  background-color: var(--primary-color);
+  color: var(--text-1-color);
+  outline: none;
+  border: 2px solid transparent;
+}
+.outlined {
+  border: 2px solid var(--primary-color);
+  color: var(--text-0-color);
+  background-color: transparent;
+}
+.secondary {
+  background-color: var(--secondary-color);
+  color: var(--white-color);
+  outline: none;
+  border: 2px solid transparent;
+  &:hover {
+    background-color: var(--purple-color);
+  }
+}
+.link {
+  text-align: left;
+  display: flex;
+  background: none !important;
+  border: none;
+  padding: 0 !important;
+  word-wrap: break-word;
+  margin: 0;
+  margin-bottom: 3px;
+  color: var(--purple-color);
+  font-weight: 400;
+  text-decoration: none;
+  cursor: pointer;
+  &:hover {
+    color: var(--secondary-color);
+  }
+}
+button:disabled {
+  background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
+  color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
+  &:hover {
+    cursor: default;
+    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
+    color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
+  }
+}

src/components/generics/button/Button.tsx ADDED Viewed

	@@ -0,0 +1,23 @@

+import Spinner from "../spinner/Spinner";
+import { ButtonProps } from "./Button.interface";
+import "./Button.scss";
+const Button = ({
+  name = "",
+  onClick,
+  buttonType = "primary",
+  disabled,
+  loading = false,
+  icon = null,
+  className,
+}: ButtonProps) => {
+  return (
+    <button onClick={onClick} className={`btn ${buttonType} ${className}`} disabled={disabled}>
+      {name}
+      {icon}
+      {loading && <Spinner />}
+    </button>
+  );
+};
+export default Button;

src/components/generics/collapse/Collapse.inreface.ts ADDED Viewed

	@@ -0,0 +1,8 @@

+import { ReactNode } from "react";
+interface CollapseProps {
+  name: string;
+  content: ReactNode;
+}
+export default CollapseProps;

src/components/generics/collapse/Collapse.scss ADDED Viewed

	@@ -0,0 +1,40 @@

+.collapsible {
+  background-color: var(--white-color);
+  color: var(--text-2-color);
+  cursor: pointer;
+  padding: 10px;
+  width: 100%;
+  border: 2px solid var(--border-0-color);
+  text-align: left;
+  outline: none;
+  border-radius: 15px;
+}
+.collapsible:hover {
+  background-color: var(--primary-color);
+}
+.collapsible:not(:has(+ .hidden)) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.content {
+  padding: 0 18px;
+  overflow: hidden;
+  display: block;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+  background-color: var(--bg-color);
+}
+.content.hidden {
+  display: none;
+}
+.collapsible:after {
+  content: "\02C5";
+  color: var(--text-0-color);
+  float: right;
+  margin-left: 5px;
+}

src/components/generics/collapse/Collapse.tsx ADDED Viewed

	@@ -0,0 +1,22 @@

+import { useState } from "react";
+import "./Collapse.scss";
+import CollapseProps from "./Collapse.inreface";
+const Collapse = ({ name, content }: CollapseProps) => {
+  const [collapsed, setCollapsed] = useState<boolean>(false);
+  return (
+    <>
+      <button
+        type="button"
+        className="collapsible"
+        onClick={() => setCollapsed(!collapsed)}
+      >
+        {name}
+      </button>
+      <div className={`content ${!collapsed && "hidden"}`}>{content}</div>
+    </>
+  );
+};
+export default Collapse;

src/components/generics/dropdown/Dropdown.interface.ts ADDED Viewed

	@@ -0,0 +1,4 @@

+export interface DropdownProps {
+  name: string;
+  content: string;
+}

src/components/generics/dropdown/Dropdown.scss ADDED Viewed

	@@ -0,0 +1,21 @@

+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  padding: 10px;
+  z-index: 1;
+  border-radius: 15px;
+  p {
+    margin: 0;
+  }
+}
+.dropdown:hover .dropdown-content {
+  display: block;
+}

src/components/generics/dropdown/Dropdown.tsx ADDED Viewed

	@@ -0,0 +1,14 @@

+import { DropdownProps } from "./Dropdown.interface";
+import "./Dropdown.scss";
+const Dropdown = ({ name, content }: DropdownProps) => {
+  return (
+    <div className="dropdown">
+      <span>{name}</span>
+      <div className="dropdown-content">
+        <p>{content}</p>
+      </div>
+    </div>
+  );
+};
+export default Dropdown;

src/components/generics/editable/Editable.interface.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+import { MouseEventHandler } from "react";
+export interface EditableProps {
+  content: string;
+  className?: string;
+  placeholder: string;
+  onContentChange: (content: string) => void;
+  handleClick?: MouseEventHandler<HTMLDivElement>;
+  disabled?: boolean;
+}

src/components/generics/editable/Editable.scss ADDED Viewed

	@@ -0,0 +1,31 @@

+.editable {
+  box-sizing: border-box;
+  width: 100%;
+  font-size: 16px;
+  border: 0;
+  border-radius: 15px;
+  resize: none;
+  overflow-y: auto;
+  min-height: 1rem;
+  padding: 16px;
+  background-color: var(--bg-color);
+  outline: none;
+  text-align: left;
+}
+.editable:empty::before {
+  content: attr(data-placeholder);
+  color: var(--text-2-color);
+  display: block;
+  pointer-events: none;
+  opacity: 0.7;
+}
+.with_options {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.with_shadow {
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+}

src/components/generics/editable/Editable.tsx ADDED Viewed

	@@ -0,0 +1,112 @@

+import React, { useRef, useEffect, useCallback, MouseEventHandler } from "react";
+import ContentEditable, { ContentEditableEvent } from "react-contenteditable";
+import "./Editable.scss";
+import { EditableProps } from "./Editable.interface";
+const Editable: React.FC<EditableProps> = ({
+  className,
+  placeholder,
+  content,
+  onContentChange,
+  handleClick: handleContentClick,
+}) => {
+  const editableRef = useRef<HTMLElement>(null);
+  const lastCaretPosition = useRef<number>(0);
+  const getCaretPosition = (el: HTMLElement): number => {
+    let caretPosition = 0;
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const preRange = range.cloneRange();
+      preRange.selectNodeContents(el);
+      preRange.setEnd(range.endContainer, range.endOffset);
+      caretPosition = preRange.toString().length;
+    }
+    return caretPosition;
+  };
+  const setCaretPosition = useCallback((offset: number) => {
+    const selection = window.getSelection();
+    const range = document.createRange();
+    const el = editableRef.current;
+    let localOffset = offset;
+    el?.childNodes.forEach((element) => {
+      if (!element.textContent?.length) {
+        element.textContent = "";
+      }
+      if (localOffset <= element.textContent?.length && localOffset >= 0) {
+        range.setStart(element.childNodes[0] ?? element, localOffset);
+        range.collapse(true);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+        localOffset -= element.textContent?.length;
+        return;
+      } else if (localOffset >= 0) {
+        localOffset -= element.textContent?.length;
+      }
+    });
+  }, []);
+  const handleChange = (event: ContentEditableEvent) => {
+    const newText = event.currentTarget.innerText;
+    const currentCaretPosition = getCaretPosition(editableRef.current!);
+    if (newText.length <= 500) {
+      onContentChange(newText);
+      lastCaretPosition.current = currentCaretPosition;
+    } else {
+      const trimmedText = newText.substring(0, 500);
+      event.currentTarget.innerText = trimmedText;
+      onContentChange(trimmedText);
+      lastCaretPosition.current = currentCaretPosition;
+      setCaretPosition(500);
+    }
+  };
+  const handleClick: MouseEventHandler<HTMLDivElement> = (event) => {
+    lastCaretPosition.current = getCaretPosition(editableRef.current!);
+    if (handleContentClick) handleContentClick(event);
+  };
+  useEffect(() => {
+    const contentEditable = editableRef.current;
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "childList") {
+          mutation.removedNodes.forEach((node) => {
+            if (node instanceof HTMLElement && node.tagName === "A") {
+              setCaretPosition(lastCaretPosition.current);
+            }
+          });
+        }
+      });
+    });
+    if (contentEditable) {
+      observer.observe(contentEditable, { childList: true, subtree: true });
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [setCaretPosition]);
+  return (
+    <ContentEditable
+      innerRef={editableRef}
+      className={`editable ${className}`}
+      onChange={handleChange}
+      onBlur={() => {}}
+      html={content.replaceAll("@@@", "")}
+      data-placeholder={placeholder}
+      onClick={handleClick}
+    />
+  );
+};
+export default Editable;

src/components/generics/input/Input.interface.ts ADDED Viewed

	@@ -0,0 +1,13 @@

+import { DetailedHTMLProps, ReactNode } from "react";
+export type InputProps = {
+  name: string;
+  label?: ReactNode;
+  placeholder?: string;
+  rules?: { rule: (value: string) => boolean; errorMessage: string }[];
+  value?: string;
+  onSetValue: (value: string) => void;
+  error?: string | null;
+  onSetError?: (value: string | null) => void;
+  extra?: ReactNode;
+} & DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

src/components/generics/input/Input.scss ADDED Viewed

	@@ -0,0 +1,34 @@

+.input_container {
+  .with_icon_container {
+    display: flex;
+    align-items: center;
+    border-radius: 10px;
+    width: 100%;
+    padding: 0;
+    box-sizing: border-box;
+    border: 1px solid var(--border-1-color);
+    &:focus,
+    &:active {
+      border: 1px solid var(--border-1-color);
+      outline: none;
+    }
+  }
+  .input {
+    border: 0;
+    margin: 8px;
+    padding: 0;
+    width: 100%;
+    outline: none;
+  }
+  .error {
+    margin-top: 10px;
+    color: var(--error-color);
+    word-wrap: break-word;
+  }
+}
+input[type="radio"] {
+  accent-color: var(--secondary-color);
+  transform: scale(1.4);
+}

src/components/generics/input/Input.tsx ADDED Viewed

	@@ -0,0 +1,77 @@

+import { useEffect } from "react";
+import { InputProps } from "./Input.interface";
+import "./Input.scss";
+const Input = ({
+  name,
+  placeholder,
+  rules,
+  value = "",
+  onSetValue,
+  label,
+  error,
+  onSetError,
+  extra,
+  ...props
+}: InputProps) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (props.type == "number") {
+      const { value, max, min } = event.target;
+      if (Number(value) > Number(max)) {
+        onSetValue(max);
+      } else if (Number(value) > Number(min)) {
+        onSetValue(value);
+      } else {
+        onSetValue("");
+      }
+    } else {
+      onSetValue(event.target.value);
+    }
+  };
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (props.type === "number") {
+      if (!/[0-9]/.test(event.key) && event.key !== "Backspace") {
+        event.preventDefault();
+      }
+    }
+  };
+  useEffect(() => {
+    if (value.length > 0) {
+      rules?.some((rule) => {
+        if (!rule.rule(value)) {
+          // console.log(value);
+          onSetError?.(rule.errorMessage);
+          return true;
+        }
+        // console.log(value);
+        onSetError?.(null);
+        return false;
+      });
+    }
+  }, [onSetError, rules, value]);
+  return (
+    <div className={"input_container"}>
+      {label}
+      <div className="with_icon_container">
+        <input
+          className={"input"}
+          name={name}
+          placeholder={placeholder}
+          value={value}
+          onChange={handleChange}
+          onKeyPress={handleKeyPress}
+          {...props}
+        />
+        {extra}
+      </div>
+      {error && <div className={"error"}>{error}</div>}
+    </div>
+  );
+};
+export default Input;

src/components/generics/loading/Loading.tsx ADDED Viewed

	@@ -0,0 +1,23 @@

+import React, { useEffect, useState } from "react";
+interface LoadingProps {
+  loading: boolean;
+}
+const Loading: React.FC<LoadingProps> = ({ loading }) => {
+  const [dots, setDots] = useState<string>("");
+  useEffect(() => {
+    if (loading) {
+      const interval = setInterval(() => {
+        setDots((prev) => (prev.length < 3 ? prev + "." : ""));
+      }, 500);
+      return () => clearInterval(interval);
+    }
+  }, [loading]);
+  return <div className="loading">Загрузка{dots}</div>;
+};
+export default Loading;

src/components/generics/modal/Modal.interface.ts ADDED Viewed

	@@ -0,0 +1,6 @@

+export interface ModalWindowProps {
+  label?: string;
+  isOpen: boolean;
+  closeModal: () => void;
+  children: React.ReactNode;
+}

src/components/generics/modal/Modal.scss ADDED Viewed

	@@ -0,0 +1,9 @@

+.modal-content {
+  padding: 0 10px 0 10px;
+  .label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+}

src/components/generics/modal/Modal.tsx ADDED Viewed

	@@ -0,0 +1,34 @@

+import { FC } from "react";
+import Modal from "react-modal";
+import { GoX } from "react-icons/go";
+import { ModalWindowProps } from "./Modal.interface";
+import Button from "../button/Button";
+import "./Modal.scss";
+const customStyles = {
+  content: {
+    top: "40%",
+    left: "50%",
+    right: "auto",
+    bottom: "auto",
+    transform: "translate(-50%, -50%)",
+    borderRadius: "15px",
+    width: "600px",
+  },
+};
+const ModalWindow: FC<ModalWindowProps> = ({ isOpen, closeModal, children, label = "" }) => {
+  return (
+    <Modal style={customStyles} isOpen={isOpen} onRequestClose={closeModal}>
+      <div className="modal-content">
+        <div className="label">
+          <h3 className="name">{label}</h3>
+          <Button onClick={closeModal} icon={<GoX style={{ height: "25px", width: "25px" }} />} buttonType="link" />
+        </div>
+        {children}
+      </div>
+    </Modal>
+  );
+};
+export default ModalWindow;

src/components/generics/sizeChanger/SizeChanger.scss ADDED Viewed

	@@ -0,0 +1,31 @@

+.resizable-container {
+  display: flex;
+  width: 100%;
+  margin-top: 10px;
+  overflow: hidden;
+}
+.left-pane {
+  min-width: 345px;
+}
+.right-pane {
+  min-width: 260px;
+  flex-grow: 1;
+}
+.resizer {
+  width: 2px;
+  background-color: var(--bg-color);
+  cursor: ew-resize;
+  position: relative;
+  margin: 10px;
+  transition: width 0.3s ease;
+  pointer-events: auto;
+}
+.resizer:hover {
+  width: 3px;
+  border: 2px solid var(--border-0-color);
+  background-color: var(--border-0-color);
+}

src/components/generics/sizeChanger/SizeChanger.tsx ADDED Viewed

	@@ -0,0 +1,38 @@

+import React, { useState } from "react";
+import "./SizeChanger.scss";
+import { SizeChangerProps } from "./SizeChangerProps";
+const SizeChanger = ({ left, right }: SizeChangerProps) => {
+  const [leftWidth, setLeftWidth] = useState(600); // Начальная ширина левого блока
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const onMouseMove = (e: MouseEvent) => {
+      const newWidth = leftWidth + e.clientX - startX;
+      setLeftWidth(newWidth);
+    };
+    const onMouseUp = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+  return (
+    <div className="resizable-container">
+      <div className="left-pane" style={{ width: `${leftWidth}px` }}>
+        {right}
+      </div>
+      <div className="resizer" onMouseDown={handleMouseDown} />
+      <div className="right-pane">{left}</div>
+    </div>
+  );
+};
+export default SizeChanger;

src/components/generics/sizeChanger/SizeChangerProps.ts ADDED Viewed

	@@ -0,0 +1,6 @@

+import { ReactNode } from "react";
+export interface SizeChangerProps {
+  left: ReactNode;
+  right: ReactNode;
+}

src/components/generics/spinner/Spinner.scss ADDED Viewed

	@@ -0,0 +1,14 @@

+.spinner {
+  border: 3px solid rgba(122, 122, 122, 0.1);
+  border-left-color: var(--border-1-color);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/components/generics/spinner/Spinner.tsx ADDED Viewed

	@@ -0,0 +1,7 @@

+import "./Spinner.scss";
+const Spinner = () => {
+  return <div className="spinner"></div>;
+};
+export default Spinner;