feat(editor): make right sidebar working well

unit-mesh · Dec 1, 2023 · b947404 · b947404
1 parent 218150f
commit b947404
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 36 deletions.
diff --git a/editor/src/components/editor/action/command-functions.ts b/editor/src/components/editor/action/command-functions.ts
@@ -33,6 +33,9 @@ declare module "@tiptap/core" {
 		runAiAction: {
 			runAiAction: (action: PromptAction) => ReturnType;
 		};
+		replaceRange: {
+			replaceRange: (text: string) => ReturnType;
+		}
 		setBackgroundContext: () => ReturnType,
 	}
 }
@@ -123,6 +126,13 @@ export const CommandFunctions = Extension.create({
 							outputForm: OutputForm.STREAMING,
 						});
 					},
+			replaceRange:
+				(text: string) =>
+					({ editor }: { editor: Editor }) => {
+						const tr = editor.state.tr
+						const { from, to } = editor.state.selection;
+						tr.replaceWith(from, to, editor.state.schema.text(text));
+					},
 			setBackgroundContext:
 				(context: string) =>
 					({ editor }: { editor: Editor }) => {

diff --git a/editor/src/components/editor/advice/advice-manager.ts b/editor/src/components/editor/advice/advice-manager.ts
@@ -66,4 +66,9 @@ export class AdviceManager {
 	getAdvices(): Advice[] {
 		return Object.values(this.advices);
 	}
+
+	removeAdvice(id: string) {
+		delete this.advices[id];
+		this.emit('remove', id);
+	}
 }
diff --git a/editor/src/components/editor/advice/advice-view.tsx b/editor/src/components/editor/advice/advice-view.tsx
@@ -26,12 +26,13 @@ export const AdviceView = ({ editor }: AdviceViewProps) => {
 
 	useEffect(() => {
 		AdviceManager.getInstance().on('add', (advice) => {
-			setAdvices((prevAdvices) => {
-				const newAdvice = [...prevAdvices, advice];
-				setActiveId(advice.id);
-				setTimeout(focusAdviceWithActiveId);
-				return newAdvice;
-			});
+			setAdvices(AdviceManager.getInstance().getAdvices());
+			setActiveId(advice.id);
+			setTimeout(focusAdviceWithActiveId);
+		});
+
+		AdviceManager.getInstance().on('remove', (advice) => {
+			setAdvices(AdviceManager.getInstance().getAdvices());
 		});
 
 		AdviceManager.getInstance().onActiveIdChange((id) => {
@@ -58,38 +59,17 @@ export const AdviceView = ({ editor }: AdviceViewProps) => {
             </span>
           </span>
 
-					<textarea
-						value={advice.content || ''}
-						disabled={advice.id !== activeCommentId}
-						className={`p-2 text-inherit h-full bg-transparent focus:outline-none ${advice.id === activeCommentId ? 'bg-slate-300' : ''}`}
-						id={advice.id}
-						onInput={(event) => {
-							const value = (event.target as HTMLInputElement).value
-
-							setAdvices(advices.map(advice => {
-								if (advice.id === activeCommentId) {
-									return {
-										...advice,
-										content: value
-									}
-								}
-
-								return advice
-							}))
-						}}
-						onKeyDown={(event) => {
-							if (event.key !== 'Enter') return
-							setActiveId(null)
-						}}
-					/>
+					<p id={advice.id}
+					   className={`p-2 text-inherit h-full bg-transparent focus:outline-none ${advice.id === activeCommentId ? 'bg-slate-300' : ''}`}
+					>{advice.content || ''}</p>
 
 					{advice.id === activeCommentId && (
 						<div className={'flex'}>
 							<button
 								className='rounded-md bg-red-500 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-white/20'
 								onClick={() => {
+									AdviceManager.getInstance().removeAdvice(advice.id)
 									editor.commands.unsetAdvice(advice.id)
-									editor.commands.undo()
 									editor.commands.focus()
 								}}
 							>
@@ -98,9 +78,10 @@ export const AdviceView = ({ editor }: AdviceViewProps) => {
 							<button
 								className='rounded-md bg-white/10 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-white/20'
 								onClick={() => {
-									setActiveId(null)
 									editor.commands.unsetAdvice(advice.id)
-									// todo: apply text
+									AdviceManager.getInstance().removeAdvice(advice.id)
+									setActiveId(null)
+									editor.commands?.replaceRange(advice.content)
 									editor.commands.focus()
 								}}
 							>

diff --git a/editor/src/components/editor/intelli/menu/menu-bubble.tsx b/editor/src/components/editor/intelli/menu/menu-bubble.tsx
@@ -32,7 +32,7 @@ export const MenuBubble = ({ editor }: {
 	if (selectLength < 64) {
 		smartMenus.push({
 			name: '扩写',
-			template: `根据如下的内容扩写，返回三句。###{{${DefinedVariable.SELECTION}}}###。`,
+			template: `根据如下的内容扩写，只返回三句，限 100 字以内。###{{${DefinedVariable.SELECTION}}}###。`,
 			facetType: FacetType.BUBBLE_MENU,
 			changeForm: ChangeForm.DIFF,
 			outputForm: OutputForm.TEXT,
@@ -82,7 +82,7 @@ export const MenuBubble = ({ editor }: {
 						<CookieIcon/>
 					</Button>
 				</DropdownMenu.Trigger>
-				<DropdownMenu.Content>
+				<DropdownMenu.Content variant="solid">
 					{menus?.map((menu, index) => {
 						return (
 							<DropdownMenu.Item
@@ -107,12 +107,12 @@ export const MenuBubble = ({ editor }: {
 				key={index}
 				onClick={async () => {
 					const text = await editor.commands?.callLlm(menu);
-					console.log(text)
 
 					const newComment = newAdvice(text || "")
 					editor.commands?.setAdvice(newComment.id)
 					editor.commands?.setAdviceCommand(newComment)
 					menu.action?.(editor)
+					editor.commands?.focus()
 				}}
 			>
 				{menu.i18Name ? t(menu.name) : menu.name}