feat(chat): enhance markdown rendering in chat panel

src/features/binary/AIChatPanel.tsx

@@ -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]}
+                                remarkPlugins={remarkPlugins}
-                                components={{
+                                components={markdownComponents}
-                                  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>
-                                    );
-                                  },
-                                }}
                               >
-                                {(message.content ?? "")
+                                {normalizeMarkdown(message.content ?? "")}
-                                  .replace(/\r\n/g, "\n")
-                                  .replace(/([^\n])\n([^\n])/g, "$1  \n$2")}
                               </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 ? (
+                        <div className={markdownContainerClass}>
-                          <>
+                          <ReactMarkdown
-                            {streamingContent}
+                            remarkPlugins={remarkPlugins}
-                            <span className="ml-0.5 inline-block h-4 w-1 animate-pulse bg-current align-middle" />
+                            components={markdownComponents}
-                          </>
+                          >
-                        ) : (
+                            {normalizeMarkdown(streamingContent)}
-                          <div className="text-muted-foreground flex items-center gap-2">
+                          </ReactMarkdown>
-                            <Loader2 className="text-primary h-4 w-4 animate-spin" />
+                        </div>
-                            <span>{analyzingMessage}...</span>
+                      ) : (
-                          </div>
+                        <div className="text-muted-foreground flex items-center gap-2">
-                        )}
+                          <Loader2 className="text-primary h-4 w-4 animate-spin" />
-                      </div>
+                          <span>{analyzingMessage}...</span>
+                        </div>
+                      )}
                     </div>
                   </div>
                 </div>

src/features/binary/hooks/useAIChat.ts

@@ -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`."