feat: Supports adjusting text output effects, output by word by default (most efficient)

feat: Supports HTML element rendering, making it possible to output complex tables, charts, videos and other elements.
refactor: Optimize table output prompt
fix: Fixed the issue where the search task unexpectedly turned to completed status when the information collection content was empty.

Author: Amery2010

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "deep-research",
   "description": "Use any LLMs (Large Language Models) for Deep Research. Support SSE API and MCP server.",
-  "version": "0.9.15",
+  "version": "0.9.16",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/u14app/deep-research"
@@ -75,6 +75,7 @@
     "react-zoom-pan-pinch": "^3.7.0",
     "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
+    "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",

package.json

@@ -1,6 +1,7 @@
 import dynamic from "next/dynamic";
 import { useMemo, memo } from "react";
 import ReactMarkdown, { type Options, type Components } from "react-markdown";
+import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import remarkBreaks from "remark-breaks";
@@ -38,10 +39,12 @@ function MarkdownBlock({ children: content, ...rest }: Options) {
       {...rest}
       remarkPlugins={[remarkGfm, remarkMath, remarkBreaks, ...remarkPlugins]}
       rehypePlugins={[
+        rehypeRaw,
         [rehypeHighlight, { detect: true, ignoreMissing: true }],
         rehypeKatex,
         ...rehypePlugins,
       ]}
+      disallowedElements={["script", "form"]}
       components={{
         pre: (props) => {
           const { children, className, ...rest } = props;

pnpm-lock.yaml

@@ -162,6 +162,7 @@ const formSchema = z.object({
   debug: z.string().optional(),
   references: z.string().optional(),
   citationImage: z.string().optional(),
+  smoothTextStreamType: z.enum(["character", "word", "line"]).optional(),
 });
 
 function convertModelName(name: string) {
@@ -3432,6 +3433,37 @@ function Setting({ open, onClose }: SettingProps) {
                     </FormItem>
                   )}
                 />
+                <FormField
+                  control={form.control}
+                  name="smoothTextStreamType"
+                  render={({ field }) => (
+                    <FormItem className="from-item">
+                      <FormLabel className="from-label">
+                        <HelpTip tip={t("setting.textOutputModeTip")}>
+                          {t("setting.textOutputMode")}
+                        </HelpTip>
+                      </FormLabel>
+                      <FormControl>
+                        <Select {...field} onValueChange={field.onChange}>
+                          <SelectTrigger className="form-field">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="character">
+                              {t("setting.character")}
+                            </SelectItem>
+                            <SelectItem value="word">
+                              {t("setting.word")}
+                            </SelectItem>
+                            <SelectItem value="line">
+                              {t("setting.line")}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
               </TabsContent>
             </Tabs>
           </form>

src/components/MagicDown/View.tsx

@@ -31,7 +31,7 @@ Follow these rules to organize your output:
     - **Code blocks:** Enclose it in triple backticks (\`\`\` \`\`\`), optionally in a language.
 - **Quotes:** Use the \`>\` symbol.
 - **Horizontal rule:** Use \`---\`, \`***\` or \`___\`.
-- **Table:** Use basic GFM table syntax and do not include any extra spaces or tabs for alignment, use \`|\` and \`-\` symbols to construct. If there is complex table content, it needs to be divided into multiple tables for rendering, nested tables are not allowed.
+- **Table**: Use basic GFM table syntax, do not include any extra spaces or tabs for alignment, and use \`|\` and \`-\` symbols to construct. **For complex tables, GFM table syntax is not suitable. You must use HTML syntax to output complex tables.**
 - **Emoji:** You can insert Emoji before the title or subtitle, such as \`🔢### 1. Determine the base area of the prism\`.
 - **LaTeX:**
     - **Inline formula:** Use \`$E=mc^2$\`

src/components/Setting.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { streamText, smoothStream } from "ai";
 import { toast } from "sonner";
+import { useSettingStore } from "@/store/setting";
 import useModelProvider from "@/hooks/useAiProvider";
 import {
   AIWritePrompt,
@@ -17,8 +18,11 @@ type ArtifactProps = {
   onChange: (value: string) => void;
 };
 
-function smoothTextStream() {
-  return smoothStream({ chunking: /./, delayInMs: 0 });
+function smoothTextStream(type: "character" | "word" | "line") {
+  return smoothStream({
+    chunking: type === "character" ? /./ : type,
+    delayInMs: 0,
+  });
 }
 
 function handleError(error: unknown) {
@@ -27,6 +31,7 @@ function handleError(error: unknown) {
 }
 
 function useArtifact({ value, onChange }: ArtifactProps) {
+  const { smoothTextStreamType } = useSettingStore();
   const { createModelProvider, getModel } = useModelProvider();
   const [loadingAction, setLoadingAction] = useState<string>("");
 
@@ -36,7 +41,7 @@ function useArtifact({ value, onChange }: ArtifactProps) {
     const result = streamText({
       model: await createModelProvider(thinkingModel),
       prompt: AIWritePrompt(value, prompt, systemInstruction),
-      experimental_transform: smoothTextStream(),
+      experimental_transform: smoothTextStream(smoothTextStreamType),
       onError: handleError,
     });
     let text = "";
@@ -54,7 +59,7 @@ function useArtifact({ value, onChange }: ArtifactProps) {
     const result = streamText({
       model: await createModelProvider(thinkingModel),
       prompt: changeLanguagePrompt(value, lang, systemInstruction),
-      experimental_transform: smoothTextStream(),
+      experimental_transform: smoothTextStream(smoothTextStreamType),
       onError: handleError,
     });
     let text = "";
@@ -72,7 +77,7 @@ function useArtifact({ value, onChange }: ArtifactProps) {
     const result = streamText({
       model: await createModelProvider(thinkingModel),
       prompt: changeReadingLevelPrompt(value, level, systemInstruction),
-      experimental_transform: smoothTextStream(),
+      experimental_transform: smoothTextStream(smoothTextStreamType),
       onError: handleError,
     });
     let text = "";
@@ -90,7 +95,7 @@ function useArtifact({ value, onChange }: ArtifactProps) {
     const result = streamText({
       model: await createModelProvider(thinkingModel),
       prompt: adjustLengthPrompt(value, length, systemInstruction),
-      experimental_transform: smoothTextStream(),
+      experimental_transform: smoothTextStream(smoothTextStreamType),
       onError: handleError,
     });
     let text = "";
@@ -108,7 +113,7 @@ function useArtifact({ value, onChange }: ArtifactProps) {
     const result = streamText({
       model: await createModelProvider(thinkingModel),
       prompt: continuationPrompt(value, systemInstruction),
-      experimental_transform: smoothTextStream(),
+      experimental_transform: smoothTextStream(smoothTextStreamType),
       onError: handleError,
     });
     let text = value + "\n";
@@ -126,7 +131,7 @@ function useArtifact({ value, onChange }: ArtifactProps) {
     const result = streamText({
       model: await createModelProvider(thinkingModel),
       prompt: addEmojisPrompt(value, systemInstruction),
-      experimental_transform: smoothTextStream(),
+      experimental_transform: smoothTextStream(smoothTextStreamType),
       onError: handleError,
     });
     let text = "";