some markdown for chat messages

This commit is contained in:
Kiril Videlov 2023-05-25 13:14:51 +03:00 committed by Kiril Videlov
parent 597aab3156
commit 4a77e377c6
3 changed files with 20 additions and 2 deletions

View File

@ -59,6 +59,7 @@
"histoire": "^0.16.1",
"inter-ui": "^3.19.3",
"leven": "^4.0.0",
"marked": "^5.0.2",
"nanoevents": "^7.0.1",
"nanoid": "^4.0.1",
"postcss": "^8.4.14",

View File

@ -130,6 +130,9 @@ devDependencies:
leven:
specifier: ^4.0.0
version: 4.0.0
marked:
specifier: ^5.0.2
version: 5.0.2
nanoevents:
specifier: ^7.0.1
version: 7.0.1
@ -2818,6 +2821,12 @@ packages:
uc.micro: 1.0.6
dev: true
/marked@5.0.2:
resolution: {integrity: sha512-TXksm9GwqXCRNbFUZmMtqNLvy3K2cQHuWmyBDLOrY1e6i9UvZpOTJXoz7fBjYkJkaUFzV9hBFxMuZSyQt8R6KQ==}
engines: {node: '>= 18'}
hasBin: true
dev: true
/mdurl@1.0.1:
resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
dev: true

View File

@ -2,6 +2,7 @@
import Button from '$lib/components/Button/Button.svelte';
import { CloudApi, type Project } from '$lib/api';
import { stores } from '$lib';
import { marked } from 'marked';
const cloud = CloudApi();
const user = stores.user;
@ -107,7 +108,7 @@
</div>
<div class="message-block flex max-w-[500px] flex-col gap-2">
<div class="automated-message">
<div class="automated-text">{pair[1]}</div>
<div class="automated-text">{@html marked(pair[1])}</div>
</div>
</div>
</div>
@ -230,7 +231,14 @@
@apply max-w-[500px] rounded-[18px] rounded-tl-md bg-zinc-200 text-[14px] font-medium text-zinc-800;
}
.automated-text {
@apply w-full cursor-text select-text px-4 py-3 text-[14px];
@apply w-64 cursor-text select-text px-4 py-3 text-[14px];
}
.automated-text :global(pre) {
@apply bg-zinc-300;
@apply overflow-x-auto p-2 my-2
}
.automated-text :global(code) {
@apply bg-zinc-300;
}
.user-message {
@apply w-[fit-content] max-w-[80%] cursor-text select-text rounded-[18px] rounded-tr-md bg-blue-700 py-3 px-4 text-[14px] font-medium text-white;