feat: @model group convo

src/lib/components/chat/MessageInput.svelte

@@ -10,6 +10,7 @@
 	import AddFilesPlaceholder from '../AddFilesPlaceholder.svelte';
 	import { SUPPORTED_FILE_TYPE } from '$lib/constants';
 	import Documents from './MessageInput/Documents.svelte';
+	import Models from './MessageInput/Models.svelte';
 
 	export let submitPrompt: Function;
 	export let stopResponse: Function;
@@ -18,12 +19,17 @@
 	export let autoScroll = true;
 
 	let filesInputElement;
+
 	let promptsElement;
 	let documentsElement;
+	let modelsElement;
 
 	let inputFiles;
 	let dragged = false;
 
+	let user = null;
+	let chatInputPlaceholder = '';
+
 	export let files = [];
 
 	export let fileUploadEnabled = true;
@@ -35,6 +41,15 @@
 
 	let speechRecognition;
 
+	$: if (prompt) {
+		const chatInput = document.getElementById('chat-textarea');
+
+		if (chatInput) {
+			chatInput.style.height = '';
+			chatInput.style.height = Math.min(chatInput.scrollHeight, 200) + 'px';
+		}
+	}
+
 	const speechRecognitionHandler = () => {
 		// Check if SpeechRecognition is supported
 
@@ -79,7 +94,7 @@
 					console.log('recognition ended');
 					speechRecognitionListening = false;
 					if (prompt !== '' && $settings?.speechAutoSend === true) {
-						submitPrompt(prompt);
+						submitPrompt(prompt, user);
 					}
 				};
 
@@ -242,6 +257,14 @@
 							];
 						}}
 					/>
+				{:else if prompt.charAt(0) === '@'}
+					<Models
+						bind:this={modelsElement}
+						bind:prompt
+						bind:user
+						bind:chatInputPlaceholder
+						{messages}
+					/>
 				{:else if messages.length == 0 && suggestionPrompts.length !== 0}
 					<Suggestions {suggestionPrompts} {submitPrompt} />
 				{/if}
@@ -289,7 +312,7 @@
 				<form
 					class=" flex flex-col relative w-full rounded-xl border dark:border-gray-600 bg-white dark:bg-gray-800 dark:text-gray-100"
 					on:submit|preventDefault={() => {
-						submitPrompt(prompt);
+						submitPrompt(prompt, user);
 					}}
 				>
 					{#if files.length > 0}
@@ -431,14 +454,18 @@
 							class=" dark:bg-gray-800 dark:text-gray-100 outline-none w-full py-3 px-2 {fileUploadEnabled
 								? ''
 								: ' pl-4'} rounded-xl resize-none h-[48px]"
-							placeholder={speechRecognitionListening ? 'Listening...' : 'Send a message'}
+							placeholder={chatInputPlaceholder !== ''
+								? chatInputPlaceholder
+								: speechRecognitionListening
+								? 'Listening...'
+								: 'Send a message'}
 							bind:value={prompt}
 							on:keypress={(e) => {
 								if (e.keyCode == 13 && !e.shiftKey) {
 									e.preventDefault();
 								}
 								if (prompt !== '' && e.keyCode == 13 && !e.shiftKey) {
-									submitPrompt(prompt);
+									submitPrompt(prompt, user);
 								}
 							}}
 							on:keydown={async (e) => {
@@ -473,10 +500,10 @@
 									editButton?.click();
 								}
 
-								if (['/', '#'].includes(prompt.charAt(0)) && e.key === 'ArrowUp') {
+								if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'ArrowUp') {
 									e.preventDefault();
 
-									(promptsElement || documentsElement).selectUp();
+									(promptsElement || documentsElement || modelsElement).selectUp();
 
 									const commandOptionButton = [
 										...document.getElementsByClassName('selected-command-option-button')
@@ -484,10 +511,10 @@
 									commandOptionButton.scrollIntoView({ block: 'center' });
 								}
 
-								if (['/', '#'].includes(prompt.charAt(0)) && e.key === 'ArrowDown') {
+								if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'ArrowDown') {
 									e.preventDefault();
 
-									(promptsElement || documentsElement).selectDown();
+									(promptsElement || documentsElement || modelsElement).selectDown();
 
 									const commandOptionButton = [
 										...document.getElementsByClassName('selected-command-option-button')
@@ -495,7 +522,7 @@
 									commandOptionButton.scrollIntoView({ block: 'center' });
 								}
 
-								if (['/', '#'].includes(prompt.charAt(0)) && e.key === 'Enter') {
+								if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'Enter') {
 									e.preventDefault();
 
 									const commandOptionButton = [
@@ -505,7 +532,7 @@
 									commandOptionButton?.click();
 								}
 
-								if (['/', '#'].includes(prompt.charAt(0)) && e.key === 'Tab') {
+								if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'Tab') {
 									e.preventDefault();
 
 									const commandOptionButton = [
@@ -536,6 +563,7 @@
 							on:input={(e) => {
 								e.target.style.height = '';
 								e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
+								user = null;
 							}}
 							on:paste={(e) => {
 								const clipboardData = e.clipboardData || window.clipboardData;