项目场景:
大模型输出时,偶尔会有输出卡顿的情况,需要做一个光标效果告诉客户正在生成而不是已经完成了。
由于Markdown格式会有行内元素和块级元素(主要是有序列表和无序列表ul,ol,li标签
),所以需要单独做处理。
markdown组件使用的react-markdown@8.0.7版本
解决方案:
使用CSS需要考虑兼容性,如果想要兼容低版本浏览器,需要使用JS来辅助,找到最后一个元素的最后一个子元素来增加类名
在大模型输出的时候给markdown添加class=“markdown-container”,生成结束去掉这个class。
浏览器 | 兼容性 |
---|---|
Safari 15.4+ | 需启用 :has() |
Chrome 105+ | 原生支持 |
Firefox 121+ | 开启实验性功能 使用 JS 动态标记 |
Edge 120+ | 原生支持 |
// 适用于markdown中常见的正文
.markdown-container > :not(ol):not(ul):not(pre):last-child:after,
.markdown-container > pre:last-child code:after,
// 针对markdown中的ul,ol
.markdown-container > :is(ul,ol):last-child > li:last-child p:last-child:after,
.markdown-container > :is(ul,ol):last-child > li:last-child:not(:has(>p)):not(:has(*>li)):after,
.markdown-container > :is(ul,ol):last-child > li:last-child>:is(ul,ol):last-child>li:last-child:not(:has(>p)):not(:has(*>li)):after,
.markdown-container > :is(ul,ol):last-child > li:last-child>:is(ul,ol):last-child>li:last-child>:is(ul,ol):last-child > li:last-child:not(:has(>p)):after {
display: inline-block;
content: "";
margin: 0 .2em;
width: 14px;
height: 14px;
border-radius: 100%;
background-color: black;
vertical-align: text-bottom;
transform: translate3d(0, -2px, 0);
animation: blink .7s infinite;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}