refac

src/lib/components/admin/Users/UserList/UserChatsModal.svelte

@@ -9,13 +9,14 @@
 
 	import Modal from '$lib/components/common/Modal.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
 
 	const i18n = getContext('i18n');
 
 	export let show = false;
 	export let user;
 
-	let chats = [];
+	let chats = null;
 
 	const deleteChatHandler = async (chatId) => {
 		const res = await deleteChatById(localStorage.token, chatId).catch((error) => {
@@ -31,6 +32,8 @@
 				chats = await getChatListByUserId(localStorage.token, user.id);
 			}
 		})();
+	} else {
+		chats = null;
 	}
 
 	let sortKey = 'updated_at'; // default sort key
@@ -46,33 +49,32 @@
 </script>
 
 <Modal size="lg" bind:show>
-	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
-			<div class=" text-lg font-medium self-center capitalize">
-				{$i18n.t("{{user}}'s Chats", { user: user.name })}
-			</div>
-			<button
-				class="self-center"
-				on:click={() => {
-					show = false;
-				}}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 20 20"
-					fill="currentColor"
-					class="w-5 h-5"
-				>
-					<path
-						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-					/>
-				</svg>
-			</button>
+	<div class=" flex justify-between dark:text-gray-300 px-5 pt-4">
+		<div class=" text-lg font-medium self-center capitalize">
+			{$i18n.t("{{user}}'s Chats", { user: user.name })}
 		</div>
-		<hr class=" dark:border-gray-850" />
+		<button
+			class="self-center"
+			on:click={() => {
+				show = false;
+			}}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				class="w-5 h-5"
+			>
+				<path
+					d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+				/>
+			</svg>
+		</button>
+	</div>
 
-		<div class="flex flex-col md:flex-row w-full px-5 py-4 md:space-x-4 dark:text-gray-200">
-			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
+	<div class="flex flex-col md:flex-row w-full px-5 pt-2 pb-4 md:space-x-4 dark:text-gray-200">
+		<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
+			{#if chats}
 				{#if chats.length > 0}
 					<div class="text-left text-sm w-full mb-4 max-h-[22rem] overflow-y-scroll">
 						<div class="relative overflow-x-auto">
@@ -176,7 +178,9 @@
 						{$i18n.t('has no conversations.')}
 					</div>
 				{/if}
-			</div>
+			{:else}
+				<Spinner />
+			{/if}
 		</div>
 	</div>
 </Modal>

src/lib/components/common/RichTextInput/AutoCompletion.js

@@ -1,3 +1,16 @@
+/*
+Here we initialize the plugin with keyword mapping.
+Intended to handle user interactions seamlessly.
+
+Observe the keydown events for proactive suggestions.
+Provide a mechanism for accepting AI suggestions.
+Evaluate each input change with debounce logic.
+Next, we implement touch and mouse interactions.
+
+Anchor the user experience to intuitive behavior.
+Intelligently reset suggestions on new input.
+*/
+
 import { Extension } from '@tiptap/core'
 import { Plugin, PluginKey } from 'prosemirror-state'
 
@@ -202,4 +215,5 @@ export const AIAutocompletion = Extension.create({
       }),
     ]
   },
-})
+})
+