refac

src/lib/components/chat/MessageInput/InputMenu.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
 	import { DropdownMenu } from 'bits-ui';
-	import { flyAndScale } from '$lib/utils/transitions';
 	import { getContext, onMount, tick } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { flyAndScale } from '$lib/utils/transitions';
 
 	import { config, user, tools as _tools, mobile, knowledge, chats } from '$lib/stores';
 	import { createPicker } from '$lib/utils/google-drive-picker';
 
-	import { getTools } from '$lib/apis/tools';
-
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import DocumentArrowUp from '$lib/components/icons/DocumentArrowUp.svelte';
@@ -19,6 +18,12 @@
 	import Agile from '$lib/components/icons/Agile.svelte';
 	import ClockRotateRight from '$lib/components/icons/ClockRotateRight.svelte';
 	import Database from '$lib/components/icons/Database.svelte';
+	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
+	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
+	import PageEdit from '$lib/components/icons/PageEdit.svelte';
+	import Chats from './InputMenu/Chats.svelte';
+	import Notes from './InputMenu/Notes.svelte';
+	import Knowledge from './InputMenu/Knowledge.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -37,6 +42,7 @@
 	export let onClose: Function;
 
 	let show = false;
+	let tab = '';
 
 	let fileUploadEnabled = true;
 	$: fileUploadEnabled =
@@ -81,323 +87,381 @@
 
 	<div slot="content">
 		<DropdownMenu.Content
-			class="w-full max-w-[240px] rounded-2xl px-1 py-1  border border-gray-100  dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
+			class="w-full max-w-[240px] rounded-2xl px-1 py-1  border border-gray-100  dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin transition"
 			sideOffset={4}
 			alignOffset={-6}
 			side="bottom"
 			align="start"
 			transition={flyAndScale}
 		>
-			<Tooltip
-				content={fileUploadCapableModels.length !== selectedModels.length
-					? $i18n.t('Model(s) do not support file upload')
-					: !fileUploadEnabled
-						? $i18n.t('You do not have permission to upload files.')
-						: ''}
-				className="w-full"
-			>
-				<DropdownMenu.Item
-					class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled
-						? 'opacity-50'
-						: ''}"
-					on:click={() => {
-						if (fileUploadEnabled) {
-							uploadFilesHandler();
-						}
-					}}
-				>
-					<Clip />
-
-					<div class="line-clamp-1">{$i18n.t('Upload Files')}</div>
-				</DropdownMenu.Item>
-			</Tooltip>
-
-			<Tooltip
-				content={fileUploadCapableModels.length !== selectedModels.length
-					? $i18n.t('Model(s) do not support file upload')
-					: !fileUploadEnabled
-						? $i18n.t('You do not have permission to upload files.')
-						: ''}
-				className="w-full"
-			>
-				<DropdownMenu.Item
-					class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800  rounded-xl {!fileUploadEnabled
-						? 'opacity-50'
-						: ''}"
-					on:click={() => {
-						if (fileUploadEnabled) {
-							if (!detectMobile()) {
-								screenCaptureHandler();
-							} else {
-								const cameraInputElement = document.getElementById('camera-input');
-
-								if (cameraInputElement) {
-									cameraInputElement.click();
-								}
-							}
-						}
-					}}
-				>
-					<Camera />
-					<div class=" line-clamp-1">{$i18n.t('Capture')}</div>
-				</DropdownMenu.Item>
-			</Tooltip>
-
-			{#if $config?.features?.enable_notes ?? false}
-				<Tooltip
-					content={fileUploadCapableModels.length !== selectedModels.length
-						? $i18n.t('Model(s) do not support file upload')
-						: !fileUploadEnabled
-							? $i18n.t('You do not have permission to upload files.')
-							: ''}
-					className="w-full"
-				>
-					<DropdownMenu.Item
-						class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800  rounded-xl {!fileUploadEnabled
-							? 'opacity-50'
-							: ''}"
-						on:click={() => {
-							if (fileUploadEnabled) {
-								if (!detectMobile()) {
-									screenCaptureHandler();
-								} else {
-									const cameraInputElement = document.getElementById('camera-input');
-
-									if (cameraInputElement) {
-										cameraInputElement.click();
-									}
+			{#if tab === ''}
+				<div in:fly={{ x: -20, duration: 150 }}>
+					<Tooltip
+						content={fileUploadCapableModels.length !== selectedModels.length
+							? $i18n.t('Model(s) do not support file upload')
+							: !fileUploadEnabled
+								? $i18n.t('You do not have permission to upload files.')
+								: ''}
+						className="w-full"
+					>
+						<DropdownMenu.Item
+							class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled
+								? 'opacity-50'
+								: ''}"
+							on:click={() => {
+								if (fileUploadEnabled) {
+									uploadFilesHandler();
 								}
-							}
-						}}
+							}}
+						>
+							<Clip />
+
+							<div class="line-clamp-1">{$i18n.t('Upload Files')}</div>
+						</DropdownMenu.Item>
+					</Tooltip>
+
+					<Tooltip
+						content={fileUploadCapableModels.length !== selectedModels.length
+							? $i18n.t('Model(s) do not support file upload')
+							: !fileUploadEnabled
+								? $i18n.t('You do not have permission to upload files.')
+								: ''}
+						className="w-full"
 					>
-						<Note />
-						<div class=" line-clamp-1">{$i18n.t('Attach Notes')}</div>
-					</DropdownMenu.Item>
-				</Tooltip>
-			{/if}
+						<DropdownMenu.Item
+							class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800  rounded-xl {!fileUploadEnabled
+								? 'opacity-50'
+								: ''}"
+							on:click={() => {
+								if (fileUploadEnabled) {
+									if (!detectMobile()) {
+										screenCaptureHandler();
+									} else {
+										const cameraInputElement = document.getElementById('camera-input');
 
-			<Tooltip
-				content={fileUploadCapableModels.length !== selectedModels.length
-					? $i18n.t('Model(s) do not support file upload')
-					: !fileUploadEnabled
-						? $i18n.t('You do not have permission to upload files.')
-						: ''}
-				className="w-full"
-			>
-				<DropdownMenu.Item
-					class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800  rounded-xl {!fileUploadEnabled
-						? 'opacity-50'
-						: ''}"
-					on:click={() => {
-						if (fileUploadEnabled) {
-							if (!detectMobile()) {
-								screenCaptureHandler();
-							} else {
-								const cameraInputElement = document.getElementById('camera-input');
-
-								if (cameraInputElement) {
-									cameraInputElement.click();
-								}
-							}
-						}
-					}}
-				>
-					<Database />
-					<div class=" line-clamp-1">{$i18n.t('Attach Knowledge')}</div>
-				</DropdownMenu.Item>
-			</Tooltip>
-
-			{#if ($chats ?? []).length > 0}
-				<Tooltip
-					content={fileUploadCapableModels.length !== selectedModels.length
-						? $i18n.t('Model(s) do not support file upload')
-						: !fileUploadEnabled
-							? $i18n.t('You do not have permission to upload files.')
-							: ''}
-					className="w-full"
-				>
-					<DropdownMenu.Item
-						class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800  rounded-xl {!fileUploadEnabled
-							? 'opacity-50'
-							: ''}"
-						on:click={() => {
-							if (fileUploadEnabled) {
-								if (!detectMobile()) {
-									screenCaptureHandler();
-								} else {
-									const cameraInputElement = document.getElementById('camera-input');
-
-									if (cameraInputElement) {
-										cameraInputElement.click();
+										if (cameraInputElement) {
+											cameraInputElement.click();
+										}
 									}
 								}
-							}
-						}}
-					>
-						<ClockRotateRight />
-						<div class=" line-clamp-1">{$i18n.t('Reference Chats')}</div>
-					</DropdownMenu.Item>
-				</Tooltip>
-			{/if}
+							}}
+						>
+							<Camera />
+							<div class=" line-clamp-1">{$i18n.t('Capture')}</div>
+						</DropdownMenu.Item>
+					</Tooltip>
 
-			{#if fileUploadEnabled}
-				{#if $config?.features?.enable_google_drive_integration}
-					<DropdownMenu.Item
-						class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
-						on:click={() => {
-							uploadGoogleDriveHandler();
-						}}
+					{#if $config?.features?.enable_notes ?? false}
+						<Tooltip
+							content={fileUploadCapableModels.length !== selectedModels.length
+								? $i18n.t('Model(s) do not support file upload')
+								: !fileUploadEnabled
+									? $i18n.t('You do not have permission to upload files.')
+									: ''}
+							className="w-full"
+						>
+							<button
+								class="flex gap-2 w-full items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled
+									? 'opacity-50'
+									: ''}"
+								on:click={() => {
+									tab = 'notes';
+								}}
+							>
+								<PageEdit />
+
+								<div class="flex items-center w-full justify-between">
+									<div class=" line-clamp-1">
+										{$i18n.t('Attach Notes')}
+									</div>
+
+									<div class="text-gray-500">
+										<ChevronRight />
+									</div>
+								</div>
+							</button>
+						</Tooltip>
+					{/if}
+
+					<Tooltip
+						content={fileUploadCapableModels.length !== selectedModels.length
+							? $i18n.t('Model(s) do not support file upload')
+							: !fileUploadEnabled
+								? $i18n.t('You do not have permission to upload files.')
+								: ''}
+						className="w-full"
 					>
-						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" class="w-5 h-5">
-							<path
-								d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-								fill="#0066da"
-							/>
-							<path
-								d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-								fill="#00ac47"
-							/>
-							<path
-								d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-								fill="#ea4335"
-							/>
-							<path
-								d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-								fill="#00832d"
-							/>
-							<path
-								d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-								fill="#2684fc"
-							/>
-							<path
-								d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-								fill="#ffba00"
-							/>
-						</svg>
-						<div class="line-clamp-1">{$i18n.t('Google Drive')}</div>
-					</DropdownMenu.Item>
-				{/if}
-
-				{#if $config?.features?.enable_onedrive_integration}
-					<DropdownMenu.Sub>
-						<DropdownMenu.SubTrigger
-							class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+						<button
+							class="flex gap-2 w-full items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled
+								? 'opacity-50'
+								: ''}"
+							on:click={() => {
+								tab = 'knowledge';
+							}}
+						>
+							<Database />
+
+							<div class="flex items-center w-full justify-between">
+								<div class=" line-clamp-1">
+									{$i18n.t('Attach Knowledge')}
+								</div>
+
+								<div class="text-gray-500">
+									<ChevronRight />
+								</div>
+							</div>
+						</button>
+					</Tooltip>
+
+					{#if ($chats ?? []).length > 0}
+						<Tooltip
+							content={fileUploadCapableModels.length !== selectedModels.length
+								? $i18n.t('Model(s) do not support file upload')
+								: !fileUploadEnabled
+									? $i18n.t('You do not have permission to upload files.')
+									: ''}
+							className="w-full"
 						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 32 32"
-								class="w-5 h-5"
-								fill="none"
+							<button
+								class="flex gap-2 w-full items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl {!fileUploadEnabled
+									? 'opacity-50'
+									: ''}"
+								on:click={() => {
+									tab = 'chats';
+								}}
 							>
-								<mask
-									id="mask0_87_7796"
-									style="mask-type:alpha"
-									maskUnits="userSpaceOnUse"
-									x="0"
-									y="6"
-									width="32"
-									height="20"
-								>
+								<ClockRotateRight />
+
+								<div class="flex items-center w-full justify-between">
+									<div class=" line-clamp-1">
+										{$i18n.t('Reference Chats')}
+									</div>
+
+									<div class="text-gray-500">
+										<ChevronRight />
+									</div>
+								</div>
+							</button>
+						</Tooltip>
+					{/if}
+
+					{#if fileUploadEnabled}
+						{#if $config?.features?.enable_google_drive_integration}
+							<DropdownMenu.Item
+								class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+								on:click={() => {
+									uploadGoogleDriveHandler();
+								}}
+							>
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" class="w-5 h-5">
 									<path
-										d="M7.82979 26C3.50549 26 0 22.5675 0 18.3333C0 14.1921 3.35322 10.8179 7.54613 10.6716C9.27535 7.87166 12.4144 6 16 6C20.6308 6 24.5169 9.12183 25.5829 13.3335C29.1316 13.3603 32 16.1855 32 19.6667C32 23.0527 29 26 25.8723 25.9914L7.82979 26Z"
-										fill="#C4C4C4"
+										d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+										fill="#0066da"
 									/>
-								</mask>
-								<g mask="url(#mask0_87_7796)">
 									<path
-										d="M7.83017 26.0001C5.37824 26.0001 3.18957 24.8966 1.75391 23.1691L18.0429 16.3335L30.7089 23.4647C29.5926 24.9211 27.9066 26.0001 26.0004 25.9915C23.1254 26.0001 12.0629 26.0001 7.83017 26.0001Z"
-										fill="url(#paint0_linear_87_7796)"
+										d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+										fill="#00ac47"
 									/>
 									<path
-										d="M25.5785 13.3149L18.043 16.3334L30.709 23.4647C31.5199 22.4065 32.0004 21.0916 32.0004 19.6669C32.0004 16.1857 29.1321 13.3605 25.5833 13.3337C25.5817 13.3274 25.5801 13.3212 25.5785 13.3149Z"
-										fill="url(#paint1_linear_87_7796)"
+										d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+										fill="#ea4335"
 									/>
 									<path
-										d="M7.06445 10.7028L18.0423 16.3333L25.5779 13.3148C24.5051 9.11261 20.6237 6 15.9997 6C12.4141 6 9.27508 7.87166 7.54586 10.6716C7.3841 10.6773 7.22358 10.6877 7.06445 10.7028Z"
-										fill="url(#paint2_linear_87_7796)"
+										d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+										fill="#00832d"
 									/>
 									<path
-										d="M1.7535 23.1687L18.0425 16.3331L7.06471 10.7026C3.09947 11.0792 0 14.3517 0 18.3331C0 20.1665 0.657197 21.8495 1.7535 23.1687Z"
-										fill="url(#paint3_linear_87_7796)"
+										d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+										fill="#2684fc"
 									/>
-								</g>
-								<defs>
-									<linearGradient
-										id="paint0_linear_87_7796"
-										x1="4.42591"
-										y1="24.6668"
-										x2="27.2309"
-										y2="23.2764"
-										gradientUnits="userSpaceOnUse"
-									>
-										<stop stop-color="#2086B8" />
-										<stop offset="1" stop-color="#46D3F6" />
-									</linearGradient>
-									<linearGradient
-										id="paint1_linear_87_7796"
-										x1="23.8302"
-										y1="19.6668"
-										x2="30.2108"
-										y2="15.2082"
-										gradientUnits="userSpaceOnUse"
+									<path
+										d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+										fill="#ffba00"
+									/>
+								</svg>
+								<div class="line-clamp-1">{$i18n.t('Google Drive')}</div>
+							</DropdownMenu.Item>
+						{/if}
+
+						{#if $config?.features?.enable_onedrive_integration}
+							<DropdownMenu.Sub>
+								<DropdownMenu.SubTrigger
+									class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 32 32"
+										class="w-5 h-5"
+										fill="none"
 									>
-										<stop stop-color="#1694DB" />
-										<stop offset="1" stop-color="#62C3FE" />
-									</linearGradient>
-									<linearGradient
-										id="paint2_linear_87_7796"
-										x1="8.51037"
-										y1="7.33333"
-										x2="23.3335"
-										y2="15.9348"
-										gradientUnits="userSpaceOnUse"
+										<mask
+											id="mask0_87_7796"
+											style="mask-type:alpha"
+											maskUnits="userSpaceOnUse"
+											x="0"
+											y="6"
+											width="32"
+											height="20"
+										>
+											<path
+												d="M7.82979 26C3.50549 26 0 22.5675 0 18.3333C0 14.1921 3.35322 10.8179 7.54613 10.6716C9.27535 7.87166 12.4144 6 16 6C20.6308 6 24.5169 9.12183 25.5829 13.3335C29.1316 13.3603 32 16.1855 32 19.6667C32 23.0527 29 26 25.8723 25.9914L7.82979 26Z"
+												fill="#C4C4C4"
+											/>
+										</mask>
+										<g mask="url(#mask0_87_7796)">
+											<path
+												d="M7.83017 26.0001C5.37824 26.0001 3.18957 24.8966 1.75391 23.1691L18.0429 16.3335L30.7089 23.4647C29.5926 24.9211 27.9066 26.0001 26.0004 25.9915C23.1254 26.0001 12.0629 26.0001 7.83017 26.0001Z"
+												fill="url(#paint0_linear_87_7796)"
+											/>
+											<path
+												d="M25.5785 13.3149L18.043 16.3334L30.709 23.4647C31.5199 22.4065 32.0004 21.0916 32.0004 19.6669C32.0004 16.1857 29.1321 13.3605 25.5833 13.3337C25.5817 13.3274 25.5801 13.3212 25.5785 13.3149Z"
+												fill="url(#paint1_linear_87_7796)"
+											/>
+											<path
+												d="M7.06445 10.7028L18.0423 16.3333L25.5779 13.3148C24.5051 9.11261 20.6237 6 15.9997 6C12.4141 6 9.27508 7.87166 7.54586 10.6716C7.3841 10.6773 7.22358 10.6877 7.06445 10.7028Z"
+												fill="url(#paint2_linear_87_7796)"
+											/>
+											<path
+												d="M1.7535 23.1687L18.0425 16.3331L7.06471 10.7026C3.09947 11.0792 0 14.3517 0 18.3331C0 20.1665 0.657197 21.8495 1.7535 23.1687Z"
+												fill="url(#paint3_linear_87_7796)"
+											/>
+										</g>
+										<defs>
+											<linearGradient
+												id="paint0_linear_87_7796"
+												x1="4.42591"
+												y1="24.6668"
+												x2="27.2309"
+												y2="23.2764"
+												gradientUnits="userSpaceOnUse"
+											>
+												<stop stop-color="#2086B8" />
+												<stop offset="1" stop-color="#46D3F6" />
+											</linearGradient>
+											<linearGradient
+												id="paint1_linear_87_7796"
+												x1="23.8302"
+												y1="19.6668"
+												x2="30.2108"
+												y2="15.2082"
+												gradientUnits="userSpaceOnUse"
+											>
+												<stop stop-color="#1694DB" />
+												<stop offset="1" stop-color="#62C3FE" />
+											</linearGradient>
+											<linearGradient
+												id="paint2_linear_87_7796"
+												x1="8.51037"
+												y1="7.33333"
+												x2="23.3335"
+												y2="15.9348"
+												gradientUnits="userSpaceOnUse"
+											>
+												<stop stop-color="#0D3D78" />
+												<stop offset="1" stop-color="#063B83" />
+											</linearGradient>
+											<linearGradient
+												id="paint3_linear_87_7796"
+												x1="-0.340429"
+												y1="19.9998"
+												x2="14.5634"
+												y2="14.4649"
+												gradientUnits="userSpaceOnUse"
+											>
+												<stop stop-color="#16589B" />
+												<stop offset="1" stop-color="#1464B7" />
+											</linearGradient>
+										</defs>
+									</svg>
+									<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive')}</div>
+								</DropdownMenu.SubTrigger>
+								<DropdownMenu.SubContent
+									class="w-[calc(100vw-2rem)] max-w-[280px] rounded-xl px-1 py-1 border border-gray-100  dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
+									side={$mobile ? 'bottom' : 'right'}
+									sideOffset={$mobile ? 5 : 0}
+									alignOffset={$mobile ? 0 : -8}
+								>
+									<DropdownMenu.Item
+										class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+										on:click={() => {
+											uploadOneDriveHandler('personal');
+										}}
 									>
-										<stop stop-color="#0D3D78" />
-										<stop offset="1" stop-color="#063B83" />
-									</linearGradient>
-									<linearGradient
-										id="paint3_linear_87_7796"
-										x1="-0.340429"
-										y1="19.9998"
-										x2="14.5634"
-										y2="14.4649"
-										gradientUnits="userSpaceOnUse"
+										<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (personal)')}</div>
+									</DropdownMenu.Item>
+									<DropdownMenu.Item
+										class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+										on:click={() => {
+											uploadOneDriveHandler('organizations');
+										}}
 									>
-										<stop stop-color="#16589B" />
-										<stop offset="1" stop-color="#1464B7" />
-									</linearGradient>
-								</defs>
-							</svg>
-							<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive')}</div>
-						</DropdownMenu.SubTrigger>
-						<DropdownMenu.SubContent
-							class="w-[calc(100vw-2rem)] max-w-[280px] rounded-xl px-1 py-1 border border-gray-100  dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
-							side={$mobile ? 'bottom' : 'right'}
-							sideOffset={$mobile ? 5 : 0}
-							alignOffset={$mobile ? 0 : -8}
-						>
-							<DropdownMenu.Item
-								class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
-								on:click={() => {
-									uploadOneDriveHandler('personal');
-								}}
-							>
-								<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (personal)')}</div>
-							</DropdownMenu.Item>
-							<DropdownMenu.Item
-								class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
-								on:click={() => {
-									uploadOneDriveHandler('organizations');
-								}}
-							>
-								<div class="flex flex-col">
-									<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (work/school)')}</div>
-									<div class="text-xs text-gray-500">{$i18n.t('Includes SharePoint')}</div>
-								</div>
-							</DropdownMenu.Item>
-						</DropdownMenu.SubContent>
-					</DropdownMenu.Sub>
-				{/if}
+										<div class="flex flex-col">
+											<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (work/school)')}</div>
+											<div class="text-xs text-gray-500">{$i18n.t('Includes SharePoint')}</div>
+										</div>
+									</DropdownMenu.Item>
+								</DropdownMenu.SubContent>
+							</DropdownMenu.Sub>
+						{/if}
+					{/if}
+				</div>
+			{:else if tab === 'knowledge'}
+				<div in:fly={{ x: 20, duration: 150 }}>
+					<button
+						class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800"
+						on:click={() => {
+							tab = '';
+						}}
+					>
+						<ChevronLeft />
+
+						<div class="flex items-center w-full justify-between">
+							<div>
+								{$i18n.t('Knowledge')}
+							</div>
+						</div>
+					</button>
+
+					<Knowledge />
+				</div>
+			{:else if tab === 'notes'}
+				<div in:fly={{ x: 20, duration: 150 }}>
+					<button
+						class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800"
+						on:click={() => {
+							tab = '';
+						}}
+					>
+						<ChevronLeft />
+
+						<div class="flex items-center w-full justify-between">
+							<div>
+								{$i18n.t('Notes')}
+							</div>
+						</div>
+					</button>
+
+					<Notes />
+				</div>
+			{:else if tab === 'chats'}
+				<div in:fly={{ x: 20, duration: 150 }}>
+					<button
+						class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800"
+						on:click={() => {
+							tab = '';
+						}}
+					>
+						<ChevronLeft />
+
+						<div class="flex items-center w-full justify-between">
+							<div>
+								{$i18n.t('Chats')}
+							</div>
+						</div>
+					</button>
+
+					<Chats />
+				</div>
 			{/if}
 		</DropdownMenu.Content>
 	</div>

src/lib/components/chat/MessageInput/IntegrationsMenu.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { DropdownMenu } from 'bits-ui';
-	import { flyAndScale } from '$lib/utils/transitions';
 	import { getContext, onMount, tick } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { flyAndScale } from '$lib/utils/transitions';
 
 	import { config, user, tools as _tools, mobile, settings } from '$lib/stores';
 
@@ -18,7 +19,6 @@
 	import Terminal from '$lib/components/icons/Terminal.svelte';
 	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
-	import { crossfade, fade, fly, slide } from 'svelte/transition';
 
 	const i18n = getContext('i18n');
 
@@ -103,7 +103,7 @@
 								<Wrench />
 
 								<div class="flex items-center w-full justify-between">
-									<div>
+									<div class=" line-clamp-1">
 										{$i18n.t('Tools')}
 										<span class="ml-0.5 text-gray-500">{Object.keys(tools).length}</span>
 									</div>

src/lib/components/icons/PageEdit.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke-width={strokeWidth}
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	><path
+		d="M20 12V5.74853C20 5.5894 19.9368 5.43679 19.8243 5.32426L16.6757 2.17574C16.5632 2.06321 16.4106 2 16.2515 2H4.6C4.26863 2 4 2.26863 4 2.6V21.4C4 21.7314 4.26863 22 4.6 22H11"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path><path d="M8 10H16M8 6H12M8 14H11" stroke-linecap="round" stroke-linejoin="round"
+	></path><path
+		d="M17.9541 16.9394L18.9541 15.9394C19.392 15.5015 20.102 15.5015 20.5399 15.9394V15.9394C20.9778 16.3773 20.9778 17.0873 20.5399 17.5252L19.5399 18.5252M17.9541 16.9394L14.963 19.9305C14.8131 20.0804 14.7147 20.2741 14.6821 20.4835L14.4394 22.0399L15.9957 21.7973C16.2052 21.7646 16.3988 21.6662 16.5487 21.5163L19.5399 18.5252M17.9541 16.9394L19.5399 18.5252"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path><path
+		d="M16 2V5.4C16 5.73137 16.2686 6 16.6 6H20"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path></svg
+>