diff options
Diffstat (limited to 'src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss')
| -rw-r--r-- | src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss | 294 |
1 files changed, 294 insertions, 0 deletions
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss new file mode 100644 index 000000000..3d27fa887 --- /dev/null +++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss @@ -0,0 +1,294 @@ +@use 'sass:color'; +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); + +$primary-color: #3f51b5; +$secondary-color: #f0f0f0; +$text-color: #2e2e2e; +$light-text-color: #6d6d6d; +$border-color: #dcdcdc; +$shadow-color: rgba(0, 0, 0, 0.1); +$transition: all 0.2s ease-in-out; + +.chat-box { + display: flex; + flex-direction: column; + height: 100%; + background-color: #fff; + font-family: 'Inter', sans-serif; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 8px $shadow-color; + position: relative; + + .chat-header { + background-color: $primary-color; + color: #fff; + padding: 16px; + text-align: center; + box-shadow: 0 1px 4px $shadow-color; + + h2 { + margin: 0; + font-size: 1.5em; + font-weight: 500; + } + } + + .chat-messages { + flex-grow: 1; + overflow-y: auto; + padding: 16px; + display: flex; + flex-direction: column; + gap: 12px; + + &::-webkit-scrollbar { + width: 8px; + } + + &::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.1); + border-radius: 4px; + } + } + + .chat-input { + display: flex; + padding: 12px; + border-top: 1px solid $border-color; + background-color: #fff; + + input { + flex-grow: 1; + padding: 12px 16px; + border: 1px solid $border-color; + border-radius: 24px; + font-size: 15px; + transition: $transition; + + &:focus { + outline: none; + border-color: $primary-color; + box-shadow: 0 0 0 2px color.adjust($primary-color, $alpha: -0.8); + } + + &:disabled { + background-color: $secondary-color; + cursor: not-allowed; + } + } + + .submit-button { + background-color: $primary-color; + color: white; + border: none; + border-radius: 50%; + width: 48px; + height: 48px; + margin-left: 10px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: $transition; + + &:hover { + background-color: color.adjust($primary-color, $lightness: -10%); + } + + &:disabled { + background-color: color.adjust($primary-color, $lightness: 20%); + cursor: not-allowed; + } + + .spinner { + width: 20px; + height: 20px; + border: 3px solid rgba(255, 255, 255, 0.3); + border-top: 3px solid #fff; + border-radius: 50%; + animation: spin 0.6s linear infinite; + } + } + } + + .citation-popup { + position: fixed; + bottom: 50px; + left: 50%; + transform: translateX(-50%); + background-color: rgba(0, 0, 0, 0.8); + color: white; + padding: 10px 20px; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + z-index: 1000; + animation: fadeIn 0.3s ease-in-out; + + p { + margin: 0; + font-size: 14px; + } + + @keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + } +} + +.message { + max-width: 75%; + padding: 12px 16px; + border-radius: 12px; + font-size: 15px; + line-height: 1.6; + box-shadow: 0 1px 3px $shadow-color; + word-wrap: break-word; + display: flex; + flex-direction: column; + + &.user { + align-self: flex-end; + background-color: $primary-color; + color: #fff; + border-bottom-right-radius: 4px; + } + + &.assistant { + align-self: flex-start; + background-color: $secondary-color; + color: $text-color; + border-bottom-left-radius: 4px; + } + + .toggle-info { + margin-top: 10px; + background-color: transparent; + color: $primary-color; + border: 1px solid $primary-color; + border-radius: 8px; + padding: 8px 12px; + font-size: 14px; + cursor: pointer; + transition: $transition; + margin-bottom: 16px; + + &:hover { + background-color: color.adjust($primary-color, $alpha: -0.9); + } + } + + .processing-info { + margin-bottom: 12px; + padding: 10px 15px; + background-color: #f9f9f9; + border-radius: 8px; + box-shadow: 0 1px 3px $shadow-color; + font-size: 14px; + + .processing-item { + margin-bottom: 5px; + font-size: 14px; + color: $light-text-color; + } + } + + .message-content { + background-color: inherit; + padding: 10px; + border-radius: 8px; + font-size: 15px; + line-height: 1.5; + + .citation-button { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + border-radius: 50%; + background-color: rgba(0, 0, 0, 0.1); + color: $text-color; + font-size: 12px; + font-weight: bold; + margin-left: 5px; + cursor: pointer; + transition: $transition; + + &:hover { + background-color: color.adjust($primary-color, $alpha: -0.8); + color: #fff; + } + } + } +} + +.follow-up-questions { + margin-top: 12px; + + h4 { + font-size: 15px; + font-weight: 600; + margin-bottom: 8px; + } + + .questions-list { + display: flex; + flex-direction: column; + gap: 8px; + } + + .follow-up-button { + background-color: #fff; + color: $primary-color; + border: 1px solid $primary-color; + border-radius: 8px; + padding: 10px 14px; + font-size: 14px; + cursor: pointer; + transition: $transition; + text-align: left; + + &:hover { + background-color: $primary-color; + color: #fff; + } + } +} + +.uploading-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(255, 255, 255, 0.8); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@media (max-width: 768px) { + .chat-box { + border-radius: 0; + } + + .message { + max-width: 90%; + } +} |