File size: 4,722 Bytes
79278ec
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import { useCallback, useState } from "react";
import { GoPerson, GoSignOut } from "react-icons/go";
import Button from "@/components/generics/button/Button";
import RequestTextArea from "@/components/views/requestTextArea/RequestTextArea";
import LlmAnswer from "@/components/views/llmAnswer/LlmAnswer";
import SearchResults from "@/components/views/search/searchResults/SearchResults";
import Loading from "@/components/generics/loading/Loading";
import SizeChanger from "@/components/generics/sizeChanger/SizeChanger";
import Comment from "@/components/views/comment/Comment";
import { FeedbackRequestType } from "@/api/predictions/types";
import LoginForm from "@/components/views/loginForm/LoginForm";
import "./Page.scss";
import { useAuth } from "@/shared/hooks/useAuth/useAuth";
import Tooltip from "@/components/generics/tooltip/Tooltip";
import { useAbbreviation } from "@/shared/hooks/useAbbreviations/useAbbreviation";
import { useGetChunks, useGetLlmResponse, usePostFeedback } from "@/api/predictions/hooks";

const Page = () => {
  const { userName, logout } = useAuth();
  const { content, setContent, textContent, textContentWithoutAbbrVal, abbreviationArray, addValues } =
    useAbbreviation();

  const [openAbbreviations, setOpenAbbreviations] = useState<boolean>(true);

  const { mutation: chunksMutation } = useGetChunks();
  const { mutate: getChunks, data: chunksData, isPending: isPendingChunks } = chunksMutation;

  const { mutation: llmMutation } = useGetLlmResponse();
  const { mutate: getLlm, data: llmData, isPending: isPendingLlm } = llmMutation;

  const { mutate: postFeedback, isPending: isPendingFeedback } = usePostFeedback();

  const handlePostFeedback = useCallback(
    (data: FeedbackRequestType, onSuccess?: () => void) => {
      postFeedback(data, {
        onSuccess: onSuccess,
      });
    },
    [postFeedback]
  );

  const handleGetPrediction = () => {
    getChunks(
      {
        userName: userName,
        query: textContentWithoutAbbrVal,
        query_abbreviation: textContent,
        abbreviations_replaced: abbreviationArray,
      },
      {
        onSuccess: (chunksResponse) => {
          if (chunksResponse) {
            getLlm({
              query: {
                userName: userName,
                query: textContentWithoutAbbrVal,
                query_abbreviation: textContent,
                abbreviations_replaced: abbreviationArray,
              },
              chunks: chunksResponse.chunks,
              chunksArray: chunksResponse.chunksArray,
            });
          }
        },
      }
    );
  };

  const handleLogout = () => {
    logout();
  };

  const handleEditRequest = () => {
    setOpenAbbreviations(true);
  };

  return (
    <div className="page">
      <div className="header_container">
        <h1 className="header">Поиск по документам</h1>
        <div className="user_container">
          <div className="user_name">
            <GoPerson />
            {userName}
          </div>
          <div className="logout">
            <Tooltip text="Выйти">
              <Button name="" onClick={handleLogout} icon={<GoSignOut color="red" />} buttonType="link" />
            </Tooltip>
          </div>
        </div>
      </div>
      <div className="search">
        <div className="search_block">
          <RequestTextArea
            openAbbreviations={openAbbreviations}
            content={content}
            setContent={setContent}
            abbreviationArray={abbreviationArray}
            handleEditRequest={handleEditRequest}
          />
          <div className="search_btns">
            <Button
              name="Поиск"
              onClick={() => {
                addValues();
                setOpenAbbreviations(false);
                handleGetPrediction();
              }}
              disabled={textContent.length === 0}
            />
          </div>
        </div>
      </div>
      {isPendingChunks && <Loading loading={isPendingChunks} />}
      {!isPendingChunks && chunksData && (
        <SizeChanger
          right={
            <SearchResults
              data={chunksData.chunksArray}
              documentsNumbers={llmData?.documentsNumbers}
              loading={isPendingChunks}
            />
          }
          left={
            <div className="llm_container">
              <LlmAnswer value={llmData?.answer_llm ?? ""} loading={isPendingLlm} />
              {!isPendingLlm && (
                <Comment onSubmit={handlePostFeedback} loading={isPendingFeedback} log_id={llmData?.log_id} />
              )}
            </div>
          }
        />
      )}
      <LoginForm />
    </div>
  );
};

export default Page;