feat: ChatInputArea

src/ChatInputArea/demos/index.tsx

@@ -0,0 +1,27 @@
+import { ActionIcon, TokenTag } from '@lobehub/ui';
+import { ChatInputActionBar, ChatInputArea, ChatSendButton } from '@yuntijs/ui';
+import { Eraser, Languages } from 'lucide-react';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => {
+  return (
+    <Flexbox style={{ height: 150, position: 'relative' }}>
+      <div style={{ flex: 1 }}></div>
+      <ChatInputArea
+        autoSize={{ minRows: 1, maxRows: 4 }}
+        bottomAddons={<ChatSendButton />}
+        topAddons={
+          <ChatInputActionBar
+            leftAddons={
+              <>
+                <ActionIcon icon={Languages} />
+                <ActionIcon icon={Eraser} />
+                <TokenTag maxValue={5000} value={1000} />
+              </>
+            }
+          />
+        }
+      />
+    </Flexbox>
+  );
+};

src/ChatInputArea/desktop/ChatInputArea.tsx

@@ -0,0 +1,104 @@
+import {
+  ChatInputAreaInner,
+  type ChatInputAreaInnerProps,
+  DraggablePanel,
+  type DraggablePanelProps,
+} from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { TextAreaRef } from 'antd/es/input/TextArea';
+import { ReactNode, forwardRef, memo } from 'react';
+
+const useStyles = createStyles(({ css }) => {
+  return {
+    container: css`
+      position: relative;
+
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      height: 100%;
+      padding-block: 12px 16px;
+      padding-inline: 0;
+    `,
+    textarea: css`
+      padding-block: 0;
+      padding-inline: 24px;
+      line-height: 1.5;
+    `,
+    textareaContainer: css`
+      position: relative;
+      flex: 1;
+    `,
+  };
+});
+
+export interface ChatInputAreaProps extends Omit<ChatInputAreaInnerProps, 'classNames'> {
+  bottomAddons?: ReactNode;
+  classNames?: DraggablePanelProps['classNames'];
+  expand?: boolean;
+  heights?: {
+    headerHeight?: number;
+    inputHeight?: number;
+    maxHeight?: number;
+    minHeight?: number;
+  };
+  onSizeChange?: DraggablePanelProps['onSizeChange'];
+  setExpand?: (expand: boolean) => void;
+  topAddons?: ReactNode;
+}
+
+const ChatInputArea = forwardRef<TextAreaRef, ChatInputAreaProps>(
+  (
+    {
+      className,
+      style,
+      classNames,
+      expand = true,
+      setExpand,
+      bottomAddons,
+      topAddons,
+      onSizeChange,
+      heights,
+      onSend,
+      ...rest
+    },
+    ref
+  ) => {
+    const { styles } = useStyles();
+
+    return (
+      <DraggablePanel
+        className={className}
+        classNames={classNames}
+        fullscreen={expand}
+        headerHeight={heights?.headerHeight}
+        maxHeight={heights?.maxHeight}
+        minHeight={heights?.minHeight}
+        onSizeChange={onSizeChange}
+        placement="bottom"
+        size={{ height: heights?.inputHeight, width: '100%' }}
+        style={{ zIndex: 10, ...style }}
+      >
+        <section className={styles.container} style={{ minHeight: heights?.minHeight }}>
+          {topAddons}
+          <div className={styles.textareaContainer}>
+            <ChatInputAreaInner
+              className={styles.textarea}
+              onSend={() => {
+                onSend?.();
+                setExpand?.(false);
+              }}
+              ref={ref}
+              type={'pure'}
+              {...rest}
+            />
+          </div>
+          {bottomAddons}
+        </section>
+      </DraggablePanel>
+    );
+  }
+);
+
+export default memo(ChatInputArea);

src/ChatInputArea/index.md

@@ -0,0 +1,14 @@
+---
+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>

src/ChatInputArea/index.tsx

@@ -0,0 +1,6 @@
+export { default as ChatInputArea, type ChatInputAreaProps } from './desktop/ChatInputArea';
+export { ChatInputActionBar, type ChatInputActionBarProps } from '@lobehub/ui';
+export { ChatInputAreaInner, type ChatInputAreaInnerProps } from '@lobehub/ui';
+export { ChatSendButton, type ChatSendButtonProps } from '@lobehub/ui';
+export { MobileChatInputArea, type MobileChatInputAreaProps } from '@lobehub/ui';
+export { MobileChatSendButton, type MobileChatSendButtonProps } from '@lobehub/ui';

src/index.ts

@@ -12,6 +12,7 @@ export * from './Tree';
 export * from './Alert';
 export * from './App';
 export * from './Card';
+export * from './ChatInputArea';
 export * from './Descriptions';
 export * from './Divider';
 export * from './Drawer';