diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3453669..2295ee8 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index ff7992b..ab7e52e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "llama.ui",
-  "version": "2.37.0",
+  "version": "2.38.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "llama.ui",
-      "version": "2.37.0",
+      "version": "2.38.0",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-collapsible": "^1.1.12",
diff --git a/package.json b/package.json
index 56a9446..f43189d 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
index 81bcab6..a8b8d0b 100644
--- a/src/components/Textarea.tsx
+++ b/src/components/Textarea.tsx
@@ -1,6 +1,16 @@
 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: {
@@ -8,7 +18,7 @@ const variants = cva('textarea min-h-auto resize-none', {
       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 };
diff --git a/src/hooks/useChatTextarea.ts b/src/hooks/useChatTextarea.ts
deleted file mode 100644
index 6ea86ba..0000000
--- a/src/hooks/useChatTextarea.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { throttle } from '../utils';
-
-// Media Query for detecting "large" screens (matching Tailwind's lg: breakpoint)
-const LARGE_SCREEN_MQ = '(min-width: 1024px)';
-
-// Calculates and sets the textarea height based on its scrollHeight
-const adjustTextareaHeight = throttle(
-  (textarea: HTMLTextAreaElement | null) => {
-    if (!textarea) return;
-
-    // Only perform auto-sizing on large screens
-    if (!window.matchMedia(LARGE_SCREEN_MQ).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 `lg: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}px`;
-    // Re-apply the original max-height from CSS to enforce the limit
-    textarea.style.maxHeight = currentMaxHeight;
-  },
-  100
-); // Throttle to prevent excessive calls
-
-// Interface describing the API returned by the hook
-export interface ChatTextareaApi {
-  value: () => string;
-  setValue: (value: string) => void;
-  focus: () => void;
-  ref: React.RefObject<HTMLTextAreaElement>;
-  refOnSubmit: React.MutableRefObject<(() => void) | null>; // Submit handler
-  onInput: (event: React.FormEvent<HTMLTextAreaElement>) => void; // Input handler
-}
-
-// This is a workaround to prevent the textarea from re-rendering when the inner content changes
-// See https://github.com/ggml-org/llama.cpp/pull/12299
-// combined now with auto-sizing logic.
-export function useChatTextarea(initValue: string): ChatTextareaApi {
-  const [savedInitValue, setSavedInitValue] = useState<string>(initValue);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const onSubmitRef = useRef<(() => void) | null>(null);
-
-  // Effect to set initial value and height on mount or when initValue changes
-  useEffect(() => {
-    const textarea = textareaRef.current;
-    if (textarea) {
-      if (typeof savedInitValue === 'string' && savedInitValue.length > 0) {
-        textarea.value = savedInitValue;
-        // Call adjustTextareaHeight - it will check screen size internally
-        setTimeout(() => adjustTextareaHeight(textarea), 0);
-        setSavedInitValue(''); // Reset after applying
-      } else {
-        // Adjust height even if there's no initial value (for initial render)
-        setTimeout(() => adjustTextareaHeight(textarea), 0);
-      }
-    }
-  }, [textareaRef, savedInitValue]); // Depend on ref and savedInitValue
-
-  // On input change, we adjust the height of the textarea
-  const handleInput = useCallback(
-    (event: React.FormEvent<HTMLTextAreaElement>) => {
-      // Call adjustTextareaHeight on every input - it will decide whether to act
-      adjustTextareaHeight(event.currentTarget);
-    },
-    []
-  );
-
-  return {
-    // Method to get the current value directly from the textarea
-    value: () => {
-      return textareaRef.current?.value ?? '';
-    },
-    // Method to programmatically set the value and trigger height adjustment
-    setValue: (value: string) => {
-      const textarea = textareaRef.current;
-      if (textarea) {
-        textarea.value = value;
-        // Call adjustTextareaHeight - it will check screen size internally
-        setTimeout(() => adjustTextareaHeight(textarea), 0);
-      }
-    },
-    focus: () => {
-      if (textareaRef.current) {
-        textareaRef.current.focus();
-      }
-    },
-    ref: textareaRef,
-    refOnSubmit: onSubmitRef,
-    onInput: handleInput, // for adjusting height on input
-  };
-}
diff --git a/src/pages/Chat/components/CanvasPyInterpreter.tsx b/src/pages/Chat/components/CanvasPyInterpreter.tsx
index 8878626..663b5e3 100644
--- a/src/pages/Chat/components/CanvasPyInterpreter.tsx
+++ b/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}
diff --git a/src/pages/Chat/components/ChatInput.tsx b/src/pages/Chat/components/ChatInput.tsx
index 975f11d..e0961fb 100644
--- a/src/pages/Chat/components/ChatInput.tsx
+++ b/src/pages/Chat/components/ChatInput.tsx
@@ -1,13 +1,17 @@
-import { memo, useCallback, useEffect, useMemo } from 'react';
+import {
+  ChangeEvent,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import toast from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import { TbAdjustmentsHorizontal } from 'react-icons/tb';
 import { useNavigate } from 'react-router';
-import { Button, Icon, Label, Textarea } from '../../../components';
-import {
-  ChatTextareaApi,
-  useChatTextarea,
-} from '../../../hooks/useChatTextarea';
+import { AutoSizingTextArea, Button, Icon, Label } from '../../../components';
 import { useFileUpload } from '../../../hooks/useFileUpload';
 import SpeechToText, {
   IS_SPEECH_RECOGNITION_SUPPORTED,
@@ -28,61 +32,68 @@ export const ChatInput = memo(
     const { t } = useTranslation();
     const navigate = useNavigate();
     const { prefilledContent, isPrefilledSend } = usePrefilledMessage();
-    const textarea: ChatTextareaApi = useChatTextarea(prefilledContent);
     const extraContext = useFileUpload();
     const { isGenerating, stopGenerating } = useChatContext();
 
+    const textAreaRef = useRef<HTMLTextAreaElement>(null);
+    const [textAreaValue, setTextAreaValue] = useState('');
+
     const isPending = useMemo(
       () => (!convId ? false : isGenerating(convId)),
       [convId, isGenerating]
     );
 
+    const handleChange = useCallback(
+      (event: ChangeEvent<HTMLTextAreaElement>) => {
+        setTextAreaValue(event.target.value);
+      },
+      []
+    );
+
     const handleStop = useCallback(() => {
       if (!convId) return;
       stopGenerating(convId);
     }, [convId, stopGenerating]);
 
-    const handleRecord: SpeechRecordCallback = useCallback(
-      (text: string) => textarea.setValue(text),
-      [textarea]
-    );
+    const handleRecord: SpeechRecordCallback = useCallback((text: string) => {
+      setTextAreaValue(text);
+    }, []);
 
     const sendNewMessage = async () => {
-      const lastInpMsg = textarea.value();
+      const lastInpMsg = textAreaValue;
       if (lastInpMsg.trim().length === 0) {
         toast.error(t('chatInput.errors.emptyMessage'));
         return;
       }
 
-      textarea.setValue('');
+      setTextAreaValue('');
       if (!(await onSend(lastInpMsg, extraContext.items))) {
         // restore the input message if failed
-        textarea.setValue(lastInpMsg);
+        setTextAreaValue(lastInpMsg);
       }
       // OK
       extraContext.clearItems();
     };
 
-    // for vscode context
-    textarea.refOnSubmit.current = sendNewMessage;
-
     useEffect(() => {
+      if (!textAreaRef.current) return;
+
       // set textarea with prefilled value
       if (prefilledContent) {
-        textarea.setValue(prefilledContent);
+        setTextAreaValue(prefilledContent);
       }
 
       // send the prefilled message if needed
       // otherwise, focus on the input
       if (isPrefilledSend) sendNewMessage();
-      else textarea.focus();
+      else textAreaRef.current.focus();
 
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isPrefilledSend, prefilledContent]);
 
     return (
       <div
-        className="shrink-0 w-full lg:max-w-[900px] bg-base-100 mx-auto p-1 md:p-2"
+        className="group shrink-0 w-full md:max-w-md focus-within:md:max-w-2xl lg:max-w-lg focus-within:lg:max-w-3xl xl:max-w-3xl focus-within:xl:max-w-4xl bg-base-100 mx-auto p-1 md:p-2"
         aria-label={t('chatInput.ariaLabels.chatInput')}
       >
         <DropzoneArea
@@ -90,16 +101,20 @@ export const ChatInput = memo(
           extraContext={extraContext}
           disabled={isPending}
         >
-          <div className="bg-base-200 flex flex-col lg:border-1 lg:border-base-content/30 rounded-lg shadow-sm md:shadow-md p-2">
-            <Textarea
+          <div
+            className="bg-base-200 flex flex-col lg:border-1 lg:border-base-content/30 outline-0 focus-within:outline-1 rounded-lg shadow-sm md:shadow-md p-2"
+            tabIndex={0}
+          >
+            <AutoSizingTextArea
               // Default (mobile): Enable vertical resize, overflow auto for scrolling if needed
               // Large screens (lg:): Disable manual resize, apply max-height for autosize limit
-              className="text-base p-0 px-2"
+              className="text-base p-0 px-2 max-md:min-h-12"
               variant="transparent"
               size="full"
               placeholder={t('chatInput.placeholder')}
-              ref={textarea.ref}
-              onInput={textarea.onInput} // Hook's input handler (will only resize height on lg+ screens)
+              ref={textAreaRef}
+              value={textAreaValue}
+              onChange={handleChange}
               onKeyDown={(e) => {
                 if (e.nativeEvent.isComposing || e.keyCode === 229) return;
                 if (e.key === 'Enter' && !e.shiftKey) {
@@ -107,14 +122,11 @@ export const ChatInput = memo(
                   sendNewMessage();
                 }
               }}
-              id="msg-input"
-              // Set a base height of 2 rows for mobile views
-              // On lg+ screens, the hook will calculate and set the initial height anyway
-              rows={2}
+              rows={1}
             />
 
             {/* buttons area */}
-            <div className="flex items-center justify-between mt-2">
+            <div className="hidden group-focus-within:flex items-center justify-between mt-2">
               <div className="flex gap-2 items-center">
                 <Label
                   className={isPending ? 'btn-disabled' : ''}
diff --git a/src/pages/Chat/components/ChatMessage.tsx b/src/pages/Chat/components/ChatMessage.tsx
index 333e868..eb77344 100644
--- a/src/pages/Chat/components/ChatMessage.tsx
+++ b/src/pages/Chat/components/ChatMessage.tsx
@@ -5,7 +5,7 @@ import {
 } from '@radix-ui/react-collapsible';
 import { memo, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { Button, Icon, Label, Textarea } from '../../../components';
+import { AutoSizingTextArea, Button, Icon, Label } from '../../../components';
 import IndexedDB from '../../../database/indexedDB';
 import { useFileUpload } from '../../../hooks/useFileUpload';
 import TextToSpeech, {
@@ -415,7 +415,7 @@ function EditMessage({
       extraContext={extraContext}
       disabled={msg.role !== 'user'}
     >
-      <Textarea
+      <AutoSizingTextArea
         className="max-w-2xl w-[calc(90vw-8em)]"
         size="full"
         value={editingContent}
diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx
index e057892..0130bd5 100644
--- a/src/pages/Chat/index.tsx
+++ b/src/pages/Chat/index.tsx
@@ -191,7 +191,7 @@ export default function ChatScreen({
           {/* chat messages */}
           <div
             className={classNames({
-              'flex flex-col w-full xl:max-w-[900px] mx-auto': true,
+              'flex flex-col w-full xl:max-w-4xl mx-auto': true,
               'hidden xl:flex': hasCanvas, // adapted for mobile
               flex: !hasCanvas,
             })}
diff --git a/src/pages/Settings/components/common.tsx b/src/pages/Settings/components/common.tsx
index 30cbac3..7040f13 100644
--- a/src/pages/Settings/components/common.tsx
+++ b/src/pages/Settings/components/common.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Dropdown, Label, Textarea } from '../../../components';
+import { Dropdown, Label, TextArea } from '../../../components';
 import { CONFIG_DEFAULT } from '../../../config';
 import { DropdownOption, SettingFieldInput } from '../../../types/settings';
 import { normalizeUrl } from '../../../utils';
@@ -48,7 +48,7 @@ export function SettingsModalLongInput({
       {({ label, note }) => (
         <Label variant="form-control" className="max-w-80">
           <div className="text-sm opacity-60 mb-1">{label}</div>
-          <Textarea
+          <TextArea
             size="default"
             placeholder={`Default: ${CONFIG_DEFAULT[field.key] || 'none'}`}
             value={value}
diff --git a/src/pages/Welcome/index.tsx b/src/pages/Welcome/index.tsx
index fd90545..4c6448b 100644
--- a/src/pages/Welcome/index.tsx
+++ b/src/pages/Welcome/index.tsx
@@ -50,7 +50,7 @@ export default function WelcomeScreen() {
   );
 
   return (
-    <div className="flex flex-col h-full w-full xl:max-w-[900px] mx-auto">
+    <div className="flex flex-col h-full w-full xl:max-w-4xl mx-auto">
       <div className="grow flex flex-col items-center justify-center px-2 transition-[300ms]">
         <h1 className="text-4xl font-medium">
           <Trans i18nKey="welcomeScreen.welcome" />
diff --git a/src/store/inference.tsx b/src/store/inference.tsx
index ac43087..ba42cd0 100644
--- a/src/store/inference.tsx
+++ b/src/store/inference.tsx
@@ -232,7 +232,7 @@ export const InferenceContextProvider = ({
         updateApi(config);
       }
 
-      if (Object.is(prevConfig, CONFIG_DEFAULT) && !!config.baseUrl) {
+      if (Object.is(prevConfig, CONFIG_DEFAULT) || !!config.baseUrl) {
         loadModels(config);
       }