@connectycube/react-ui-kit 0.0.22 → 0.1.2

package/gen/components/linkify-text.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import * as React from 'react';
 import Linkify from 'linkify-react';
 import { cn } from './utils';
 
@@ -21,8 +21,8 @@ function LinkifyTextBase(
   },
   ref
 ) {
-  const pendingRef = useRef(pending);
-  const options = useMemo(
+  const pendingRef = React.useRef(pending);
+  const options = React.useMemo(
     () => ({
       ...DEFAULT_LINKIFY_OPTIONS,
       ...linkifyProps,
@@ -31,7 +31,7 @@ function LinkifyTextBase(
     [linkifyProps]
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (pendingRef.current && !pending) {
       onReady();
     }
@@ -63,7 +63,7 @@ function LinkifyTextBase(
   );
 }
 
-const LinkifyText = memo(forwardRef(LinkifyTextBase));
+const LinkifyText = React.memo(React.forwardRef(LinkifyTextBase));
 
 LinkifyText.displayName = 'LinkifyText';
 

package/gen/components/placeholder-text.jsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { forwardRef } from 'react';
 import { cn } from './utils';
 
 function PlaceholderTextBase({ title, titles = [], rowProps, ...props }, ref) {
@@ -24,7 +23,7 @@ function PlaceholderTextBase({ title, titles = [], rowProps, ...props }, ref) {
   );
 }
 
-const PlaceholderText = forwardRef(PlaceholderTextBase);
+const PlaceholderText = React.forwardRef(PlaceholderTextBase);
 
 PlaceholderText.displayName = 'PlaceholderText';
 

package/gen/components/presence.jsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { capitalize, cn } from './utils';
 
 function PresenceBadge({ status, ...props }) {

package/gen/components/quick-actions.jsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import * as React from 'react';
 import { cn } from './utils';
 
 function QuickActionsBase(
@@ -55,7 +55,7 @@ function QuickActionsBase(
   );
 }
 
-const QuickActions = forwardRef(QuickActionsBase);
+const QuickActions = React.forwardRef(QuickActionsBase);
 
 QuickActions.displayName = 'QuickActions';
 

package/gen/components/search.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, useState } from 'react';
+import * as React from 'react';
 import { cn } from './utils';
 import { Input } from './input';
 import { Search as SearchIcon, X as CloseIcon } from 'lucide-react';
@@ -16,7 +16,7 @@ function SearchBase(
   },
   ref
 ) {
-  const [value, setValue] = useState('');
+  const [value, setValue] = React.useState('');
   const handleOnSearch = (e) => {
     const keyword = e.target.value;
 
@@ -68,7 +68,7 @@ function SearchBase(
   );
 }
 
-const Search = forwardRef(SearchBase);
+const Search = React.forwardRef(SearchBase);
 
 Search.displayName = 'Search';
 

package/gen/components/spinner.jsx

@@ -1,7 +1,8 @@
+import * as React from 'react';
 import { Loader, LoaderCircle } from 'lucide-react';
 import { cn } from './utils';
 
-function Spinner({ loading = false, layout = 'flow', type = 'default', ...props }) {
+const Spinner = ({ loading = false, layout = 'flow', type = 'default', ...props }) => {
   const LoaderIcon = type === 'circle' ? LoaderCircle : Loader;
 
   if (!loading) {
@@ -29,7 +30,7 @@ function Spinner({ loading = false, layout = 'flow', type = 'default', ...props
     default:
       return spinnerElement;
   }
-}
+};
 
 Spinner.displayName = 'Spinner';
 

package/gen/components/status-call.jsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Phone, PhoneIncoming, PhoneMissed, PhoneOutgoing } from 'lucide-react';
 import { cn } from './utils';
 

package/gen/components/status-indicator.jsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cn } from './utils';
 
@@ -62,7 +62,7 @@ function StatusIndicatorBase(
   );
 }
 
-const StatusIndicator = forwardRef(StatusIndicatorBase);
+const StatusIndicator = React.forwardRef(StatusIndicatorBase);
 
 StatusIndicator.displayName = 'StatusIndicator';
 

package/gen/components/status-sent.jsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Ban, Check, CheckCheck, Clock } from 'lucide-react';
 import { cn } from './utils';
 

package/gen/components/stream-view.jsx

@@ -1,17 +1,17 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import * as React from 'react';
 import { Maximize, Minimize, PictureInPicture2 } from 'lucide-react';
 import { cn, getRandomString } from './utils';
 
 function StreamViewBase({ id, stream, mirror, className, muted, ...props }, ref) {
-  const innerRef = useRef(null);
-  const elementId = useMemo(() => id ?? `stream-${getRandomString()}`, [id]);
+  const innerRef = React.useRef(null);
+  const elementId = React.useMemo(() => id ?? `stream-${getRandomString()}`, [id]);
   const isMuted = typeof muted === 'boolean' ? muted : false;
   const defaultClassName = 'size-full object-contain';
   const mirrorClassName = mirror ? 'scale-x-[-1]' : '';
 
-  useImperativeHandle(ref, () => innerRef.current || {}, []);
+  React.useImperativeHandle(ref, () => innerRef.current || {}, []);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (innerRef.current && stream) {
       innerRef.current.srcObject = stream;
 
@@ -44,7 +44,7 @@ function StreamViewBase({ id, stream, mirror, className, muted, ...props }, ref)
   );
 }
 
-const StreamView = forwardRef(StreamViewBase);
+const StreamView = React.forwardRef(StreamViewBase);
 
 StreamView.displayName = 'StreamView';
 
@@ -55,7 +55,7 @@ function LocalStreamViewBase({ muted, mirror, ...props }, ref) {
   return <StreamView ref={ref} muted={isMuted} mirror={isMirror} {...props} />;
 }
 
-const LocalStreamView = forwardRef(LocalStreamViewBase);
+const LocalStreamView = React.forwardRef(LocalStreamViewBase);
 
 LocalStreamView.displayName = 'LocalStreamView';
 
@@ -66,7 +66,7 @@ function RemoteStreamViewBase({ muted, mirror, ...props }, ref) {
   return <StreamView ref={ref} muted={isMuted} mirror={isMirror} {...props} />;
 }
 
-const RemoteStreamView = forwardRef(RemoteStreamViewBase);
+const RemoteStreamView = React.forwardRef(RemoteStreamViewBase);
 
 RemoteStreamView.displayName = 'RemoteStreamView';
 
@@ -86,10 +86,10 @@ function FullscreenStreamViewBase(
   },
   ref
 ) {
-  const innerRef = useRef(null);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [isPictureInPicture, setIsPictureInPicture] = useState(false);
-  const toggleFullscreen = useCallback(async () => {
+  const innerRef = React.useRef(null);
+  const [isFullscreen, setIsFullscreen] = React.useState(false);
+  const [isPictureInPicture, setIsPictureInPicture] = React.useState(false);
+  const toggleFullscreen = React.useCallback(async () => {
     const container = innerRef.current;
 
     if (!container) return;
@@ -108,13 +108,13 @@ function FullscreenStreamViewBase(
       console.error('Fullscreen error:', err);
     }
   }, []);
-  const togglePictureInPicture = useCallback(() => {
+  const togglePictureInPicture = React.useCallback(() => {
     if (pipElement) {
       setIsPictureInPicture((prevState) => !prevState);
     }
   }, [pipElement]);
 
-  useImperativeHandle(
+  React.useImperativeHandle(
     ref,
     () => ({
       ...(innerRef.current || {}),
@@ -126,7 +126,7 @@ function FullscreenStreamViewBase(
     [isFullscreen, isPictureInPicture, toggleFullscreen, togglePictureInPicture]
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     const onFullscreenChange = () => {
       setIsFullscreen(!!document.fullscreenElement);
       setIsPictureInPicture(!!document.fullscreenElement);
@@ -188,7 +188,7 @@ function FullscreenStreamViewBase(
   );
 }
 
-const FullscreenStreamView = forwardRef(FullscreenStreamViewBase);
+const FullscreenStreamView = React.forwardRef(FullscreenStreamViewBase);
 
 FullscreenStreamView.displayName = 'FullscreenStreamView';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectycube/react-ui-kit",
-  "version": "0.0.22",
+  "version": "0.1.2",
   "description": "Simple React UI Kit generator with TSX/JSX",
   "homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
   "bugs": {
@@ -72,42 +72,42 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "execa": "^9.6.1",
+    "fast-glob": "^3.3.3",
+    "fs-extra": "^11.3.3",
     "linkify-react": "^4.3.2",
     "lucide-react": "^0.562.0",
+    "prettier": "^3.8.1",
+    "prompts": "^2.4.2",
     "react-intersection-observer": "^10.0.0",
     "react-textarea-autosize": "^8.5.9",
     "tailwind-merge": "^3.4.0",
-    "virtua": "^0.48.2"
+    "virtua": "^0.48.3"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.5",
+    "@babel/core": "^7.28.6",
     "@babel/preset-typescript": "^7.28.5",
     "@eslint/js": "^9.39.2",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@stylistic/eslint-plugin": "^5.6.1",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
+    "@stylistic/eslint-plugin": "^5.7.0",
+    "@types/node": "^25.0.8",
+    "@types/react": "^19.2.8",
     "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.26",
-    "execa": "^9.6.1",
-    "fast-glob": "^3.3.3",
-    "fs-extra": "^11.3.3",
-    "globals": "^16.5.0",
-    "prettier": "^3.7.4",
-    "prompts": "^2.4.2",
-    "rollup": "^4.53.5",
+    "globals": "^17.0.0",
+    "rollup": "^4.55.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.0"
+    "typescript-eslint": "^8.53.0"
   },
   "engines": {
     "node": ">=18"

package/src/components/alert-dialog.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef } from 'react';
+import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Button, type ButtonProps } from './button';
 import { cn } from './utils';
@@ -111,7 +110,7 @@ function AlertDialogBase(
   );
 }
 
-const AlertDialog = forwardRef<HTMLDivElement, AlertDialogProps>(AlertDialogBase);
+const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(AlertDialogBase);
 
 AlertDialog.displayName = 'AlertDialog';
 

package/src/components/attachment.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef, memo, useImperativeHandle, useRef, useState } from 'react';
+import * as React from 'react';
 import { File, FileXCorner, type LucideProps } from 'lucide-react';
 import { Spinner } from './spinner';
 import { cn, getRandomString } from './utils';
@@ -14,7 +13,8 @@ interface AttachmentProps {
   containerProps?: React.ComponentProps<'div'>;
 }
 
-interface AttachmentLinkProps extends React.ComponentProps<'a'>, Omit<AttachmentProps, 'containerProps' & 'mimeType'> {}
+interface AttachmentLinkProps
+  extends React.ComponentProps<'a'>, Omit<AttachmentProps, 'url' & 'containerProps' & 'mimeType'> {}
 
 interface AttachmentImageProps
   extends React.ComponentProps<'img'>, Omit<AttachmentProps, 'containerProps' & 'mimeType'> {}
@@ -36,7 +36,7 @@ interface AttachmentFailedProps extends LucideProps, Omit<AttachmentProps, 'link
 }
 
 function AttachmentLinkBase(
-  { url, pending = false, children, ...props }: AttachmentLinkProps,
+  { pending = false, children, ...props }: AttachmentLinkProps,
   ref: React.ForwardedRef<HTMLAnchorElement>
 ) {
   return (
@@ -45,7 +45,6 @@ function AttachmentLinkBase(
       target="_blank"
       rel="noopener noreferrer"
       {...props}
-      href={url}
       className={cn(
         'group relative min-h-8 min-w-8 w-full flex items-center justify-center rounded-md overflow-hidden bg-ring/10 hover:bg-ring/20 transition-color duration-300 ease-out cursor-pointer',
         props?.className
@@ -57,7 +56,7 @@ function AttachmentLinkBase(
   );
 }
 
-const AttachmentLink = forwardRef<HTMLAnchorElement, AttachmentLinkProps>(AttachmentLinkBase);
+const AttachmentLink = React.forwardRef<HTMLAnchorElement, AttachmentLinkProps>(AttachmentLinkBase);
 
 AttachmentLink.displayName = 'AttachmentLink';
 
@@ -78,7 +77,7 @@ function AttachmentAudioBase(
   );
 }
 
-const AttachmentAudio = forwardRef<HTMLAudioElement, AttachmentAudioProps>(AttachmentAudioBase);
+const AttachmentAudio = React.forwardRef<HTMLAudioElement, AttachmentAudioProps>(AttachmentAudioBase);
 
 function AttachmentVideoBase(
   { uid, url, maxSize = 360, pending = false, onReady = () => {}, containerProps, ...props }: AttachmentVideoProps,
@@ -86,8 +85,8 @@ function AttachmentVideoBase(
 ) {
   const videoId = `attachment_video_${uid || getRandomString()}`;
   const videoMaxSize = `${maxSize}px`;
-  const playerRef = useRef<HTMLVideoElement>(null);
-  const [style, setStyle] = useState<React.CSSProperties>({
+  const playerRef = React.useRef<HTMLVideoElement>(null);
+  const [style, setStyle] = React.useState<React.CSSProperties>({
     maxHeight: videoMaxSize,
     maxWidth: videoMaxSize,
   });
@@ -106,7 +105,7 @@ function AttachmentVideoBase(
     }
   };
 
-  useImperativeHandle(ref, () => playerRef.current || ({} as HTMLVideoElement), []);
+  React.useImperativeHandle(ref, () => playerRef.current || ({} as HTMLVideoElement), []);
 
   return (
     <div
@@ -129,7 +128,7 @@ function AttachmentVideoBase(
   );
 }
 
-const AttachmentVideo = forwardRef<HTMLVideoElement, AttachmentVideoProps>(AttachmentVideoBase);
+const AttachmentVideo = React.forwardRef<HTMLVideoElement, AttachmentVideoProps>(AttachmentVideoBase);
 
 AttachmentVideo.displayName = 'AttachmentVideo';
 
@@ -161,7 +160,7 @@ function AttachmentImageBase(
   );
 }
 
-const AttachmentImage = forwardRef<HTMLImageElement, AttachmentImageProps>(AttachmentImageBase);
+const AttachmentImage = React.forwardRef<HTMLImageElement, AttachmentImageProps>(AttachmentImageBase);
 
 AttachmentImage.displayName = 'AttachmentImage';
 
@@ -249,7 +248,7 @@ function AttachmentBase({
   }
 }
 
-const Attachment = memo(AttachmentBase);
+const Attachment = React.memo(AttachmentBase);
 
 Attachment.displayName = 'Attachment';
 

package/src/components/avatar.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { memo, forwardRef } from 'react';
+import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { PresenceBadge, type PresenceStatus, type PresenceBadgeProps } from './presence';
 import { cn } from './utils';
@@ -72,7 +71,7 @@ function AvatarBase(
   );
 }
 
-const Avatar = memo(forwardRef<HTMLDivElement, AvatarProps>(AvatarBase));
+const Avatar = React.memo(React.forwardRef<HTMLDivElement, AvatarProps>(AvatarBase));
 
 Avatar.displayName = 'Avatar';
 

package/src/components/badge.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef } from 'react';
+import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from './utils';
@@ -35,7 +34,7 @@ function BadgeBase(
   return <Comp ref={ref} {...props} className={cn(badgeVariants({ variant }), className)} />;
 }
 
-const Badge = forwardRef<HTMLElement, BadgeProps>(BadgeBase);
+const Badge = React.forwardRef<HTMLElement, BadgeProps>(BadgeBase);
 
 Badge.displayName = 'Badge';
 

package/src/components/button.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef } from 'react';
+import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from './utils';
@@ -51,8 +50,9 @@ function ButtonBase(
   );
 }
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(ButtonBase);
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(ButtonBase);
 
 Button.displayName = 'Button';
 
-export { Button, type ButtonProps };
+// eslint-disable-next-line react-refresh/only-export-components
+export { Button, buttonVariants, type ButtonProps };

package/src/components/chat-bubble.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import * as React from 'react';
 import { useInView } from 'react-intersection-observer';
 import { Avatar, type AvatarProps } from './avatar';
 import { FormattedDate, type FormattedDateProps } from './formatted-date';
@@ -38,8 +37,8 @@ function ChatBubbleBase(
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
   const [setRef, inView] = useInView();
-  const messageRef = useRef<HTMLDivElement>(null);
-  const setRefs = useCallback(
+  const messageRef = React.useRef<HTMLDivElement>(null);
+  const setRefs = React.useCallback(
     (node: HTMLDivElement) => {
       messageRef.current = node;
       setRef(node);
@@ -47,13 +46,13 @@ function ChatBubbleBase(
     [setRef]
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (inView) {
       onView();
     }
   }, [inView, onView]);
 
-  useImperativeHandle(ref, () => messageRef.current || ({} as HTMLDivElement), []);
+  React.useImperativeHandle(ref, () => messageRef.current || ({} as HTMLDivElement), []);
 
   return (
     <div ref={setRefs} {...props} className={cn('mt-2', isLast && 'mb-2', inView && 'view', props?.className)}>
@@ -62,7 +61,7 @@ function ChatBubbleBase(
   );
 }
 
-const ChatBubble = forwardRef<HTMLDivElement, ChatBubbleProps>(ChatBubbleBase);
+const ChatBubble = React.forwardRef<HTMLDivElement, ChatBubbleProps>(ChatBubbleBase);
 
 function ChatBubbleMessageBase(
   {
@@ -110,7 +109,7 @@ function ChatBubbleMessageBase(
 
       <div
         className={cn(
-          'relative flex flex-col min-w-42 max-w-120 rounded-xl px-2 pt-2 pb-6 shadow-sm',
+          'relative flex flex-col min-w-50 max-w-120 rounded-xl px-2 pt-2 pb-6 shadow-sm',
           fromMe ? 'bg-gray-200' : 'bg-blue-200',
           hasAvatarMargin && 'ml-9',
           bubbleProps?.className
@@ -138,7 +137,7 @@ function ChatBubbleMessageBase(
   );
 }
 
-const ChatBubbleMessage = memo(forwardRef<HTMLDivElement, ChatBubbleMessageProps>(ChatBubbleMessageBase));
+const ChatBubbleMessage = React.memo(React.forwardRef<HTMLDivElement, ChatBubbleMessageProps>(ChatBubbleMessageBase));
 
 ChatBubbleMessage.displayName = 'ChatBubbleMessage';
 
@@ -169,7 +168,7 @@ function ChatBubbleInfoBase(
   );
 }
 
-const ChatBubbleInfo = memo(forwardRef<HTMLDivElement, ChatBubbleInfoProps>(ChatBubbleInfoBase));
+const ChatBubbleInfo = React.memo(React.forwardRef<HTMLDivElement, ChatBubbleInfoProps>(ChatBubbleInfoBase));
 
 ChatBubbleInfo.displayName = 'ChatBubbleInfo';
 

package/src/components/chat-input.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { ChangeEvent, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import * as React from 'react';
 import TextareaAutosize, { type TextareaAutosizeProps, type TextareaHeightChangeMeta } from 'react-textarea-autosize';
 import { SendHorizontal, type LucideProps } from 'lucide-react';
 import { Label, type LabelProps } from './label';
@@ -48,7 +47,7 @@ function ChatInputSendBase(
   );
 }
 
-const ChatInputSend = forwardRef<HTMLLabelElement, ChatInputSendProps>(ChatInputSendBase);
+const ChatInputSend = React.forwardRef<HTMLLabelElement, ChatInputSendProps>(ChatInputSendBase);
 
 ChatInputSend.displayName = 'ChatInputSend';
 
@@ -68,11 +67,11 @@ function ChatInputBase(
   }: ChatInputProps,
   ref: React.ForwardedRef<HTMLTextAreaElement>
 ) {
-  const [value, setValue] = useState<string>();
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const textareaHeightRef = useRef<number>(0);
-  const typingRef = useRef<boolean>(false);
-  const typingTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const [value, setValue] = React.useState<string>();
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+  const textareaHeightRef = React.useRef<number>(0);
+  const typingRef = React.useRef<boolean>(false);
+  const typingTimeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
   const handleStopTyping = () => {
     typingRef.current = false;
     onTyping(false);
@@ -82,7 +81,9 @@ function ChatInputBase(
       typingTimeoutRef.current = undefined;
     }
   };
-  const handleOnChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+  const handleOnChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    props.onChange?.(event);
+
     const { data } = event.nativeEvent as InputEvent;
 
     setValue(event.target.value);
@@ -105,6 +106,8 @@ function ChatInputBase(
     }
   };
   const handleOnHeightChange = (height: number, meta: TextareaHeightChangeMeta) => {
+    props.onHeightChange?.(height, meta);
+
     if (!height && !meta) return;
 
     if (height !== textareaHeightRef.current) {
@@ -116,14 +119,15 @@ function ChatInputBase(
     textareaHeightRef.current = height;
   };
   const handleOnKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    props.onKeyDown?.(event);
+
     if (event.key === 'Enter' && event.shiftKey === false) {
       event.preventDefault();
-      props.onKeyDown?.(event);
       handleOnSend();
     }
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     const textarea = textareaRef.current;
 
     handleStopTyping();
@@ -135,7 +139,7 @@ function ChatInputBase(
     };
   }, [props.key]);
 
-  useImperativeHandle(ref, () => textareaRef.current || ({} as HTMLTextAreaElement), []);
+  React.useImperativeHandle(ref, () => textareaRef.current || ({} as HTMLTextAreaElement), []);
 
   return (
     <div {...containerProps} className={cn('flex items-end gap-2', containerProps?.className)}>
@@ -165,7 +169,7 @@ function ChatInputBase(
   );
 }
 
-const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(ChatInputBase);
+const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(ChatInputBase);
 
 ChatInput.displayName = 'ChatInput';