File size: 1,589 Bytes
f3a9ef2
a86b547
f3a9ef2
 
052672d
 
a86b547
 
 
f3a9ef2
 
a86b547
f3a9ef2
 
a86b547
 
f80b091
a86b547
f3a9ef2
f80b091
 
a86b547
f80b091
a86b547
 
 
 
 
 
 
8c5e6e1
a86b547
 
f80b091
 
a86b547
f80b091
 
 
 
a86b547
f80b091
 
 
 
 
 
 
 
a86b547
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
'use client';

import { cn } from '@/lib/utils';
import { ChatList } from '@/components/chat/ChatList';
import { ChatPanel } from '@/components/chat/ChatPanel';
import { ChatScrollAnchor } from '@/components/chat/ChatScrollAnchor';
import { ChatEntity } from '@/lib/types';
import Image from 'next/image';
import useVisionAgent from '@/lib/hooks/useVisionAgent';

export interface ChatProps extends React.ComponentProps<'div'> {
  chat: ChatEntity;
}

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

  return (
    <>
      <div className={cn('pb-[150px] pt-4 md:pt-10 h-full')}>
        <div className="flex h-full">
          <div className="w-1/2 relative border-r border-gray-400 overflow-auto p-4 flex items-center justify-center">
            <div className="max-h-[600px] size-full relative">
              <Image
                draggable={false}
                src={url}
                alt={url}
                fill
                className="object-contain"
              />
            </div>
          </div>
          <div className="w-1/2 relative overflow-auto">
            <ChatList messages={messages} />
            <ChatScrollAnchor trackVisibility={isLoading} />
          </div>
        </div>
      </div>
      <ChatPanel
        id={id}
        isLoading={isLoading}
        stop={stop}
        append={append}
        reload={reload}
        messages={messages}
        input={input}
        setInput={setInput}
      />
    </>
  );
}