Something went wrong. Try again.
A rust frontend for LLM's using the openai api.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313#ai_chat { display: flex; flex-direction: column; /*justify-content: center;*/ align-items: center; width: 100%; height: 100vh;
position: relative; overflow: hidden; /*background-color: oklch(0.2 0.011 268.074);*/
#info { /*background-color: oklch(0.2 0.011 268.074);*/ border-bottom: 1px solid var(--border);
width: 100%; height: fit-content; text-align: center; padding-bottom: 10px; padding-top: 10px; }
::-webkit-scrollbar { width: 10px; height: 10px; /* for horizontal bars */ }
/*::-webkit-scrollbar-track { background-color: var(--surface1); }*/
#chats { width: 100%; padding: 2vw; padding-right: 15vw; display: flex; row-gap: 2vh; flex-direction: column; overflow: scroll; flex: 1;
padding-bottom: 10vh;
.message { min-width: 150px; width: fit-content; /*height: fit-content;*/ background-color: var(--surface1); /*border-radius: 4px;*/ border-top-right-radius: 4px; border-bottom-right-radius: 4px; overflow: hidden; flex-shrink: 0; gap: 8;
.author { background-color: var(--surface2); /*width: 100%;*/ display: block; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; }
.content { padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px;
details { transition: background-color 0.2s ease-out; background-color: var(--surface2); border-radius: 4px; margin-bottom: 10px;
&:has(summary:hover) { background-color: var(--hover2); transition: background-color 0.05s ease-in !important; }
&:has(summary:active) { background-color: var(--pressed2); }
summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; padding-left: 10px; padding-right: 10px; padding-top: 8px; padding-bottom: 8px;
.icon { /*position: relative;*/ height: 22px; width: 22px;
/* hugeicons:ai-brain-01 - MIT */ --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7 4.5a3 3 0 0 0-2.567 4.554a3.001 3.001 0 0 0 0 5.893M7 4.5a2.5 2.5 0 0 1 5 0v15a2.5 2.5 0 0 1-5 0a3 3 0 0 1-2.567-4.553M7 4.5c0 .818.393 1.544 1 2m-3.567 8.447A3 3 0 0 1 6 13.67m11 5.83a3 3 0 0 0 2.567-4.554a3.001 3.001 0 0 0 0-5.893M17 19.5a2.5 2.5 0 0 1-5 0v-15a2.5 2.5 0 0 1 5 0a3 3 0 0 1 2.567 4.553M17 19.5c0-.818-.393-1.544-1-2m3.567-8.447A3 3 0 0 1 18 10.33'/%3E%3C/svg%3E"); background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } }
&[open] summary { border-bottom: 1px solid var(--border2); padding-bottom: 10px; }
/* TODO add animation when open/closing*/
/* This is the actual text when unfolded*/ p { padding-left: 10px; padding-right: 10px; padding-bottom: 8px; padding-top: 10px; color: var(--text-muted); font-size: 14px; } }
p { white-space: pre-wrap; } } } }
#input { /*background-color: oklch(0.2 0.011 268.074);*/ /*position: sticky;*/ /*border-top: 1px solid var(--border);*/
width: 100%; /*bottom: 0;*/ padding-bottom: 5vh; padding-top: 1vh; justify-content: center; align-items: center; display: flex;
form { background-color: var(--surface1); border-radius: 4px; border: none; width: 90%; height: 8vh; min-height: 50px; outline: unset; position: relative;
outline: 1.5px solid transparent; outline-offset: 0; /*Fix the thing resizing for whatever reason*/
transition: outline-color 0.4s ease-out, background-color 0.4s ease-out, box-shadow 2s ease-out;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
&:hover { transition: outline-color 0.15s ease-in, background-color 0.15s ease-in, box-shadow 0.15s ease-in !important; background-color: var(--hover1); outline-color: var(--border);
#submit_button { background-color: var(--hover2);
&:hover { background-color: var(--hover3) !important; outline-color: var(--hover3);
&:active { background-color:var(--hover3); outline-color: transparent; } }
transition: outline-color 0.15s ease-in, background-color 0.15s ease-in, opacity 0.15s ease-in; } } &:has(textarea:focus) { transition: outline-color 0.4s ease-in, background-color 0.15s ease-in, box-shadow 2s ease-in !important;
background-color: var(--surface1) !important; outline-color: var(--hover3);
#submit_button { background-color: var(--surface2); outline-color: var(--hover3);
transition: outline-color 0.4s ease-in, background-color 0.15s ease-in opacity 0.15s ease-in;
&:hover { background-color: var(--hover2);
&:active { background-color:var(--hover3); outline-color: transparent; } } } }
textarea { width: 100%; height: 100%; /*max-width: 100%;*/ background-color: transparent; border: unset; outline: unset;
padding-left: 2vw; padding-right: 8vw; padding-top: 2vh; resize: none;
&::placeholder { color: var(--text-muted); opacity: 1; } }
/* When the textarea is hidden */ &:has(textarea:placeholder-shown) #submit_button { opacity: 0; pointer-events: none;
transition: outline-color 0.2s ease-out, background-color 0.2s ease-out, opacity 0.2s ease-out !important; }
div { position: absolute; bottom: 0px; z-index: 1; pointer-events: none; width: 100%; height: 100%; display: flex; align-items: center;
#submit_button { z-index: 2; cursor: pointer; pointer-events: auto; height: 40px; width: 40px; position: absolute; right: 2vw; background-color: var(--surface1); border: none; border-radius: 4px; opacity: 1; padding: 5px;
outline: 1.5px solid transparent; outline-offset: 0; /*Fix the thing resizing for whatever reason*/
/* Transition when clicking off the textarea */ transition: outline-color 0.4s ease-out, background-color 0.4s ease-out, opacity 0.15s ease-in;
.icon { position: relative; height: 100%; width: 100%;
/* famicons:return-down-back-outline */ --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='m112 352l-64-64l64-64'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M64 288h294c58.76 0 106-49.33 106-108v-20'/%3E%3C/svg%3E"); background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } } } } }}