Merge pull request 'main' (#117) from sageTheDm/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/117

app/components/ConversationFrontend.tsx

@@ -1,13 +1,13 @@
 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';
 import { useChatHistory } from '../hooks/useChatHistory';
 
 type Message = {
-  role: string
-  content: string
-}
+  role: string;
+  content: string;
+};
 
 interface ConversationProps {
   messages: Message[];
@@ -15,7 +15,7 @@ interface ConversationProps {
   onResendClick: () => void;
   onEditClick: () => void;
   onCopyClick: () => void;
-  isClicked: boolean
+  isClicked: boolean;
 }
 
 const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
@@ -28,16 +28,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,
         }
       );
 
@@ -53,7 +51,6 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
       };
     }, [messages]);
 
-    // Scroll to bottom when new messages arrive
     useEffect(() => {
       if (isScrolling) {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -65,7 +62,6 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
         <div className="conversation resize" id="conversation">
           {chatHistory.chats[chatHistory.selectedIndex].messages.map((message, index) => {
             if (index >= 1) {
-
               return (
                 <div
                   key={index}
@@ -77,8 +73,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}>
@@ -110,6 +107,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 {
@@ -49,42 +50,56 @@
     color: var(--ai-message-text-color);
 }
 
-.ai-message a{
+.ai-message a {
     color: var(--text-color);
 }
 
-.ai-message table{
+.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{
+
+.ai-message th {
     background-color: var(--user-message-background-color);
     align-items: center;
     padding: 5px;
 }
 
-.ai-message td{
+.ai-message td {
     align-items: center;
     padding: 5px;
 }
 
-.ai-message img{
+.ai-message img {
     max-width: 80%;
 }
 
-.ai-message a:hover{
+.ai-message a:hover {
     filter: brightness(70%);
 }
 
-.ai-message li{
+.ai-message li {
     margin-left: 1em;
 }
 
-.ai-message code{
-    width: 100%;
-    overflow: scroll;
+.ai-message code, .ai-message pre {
+    overflow-x: auto;
+    white-space: pre;
+    display: block;
+    max-width: 100%;
+    padding: 10px;
+    background-color: var(--code-background-color);
+    border-radius: 4px;
 }
 
 /* Button Container */
@@ -121,19 +136,14 @@
     text-align: center;
     padding: 5px;
     border-radius: 4px;
-    font-size: calc(var(--font-size)*0.8);
+    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,20 +159,19 @@
     border-color: transparent transparent var(--user-message-background-color) transparent;
 }
 
-/* Show the tooltip on hover */
 .tooltip:hover .tooltiptext {
     visibility: visible;
     opacity: 1;
 }
 
-#copiedText{
+#copiedText {
     margin-top: 1em;
-    cursor:default;
+    cursor: default;
     pointer-events: none;
     user-select: none;
 }
 
-#scrollToBottom{
+#scrollToBottom {
     scroll-behavior: smooth;
     visibility: hidden;
     position: absolute;
@@ -174,4 +182,4 @@
     bottom: 16dvh;
     left: 50%;
     translate: -25px;
-}
+}