React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

svg icons for even more everything

Browse source
This commit is contained in:
YasinOnm08 2024-10-02 09:37:58 +02:00
parent 70779db5bf
commit 8d5cf620ff
2 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/components/ConversationFrontend.tsx
View file

@ -53,7 +53,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
if (isScrolling) { if (isScrolling) {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
} }
}, [messages, isScrolling]); }, [messages]);
return ( return (
<div className="output" ref={ref}> <div className="output" ref={ref}>
@ -99,7 +99,9 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
</div> </div>
<div className={"endOfMessages"} ref={messagesEndRef} style={{ height: "3px"}}/> <div className={"endOfMessages"} ref={messagesEndRef} style={{ height: "3px"}}/>
</div> </div>
<button id="scrollToBottom" disabled={isScrolling?true:false} style={{visibility: isScrolling?"hidden":"visible"}} onClick={()=> setIsScrolling(true)}>Down</button> <button id="scrollToBottom" disabled={isScrolling ? true : false} style={{ visibility: isScrolling ? "hidden" : "visible" }} onClick={() => setIsScrolling(true)}>
<svg style={{fill:"var(--text-color)"}} viewBox="0 0 384 512" height={30}><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
</button>
</div> </div>
); );
} }

7
app/styles/output.css
View file

@ -6,14 +6,14 @@
background-color: var(--output-background-color); background-color: var(--output-background-color);
margin: 1em; margin: 1em;
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 14dvh; padding-bottom: 15dvh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
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: 86dvh; height: 85dvh;
position: relative; position: relative;
} }
@ -22,7 +22,7 @@
flex-direction: column; flex-direction: column;
padding-left: 10px; padding-left: 10px;
overflow-y: auto; overflow-y: auto;
height: 80vh; height: 75dvh;
background-color: var(--output-background-color); background-color: var(--output-background-color);
border-radius: 10px; border-radius: 10px;
scroll-behavior: smooth; scroll-behavior: smooth;
@ -73,6 +73,7 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
z-index: 999;
} }
.tooltip .tooltiptext { .tooltip .tooltiptext {