Skip to content

Commit

Permalink
feature: fullscreen chat input (#269)
Browse files Browse the repository at this point in the history 
* feature: fullscreen chat input

* css fixes
  • Loading branch information
@3clyp50
3clyp50 authored Dec 19, 2024
1 parent c18ea29 commit d42bc2c
Show file tree
Hide file tree
Showing 5 changed files with 233 additions and 48 deletions.
95 changes: 92 additions & 3 deletions webui/css/modals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@

/* Modal Description */
.modal-description {
padding: 0.8rem 2rem 0 2rem;
padding: 0.8rem 1rem 0 1rem;
flex-grow: 1;
transition: all 0.3s ease;
}
Expand Down Expand Up @@ -114,6 +114,96 @@
background-color: rgba(155, 155, 155, 0.7);
}

/* Full Screen Input Modal Styles */
.full-screen-input-modal {
width: 90%;
max-width: 800px;
max-height: 80vh;
position: relative;
padding: 0;
background-color: rgb(20, 20, 20, 0.96);
border: 1.5px solid var(--color-border);
}

.full-screen-input-modal h2 {
margin: 0;
padding: 0;
font-size: 1.1rem;
color: var(--color-text);
opacity: 0.8;
}

.full-screen-input-modal .modal-close {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.5rem;
padding: 0 0.5rem;
line-height: 0.8;
}

.full-screen-input-modal .btn-ok {
margin-right: 1rem;
}

.full-screen-input-modal .modal-content {
height: calc(80vh);
padding: 0;
margin: 0;
overflow: hidden;
}

.full-screen-input-modal .modal-footer {
background: transparent;
max-height: 50px;
}

#full-screen-input {
width: 100%;
height: 100%;
border: none;
background-color: transparent;
color: var(--color-text);
font-family: 'Roboto Mono', monospace;
font-optical-sizing: auto;
font-size: 0.955rem;
padding: 1.2rem 1rem;
resize: none;
outline: none;
}

#full-screen-input::-webkit-scrollbar {
width: 6px;
height: 6px;
}

#full-screen-input::-webkit-scrollbar-track {
background: transparent;
margin: 14px;
border-radius: 6px;
}

#full-screen-input::-webkit-scrollbar-thumb {
background-color: rgba(155, 155, 155, 0.5);
border-radius: 6px;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
}

#full-screen-input::-webkit-scrollbar-thumb:hover {
background-color: rgba(155, 155, 155, 0.7);
}

.light-mode .full-screen-input-modal {
background-color: rgb(220, 220, 220, 0.86);
}

.full-screen-input-modal .modal-footer {
padding: 1rem 0;
border-top: none;
background: transparent;
}

/* Buttons Container */
#buttons-container {
display: flex;
Expand Down Expand Up @@ -273,7 +363,6 @@ h2 {
.btn {
text-wrap: wrap;
font-size: var(--font-size-small);
padding: 0.5rem 0.85rem;
}

.btn-upload {
Expand All @@ -285,4 +374,4 @@ h2 {
.btn-upload > svg {
width: 20px;
}
}
}
4 changes: 2 additions & 2 deletions webui/css/settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,13 +214,13 @@ nav ul li a img {
}
}

@media (max-width: 480px) {
@media (max-width: 640px) {
nav ul {
grid-template-columns: repeat(2, 1.2fr);
}
}

@media (max-width: 380px) {
@media (max-width: 480px) {
nav ul {
grid-template-columns: 1fr;
}
Expand Down
110 changes: 70 additions & 40 deletions webui/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,30 @@

:root {
/* Dark mode */
--color-background-dark: #171717;
--color-text-dark: #e0e0e0;
--color-primary-dark: #86929d;
--color-secondary-dark: #3f3f3f;
--color-background-dark: #131313;
--color-text-dark: #d4d4d4;
--color-primary-dark: #737a81;
--color-secondary-dark: #656565;
--color-accent-dark: #cf6679;
--color-message-bg-dark: #2d2d2d;
--color-message-text-dark: #e0e0e0;
--color-panel-dark: #1e1e1e;
--color-panel-dark: #171717;
--color-border-dark: #444444a8;
--color-input-dark: #222;
--color-input-focus-dark: #1b1b1b;
--color-input-dark: #131313;
--color-input-focus-dark: #101010;

/* Light mode */
--color-background-light: #e8e9e9;
--color-background-light: #dbdbdb;
--color-text-light: #333333;
--color-primary-light: #324d66;
--color-primary-light: #384653;
--color-secondary-light: #e8eaf6;
--color-accent-light: #b00020;
--color-message-bg-light: #ffffff;
--color-message-text-light: #333333;
--color-panel-light: #ffffff;
--color-panel-light: #f0f0f0;
--color-border-light: #e0e0e0c7;
--color-input-light: #f1f1f1;
--color-input-focus-light: #ebeced;
--color-input-light: #e4e4e4;
--color-input-focus-light: #dadada;

/* Default to dark mode */
--color-background: var(--color-background-dark);
Expand Down Expand Up @@ -752,6 +752,11 @@ pre {
}

/* Text input */
#chat-input-container {
position: relative;
width: 100%;
}

#chat-input {
background-color: var(--color-input);
border: 1px solid var(--color-border);
Expand All @@ -763,8 +768,10 @@ pre {
-webkit-font-optical-sizing: auto;
font-size: 0.875rem;
max-height: 7rem;
min-height: 2.8rem;
padding: 0.65rem var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
min-height: 3rem;
width: 100%;
padding: 0.5rem 40px var(--spacing-sm) var(--spacing-sm);
margin-right: var(--spacing-xs);
overflow-y: auto;
scroll-behavior: smooth;
resize: none;
Expand All @@ -775,6 +782,36 @@ pre {
-webkit-transition: all 0.3s ease;
}

#chat-input {
outline: 1px solid var(--color-border);
}

#expand-button {
position: absolute;
top: 12px;
right: 10px;
background: transparent;
border: none;
cursor: pointer;
font-size: 1.2rem;
color: var(--color-text);
opacity: 0.4;
transition: opacity 0.2s;
}

#expand-button:hover {
opacity: 0.7;
}

#expand-button:active {
opacity: 1;
}

