demo update

demos/chat_room.py

@@ -31,7 +31,7 @@ async def refresh_msg(my_name, msg_box):
         for m in chat_msgs[last_idx:]:
             if m[0] != my_name:  # 仅刷新其他人的新信息
                 msg_box.append(put_markdown('`%s`: %s' % m))
-                run_js('$("#pywebio-scope-msg-container>div").animate({ scrollTop: $("#pywebio-scope-msg-container>div").prop("scrollHeight")}, 1000)')  # hack: to scroll bottom
+                run_js('$("#pywebio-scope-msg-container>div").stop().animate({ scrollTop: $("#pywebio-scope-msg-container>div").prop("scrollHeight")}, 1000)')  # hack: to scroll bottom
 
         # 清理聊天记录
         if len(chat_msgs) > MAX_MESSAGES_CNT:
@@ -45,7 +45,7 @@ async def main():
 
     set_env(title="PyWebIO Chat Room")
 
-    put_markdown("##PyWebIO聊天室\n欢迎来到聊天室，你可以和当前所有在线的人聊天。你可以在浏览器的多个标签页中打开本页面来测试聊天效果。"
+    put_markdown("## PyWebIO聊天室\n欢迎来到聊天室，你可以和当前所有在线的人聊天。你可以在浏览器的多个标签页中打开本页面来测试聊天效果。"
     "本应用使用不到80行代码实现，源代码[链接](https://github.com/wang0618/PyWebIO/blob/dev/demos/chat_room.py)", lstrip=True)
 
     msg_box = output()
@@ -66,14 +66,15 @@ async def main():
 
     while True:
         data = await input_group('发送消息', [
-            input(name='msg', help_text='消息内容支持Markdown 语法', required=True),
-            actions(name='cmd', buttons=['发送', {'label': '退出', 'type': 'cancel'}])
-        ])
+            input(name='msg', help_text='消息内容支持行内Markdown语法'),
+            actions(name='cmd', buttons=['发送', '多行输入', {'label': '退出', 'type': 'cancel'}])
+        ], validate=lambda d: ('msg', '消息不为空') if d['cmd'] == '发送' and not d['msg'] else None)
         if data is None:
             break
-
-        msg_box.append(put_markdown('`%s`: %s' % (nickname, data['msg'])))
-        run_js('$("#pywebio-scope-msg-container>div").animate({ scrollTop: $("#pywebio-scope-msg-container>div").prop("scrollHeight")}, 1000)')  # hack: to scroll bottom
+        if data['cmd'] == '多行输入':
+            data['msg'] = '\n' + await textarea('消息内容', help_text='消息内容支持Markdown语法')
+        msg_box.append(put_markdown('`%s`: %s' % (nickname, data['msg']), sanitize=True))
+        run_js('$("#pywebio-scope-msg-container>div").stop().animate({ scrollTop: $("#pywebio-scope-msg-container>div").prop("scrollHeight")}, 1000)')  # hack: to scroll bottom
         chat_msgs.append((nickname, data['msg']))
 
     refresh_task.close()