|
|
|
@ -4,7 +4,7 @@ import { useDarkTheme } from '../hooks';
|
|
|
|
|
import Hero from '../Hero';
|
|
|
|
|
import { AppDispatch } from '../store';
|
|
|
|
|
import ConversationBubble from './ConversationBubble';
|
|
|
|
|
import {
|
|
|
|
|
import conversationSlice, {
|
|
|
|
|
addQuery,
|
|
|
|
|
fetchAnswer,
|
|
|
|
|
selectQueries,
|
|
|
|
@ -17,16 +17,17 @@ import Spinner from './../assets/spinner.svg';
|
|
|
|
|
import { FEEDBACK, Query } from './conversationModels';
|
|
|
|
|
import { sendFeedback } from './conversationApi';
|
|
|
|
|
import ArrowDown from './../assets/arrow-down.svg';
|
|
|
|
|
|
|
|
|
|
import { selectConversationId } from '../preferences/preferenceSlice';
|
|
|
|
|
export default function Conversation() {
|
|
|
|
|
const queries = useSelector(selectQueries);
|
|
|
|
|
const status = useSelector(selectStatus);
|
|
|
|
|
const conversationId = useSelector(selectConversationId)
|
|
|
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
|
|
|
const endMessageRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
const inputRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
const [isDarkTheme]= useDarkTheme();
|
|
|
|
|
const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
|
|
|
|
|
|
|
|
|
|
const fetchStream = useRef<any>(new AbortController())
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
scrollIntoView();
|
|
|
|
|
}, [queries.length, queries[queries.length - 1]]);
|
|
|
|
@ -37,7 +38,13 @@ export default function Conversation() {
|
|
|
|
|
element.focus();
|
|
|
|
|
}
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
useEffect(()=>{
|
|
|
|
|
console.log('changed the conversation', conversationId)
|
|
|
|
|
return ()=>{
|
|
|
|
|
console.log('i just did abortion !');
|
|
|
|
|
fetchStream.current.abort();
|
|
|
|
|
}
|
|
|
|
|
},[conversationId])
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const observerCallback: IntersectionObserverCallback = (entries) => {
|
|
|
|
|
entries.forEach((entry) => {
|
|
|
|
@ -65,13 +72,17 @@ export default function Conversation() {
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
fetchStream.current != null && useEffect(()=>{
|
|
|
|
|
return ()=>{fetchStream.current.abort()}
|
|
|
|
|
},[selectConversationId])
|
|
|
|
|
const handleQuestion = (question: string) => {
|
|
|
|
|
question = question.trim();
|
|
|
|
|
if (question === '') return;
|
|
|
|
|
dispatch(addQuery({ prompt: question }));
|
|
|
|
|
dispatch(fetchAnswer({ question }));
|
|
|
|
|
};
|
|
|
|
|
//@ts-ignore
|
|
|
|
|
fetchStream.current = dispatch(fetchAnswer({ question }));
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
const handleFeedback = (query: Query, feedback: FEEDBACK, index: number) => {
|
|
|
|
|
const prevFeedback = query.feedback;
|
|
|
|
|
dispatch(updateQuery({ index, query: { feedback } }));
|
|
|
|
|