diff --git a/shared/utils/string-helper.ts b/shared/utils/string-helper.ts
index bea3b19a..bea8d42c 100644
--- a/shared/utils/string-helper.ts
+++ b/shared/utils/string-helper.ts
@@ -46,7 +46,7 @@ export function is(it: string) {
  * 根据文本内容返回一个内置色卡的颜色
  * @param text 文本
  */
-export function getTextColorHex(text: string): string {
+export function getTextColorHex(text: unknown): string {
   if (!text || !_isString(text)) {
     return '#ffffff'; // 如果获取不到文本，则返回白色
   }
diff --git a/web/src/components/Avatar.tsx b/web/src/components/Avatar.tsx
index e39c8725..0fcbecb9 100644
--- a/web/src/components/Avatar.tsx
+++ b/web/src/components/Avatar.tsx
@@ -12,7 +12,8 @@ interface AvatarProps extends AntdAvatarProps {
   name?: string;
   isOnline?: boolean;
 }
-export const Avatar: React.FC<AvatarProps> = React.memo((props) => {
+export const Avatar: React.FC<AvatarProps> = React.memo((_props) => {
+  const { isOnline, ...props } = _props;
   const src = typeof props.src !== 'string' ? props.src : undefined;
 
   const name = useMemo(() => _upperCase(_head(props.name)), [props.name]);
@@ -21,7 +22,7 @@ export const Avatar: React.FC<AvatarProps> = React.memo((props) => {
     () =>
       // 如果src为空 且 icon为空 则给个固定颜色
       _isEmpty(src) && _isNil(props.icon)
-        ? getTextColorHex(props.name!)
+        ? getTextColorHex(props.name)
         : undefined,
     [src, props.icon, props.name]
   );
@@ -48,13 +49,13 @@ export const Avatar: React.FC<AvatarProps> = React.memo((props) => {
     </AntdAvatar>
   );
 
-  if (typeof props.isOnline === 'boolean') {
+  if (typeof isOnline === 'boolean') {
     const style = {
       bottom: 0,
       top: 'auto',
     };
 
-    if (props.isOnline === true) {
+    if (isOnline === true) {
       return (
         <Badge dot={true} color="green" style={style}>
           {inner}
diff --git a/web/src/components/ChatBox/index.tsx b/web/src/components/ChatBox/index.tsx
new file mode 100644
index 00000000..9bf2ed28
--- /dev/null
+++ b/web/src/components/ChatBox/index.tsx
@@ -0,0 +1,29 @@
+import { Skeleton } from 'antd';
+import React from 'react';
+
+const ChatBoxPlaceholder: React.FC = React.memo(() => {
+  return (
+    <div className="px-2 w-2/3">
+      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
+      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
+      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
+      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
+      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
+      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
+      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
+      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
+      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
+      <Skeleton className="mb-2" avatar={true} paragraph={{ rows: 1 }} />
+    </div>
+  );
+});
+ChatBoxPlaceholder.displayName = 'ChatBoxPlaceholder';
+
+export const ChatBox: React.FC = React.memo(() => {
+  return (
+    <>
+      <ChatBoxPlaceholder />
+    </>
+  );
+});
+ChatBox.displayName = 'ChatBox';
diff --git a/web/src/routes/Main/Content/Personal/Converse/index.tsx b/web/src/routes/Main/Content/Personal/Converse/index.tsx
new file mode 100644
index 00000000..b875333b
--- /dev/null
+++ b/web/src/routes/Main/Content/Personal/Converse/index.tsx
@@ -0,0 +1,19 @@
+import { ChatBox } from '@/components/ChatBox';
+import React from 'react';
+import { useParams } from 'react-router';
+
+interface UserConversePanelParams {
+  converseUUID: string;
+}
+
+export const ConversePanel: React.FC = React.memo(() => {
+  const params = useParams<UserConversePanelParams>();
+
+  return (
+    <div className="w-full h-full overflow-hidden">
+      <div>{params.converseUUID}</div>
+      <ChatBox />
+    </div>
+  );
+});
+ConversePanel.displayName = 'ConversePanel';
diff --git a/web/src/routes/Main/Content/Personal/index.tsx b/web/src/routes/Main/Content/Personal/index.tsx
index bcc84ab2..86b02b99 100644
--- a/web/src/routes/Main/Content/Personal/index.tsx
+++ b/web/src/routes/Main/Content/Personal/index.tsx
@@ -2,6 +2,7 @@ import { IsDeveloping } from '@/components/IsDeveloping';
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { PageContent } from '../PageContent';
+import { ConversePanel } from './Converse';
 import { FriendPanel } from './Friends';
 import { Sidebar } from './Sidebar';
 
@@ -13,7 +14,10 @@ export const Personal: React.FC = React.memo(() => {
 
         <Route path="/main/personal/plugins" component={IsDeveloping} />
 
-        <Route path="/main/personal/converse" component={IsDeveloping} />
+        <Route
+          path="/main/personal/converse/:converseUUID"
+          component={ConversePanel}
+        />
 
         <Redirect to="/main/personal/friends" />
       </Switch>