Biomimicry-AI/Nexus

1@import "../styles/animation.scss";2 3.chat-input-actions {4  display: flex;5  flex-wrap: wrap;6  justify-content: space-between;7 8  .chat-input-action {9    display: inline-flex;10    border-radius: 20px;11    font-size: 12px;12    background-color: var(--white);13    color: var(--black);14    border: var(--border-in-light);15    padding: 4px 10px;16    animation: slide-in ease 0.3s;17    box-shadow: var(--card-shadow);18    transition: width ease 0.3s;19    align-items: center;20    height: 16px;21    width: var(--icon-width);22    overflow: hidden;23 24    &:not(:last-child) {25      margin-right: 5px;26    }27 28    .text {29      white-space: nowrap;30      padding-left: 5px;31      opacity: 0;32      transform: translateX(-5px);33      transition: all ease 0.3s;34      pointer-events: none;35    }36 37    &:hover {38      --delay: 0.5s;39      width: var(--full-width);40      transition-delay: var(--delay);41 42      .text {43        transition-delay: var(--delay);44        opacity: 1;45        transform: translate(0);46      }47    }48 49    .text,50    .icon {51      display: flex;52      align-items: center;53      justify-content: center;54    }55  }56}57 58.prompt-toast {59  position: absolute;60  bottom: -50px;61  z-index: 999;62  display: flex;63  justify-content: center;64  width: calc(100% - 40px);65 66  .prompt-toast-inner {67    display: flex;68    justify-content: center;69    align-items: center;70    font-size: 12px;71    background-color: var(--white);72    color: var(--black);73 74    border: var(--border-in-light);75    box-shadow: var(--card-shadow);76    padding: 10px 20px;77    border-radius: 100px;78 79    animation: slide-in-from-top ease 0.3s;80 81    .prompt-toast-content {82      margin-left: 10px;83    }84  }85}86 87.section-title {88  font-size: 12px;89  font-weight: bold;90  margin-bottom: 10px;91  display: flex;92  justify-content: space-between;93  align-items: center;94 95  .section-title-action {96    display: flex;97    align-items: center;98  }99}100 101.context-prompt {102  .context-prompt-insert {103    display: flex;104    justify-content: center;105    padding: 4px;106    opacity: 0.2;107    transition: all ease 0.3s;108    background-color: rgba(0, 0, 0, 0);109    cursor: pointer;110    border-radius: 4px;111    margin-top: 4px;112    margin-bottom: 4px;113 114    &:hover {115      opacity: 1;116      background-color: rgba(0, 0, 0, 0.05);117    }118  }119 120  .context-prompt-row {121    display: flex;122    justify-content: center;123    width: 100%;124 125    &:hover {126      .context-drag {127        opacity: 1;128      }129    }130 131    .context-drag {132      display: flex;133      align-items: center;134      opacity: 0.5;135      transition: all ease 0.3s;136    }137 138    .context-role {139      margin-right: 10px;140    }141 142    .context-content {143      flex: 1;144      max-width: 100%;145      text-align: left;146    }147 148    .context-delete-button {149      margin-left: 10px;150    }151  }152 153  .context-prompt-button {154    flex: 1;155  }156}157 158.memory-prompt {159  margin: 20px 0;160 161  .memory-prompt-content {162    background-color: var(--white);163    color: var(--black);164    border: var(--border-in-light);165    border-radius: 10px;166    padding: 10px;167    font-size: 12px;168    user-select: text;169  }170}171 172.clear-context {173  margin: 20px 0 0 0;174  padding: 4px 0;175 176  border-top: var(--border-in-light);177  border-bottom: var(--border-in-light);178  box-shadow: var(--card-shadow) inset;179 180  display: flex;181  justify-content: center;182  align-items: center;183 184  color: var(--black);185  transition: all ease 0.3s;186  cursor: pointer;187  overflow: hidden;188  position: relative;189  font-size: 12px;190 191  animation: slide-in ease 0.3s;192 193  $linear: linear-gradient(194    to right,195    rgba(0, 0, 0, 0),196    rgba(0, 0, 0, 1),197    rgba(0, 0, 0, 0)198  );199  mask-image: $linear;200 201  @mixin show {202    transform: translateY(0);203    position: relative;204    transition: all ease 0.3s;205    opacity: 1;206  }207 208  @mixin hide {209    transform: translateY(-50%);210    position: absolute;211    transition: all ease 0.1s;212    opacity: 0;213  }214 215  &-tips {216    @include show;217    opacity: 0.5;218  }219 220  &-revert-btn {221    color: var(--primary);222    @include hide;223  }224 225  &:hover {226    opacity: 1;227    border-color: var(--primary);228 229    .clear-context-tips {230      @include hide;231    }232 233    .clear-context-revert-btn {234      @include show;235    }236  }237}238 239.chat {240  display: flex;241  flex-direction: column;242  position: relative;243  height: 100%;244}245 246.chat-body {247  flex: 1;248  overflow: auto;249  overflow-x: hidden;250  padding: 20px;251  padding-bottom: 40px;252  position: relative;253  overscroll-behavior: none;254}255 256.chat-body-main-title {257  cursor: pointer;258 259  &:hover {260    text-decoration: underline;261  }262}263 264@media only screen and (max-width: 600px) {265  .chat-body-title {266    text-align: center;267  }268}269 270.chat-message {271  display: flex;272  flex-direction: row;273 274  &:last-child {275    animation: slide-in ease 0.3s;276  }277}278 279.chat-message-user {280  display: flex;281  flex-direction: row-reverse;282 283  .chat-message-header {284    flex-direction: row-reverse;285  }286}287 288.chat-message-header {289  margin-top: 20px;290  display: flex;291  align-items: center;292 293  .chat-message-actions {294    display: flex;295    box-sizing: border-box;296    font-size: 12px;297    align-items: flex-end;298    justify-content: space-between;299    transition: all ease 0.3s;300    transform: scale(0.9) translateY(5px);301    margin: 0 10px;302    opacity: 0;303    pointer-events: none;304 305    .chat-input-actions {306      display: flex;307      flex-wrap: nowrap;308    }309  }310}311 312.chat-message-container {313  max-width: var(--message-max-width);314  display: flex;315  flex-direction: column;316  align-items: flex-start;317 318  &:hover {319    .chat-message-edit {320      opacity: 0.9;321    }322 323    .chat-message-actions {324      opacity: 1;325      pointer-events: all;326      transform: scale(1) translateY(0);327    }328  }329}330 331.chat-message-user > .chat-message-container {332  align-items: flex-end;333}334 335.chat-message-avatar {336  position: relative;337 338  .chat-message-edit {339    position: absolute;340    height: 100%;341    width: 100%;342    overflow: hidden;343    display: flex;344    align-items: center;345    justify-content: center;346    opacity: 0;347    transition: all ease 0.3s;348 349    button {350      padding: 7px;351    }352  }353  /* Specific styles for iOS devices */354  @media screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {355    @supports (-webkit-touch-callout: none) {356      .chat-message-edit {357        top: -8%;358      }359    }360  }361}362 363.chat-message-checkmark {364  display: inline-block;365  margin-right: 5px;366  height: 12px;367  width: 12px;368  color: #13a10e;369  fill: #13a10e;370  user-select: none;371  backface-visibility: hidden;372  transform: translateZ(0px);373}374 375.chat-message-tools-status {376  display: flex;377  justify-content: center;378  align-items: center;379  font-size: 12px;380  margin-top: 5px;381  line-height: 1.5;382}383 384.chat-message-tools-name {385  color: #aaa;386}387 388.chat-message-tools-details {389  margin-left: 5px;390  font-weight: bold;391  color: #999;392}393 394.chat-message-status {395  font-size: 12px;396  color: #aaa;397  line-height: 1.5;398  margin-top: 5px;399}400 401.chat-message-item {402  box-sizing: border-box;403  max-width: 100%;404  margin-top: 10px;405  border-radius: 10px;406  background-color: rgba(0, 0, 0, 0.05);407  padding: 10px;408  font-size: 14px;409  user-select: text;410  word-break: break-word;411  border: var(--border-in-light);412  position: relative;413  transition: all ease 0.3s;414}415 416.chat-message-action-date {417  font-size: 12px;418  opacity: 0.2;419  white-space: nowrap;420  transition: all ease 0.6s;421  color: var(--black);422  text-align: right;423  width: 100%;424  box-sizing: border-box;425  padding-right: 10px;426  pointer-events: none;427  z-index: 1;428}429 430.chat-message-user > .chat-message-container > .chat-message-item {431  background-color: var(--second);432 433  &:hover {434    min-width: 0;435  }436}437 438.chat-input-panel {439  position: relative;440  width: 100%;441  padding: 20px;442  padding-top: 10px;443  box-sizing: border-box;444  flex-direction: column;445  border-top: var(--border-in-light);446  box-shadow: var(--card-shadow);447 448  .chat-input-actions {449    .chat-input-action {450      margin-bottom: 10px;451    }452  }453}454 455@mixin single-line {456  white-space: nowrap;457  overflow: hidden;458  text-overflow: ellipsis;459}460 461.prompt-hints {462  min-height: 20px;463  width: 100%;464  max-height: 50vh;465  overflow: auto;466  display: flex;467  flex-direction: column-reverse;468 469  background-color: var(--white);470  border: var(--border-in-light);471  border-radius: 10px;472  margin-bottom: 10px;473  box-shadow: var(--shadow);474 475  .prompt-hint {476    color: var(--black);477    padding: 6px 10px;478    animation: slide-in ease 0.3s;479    cursor: pointer;480    transition: all ease 0.3s;481    border: transparent 1px solid;482    margin: 4px;483    border-radius: 8px;484 485    &:not(:last-child) {486      margin-top: 0;487    }488 489    .hint-title {490      font-size: 12px;491      font-weight: bolder;492 493      @include single-line();494    }495    .hint-content {496      font-size: 12px;497 498      @include single-line();499    }500 501    &-selected,502    &:hover {503      border-color: var(--primary);504    }505  }506}507 508.chat-input-panel-inner {509  display: flex;510  flex: 1;511}512 513.chat-input {514  height: 100%;515  width: 100%;516  border-radius: 10px;517  border: var(--border-in-light);518  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);519  background-color: var(--white);520  color: var(--black);521  font-family: inherit;522  padding: 10px 90px 10px 14px;523  resize: none;524  outline: none;525  box-sizing: border-box;526  min-height: 68px;527}528 529.chat-input:focus {530  border: 1px solid var(--primary);531}532 533.chat-input-send {534  background-color: var(--primary);535  color: white;536 537  position: absolute;538  right: 30px;539  bottom: 32px;540}541 542@media only screen and (max-width: 600px) {543  .chat-input {544    font-size: 16px;545  }546 547  .chat-input-send {548    bottom: 30px;549  }550}551