feat: more prompt presets added

src/lib/components/chat/MessageInput.svelte

@@ -2,7 +2,7 @@
 	import { settings } from '$lib/stores';
 	import toast from 'svelte-french-toast';
 	import Suggestions from './MessageInput/Suggestions.svelte';
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import Prompts from './MessageInput/PromptCommands.svelte';
 	import { findWordIndices } from '$lib/utils';
 
@@ -308,7 +308,7 @@
 									submitPrompt(prompt);
 								}
 							}}
-							on:keydown={(e) => {
+							on:keydown={async (e) => {
 								if (prompt === '' && e.key == 'ArrowUp') {
 									e.preventDefault();
 
@@ -326,16 +326,6 @@
 									editButton?.click();
 								}
 
-								if (prompt.charAt(0) === '/' && e.key === 'Tab') {
-									e.preventDefault();
-
-									const commandOptionButton = [
-										...document.getElementsByClassName('selected-command-option-button')
-									]?.at(-1);
-
-									commandOptionButton?.click();
-								}
-
 								if (prompt.charAt(0) === '/' && e.key === 'ArrowUp') {
 									promptsElement.selectUp();
 
@@ -364,13 +354,32 @@
 									commandOptionButton?.click();
 								}
 
+								if (prompt.charAt(0) === '/' && e.key === 'Tab') {
+									e.preventDefault();
+
+									const commandOptionButton = [
+										...document.getElementsByClassName('selected-command-option-button')
+									]?.at(-1);
+
+									commandOptionButton?.click();
+								} else if (e.key === 'Tab') {
 									const words = findWordIndices(prompt);
 
-								if (words.length > 0 && e.key === 'Tab') {
+									if (words.length > 0) {
 										const word = words.at(0);
+										const fullPrompt = prompt;
+
+										prompt = prompt.substring(0, word?.endIndex + 1);
+										await tick();
+
+										e.target.scrollTop = e.target.scrollHeight;
+										prompt = fullPrompt;
+										await tick();
+
 										e.preventDefault();
 										e.target.setSelectionRange(word?.startIndex, word.endIndex + 1);
 									}
+								}
 							}}
 							rows="1"
 							on:input={(e) => {

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

@@ -43,12 +43,118 @@ include relevant statistics (add the links of the sources you use) and consider
 
 			title: 'SEO Content Brief',
 			content: `Create a SEO content brief for [keyword].`
+		},
+		{
+			command: '/seo-ideas',
+
+			title: 'SEO Keyword Ideas',
+			content: `Generate a list of 20 keyword ideas on [topic].
+
+Cluster this list of keywords according to funnel stages whether they are top of the funnel, middle of the funnel or bottom of the funnel keywords.`
+		},
+		{
+			command: '/summary',
+
+			title: 'Short Summary',
+			content: `Write a summary in 50 words that summarizes [topic or keyword].`
+		},
+		{
+			command: '/email-subject',
+
+			title: 'Email Subject Line',
+			content: `Develop [5] subject lines for a cold email offering your [product or service] to a potential client.`
+		},
+		{
+			command: '/facebook-ads',
+
+			title: 'Facebook Ads',
+			content: `Create 3 variations of effective ad copy to promote [product] for [audience].
+
+Make sure they are [persuasive/playful/emotional] and mention these benefits:
+
+[Benefit 1]
+
+[Benefit 2]
+
+[Benefit 3]
+
+Finish with a call to action saying [CTA].
+
+Add 3 emojis to it.`
+		},
+		{
+			command: '/google-ads',
+
+			title: 'Google Ads',
+			content: `Create 10 google ads (a headline and a description) for [product description] targeting the keyword [keyword].
+
+The headline of the ad needs to be under 30 characters. The description needs to be under 90 characters. Format the output as a table.`
+		},
+		{
+			command: '/insta-caption',
+
+			title: 'Instagram Caption',
+			content: `Write 5 variations of Instagram captions for [product].
+
+Use friendly, human-like language that appeals to [target audience].
+
+Emphasize the unique qualities of [product],
+
+use ample emojis, and don't sound too promotional.`
+		},
+		{
+			command: '/linkedin-post',
+
+			title: 'LinkedIn Post',
+			content: `Create a narrative Linkedin post using immersive writing about [topic].
+
+Details:
+
+[give details in bullet point format]
+
+Use a mix of short and long sentences. Make it punchy and dramatic.`
+		},
+		{
+			command: '/youtube-desc',
+
+			title: 'YouTube Video',
+			content: `Write a 100-word YouTube video description that compels [audience]
+
+to watch a video on [topic]
+
+and mentions the following keywords
+
+[keyword 1]
+
+[keyword 2]
+
+[keyword 3].`
+		},
+		{
+			command: '/seo-meta',
+
+			title: 'SEO Meta',
+			content: `Suggest a meta description for the content above, make it user-friendly and with a call to action, include the keyword [keyword].`
+		},
+		{
+			command: '/eli5',
+
+			title: 'ELI5',
+			content: `You are an expert teacher with the ability to explain complex topics in simpler terms. Explain the concept of [topic] in simple terms, so that my [grade level/subject] class can understand [this concept/specific example]?`
+		},
+		{
+			command: '/emoji-translate',
+
+			title: 'Emoji Translation',
+			content: `You are an emoji expert. Using only emojis, translate the following text to emojis. [insert numbered sentences].`
 		}
 	];
 
 	let filteredPromptCommands = [];
 
-	$: filteredPromptCommands = promptCommands.filter((p) => p.command.includes(prompt));
+	$: filteredPromptCommands = promptCommands
+		.filter((p) => p.command.includes(prompt))
+		.sort((a, b) => a.title.localeCompare(b.title));
 
 	$: if (prompt) {
 		selectedCommandIdx = 0;