Spaces:
Running
Running
File size: 1,917 Bytes
f3a9ef2 a86b547 f3a9ef2 bfbf1a7 a86b547 8e3dbd3 58d7e55 34afd2e f3a9ef2 a86b547 58d7e55 f3a9ef2 58d7e55 a86b547 34afd2e f80b091 34afd2e f3a9ef2 8e3dbd3 f80b091 96ac62a 8e3dbd3 5613eec 8e3dbd3 f80b091 96ac62a 34afd2e 96ac62a 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 58 |
'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;
session: Session | null;
}
export function Chat({ chat, session }: ChatProps) {
const { url, id } = chat;
const [enableSelfReflection, setEnableSelfReflection] =
useState<boolean>(true);
const { messages, append, reload, stop, isLoading, input, setInput } =
useVisionAgent(chat, enableSelfReflection);
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>
<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}
enableSelfReflection={enableSelfReflection}
setEnableSelfReflection={setEnableSelfReflection}
/>
</div>
</>
);
}
|