feat: enhance style for markdown (#298)

.changeset/yellow-files-prove.md

+---
+"create-llama": patch
+---
+
+feat: enhance style for markdown

templates/types/streaming/nextjs/app/components/ui/chat/chat-message/markdown.tsx

@@ -133,7 +133,11 @@ export default function Markdown({
               return <></>;
             }
           }
-          return <a href={href}>{children}</a>;
+          return (
+            <a href={href} target="_blank">
+              {children}
+            </a>
+          );
         },
       }}
     >

templates/types/streaming/nextjs/app/markdown.css

@@ -2,11 +2,15 @@
 .custom-markdown ul {
   list-style-type: disc;
   margin-left: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 .custom-markdown ol {
   list-style-type: decimal;
   margin-left: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 .custom-markdown li {
@@ -21,3 +25,55 @@
 .custom-markdown ol ol {
   margin-left: 20px;
 }
+
+.custom-markdown img {
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  margin: 10px 0;
+}
+
+.custom-markdown a {
+  text-decoration: underline;
+  color: #007bff;
+}
+
+.custom-markdown h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: bold;
+  margin-bottom: 20px;
+  margin-top: 20px;
+}
+
+.custom-markdown h6 {
+  font-size: 16px;
+}
+
+.custom-markdown h5 {
+  font-size: 18px;
+}
+
+.custom-markdown h4 {
+  font-size: 20px;
+}
+
+.custom-markdown h3 {
+  font-size: 22px;
+}
+
+.custom-markdown h2 {
+  font-size: 24px;
+}
+
+.custom-markdown h1 {
+  font-size: 26px;
+}
+
+.custom-markdown hr {
+  border: 0;
+  border-top: 1px solid #e1e4e8;
+  margin: 20px 0;
+}