diff --git a/.changeset/yellow-files-prove.md b/.changeset/yellow-files-prove.md new file mode 100644 index 0000000000000000000000000000000000000000..9c9e1bc116f48ffba42a0752d0fa60655060ee06 --- /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 47b5de5af81e3d4f9622df69f1d62698246c5e11..48aeebf6e080be2fa1218e51c817654814e10a42 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 a843eeb7b8c13e8aa1acdaae493921686b28f668..8a7e339d91e3dac4f829dd39d3c4c4f453b42f36 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; +}