changed some bugs

src/app/components/Chat/Messages.tsx

@@ -1,6 +1,6 @@
 // src/app/components/Chat/Messages.tsx
 import { Message } from "ai";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useState } from "react";
 import { marked } from "marked";
 
 export default function Messages({
@@ -11,11 +11,26 @@ export default function Messages({
   isCrawlComplete: boolean;
 }) {
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const [renderedMessages, setRenderedMessages] = useState<{
+    [key: number]: string;
+  }>({});
 
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
+  useEffect(() => {
+    const renderMessages = async () => {
+      const rendered: { [key: number]: string } = {};
+      for (let i = 0; i < messages.length; i++) {
+        rendered[i] = await marked(messages[i].content);
+      }
+      setRenderedMessages(rendered);
+    };
+
+    renderMessages();
+  }, [messages]);
+
   // Function to safely render HTML content
   const renderHTML = (html: string) => {
     return { __html: html };
@@ -79,9 +94,15 @@ export default function Messages({
                     : "bg-blue-100 text-gray-800"
                 }`}
               >
-                <div
-                  dangerouslySetInnerHTML={renderHTML(marked(msg.content))}
-                />
+                {renderedMessages[index] ? (
+                  <div
+                    dangerouslySetInnerHTML={renderHTML(
+                      renderedMessages[index]
+                    )}
+                  />
+                ) : (
+                  <div>Loading...</div>
+                )}
               </div>
             </div>
           ))

src/app/components/InstructionModal.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { AiFillGithub } from "react-icons/ai";
 
 interface InstructionModalProps {
   isOpen: boolean;
@@ -14,51 +13,28 @@ const InstructionModal: React.FC<InstructionModalProps> = ({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="bg-base-200 p-5 z-50 rounded-lg shadow-lg relative w-8/12 md:w-5/12">
+      <div className="bg-base-200 p-5 z-50 rounded-lg shadow-lg relative w-11/12 max-w-2xl">
         <button
           onClick={onClose}
           className="absolute right-2 text-3xl top-2 text-gray-500 hover:text-gray-700"
         >
           &times;
         </button>
         <h2 className="text-2xl font-bold mb-4">Instructions</h2>
-        <p>
-          This chatbot demonstrates a RAG (Retrieval-Augmented Generation)
-          pattern using{" "}
-          <a
-            href="https://pinecone.io"
-            target="_blank"
-            className="text-primary"
-          >
-            Pinecone
-          </a>{" "}
-          and Next.js. The bot is designed to provide information about SIBO
-          (Small Intestinal Bacterial Overgrowth).
-        </p>
-        <br />
-        <p>
-          In the context panel on the right (or below on mobile devices), you
-          can see Reddit posts from the r/SIBO subreddit. These posts are
-          indexed in Pinecone to provide relevant context for the chatbot's
-          responses.
-        </p>
-        <br />
-        <p>
-          You can ask the chatbot questions about SIBO, and it will use the
-          indexed Reddit posts to provide informed answers. The relevant context
-          used for each response will be highlighted in the context panel.
-        </p>
-        <br />
-        <p>
-          The chat interface allows you to have a conversation about SIBO, with
-          each of your messages and the bot's responses displayed in the chat
-          window.
-        </p>
-        <br />
-        <p>
-          For more information about this project, you can click the GitHub icon
-          at the bottom of the page to view the source code.
-        </p>
+        <ul className="list-disc pl-5 space-y-2">
+          <li>
+            This chatbot demonstrates a RAG pattern using Pinecone and Next.js.
+          </li>
+          <li>
+            It provides information about SIBO (Small Intestinal Bacterial
+            Overgrowth).
+          </li>
+          <li>The context panel shows indexed Reddit posts from r/SIBO.</li>
+          <li>Ask questions about SIBO to get informed answers.</li>
+          <li>Relevant context is highlighted in the context panel.</li>
+          <li>The chat interface allows for a conversation about SIBO.</li>
+          <li>Click the GitHub icon at the bottom for the source code.</li>
+        </ul>
       </div>
       <div
         className="absolute inset-0 bg-black z-20 opacity-50"