<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流式输出md内容</title>
<link rel="stylesheet" type="text/css" href="../packages/cherry-markdown/dist/cherry-markdown.css"">
<style>
html,
body {
margin: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 70%;
}
.one-msg {
margin-top: 50px;
margin-left: 50px;
}
.cherry {
min-height: 0;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #ccc;
line-height: 40px;
text-align: center;
margin-left: -50px;
margin-bottom: -40px;
}
.j-one-msg {
display: none;
}
.chat-one-msg {
display: inline-block;
max-width: 600px;
}
.buttons {
margin-top: 30px;
margin-bottom: 20px;
text-align: center;
}
.button {
display: inline-block;
border: 1px solid #ccc;
background-color: #0d68ff;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
box-shadow: 1px 1px 3px #ccc;
cursor: pointer;
}
.status {
display: inline-block;
margin-left: 30px;
}
.status-input {
width: 16px;
height: 16px;
cursor: pointer;
}
.custom-input {
margin-top: 10px;
margin-bottom: 10px;
width: 60%;
min-width: 500px;
margin-left: auto;
margin-right: auto;
}
.custom-textarea {
width: 100%;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: inherit;
font-size: 14px;
resize: vertical;
box-sizing: border-box;
}
</style>
<link rel="Shortcut Icon" href="./logo/favicon.ico">
<link rel="Shortcut Icon" href="../logo/favicon.ico">
<link rel="Bookmark" href="../logo/favicon.ico">
</head>
<body>
<div class="dialog j-dialog">
</div>
<div class="one-msg j-one-msg">
<div class="avatar">
AI
</div>
<div class="chat-one-msg"></div>
</div>
<div class="buttons">
<div class="button j-button">
获取消息（剩余<span class="j-button-tips"></span>条消息）
</div>
<div class="status">
<input class="j-status-input status-input" type="checkbox" checked>开启流式适配
</div>
</div>
<div class="custom-input">
<textarea class="custom-textarea j-custom-textarea" placeholder="请输入您想要流式打印的Markdown内容..."></textarea>
<div class="button custom-button j-custom-button">流式打印自定义内容</div>
</div>
<script src="../packages/cherry-markdown/dist/cherry-markdown.js"></script>
<script type="module">
import {aiChatScenario} from './assets/scripts/ai-chat-demo.js';
aiChatScenario();
</script>
</body>
</html>