From 7e9fbed918781d1971a7cb92d25317cabc363e5d Mon Sep 17 00:00:00 2001
From: JeffJiang <for-eleven@hotmail.com>
Date: Thu, 29 May 2025 10:46:05 +0800
Subject: [PATCH] fix: editing plan style (#261)

---
 web/src/app/chat/components/input-box.tsx      |  5 ++---
 web/src/components/deer-flow/message-input.tsx |  3 ++-
 web/src/styles/prosemirror.css                 | 12 +++++++++++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/src/app/chat/components/input-box.tsx b/web/src/app/chat/components/input-box.tsx
index 0d05784..5e2f334 100644
--- a/web/src/app/chat/components/input-box.tsx
+++ b/web/src/app/chat/components/input-box.tsx
@@ -81,7 +81,7 @@ export function InputBox({
           {feedback && (
             <motion.div
               ref={feedbackRef}
-              className="bg-background border-brand absolute top-0 left-0 mt-3 ml-2 flex items-center justify-center gap-1 rounded-2xl border px-2 py-0.5"
+              className="bg-background border-brand absolute top-0 left-0 mt-2 ml-4 flex items-center justify-center gap-1 rounded-2xl border px-2 py-0.5"
               initial={{ opacity: 0, scale: 0 }}
               animate={{ opacity: 1, scale: 1 }}
               exit={{ opacity: 0, scale: 0 }}
@@ -99,7 +99,7 @@ export function InputBox({
           )}
         </AnimatePresence>
         <MessageInput
-          className={cn("h-24 px-4 pt-3")}
+          className={cn("h-24 px-4 pt-5", feedback && "pt-9")}
           ref={inputRef}
           onEnter={handleSendMessage}
         />
@@ -127,7 +127,6 @@ export function InputBox({
                 backgroundInvestigation && "!border-brand !text-brand",
               )}
               variant="outline"
-              size="lg"
               onClick={() =>
                 setEnableBackgroundInvestigation(!backgroundInvestigation)
               }
diff --git a/web/src/components/deer-flow/message-input.tsx b/web/src/components/deer-flow/message-input.tsx
index c44ad12..0dcc09f 100644
--- a/web/src/components/deer-flow/message-input.tsx
+++ b/web/src/components/deer-flow/message-input.tsx
@@ -116,6 +116,7 @@ const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
           transformCopiedText: false,
         }),
         Placeholder.configure({
+          showOnlyCurrent: false,
           placeholder: provider
             ? "What can I do for you? \nYou may refer to RAG resources by using @."
             : "What can I do for you?",
@@ -169,7 +170,7 @@ const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
             editorProps={{
               attributes: {
                 class:
-                  "prose prose-base dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full",
+                  "prose prose-base dark:prose-invert inline-editor font-default focus:outline-none max-w-full",
               },
             }}
             onCreate={({ editor }) => {
diff --git a/web/src/styles/prosemirror.css b/web/src/styles/prosemirror.css
index e2feb01..21ed89b 100644
--- a/web/src/styles/prosemirror.css
+++ b/web/src/styles/prosemirror.css
@@ -2,8 +2,18 @@
   max-width: inherit;
 }
 
-.prose .placeholder {
+.prose.inline-editor * {
+  margin: 0;
+}
+
+.prose.inline-editor .is-empty {
+  display: none;
+}
+
+.prose.inline-editor .is-empty.placeholder {
+  display: block;
   opacity: 0.65;
+  font-size: 14px;
 }
 
 .ProseMirror {