chat.module.scss 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. @import "../styles/animation.scss";
  2. .chat-input-actions {
  3. display: flex;
  4. flex-wrap: wrap;
  5. .chat-input-action {
  6. display: inline-flex;
  7. border-radius: 20px;
  8. font-size: 12px;
  9. background-color: var(--white);
  10. color: var(--black);
  11. border: var(--border-in-light);
  12. padding: 4px 10px;
  13. animation: slide-in ease 0.3s;
  14. box-shadow: var(--card-shadow);
  15. transition: all ease 0.3s;
  16. margin-bottom: 10px;
  17. align-items: center;
  18. height: 16px;
  19. &:not(:last-child) {
  20. margin-right: 5px;
  21. }
  22. .text {
  23. white-space: nowrap;
  24. padding-left: 5px;
  25. opacity: 0;
  26. transform: translateX(-5px);
  27. transition: all ease 0.3s;
  28. transition-delay: 0.1s;
  29. pointer-events: none;
  30. }
  31. &:hover {
  32. .text {
  33. opacity: 1;
  34. transform: translate(0);
  35. }
  36. }
  37. .text,
  38. .icon {
  39. display: flex;
  40. align-items: center;
  41. justify-content: center;
  42. }
  43. }
  44. }
  45. .prompt-toast {
  46. position: absolute;
  47. bottom: -50px;
  48. z-index: 999;
  49. display: flex;
  50. justify-content: center;
  51. width: calc(100% - 40px);
  52. .prompt-toast-inner {
  53. display: flex;
  54. justify-content: center;
  55. align-items: center;
  56. font-size: 12px;
  57. background-color: var(--white);
  58. color: var(--black);
  59. border: var(--border-in-light);
  60. box-shadow: var(--card-shadow);
  61. padding: 10px 20px;
  62. border-radius: 100px;
  63. animation: slide-in-from-top ease 0.3s;
  64. .prompt-toast-content {
  65. margin-left: 10px;
  66. }
  67. }
  68. }
  69. .section-title {
  70. font-size: 12px;
  71. font-weight: bold;
  72. margin-bottom: 10px;
  73. display: flex;
  74. justify-content: space-between;
  75. align-items: center;
  76. .section-title-action {
  77. display: flex;
  78. align-items: center;
  79. }
  80. }
  81. .context-prompt {
  82. .context-prompt-row {
  83. display: flex;
  84. justify-content: center;
  85. width: 100%;
  86. margin-bottom: 10px;
  87. .context-role {
  88. margin-right: 10px;
  89. }
  90. .context-content {
  91. flex: 1;
  92. max-width: 100%;
  93. text-align: left;
  94. }
  95. .context-delete-button {
  96. margin-left: 10px;
  97. }
  98. }
  99. .context-prompt-button {
  100. flex: 1;
  101. }
  102. }
  103. .memory-prompt {
  104. margin: 20px 0;
  105. .memory-prompt-content {
  106. background-color: var(--white);
  107. color: var(--black);
  108. border: var(--border-in-light);
  109. border-radius: 10px;
  110. padding: 10px;
  111. font-size: 12px;
  112. user-select: text;
  113. }
  114. }
  115. .clear-context {
  116. margin: 20px 0 0 0;
  117. padding: 4px 0;
  118. border-top: var(--border-in-light);
  119. border-bottom: var(--border-in-light);
  120. box-shadow: var(--card-shadow) inset;
  121. display: flex;
  122. justify-content: center;
  123. align-items: center;
  124. color: var(--black);
  125. transition: all ease 0.3s;
  126. cursor: pointer;
  127. overflow: hidden;
  128. position: relative;
  129. font-size: 12px;
  130. animation: slide-in ease 0.3s;
  131. $linear: linear-gradient(
  132. to right,
  133. rgba(0, 0, 0, 0),
  134. rgba(0, 0, 0, 1),
  135. rgba(0, 0, 0, 0)
  136. );
  137. mask-image: $linear;
  138. @mixin show {
  139. transform: translateY(0);
  140. position: relative;
  141. transition: all ease 0.3s;
  142. opacity: 1;
  143. }
  144. @mixin hide {
  145. transform: translateY(-50%);
  146. position: absolute;
  147. transition: all ease 0.1s;
  148. opacity: 0;
  149. }
  150. &-tips {
  151. @include show;
  152. opacity: 0.5;
  153. }
  154. &-revert-btn {
  155. color: var(--primary);
  156. @include hide;
  157. }
  158. &:hover {
  159. opacity: 1;
  160. border-color: var(--primary);
  161. .clear-context-tips {
  162. @include hide;
  163. }
  164. .clear-context-revert-btn {
  165. @include show;
  166. }
  167. }
  168. }