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

Compare commits

base: YasinOnm08:108eca5ea0b45b6635682813d4f0e5e4e7590e30
Branches Tags
YasinOnm08:main
React-Group:main
..
compare: YasinOnm08:8d5cf620ff3fcb6b1f4af2bc01e8ccbee18a8696
Branches Tags
YasinOnm08:main
React-Group:main

3 commits
108eca5ea0 ... 8d5cf620ff

Author SHA1 Message Date
YasinOnm08
8d5cf620ff svg icons for even more everything 2024-10-02 09:37:58 +02:00
YasinOnm08
70779db5bf svg icons for everything 2024-10-02 09:23:29 +02:00
YasinOnm08
b839b04df2 buttons to svg and dynamic fill color for each 2024-10-02 09:01:50 +02:00
7 changed files with 24 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

15
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}>
@ -75,32 +75,33 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
<div className="button-container"> <div className="button-container">
<div className="tooltip"> <div className="tooltip">
<button type="button" onClick={onStopClick}> <button type="button" onClick={onStopClick}>
<img src="/img/resend.svg" alt="stop" /> <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512"><path d="M256 0c-25.3 0-47.2 14.7-57.6 36c-7-2.6-14.5-4-22.4-4c-35.3 0-64 28.7-64 64l0 165.5-2.7-2.7c-25-25-65.5-25-90.5 0s-25 65.5 0 90.5L106.5 437c48 48 113.1 75 181 75l8.5 0 8 0c1.5 0 3-.1 4.5-.4c91.7-6.2 165-79.4 171.1-171.1c.3-1.5 .4-3 .4-4.5l0-176c0-35.3-28.7-64-64-64c-5.5 0-10.9 .7-16 2l0-2c0-35.3-28.7-64-64-64c-7.9 0-15.4 1.4-22.4 4C303.2 14.7 281.3 0 256 0zM240 96.1l0-.1 0-32c0-8.8 7.2-16 16-16s16 7.2 16 16l0 31.9 0 .1 0 136c0 13.3 10.7 24 24 24s24-10.7 24-24l0-136c0 0 0 0 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16l0 55.9c0 0 0 .1 0 .1l0 80c0 13.3 10.7 24 24 24s24-10.7 24-24l0-71.9c0 0 0-.1 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16l0 172.9c-.1 .6-.1 1.3-.2 1.9c-3.4 69.7-59.3 125.6-129 129c-.6 0-1.3 .1-1.9 .2l-4.9 0-8.5 0c-55.2 0-108.1-21.9-147.1-60.9L52.7 315.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L119 336.4c6.9 6.9 17.2 8.9 26.2 5.2s14.8-12.5 14.8-22.2L160 96c0-8.8 7.2-16 16-16c8.8 0 16 7.1 16 15.9L192 232c0 13.3 10.7 24 24 24s24-10.7 24-24l0-135.9z"/></svg> </button>
</button>
<span className="tooltiptext">Stop</span> <span className="tooltiptext">Stop</span>
</div> </div>
<div className="tooltip"> <div className="tooltip">
<button type="button" onClick={onResendClick}> <button type="button" onClick={onResendClick}>
<img src="/img/resend.svg" alt="resend" /> <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512"><path d="M463.5 224l8.5 0c13.3 0 24-10.7 24-24l0-128c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l119.5 0z"/></svg>
</button> </button>
<span className="tooltiptext">Resend</span> <span className="tooltiptext">Resend</span>
</div> </div>
<div className="tooltip"> <div className="tooltip">
<button type="button" onClick={onEditClick}> <button type="button" onClick={onEditClick}>
<img src="/img/edit.svg" alt="edit" /> <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512"><path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z"/></svg>
</button> </button>
<span className="tooltiptext">Edit</span> <span className="tooltiptext">Edit</span>
</div> </div>
<div className="tooltip"> <div className="tooltip">
<button type="button" onClick={onCopyClick}> <button type="button" onClick={onCopyClick}>
<img src="/img/copy.svg" alt="copy" /> <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512" preserveAspectRatio="none"><path d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/></svg>
</button> </button>
<span className="tooltiptext">{isClicked?"Copied!": "Copy" }</span> <span className="tooltiptext">{isClicked?"Copied!": "Copy" }</span>
</div> </div>
</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>
); );
} }

