feat: close #680 lazy rendering markdown

app/components/chat.module.scss

@@ -1,5 +1,29 @@
 @import "../styles/animation.scss";
 
+.chat-input-actions {
+  display: flex;
+  flex-wrap: wrap;
+
+  .chat-input-action {
+    display: inline-flex;
+    border-radius: 20px;
+    font-size: 12px;
+    background-color: var(--white);
+    color: var(--black);
+    border: var(--border-in-light);
+    padding: 4px 10px;
+    animation: slide-in ease 0.3s;
+    box-shadow: var(--card-shadow);
+    transition: all ease 0.3s;
+    margin-bottom: 10px;
+    align-items: center;
+
+    &:not(:last-child) {
+      margin-right: 5px;
+    }
+  }
+}
+
 .prompt-toast {
   position: absolute;
   bottom: -50px;

app/components/chat.tsx

@@ -14,6 +14,11 @@ import DeleteIcon from "../icons/delete.svg";
 import MaxIcon from "../icons/max.svg";
 import MinIcon from "../icons/min.svg";
 
+import LightIcon from "../icons/light.svg";
+import DarkIcon from "../icons/dark.svg";
+import AutoIcon from "../icons/auto.svg";
+import BottomIcon from "../icons/bottom.svg";
+
 import {
   Message,
   SubmitKey,
@@ -22,6 +27,7 @@ import {
   ROLES,
   createMessage,
   useAccessStore,
+  Theme,
 } from "../store";
 
 import {
@@ -31,6 +37,7 @@ import {
   isMobileScreen,
   selectOrCopy,
   autoGrowTextArea,
+  getCSSVar,
 } from "../utils";
 
 import dynamic from "next/dynamic";
@@ -60,7 +67,11 @@ export function Avatar(props: { role: Message["role"] }) {
   const config = useChatStore((state) => state.config);
 
   if (props.role !== "user") {
-    return <BotIcon className={styles["user-avtar"]} />;
+    return (
+      <div className="no-dark">
+        <BotIcon className={styles["user-avtar"]} />
+      </div>
+    );
   }
 
   return (
@@ -316,22 +327,78 @@ function useScrollToBottom() {
   // for auto-scroll
   const scrollRef = useRef<HTMLDivElement>(null);
   const [autoScroll, setAutoScroll] = useState(true);
+  const scrollToBottom = () => {
+    const dom = scrollRef.current;
+    if (dom) {
+      setTimeout(() => (dom.scrollTop = dom.scrollHeight), 1);
+    }
+  };
 
   // auto scroll
   useLayoutEffect(() => {
-    const dom = scrollRef.current;
-    if (dom && autoScroll) {
-      setTimeout(() => (dom.scrollTop = dom.scrollHeight), 1);
-    }
+    autoScroll && scrollToBottom();
   });
 
   return {
     scrollRef,
     autoScroll,
     setAutoScroll,
+    scrollToBottom,
   };
 }
 
+export function ChatActions(props: {
+  showPromptModal: () => void;
+  scrollToBottom: () => void;
+  hitBottom: boolean;
+}) {
+  const chatStore = useChatStore();
+
+  const theme = chatStore.config.theme;
+
+  function nextTheme() {
+    const themes = [Theme.Auto, Theme.Light, Theme.Dark];
+    const themeIndex = themes.indexOf(theme);
+    const nextIndex = (themeIndex + 1) % themes.length;
+    const nextTheme = themes[nextIndex];
+    chatStore.updateConfig((config) => (config.theme = nextTheme));
+  }
+
+  return (
+    <div className={chatStyle["chat-input-actions"]}>
+      {!props.hitBottom && (
+        <div
+          className={`${chatStyle["chat-input-action"]} clickable`}
+          onClick={props.scrollToBottom}
+        >
+          <BottomIcon />
+        </div>
+      )}
+      {props.hitBottom && (
+        <div
+          className={`${chatStyle["chat-input-action"]} clickable`}
+          onClick={props.showPromptModal}
+        >
+          <BrainIcon />
+        </div>
+      )}
+
+      <div
+        className={`${chatStyle["chat-input-action"]} clickable`}
+        onClick={nextTheme}
+      >
+        {theme === Theme.Auto ? (
+          <AutoIcon />
+        ) : theme === Theme.Light ? (
+          <LightIcon />
+        ) : theme === Theme.Dark ? (
+          <DarkIcon />
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
 export function Chat(props: {
   showSideBar?: () => void;
   sideBarShowing?: boolean;
@@ -350,7 +417,7 @@ export function Chat(props: {
   const [beforeInput, setBeforeInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const { submitKey, shouldSubmit } = useSubmitHandler();
-  const { scrollRef, setAutoScroll } = useScrollToBottom();
+  const { scrollRef, setAutoScroll, scrollToBottom } = useScrollToBottom();
   const [hitBottom, setHitBottom] = useState(false);
 
   const onChatBodyScroll = (e: HTMLElement) => {
@@ -683,6 +750,8 @@ export function Chat(props: {
                       if (!isMobileScreen()) return;
                       setUserInput(message.content);
                     }}
+                    fontSize={fontSize}
+                    parentRef={scrollRef}
                   />
                 </div>
                 {!isUser && !message.preview && (
@@ -700,6 +769,12 @@ export function Chat(props: {
 
       <div className={styles["chat-input-panel"]}>
         <PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} />
+
+        <ChatActions
+          showPromptModal={() => setShowPromptModal(true)}
+          scrollToBottom={scrollToBottom}
+          hitBottom={hitBottom}
+        />
         <div className={styles["chat-input-panel-inner"]}>
           <textarea
             ref={inputRef}

app/components/home.module.scss

@@ -36,6 +36,7 @@
     max-height: var(--full-height);
 
     border-radius: 0;
+    border: 0;
   }
 }
 
@@ -230,6 +231,7 @@
   flex: 1;
   overflow: auto;
   padding: 20px;
+  padding-bottom: 40px;
   position: relative;
 }
 
@@ -354,11 +356,16 @@
 }
 
 .chat-input-panel {
+  position: relative;
   width: 100%;
   padding: 20px;
-  padding-top: 5px;
+  padding-top: 10px;
   box-sizing: border-box;
   flex-direction: column;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  border-top: var(--border-in-light);
+  box-shadow: var(--card-shadow);
 }
 
 @mixin single-line {

app/components/home.tsx

@@ -17,7 +17,7 @@ import LoadingIcon from "../icons/three-dots.svg";
 import CloseIcon from "../icons/close.svg";
 
 import { useChatStore } from "../store";
-import { isMobileScreen } from "../utils";
+import { getCSSVar, isMobileScreen } from "../utils";
 import Locale from "../locales";
 import { Chat } from "./chat";
 
@@ -66,9 +66,7 @@ function useSwitchTheme() {
       metaDescriptionDark?.setAttribute("content", "#151515");
       metaDescriptionLight?.setAttribute("content", "#fafafa");
     } else {
-      const themeColor = getComputedStyle(document.body)
-        .getPropertyValue("--theme-color")
-        .trim();
+      const themeColor = getCSSVar("--themeColor");
       metaDescriptionDark?.setAttribute("content", themeColor);
       metaDescriptionLight?.setAttribute("content", themeColor);
     }

app/components/markdown.tsx

@@ -47,7 +47,8 @@ const useLazyLoad = (ref: RefObject<Element>): boolean => {
     return () => {
       observer.disconnect();
     };
-  }, [ref]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return isIntersecting;
 };
@@ -57,18 +58,49 @@ export function Markdown(
     content: string;
     loading?: boolean;
     fontSize?: number;
+    parentRef: RefObject<HTMLDivElement>;
   } & React.DOMAttributes<HTMLDivElement>,
 ) {
-  const mdRef = useRef(null);
-  const shouldRender = useLazyLoad(mdRef);
-  const shouldLoading = props.loading || !shouldRender;
+  const mdRef = useRef<HTMLDivElement>(null);
+
+  const parent = props.parentRef.current;
+  const md = mdRef.current;
+  const rendered = useRef(false);
+  const [counter, setCounter] = useState(0);
+
+  useEffect(() => {
+    // to triggr rerender
+    setCounter(counter + 1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.loading]);
+
+  const inView =
+    rendered.current ||
+    (() => {
+      if (parent && md) {
+        const parentBounds = parent.getBoundingClientRect();
+        const mdBounds = md.getBoundingClientRect();
+        const isInRange = (x: number) =>
+          x <= parentBounds.bottom && x >= parentBounds.top;
+        const inView = isInRange(mdBounds.top) || isInRange(mdBounds.bottom);
+
+        if (inView) {
+          rendered.current = true;
+        }
+
+        return inView;
+      }
+    })();
+
+  const shouldLoading = props.loading || !inView;
 
   return (
     <div
       className="markdown-body"
       style={{ fontSize: `${props.fontSize ?? 14}px` }}
-      {...props}
       ref={mdRef}
+      onContextMenu={props.onContextMenu}
+      onDoubleClickCapture={props.onDoubleClickCapture}
     >
       {shouldLoading ? (
         <LoadingIcon />