diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index b8f22a8..983a512 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/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 = () => { void; onResendClick: () => void; onEditClick: () => void; onCopyClick: () => void; @@ -15,21 +14,10 @@ interface ConversationProps { } const ConversationFrontend = React.forwardRef( - ({ messages,onStopClick, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef) => { + ({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef) => { const messagesEndRef = useRef(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 })}
-
- - Stop -
-
- - Resend -
-
- - Edit -
-
- - {isClicked?"Copied!": "Copy" } -
+ + + +

Copied!

diff --git a/app/styles/output.css b/app/styles/output.css index cb48ee8..179f174 100644 --- a/app/styles/output.css +++ b/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;