diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index 983a512..b8f22a8 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: localStorage.getItem('model'), model_type: type, access_token: accessToken, api_key: api_key }) + postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", model_type: type, access_token: accessToken, api_key: api_key }) startGetWorker() } } @@ -226,6 +226,11 @@ const InputOutputBackend: React.FC = () => { } }; + const handleStopClick = () => { + endGetWorker() + getNewToken() + } + const handleResendClick = () => { var temporary_message = messages[messages.length - 2]['content'] const updatedMessages = messages.slice(0, -2) @@ -272,6 +277,7 @@ const InputOutputBackend: React.FC = () => { void; onResendClick: () => void; onEditClick: () => void; onCopyClick: () => void; @@ -14,10 +15,21 @@ interface ConversationProps { } const ConversationFrontend = React.forwardRef( - ({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef) => { + ({ messages,onStopClick, 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]) @@ -40,16 +52,30 @@ const ConversationFrontend = React.forwardRef })}
- - - -

Copied!

+
+ + Stop +
+
+ + Resend +
+
+ + Edit +
+
+ + {isClicked?"Copied!": "Copy" } +
diff --git a/app/styles/output.css b/app/styles/output.css index 179f174..cb48ee8 100644 --- a/app/styles/output.css +++ b/app/styles/output.css @@ -20,7 +20,7 @@ flex-direction: column; padding-left: 10px; overflow-y: auto; - max-height: 80vh; + height: 80vh; background-color: var(--output-background-color); border-radius: 10px; scroll-behavior: smooth; @@ -72,6 +72,55 @@ 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;