🎨 refactor: clear code and md

package.json

@@ -62,13 +62,7 @@
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
     "@floating-ui/react": "^0",
-    "@giscus/react": "^2",
     "@lobehub/chat-plugin-sdk": "latest",
-    "@lobehub/emojilib": "latest",
-    "@react-spring/three": "^9",
-    "@react-spring/web": "^9",
-    "@react-three/drei": "^9",
-    "@react-three/fiber": "^8",
     "ahooks": "^3",
     "antd": "^5",
     "chroma-js": "^2",
@@ -81,19 +75,16 @@
     "lucide-react": "^0.288.0",
     "polished": "^4",
     "prism-react-renderer": "^2",
-    "rc-footer": "^0",
     "re-resizable": "^6",
     "react-error-boundary": "^4",
     "react-layout-kit": "^1.7.1",
     "react-markdown": "^8",
     "react-rnd": "^10",
-    "react-simple-code-editor": "^0",
     "rehype-katex": "^6",
     "remark-gfm": "^3",
     "remark-math": "^5",
     "shikiji": "^0",
     "swr": "^2",
-    "three": "^0.150",
     "ts-md5": "^1",
     "url-join": "^5",
     "use-merge-value": "^1",

src/ActionIcon/index.tsx

@@ -2,9 +2,9 @@ import { Loader2 } from 'lucide-react';
 import { forwardRef, useMemo } from 'react';
 
 import Icon, { type IconProps } from '@/Icon';
-import Spotlight from '@/Spotlight';
-import Tooltip, { type TooltipProps } from '@/Tooltip';
+import Spotlight from '@/components/Spotlight';
 import { DivProps } from '@/types';
+import { Tooltip, type TooltipProps } from 'antd';
 
 import { useStyles } from './style';
 

src/ActionIconGroup/index.tsx

@@ -1,6 +1,6 @@
 import ActionIcon, { ActionIconProps } from '@/ActionIcon';
 import Icon from '@/Icon';
-import Spotlight from '@/Spotlight';
+import Spotlight from '@/components/Spotlight';
 
 import { Dropdown } from 'antd';
 import { MoreHorizontal, type LucideIcon } from 'lucide-react';

src/ChatInputArea/Desktop.tsx

@@ -4,7 +4,7 @@ import { CSSProperties, forwardRef, useCallback, useRef } from 'react';
 import useControlledState from 'use-merge-value';
 
 import Icon from '@/Icon';
-import { TextArea, type TextAreaProps } from '@/Input';
+import { TextArea, type TextAreaProps } from '@/components/Input';
 
 import Action from './Action';
 import { useStyles } from './style';

src/ChatInputArea/demos/index.tsx

@@ -1,6 +1,8 @@
-import { ActionIcon, ChatInputArea, DraggablePanel, Icon, TokenTag } from '@ant-design/pro-chat';
-import { Button } from 'antd';
-import { Archive, Eraser, Languages } from 'lucide-react';
+/**
+ * compact: true
+ */
+import { ActionIcon, ChatInputArea, DraggablePanel, TokenTag } from '@ant-design/pro-chat';
+import { Eraser, Languages } from 'lucide-react';
 import { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -10,7 +12,7 @@ export default () => {
   return (
     <Flexbox height={400}>
       <div style={{ flex: 1 }}></div>
-      <DraggablePanel expandable={false} fullscreen={expand} minHeight={200} placement="bottom">
+      <DraggablePanel fullscreen={expand} minHeight={200} placement="bottom">
         <ChatInputArea
           actions={
             <>
@@ -20,7 +22,6 @@ export default () => {
             </>
           }
           expand={expand}
-          footer={<Button icon={<Icon icon={Archive} />} />}
           minHeight={200}
           onExpandChange={setExpand}
         />

src/ChatItem/components/Avatar.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import A from '@/Avatar';
+import A from '@/components/Avatar';
 
 import { useStyles } from '../style';
 import type { ChatItemProps } from '../type';

src/ChatList/HistoryDivider.tsx

@@ -3,7 +3,7 @@ import { Timer } from 'lucide-react';
 import { memo } from 'react';
 
 import Icon from '@/Icon';
-import Tag from '@/Tag';
+import Tag from '@/components/Tag';
 
 interface HistoryDividerProps {
   enable?: boolean;

src/EditableMessage/index.md

@@ -1,6 +1,6 @@
 ---
 nav: Components
-group: Chat
+group: Message
 title: EditableMessage
 description: The EditableMessage component is used to display a message that can be edited by the user. It consists of a Markdown component and an optional modal for editing the message. When the user clicks on the message, it enters editing mode and displays an input field for editing the message.
 ---

src/EditableMessageList/index.md

@@ -1,6 +1,6 @@
 ---
 nav: Components
-group: Chat
+group: Message
 title: EditableMessageList
 description: EditableMessageList is a React component that allows users to edit a list of chat messages, including their content and role. It is designed to be used in chatbot building applications.
 ---

src/Emoji/index.tsx

@@ -0,0 +1,32 @@
+import { memo } from 'react';
+
+import { DivProps } from '../types';
+
+import { useStyles } from './style';
+
+export interface EmojiProps extends DivProps {
+  /**
+   * @description The emoji character to be rendered
+   */
+  emoji: string;
+  /**
+   * @description Size of the emoji
+   * @default 40
+   */
+  size?: number;
+}
+
+const Emoji = memo<EmojiProps>(({ emoji, className, style, size = 40 }) => {
+  const { cx, styles } = useStyles();
+
+  return (
+    <div
+      className={cx(styles.container, className)}
+      style={{ fontSize: size * 0.9, height: size, width: size, ...style }}
+    >
+      {emoji}
+    </div>
+  );
+});
+
+export default Emoji;