File size: 1,796 Bytes
f3a9ef2
a86b547
f3a9ef2
bfbf1a7
a86b547
 
8e3dbd3
58d7e55
34afd2e
f3a9ef2
 
a86b547
5411802
58d7e55
f3a9ef2
 
5411802
a86b547
f80b091
d553ae5
f3a9ef2
8e3dbd3
 
 
f80b091
 
96ac62a
8e3dbd3
5613eec
 
 
 
 
8e3dbd3
f80b091
 
5411802
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f80b091
 
f3a9ef2
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
'use client';

import { ChatList } from '@/components/chat/ChatList';
import { Composer } from '@/components/chat/Composer';
import { ChatEntity } from '@/lib/types';
import useVisionAgent from '@/lib/hooks/useVisionAgent';
import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
import { Session } from 'next-auth';
import { useState } from 'react';

export interface ChatProps extends React.ComponentProps<'div'> {
  chat: ChatEntity;
  isAdminView?: boolean;
  session: Session | null;
}

export function Chat({ chat, session, isAdminView }: ChatProps) {
  const { url, id } = chat;
  const { messages, append, reload, stop, isLoading, input, setInput } =
    useVisionAgent(chat);

  const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
    useScrollAnchor();

  return (
    <>
      <div className="h-full overflow-auto relative" ref={scrollRef}>
        <div className="pb-[200px] pt-4 md:pt-10" ref={messagesRef}>
          <ChatList
            messages={messages}
            session={session}
            isLoading={isLoading}
          />
          <div className="h-px w-full" ref={visibilityRef} />
        </div>
      </div>
      {!isAdminView && (
        <div className="fixed inset-x-0 bottom-0 w-full animate-in duration-300 ease-in-out peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px] h-[178px]">
          <Composer
            id={id}
            url={url}
            isLoading={isLoading}
            stop={stop}
            append={append}
            reload={reload}
            messages={messages}
            input={input}
            setInput={setInput}
            isAtBottom={isAtBottom}
            scrollToBottom={scrollToBottom}
          />
        </div>
      )}
    </>
  );
}