lobe-ui icon indicating copy to clipboard operation
lobe-ui copied to clipboard

[Request] highlighter bodyRender need a flag for finished

Open Yueyanc opened this issue 6 months ago • 4 comments

🥰 需求描述 | Feature Description

  const componentProps: MarkdownProps['componentProps'] = useMemo(() => {
    return {
      highlight: {
        bodyRender(props) {
          const { language, content } = props
          console.log(content)

          switch (language) {
            case 'echarts':
              return (
                <ErrorBoundary fallbackRender={() => <div className="text-red-500 text-sm px-4 py-10">Unable to display chart</div>}>
                  <MarkdownEcharts content={content} />
                </ErrorBoundary>
              )
            default:
              return props.originalNode
          }
        },
      },
    }
  }, [])

需要一个标识来表示当前tag是否已经完全输出

🧐 解决方案 | Proposed Solution

  const componentProps: MarkdownProps['componentProps'] = useMemo(() => {
    return {
      highlight: {
        bodyRender(props) {
          const { language, content, finished } = props
          console.log(content)

          switch (language) {
            case 'echarts':
              return (
                <ErrorBoundary fallbackRender={() => <div className="text-red-500 text-sm px-4 py-10">Unable to display chart</div>}>
                  <MarkdownEcharts content={content} finished={finished} />
                </ErrorBoundary>
              )
            default:
              return props.originalNode
          }
        },
      },
    }
  }, [])

📝 补充信息 | Additional Information

No response

Yueyanc avatar Jun 03 '25 04:06 Yueyanc

👀 @Yueyanc Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible. Please make sure you have given us as much context as possible.
非常感谢您提交 issue。我们会尽快调查此事,并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

lobehubbot avatar Jun 03 '25 04:06 lobehubbot

没太懂要监听 BodyRender 结束的逻辑是什么?

如果只是渲染的话,直接外层 useEffect 就好

如果是在对话场景下,想要监听流式接口结束,直接在网络处理就好了,能提供更详细的场景呢?

ONLY-yours avatar Jun 19 '25 09:06 ONLY-yours

没太懂要监听 BodyRender 结束的逻辑是什么?

如果只是渲染的话,直接外层 useEffect 就好

如果是在对话场景下,想要监听流式接口结束,直接在网络处理就好了,能提供更详细的场景呢?

流式返回可能图表在对话过程中数据返回就可以渲染了,而不是接口返回结束

yuguaa avatar Jun 20 '25 18:06 yuguaa

没太懂要监听 BodyRender 结束的逻辑是什么?

如果只是渲染的话,直接外层 useEffect 就好

如果是在对话场景下,想要监听流式接口结束,直接在网络处理就好了,能提供更详细的场景呢?

因为echarts这种数据格式只有等待配置代码全部输出完了之后才能正常显示,而代码块输出完毕后可能后续还会继续输出其他内容

Yueyanc avatar Jul 08 '25 06:07 Yueyanc