Add Chat Icon Animation to the Last AI Message (#418)

This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-05-31 21:54:37 -03:00 • committed by GitHub
commit 08d981822b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 2 deletions

View file

@ -16,9 +16,11 @@ import Convert from "ansi-to-html";
export default function ChatMessage({ export default function ChatMessage({
chat, chat,
lockChat, lockChat,
lastMessage,
}: { }: {
chat: ChatMessageType; chat: ChatMessageType;
lockChat: boolean; lockChat: boolean;
lastMessage: boolean;
}) { }) {
const convert = new Convert({ newline: true }); const convert = new Convert({ newline: true });
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
@ -48,7 +50,7 @@ export default function ChatMessage({
"absolute transition-opacity duration-500 scale-150 " + "absolute transition-opacity duration-500 scale-150 " +
(lockChat ? "opacity-100" : "opacity-0") (lockChat ? "opacity-100" : "opacity-0")
} }
src={AiIcon} src={lastMessage ? AiIcon : AiIconStill}
/> />
<img <img
className={ className={

View file

@ -416,7 +416,12 @@ export default function ChatModal({
> >
{chatHistory.length > 0 ? ( {chatHistory.length > 0 ? (
chatHistory.map((c, i) => ( chatHistory.map((c, i) => (
<ChatMessage lockChat={lockChat} chat={c} key={i} /> <ChatMessage
lockChat={lockChat}
chat={c}
lastMessage={chatHistory.length - 1 == i ? true : false}
key={i}
/>
)) ))
) : ( ) : (
<div className="flex flex-col h-full text-center justify-center w-full items-center align-middle"> <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle">