|
|
@@ -3,7 +3,7 @@ import { LoadIcon } from "@/components/bs-icons/loading";
|
|
|
import { CodeBlock } from "@/modals/formModal/chatMessage/codeBlock";
|
|
|
import { ChatMessageType } from "@/types/chat";
|
|
|
import { copyText } from "@/utils";
|
|
|
-import { useMemo, useRef } from "react";
|
|
|
+import { useMemo, useRef, useState } from "react";
|
|
|
import ReactMarkdown from "react-markdown";
|
|
|
import rehypeMathjax from "rehype-mathjax";
|
|
|
import remarkGfm from "remark-gfm";
|
|
|
@@ -81,11 +81,50 @@ export default function MessageBs({ data, onUnlike = () => { }, flow_type, onSou
|
|
|
[data.message, data.message.toString()]
|
|
|
)
|
|
|
|
|
|
+ const mkdownReasoning = useMemo(
|
|
|
+ () => (
|
|
|
+ <ReactMarkdown
|
|
|
+ remarkPlugins={[remarkGfm, remarkMath]}
|
|
|
+ rehypePlugins={[rehypeMathjax]}
|
|
|
+ linkTarget="_blank"
|
|
|
+ className="bs-mkdown inline-block break-all max-w-full text-sm text-text-answer "
|
|
|
+ components={{
|
|
|
+ code: ({ node, inline, className, children, ...props }) => {
|
|
|
+ if (children.length) {
|
|
|
+ if (children[0] === "▍") {
|
|
|
+ return (<span className="form-modal-markdown-span"> ▍ </span>);
|
|
|
+ }
|
|
|
+
|
|
|
+ children[0] = (children[0] as string).replace("`▍`", "▍");
|
|
|
+ }
|
|
|
+
|
|
|
+ const match = /language-(\w+)/.exec(className || "");
|
|
|
+
|
|
|
+ return !inline ? (
|
|
|
+ <CodeBlock
|
|
|
+ key={Math.random()}
|
|
|
+ language={(match && match[1]) || ""}
|
|
|
+ value={String(children).replace(/\n$/, "")}
|
|
|
+ {...props}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <code className={className} {...props}> {children} </code>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {data.reasoning_content ? data.reasoning_content.toString() : ""}
|
|
|
+ </ReactMarkdown>
|
|
|
+ ),
|
|
|
+ [data.reasoning_content, data.reasoning_content ? data.reasoning_content.toString() : ""]
|
|
|
+ )
|
|
|
+
|
|
|
const messageRef = useRef<HTMLDivElement>(null)
|
|
|
const handleCopyMessage = () => {
|
|
|
copyText(messageRef.current)
|
|
|
}
|
|
|
- // console.log(data)
|
|
|
+ // let shenduOff = useRef(true)
|
|
|
+ const [shenduOff, setShenduOff] = useState(true)
|
|
|
const chatId = useMessageStore(state => state.chatId)
|
|
|
return <div className="flex w-full py-1">
|
|
|
<div className="w-[100%]">
|
|
|
@@ -115,15 +154,19 @@ export default function MessageBs({ data, onUnlike = () => { }, flow_type, onSou
|
|
|
</div>
|
|
|
: <div><LoadIcon className="text-gray-400" /></div>
|
|
|
} */}
|
|
|
- {data.message.toString() && data.message.toString().includes('```chart') && <Chart options={data.message} />}
|
|
|
- {data.message.toString() && !data.message.toString().includes('```chart') && <div className="chat-start-zk relative">
|
|
|
- {mkdown}
|
|
|
+ {(data.message.toString() || (data.reasoning_content && data.reasoning_content.toString())) && data.message.toString().includes('```chart') && <Chart options={data.message} />}
|
|
|
+ {(data.message.toString() || (data.reasoning_content && data.reasoning_content.toString())) && !data.message.toString().includes('```chart') && <div className="chat-start-zk relative">
|
|
|
+ {(data.reasoning_content && data.reasoning_content.toString()) && <div className="shendu">
|
|
|
+ <div className="shenduBtn" onClick={() => {setShenduOff(!shenduOff)}}>深度思考 <svg className={`${!shenduOff && 'transform180'}`} width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.786 4.167L2.765 1.259c-.416-.4-.985-.482-1.273-.183-.287.298-.183.864.233 1.264l3.021 2.908c.416.4.986.482 1.273.184.287-.299.183-.865-.233-1.265z" fill="currentColor"></path><path d="M8.197 1.206L5.288 4.208c-.4.413-.484.982-.187 1.27.298.289.864.187 1.265-.227L9.274 2.25c.401-.414.485-.983.187-1.271-.297-.288-.863-.187-1.264.227z" fill="currentColor"></path></svg></div>
|
|
|
+ {shenduOff && <div className="shenduText">{mkdownReasoning}</div>}
|
|
|
+ </div>}
|
|
|
+ <div className="mt-[10px]">{mkdown}</div>
|
|
|
{/* @user */}
|
|
|
{data.receiver && <p className="text-blue-500 text-sm">@ {data.receiver.user_name}</p>}
|
|
|
{/* 光标 */}
|
|
|
{/* {data.message.toString() && !data.end && <div className="animate-cursor absolute w-2 h-5 ml-1 bg-gray-600" style={{ left: cursor.x, top: cursor.y }}></div>} */}
|
|
|
</div>}
|
|
|
- {!data.message.toString() && <div><LoadIcon className="text-gray-400" /></div>}
|
|
|
+ {(!data.message.toString() && !data.reasoning_content.toString()) && <div><LoadIcon className="text-gray-400" /></div>}
|
|
|
|
|
|
{/* 赞 踩 */}
|
|
|
{!!data.id && data.end && <Thumbs
|
Blame