mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-12-16 10:02:30 +03:00
f952d7a269
* feat(v2): loaders added * feature: Add scroll animations * feature: upload ui * feature: upload multiple files * fix: Same file name and size remove * feat(crawler): added * feat(parsers): v2 added more * feat(v2): audio now working * feat(v2): all loaders * feat(v2): explorer * chore: add links * feat(api): added status in return message * refactor(website): remove old code * feat(upload): return type for messages * feature: redirect to upload if ENV=local * fix(chat): fixed some issues * feature: respect response type * loading state * feature: Loading stat * feat(v2): added explore and chat pages * feature: modal settings * style: Chat UI * feature: scroll to bottom when chatting * feature: smooth scroll in chat * feature(anim): Slide chat in * feature: markdown chat * feat(explorer): list * feat(doc): added document item * feat(explore): added modal * Add clarification on Project API keys and web interface for migration scripts to Readme (#58) * fix(demo): changed link * add support to uploading zip file (#62) * Catch UnicodeEncodeError exception (#64) * feature: fixed chatbar * fix(loaders): missing argument * fix: layout * fix: One whole chatbox * fix: Scroll into view * fix(build): vercel issues * chore(streamlit): moved to own file * refactor(api): moved to backend folder * feat(docker): added docker compose * Fix a bug where langchain memories were not being cleaned (#71) * Update README.md (#70) * chore(streamlit): moved to own file * refactor(api): moved to backend folder * docs(readme): updated for new version * docs(readme): added old readme * docs(readme): update copy dot env file * docs(readme): cleanup --------- Co-authored-by: iMADi-ARCH <nandanaditya985@gmail.com> Co-authored-by: Matt LeBel <github@lebel.io> Co-authored-by: Evan Carlson <45178375+EvanCarlson@users.noreply.github.com> Co-authored-by: Mustafa Hasan Khan <65130881+mustafahasankhan@users.noreply.github.com> Co-authored-by: zhulixi <48713110+zlxxlz1026@users.noreply.github.com> Co-authored-by: Stanisław Tuszyński <stanislaw@tuszynski.me>
99 lines
2.5 KiB
TypeScript
99 lines
2.5 KiB
TypeScript
"use client";
|
|
import { cn } from "@/lib/utils";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import { FC, Ref, forwardRef, useEffect, useRef } from "react";
|
|
import ReactMarkdown from "react-markdown";
|
|
|
|
interface ChatMessagesProps {
|
|
history: Array<[string, string]>;
|
|
}
|
|
|
|
const ChatMessages: FC<ChatMessagesProps> = ({ history }) => {
|
|
const lastChatRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
useEffect(() => {
|
|
lastChatRef.current?.scrollIntoView({ behavior: "auto", block: "start" });
|
|
}, [history]);
|
|
|
|
return (
|
|
<div className="overflow-hidden flex flex-col gap-5 scrollbar scroll-smooth">
|
|
{history.length === 0 ? (
|
|
<div className="text-center opacity-50">
|
|
Start a conversation with your brain
|
|
</div>
|
|
) : (
|
|
<AnimatePresence initial={false}>
|
|
{history.map(([speaker, text], idx) => {
|
|
if (idx % 2 === 0)
|
|
return (
|
|
<ChatMessage
|
|
ref={idx === history.length - 1 ? lastChatRef : null}
|
|
key={idx}
|
|
speaker={speaker}
|
|
text={text}
|
|
/>
|
|
);
|
|
else {
|
|
return (
|
|
<ChatMessage
|
|
ref={idx === history.length - 1 ? lastChatRef : null}
|
|
key={idx}
|
|
speaker={speaker}
|
|
text={text}
|
|
left
|
|
/>
|
|
);
|
|
}
|
|
})}
|
|
</AnimatePresence>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ChatMessage = forwardRef(
|
|
(
|
|
{
|
|
speaker,
|
|
text,
|
|
left = false,
|
|
}: {
|
|
speaker: string;
|
|
text: string;
|
|
left?: boolean;
|
|
},
|
|
ref
|
|
) => {
|
|
return (
|
|
<motion.div
|
|
ref={ref as Ref<HTMLDivElement>}
|
|
initial={{ y: -24, opacity: 0 }}
|
|
animate={{
|
|
y: 0,
|
|
opacity: 1,
|
|
transition: { duration: 0.2, ease: "easeOut" },
|
|
}}
|
|
exit={{ y: -24, opacity: 0 }}
|
|
className={cn(
|
|
"py-3 px-3 rounded-lg border border-black/10 dark:border-white/25 flex flex-col max-w-4xl overflow-hidden scroll-pt-32",
|
|
left ? "self-start mr-20" : "self-end ml-20"
|
|
)}
|
|
>
|
|
<span className={cn("capitalize text-xs")}>{speaker}</span>
|
|
<>
|
|
<ReactMarkdown
|
|
// remarkRehypeOptions={{}}
|
|
className="prose dark:prose-invert"
|
|
>
|
|
{text}
|
|
</ReactMarkdown>
|
|
</>
|
|
</motion.div>
|
|
);
|
|
}
|
|
);
|
|
|
|
ChatMessage.displayName = 'ChatMessage';
|
|
|
|
export default ChatMessages;
|