File size: 3,530 Bytes
819bacd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47b5f0c
819bacd
 
 
47b5f0c
d28a185
 
47b5f0c
 
 
 
819bacd
 
47b5f0c
 
 
 
 
819bacd
47b5f0c
 
819bacd
47b5f0c
 
 
819bacd
 
 
 
 
47b5f0c
819bacd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
dcb6c5f
 
47b5f0c
dcb6c5f
819bacd
 
 
 
 
 
 
 
 
 
 
 
47b5f0c
 
819bacd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
import baseUrl from "@/services/api/api.config";
import { useTheme } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";
import { useEffect, useState } from "react";
import ChatInterface from "../chatInterface";
import ChunkInteface from "../chunkInterface";
import ContextHeader from "../contextHeader";
import ModelSelection from "../modelSelection";
import PreviewChunks from "../previewChunks";
import PreviewDocuments from "../previewDocuments";
import PreviewHeader from "../previewHeader";
import SendMessage from "../sendMessage";
import UploadFile from "../uploadFile";

export default function Body() {
  const theme = useTheme();

  const [messages, setMessages] = useState([]);
  const [documents, setDocuments] = useState([]);
  const [chunks, setChunks] = useState([]);
  const [previewedChunk, setPreviewedChunk] = useState(null);

  const onSelectedChunk = (chunk) => {
    if (chunk.documentNumber === previewedChunk) {
      setPreviewedChunk(null);
      return;
    }
    setPreviewedChunk(chunk.documentNumber);
  };

  const fetchMessages = async () => {
    const url = `${baseUrl}/query/get_messages`;

    const response = await fetch(url);
    const messagesResponse = await response.json();
    setMessages(messagesResponse.data);
  };

  const fetchChunks = async () => {
    const url = `${baseUrl}/document/get_chunks`;
    const response = await fetch(url);
    const chunksResponse = await response.json();

    if (Object.keys(chunksResponse.data).length === 0) {
      setDocuments([]);
      setChunks([]);
      return;
    }

    const documentNames = [];

    const transformedData = Object.keys(chunksResponse.data).flatMap(
      (documentKey, index) => {
        documentNames.push({
          id: index + 1,
          filename: documentKey,
        });

        const documentData = chunksResponse.data[documentKey];
        return documentData.map((chunk) => {
          return {
            chunkId: chunk.index,
            documentId: documentKey,
            text: chunk.text,
          };
        });
      }
    );

    setDocuments(documentNames);
    setChunks(transformedData);
  };

  useEffect(() => {
    fetchMessages();
    fetchChunks();
  }, []);

  return (
    <>
      <Grid container mt={1} style={{ height: "97vh" }}>
        <Grid
          item
          xs={12}
          sm={5}
          p={1}
          style={{ display: "flex", flexDirection: "column", height: "100%" }}
        >
          <ModelSelection
            fetchChunks={fetchChunks}
            fetchMessages={fetchMessages}
          ></ModelSelection>
          <ChatInterface messages={messages}></ChatInterface>
          <SendMessage fetchMessages={fetchMessages}></SendMessage>
        </Grid>
        <Grid
          item
          xs={12}
          sm={2}
          p={1}
          style={{ display: "flex", flexDirection: "column", height: "100%" }}
        >
          <ContextHeader chunks={2} documents={1} />
          <PreviewChunks chunks={chunks} onSelectedChunk={onSelectedChunk} />
          <PreviewDocuments documents={documents} fetchChunks={fetchChunks} />
          <UploadFile fetchChunks={fetchChunks} />
        </Grid>
        <Grid
          item
          xs={12}
          sm={5}
          p={1}
          style={{ display: "flex", flexDirection: "column", height: "100%" }}
        >
          <PreviewHeader></PreviewHeader>
          <ChunkInteface chunkTest={chunks[previewedChunk]}></ChunkInteface>
        </Grid>
      </Grid>
    </>
  );
}