feat(chat): enhance markdown rendering in chat panel
This commit is contained in:
parent
67f96fff03
commit
e059442d53
@ -20,6 +20,46 @@ const quickPrompts = [
|
||||
"Summarize the binary",
|
||||
];
|
||||
|
||||
const remarkPlugins = [remarkGfm];
|
||||
|
||||
const markdownContainerClass =
|
||||
"[&_th]:border-border [&_td]:border-border max-w-none break-words [&_ol]:my-2 [&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_pre]:my-2 [&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_ul]:my-2";
|
||||
|
||||
const markdownComponents: ComponentPropsWithoutRef<typeof ReactMarkdown>["components"] = {
|
||||
code({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: ComponentPropsWithoutRef<"code"> & {
|
||||
className?: string;
|
||||
}) {
|
||||
const match = /language-(\w+)/.exec(className || "");
|
||||
const isInline = !match;
|
||||
const codeString = String(children).replace(/\n$/, "");
|
||||
|
||||
if (isInline) {
|
||||
return (
|
||||
<code className="bg-muted-foreground/20 rounded px-1 py-0.5 text-xs break-all" {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<pre className="bg-muted-foreground/10 max-w-full overflow-x-auto rounded-lg p-3 text-xs">
|
||||
<code className="break-all whitespace-pre-wrap">{codeString}</code>
|
||||
</pre>
|
||||
);
|
||||
},
|
||||
pre({ children }) {
|
||||
return <pre className="my-2 overflow-x-auto rounded-lg">{children}</pre>;
|
||||
},
|
||||
};
|
||||
|
||||
function normalizeMarkdown(content: string) {
|
||||
return content.replace(/\r\n/g, "\n").replace(/([^\n])\n([^\n])/g, "$1 \n$2");
|
||||
}
|
||||
|
||||
export function AIChatPanel() {
|
||||
const {
|
||||
binary,
|
||||
@ -262,52 +302,12 @@ export function AIChatPanel() {
|
||||
{isUser ? (
|
||||
<div className="break-words whitespace-pre-wrap">{message.content}</div>
|
||||
) : (
|
||||
<div className="[&_th]:border-border [&_td]:border-border max-w-none break-words [&_ol]:my-2 [&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_pre]:my-2 [&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_ul]:my-2">
|
||||
<div className={markdownContainerClass}>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
code({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: ComponentPropsWithoutRef<"code"> & {
|
||||
className?: string;
|
||||
}) {
|
||||
const match = /language-(\w+)/.exec(className || "");
|
||||
const isInline = !match;
|
||||
const codeString = String(children).replace(/\n$/, "");
|
||||
|
||||
if (isInline) {
|
||||
return (
|
||||
<code
|
||||
className="bg-muted-foreground/20 rounded px-1 py-0.5 text-xs break-all"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<pre className="bg-muted-foreground/10 max-w-full overflow-x-auto rounded-lg p-3 text-xs">
|
||||
<code className="break-all whitespace-pre-wrap">
|
||||
{codeString}
|
||||
</code>
|
||||
</pre>
|
||||
);
|
||||
},
|
||||
pre({ children }) {
|
||||
return (
|
||||
<pre className="my-2 overflow-x-auto rounded-lg">
|
||||
{children}
|
||||
</pre>
|
||||
);
|
||||
},
|
||||
}}
|
||||
remarkPlugins={remarkPlugins}
|
||||
components={markdownComponents}
|
||||
>
|
||||
{(message.content ?? "")
|
||||
.replace(/\r\n/g, "\n")
|
||||
.replace(/([^\n])\n([^\n])/g, "$1 \n$2")}
|
||||
{normalizeMarkdown(message.content ?? "")}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
)}
|
||||
@ -333,19 +333,21 @@ export function AIChatPanel() {
|
||||
</div>
|
||||
<div className="flex max-w-[85%] min-w-0 flex-col items-start gap-1">
|
||||
<div className="bg-muted overflow-hidden rounded-lg px-3 py-2 text-sm">
|
||||
<div className="break-words whitespace-pre-wrap">
|
||||
{streamingContent ? (
|
||||
<>
|
||||
{streamingContent}
|
||||
<span className="ml-0.5 inline-block h-4 w-1 animate-pulse bg-current align-middle" />
|
||||
</>
|
||||
) : (
|
||||
<div className="text-muted-foreground flex items-center gap-2">
|
||||
<Loader2 className="text-primary h-4 w-4 animate-spin" />
|
||||
<span>{analyzingMessage}...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{streamingContent ? (
|
||||
<div className={markdownContainerClass}>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={remarkPlugins}
|
||||
components={markdownComponents}
|
||||
>
|
||||
{normalizeMarkdown(streamingContent)}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-muted-foreground flex items-center gap-2">
|
||||
<Loader2 className="text-primary h-4 w-4 animate-spin" />
|
||||
<span>{analyzingMessage}...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -63,6 +63,8 @@ export function useAIChat() {
|
||||
const [toolStatus, setToolStatus] = useState<string | null>(null);
|
||||
const [isToolRunning, setIsToolRunning] = useState(false);
|
||||
const [pendingUserMessage, setPendingUserMessage] = useState<MessageResponse | null>(null);
|
||||
const [optimisticAssistantMessage, setOptimisticAssistantMessage] =
|
||||
useState<MessageResponse | null>(null);
|
||||
|
||||
const { data: binary } = useGetBinary(binaryId, {
|
||||
query: { enabled: !!binaryId },
|
||||
@ -133,6 +135,7 @@ export function useAIChat() {
|
||||
setStreamingContent("");
|
||||
setToolStatus(null);
|
||||
setIsToolRunning(false);
|
||||
setOptimisticAssistantMessage(null);
|
||||
setStreamError(null);
|
||||
setPendingUserMessage({
|
||||
role: "USER",
|
||||
@ -204,11 +207,15 @@ export function useAIChat() {
|
||||
setIsToolRunning(true);
|
||||
break;
|
||||
case "done":
|
||||
setOptimisticAssistantMessage({
|
||||
role: "ASSISTANT",
|
||||
content: fullContent,
|
||||
createdAt: new Date().toISOString(),
|
||||
});
|
||||
setIsStreaming(false);
|
||||
setStreamingContent("");
|
||||
setToolStatus(null);
|
||||
setIsToolRunning(false);
|
||||
setPendingUserMessage(null);
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [`/chat/sessions/${activeSessionId}/messages`],
|
||||
});
|
||||
@ -221,6 +228,7 @@ export function useAIChat() {
|
||||
setToolStatus(null);
|
||||
setIsToolRunning(false);
|
||||
setPendingUserMessage(null);
|
||||
setOptimisticAssistantMessage(null);
|
||||
setStreamError(sseEvent.message);
|
||||
break;
|
||||
}
|
||||
@ -256,11 +264,15 @@ export function useAIChat() {
|
||||
setIsToolRunning(true);
|
||||
break;
|
||||
case "done":
|
||||
setOptimisticAssistantMessage({
|
||||
role: "ASSISTANT",
|
||||
content: fullContent,
|
||||
createdAt: new Date().toISOString(),
|
||||
});
|
||||
setIsStreaming(false);
|
||||
setStreamingContent("");
|
||||
setToolStatus(null);
|
||||
setIsToolRunning(false);
|
||||
setPendingUserMessage(null);
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [`/chat/sessions/${activeSessionId}/messages`],
|
||||
});
|
||||
@ -273,6 +285,7 @@ export function useAIChat() {
|
||||
setToolStatus(null);
|
||||
setIsToolRunning(false);
|
||||
setPendingUserMessage(null);
|
||||
setOptimisticAssistantMessage(null);
|
||||
setStreamError(sseEvent.message);
|
||||
break;
|
||||
}
|
||||
@ -287,6 +300,7 @@ export function useAIChat() {
|
||||
setToolStatus(null);
|
||||
setIsToolRunning(false);
|
||||
setPendingUserMessage(null);
|
||||
setOptimisticAssistantMessage(null);
|
||||
setStreamError(err.message || "An unexpected error occurred");
|
||||
}
|
||||
}
|
||||
@ -300,13 +314,27 @@ export function useAIChat() {
|
||||
setToolStatus(null);
|
||||
setIsToolRunning(false);
|
||||
setPendingUserMessage(null);
|
||||
setOptimisticAssistantMessage(null);
|
||||
}, []);
|
||||
|
||||
const messages: MessageResponse[] = [...historicalMessages];
|
||||
if (isStreaming && pendingUserMessage) {
|
||||
|
||||
if (
|
||||
pendingUserMessage &&
|
||||
!historicalMessages.some((m) => m.role === "USER" && m.content === pendingUserMessage.content)
|
||||
) {
|
||||
messages.push(pendingUserMessage);
|
||||
}
|
||||
|
||||
if (
|
||||
optimisticAssistantMessage &&
|
||||
!historicalMessages.some(
|
||||
(m) => m.role === "ASSISTANT" && m.content === optimisticAssistantMessage.content
|
||||
)
|
||||
) {
|
||||
messages.push(optimisticAssistantMessage);
|
||||
}
|
||||
|
||||
const userFriendlyError = streamError
|
||||
? streamError.includes("Ollama is not available")
|
||||
? "LLM server (Ollama) is not running. Start it with `ollama serve`."
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user