update

src/api/logs/logsApi.ts

@@ -1,5 +1,6 @@
 import { query } from "@/shared/api/query";
 import { GetLogsRequestParams, GetLogsResponseType } from "./types";
+import { downloadFile } from "@/shared/utils/downloadFile";
 
 export const getLogs = async (params: GetLogsRequestParams): Promise<GetLogsResponseType> => {
   const response = await query<GetLogsResponseType>({
@@ -13,3 +14,19 @@ export const getLogs = async (params: GetLogsRequestParams): Promise<GetLogsResp
 
   return response.data;
 };
+
+export const downloadLogsAsExcel = async (params: GetLogsRequestParams, filename: string): Promise<Blob> => {
+  const response = await query<Blob>({
+    url: `/logs/excel`,
+    method: "get",
+    params: params,
+    responseType: "blob",
+  });
+
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+  downloadFile(response, filename);
+
+  return response.data;
+};

src/api/logs/types.ts

@@ -7,12 +7,14 @@ export type LogItemType = {
   llm_result: string;
   llm_settings: string;
   user_name: string;
+  chat_id: string;
   error: string;
 };
 
 export type GetLogsRequestParams = {
   page?: number;
   user_name?: string;
+  chat_id?: string;
   date_to?: Date;
   date_from?: Date;
   page_size?: number;

src/components/pages/logs/LogDetailsModal.scss

@@ -74,35 +74,6 @@
             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 {

src/components/pages/logs/LogDetailsModal.tsx

@@ -10,6 +10,7 @@ interface LogDetailsModalProps {
   isOpen: boolean;
   onRequestClose: () => void;
   log: LogItemType;
+  setChatIdFilter: (value: string | undefined) => void;
 }
 
 const customStyles = {
@@ -26,6 +27,7 @@ const LogDetailsModal: React.FC<LogDetailsModalProps> = ({
   isOpen,
   onRequestClose,
   log,
+  setChatIdFilter
 }) => {
 
   let qeResult = null;
@@ -37,6 +39,12 @@ const LogDetailsModal: React.FC<LogDetailsModalProps> = ({
     console.error('Ошибка парсинга JSON:', error);
   }
 
+  // Обработчик клика на chat_id
+  const handleChatIdClick = () => {
+    setChatIdFilter(log.chat_id);
+    onRequestClose();
+  };
+
   return (
     <Modal
       isOpen={isOpen}
@@ -60,6 +68,17 @@ const LogDetailsModal: React.FC<LogDetailsModalProps> = ({
             <span className='title'>Пользователь:</span>
             <input type="text" value={log.user_name} readOnly={true} />
           </label>
+          <label>
+            <span className='title'>Чат:</span>
+            {/* <input type="text" value={log.chat_id} readOnly={true} /> */}
+            <span
+              className="chat-id clickable"
+              onClick={handleChatIdClick}
+              style={{ cursor: 'pointer', color: '#007bff', textDecoration: 'underline' }}
+            >
+              {log.chat_id}
+            </span>
+          </label>
           <label>
             <span className='title'>Время:</span>
             <input type="text" value={(log.date_created ? new Date(log.date_created).toLocaleDateString() : '') + ' ' + (log.date_created ? new Date(log.date_created).toLocaleTimeString() : '')} readOnly={true} />

src/components/pages/logs/Logs.scss

@@ -82,7 +82,7 @@ td.ellipsis {
   max-width: 400px;
 }
 
-.date-filter {
+.filters-container {
   display: flex;
   gap: 20px;
   margin-bottom: 20px;
@@ -102,6 +102,9 @@ td.ellipsis {
   border-radius: 4px;
 }
 
+.filter-secondary-container{
+
+}
 // .react-datepicker__input-container {
 
 //   input,

src/components/pages/logs/Logs.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useMemo, useState } from "react";
+import { ChangeEventHandler, FC, useCallback, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import Select from "react-select";
 
@@ -30,19 +30,23 @@ import Documents from "../documentsPage/Documents";
 import LogDetailsModal from "./LogDetailsModal";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
+import axios from 'axios';
+import { downloadLogsAsExcel } from "@/api/logs/logsApi";
 
 const Logs: FC = () => {
   const [page, setPage] = useState<number>(0);
   const [pageSize, setPageSize] = useState<number>(50);
   const [userInput, setUserInput] = useState<string | undefined>(undefined);
   const [user, setUser] = useState<string | undefined>(undefined);
+  const [chatIdFilter, setChatIdFilter] = useState<string | undefined>(undefined);
   const [sort, setSort] = useState<undefined | { field: string; direction: SortDirections }[]>(undefined);
   const [dateTo, setDateTo] = useState<Date | undefined>(undefined);
   const [dateFrom, setDateFrom] = useState<Date | undefined>(undefined);
   const { data: logsData, isLoading } = useGetLogs({
     page, page_size: pageSize,
     user_name: user, sort,
-    date_to: dateTo, date_from: dateFrom
+    date_to: dateTo, date_from: dateFrom,
+    chat_id: chatIdFilter
   });
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedLog, setSelectedLog] = useState<LogItemType | null>(null);
@@ -129,9 +133,25 @@ const Logs: FC = () => {
   //   }
   // }, [datasetsData, searchParams, setSearchParams]);
 
+  const handleDownloadExcel = useCallback(async () => {
+    const params: GetLogsRequestParams = {
+      user_name: user,
+      date_from: dateFrom,
+      date_to: dateTo,
+      sort,
+      chat_id: chatIdFilter
+    };
+
+    downloadLogsAsExcel(params, "Логи запросов");
+  }, [user, dateFrom, dateTo, sort, chatIdFilter]);
+
+  const handleChatIdChange = (event: any) => {
+    setChatIdFilter(event.target.value);
+  };
+
   return (
     <div className="documents-page">
-      <div className="date-filter">
+      <div className="filters-container">
         <div className="date-picker-container">
           <label htmlFor="startDate">Показать логи с</label>
           <DatePicker
@@ -156,7 +176,14 @@ const Logs: FC = () => {
             showIcon
           />
         </div>
-        {/* <Button name={"Показать"} onClick={handleFilterList} loading={isLoading} /> */}
+        <label htmlFor="endDate">Чат ID:
+          <input type="text" value={chatIdFilter} onChange={handleChatIdChange} />
+        </label>
+
+
+      </div>
+      <div className="filters-container">
+        <Button name="Скачать в Excel" onClick={handleDownloadExcel} icon={<GoDownload />} />
       </div>
       <div className="docs-table-container" style={{ position: "relative" }}>
         {isLoading && (
@@ -178,6 +205,11 @@ const Logs: FC = () => {
                   <span>Пользователь</span>
                 </div>
               </th>
+              <th>
+                <div className="name-with-sort">
+                  <span>Чат</span>
+                </div>
+              </th>
               <th>
                 <div className="name-with-sort">
                   <span>Запрос</span>
@@ -196,6 +228,7 @@ const Logs: FC = () => {
               <tr key={log.id} onClick={() => openDetailsModal(log)}>
                 <td>{log.date_created ? new Date(log.date_created).toLocaleDateString() : ''} {log.date_created ? new Date(log.date_created).toLocaleTimeString() : ''}</td>
                 <td>{log.user_name}</td>
+                <td className="ellipsis" style={{ maxWidth: "100px" }}>{log.chat_id}</td>
                 <td className="ellipsis">{log.user_request}</td>
                 <td className="ellipsis">{log.llm_result}</td>
               </tr>
@@ -214,6 +247,7 @@ const Logs: FC = () => {
         isOpen={isModalOpen}
         onRequestClose={closeModal}
         log={selectedLog}
+        setChatIdFilter={setChatIdFilter}
       />) : ''}
 
     </div>

src/index.scss

@@ -107,3 +107,33 @@ button:focus:not(:focus-visible) {
     font-size: 2.4rem;
   }
 }
+
+
+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;
+}