File size: 3,917 Bytes
caae15f
 
 
fb3baa1
b4297ca
fdaf912
b4297ca
d5e0a0f
fdaf912
 
caae15f
 
b4297ca
d5e0a0f
fdaf912
 
 
 
 
caae15f
 
 
 
 
 
 
 
d5e0a0f
fdaf912
b4297ca
d5e0a0f
 
 
 
 
fdaf912
d5e0a0f
b4297ca
caae15f
 
fdaf912
 
 
 
 
 
 
 
 
 
 
 
 
7d9d30d
b4297ca
fdaf912
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
caae15f
 
 
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
"use client";

import { useChat } from "ai/react";
import { ChatInput, ChatMessages } from "@/app/components/ui/chat";
import { AutofillQuestion } from "./ui/autofill-prompt";
import { QueryMenu, QuerySelection, QueryDocumentUpload, QueryCollectionManage } from "./ui/query";
import { useSession } from "next-auth/react";
import { useState } from "react";
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export default function QuerySection() {
    const { data: session } = useSession();
    const supabaseAccessToken = session?.supabaseAccessToken;
    const [collSelectedId, setCollSelectedId] = useState<string>('');
    const [collSelectedName, setCollSelectedName] = useState<string>('');
    const [showChat, setShowChat] = useState<boolean>(true);
    const [showUpload, setShowUpload] = useState<boolean>(false);
    const [showManage, setShowManage] = useState<boolean>(false);
    const {
        messages,
        input,
        isLoading,
        handleSubmit,
        handleInputChange,
        reload,
        stop,
    } = useChat({
        api: process.env.NEXT_PUBLIC_CHAT_API,
        headers: {
            // Add the access token to the request headers
            'Authorization': `Bearer ${supabaseAccessToken}`,
        },
        body: {
            // Add the selected document to the request body
            collection_id: collSelectedId,
        },
    });

    return (
        <div className="max-w-5xl w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit shadow-xl space-y-4 px-4 pb-4">
            {/* Toast Container */}
            <ToastContainer />

            {/* Menu Section */}
            <QueryMenu
                showUpload={showUpload}
                setShowUpload={setShowUpload}
                showChat={showChat}
                setShowChat={setShowChat}
                showManage={showManage}
                setShowManage={setShowManage}
                setCollSelectedId={setCollSelectedId}
            />

            {/* Document Selection/Chat Section */}
            {showChat ?
                (collSelectedId ?
                    <>
                        {/* Chat Section */}
                        <ChatMessages
                            messages={messages}
                            isLoading={isLoading}
                            reload={reload}
                            stop={stop}
                        />
                        <AutofillQuestion
                            collSelectedId={collSelectedId}
                            collSelectedName={collSelectedName}
                            messages={messages}
                            isLoading={isLoading}
                            handleSubmit={handleSubmit}
                            handleInputChange={handleInputChange}
                            handleCollIdSelect={setCollSelectedId}
                            input={input}
                        />
                        <ChatInput
                            input={input}
                            handleSubmit={handleSubmit}
                            handleInputChange={handleInputChange}
                            isLoading={isLoading}
                        />
                    </>
                    :
                    (
                        <QuerySelection
                            collSelectedId={collSelectedId}
                            collSelectedName={collSelectedName}
                            handleCollIdSelect={setCollSelectedId}
                            handleCollNameSelect={setCollSelectedName}
                        />))
                : null
            }

            {/* Document Upload Section */}
            {showUpload ? <QueryDocumentUpload /> : null}

            {/* Document Manage Section */}
            {showManage ? <QueryCollectionManage /> : null}

        </div>
    );
}