Minor tweaks for deployment

app/components/ConversationFrontend.tsx

@@ -1,12 +1,12 @@
 import React, { ForwardedRef, useState, useEffect, useRef } from 'react';
-import Markdown from 'react-markdown'
+import Markdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 
 type Message = {
-  role: string
+  role: string;
-  content: string
+  content: string;
-}
+};
 
 interface ConversationProps {
   messages: Message[];
@@ -14,7 +14,7 @@ interface ConversationProps {
   onResendClick: () => void;
   onEditClick: () => void;
   onCopyClick: () => void;
-  isClicked: boolean
+  isClicked: boolean;
 }
 
 const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
@@ -26,16 +26,14 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
       const observer = new IntersectionObserver(
         (entries) => {
           if (entries[0].isIntersecting) {
-            console.log('End of messages reached');
             setIsScrolling(true);
           } else {
-            console.log('End of messages not reached');
             setIsScrolling(false);
           }
         },
         {
           root: document.querySelector('.output'),
-          threshold: 1.0, // Ensure the whole element is visible
+          threshold: 1.0,
         }
       );
 
@@ -51,7 +49,6 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
       };
     }, [messages]);
 
-    // Scroll to bottom when new messages arrive
     useEffect(() => {
       if (isScrolling) {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -63,7 +60,6 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
         <div className="conversation resize" id="conversation">
           {messages.map((message, index) => {
             if (index >= 1) {
-
               return (
                 <div
                   key={index}
@@ -75,8 +71,9 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
                 </div>
               );
             }
+            return null; // Ensure to return null for the first message or if condition is not met
           })}
-
+          <div ref={messagesEndRef} />
           <div className="button-container">
             <div className="tooltip">
               <button type="button" onClick={onStopClick}>
@@ -108,6 +105,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
           <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 384 512" height={30}><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" /></svg>
         </button>
       </div>
+      
     );
   }
 );

app/styles/header.css

@@ -125,4 +125,5 @@ header {
     position: absolute;
     left: 10vw;
     cursor: pointer;
+    padding: 10px;
 }

app/styles/output.css

@@ -35,6 +35,7 @@
     margin: 5px 0;
     max-width: 75%;
     word-wrap: break-word;
+    overflow-wrap: break-word;
 }
 
 .user-message {
@@ -54,11 +55,20 @@
 }
 
 .ai-message table {
+    display: block; /* Treat the table as a block element */
+    position: relative;
+    overflow-x: auto; /* Allow horizontal scrolling */
+    white-space: nowrap; /* Prevent table content from wrapping */
     border: 1px solid var(--ai-message-text-color);
     border-collapse: collapse;
     background-color: var(--conversation-background-color);
+    max-width: 100%; /* Ensure the table doesn't exceed the container width */
+    padding: 10px; /* Optional: Add padding similar to pre/code */
+    border-radius: 4px; /* Optional: Add border radius similar to pre/code */
+    margin-top: 5px;
 }
 
+
 .ai-message th {
     background-color: var(--user-message-background-color);
     align-items: center;
@@ -82,9 +92,14 @@
     margin-left: 1em;
 }
 
-.ai-message code{
+.ai-message code, .ai-message pre {
-    width: 100%;
+    overflow-x: auto;
-    overflow: scroll;
+    white-space: pre;
+    display: block;
+    max-width: 100%;
+    padding: 10px;
+    background-color: var(--code-background-color);
+    border-radius: 4px;
 }
 
 /* Button Container */
@@ -123,17 +138,12 @@
     border-radius: 4px;
     font-size: calc(var(--font-size) * 0.8);
 
-    /* Position the tooltip */
     position: absolute;
     top: 100%;
-    /* Adjusts tooltip to be below the button */
     left: 50%;
     transform: translateX(-50%);
-    /* Center the tooltip */
     white-space: nowrap;
-    /* Prevent line breaks */
 
-    /* Add smooth transition */
     opacity: 0;
     transition: all 0.3s;
 }
@@ -142,7 +152,6 @@
     content: "";
     position: absolute;
     bottom: 100%;
-    /* Arrow on top of tooltip */
     left: 50%;
     transform: translateX(-50%);
     border-width: 5px;
@@ -150,7 +159,6 @@
     border-color: transparent transparent var(--user-message-background-color) transparent;
 }
 
-/* Show the tooltip on hover */
 .tooltip:hover .tooltiptext {
     visibility: visible;
     opacity: 1;