aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss')
-rw-r--r--src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss172
1 files changed, 94 insertions, 78 deletions
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
index 50111f678..9cf760a12 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
@@ -1,42 +1,34 @@
-@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
-$primary-color: #4a90e2;
-$secondary-color: #f5f8fa;
-$text-color: #333;
-$light-text-color: #777;
-$border-color: #e1e8ed;
+$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.3s ease;
+$transition: all 0.2s ease-in-out;
+
.chat-box {
display: flex;
flex-direction: column;
height: 100%;
background-color: #fff;
- font-family:
- 'Atkinson Hyperlegible',
- -apple-system,
- BlinkMacSystemFont,
- 'Segoe UI',
- Roboto,
- Helvetica,
- Arial,
- sans-serif;
- border-radius: 12px;
+ font-family: 'Inter', sans-serif;
+ border-radius: 8px;
overflow: hidden;
- box-shadow: 0 4px 12px $shadow-color;
+ box-shadow: 0 2px 8px $shadow-color;
position: relative;
.chat-header {
background-color: $primary-color;
- color: white;
- padding: 15px;
+ color: #fff;
+ padding: 16px;
text-align: center;
- box-shadow: 0 2px 4px $shadow-color;
- height: fit-content;
+ box-shadow: 0 1px 4px $shadow-color;
h2 {
margin: 0;
- font-size: 1.3em;
+ font-size: 1.5em;
font-weight: 500;
}
}
@@ -44,30 +36,30 @@ $transition: all 0.3s ease;
.chat-messages {
flex-grow: 1;
overflow-y: auto;
- padding: 20px;
+ padding: 16px;
display: flex;
flex-direction: column;
- gap: 10px; // Added to give space between elements
+ gap: 12px;
&::-webkit-scrollbar {
- width: 6px;
+ width: 8px;
}
&::-webkit-scrollbar-thumb {
- background-color: $border-color;
- border-radius: 3px;
+ background-color: rgba(0, 0, 0, 0.1);
+ border-radius: 4px;
}
}
.chat-input {
display: flex;
- padding: 20px;
+ padding: 12px;
border-top: 1px solid $border-color;
background-color: #fff;
input {
flex-grow: 1;
- padding: 12px 15px;
+ padding: 12px 16px;
border: 1px solid $border-color;
border-radius: 24px;
font-size: 15px;
@@ -78,6 +70,11 @@ $transition: all 0.3s ease;
border-color: $primary-color;
box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
}
+
+ &:disabled {
+ background-color: $secondary-color;
+ cursor: not-allowed;
+ }
}
.submit-button {
@@ -89,31 +86,31 @@ $transition: all 0.3s ease;
height: 48px;
margin-left: 10px;
cursor: pointer;
- transition: $transition;
display: flex;
align-items: center;
justify-content: center;
- position: relative;
+ transition: $transition;
&:hover {
background-color: darken($primary-color, 10%);
}
&:disabled {
- background-color: $light-text-color;
+ background-color: lighten($primary-color, 20%);
cursor: not-allowed;
}
.spinner {
- height: 24px;
- width: 24px;
+ width: 20px;
+ height: 20px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top: 3px solid #fff;
border-radius: 50%;
- animation: spin 2s linear infinite;
+ animation: spin 0.6s linear infinite;
}
}
}
+
.citation-popup {
position: fixed;
bottom: 50px;
@@ -144,23 +141,24 @@ $transition: all 0.3s ease;
}
.message {
- max-width: 80%;
- margin-bottom: 20px;
- padding: 16px 20px;
- border-radius: 18px;
+ max-width: 75%;
+ padding: 12px 16px;
+ border-radius: 12px;
font-size: 15px;
- line-height: 1.5;
- box-shadow: 0 2px 4px $shadow-color;
- word-wrap: break-word; // To handle long words
+ 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: white;
+ color: #fff;
border-bottom-right-radius: 4px;
}
- &.chatbot {
+ &.assistant {
align-self: flex-start;
background-color: $secondary-color;
color: $text-color;
@@ -168,37 +166,80 @@ $transition: all 0.3s ease;
}
.toggle-info {
+ margin-top: 10px;
background-color: transparent;
color: $primary-color;
border: 1px solid $primary-color;
- width: 100%;
- height: fit-content;
border-radius: 8px;
- padding: 10px 16px;
+ padding: 8px 12px;
font-size: 14px;
cursor: pointer;
transition: $transition;
- margin-top: 10px;
+ margin-bottom: 16px;
&:hover {
background-color: rgba($primary-color, 0.1);
}
}
+
+ .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: rgba($primary-color, 0.2);
+ color: #fff;
+ }
+ }
+ }
}
.follow-up-questions {
- margin-top: 15px;
+ margin-top: 12px;
h4 {
font-size: 15px;
font-weight: 600;
- margin-bottom: 10px;
+ margin-bottom: 8px;
}
.questions-list {
display: flex;
flex-direction: column;
- gap: 10px;
+ gap: 8px;
}
.follow-up-button {
@@ -206,15 +247,11 @@ $transition: all 0.3s ease;
color: $primary-color;
border: 1px solid $primary-color;
border-radius: 8px;
- padding: 10px 16px;
+ padding: 10px 14px;
font-size: 14px;
cursor: pointer;
transition: $transition;
text-align: left;
- white-space: normal;
- word-wrap: break-word;
- width: 100%;
- height: fit-content;
&:hover {
background-color: $primary-color;
@@ -223,27 +260,6 @@ $transition: all 0.3s ease;
}
}
-.citation-button {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 20px;
- height: 20px;
- 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;
- vertical-align: middle;
-
- &:hover {
- background-color: rgba(0, 0, 0, 0.2);
- }
-}
-
.uploading-overlay {
position: absolute;
top: 0;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-27 15:00:27 +0000