chat.module.scss 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
  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. align-items: center;
  17. height: 16px;
  18. width: var(--icon-width);
  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. width: var(--full-width);
  33. .text {
  34. opacity: 1;
  35. transform: translate(0);
  36. }
  37. }
  38. .text,
  39. .icon {
  40. display: flex;
  41. align-items: center;
  42. justify-content: center;
  43. }
  44. }
  45. }
  46. .prompt-toast {
  47. position: absolute;
  48. bottom: -50px;
  49. z-index: 999;
  50. display: flex;
  51. justify-content: center;
  52. width: calc(100% - 40px);
  53. .prompt-toast-inner {
  54. display: flex;
  55. justify-content: center;
  56. align-items: center;
  57. font-size: 12px;
  58. background-color: var(--white);
  59. color: var(--black);
  60. border: var(--border-in-light);
  61. box-shadow: var(--card-shadow);
  62. padding: 10px 20px;
  63. border-radius: 100px;
  64. animation: slide-in-from-top ease 0.3s;
  65. .prompt-toast-content {
  66. margin-left: 10px;
  67. }
  68. }
  69. }
  70. .section-title {
  71. font-size: 12px;
  72. font-weight: bold;
  73. margin-bottom: 10px;
  74. display: flex;
  75. justify-content: space-between;
  76. align-items: center;
  77. .section-title-action {
  78. display: flex;
  79. align-items: center;
  80. }
  81. }
  82. .context-prompt {
  83. .context-prompt-row {
  84. display: flex;
  85. justify-content: center;
  86. width: 100%;
  87. margin-bottom: 10px;
  88. &:hover {
  89. .context-drag {
  90. opacity: 1;
  91. }
  92. }
  93. .context-drag {
  94. display: flex;
  95. align-items: center;
  96. opacity: 0.5;
  97. transition: all ease 0.3s;
  98. }
  99. .context-role {
  100. margin-right: 10px;
  101. }
  102. .context-content {
  103. flex: 1;
  104. max-width: 100%;
  105. text-align: left;
  106. }
  107. .context-delete-button {
  108. margin-left: 10px;
  109. }
  110. }
  111. .context-prompt-button {
  112. flex: 1;
  113. }
  114. }
  115. .memory-prompt {
  116. margin: 20px 0;
  117. .memory-prompt-content {
  118. background-color: var(--white);
  119. color: var(--black);
  120. border: var(--border-in-light);
  121. border-radius: 10px;
  122. padding: 10px;
  123. font-size: 12px;
  124. user-select: text;
  125. }
  126. }
  127. .clear-context {
  128. margin: 20px 0 0 0;
  129. padding: 4px 0;
  130. border-top: var(--border-in-light);
  131. border-bottom: var(--border-in-light);
  132. box-shadow: var(--card-shadow) inset;
  133. display: flex;
  134. justify-content: center;
  135. align-items: center;
  136. color: var(--black);
  137. transition: all ease 0.3s;
  138. cursor: pointer;
  139. overflow: hidden;
  140. position: relative;
  141. font-size: 12px;
  142. animation: slide-in ease 0.3s;
  143. $linear: linear-gradient(
  144. to right,
  145. rgba(0, 0, 0, 0),
  146. rgba(0, 0, 0, 1),
  147. rgba(0, 0, 0, 0)
  148. );
  149. mask-image: $linear;
  150. @mixin show {
  151. transform: translateY(0);
  152. position: relative;
  153. transition: all ease 0.3s;
  154. opacity: 1;
  155. }
  156. @mixin hide {
  157. transform: translateY(-50%);
  158. position: absolute;
  159. transition: all ease 0.1s;
  160. opacity: 0;
  161. }
  162. &-tips {
  163. @include show;
  164. opacity: 0.5;
  165. }
  166. &-revert-btn {
  167. color: var(--primary);
  168. @include hide;
  169. }
  170. &:hover {
  171. opacity: 1;
  172. border-color: var(--primary);
  173. .clear-context-tips {
  174. @include hide;
  175. }
  176. .clear-context-revert-btn {
  177. @include show;
  178. }
  179. }
  180. }
  181. .chat {
  182. display: flex;
  183. flex-direction: column;
  184. position: relative;
  185. height: 100%;
  186. }
  187. .chat-body {
  188. flex: 1;
  189. overflow: auto;
  190. overflow-x: hidden;
  191. padding: 20px;
  192. padding-bottom: 40px;
  193. position: relative;
  194. overscroll-behavior: none;
  195. }
  196. .chat-body-main-title {
  197. cursor: pointer;
  198. &:hover {
  199. text-decoration: underline;
  200. }
  201. }
  202. @media only screen and (max-width: 600px) {
  203. .chat-body-title {
  204. text-align: center;
  205. }
  206. }
  207. .chat-message {
  208. display: flex;
  209. flex-direction: row;
  210. &:last-child {
  211. animation: slide-in ease 0.3s;
  212. }
  213. }
  214. .chat-message-user {
  215. display: flex;
  216. flex-direction: row-reverse;
  217. .chat-message-header {
  218. flex-direction: row-reverse;
  219. }
  220. }
  221. .chat-message-header {
  222. margin-top: 20px;
  223. display: flex;
  224. align-items: center;
  225. .chat-message-actions {
  226. display: flex;
  227. box-sizing: border-box;
  228. font-size: 12px;
  229. align-items: flex-end;
  230. justify-content: space-between;
  231. transition: all ease 0.3s;
  232. transform: scale(0.9) translateY(5px);
  233. margin: 0 10px;
  234. opacity: 0;
  235. pointer-events: none;
  236. .chat-input-actions {
  237. display: flex;
  238. flex-wrap: nowrap;
  239. }
  240. }
  241. }
  242. .chat-message-container {
  243. max-width: var(--message-max-width);
  244. display: flex;
  245. flex-direction: column;
  246. align-items: flex-start;
  247. &:hover {
  248. .chat-message-edit {
  249. opacity: 0.9;
  250. }
  251. .chat-message-actions {
  252. opacity: 1;
  253. pointer-events: all;
  254. transform: scale(1) translateY(0);
  255. }
  256. }
  257. }
  258. .chat-message-user > .chat-message-container {
  259. align-items: flex-end;
  260. }
  261. .chat-message-avatar {
  262. position: relative;
  263. .chat-message-edit {
  264. position: absolute;
  265. height: 100%;
  266. width: 100%;
  267. overflow: hidden;
  268. display: flex;
  269. align-items: center;
  270. justify-content: center;
  271. opacity: 0;
  272. transition: all ease 0.3s;
  273. button {
  274. padding: 7px;
  275. }
  276. }
  277. }
  278. .chat-message-status {
  279. font-size: 12px;
  280. color: #aaa;
  281. line-height: 1.5;
  282. margin-top: 5px;
  283. }
  284. .chat-message-item {
  285. box-sizing: border-box;
  286. max-width: 100%;
  287. margin-top: 10px;
  288. border-radius: 10px;
  289. background-color: rgba(0, 0, 0, 0.05);
  290. padding: 10px;
  291. font-size: 14px;
  292. user-select: text;
  293. word-break: break-word;
  294. border: var(--border-in-light);
  295. position: relative;
  296. transition: all ease 0.3s;
  297. }
  298. .chat-message-action-date {
  299. font-size: 12px;
  300. opacity: 0.2;
  301. white-space: nowrap;
  302. transition: all ease 0.6s;
  303. color: var(--black);
  304. text-align: right;
  305. width: 100%;
  306. box-sizing: border-box;
  307. padding-right: 10px;
  308. pointer-events: none;
  309. z-index: 1;
  310. }
  311. .chat-message-user > .chat-message-container > .chat-message-item {
  312. background-color: var(--second);
  313. &:hover {
  314. min-width: 0;
  315. }
  316. }
  317. .chat-input-panel {
  318. position: relative;
  319. width: 100%;
  320. padding: 20px;
  321. padding-top: 10px;
  322. box-sizing: border-box;
  323. flex-direction: column;
  324. border-top: var(--border-in-light);
  325. box-shadow: var(--card-shadow);
  326. .chat-input-actions {
  327. .chat-input-action {
  328. margin-bottom: 10px;
  329. }
  330. }
  331. }
  332. @mixin single-line {
  333. white-space: nowrap;
  334. overflow: hidden;
  335. text-overflow: ellipsis;
  336. }
  337. .prompt-hints {
  338. min-height: 20px;
  339. width: 100%;
  340. max-height: 50vh;
  341. overflow: auto;
  342. display: flex;
  343. flex-direction: column-reverse;
  344. background-color: var(--white);
  345. border: var(--border-in-light);
  346. border-radius: 10px;
  347. margin-bottom: 10px;
  348. box-shadow: var(--shadow);
  349. .prompt-hint {
  350. color: var(--black);
  351. padding: 6px 10px;
  352. animation: slide-in ease 0.3s;
  353. cursor: pointer;
  354. transition: all ease 0.3s;
  355. border: transparent 1px solid;
  356. margin: 4px;
  357. border-radius: 8px;
  358. &:not(:last-child) {
  359. margin-top: 0;
  360. }
  361. .hint-title {
  362. font-size: 12px;
  363. font-weight: bolder;
  364. @include single-line();
  365. }
  366. .hint-content {
  367. font-size: 12px;
  368. @include single-line();
  369. }
  370. &-selected,
  371. &:hover {
  372. border-color: var(--primary);
  373. }
  374. }
  375. }
  376. .chat-input-panel-inner {
  377. display: flex;
  378. flex: 1;
  379. }
  380. .chat-input {
  381. height: 100%;
  382. width: 100%;
  383. border-radius: 10px;
  384. border: var(--border-in-light);
  385. box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
  386. background-color: var(--white);
  387. color: var(--black);
  388. font-family: inherit;
  389. padding: 10px 90px 10px 14px;
  390. resize: none;
  391. outline: none;
  392. box-sizing: border-box;
  393. min-height: 68px;
  394. }
  395. .chat-input:focus {
  396. border: 1px solid var(--primary);
  397. }
  398. .chat-input-send {
  399. background-color: var(--primary);
  400. color: white;
  401. position: absolute;
  402. right: 30px;
  403. bottom: 32px;
  404. }
  405. @media only screen and (max-width: 600px) {
  406. .chat-input {
  407. font-size: 16px;
  408. }
  409. .chat-input-send {
  410. bottom: 30px;
  411. }
  412. }