#expand-button svg {
width: 1.3rem;
height: 1.3rem;
}

#chat-input::-webkit-scrollbar {
width: 6px;
height: 6px;
Expand All @@ -798,9 +835,9 @@ pre {
}

#chat-input:focus {
outline: 0.05rem solid rgba(155, 155, 155, 0.3);
outline: 0.05rem solid rgba(155, 155, 155, 0.5);
font-size: 0.955rem;
padding-top: 0.58rem;
padding-top: 0.5rem;
background-color: var(--color-input-focus);
}

Expand Down Expand Up @@ -1011,6 +1048,7 @@ pre {
gap: 8px;
margin-bottom: 10px;
padding: var(--spacing-xs);
background-color: var(--color-border);
}

.preview-item {
Expand Down Expand Up @@ -1098,18 +1136,6 @@ pre {
}

/* Text input */
#chat-input {
flex-grow: 1;
min-height: 2.7rem;
padding: var(--spacing-sm) var(--spacing-sm);
padding-top: 0.65rem;
margin-right: var(--spacing-xs);
border: 1px solid var(--color-border);
border-radius: 8px;
resize: none;
align-content: start;
}

.input-row {
width: 100%;
white-space: nowrap;
Expand Down Expand Up @@ -1164,6 +1190,7 @@ pre {

#chat-buttons-wrapper {
gap: var(--spacing-xs);
padding-left: var(--spacing-xs);
}

.chat-button {
Expand Down Expand Up @@ -1245,7 +1272,10 @@ pre {
.preview-item {
position: relative;
flex-shrink: 0;
padding: 4px;
animation: fadeIn 0.3s ease;
min-width: min-content;
background-color: var(--color-background);
}

.preview-item img {
Expand Down Expand Up @@ -1778,57 +1808,57 @@ input:checked + .slider:before {
}

.light-mode .message-default {
background-color: #ffffff;
background-color: #f3f3f3;
color: #1a242f;
}

.light-mode .message-agent {
background-color: #ffffff;
background-color: #f3f3f3;
color: #356ca3;
}

.light-mode .message-agent-response {
background-color: #ffffff;
background-color: #f3f3f3;
color: #188216;
}

.light-mode .message-agent-delegation {
background-color: #ffffff;
background-color: #f3f3f3;
color: #12685e;
}

.light-mode .message-tool {
background-color: #ffffff;
background-color: #f3f3f3;
color: #1c3c88;
}

.light-mode .message-code-exe {
background-color: #ffffff;
background-color: #f3f3f3;
color: #6c43b0;
}

.light-mode .message-info {
background-color: #ffffff;
background-color: #f3f3f3;
color: #3f3f3f;
}

.light-mode .message-util {
background-color: #ffffff;
background-color: #f3f3f3;
color: #5b5540;
}

.light-mode .message-warning {
background-color: #ffffff;
background-color: #f3f3f3;
color: #8f4800;
}

.light-mode .message-error {
background-color: #ffffff;
background-color: #f3f3f3;
color: #8f1010;
}

.light-mode .message-user {
background-color: #ffffff;
background-color: #f3f3f3;
color: #4e4e4e;
}

Expand Down Expand Up @@ -1950,4 +1980,4 @@ input:checked + .slider:before {
100% {
transform: scale(1);
}
}
}
Loading

0 comments on commit d42bc2c

Please sign in to comment.