From 55f70633fd0fcec52d9a3d58beb8bd9ed9ed4da7 Mon Sep 17 00:00:00 2001
From: d-kimsuon <dev.kimuson@gmail.com>
Date: Tue, 2 Sep 2025 21:05:36 +0900
Subject: [PATCH] feat: syntaxhilight input json

---
 .../AssistantConversationContent.tsx              | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx b/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx
index 39dd7e7..65d1d28 100644
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx
@@ -1,6 +1,8 @@
 import { ChevronDown, Lightbulb, Settings } from "lucide-react";
 import Image from "next/image";
 import type { FC } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { Badge } from "@/components/ui/badge";
 import {
   Card,
@@ -86,11 +88,14 @@ export const AssistantConversationContent: FC<{
               </div>
             </CollapsibleTrigger>
             <CollapsibleContent>
-              <div className="bg-background rounded border p-2 mt-1">
-                <pre className="text-xs overflow-x-auto">
-                  {JSON.stringify(content.input, null, 2)}
-                </pre>
-              </div>
+              <SyntaxHighlighter
+                style={oneLight}
+                language="json"
+                PreTag="div"
+                className="text-xs"
+              >
+                {JSON.stringify(content.input, null, 2)}
+              </SyntaxHighlighter>
             </CollapsibleContent>
           </Collapsible>
           {toolResult && (