diff options
Diffstat (limited to 'src/client/views/nodes/ChatBox/ChatBox.scss')
| -rw-r--r-- | src/client/views/nodes/ChatBox/ChatBox.scss | 228 |
1 files changed, 0 insertions, 228 deletions
diff --git a/src/client/views/nodes/ChatBox/ChatBox.scss b/src/client/views/nodes/ChatBox/ChatBox.scss deleted file mode 100644 index f1ad3d074..000000000 --- a/src/client/views/nodes/ChatBox/ChatBox.scss +++ /dev/null @@ -1,228 +0,0 @@ -$background-color: #f8f9fa; -$text-color: #333; -$input-background: #fff; -$button-color: #007bff; -$button-hover-color: darken($button-color, 10%); -$shadow-color: rgba(0, 0, 0, 0.075); -$border-radius: 8px; - -.chatBox { - display: flex; - flex-direction: column; - width: 100%; /* Adjust the width as needed, could be in percentage */ - height: 100%; /* Adjust the height as needed, could be in percentage */ - background-color: $background-color; - font-family: 'Helvetica Neue', Arial, sans-serif; - //margin: 20px auto; - //overflow: hidden; - - .scroll-box { - flex-grow: 1; - overflow-y: scroll; - overflow-x: hidden; - height: 100%; - padding: 10px; - display: flex; - flex-direction: column-reverse; - - &::-webkit-scrollbar { - width: 8px; - } - &::-webkit-scrollbar-thumb { - background-color: darken($background-color, 10%); - border-radius: $border-radius; - } - - - .chat-content { - display: flex; - flex-direction: column; - } - - .messages { - display: flex; - flex-direction: column; - .message { - padding: 10px; - margin-bottom: 10px; - border-radius: $border-radius; - background-color: lighten($background-color, 5%); - box-shadow: 0 2px 5px $shadow-color; - //display: flex; - align-items: center; - max-width: 70%; - word-break: break-word; - .message-footer { // Assuming this is the container for the toggle button - //max-width: 70%; - - - .toggle-logs-button { - margin-top: 10px; // Padding on sides to align with the text above - width: 95%; - //display: block; // Ensures the button extends the full width of its container - text-align: center; // Centers the text inside the button - //padding: 8px 0; // Adequate padding for touch targets - background-color: $button-color; - color: #fff; - border: none; - border-radius: $border-radius; - cursor: pointer; - //transition: background-color 0.3s; - //margin-top: 10px; // Adds space above the button - box-shadow: 0 2px 4px $shadow-color; // Consistent shadow with other elements - &:hover { - background-color: $button-hover-color; - } - } - .tool-logs { - width: 100%; - background-color: $input-background; - color: $text-color; - margin-top: 5px; - //padding: 10px; - //border-radius: $border-radius; - //box-shadow: inset 0 2px 4px $shadow-color; - //transition: opacity 1s ease-in-out; - font-family: monospace; - overflow-x: auto; - max-height: 150px; // Ensuring it does not grow too large - overflow-y: auto; - } - - } - - .custom-link { - color: lightblue; - text-decoration: underline; - cursor: pointer; - } - &.user { - align-self: flex-end; - background-color: $button-color; - color: #fff; - } - - &.chatbot { - align-self: flex-start; - background-color: $input-background; - color: $text-color; - } - - span { - flex-grow: 1; - padding-right: 10px; - } - - img { - max-width: 50px; - max-height: 50px; - border-radius: 50%; - } - } - } - padding-bottom: 0; - } - - .chat-form { - display: flex; - flex-grow: 1; - //height: 50px; - bottom: 0; - width: 100%; - padding: 10px; - background-color: $input-background; - box-shadow: inset 0 -1px 2px $shadow-color; - - input[type="text"] { - flex-grow: 1; - border: 1px solid darken($input-background, 10%); - border-radius: $border-radius; - padding: 8px 12px; - margin-right: 10px; - } - - button { - padding: 8px 16px; - background-color: $button-color; - color: #fff; - border: none; - border-radius: $border-radius; - cursor: pointer; - transition: background-color 0.3s; - - &:hover { - background-color: $button-hover-color; - } - } - margin-bottom: 0; - } -} - -.initializing-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba($background-color, 0.95); - display: flex; - justify-content: center; - align-items: center; - font-size: 1.5em; - color: $text-color; - z-index: 10; // Ensure it's above all other content (may be better solution) - - &::before { - content: 'Initializing...'; - font-weight: bold; - } -} - - -.modal { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - background-color: rgba(0, 0, 0, 0.4); - - .modal-content { - background-color: $input-background; - color: $text-color; - padding: 20px; - border-radius: $border-radius; - box-shadow: 0 2px 10px $shadow-color; - display: flex; - flex-direction: column; - align-items: center; - width: auto; - min-width: 300px; - - h4 { - margin-bottom: 15px; - } - - p { - margin-bottom: 20px; - } - - button { - padding: 10px 20px; - background-color: $button-color; - color: #fff; - border: none; - border-radius: $border-radius; - cursor: pointer; - margin: 5px; - transition: background-color 0.3s; - - &:hover { - background-color: $button-hover-color; - } - } - } -} |