Sidebar.svelte 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689
  1. <script lang="ts">
  2. import { toast } from 'svelte-sonner';
  3. import { goto } from '$app/navigation';
  4. import {
  5. user,
  6. chats,
  7. settings,
  8. showSettings,
  9. chatId,
  10. tags,
  11. showSidebar,
  12. mobile,
  13. showArchivedChats,
  14. pinnedChats,
  15. scrollPaginationEnabled,
  16. currentChatPage,
  17. temporaryChatEnabled,
  18. showArtifacts,
  19. showOverview,
  20. showControls
  21. } from '$lib/stores';
  22. import { onMount, getContext, tick, onDestroy } from 'svelte';
  23. const i18n = getContext('i18n');
  24. import { updateUserSettings } from '$lib/apis/users';
  25. import {
  26. deleteChatById,
  27. getChatList,
  28. getChatById,
  29. getChatListByTagName,
  30. updateChatById,
  31. getAllChatTags,
  32. archiveChatById,
  33. cloneChatById,
  34. getChatListBySearchText,
  35. createNewChat,
  36. getPinnedChatList
  37. } from '$lib/apis/chats';
  38. import { WEBUI_BASE_URL } from '$lib/constants';
  39. import ArchivedChatsModal from './Sidebar/ArchivedChatsModal.svelte';
  40. import UserMenu from './Sidebar/UserMenu.svelte';
  41. import ChatItem from './Sidebar/ChatItem.svelte';
  42. import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
  43. import Spinner from '../common/Spinner.svelte';
  44. import Loader from '../common/Loader.svelte';
  45. import FilesOverlay from '../chat/MessageInput/FilesOverlay.svelte';
  46. import AddFilesPlaceholder from '../AddFilesPlaceholder.svelte';
  47. const BREAKPOINT = 768;
  48. let navElement;
  49. let search = '';
  50. let shiftKey = false;
  51. let selectedChatId = null;
  52. let deleteChat = null;
  53. let showDeleteConfirm = false;
  54. let showDropdown = false;
  55. let selectedTagName = null;
  56. // Pagination variables
  57. let chatListLoading = false;
  58. let allChatsLoaded = false;
  59. const initChatList = async () => {
  60. // Reset pagination variables
  61. currentChatPage.set(1);
  62. allChatsLoaded = false;
  63. await chats.set(await getChatList(localStorage.token, $currentChatPage));
  64. // Enable pagination
  65. scrollPaginationEnabled.set(true);
  66. };
  67. const loadMoreChats = async () => {
  68. chatListLoading = true;
  69. currentChatPage.set($currentChatPage + 1);
  70. let newChatList = [];
  71. if (search) {
  72. newChatList = await getChatListBySearchText(localStorage.token, search, $currentChatPage);
  73. } else {
  74. newChatList = await getChatList(localStorage.token, $currentChatPage);
  75. }
  76. // once the bottom of the list has been reached (no results) there is no need to continue querying
  77. allChatsLoaded = newChatList.length === 0;
  78. await chats.set([...$chats, ...newChatList]);
  79. chatListLoading = false;
  80. };
  81. let searchDebounceTimeout;
  82. const searchDebounceHandler = async () => {
  83. console.log('search', search);
  84. chats.set(null);
  85. selectedTagName = null;
  86. if (searchDebounceTimeout) {
  87. clearTimeout(searchDebounceTimeout);
  88. }
  89. if (search === '') {
  90. await initChatList();
  91. return;
  92. } else {
  93. searchDebounceTimeout = setTimeout(async () => {
  94. currentChatPage.set(1);
  95. await chats.set(await getChatListBySearchText(localStorage.token, search));
  96. }, 1000);
  97. }
  98. };
  99. const deleteChatHandler = async (id) => {
  100. const res = await deleteChatById(localStorage.token, id).catch((error) => {
  101. toast.error(error);
  102. return null;
  103. });
  104. if (res) {
  105. if ($chatId === id) {
  106. await chatId.set('');
  107. await tick();
  108. goto('/');
  109. }
  110. allChatsLoaded = false;
  111. currentChatPage.set(1);
  112. await chats.set(await getChatList(localStorage.token, $currentChatPage));
  113. await pinnedChats.set(await getPinnedChatList(localStorage.token));
  114. }
  115. };
  116. const inputFilesHandler = async (files) => {
  117. console.log(files);
  118. for (const file of files) {
  119. const reader = new FileReader();
  120. reader.onload = async (e) => {
  121. const content = e.target.result;
  122. try {
  123. const items = JSON.parse(content);
  124. for (const item of items) {
  125. if (item.chat) {
  126. await createNewChat(localStorage.token, item.chat);
  127. }
  128. }
  129. } catch {
  130. toast.error($i18n.t(`Invalid file format.`));
  131. }
  132. initChatList();
  133. };
  134. reader.readAsText(file);
  135. }
  136. };
  137. let dragged = false;
  138. const onDragOver = (e) => {
  139. e.preventDefault();
  140. dragged = true;
  141. };
  142. const onDragLeave = () => {
  143. dragged = false;
  144. };
  145. const onDrop = async (e) => {
  146. e.preventDefault();
  147. console.log(e);
  148. if (e.dataTransfer?.files) {
  149. const inputFiles = Array.from(e.dataTransfer?.files);
  150. if (inputFiles && inputFiles.length > 0) {
  151. console.log(inputFiles);
  152. inputFilesHandler(inputFiles);
  153. } else {
  154. toast.error($i18n.t(`File not found.`));
  155. }
  156. }
  157. dragged = false;
  158. };
  159. let touchstart;
  160. let touchend;
  161. function checkDirection() {
  162. const screenWidth = window.innerWidth;
  163. const swipeDistance = Math.abs(touchend.screenX - touchstart.screenX);
  164. if (touchstart.clientX < 40 && swipeDistance >= screenWidth / 8) {
  165. if (touchend.screenX < touchstart.screenX) {
  166. showSidebar.set(false);
  167. }
  168. if (touchend.screenX > touchstart.screenX) {
  169. showSidebar.set(true);
  170. }
  171. }
  172. }
  173. const onTouchStart = (e) => {
  174. touchstart = e.changedTouches[0];
  175. console.log(touchstart.clientX);
  176. };
  177. const onTouchEnd = (e) => {
  178. touchend = e.changedTouches[0];
  179. checkDirection();
  180. };
  181. const onKeyDown = (e) => {
  182. if (e.key === 'Shift') {
  183. shiftKey = true;
  184. }
  185. };
  186. const onKeyUp = (e) => {
  187. if (e.key === 'Shift') {
  188. shiftKey = false;
  189. }
  190. };
  191. const onFocus = () => {};
  192. const onBlur = () => {
  193. shiftKey = false;
  194. selectedChatId = null;
  195. };
  196. onMount(async () => {
  197. mobile.subscribe((e) => {
  198. if ($showSidebar && e) {
  199. showSidebar.set(false);
  200. }
  201. if (!$showSidebar && !e) {
  202. showSidebar.set(true);
  203. }
  204. });
  205. showSidebar.set(!$mobile ? localStorage.sidebar === 'true' : false);
  206. showSidebar.subscribe((value) => {
  207. localStorage.sidebar = value;
  208. });
  209. await pinnedChats.set(await getPinnedChatList(localStorage.token));
  210. await initChatList();
  211. window.addEventListener('keydown', onKeyDown);
  212. window.addEventListener('keyup', onKeyUp);
  213. window.addEventListener('touchstart', onTouchStart);
  214. window.addEventListener('touchend', onTouchEnd);
  215. window.addEventListener('focus', onFocus);
  216. window.addEventListener('blur', onBlur);
  217. const dropZone = document.getElementById('sidebar');
  218. dropZone?.addEventListener('dragover', onDragOver);
  219. dropZone?.addEventListener('drop', onDrop);
  220. dropZone?.addEventListener('dragleave', onDragLeave);
  221. });
  222. onDestroy(() => {
  223. window.removeEventListener('keydown', onKeyDown);
  224. window.removeEventListener('keyup', onKeyUp);
  225. window.removeEventListener('touchstart', onTouchStart);
  226. window.removeEventListener('touchend', onTouchEnd);
  227. window.removeEventListener('focus', onFocus);
  228. window.removeEventListener('blur', onBlur);
  229. const dropZone = document.getElementById('sidebar');
  230. dropZone?.removeEventListener('dragover', onDragOver);
  231. dropZone?.removeEventListener('drop', onDrop);
  232. dropZone?.removeEventListener('dragleave', onDragLeave);
  233. });
  234. </script>
  235. <ArchivedChatsModal
  236. bind:show={$showArchivedChats}
  237. on:change={async () => {
  238. await chats.set(await getChatList(localStorage.token));
  239. }}
  240. />
  241. <DeleteConfirmDialog
  242. bind:show={showDeleteConfirm}
  243. title={$i18n.t('Delete chat?')}
  244. on:confirm={() => {
  245. deleteChatHandler(deleteChat.id);
  246. }}
  247. >
  248. <div class=" text-sm text-gray-500 flex-1 line-clamp-3">
  249. {$i18n.t('This will delete')} <span class=" font-semibold">{deleteChat.title}</span>.
  250. </div>
  251. </DeleteConfirmDialog>
  252. <!-- svelte-ignore a11y-no-static-element-interactions -->
  253. {#if $showSidebar}
  254. <div
  255. class=" fixed md:hidden z-40 top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain"
  256. on:mousedown={() => {
  257. showSidebar.set(!$showSidebar);
  258. }}
  259. />
  260. {/if}
  261. <div
  262. bind:this={navElement}
  263. id="sidebar"
  264. class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
  265. ? 'md:relative w-[260px]'
  266. : '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0
  267. "
  268. data-state={$showSidebar}
  269. >
  270. {#if dragged}
  271. <div
  272. class="absolute w-full h-full max-h-full backdrop-blur bg-gray-800/40 flex justify-center z-[999] touch-none pointer-events-none"
  273. >
  274. <div class="m-auto pt-64 flex flex-col justify-center">
  275. <AddFilesPlaceholder
  276. title={$i18n.t('Drop Chat Export')}
  277. content={$i18n.t('Drop a chat export file here to import it.')}
  278. />
  279. </div>
  280. </div>
  281. {/if}
  282. <div
  283. class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] z-50 {$showSidebar
  284. ? ''
  285. : 'invisible'}"
  286. >
  287. <div class="px-2.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400">
  288. <a
  289. id="sidebar-new-chat-button"
  290. class="flex flex-1 justify-between rounded-xl px-2 h-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
  291. href="/"
  292. draggable="false"
  293. on:click={async () => {
  294. selectedChatId = null;
  295. await goto('/');
  296. const newChatButton = document.getElementById('new-chat-button');
  297. setTimeout(() => {
  298. newChatButton?.click();
  299. if ($mobile) {
  300. showSidebar.set(false);
  301. }
  302. }, 0);
  303. }}
  304. >
  305. <div class="self-center mx-1.5">
  306. <img
  307. crossorigin="anonymous"
  308. src="{WEBUI_BASE_URL}/static/favicon.png"
  309. class=" size-6 -translate-x-1.5 rounded-full"
  310. alt="logo"
  311. />
  312. </div>
  313. <div class=" self-center font-medium text-sm text-gray-850 dark:text-white font-primary">
  314. {$i18n.t('New Chat')}
  315. </div>
  316. <div class="self-center ml-auto">
  317. <svg
  318. xmlns="http://www.w3.org/2000/svg"
  319. viewBox="0 0 20 20"
  320. fill="currentColor"
  321. class="size-5"
  322. >
  323. <path
  324. d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
  325. />
  326. <path
  327. d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
  328. />
  329. </svg>
  330. </div>
  331. </a>
  332. <button
  333. class=" cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-900 transition"
  334. on:click={() => {
  335. showSidebar.set(!$showSidebar);
  336. }}
  337. >
  338. <div class=" m-auto self-center">
  339. <svg
  340. xmlns="http://www.w3.org/2000/svg"
  341. fill="none"
  342. viewBox="0 0 24 24"
  343. stroke-width="2"
  344. stroke="currentColor"
  345. class="size-5"
  346. >
  347. <path
  348. stroke-linecap="round"
  349. stroke-linejoin="round"
  350. d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"
  351. />
  352. </svg>
  353. </div>
  354. </button>
  355. </div>
  356. {#if $user?.role === 'admin'}
  357. <div class="px-2.5 flex justify-center text-gray-800 dark:text-gray-200">
  358. <a
  359. class="flex-grow flex space-x-3 rounded-xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
  360. href="/workspace"
  361. on:click={() => {
  362. selectedChatId = null;
  363. chatId.set('');
  364. if ($mobile) {
  365. showSidebar.set(false);
  366. }
  367. }}
  368. draggable="false"
  369. >
  370. <div class="self-center">
  371. <svg
  372. xmlns="http://www.w3.org/2000/svg"
  373. fill="none"
  374. viewBox="0 0 24 24"
  375. stroke-width="2"
  376. stroke="currentColor"
  377. class="size-[1.1rem]"
  378. >
  379. <path
  380. stroke-linecap="round"
  381. stroke-linejoin="round"
  382. d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z"
  383. />
  384. </svg>
  385. </div>
  386. <div class="flex self-center">
  387. <div class=" self-center font-medium text-sm font-primary">{$i18n.t('Workspace')}</div>
  388. </div>
  389. </a>
  390. </div>
  391. {/if}
  392. <div
  393. class="relative flex flex-col flex-1 overflow-y-auto {$temporaryChatEnabled
  394. ? 'opacity-20'
  395. : ''}"
  396. >
  397. {#if $temporaryChatEnabled}
  398. <div class="absolute z-40 w-full h-full flex justify-center"></div>
  399. {/if}
  400. <div class="px-2 mt-0.5 mb-2 flex justify-center space-x-2">
  401. <div class="flex w-full rounded-xl" id="chat-search">
  402. <div class="self-center pl-3 py-2 rounded-l-xl bg-transparent">
  403. <svg
  404. xmlns="http://www.w3.org/2000/svg"
  405. viewBox="0 0 20 20"
  406. fill="currentColor"
  407. class="w-4 h-4"
  408. >
  409. <path
  410. fill-rule="evenodd"
  411. d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
  412. clip-rule="evenodd"
  413. />
  414. </svg>
  415. </div>
  416. <input
  417. class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm bg-transparent dark:text-gray-300 outline-none"
  418. placeholder={$i18n.t('Search')}
  419. bind:value={search}
  420. on:input={() => {
  421. searchDebounceHandler();
  422. }}
  423. />
  424. </div>
  425. </div>
  426. {#if $tags.length > 0}
  427. <div class="px-3.5 mb-1 flex gap-0.5 flex-wrap">
  428. <button
  429. class="px-2.5 py-[1px] text-xs transition {selectedTagName === null
  430. ? 'bg-gray-100 dark:bg-gray-900'
  431. : ' '} rounded-md font-medium"
  432. on:click={async () => {
  433. selectedTagName = null;
  434. await initChatList();
  435. }}
  436. >
  437. {$i18n.t('all')}
  438. </button>
  439. {#each $tags as tag}
  440. <button
  441. class="px-2.5 py-[1px] text-xs transition {selectedTagName === tag.name
  442. ? 'bg-gray-100 dark:bg-gray-900'
  443. : ''} rounded-md font-medium"
  444. on:click={async () => {
  445. selectedTagName = tag.name;
  446. scrollPaginationEnabled.set(false);
  447. let taggedChatList = await getChatListByTagName(localStorage.token, tag.name);
  448. if (taggedChatList.length === 0) {
  449. await tags.set(await getAllChatTags(localStorage.token));
  450. // if the tag we deleted is no longer a valid tag, return to main chat list view
  451. await initChatList();
  452. } else {
  453. await chats.set(taggedChatList);
  454. }
  455. chatListLoading = false;
  456. }}
  457. >
  458. {tag.name}
  459. </button>
  460. {/each}
  461. </div>
  462. {/if}
  463. {#if !search && $pinnedChats.length > 0}
  464. <div class="pl-2 py-2 flex flex-col space-y-1">
  465. <div class="">
  466. <div class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-medium pb-1.5">
  467. {$i18n.t('Pinned')}
  468. </div>
  469. {#each $pinnedChats as chat, idx}
  470. <ChatItem
  471. {chat}
  472. {shiftKey}
  473. selected={selectedChatId === chat.id}
  474. on:select={() => {
  475. selectedChatId = chat.id;
  476. }}
  477. on:unselect={() => {
  478. selectedChatId = null;
  479. }}
  480. on:delete={(e) => {
  481. if ((e?.detail ?? '') === 'shift') {
  482. deleteChatHandler(chat.id);
  483. } else {
  484. deleteChat = chat;
  485. showDeleteConfirm = true;
  486. }
  487. }}
  488. />
  489. {/each}
  490. </div>
  491. </div>
  492. {/if}
  493. <div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden">
  494. {#if $chats}
  495. {#each $chats as chat, idx}
  496. {#if idx === 0 || (idx > 0 && chat.time_range !== $chats[idx - 1].time_range)}
  497. <div
  498. class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-medium {idx === 0
  499. ? ''
  500. : 'pt-5'} pb-0.5"
  501. >
  502. {$i18n.t(chat.time_range)}
  503. <!-- localisation keys for time_range to be recognized from the i18next parser (so they don't get automatically removed):
  504. {$i18n.t('Today')}
  505. {$i18n.t('Yesterday')}
  506. {$i18n.t('Previous 7 days')}
  507. {$i18n.t('Previous 30 days')}
  508. {$i18n.t('January')}
  509. {$i18n.t('February')}
  510. {$i18n.t('March')}
  511. {$i18n.t('April')}
  512. {$i18n.t('May')}
  513. {$i18n.t('June')}
  514. {$i18n.t('July')}
  515. {$i18n.t('August')}
  516. {$i18n.t('September')}
  517. {$i18n.t('October')}
  518. {$i18n.t('November')}
  519. {$i18n.t('December')}
  520. -->
  521. </div>
  522. {/if}
  523. <ChatItem
  524. {chat}
  525. {shiftKey}
  526. selected={selectedChatId === chat.id}
  527. on:select={() => {
  528. selectedChatId = chat.id;
  529. }}
  530. on:unselect={() => {
  531. selectedChatId = null;
  532. }}
  533. on:delete={(e) => {
  534. if ((e?.detail ?? '') === 'shift') {
  535. deleteChatHandler(chat.id);
  536. } else {
  537. deleteChat = chat;
  538. showDeleteConfirm = true;
  539. }
  540. }}
  541. />
  542. {/each}
  543. {#if $scrollPaginationEnabled && !allChatsLoaded}
  544. <Loader
  545. on:visible={(e) => {
  546. if (!chatListLoading) {
  547. loadMoreChats();
  548. }
  549. }}
  550. >
  551. <div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
  552. <Spinner className=" size-4" />
  553. <div class=" ">Loading...</div>
  554. </div>
  555. </Loader>
  556. {/if}
  557. {:else}
  558. <div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
  559. <Spinner className=" size-4" />
  560. <div class=" ">Loading...</div>
  561. </div>
  562. {/if}
  563. </div>
  564. </div>
  565. <div class="px-2.5 pb-safe-bottom">
  566. <!-- <hr class=" border-gray-900 mb-1 w-full" /> -->
  567. <div class="flex flex-col font-primary">
  568. {#if $user !== undefined}
  569. <UserMenu
  570. role={$user.role}
  571. on:show={(e) => {
  572. if (e.detail === 'archived-chat') {
  573. showArchivedChats.set(true);
  574. }
  575. }}
  576. >
  577. <button
  578. class=" flex rounded-xl py-3 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
  579. on:click={() => {
  580. showDropdown = !showDropdown;
  581. }}
  582. >
  583. <div class=" self-center mr-3">
  584. <img
  585. src={$user.profile_image_url}
  586. class=" max-w-[30px] object-cover rounded-full"
  587. alt="User profile"
  588. />
  589. </div>
  590. <div class=" self-center font-medium">{$user.name}</div>
  591. </button>
  592. </UserMenu>
  593. {/if}
  594. </div>
  595. </div>
  596. </div>
  597. </div>
  598. <style>
  599. .scrollbar-hidden:active::-webkit-scrollbar-thumb,
  600. .scrollbar-hidden:focus::-webkit-scrollbar-thumb,
  601. .scrollbar-hidden:hover::-webkit-scrollbar-thumb {
  602. visibility: visible;
  603. }
  604. .scrollbar-hidden::-webkit-scrollbar-thumb {
  605. visibility: hidden;
  606. }
  607. </style>