4
app/components/Documentation.tsx
View file

@ -31,10 +31,10 @@ const Documentation = () => {
</p> </p>
<h2 className="subtitle">Draw.io:</h2> <h2 className="subtitle">Draw.io:</h2>
<p className="paragraph">Insert your Draw.io diagrams here.</p> <img src="/img/Live-Message-Idee.jpg" alt='Live Message Skizze' />
<h2 className="subtitle">Inspiration:</h2> <h2 className="subtitle">Inspiration:</h2>
<p className="paragraph">Describe your inspirations here.</p> <p className="paragraph">We got our inspiration from Huggingchat.</p>
<h2 className="subtitle">First prototype:</h2> <h2 className="subtitle">First prototype:</h2>
<p className="paragraph"> <p className="paragraph">

4
app/components/InputFrontend.tsx
View file

@ -49,10 +49,10 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
/> />
<button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}> <button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}>
<img src="/img/send.svg" alt="send" /> <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512" width={20}><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
</button> </button>
<button className={`microphone-button ${isRecording ? "red" : "var(--input-button-color)"}`} type="button" onClick={onMicClick}> <button className={`microphone-button ${isRecording ? "red" : "var(--input-button-color)"}`} type="button" onClick={onMicClick}>
<img src="/img/microphone.svg" alt="microphone" /> <svg style={{fill:"var(--text-color)"}} viewBox="0 0 384 512" width={15}><path d="M192 0C139 0 96 43 96 96l0 160c0 53 43 96 96 96s96-43 96-96l0-160c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 89.1 66.2 162.7 152 174.4l0 33.6-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l72 0 72 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-33.6c85.8-11.7 152-85.3 152-174.4l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 70.7-57.3 128-128 128s-128-57.3-128-128l0-40z"/></svg>
</button> </button>
</div> </div>
); );

2
app/components/Login.tsx
View file

@ -81,7 +81,7 @@ const Login: React.FC = () => {
<div> <div>
{/* Login or Settings Button */} {/* Login or Settings Button */}
<button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}> <button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
{isLoggedIn ? <img src="" alt="Settings" /> : 'Log In'} {isLoggedIn ? <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={25} height={35} preserveAspectRatio="xMidYMid meet"><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg> : 'Log In'}
</button> </button>
{/* Conditional rendering of the Login Popup */} {/* Conditional rendering of the Login Popup */}

12
app/styles/header.css
View file

@ -75,7 +75,7 @@ header{
.login-button-container{ .login-button-container{
position: absolute; position: absolute;
top: 0.2vh; top: 0.1vh;
right: 1vw; right: 1vw;
height: 100%; height: 100%;
display: flex; display: flex;
@ -83,11 +83,10 @@ header{
} }
.header-login-button{ .header-login-button{
height: 100%;
width:4vw;
font-size: var(--font-size); font-size: var(--font-size);
/* position: absolute; padding: 3px;
top: 1.5vh;
right: 1vw; */
padding: 10px 20px;
background-color: var(--input-button-color); background-color: var(--input-button-color);
color: var(--text-color); color: var(--text-color);
border: none; border: none;
@ -95,6 +94,9 @@ header{
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: background-color 0.3s;
font-family: var(--font-family); font-family: var(--font-family);
display: flex;
justify-content: center;
align-items: center;
} }
.header-login-button:hover { .header-login-button:hover {

13
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;
@ -69,16 +69,11 @@
background-color: var(--button-hover-background-color); background-color: var(--button-hover-background-color);
} }
.button-container img {
height: 20px;
width: 20px;
}
.tooltip { .tooltip {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 5px;
cursor: pointer; cursor: pointer;
z-index: 999;
} }
.tooltip .tooltiptext { .tooltip .tooltiptext {

BIN
public/img/Live-Message-Idee.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB