enh: formatting toolbar for chat

src/lib/components/chat/Settings/Interface.svelte

@@ -38,6 +38,7 @@
 	let detectArtifacts = true;
 
 	let richTextInput = true;
+	let showFormattingToolbar = false;
 	let insertPromptAsRichText = false;
 	let promptAutocomplete = false;
 
@@ -228,6 +229,11 @@
 		saveSettings({ richTextInput });
 	};
 
+	const toggleShowFormattingToolbar = async () => {
+		showFormattingToolbar = !showFormattingToolbar;
+		saveSettings({ showFormattingToolbar });
+	};
+
 	const toggleInsertPromptAsRichText = async () => {
 		insertPromptAsRichText = !insertPromptAsRichText;
 		saveSettings({ insertPromptAsRichText });
@@ -335,6 +341,7 @@
 		chatFadeStreamingText = $settings?.chatFadeStreamingText ?? true;
 
 		richTextInput = $settings?.richTextInput ?? true;
+		showFormattingToolbar = $settings?.showFormattingToolbar ?? false;
 		insertPromptAsRichText = $settings?.insertPromptAsRichText ?? false;
 		promptAutocomplete = $settings?.promptAutocomplete ?? false;
 
@@ -863,6 +870,29 @@
 			</div>
 
 			{#if richTextInput}
+				<div>
+					<div class=" py-0.5 flex w-full justify-between">
+						<div id="rich-input-label" class=" self-center text-xs">
+							{$i18n.t('Show Formatting Toolbar')}
+						</div>
+
+						<button
+							aria-labelledby="rich-input-label"
+							class="p-1 px-3 text-xs flex rounded-sm transition"
+							on:click={() => {
+								toggleShowFormattingToolbar();
+							}}
+							type="button"
+						>
+							{#if showFormattingToolbar === true}
+								<span class="ml-2 self-center">{$i18n.t('On')}</span>
+							{:else}
+								<span class="ml-2 self-center">{$i18n.t('Off')}</span>
+							{/if}
+						</button>
+					</div>
+				</div>
+
 				<div>
 					<div class=" py-0.5 flex w-full justify-between">
 						<div id="rich-input-label" class=" self-center text-xs">