File size: 2,304 Bytes
0702eb8
 
 
fb3baa1
fdaf912
 
b4297ca
 
4071fe2
 
0702eb8
 
b4297ca
 
fdaf912
 
0702eb8
 
 
 
 
 
 
 
b4297ca
 
 
 
 
 
 
 
fdaf912
b4297ca
 
0702eb8
 
7d9d30d
4071fe2
fdaf912
b4297ca
 
 
 
 
 
 
 
 
fdaf912
 
b4297ca
 
 
 
fdaf912
b4297ca
 
 
 
 
 
 
 
 
 
 
 
fdaf912
 
 
 
b4297ca
 
0702eb8
 
 
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
"use client";

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

export default function ChatSection() {
  const { data: session } = useSession();
  const supabaseAccessToken = session?.supabaseAccessToken;
  const [collSelectedId, setCollSelectedId] = useState<string>('');
  const [collSelectedName, setCollSelectedName] = useState<string>('');
  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="space-y-4 max-w-5xl w-full relative">
      <ToastContainer />
      {collSelectedId ?
        (
          <>
            <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}
            />
          </>
        )
        :
        <ChatSelection
          collSelectedId={collSelectedId}
          collSelectedName={collSelectedName}
          handleCollIdSelect={setCollSelectedId}
          handleCollNameSelect={setCollSelectedName}
        />
      }
    </div>
  );
}