diff --git a/web/src/components/Playground.js b/web/src/components/Playground.js
index b8f7bf5c..a9b794aa 100644
--- a/web/src/components/Playground.js
+++ b/web/src/components/Playground.js
@@ -20,6 +20,21 @@ const defaultMessage = [
   }
 ];
 
+const roleInfo = {
+  user:  {
+    name: 'User',
+    avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'
+  },
+  assistant: {
+    name: 'Assistant',
+    avatar: 'logo.png'
+  },
+  system: {
+    name: 'System',
+    avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'
+  }
+}
+
 let id = 4;
 function getId() {
   return `${id++}`
@@ -330,6 +345,7 @@ const Playground = () => {
                 return <div></div>
               }
             }}
+            roleConfig={roleInfo}
             style={commonOuterStyle}
             chats={message}
             onMessageSend={onMessageSend}