sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Merge pull request 'main' (#78) from YasinOnm08/interstellar_ai:main into main

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/78
This commit is contained in:
Patrick 2024-10-01 15:45:45 +02:00
commit b414fc88e4
3 changed files with 94 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/backend/InputOutputHandler.tsx
View file

@ -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 = () => {
<ConversationFrontend
ref={conversationRef}
messages={messages}
onStopClick={handleStopClick}
onResendClick={handleResendClick}
onEditClick={handleEditClick}
onCopyClick={handleCopyClick}

48
app/components/ConversationFrontend.tsx
View file

@ -7,6 +7,7 @@ type Message = {
interface ConversationProps {
messages: Message[];
onStopClick: () => void;
onResendClick: () => void;
onEditClick: () => void;
onCopyClick: () => void;
@ -14,10 +15,21 @@ interface ConversationProps {
}
const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
({ messages,onStopClick, 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])
@ -40,16 +52,30 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
})}
<div className="button-container">
<button type="button" onClick={onResendClick}>
<img src="/img/resend.svg" alt="resend" />
</button>
<button type="button" onClick={onEditClick}>
<img src="/img/edit.svg" alt="edit" />
</button>
<button type="button" onClick={onCopyClick}>
<img src="/img/copy.svg" alt="copy" />
</button>
<p id="copiedText" style={{ opacity: isClicked ? "1" : "0", transition: "all 0.3s ease-in-out" }}>Copied!</p>
<div className="tooltip">
<button type="button" onClick={onStopClick}>
<img src="/img/resend.svg" alt="stop" />
</button>
<span className="tooltiptext">Stop</span>
</div>
<div className="tooltip">
<button type="button" onClick={onResendClick}>
<img src="/img/resend.svg" alt="resend" />
</button>
<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>

51
app/styles/output.css
View file

@ -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;