feat: add inline code style (#1909)

* feat: add inline code style

* feat: add code block radius

---------

Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com>

frontend/src/components/chat/ChatMessage.tsx

@@ -11,6 +11,7 @@ function ChatMessage({ message }: MessageProps) {
   // const text = useTyping(message.content);
 
   const className = twMerge(
+    "markdown-body",
     "p-3 text-white max-w-[90%] overflow-y-auto rounded-lg",
     message.sender === "user" ? "bg-neutral-700 self-end" : "bg-neutral-500",
   );

frontend/src/components/markdown/code.tsx

@@ -21,7 +21,12 @@ export function code({
   }
 
   return (
-    <SyntaxHighlighter style={vscDarkPlus} language={match?.[1]} PreTag="div">
+    <SyntaxHighlighter
+      className="rounded-lg"
+      style={vscDarkPlus}
+      language={match?.[1]}
+      PreTag="div"
+    >
       {String(children).replace(/\n$/, "")}
     </SyntaxHighlighter>
   );

frontend/src/index.css

@@ -10,6 +10,7 @@
   --bg-editor-active: #31343D;
   --border-editor-sidebar: #3C3C4A;
   background-color: var(--neutral-900) !important;
+  --bg-neutral-muted: #afb8c133;
 }
 
 body {
@@ -25,3 +26,17 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.markdown-body code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  white-space: break-spaces;
+  background-color: var(--bg-neutral-muted);
+  border-radius: 6px;
+}
+
+.markdown-body pre code {
+  padding: 0;
+  background-color: inherit;
+}