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

chat scroll trial 2 / css tweaks

Browse source
This commit is contained in:
YasinOnm08 2024-10-01 11:37:53 +02:00
parent 853967f8e7
commit b12eb25d78
4 changed files with 19 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/components/ConversationFrontend.tsx
View file

@ -16,14 +16,11 @@ interface ConversationProps {
const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>( const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => { ({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
const messagesEndRef = useRef<HTMLDivElement|null>(null)
useEffect(() => { useEffect(() => {
if (ref && typeof ref !== 'function') { messagesEndRef.current?.scrollIntoView()
const element = ref as React.RefObject<HTMLDivElement>; },[messages])
if (element.current) {
element.current.scrollTop = element.current.scrollHeight;
}
}
}, [messages, ref]);
return ( return (
<div className="output" ref={ref}> <div className="output" ref={ref}>
@ -55,6 +52,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
<p id="copiedText" style={{opacity:isClicked?"1":"0", transition:"all 0.3s ease-in-out"}}>Copied!</p> <p id="copiedText" style={{opacity:isClicked?"1":"0", transition:"all 0.3s ease-in-out"}}>Copied!</p>
</div> </div>
</div> </div>
<div ref={messagesEndRef} />
</div> </div>
); );
} }

4
app/styles/history.css
View file

@ -1,7 +1,7 @@
.history-background { .history-background {
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/2; grid-row: 1/2;
height: 40dvh; height: 35dvh;
overflow: hidden; overflow: hidden;
background-color: var(--history-background-color); background-color: var(--history-background-color);
padding: 1em; padding: 1em;
@ -40,6 +40,6 @@
.history-models{ .history-models{
position: relative; position: relative;
height: 90dvh; height: 86dvh;
/* padding-bottom: 3dvh; */ /* padding-bottom: 3dvh; */
} }

3
app/styles/output.css
View file

@ -4,6 +4,7 @@
grid-row: 1 / 4; grid-row: 1 / 4;
background-color: var(--output-background-color); background-color: var(--output-background-color);
margin: 1em; margin: 1em;
margin-bottom: 0;
padding-bottom: 14dvh; padding-bottom: 14dvh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -11,7 +12,7 @@
font-size: 1em; font-size: 1em;
overflow-y: auto; overflow-y: auto;
width: calc(100% - 2em); /* Corrected calculation for width */ width: calc(100% - 2em); /* Corrected calculation for width */
height: 90dvh; height: 86dvh;
} }
#conversation { #conversation {

16
app/styles/responsive.css
View file

@ -73,29 +73,31 @@
/* Input styles */ /* Input styles */
.input { .input {
grid-column: 1 / -1; grid-column: 1 / -1;
gap: 10px; gap: 5px;
padding: 0.5em; padding: 0.5em;
margin: 0 auto; margin: 0 auto;
align-items: center; align-items: center;
width: 90%; bottom: 3dvh;
bottom: 10dvh right: 2vw;
left: 2vw;
justify-content: flex-start;
} }
.input input { .input input {
font-size: 1em; /* Adjust font size */ font-size: 1em; /* Adjust font size */
max-width: 65%; max-width: 70%;
margin-right: 0; margin-right: 0;
border-color: var(--input-border-color); /* Use variable for input border */ border-color: var(--input-border-color); /* Use variable for input border */
color: var(--text-color); /* Use variable for text color */ color: var(--text-color); /* Use variable for text color */
} }
.input button { .input button {
height: 40px; /* Adjust button height */ height: 100%; /* Adjust button height */
width: 40px; /* Adjust button width */ width: 15%; /* Adjust button width */
font-size: 1.2em; /* Adjust button font size */ font-size: 1.2em; /* Adjust button font size */
margin: auto;
background-color: var(--input-button-color); /* Use variable for button color */ background-color: var(--input-button-color); /* Use variable for button color */
color: var(--user-message-text-color); /* Use variable for button text color */ color: var(--user-message-text-color); /* Use variable for button text color */
margin: 0;
} }
.header-logo{ .header-logo{