Spaces:
Sleeping
Sleeping
File size: 2,023 Bytes
f3a9ef2 a86b547 f3a9ef2 bfbf1a7 a86b547 8e3dbd3 58d7e55 34afd2e f3a9ef2 a86b547 5411802 58d7e55 f3a9ef2 5411802 a86b547 34afd2e f80b091 34afd2e 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 58 59 60 61 |
'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 [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>
{!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}
enableSelfReflection={enableSelfReflection}
setEnableSelfReflection={setEnableSelfReflection}
/>
</div>
)}
</>
);
}
|