app/backend/InputOutputHandler.tsx

@@ -176,7 +176,7 @@ const InputOutputBackend: React.FC = () => {
             }
           }
           setInputMessage("")
-          postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", model_type: type, access_token: accessToken, api_key: api_key })
+          postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: localStorage.getItem('model'), model_type: type, access_token: accessToken, api_key: api_key })
           startGetWorker()
         }
       }
@@ -226,11 +226,6 @@ const InputOutputBackend: React.FC = () => {
     }
   };
 
-  const handleStopClick = () => { 
-    endGetWorker()
-    getNewToken()
-  }
-
   const handleResendClick = () => {
     var temporary_message = messages[messages.length - 2]['content']
     const updatedMessages = messages.slice(0, -2)
@@ -277,7 +272,6 @@ const InputOutputBackend: React.FC = () => {
       <ConversationFrontend
         ref={conversationRef}
         messages={messages}
-        onStopClick={handleStopClick}
         onResendClick={handleResendClick}
         onEditClick={handleEditClick}
         onCopyClick={handleCopyClick}

app/components/ConversationFrontend.tsx

@@ -7,7 +7,6 @@ type Message = {
 
 interface ConversationProps {
   messages: Message[];
-  onStopClick: () => void;
   onResendClick: () => void;
   onEditClick: () => void;
   onCopyClick: () => void;
@@ -15,21 +14,10 @@ interface ConversationProps {
 }
 
 const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
-  ({ messages,onStopClick, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
+  ({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
 
     const messagesEndRef = useRef<HTMLDivElement | null>(null)
 
-    useEffect(() => {
-    if (messagesEndRef.current) {
-      const rect = messagesEndRef.current.getBoundingClientRect();
-      console.log('Position of the target div:');
-      console.log('Top:', rect.top);      // Distance from the top of the viewport
-      console.log('Left:', rect.left);    // Distance from the left of the viewport
-      console.log('Width:', rect.width);   // Width of the element
-      console.log('Height:', rect.height); // Height of the element
-    }
-  }, [messages]);
-
     useEffect(() => {
       messagesEndRef.current?.scrollIntoView()
     }, [messages])
@@ -52,30 +40,16 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
           })}
 
           <div className="button-container">
-            <div className="tooltip">
+            <button type="button" onClick={onResendClick}>
-              <button type="button" onClick={onStopClick}>
+              <img src="/img/resend.svg" alt="resend" />
-                <img src="/img/resend.svg" alt="stop" />
+            </button>
-              </button>
+            <button type="button" onClick={onEditClick}>
-              <span className="tooltiptext">Stop</span>
+              <img src="/img/edit.svg" alt="edit" />
-            </div>
+            </button>
-            <div className="tooltip">
+            <button type="button" onClick={onCopyClick}>
-              <button type="button" onClick={onResendClick}>
+              <img src="/img/copy.svg" alt="copy" />
-                <img src="/img/resend.svg" alt="resend" />
+            </button>
-              </button>
+            <p id="copiedText" style={{ opacity: isClicked ? "1" : "0", transition: "all 0.3s ease-in-out" }}>Copied!</p>
-              <span className="tooltiptext">Resend</span>
-            </div>
-            <div className="tooltip">
-              <button type="button" onClick={onEditClick}>
-                <img src="/img/edit.svg" alt="edit" />
-              </button>
-              <span className="tooltiptext">Edit</span>
-            </div>
-            <div className="tooltip">
-              <button type="button" onClick={onCopyClick}>
-                <img src="/img/copy.svg" alt="copy" />
-              </button>
-              <span className="tooltiptext">{isClicked?"Copied!": "Copy" }</span>
-            </div>
           </div>
           <div ref={messagesEndRef} />
         </div>

app/styles/output.css

@@ -20,7 +20,7 @@
     flex-direction: column;
     padding-left: 10px;
     overflow-y: auto;
-    height: 80vh;
+    max-height: 80vh;
     background-color: var(--output-background-color);
     border-radius: 10px;
     scroll-behavior: smooth;
@@ -72,55 +72,6 @@
     width: 20px;
 }
 
-.tooltip {
-    position: relative;
-    display: inline-block;
-    margin: 5px;
-    cursor: pointer;
-}
-
-.tooltip .tooltiptext {
-    visibility: hidden;
-    background-color: var(--user-message-background-color);
-    color: var(--text-color);
-    text-align: center;
-    padding: 5px;
-    border-radius: 4px;
-    font-size: calc(var(--font-size)*0.8);
-
-    /* Position the tooltip */
-    position: absolute;
-    top: 125%;
-    /* 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;
-}
-
-.tooltip .tooltiptext::after {
-    content: "";
-    position: absolute;
-    bottom: 100%;
-    /* Arrow on top of tooltip */
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent var(--user-message-background-color) transparent;
-}
-
-/* Show the tooltip on hover */
-.tooltip:hover .tooltiptext {
-    visibility: visible;
-    opacity: 1;
-}
-
 #copiedText{
     margin-top: 1em;
     cursor:default;