点击首页按钮输入框回显对应信息

src/lib/components/chat/Header.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
 	let list = [
 		{
 			title: '工作',
@@ -8,12 +10,16 @@
 				{
 					label: '工作总结',
 					img: '/img/icon/work.png',
-					imgActive: '/img/icon/work_active.png'
+					imgActive: '/img/icon/work_active.png',
+					active: false,
+					placeholder:
+						'<p>帮我写一份用于&nbsp;例如<span style="color:#2c77f1 !important">项目进度、本周工作等</span>&nbsp;的工作总结，包括<span  style="color:#2c77f1 !important">工作内容、成果、风险点等。</span></p>'
 				},
 				{
-					label: '工作总结',
+					label: '文档生成',
 					img: '/img/icon/document.png',
-					imgActive: '/img/icon/document_active.png'
+					imgActive: '/img/icon/document_active.png',
+					active: false
 				}
 			],
 			introduce: [
@@ -26,8 +32,7 @@
 				{
 					label: '介绍'
 				}
-			],
+			]
-            active:true
 		},
 		{
 			title: '知识库',
@@ -37,12 +42,8 @@
 				{
 					label: '检索知识库',
 					img: '/img/icon/knowledge.png',
-					imgActive: '/img/icon/knowledge_active.png'
+					imgActive: '/img/icon/knowledge_active.png',
-				},
+					active: false
-				{
-					label: '上传文档',
-					img: '/img/icon/upload.png',
-					imgActive: '/img/icon/upload_active.png'
 				}
 			],
 			introduce: [
@@ -65,7 +66,8 @@
 				{
 					label: '历史消息',
 					img: '/img/icon/record.png',
-					imgActive: '/img/icon/record_active.png'
+					imgActive: '/img/icon/record_active.png',
+					active: false
 				}
 			],
 			introduce: [
@@ -81,7 +83,6 @@
 			]
 		}
 	];
-
 </script>
 
 <div class="flex flex-col border-box header_box">
@@ -107,12 +108,24 @@
 				<div class="flex mt-5.5">
 					{#each item.buttons as but, index (index)}
 						<button
-							class="font-medium text-black text-base mr-4 bg-white rounded-2xl px-6 py-1 box-border flex items-center border"
+							class="font-medium text-black text-base mr-4 bg-white rounded-2xl px-6 py-1 box-border flex items-center border {but.active
+								? 'border-blue-500 text-blue-500'
+								: ''}"
 							on:click={() => {
-								console.log(but, index);
+								list.forEach((item) => {
+									item.buttons.forEach((c) => {
+										if (c.active === true && c.label !== but.label) {
+											c.active = false;
+										} else if (c.label === but.label) {
+											c.active = true;
+										}
+									});
+								});
+								list = [...list];
+                                dispatch('savePlaceholder',but.placeholder || null)
 							}}
 						>
-							<img src={but.img} alt="" class="w-5 h-5" />
+							<img src={but.active ? but.imgActive : but.img} alt="" class="w-5 h-5 mr-1" />
 							{but.label}
 						</button>
 					{/each}

src/lib/components/chat/MessageInput.svelte

@@ -72,7 +72,6 @@
 	export let imageGenerationEnabled = false;
 	export let webSearchEnabled = false;
 	export let codeInterpreterEnabled = false;
