diff --git a/client/style.css b/client/style.css
index d523361..38832b0 100644
--- a/client/style.css
+++ b/client/style.css
@@ -70,4 +70,4 @@ html {
 
 a {
   color: rgb(var(--mdui-color-primary));
-}
+}
\ No newline at end of file
diff --git a/client/ui/MduiPatchedTextAreaElement.ts b/client/ui/MduiPatchedTextAreaElement.ts
index 7cf2855..a028b8e 100644
--- a/client/ui/MduiPatchedTextAreaElement.ts
+++ b/client/ui/MduiPatchedTextAreaElement.ts
@@ -1,8 +1,10 @@
 import { $ } from "mdui"
 
 export default class MduiPatchedTextAreaElement extends HTMLElement {
-    static observedAttributes = ['user-id']
-    declare inputDiv: HTMLDivElement
+    static observedAttributes = ['value', 'placeholder']
+    declare inputDiv?: HTMLDivElement
+    declare inputPlaceHolderDiv?: HTMLDivElement
+    declare inputContainerDiv?: HTMLDivElement
     constructor() {
         super()
 
@@ -13,11 +15,51 @@ export default class MduiPatchedTextAreaElement extends HTMLElement {
     connectedCallback() {
         const shadow = this.shadowRoot as ShadowRoot
 
-        this.inputDiv = new DOMParser().parseFromString(`
-            <div contentEditable="true" style="outline: none !important; color: rgb(var(--mdui-color-on-surface-variant)); display: inline-block; word-wrap: break-word; white-space: pre-wrap;"></div>
-        `, 'text/html').body.firstChild as HTMLDivElement
-        this.inputDiv.contentEditable = 'true'
+        this.inputContainerDiv = new DOMParser().parseFromString(`
+            <div style="overflow-y: auto; height: 100%;">
+                <div role="textbox" aria-multiline="true" aria-labelledby="txtboxMultilineLabel" contentEditable="true" style="outline: none !important; color: rgb(var(--mdui-color-on-surface-variant)); display: inline-block; word-break: break-word; white-space: pre-wrap;"></div>
+                <div style="display: none;"></div>
+                <style>
+                    *::-webkit-scrollbar {
+                        width: 7px;
+                        height: 10px;
+                    }
 
+                    *::-webkit-scrollbar-track {
+                        width: 6px;
+                        background: rgba(#101f1c, 0.1);
+                        -webkit-border-radius: 2em;
+                        -moz-border-radius: 2em;
+                        border-radius: 2em;
+                    }
+
+                    *::-webkit-scrollbar-thumb {
+                        background-color: rgba(144, 147, 153, 0.5);
+                        background-clip: padding-box;
+                        min-height: 28px;
+                        -webkit-border-radius: 2em;
+                        -moz-border-radius: 2em;
+                        border-radius: 2em;
+                        transition: background-color 0.3s;
+                        cursor: pointer;
+                    }
+
+                    *::-webkit-scrollbar-thumb:hover {
+                        background-color: rgba(144, 147, 153, 0.3);
+                    }
+                </style>
+            </div>
+        `, 'text/html').body.firstChild as HTMLDivElement
+
+        console.log(this.inputContainerDiv.children)
+        this.inputDiv = this.inputContainerDiv.children[0] as HTMLDivElement
+        this.inputPlaceHolderDiv = this.inputContainerDiv.children[1] as HTMLDivElement
+
+        this.inputDiv.addEventListener('input', () => {
+            // TODO: 修复 placeholder
+            this.inputPlaceHolderDiv!.style.display = this.value == '' ? '' : 'none'
+            this.inputDiv!.style.display = this.value == '' ? 'none' : ''
+        })
         this.inputDiv.addEventListener('blur', () => {
             if (this._lastValue !== this.value) {
                 this._lastValue = this.value || ''
@@ -31,7 +73,7 @@ export default class MduiPatchedTextAreaElement extends HTMLElement {
 
         this.inputDiv.style.width = '100%'
 
-        shadow.appendChild(this.inputDiv)
+        shadow.appendChild(this.inputContainerDiv)
     }
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
         switch (name) {
@@ -39,19 +81,27 @@ export default class MduiPatchedTextAreaElement extends HTMLElement {
                 this.value = newValue || ''
                 break
             }
+            case 'placeholder': {
+                this.inputPlaceHolderDiv && (this.inputPlaceHolderDiv.innerText = newValue || '')
+                break
+            }
         }
     }
     focus() {
-        this.inputDiv.focus()
+        this.inputDiv?.focus()
     }
     blur() {
-        this.inputDiv.blur()
+        this.inputDiv?.blur()
+    }
+    checkValidity() {
+        // TODO: implment this method
+        return true
     }
     get value() {
-        return this.inputDiv.textContent
+        return this.inputDiv?.textContent || ''
     }
     set value(v) {
-        this.inputDiv.textContent = v
+        this.inputDiv && (this.inputDiv.textContent = v)
     }
 }
 
diff --git a/client/ui/chat-fragment/ChatFragment.tsx b/client/ui/chat-fragment/ChatFragment.tsx
index db5db23..d76889e 100644
--- a/client/ui/chat-fragment/ChatFragment.tsx
+++ b/client/ui/chat-fragment/ChatFragment.tsx
@@ -160,7 +160,7 @@ export default function ChatFragment({
                 }} onDrop={(e) => {
                     // 文件拽入
                 }}>
-                    <mdui-text-field variant="outlined" use-patched-textarea placeholder="(｡･ω･｡)" autosize ref={inputRef} /* max-rows={6} */ onChange={() => {
+                    <mdui-text-field variant="outlined" use-patched-textarea placeholder="(｡･ω･｡)" autosize ref={inputRef} max-rows={6} onChange={() => {
                         if (inputRef.current?.value.trim() == '') {
                             // 清空缓存的文件
                         }
diff --git a/mdui_patched/components/text-field/index.js b/mdui_patched/components/text-field/index.js
index b7f9454..8b228fb 100644
--- a/mdui_patched/components/text-field/index.js
+++ b/mdui_patched/components/text-field/index.js
@@ -398,9 +398,15 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
             'is-firefox': navigator.userAgent.includes('Firefox'),
             ...invalidClassNameObj,
         });
-        return html `<div part="container" class="${className}">${this.renderPrefix()}<div class="input-container">${this.renderLabel()} ${!hasInputSlot ? (this.isTextarea
-            ? this.renderTextArea(hasInputSlot)
-            : this.renderInput(hasInputSlot)) : ''} ${when(hasInputSlot, () => html `<slot name="input" class="input"></slot>`)}</div>${this.renderSuffix()}${this.renderClearButton(hasClearButton)} ${this.renderTogglePasswordButton(hasTogglePasswordButton)} ${this.renderRightIcon(hasErrorIcon)}</div>${when(hasError || hasHelper || hasCounter, () => html `<div part="supporting" class="${classMap({ supporting: true, ...invalidClassNameObj })}">${this.renderHelper(hasError, hasHelper)} ${this.renderCounter(hasCounter)}</div>`)}`;
+        return html`<div part="container" class="${className}">${this.renderPrefix()}<div class="input-container">${this.renderLabel()} ${!hasInputSlot ? (
+            this.getAttribute("use-patched-textarea")
+                ? this.renderPatchedTextArea(hasInputSlot)
+                : (
+                    this.isTextarea
+                        ? this.renderTextArea(hasInputSlot)
+                        : this.renderInput(hasInputSlot)
+                )
+        ) : ''} ${when(hasInputSlot, () => html`<slot name="input" class="input"></slot>`)}</div>${this.renderSuffix()}${this.renderClearButton(hasClearButton)} ${this.renderTogglePasswordButton(hasTogglePasswordButton)} ${this.renderRightIcon(hasErrorIcon)}</div>${when(hasError || hasHelper || hasCounter, () => html`<div part="supporting" class="${classMap({ supporting: true, ...invalidClassNameObj })}">${this.renderHelper(hasError, hasHelper)} ${this.renderCounter(hasCounter)}</div>`)}`;
     }
     setCustomValidityInternal(message) {
         this.inputRef.value.setCustomValidity(message);
@@ -482,54 +488,54 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
     }
     renderLabel() {
         return this.label
-            ? html `<label part="label" class="label">${this.label}</label>`
+            ? html`<label part="label" class="label">${this.label}</label>`
             : nothingTemplate;
     }
     renderPrefix() {
-        return html `<slot name="icon" part="icon" class="icon">${this.icon
-            ? html `<mdui-icon name="${this.icon}" class="i"></mdui-icon>`
+        return html`<slot name="icon" part="icon" class="icon">${this.icon
+            ? html`<mdui-icon name="${this.icon}" class="i"></mdui-icon>`
             : nothingTemplate}</slot><slot name="prefix" part="prefix" class="prefix">${this.prefix}</slot>`;
     }
     renderSuffix() {
-        return html `<slot name="suffix" part="suffix" class="suffix">${this.suffix}</slot>`;
+        return html`<slot name="suffix" part="suffix" class="suffix">${this.suffix}</slot>`;
     }
     renderRightIcon(hasErrorIcon) {
         return hasErrorIcon
-            ? html `<slot name="error-icon" part="error-icon" class="right-icon">${this.errorIcon
-                ? html `<mdui-icon name="${this.errorIcon}" class="i"></mdui-icon>`
-                : html `<mdui-icon-error class="i"></mdui-icon-error>`}</slot>`
-            : html `<slot name="end-icon" part="end-icon" class="end-icon right-icon">${this.endIcon
-                ? html `<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>`
+            ? html`<slot name="error-icon" part="error-icon" class="right-icon">${this.errorIcon
+                ? html`<mdui-icon name="${this.errorIcon}" class="i"></mdui-icon>`
+                : html`<mdui-icon-error class="i"></mdui-icon-error>`}</slot>`
+            : html`<slot name="end-icon" part="end-icon" class="end-icon right-icon">${this.endIcon
+                ? html`<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>`
                 : nothingTemplate}</slot>`;
     }
     renderClearButton(hasClearButton) {
-        return when(hasClearButton, () => html `<slot name="clear-button" part="clear-button" class="action" @click="${this.onClear}"><mdui-button-icon tabindex="-1"><slot name="clear-icon" part="clear-icon">${this.clearIcon
-            ? html `<mdui-icon name="${this.clearIcon}" class="i"></mdui-icon>`
-            : html `<mdui-icon-cancel--outlined class="i"></mdui-icon-cancel--outlined>`}</slot></mdui-button-icon></slot>`);
+        return when(hasClearButton, () => html`<slot name="clear-button" part="clear-button" class="action" @click="${this.onClear}"><mdui-button-icon tabindex="-1"><slot name="clear-icon" part="clear-icon">${this.clearIcon
+            ? html`<mdui-icon name="${this.clearIcon}" class="i"></mdui-icon>`
+            : html`<mdui-icon-cancel--outlined class="i"></mdui-icon-cancel--outlined>`}</slot></mdui-button-icon></slot>`);
     }
     renderTogglePasswordButton(hasTogglePasswordButton) {
-        return when(hasTogglePasswordButton, () => html `<slot name="toggle-password-button" part="toggle-password-button" class="action" @click="${this.onTogglePassword}"><mdui-button-icon tabindex="-1">${this.isPasswordVisible
-            ? html `<slot name="show-password-icon" part="show-password-icon">${this.showPasswordIcon
-                ? html `<mdui-icon name="${this.showPasswordIcon}" class="i"></mdui-icon>`
-                : html `<mdui-icon-visibility-off class="i"></mdui-icon-visibility-off>`}</slot>`
-            : html `<slot name="hide-password-icon" part="hide-password-icon">${this.hidePasswordIcon
-                ? html `<mdui-icon name="${this.hidePasswordIcon}" class="i"></mdui-icon>`
-                : html `<mdui-icon-visibility class="i"></mdui-icon-visibility>`}</slot>`}</mdui-button-icon></slot>`);
+        return when(hasTogglePasswordButton, () => html`<slot name="toggle-password-button" part="toggle-password-button" class="action" @click="${this.onTogglePassword}"><mdui-button-icon tabindex="-1">${this.isPasswordVisible
+            ? html`<slot name="show-password-icon" part="show-password-icon">${this.showPasswordIcon
+                ? html`<mdui-icon name="${this.showPasswordIcon}" class="i"></mdui-icon>`
+                : html`<mdui-icon-visibility-off class="i"></mdui-icon-visibility-off>`}</slot>`
+            : html`<slot name="hide-password-icon" part="hide-password-icon">${this.hidePasswordIcon
+                ? html`<mdui-icon name="${this.hidePasswordIcon}" class="i"></mdui-icon>`
+                : html`<mdui-icon-visibility class="i"></mdui-icon-visibility>`}</slot>`}</mdui-button-icon></slot>`);
     }
     renderInput(hasInputSlot) {
-        return html `<input ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" type="${this.type === 'password' && this.isPasswordVisible
+        return html`<input ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" type="${this.type === 'password' && this.isPasswordVisible
             ? 'text'
             : this.type}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue
-            ? this.placeholder
-            : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" autocapitalize="${ifDefined(this.type === 'password' ? 'off' : this.autocapitalize)}" autocomplete="${this.autocomplete}" autocorrect="${ifDefined(this.type === 'password' ? 'off' : this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}">`;
+                ? this.placeholder
+                : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" autocapitalize="${ifDefined(this.type === 'password' ? 'off' : this.autocapitalize)}" autocomplete="${this.autocomplete}" autocorrect="${ifDefined(this.type === 'password' ? 'off' : this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}">`;
     }
     renderTextArea(hasInputSlot) {
-        return html `<textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue
+        return html`<textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue
             ? this.placeholder
             : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${this.rows ?? 1}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}" @keyup="${this.onTextAreaKeyUp}"></textarea>`;
     }
     renderPatchedTextArea(hasInputSlot) {
-        return html `<mdui-patched-textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue
+        return html`<mdui-patched-textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue
             ? this.placeholder
             : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${this.rows ?? 1}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}" @keyup="${this.onTextAreaKeyUp}"></textarea>`;
     }
@@ -539,15 +545,15 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
      */
     renderHelper(hasError, hasHelper) {
         return hasError
-            ? html `<div part="error" class="error">${this.error || this.inputRef.value.validationMessage}</div>`
+            ? html`<div part="error" class="error">${this.error || this.inputRef.value.validationMessage}</div>`
             : hasHelper
-                ? html `<slot name="helper" part="helper" class="helper">${this.helper}</slot>`
+                ? html`<slot name="helper" part="helper" class="helper">${this.helper}</slot>`
                 : // 右边有 counter，需要占位
-                    html `<span></span>`;
+                html`<span></span>`;
     }
     renderCounter(hasCounter) {
         return hasCounter
-            ? html `<div part="counter" class="counter">${this.value.length}/${this.maxlength}</div>`
+            ? html`<div part="counter" class="counter">${this.value.length}/${this.maxlength}</div>`
             : nothingTemplate;
     }
 };