File size: 1,821 Bytes
f3a9ef2
a86b547
f3a9ef2
bfbf1a7
a86b547
8e3dbd3
58d7e55
34afd2e
5ec491a
f3a9ef2
 
5ec491a
5411802
58d7e55
f3a9ef2
 
5411802
5ec491a
f80b091
d553ae5
f3a9ef2
8e3dbd3
 
 
f80b091
 
96ac62a
8e3dbd3
5613eec
 
 
 
 
8e3dbd3
f80b091
 
5411802
 
 
 
5ec491a
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 useVisionAgent from '@/lib/hooks/useVisionAgent';
import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
import { Session } from 'next-auth';
import { useState } from 'react';
import { ChatWithMessages } from '@/lib/db/types';

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

export function Chat({ chat, session, isAdminView }: ChatProps) {
  const { mediaUrl, 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={mediaUrl}
            isLoading={isLoading}
            stop={stop}
            append={append}
            reload={reload}
            messages={messages}
            input={input}
            setInput={setInput}
            isAtBottom={isAtBottom}
            scrollToBottom={scrollToBottom}
          />
        </div>
      )}
    </>
  );
}