refac

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

@@ -14,6 +14,9 @@
 	import Camera from '$lib/components/icons/Camera.svelte';
 	import Note from '$lib/components/icons/Note.svelte';
 	import Clip from '$lib/components/icons/Clip.svelte';
+	import ChatBubbleOval from '$lib/components/icons/ChatBubbleOval.svelte';
+	import Refresh from '$lib/components/icons/Refresh.svelte';
+	import Agile from '$lib/components/icons/Agile.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -164,11 +167,44 @@
 						}
 					}}
 				>
-					<Note />
-					<div class=" line-clamp-1">{$i18n.t('Attach Notes')}</div>
+					<Agile />
+					<div class=" line-clamp-1">{$i18n.t('Reference Chats')}</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();
+									}
+								}
+							}
+						}}
+					>
+						<Note />
+						<div class=" line-clamp-1">{$i18n.t('Attach Notes')}</div>
+					</DropdownMenu.Item>
+				</Tooltip>
+			{/if}
+
 			<Tooltip
 				content={fileUploadCapableModels.length !== selectedModels.length
 					? $i18n.t('Model(s) do not support file upload')

src/lib/components/icons/Agile.svelte

@@ -0,0 +1,27 @@
+<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}
+	stroke="currentColor"
+	fill="none"
+	viewBox="0 0 24 24"
+	><path
+		d="M17.5 19H22M22 19L19.5 16.5M22 19L19.5 21.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path><path d="M12 2L9.5 4.5L12 7" stroke-linecap="round" stroke-linejoin="round"></path><path
+		d="M10.5 4.5C14.6421 4.5 18 7.85786 18 12C18 16.1421 14.6421 19.5 10.5 19.5H2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path><path
+		d="M6.75583 5.5C4.51086 6.79595 3 9.22154 3 12C3 13.6884 3.55792 15.2465 4.49945 16.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path></svg
+>

src/lib/components/icons/Refresh.svelte

@@ -0,0 +1,23 @@
+<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}
+	stroke="currentColor"
+	fill="none"
+	viewBox="0 0 24 24"
+	><path
+		d="M21.8883 13.5C21.1645 18.3113 17.013 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C16.1006 2 19.6248 4.46819 21.1679 8"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path><path
+		d="M17 8H21.4C21.7314 8 22 7.73137 22 7.4V3"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path></svg
+>