From f89f1a9f7335e8c616dce095e0336c38fbb0e976 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sun, 22 Oct 2023 00:08:34 +0800
Subject: [PATCH] :fire: refactor: clean code

---
 src/ChatInputArea/Action.tsx                  |  64 ----
 src/ChatInputArea/Desktop.tsx                 | 133 --------
 src/ChatInputArea/demos/index.tsx             |  31 --
 src/ChatInputArea/index.md                    |  14 -
 src/ChatInputArea/index.tsx                   |  12 -
 src/ChatInputArea/style.mobile.ts             |  19 --
 src/ChatInputArea/style.ts                    |  56 ----
 src/ChatInputArea/type.ts                     |  35 --
 .../components/DraggablePanelBody.tsx         |  18 -
 .../components/DraggablePanelContainer.tsx    |  20 --
 .../components/DraggablePanelFooter.tsx       |  20 --
 .../components/DraggablePanelHeader.tsx       |  45 ---
 src/DraggablePanel/components/style.ts        |  40 ---
 src/DraggablePanel/demos/Layout.tsx           |  44 ---
 src/DraggablePanel/demos/index.tsx            |  65 ----
 src/DraggablePanel/index.md                   |  18 -
 src/DraggablePanel/index.tsx                  | 312 ------------------
 src/DraggablePanel/style.ts                   | 276 ----------------
 src/DraggablePanel/utils.ts                   |  18 -
 src/ProChat/demos/doc-mode.tsx                |   4 +-
 src/index.ts                                  |  18 -
 21 files changed, 2 insertions(+), 1260 deletions(-)
 delete mode 100644 src/ChatInputArea/Action.tsx
 delete mode 100644 src/ChatInputArea/Desktop.tsx
 delete mode 100644 src/ChatInputArea/demos/index.tsx
 delete mode 100644 src/ChatInputArea/index.md
 delete mode 100644 src/ChatInputArea/index.tsx
 delete mode 100644 src/ChatInputArea/style.mobile.ts
 delete mode 100644 src/ChatInputArea/style.ts
 delete mode 100644 src/ChatInputArea/type.ts
 delete mode 100644 src/DraggablePanel/components/DraggablePanelBody.tsx
 delete mode 100644 src/DraggablePanel/components/DraggablePanelContainer.tsx
 delete mode 100644 src/DraggablePanel/components/DraggablePanelFooter.tsx
 delete mode 100644 src/DraggablePanel/components/DraggablePanelHeader.tsx
 delete mode 100644 src/DraggablePanel/components/style.ts
 delete mode 100644 src/DraggablePanel/demos/Layout.tsx
 delete mode 100644 src/DraggablePanel/demos/index.tsx
 delete mode 100644 src/DraggablePanel/index.md
 delete mode 100644 src/DraggablePanel/index.tsx
 delete mode 100644 src/DraggablePanel/style.ts
 delete mode 100644 src/DraggablePanel/utils.ts

diff --git a/src/ChatInputArea/Action.tsx b/src/ChatInputArea/Action.tsx
deleted file mode 100644
index a4eaf7a7..00000000
--- a/src/ChatInputArea/Action.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { createStyles, useResponsive } from 'antd-style';
-import { Maximize2, Minimize2 } from 'lucide-react';
-import { ReactNode, memo, useCallback } from 'react';
-
-import ActionIcon from '@/ActionIcon';
-
-const useStyles = createStyles(({ css }) => {
-  return {
-    actionLeft: css`
-      display: flex;
-      flex: 1;
-      gap: 4px;
-      align-items: center;
-      justify-content: flex-start;
-    `,
-    actionsBar: css`
-      display: flex;
-      flex: none;
-      align-items: center;
-      justify-content: space-between;
-
-      padding: 0 16px;
-    `,
-    actionsRight: css`
-      display: flex;
-      flex: 0;
-      gap: 4px;
-      align-items: center;
-      justify-content: flex-end;
-    `,
-  };
-});
-
-export interface ActionProps {
-  /**
-   * @description Actions to be displayed in the input area
-   */
-  actions?: ReactNode;
-  actionsRight?: ReactNode;
-  expand?: boolean;
-  onExpandChange?: (expand: boolean) => void;
-}
-
-const Action = memo<ActionProps>(({ actions, actionsRight, expand, onExpandChange }) => {
-  const { styles } = useStyles();
-  const { mobile } = useResponsive();
-  const handleExpandClick = useCallback(() => {
-    if (onExpandChange) onExpandChange(!expand);
-  }, [expand]);
-
-  return (
-    <div className={styles.actionsBar}>
-      <div className={styles.actionLeft}>{actions}</div>
-      <div className={styles.actionsRight}>
-        {actionsRight}
-        {!mobile && (
-          <ActionIcon icon={expand ? Minimize2 : Maximize2} onClick={handleExpandClick} />
-        )}
-      </div>
-    </div>
-  );
-});
-
-export default Action;
diff --git a/src/ChatInputArea/Desktop.tsx b/src/ChatInputArea/Desktop.tsx
deleted file mode 100644
index 75d43b09..00000000
--- a/src/ChatInputArea/Desktop.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { Button, type InputRef } from 'antd';
-import { Loader2 } from 'lucide-react';
-import { CSSProperties, forwardRef, useCallback, useRef } from 'react';
-import useControlledState from 'use-merge-value';
-
-import Icon from '@/Icon';
-import { TextArea, type TextAreaProps } from '@/components/Input';
-
-import Action from './Action';
-import { useStyles } from './style';
-import type { ChatInputBase } from './type';
-
-export type ChatInputAreaDesktop = ChatInputBase &
-  TextAreaProps & {
-    minHeight?: number;
-    textareaClassName?: string;
-    textareaId?: string;
-    textareaStyle?: CSSProperties;
-  };
-
-const ChatInputArea = forwardRef<InputRef, ChatInputAreaDesktop>(
-  (
-    {
-      text,
-      textareaClassName,
-      style,
-      textareaStyle,
-      minHeight = 200,
-      className,
-      actions,
-      footer,
-      expand,
-      placeholder = 'Type something to chat...',
-      onExpandChange,
-      onSend,
-      defaultValue = '',
-      loading,
-      disabled,
-      onInputChange,
-      onPressEnter,
-      onCompositionStart,
-      onCompositionEnd,
-      onBlur,
-      onChange,
-      textareaId = 'lobe-chat-input-area',
-      actionsRight,
-      onStop,
-      value,
-      ...props
-    },
-    ref,
-  ) => {
-    const [currentValue, setCurrentValue] = useControlledState<string>(defaultValue, {
-      defaultValue,
-      onChange: onInputChange,
-      value,
-    });
-    const { cx, styles } = useStyles();
-    const isChineseInput = useRef(false);
-
-    const handleSend = useCallback(() => {
-      if (loading && disabled) return;
-      if (onSend) onSend(currentValue);
-      setCurrentValue('');
-    }, [disabled, currentValue]);
-
-    return (
-      <section className={cx(styles.container, className)} style={{ minHeight, ...style }}>
-        <Action
-          actions={actions}
-          actionsRight={actionsRight}
-          expand={expand}
-          onExpandChange={onExpandChange}
-        />
-        <div className={styles.textareaContainer}>
-          <TextArea
-            className={cx(styles.textarea, textareaClassName)}
-            defaultValue={defaultValue}
-            id={textareaId}
-            ref={ref}
-            style={textareaStyle}
-            {...props}
-            onBlur={(e) => {
-              if (onBlur) onBlur(e);
-              setCurrentValue(e.target.value);
-            }}
-            onChange={(e) => {
-              if (onChange) onChange(e);
-              setCurrentValue(e.target.value);
-            }}
-            onCompositionEnd={(e) => {
-              if (onCompositionEnd) onCompositionEnd(e);
-              isChineseInput.current = false;
-            }}
-            onCompositionStart={(e) => {
-              if (onCompositionStart) onCompositionStart(e);
-              isChineseInput.current = true;
-            }}
-            onPressEnter={(e) => {
-              if (onPressEnter) onPressEnter(e);
-              if (!loading && !e.shiftKey && !isChineseInput.current) {
-                e.preventDefault();
-                handleSend();
-              }
-            }}
-            placeholder={placeholder}
-            resize={false}
-            type="pure"
-            value={currentValue}
-          />
-        </div>
-        <div className={styles.footerBar}>
-          {footer}
-          {loading ? (
-            <Button
-              disabled={disabled}
-              icon={loading && <Icon icon={Loader2} spin />}
-              onClick={onStop}
-            >
-              {text?.stop || 'Stop'}
-            </Button>
-          ) : (
-            <Button disabled={disabled} onClick={handleSend} type={'primary'}>
-              {text?.send || 'Send'}
-            </Button>
-          )}
-        </div>
-      </section>
-    );
-  },
-);
-
-export default ChatInputArea;
diff --git a/src/ChatInputArea/demos/index.tsx b/src/ChatInputArea/demos/index.tsx
deleted file mode 100644
index df34889d..00000000
--- a/src/ChatInputArea/demos/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * 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';
-
-export default () => {
-  const [expand, setExpand] = useState<boolean>(false);
-
-  return (
-    <Flexbox height={400}>
-      <div style={{ flex: 1 }}></div>
-      <DraggablePanel fullscreen={expand} minHeight={200} placement="bottom">
-        <ChatInputArea
-          actions={
-            <>
-              <ActionIcon icon={Languages} />
-              <ActionIcon icon={Eraser} />
-              <TokenTag maxValue={5000} value={1000} />
-            </>
-          }
-          expand={expand}
-          minHeight={200}
-          onExpandChange={setExpand}
-        />
-      </DraggablePanel>
-    </Flexbox>
-  );
-};
diff --git a/src/ChatInputArea/index.md b/src/ChatInputArea/index.md
deleted file mode 100644
index e5fa4416..00000000
--- a/src/ChatInputArea/index.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-nav: Components
-group: Chat
-title: ChatInputArea
-description: The ChatInputArea component is used to display a chat input area with expandable and collapsible feature, and a send button to submit the chat message. It can be customized with actions and footer, and also supports input value change and composition event for Chinese input.
----
-
-## Default
-
-<code src="./demos/index.tsx" nopadding></code>
-
-## APIs
-
-<API></API>
diff --git a/src/ChatInputArea/index.tsx b/src/ChatInputArea/index.tsx
deleted file mode 100644
index ed176ab4..00000000
--- a/src/ChatInputArea/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { type InputRef } from 'antd';
-import { forwardRef } from 'react';
-
-import Desktop, { ChatInputAreaDesktop } from './Desktop';
-
-export type ChatInputAreaProps = ChatInputAreaDesktop;
-
-const ChatInputArea = forwardRef<InputRef, ChatInputAreaProps>((props, ref) => (
-  <Desktop ref={ref} {...props} />
-));
-
-export default ChatInputArea;
diff --git a/src/ChatInputArea/style.mobile.ts b/src/ChatInputArea/style.mobile.ts
deleted file mode 100644
index cfe44042..00000000
--- a/src/ChatInputArea/style.mobile.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
-
-export const useStyles = createStyles(({ css, token }) => {
-  return {
-    container: css`
-      padding: 12px 0;
-      background: ${token.colorBgLayout};
-      border-top: 1px solid ${rgba(token.colorBorder, 0.25)};
-    `,
-    inner: css`
-      padding: 0 16px;
-    `,
-    input: css`
-      background: ${token.colorFillSecondary} !important;
-      border: none !important;
-    `,
-  };
-});
diff --git a/src/ChatInputArea/style.ts b/src/ChatInputArea/style.ts
deleted file mode 100644
index 0a90a10c..00000000
--- a/src/ChatInputArea/style.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { createStyles } from 'antd-style';
-
-export const useStyles = createStyles(({ css }) => {
-  return {
-    actionLeft: css`
-      display: flex;
-      flex: 1;
-      gap: 4px;
-      align-items: center;
-      justify-content: flex-start;
-    `,
-    actionsBar: css`
-      display: flex;
-      flex: none;
-      align-items: center;
-      justify-content: space-between;
-
-      padding: 0 16px;
-    `,
-    actionsRight: css`
-      display: flex;
-      flex: 0;
-      gap: 4px;
-      align-items: center;
-      justify-content: flex-end;
-    `,
-    container: css`
-      position: relative;
-
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-
-      height: 100%;
-      padding: 12px 0 16px;
-    `,
-    footerBar: css`
-      display: flex;
-      flex: none;
-      gap: 8px;
-      align-items: center;
-      justify-content: flex-end;
-
-      padding: 0 24px;
-    `,
-    textarea: css`
-      height: 100% !important;
-      padding: 0 24px;
-      line-height: 1.5;
-    `,
-    textareaContainer: css`
-      position: relative;
-      flex: 1;
-    `,
-  };
-});
diff --git a/src/ChatInputArea/type.ts b/src/ChatInputArea/type.ts
deleted file mode 100644
index 61a458ca..00000000
--- a/src/ChatInputArea/type.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ReactNode } from 'react';
-
-import { ActionProps } from '@/ChatInputArea/Action';
-
-export interface ChatInputBase extends ActionProps {
-  /**
-   * @description Default value for the input area
-   */
-  defaultValue?: string;
-  /**
-   * @description Footer content to be displayed below the input area
-   */
-  footer?: ReactNode;
-  /**
-   * @description Whether the input area is in loading state
-   * @default false
-   */
-  loading?: boolean;
-  /**
-   * @description Callback function when the input value changes
-   * @param value - The current value of the input area
-   */
-  onInputChange?: (value: string) => void;
-  /**
-   * @description Callback function when the send button is clicked
-   * @param value - The current value of the input area
-   */
-  onSend?: (value: string) => void;
-  onStop?: () => void;
-  text?: {
-    send?: string;
-    stop?: string;
-  };
-  value?: string;
-}
diff --git a/src/DraggablePanel/components/DraggablePanelBody.tsx b/src/DraggablePanel/components/DraggablePanelBody.tsx
deleted file mode 100644
index 9e8c1630..00000000
--- a/src/DraggablePanel/components/DraggablePanelBody.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { memo } from 'react';
-
-import { type DivProps } from '@/types';
-
-import { useStyles } from './style';
-
-export type DraggablePanelBodyProps = DivProps;
-
-const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, children, ...props }) => {
-  const { cx, styles } = useStyles();
-  return (
-    <div className={cx(styles.body, className)} {...props}>
-      {children}
-    </div>
-  );
-});
-
-export default DraggablePanelBody;
diff --git a/src/DraggablePanel/components/DraggablePanelContainer.tsx b/src/DraggablePanel/components/DraggablePanelContainer.tsx
deleted file mode 100644
index 0a4b7118..00000000
--- a/src/DraggablePanel/components/DraggablePanelContainer.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { memo } from 'react';
-
-import { type DivProps } from '@/types';
-
-import { useStyles } from './style';
-
-export type DraggablePanelContainerProps = DivProps;
-
-const DraggablePanelContainer = memo<DraggablePanelContainerProps>(
-  ({ className, children, ...props }) => {
-    const { cx, styles } = useStyles();
-    return (
-      <div className={cx(styles.container, className)} {...props}>
-        {children}
-      </div>
-    );
-  },
-);
-
-export default DraggablePanelContainer;
diff --git a/src/DraggablePanel/components/DraggablePanelFooter.tsx b/src/DraggablePanel/components/DraggablePanelFooter.tsx
deleted file mode 100644
index 41d02e06..00000000
--- a/src/DraggablePanel/components/DraggablePanelFooter.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { memo } from 'react';
-
-import { type DivProps } from '@/types';
-
-import { useStyles } from './style';
-
-export type DraggablePanelFooterProps = DivProps;
-
-const DraggablePanelFooter = memo<DraggablePanelFooterProps>(
-  ({ className, children, ...props }) => {
-    const { cx, styles } = useStyles();
-    return (
-      <div className={cx(styles.footer, className)} {...props}>
-        {children}
-      </div>
-    );
-  },
-);
-
-export default DraggablePanelFooter;
diff --git a/src/DraggablePanel/components/DraggablePanelHeader.tsx b/src/DraggablePanel/components/DraggablePanelHeader.tsx
deleted file mode 100644
index ea44496b..00000000
--- a/src/DraggablePanel/components/DraggablePanelHeader.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { ActionIcon } from '@ant-design/pro-chat';
-import { PanelLeft, Pin, PinOff } from 'lucide-react';
-import { memo } from 'react';
-
-import { type DivProps } from '@/types';
-
-import { useStyles } from './style';
-
-export interface DraggablePanelHeaderProps extends DivProps {
-  pin: boolean;
-  position?: 'left' | 'right';
-  setExpand: (expand: boolean) => void;
-  setPin: (pin: boolean) => void;
-  title: string;
-}
-
-const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(
-  ({ pin, setPin, className, setExpand, title, position = 'left', ...props }) => {
-    const { cx, styles } = useStyles();
-    const panelIcon = (
-      <ActionIcon
-        icon={PanelLeft}
-        onClick={() => setExpand(false)}
-        size={{ blockSize: 24, fontSize: 14 }}
-      />
-    );
-    const pinIcon = (
-      <ActionIcon
-        active={pin}
-        icon={pin ? Pin : PinOff}
-        onClick={() => setPin(!pin)}
-        size={{ blockSize: 24, fontSize: 14 }}
-      />
-    );
-    return (
-      <div className={cx(styles.header, className)} {...props}>
-        {position === 'left' ? panelIcon : pinIcon}
-        {title}
-        {position === 'left' ? pinIcon : panelIcon}
-      </div>
-    );
-  },
-);
-
-export default DraggablePanelHeader;
diff --git a/src/DraggablePanel/components/style.ts b/src/DraggablePanel/components/style.ts
deleted file mode 100644
index 6bd1d681..00000000
--- a/src/DraggablePanel/components/style.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { createStyles } from 'antd-style';
-
-export const useStyles = createStyles(({ css, token }) => ({
-  body: css`
-    overflow-x: hidden;
-    overflow-y: auto;
-    flex: 1;
-    padding: 16px;
-  `,
-  container: css`
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  `,
-  footer: css`
-    display: flex;
-    flex: 0;
-    gap: 8px;
-    align-items: center;
-    justify-content: flex-start;
-
-    padding: 8px 16px;
-
-    border-top: 1px solid ${token.colorBorderSecondary};
-  `,
-  header: css`
-    display: flex;
-    flex: 0;
-    gap: 8px;
-    align-items: center;
-    justify-content: space-between;
-
-    padding: 8px 16px;
-
-    font-weight: 500;
-
-    border-bottom: 1px solid ${token.colorBorderSecondary};
-  `,
-}));
diff --git a/src/DraggablePanel/demos/Layout.tsx b/src/DraggablePanel/demos/Layout.tsx
deleted file mode 100644
index 110493ce..00000000
--- a/src/DraggablePanel/demos/Layout.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import {
-  DraggablePanel,
-  DraggablePanelBody,
-  DraggablePanelContainer,
-  DraggablePanelFooter,
-  DraggablePanelHeader,
-} from '@ant-design/pro-chat';
-import { useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-export default () => {
-  const [expand, setExpand] = useState(true);
-  const [pin, setPin] = useState(true);
-  return (
-    <Flexbox style={{ minHeight: 500 }} width={'100%'} height={'100%'}>
-      <DraggablePanel
-        expand={expand}
-        mode={pin ? 'fixed' : 'float'}
-        onExpandChange={setExpand}
-        pin={pin}
-        placement="left"
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        <DraggablePanelContainer style={{ flex: 1 }}>
-          <DraggablePanelHeader
-            pin={pin}
-            position="left"
-            setExpand={setExpand}
-            setPin={setPin}
-            title="Header"
-          />
-          <DraggablePanelBody>DraggablePanel</DraggablePanelBody>
-          <DraggablePanelFooter>Footer</DraggablePanelFooter>
-        </DraggablePanelContainer>
-      </DraggablePanel>
-      <Flexbox padding={24} style={{ flex: 1 }}>
-        Content
-      </Flexbox>
-    </Flexbox>
-  );
-};
diff --git a/src/DraggablePanel/demos/index.tsx b/src/DraggablePanel/demos/index.tsx
deleted file mode 100644
index 11350612..00000000
--- a/src/DraggablePanel/demos/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { DraggablePanel, DraggablePanelProps } from '@ant-design/pro-chat';
-import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
-import { Flexbox } from 'react-layout-kit';
-
-export default () => {
-  const store = useCreateStore();
-  const control: DraggablePanelProps | any = useControls(
-    {
-      defaultExpand: true,
-      destroyOnClose: false,
-      expandable: true,
-      minHeight: {
-        step: 1,
-        value: 0,
-      },
-      minWidth: {
-        step: 1,
-        value: 0,
-      },
-      mode: {
-        options: ['fixed', 'float'],
-        value: 'fixed',
-      },
-      pin: true,
-      placement: {
-        options: ['left', 'right', 'top', 'bottom'],
-        value: 'left',
-      },
-      showHandlerWhenUnexpand: false,
-    },
-    { store },
-  );
-
-  return (
-    <StoryBook levaStore={store} noPadding>
-      <Flexbox
-        style={
-          ['top', 'bottom'].includes(control.placement)
-            ? { flexDirection: 'column', position: 'relative' }
-            : { position: 'relative' }
-        }
-      >
-        {['top', 'left'].includes(control.placement) ? (
-          <>
-            <DraggablePanel {...control}>
-              <Flexbox padding={24}>Draggable Panel</Flexbox>
-            </DraggablePanel>
-            <Flexbox padding={24} style={{ flex: 1 }}>
-              Content
-            </Flexbox>
-          </>
-        ) : (
-          <>
-            <Flexbox padding={24} style={{ flex: 1 }}>
-              Content
-            </Flexbox>
-            <DraggablePanel {...control}>
-              <Flexbox padding={24}>Draggable Panel</Flexbox>
-            </DraggablePanel>
-          </>
-        )}
-      </Flexbox>
-    </StoryBook>
-  );
-};
diff --git a/src/DraggablePanel/index.md b/src/DraggablePanel/index.md
deleted file mode 100644
index 0b29f4b3..00000000
--- a/src/DraggablePanel/index.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-nav: Components
-group: Layout
-title: DraggablePanel
-description: DraggablePanel is a panel that can be dragged and resized. It supports pinning, fixed or floating mode, placement in four directions, minimum width and height, expandable or not, default and customizable size, and destroy on close. It also provides a handler for expanding and collapsing the panel.
----
-
-## Default
-
-<code src="./demos/index.tsx" noPadding></code>
-
-## Layout
-
-<code src="./demos/Layout.tsx" noPadding></code>
-
-## APIs
-
-<API></API>
diff --git a/src/DraggablePanel/index.tsx b/src/DraggablePanel/index.tsx
deleted file mode 100644
index 3132e593..00000000
--- a/src/DraggablePanel/index.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-import { useHover } from 'ahooks';
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';
-import type { Enable, NumberSize, Size } from 're-resizable';
-import { HandleClassName, Resizable } from 're-resizable';
-import { memo, useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
-import { Center } from 'react-layout-kit';
-import type { Props as RndProps } from 'react-rnd';
-import useControlledState from 'use-merge-value';
-
-import { DivProps } from '@/types';
-
-import { useStyles } from './style';
-import { revesePlacement } from './utils';
-
-const DEFAULT_HEIGHT = 180;
-const DEFAULT_WIDTH = 280;
-
-export type placementType = 'right' | 'left' | 'top' | 'bottom';
-
-export interface DraggablePanelProps extends DivProps {
-  /**
-   * @title The class name for the content and handle component
-   */
-  classNames?: {
-    content?: string;
-    handle?: string;
-  };
-  /**
-   * @description The default expand state of the panel
-   * @default true
-   */
-  defaultExpand?: boolean;
-  /**
-   * @description The default size of the panel
-   */
-  defaultSize?: Partial<Size>;
-  /**
-   * @description Whether the panel should be destroyed when closed or not
-   * @default false
-   */
-  destroyOnClose?: boolean;
-  /**
-   * @description Whether the panel is expanded or not
-   */
-  expand?: boolean;
-  /**
-   * @description Whether the panel is expandable or not
-   * @default true
-   */
-  expandable?: boolean;
-  fullscreen?: boolean;
-  /**
-   * @description The style of the panel handler
-   * @type CSSProperties
-   */
-  hanlderStyle?: CSSProperties;
-  headerHeight?: number;
-  maxHeight?: number;
-  maxWidth?: number;
-  /**
-   * @description The minimum height of the panel
-   */
-  minHeight?: number;
-  /**
-   * @description The minimum width of the panel
-   */
-  minWidth?: number;
-  /**
-   * @description The mode of the panel, fixed or float
-   * @default 'fixed'
-   */
-  mode?: 'fixed' | 'float';
-  /**
-   * @description Callback function when the expand state of the panel changes
-   */
-  onExpandChange?: (expand: boolean) => void;
-  /**
-   * @description Callback function when the size of the panel changes
-   */
-  onSizeChange?: (delta: NumberSize, size?: Size) => void;
-  /**
-   * @description Callback function when the panel is being resized
-   */
-  onSizeDragging?: (delta: NumberSize, size?: Size) => void;
-  /**
-   * @description Whether the panel can be pinned or not
-   * @default true
-   */
-  pin?: boolean;
-  /**
-   * @description The placement of the panel, right, left, top or bottom
-   * @default 'right'
-   */
-  placement: placementType;
-  /**
-   * @description Whether the panel can be resized or not
-   * @default true
-   */
-  resize?: RndProps['enableResizing'];
-  /**
-   * @description Whether the panel handler should be shown when unexpanded or not
-   * @default true
-   */
-  showHandlerWhenUnexpand?: boolean;
-  /**
-   * @description The size of the panel
-   */
-  size?: Partial<Size>;
-}
-
-const DraggablePanel = memo<DraggablePanelProps>(
-  ({
-    headerHeight = 0,
-    fullscreen,
-    maxHeight,
-    pin = true,
-    mode = 'fixed',
-    children,
-    placement = 'right',
-    resize,
-    style,
-    size,
-    defaultSize: customizeDefaultSize,
-    minWidth,
-    minHeight,
-    maxWidth,
-    onSizeChange,
-    onSizeDragging,
-    expandable = true,
-    expand,
-    defaultExpand = true,
-    onExpandChange,
-    className,
-    showHandlerWhenUnexpand,
-    destroyOnClose,
-    hanlderStyle,
-    classNames = {},
-  }) => {
-    const reference: any = useRef();
-    const isHovering = useHover(reference);
-    const isVertical = placement === 'top' || placement === 'bottom';
-
-    const { styles, cx } = useStyles(headerHeight);
-
-    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {
-      onChange: onExpandChange,
-      value: expand,
-    });
-
-    useEffect(() => {
-      if (pin) return;
-
-      if (isHovering && !isExpand) {
-        setIsExpand(true);
-      } else if (!isHovering && isExpand) {
-        setIsExpand(false);
-      }
-    }, [pin, isHovering, isExpand]);
-
-    const [showExpand, setShowExpand] = useState(true);
-    const [isResizing, setIsResizing] = useState(false);
-    const canResizing = resize !== false && isExpand;
-
-    const resizeHandleClassNames: HandleClassName = useMemo(() => {
-      if (!canResizing) return {};
-
-      return {
-        [revesePlacement(placement)]: styles[`${revesePlacement(placement)}Handle`],
-      };
-    }, [canResizing, placement]);
-
-    const resizing = {
-      bottom: false,
-      bottomLeft: false,
-      bottomRight: false,
-      left: false,
-      right: false,
-      top: false,
-      topLeft: false,
-      topRight: false,
-      [revesePlacement(placement)]: true,
-      ...(resize as Enable),
-    };
-
-    const defaultSize: Size = useMemo(() => {
-      if (isVertical)
-        return {
-          height: DEFAULT_HEIGHT,
-          width: '100%',
-          ...customizeDefaultSize,
-        };
-
-      return {
-        height: '100%',
-        width: DEFAULT_WIDTH,
-        ...customizeDefaultSize,
-      };
-    }, [isVertical]);
-
-    const sizeProps = isExpand
-      ? {
-          defaultSize,
-          maxHeight: typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : maxHeight,
-          maxWidth: typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : maxWidth,
-          minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : minHeight,
-          minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : minWidth,
-          size: size as Size,
-        }
-      : isVertical
-      ? {
-          minHeight: 0,
-          size: { height: 0 },
-        }
-      : {
-          minWidth: 0,
-          size: { width: 0 },
-        };
-
-    const { Arrow, className: arrowPlacement } = useMemo(() => {
-      switch (placement) {
-        case 'top': {
-          return { Arrow: ChevronDown, className: 'Bottom' };
-        }
-        case 'bottom': {
-          return { Arrow: ChevronUp, className: 'Top' };
-        }
-        case 'right': {
-          return { Arrow: ChevronLeft, className: 'Left' };
-        }
-        case 'left': {
-          return { Arrow: ChevronRight, className: 'Right' };
-        }
-      }
-    }, [styles, placement]);
-
-    const handler = (
-      <Center
-        // @ts-ignore
-        className={cx(styles[`toggle${arrowPlacement}`], classNames.handle)}
-        style={{ opacity: isExpand ? (pin ? undefined : 0) : showHandlerWhenUnexpand ? 1 : 0 }}
-      >
-        <Center
-          onClick={() => {
-            setIsExpand(!isExpand);
-          }}
-          style={hanlderStyle}
-        >
-          <div
-            className={styles.handlerIcon}
-            style={{ transform: `rotate(${isExpand ? 180 : 0}deg)` }}
-          >
-            <Arrow size={16} strokeWidth={1.5} />
-          </div>
-        </Center>
-      </Center>
-    );
-
-    const inner = (
-      // @ts-ignore
-      <Resizable
-        {...sizeProps}
-        className={cx(styles.panel, classNames.content)}
-        enable={canResizing ? (resizing as Enable) : undefined}
-        handleClasses={resizeHandleClassNames}
-        onResize={(_, direction, reference_, delta) => {
-          onSizeDragging?.(delta, {
-            height: reference_.style.height,
-            width: reference_.style.width,
-          });
-        }}
-        onResizeStart={() => {
-          setIsResizing(true);
-          setShowExpand(false);
-        }}
-        onResizeStop={(e, direction, reference_, delta) => {
-          setIsResizing(false);
-          setShowExpand(true);
-          onSizeChange?.(delta, {
-            height: reference_.style.height,
-            width: reference_.style.width,
-          });
-        }}
-        style={{
-          transition: isResizing ? 'unset' : undefined,
-          ...style,
-        }}
-      >
-        {children}
-      </Resizable>
-    );
-
-    if (fullscreen) return <div className={cx(styles.fullscreen, className)}>{children}</div>;
-
-    return (
-      <aside
-        className={cx(
-          styles.container,
-          // @ts-ignore
-          styles[mode === 'fixed' ? 'fixed' : `${placement}Float`],
-          className,
-        )}
-        ref={reference}
-        style={isExpand ? { [`border${arrowPlacement}Width`]: 1 } : {}}
-      >
-        {expandable && showExpand && handler}
-        {destroyOnClose ? isExpand && inner : inner}
-      </aside>
-    );
-  },
-);
-
-export default DraggablePanel;
diff --git a/src/DraggablePanel/style.ts b/src/DraggablePanel/style.ts
deleted file mode 100644
index e095b244..00000000
--- a/src/DraggablePanel/style.ts
+++ /dev/null
@@ -1,276 +0,0 @@
-import { createStyles, css, cx } from 'antd-style';
-
-const offset = 16;
-const toggleLength = 40;
-const toggleShort = 16;
-const prefix = 'draggable-panel';
-
-export const useStyles = createStyles(({ token }, headerHeight: number) => {
-  const commonHandle = css`
-    position: relative;
-
-    &::before {
-      content: '';
-      position: absolute;
-      z-index: 50;
-      transition: all 0.2s ${token.motionEaseOut};
-    }
-
-    &:hover,
-    &:active {
-      &::before {
-        background: ${token.colorPrimary} !important;
-      }
-    }
-  `;
-
-  const commonToggle = css`
-    position: absolute;
-    z-index: 101;
-    opacity: 0;
-    transition: all 0.2s ${token.motionEaseOut};
-
-    &:hover {
-      opacity: 1 !important;
-    }
-
-    &:active {
-      opacity: 1 !important;
-    }
-
-    > div {
-      cursor: pointer;
-
-      position: absolute;
-
-      color: ${token.colorTextTertiary};
-
-      background: ${token.colorFillTertiary};
-      border-color: ${token.colorBorderSecondary};
-      border-style: solid;
-      border-width: 1px;
-      border-radius: 4px;
-
-      transition: all 0.2s ${token.motionEaseOut};
-
-      &:hover {
-        color: ${token.colorTextSecondary};
-        background: ${token.colorFillSecondary};
-      }
-
-      &:active {
-        color: ${token.colorText};
-        background: ${token.colorFill};
-      }
-    }
-  `;
-
-  const float = css`
-    position: absolute;
-    z-index: 200;
-  `;
-
-  return {
-    bottomFloat: cx(
-      float,
-      css`
-        right: 0;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-      `,
-    ),
-    bottomHandle: cx(
-      `${prefix}-bottom-handle`,
-      css`
-        ${commonHandle};
-
-        &::before {
-          bottom: 50%;
-          width: 100%;
-          height: 2px;
-        }
-      `,
-    ),
-    container: cx(
-      prefix,
-      css`
-        flex-shrink: 0;
-        border: 0 solid ${token.colorBorderSecondary};
-
-        &:hover {
-          .${prefix}-toggle {
-            opacity: 1;
-          }
-        }
-      `,
-    ),
-    fixed: css`
-      position: relative;
-    `,
-    fullscreen: css`
-      position: absolute;
-      inset: ${headerHeight}px 0 0 0;
-
-      width: 100%;
-      height: calc(100% - ${headerHeight}px);
-
-      background: ${token.colorBgLayout};
-    `,
-    handlerIcon: css`
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.2s ${token.motionEaseOut};
-    `,
-    leftFloat: cx(
-      float,
-      css`
-        top: ${headerHeight}px;
-        bottom: 0;
-        left: 0;
-        height: calc(100% - ${headerHeight}px);
-      `,
-    ),
-    leftHandle: cx(
-      css`
-        ${commonHandle};
-
-        &::before {
-          left: 50%;
-          width: 2px;
-          height: 100%;
-        }
-      `,
-      `${prefix}-left-handle`,
-    ),
-    panel: cx(
-      `${prefix}-fixed`,
-      css`
-        overflow: hidden;
-        transition: all 0.2s ${token.motionEaseOut};
-      `,
-    ),
-    rightFloat: cx(
-      float,
-      css`
-        top: ${headerHeight}px;
-        right: 0;
-        bottom: 0;
-        height: calc(100% - ${headerHeight}px);
-      `,
-    ),
-    rightHandle: cx(
-      css`
-        ${commonHandle};
-        &::before {
-          right: 50%;
-          width: 2px;
-          height: 100%;
-        }
-      `,
-      `${prefix}-right-handle`,
-    ),
-    toggleBottom: cx(
-      `${prefix}-toggle`,
-      `${prefix}-toggle-bottom`,
-      commonToggle,
-      css`
-        bottom: -${offset}px;
-        width: 100%;
-        height: ${toggleShort}px;
-
-        > div {
-          left: 50%;
-
-          width: ${toggleLength}px;
-          height: 16px;
-          margin-left: -20px;
-
-          border-radius: 0 0 4px 4px;
-        }
-      `,
-    ),
-    toggleLeft: cx(
-      `${prefix}-toggle`,
-      `${prefix}-toggle-left`,
-      commonToggle,
-      css`
-        left: -${offset}px;
-        width: ${toggleShort}px;
-        height: 100%;
-
-        > div {
-          top: 50%;
-
-          width: ${toggleShort}px;
-          height: ${toggleLength}px;
-          margin-top: -20px;
-
-          border-radius: 4px 0 0 4px;
-        }
-      `,
-    ),
-    toggleRight: cx(
-      `${prefix}-toggle`,
-      `${prefix}-toggle-right`,
-      commonToggle,
-      css`
-        right: -${offset}px;
-        width: ${toggleShort}px;
-        height: 100%;
-
-        > div {
-          top: 50%;
-
-          width: ${toggleShort}px;
-          height: ${toggleLength}px;
-          margin-top: -20px;
-
-          border-radius: 0 4px 4px 0;
-        }
-      `,
-    ),
-    toggleTop: cx(
-      `${prefix}-toggle`,
-      `${prefix}-toggle-top`,
-      commonToggle,
-      css`
-        top: -${offset}px;
-        width: 100%;
-        height: ${toggleShort}px;
-
-        > div {
-          left: 50%;
-
-          width: ${toggleLength}px;
-          height: ${toggleShort}px;
-          margin-left: -20px;
-
-          border-radius: 4px 4px 0 0;
-        }
-      `,
-    ),
-    topFloat: cx(
-      float,
-      css`
-        top: ${headerHeight}px;
-        right: 0;
-        left: 0;
-        width: 100%;
-      `,
-    ),
-    topHandle: cx(
-      `${prefix}-top-handle`,
-      css`
-        ${commonHandle};
-
-        &::before {
-          top: 50%;
-          width: 100%;
-          height: 2px;
-        }
-      `,
-    ),
-  };
-});
diff --git a/src/DraggablePanel/utils.ts b/src/DraggablePanel/utils.ts
deleted file mode 100644
index fb47b149..00000000
--- a/src/DraggablePanel/utils.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { placementType } from './index';
-
-export const revesePlacement = (placement: placementType) => {
-  switch (placement) {
-    case 'bottom': {
-      return 'top';
-    }
-    case 'top': {
-      return 'bottom';
-    }
-    case 'right': {
-      return 'left';
-    }
-    case 'left': {
-      return 'right';
-    }
-  }
-};
diff --git a/src/ProChat/demos/doc-mode.tsx b/src/ProChat/demos/doc-mode.tsx
index 5589c572..b35fdca1 100644
--- a/src/ProChat/demos/doc-mode.tsx
+++ b/src/ProChat/demos/doc-mode.tsx
@@ -2,11 +2,11 @@
  * iframe: 800
  */
 import { ProChat } from '@ant-design/pro-chat';
-
-import { MockResponse } from '@/ProChat/mocks/streamResponse';
 import { useTheme } from 'antd-style';
 import { Flexbox } from 'react-layout-kit';
+
 import { example } from '../mocks/fullFeature';
+import { MockResponse } from '../mocks/streamResponse';
 
 export default () => {
   const theme = useTheme();
diff --git a/src/index.ts b/src/index.ts
index f1db7866..1af9a8cf 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,6 @@
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
 export { default as ActionIconGroup, type ActionIconGroupProps } from './ActionIconGroup';
 export { default as BackBottom, type BackBottomProps } from './BackBottom';
-export { default as ChatInputArea, type ChatInputAreaProps } from './ChatInputArea';
 export { default as ChatItem, type ChatItemProps } from './ChatItem';
 export { default as ChatList } from './ChatList';
 export type {
@@ -17,23 +16,6 @@ export type {
 export { default as ActionsBar, type ActionsBarProps } from './ChatList/ActionsBar';
 export * from './ProChat';
 
-export { default as DraggablePanel, type DraggablePanelProps } from './DraggablePanel';
-export {
-  default as DraggablePanelBody,
-  type DraggablePanelBodyProps,
-} from './DraggablePanel/components/DraggablePanelBody';
-export {
-  default as DraggablePanelContainer,
-  type DraggablePanelContainerProps,
-} from './DraggablePanel/components/DraggablePanelContainer';
-export {
-  default as DraggablePanelFooter,
-  type DraggablePanelFooterProps,
-} from './DraggablePanel/components/DraggablePanelFooter';
-export {
-  default as DraggablePanelHeader,
-  type DraggablePanelHeaderProps,
-} from './DraggablePanel/components/DraggablePanelHeader';
 export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
 export {
   default as EditableMessageList,