feat(#324): AI 写作功能，将问答与润色功能转移至选中文本后的悬浮工具栏，并增加了精简和扩写功能

Author: codexu

messages/en.json

@@ -778,27 +778,32 @@
         "question": {
           "tooltip": "Q&A",
           "selectContent": "Please select content first",
-          "promptTemplate": "Reference text: {content}\nBased on the question: {question}, directly provide the answer content."
+          "promptTemplate": "Reference text: \n{content}\nBased on the question: \n{question}\n, directly provide the answer content."
         },
         "continue": {
           "tooltip": "Continue",
-          "promptTemplate": "Based on the preceding text: \"{content}\" continue writing and return content not exceeding 100 words.\nYou can reference the following text: \"{endContent}\", but avoid duplicating its content."
+          "promptTemplate": "Based on the preceding text: \n{content}\n continue writing and return content not exceeding 100 words.\nYou can reference the following text: \n{endContent}\n, but avoid duplicating its content."
         },
         "polish": {
           "tooltip": "Polish",
           "selectContent": "Please select content first",
-          "promptTemplate": "Polish this text: {content}, keep the language unchanged, fix typos and grammatical errors, directly return the polished result."
+          "promptTemplate": "Polish this text: \n{content}\n, keep the language unchanged, fix typos and grammatical errors, directly return the polished result."
         },
         "eraser": {
           "tooltip": "Simplify",
           "selectContent": "Please select content first",
-          "promptTemplate": "Simplify this text: {content}, this text is too verbose, reduce the word count by at least half, keep the language unchanged, directly return the optimized result."
+          "promptTemplate": "Simplify this text: \n{content}\n, this text is too verbose, reduce the word count by at least half, keep the language unchanged, directly return the optimized result."
+        },
+        "expansion": {
+          "tooltip": "Expand",
+          "selectContent": "Please select content first",
+          "promptTemplate": "Expand this text: \n{content}\n, this text is too short, increase the word count by at least half, keep the language unchanged, directly return the expanded result."
         },
         "translation": {
           "tooltip": "Translate",
           "description": "Translate the selected text",
           "selectContent": "Please select content first",
-          "promptTemplate": "Translate this text: {content}, into {language}, directly return the translated result."
+          "promptTemplate": "Translate this text: \n{content}\n, into {language}, directly return the translated result."
         }
       }
     },

messages/ja.json

@@ -767,27 +767,32 @@
         "question": {
           "tooltip": "質問応答",
           "selectContent": "先に内容を選択してください",
-          "promptTemplate": "参考文：{content}\n質問内容：{question}に基づいて、直接回答を返してください。"
+          "promptTemplate": "参考文：\n{content}\n質問内容：\n{question}\nに基づいて、直接回答を返してください。"
         },
         "continue": {
           "tooltip": "文章続き",
-          "promptTemplate": "前文：\"{content}\"に基づいて、100文字以内で続きを書いてください。\n後文：\"{endContent}\"を参考にしても良いですが、重複は避けてください。"
+          "promptTemplate": "前文：\n{content}\n内容に基づいて、100文字以内で続きを書いてください。\n後文：\n{endContent}\nを参考にしても良いですが、重複は避けてください。"
         },
         "polish": {
           "tooltip": "最適化",
           "selectContent": "先に内容を選択してください",
-          "promptTemplate": "この文章を校正してください：{content}。言語はそのままに、誤字脱字や不自然な表現を修正し、校正後の結果を直接返してください。"
+          "promptTemplate": "この文章を校正してください：\n{content}\n。言語はそのままに、誤字脱字や不自然な表現を修正し、校正後の結果を直接返してください。"
         },
         "eraser": {
           "tooltip": "簡潔化",
           "selectContent": "先に内容を選択してください",
-          "promptTemplate": "この文章を要約してください：{content}。文章があまりに冗長なので、文字数を半分以上に減らしてください。言語は変更しないで、要約した結果を直接返してください。"
+          "promptTemplate": "この文章を要約してください：\n{content}\n。文章があまりに冗長なので、文字数を半分以上に減らしてください。言語は変更しないで、要約した結果を直接返してください。"
+        },
+        "expansion": {
+          "tooltip": "拡張",
+          "selectContent": "先に内容を選択してください",
+          "promptTemplate": "この文章を拡張してください：\n{content}\n。文章があまりに短いので、文字数を半分以上に増やしてください。言語は変更しないで、拡張した結果を直接返してください。"
         },
         "translation": {
           "tooltip": "翻訳",
           "description": "選択したテキストを翻訳します",
           "selectContent": "まず内容を選択してください",
-          "promptTemplate": "このテキスト：{content} を{language}に翻訳してください。翻訳結果のみを返してください。"
+          "promptTemplate": "このテキスト：\n{content}\nを{language}に翻訳してください。翻訳結果のみを返してください。"
         }
       }
     },

messages/zh.json

@@ -777,27 +777,32 @@
         "question": {
           "tooltip": "问答",
           "selectContent": "请先选择一段内容",
-          "promptTemplate": "参考原文：{content}\n根据提问：{question}，直接返回回答内容。"
+          "promptTemplate": "参考原文：\n{content}\n根据提问：\n{question}\n，直接返回回答内容。"
         },
         "continue": {
           "tooltip": "续写",
-          "promptTemplate": "根据前文：\"{content}\" 内容，直接返回续写内容，不要超过100字。\n内容可以参考后文：\"{endContent}\"，不要与后文内容重复。"
+          "promptTemplate": "根据前文：\n{content}\n内容，直接返回续写内容，不要超过100字。\n内容可以参考后文：\n{endContent}\n，不要与后文内容重复。"
         },
         "polish": {
-          "tooltip": "优化",
+          "tooltip": "润色",
           "selectContent": "请先选择一段内容",
-          "promptTemplate": "润色这段文字：{content}，要求语言不变，修复错别字和病句，直接返回润色后的结果。"
+          "promptTemplate": "润色这段文字：\n{content}\n要求语言不变，修复错别字和病句，直接返回润色后的结果。"
         },
         "eraser": {
           "tooltip": "精简",
           "selectContent": "请先选择一段内容",
-          "promptTemplate": "精简这段文字：{content}，这段文字过于臃肿，字数要求缩减一半以上，要求语言不变，直接返回优化后的结果。"
+          "promptTemplate": "精简这段文字：\n{content}\n这段文字过于臃肿，字数要求缩减一半以上，要求语言不变，直接返回优化后的结果。"
+        },
+        "expansion": {
+          "tooltip": "扩写",
+          "selectContent": "请先选择一段内容",
+          "promptTemplate": "扩写这段文字：\n{content}\n这段文字过于简短，字数要求增加一倍以上，要求语言不变，直接返回扩写后的结果。"
         },
         "translation": {
           "tooltip": "翻译",
           "description": "将选中的文本进行翻译",
           "selectContent": "请先选择一段内容",
-          "promptTemplate": "将这段文字：{content}，翻译为{language}语言，直接返回翻译后的结果。"
+          "promptTemplate": "将这段文字：\n{content}\n翻译为{language}语言，直接返回翻译后的结果。"
         }
       }
     },

src/app/core/article/custom-toolbar/eraser.tsx

@@ -1,18 +1,12 @@
 import Vditor from 'vditor'
 import Mark from "./mark";
-import Question from "./question";
 import Continue from "./continue";
-import Polish from "./polish";
-import Eraser from "./eraser";
 import Translation from "./translation";
 
 export default function CustomToolbar({editor}: {editor?: Vditor}) {
   return <div className="h-12 w-full border-b items-center px-2 gap-1 justify-between hidden">
     <Mark editor={editor} />
-    <Question editor={editor} />
     <Continue editor={editor} />
-    <Polish editor={editor} />
-    <Eraser editor={editor} />
     <Translation editor={editor} />
   </div>
 }

src/app/core/article/custom-toolbar/index.tsx

@@ -0,0 +1,24 @@
+import { TooltipButton } from "@/components/tooltip-button";
+import { fetchAiStreamToken } from "@/lib/ai";
+import { EraserIcon } from "lucide-react";
+import Vditor from "vditor";
+import { useTranslations } from "next-intl";
+
+export default function Eraser({editor, value}: {editor?: Vditor, value?: string}) {
+  const t = useTranslations('article.editor.toolbar.eraser')
+  async function handleBlock() {
+    if (value) {
+      editor?.deleteValue()
+      editor?.disabled()
+      const req = t('promptTemplate', {content: value})
+      await fetchAiStreamToken(req, (text) => {
+        editor?.insertValue(text, true)
+      })
+      editor?.enable()
+    }
+  }
+  return (
+    <TooltipButton icon={<EraserIcon />} tooltipText={t('tooltip')} onClick={handleBlock}>
+    </TooltipButton>
+  )
+}

src/app/core/article/custom-toolbar/polish.tsx

@@ -0,0 +1,24 @@
+import { TooltipButton } from "@/components/tooltip-button";
+import { fetchAiStreamToken } from "@/lib/ai";
+import { SquareCodeIcon } from "lucide-react";
+import Vditor from "vditor";
+import { useTranslations } from "next-intl";
+
+export default function Expansion({editor, value}: {editor?: Vditor, value?: string}) {
+  const t = useTranslations('article.editor.toolbar.expansion')
+  async function handleBlock() {
+    if (value) {
+      editor?.deleteValue()
+      editor?.disabled()
+      const req = t('promptTemplate', {content: value})
+      await fetchAiStreamToken(req, (text) => {
+        editor?.insertValue(text, true)
+      })
+      editor?.enable()
+    }
+  }
+  return (
+    <TooltipButton icon={<SquareCodeIcon />} tooltipText={t('tooltip')} onClick={handleBlock}>
+    </TooltipButton>
+  )
+}

src/app/core/article/custom-toolbar/question.tsx

@@ -0,0 +1,25 @@
+'use client'
+import Question from "./question";
+import Polish from "./polish";
+import Eraser from "./eraser";
+import Expansion from "./expansion";
+import Vditor from "vditor";
+
+export default function FloatBar({left, top, value, editor}: {left?: number, top?: number, value?: string, editor?: Vditor}) {
+  return (
+    left && top ? (
+      <div
+        className="absolute shadow rounded-lg bg-primary text-primary-foreground p-1"
+        style={{left: left + 'px', top: top < 64 ? top + 82 + 'px' : top + 'px'}}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            <Question editor={editor} value={value} />
+            <Polish editor={editor} value={value} />
+            <Eraser editor={editor} value={value} />
+            <Expansion editor={editor} value={value} />
+          </div>
+        </div>
+      </div>
+    ) : null
+  )
+}