-
 	$: onChange({
 		prompt,
 		files,
@@ -94,7 +93,9 @@
 	let dragged = false;
 
 	let user = null;
-	export let placeholder = '';
+
+	export let placeholder;
+	export let autofill;
 
 	let visionCapableModels = [];
 	$: visionCapableModels = [...(atSelectedModel ? [atSelectedModel] : selectedModels)].filter(
@@ -690,6 +691,7 @@
 												bind:this={chatInputElement}
 												bind:value={prompt}
 												id="chat-input"
+												{autofill}
 												messageInput={true}
 												shiftEnter={!$mobile ||
 													!(

src/lib/components/chat/Placeholder.svelte

@@ -38,9 +38,9 @@
 	export let imageGenerationEnabled = false;
 	export let codeInterpreterEnabled = false;
 	export let webSearchEnabled = false;
-
+	let autofill = ''
 	let models = [];
-
+	export let placeholder = null;
 	const selectSuggestionPrompt = async (p) => {
 		let text = p;
 
@@ -85,7 +85,6 @@
 	}
 
 	$: models = selectedModels.map((id) => $_models.find((m) => m.id === id));
-
 	onMount(() => {});
 </script>
 
@@ -106,8 +105,12 @@
 		class="w-full text-3xl text-gray-800 dark:text-gray-100 font-medium text-center flex items-center gap-4 font-primary"
 	>
 		<div class="w-full flex flex-col justify-center items-center">
-			<div class="flex flex-row justify-center gap-3 @sm:gap-3.5 w-fit px-5 ">
+			<div class="flex flex-row justify-center gap-3 @sm:gap-3.5 w-fit px-5">
-				<Header></Header>
+				<Header
+					on:savePlaceholder={(val) => {
+						autofill = val.detail;
+					}}
+				></Header>
 			</div>
 
 			<div class="flex mt-1 mb-2">
@@ -161,10 +164,11 @@
 					bind:codeInterpreterEnabled
 					bind:webSearchEnabled
 					bind:atSelectedModel
+					{placeholder}
+					{autofill}
 					{transparentBackground}
 					{stopResponse}
 					{createMessagePair}
-					placeholder={$i18n.t('How can I help you today?')}
 					on:upload={(e) => {
 						dispatch('upload', e.detail);
 					}}

src/lib/components/common/RichTextInput.svelte

@@ -6,7 +6,7 @@
 		headingStyle: 'atx'
 	});
 	turndownService.escape = (string) => string;
-
+	import TextStyle from '@tiptap/extension-text-style';
 	import { onMount, onDestroy } from 'svelte';
 	import { createEventDispatcher } from 'svelte';
 	const eventDispatch = createEventDispatcher();
@@ -24,7 +24,7 @@
 	import Typography from '@tiptap/extension-typography';
 	import StarterKit from '@tiptap/starter-kit';
 	import { all, createLowlight } from 'lowlight';
-	
+	import Color from '@tiptap/extension-color';
 	import { PASTED_TEXT_CHARACTER_LIMIT } from '$lib/constants';
 
 	// create a lowlight instance with all languages loaded
@@ -42,10 +42,14 @@
 	export let messageInput = false;
 	export let shiftEnter = false;
 	export let largeTextAsFile = false;
-
+	export let autofill = '';
 	let element;
 	let editor;
-
+	$: {
+		if (editor && autofill !== editor.getHTML()) {
+			setContent(autofill); // 更新编辑器内容
+		}
+	}
 	const options = {
 		throwOnError: false
 	};
@@ -105,6 +109,7 @@
 
 	export const setContent = (content) => {
 		editor.commands.setContent(content);
+		editor.commands.focus();
 	};
 
 	const selectTemplate = () => {
@@ -163,6 +168,8 @@
 			element: element,
 			extensions: [
 				StarterKit,
+				TextStyle,
+				Color.configure({ types: ['textStyle'] }),
 				CodeBlockLowlight.configure({
 					lowlight
 				}),
@@ -188,12 +195,11 @@
 						]
 					: [])
 			],
-			content: content,//
+			content: content, //
+			editable: true,
 			autofocus: messageInput ? true : false,
 			onTransaction: () => {
 				// force re-render so `editor.isActive` works as expected
-				editor = editor;
-
 				if (!raw) {
 					let newValue = turndownService
 						.turndown(
@@ -332,7 +338,6 @@
 				}
 			}
 		});
-
 		if (messageInput) {
 			selectTemplate();
 		}
@@ -375,4 +380,4 @@
 	}
 </script>
 
-<div bind:this={element} class="relative w-full min-w-full h-full min-h-fit {className}" />
+<div bind:this={element} class="relative ccccc min-w-full h-full min-h-fit {className}" />