[pull] main from olegshulyakov:main

CHANGELOG.md

@@ -1,3 +1,36 @@
+## [2.38.0] - 2025-10-12
+
+### 🚀 Enhancements
+
+- UI components (#217)
+- _(components)_ Add AutoSizingTextArea component (#219)
+
+### 🛠 Fixes
+
+- _(inference)_ Update condition for loading models (#221)
+
+### 🎨 Styling
+
+- _(chat)_ Expand ChatInput on focus (#220)
+
+### 🚜 Refactor
+
+- _(ui)_ Replace button elements with Button component
+- _(common)_ Replace IntlIconButton with Button component
+- _(ui)_ Replace label elements with custom Label component
+- _(chat)_ Replace collapse component with custom button in ChatMessage
+- Migrate project structure
+- _(components)_ Introduce Icon component to replace direct react-icons usage
+- _(vite.config)_ Update vendor chunk splitting logic
+- _(chat)_ Move prefilled message logic to custom hook (#218)
+- _(app)_ Simplify App component and extract toast logic to custom hooks
+
+## [2.37.0] - 2025-10-06
+
+### 🚀 Enhancements
+
+- Speech to Text #66 (#127)
+
 ## [2.36.0] - 2025-10-01
 
 ### 🚀 Enhancements

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "llama.ui",
   "description": "A minimal Interface for AI Companion that runs entirely in your browser.",
-  "version": "2.37.0",
+  "version": "2.38.0",
   "homepage": "https://llama-ui.js.org/",
   "license": "MIT",
   "type": "module",

src/components/Textarea.tsx

@@ -1,14 +1,24 @@
 import { cva, VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { cn } from '../utils';
+import {
+  ChangeEvent,
+  forwardRef,
+  TextareaHTMLAttributes,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { cn, throttle } from '../utils';
 
 const variants = cva('textarea min-h-auto resize-none', {
   variants: {
     variant: {
       default: 'focus:outline-1 focus:outline-offset-0',
       code: 'font-mono',
       transparent:
-        'bg-transparent border-none outline-none ring-0 focus:outline-none focus:ring-0',
+        'bg-transparent border-none outline-0 ring-0 focus:outline-0 focus:ring-0',
     },
     size: {
       default: 'h-24',
@@ -21,10 +31,10 @@ const variants = cva('textarea min-h-auto resize-none', {
   },
 });
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
+export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
   VariantProps<typeof variants>;
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   ({ className, variant, size, ...props }, ref) => (
     <textarea
       className={cn(variants({ variant, size, className }))}
@@ -34,6 +44,70 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     />
   )
 );
-Textarea.displayName = 'Textarea';
+TextArea.displayName = 'TextArea';
 
-export { Textarea };
+const AutoSizingTextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ value: initial, onChange, ...props }, ref) => {
+    const textAreaRef = useRef<HTMLTextAreaElement>(null);
+    useImperativeHandle(ref, () => textAreaRef.current!, []);
+
+    const [value, setValue] = useState<
+      string | number | readonly string[] | undefined
+    >('');
+
+    useEffect(() => {
+      setValue(initial);
+    }, [initial]);
+
+    const handleChange = useCallback(
+      (event: ChangeEvent<HTMLTextAreaElement>) => {
+        setValue(event.target.value);
+        if (onChange) onChange(event);
+      },
+      [onChange]
+    );
+
+    const adjustHeight = throttle((textarea: HTMLTextAreaElement | null) => {
+      if (!textarea) return;
+
+      // Only perform auto-sizing on large screens (matching Tailwind's xl: breakpoint)
+      if (!window.matchMedia('(min-width: 1280px)').matches) {
+        // On small screens, reset inline height and max-height styles.
+        // This allows CSS (e.g., `rows` attribute or classes) to control the height,
+        // and enables manual resizing if `resize-vertical` is set.
+        textarea.style.height = ''; // Use 'auto' or '' to reset
+        textarea.style.maxHeight = '';
+        return; // Do not adjust height programmatically on small screens
+      }
+
+      const computedStyle = window.getComputedStyle(textarea);
+      // Get the max-height specified by CSS (e.g., from `xl:max-h-48`)
+      const currentMaxHeight = computedStyle.maxHeight;
+
+      // Temporarily remove max-height to allow scrollHeight to be calculated correctly
+      textarea.style.maxHeight = 'none';
+      // Reset height to 'auto' to measure the actual scrollHeight needed
+      textarea.style.height = 'auto';
+      // Set the height to the calculated scrollHeight
+      textarea.style.height = textarea.scrollHeight + 2 + 'px';
+      // Re-apply the original max-height from CSS to enforce the limit
+      textarea.style.maxHeight = currentMaxHeight;
+    }, 100);
+
+    useLayoutEffect(() => {
+      adjustHeight(textAreaRef?.current);
+    }, [adjustHeight, ref, value]);
+
+    return (
+      <TextArea
+        ref={textAreaRef}
+        value={value}
+        onChange={handleChange}
+        {...props}
+      />
+    );
+  }
+);
+AutoSizingTextArea.displayName = 'AutoSizingTextArea';
+
+export { AutoSizingTextArea, TextArea };

src/pages/Chat/components/CanvasPyInterpreter.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Icon, Textarea } from '../../../components';
+import { Button, Icon, TextArea } from '../../../components';
 import LocalStorage from '../../../database/localStorage';
 import { useChatContext } from '../../../store/chat';
 import { CanvasType } from '../../../types';
@@ -162,7 +162,7 @@ export default function CanvasPyInterpreter() {
           </Button>
         </div>
         <div className="grid grid-rows-3 gap-4 h-full">
-          <Textarea
+          <TextArea
             className="h-full font-mono"
             size="full"
             value={code}
@@ -196,7 +196,7 @@ export default function CanvasPyInterpreter() {
                 </OpenInNewTab>
               </span>
             </div>
-            <Textarea
+            <TextArea
               className="h-full font-mono dark-color"
               size="full"
               value={output}