diff --git a/src/client/components/ConversationList.tsx b/src/client/components/ConversationList.tsx index fe97da6..46a3f45 100644 --- a/src/client/components/ConversationList.tsx +++ b/src/client/components/ConversationList.tsx @@ -4,15 +4,16 @@ import { useState } from "react"; import Markdown from "markdown-to-jsx"; import type { Conversation } from "@wasp/entities"; - import logo from "../static/captn-logo.png"; type ConversationsListProps = { conversations: Conversation[]; + isLoading: boolean; }; export default function ConversationsList({ conversations, + isLoading, }: ConversationsListProps) { return (
@@ -84,6 +85,42 @@ export default function ConversationsList({
); })} +
+
+ + captn logo + +
+ + I am presently navigating the waters of your request. +
+ Kindly stay anchored, and I will promptly return to you once I + have information to share. +
+
+
+
); } diff --git a/src/client/components/ConversationWrapper.tsx b/src/client/components/ConversationWrapper.tsx index 3b34a8d..c33690e 100644 --- a/src/client/components/ConversationWrapper.tsx +++ b/src/client/components/ConversationWrapper.tsx @@ -82,12 +82,16 @@ export default function ConversationWrapper() { const scrollToBottom = () => { if (chatWindowRef.current) { - // @ts-ignore - chatWindowRef.current.scrollTo({ + // Delay the scrolling animation by 500ms + setTimeout(() => { + // Scroll to the bottom with a smooth behavior // @ts-ignore - top: chatWindowRef.current.scrollHeight, - behavior: "smooth", - }); + chatWindowRef.current.scrollTo({ + // @ts-ignore + top: chatWindowRef.current.scrollHeight, + behavior: "smooth", + }); + }, 200); } }; @@ -152,7 +156,13 @@ export default function ConversationWrapper() {
{conversations && ( - + )}
{isLoading && }