71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
|
import React, { useState, useEffect, useRef } from 'react';
|
||
|
|
import LoadingDots from '../../ui/LoadingDots';
|
||
|
|
import ChatMessage from './ChatMessage';
|
||
|
|
import ChatInput from './ChatInput';
|
||
|
|
import ContextDisplay from './ContextDisplay';
|
||
|
|
import { handleSend, handleStopGeneration } from './lib/chatUtils';
|
||
|
|
|
||
|
|
interface Message {
|
||
|
|
role: 'user' | 'assistant';
|
||
|
|
content: string;
|
||
|
|
context?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function AIChat() {
|
||
|
|
const [messages, setMessages] = useState<Message[]>([]);
|
||
|
|
const [input, setInput] = useState('');
|
||
|
|
const [isGenerating, setIsGenerating] = useState(false);
|
||
|
|
const chatContainerRef = useRef<HTMLDivElement>(null);
|
||
|
|
const abortControllerRef = useRef<AbortController | null>(null);
|
||
|
|
const [context, setContext] = useState<string | null>(null);
|
||
|
|
const [isContextExpanded, setIsContextExpanded] = useState(false);
|
||
|
|
const [isLoading, setIsLoading] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
scrollToBottom();
|
||
|
|
}, [messages]);
|
||
|
|
|
||
|
|
const scrollToBottom = () => {
|
||
|
|
if (chatContainerRef.current) {
|
||
|
|
setTimeout(() => {
|
||
|
|
chatContainerRef.current?.scrollTo({
|
||
|
|
top: chatContainerRef.current.scrollHeight,
|
||
|
|
behavior: 'smooth'
|
||
|
|
});
|
||
|
|
}, 100);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col h-screen w-full">
|
||
|
|
<span className="text-muted-foreground/50 font-medium p-2">CHAT</span>
|
||
|
|
<div ref={chatContainerRef} className="flex-grow overflow-y-auto p-4 space-y-4">
|
||
|
|
{messages.map((message, messageIndex) => (
|
||
|
|
<ChatMessage
|
||
|
|
key={messageIndex}
|
||
|
|
message={message}
|
||
|
|
setContext={setContext}
|
||
|
|
setIsContextExpanded={setIsContextExpanded}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
{isLoading && <LoadingDots />}
|
||
|
|
</div>
|
||
|
|
<div className="p-4 border-t mb-14">
|
||
|
|
<ContextDisplay
|
||
|
|
context={context}
|
||
|
|
isContextExpanded={isContextExpanded}
|
||
|
|
setIsContextExpanded={setIsContextExpanded}
|
||
|
|
setContext={setContext}
|
||
|
|
/>
|
||
|
|
<ChatInput
|
||
|
|
input={input}
|
||
|
|
setInput={setInput}
|
||
|
|
isGenerating={isGenerating}
|
||
|
|
handleSend={() => handleSend(input, context, messages, setMessages, setInput, setIsContextExpanded, setIsGenerating, setIsLoading, abortControllerRef)}
|
||
|
|
handleStopGeneration={() => handleStopGeneration(abortControllerRef)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|