From 8c1087f5f1250a93ecac5dee7bb0e6d03ad5fd6d Mon Sep 17 00:00:00 2001
From: Thuc Pham <51660321+thucpn@users.noreply.github.com>
Date: Wed, 18 Sep 2024 11:37:56 +0700
Subject: [PATCH] feat: enhance style for markdown (#298)
---
.changeset/yellow-files-prove.md | 5 ++
.../ui/chat/chat-message/markdown.tsx | 6 +-
.../types/streaming/nextjs/app/markdown.css | 56 +++++++++++++++++++
3 files changed, 66 insertions(+), 1 deletion(-)
create mode 100644 .changeset/yellow-files-prove.md
diff --git a/.changeset/yellow-files-prove.md b/.changeset/yellow-files-prove.md
new file mode 100644
index 00000000..9c9e1bc1
--- /dev/null
+++ b/.changeset/yellow-files-prove.md
@@ -0,0 +1,5 @@
+---
+"create-llama": patch
+---
+
+feat: enhance style for markdown
diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/chat-message/markdown.tsx b/templates/types/streaming/nextjs/app/components/ui/chat/chat-message/markdown.tsx
index 47b5de5a..48aeebf6 100644
--- a/templates/types/streaming/nextjs/app/components/ui/chat/chat-message/markdown.tsx
+++ b/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>
+ );
},
}}
>
diff --git a/templates/types/streaming/nextjs/app/markdown.css b/templates/types/streaming/nextjs/app/markdown.css
index a843eeb7..8a7e339d 100644
--- a/templates/types/streaming/nextjs/app/markdown.css
+++ b/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;
+}
--
GitLab