feat: 修复上传图片 icon 未显示的问题

app/components/AttachImage.tsx

@@ -13,7 +13,7 @@ export const AttachImage: FC = () => {
   const { images, deleteImage } = useContext(ChatContext)!;
 
   return (
-    <div className="flex flex-row-reverse items-center">
+    <div className="flex flex-row-reverse items-end">
       <AttachImageButton />
       {[...images].reverse().map((imageProp, index) => (
         <div key={index} className="attach-image-container relative mr-[-28px] z-10 cursor-pointer">

app/components/TextareaForm.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import classNames from 'classnames';
 import type { FC, FormEvent, KeyboardEvent } from 'react';
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 
@@ -71,6 +72,11 @@ export const TextareaForm: FC = () => {
     }
   }, []);
 
+  useEffect(() => {
+    updateTextareaHeight();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [images.length]);
+
   /**
    * 输入内容触发
    */
@@ -144,11 +150,16 @@ export const TextareaForm: FC = () => {
         ref={formContainerRef}
         id="form-container"
       >
-        <form className="flex space-x-3" onSubmit={formOnSubmit}>
+        <form className="flex space-x-2" onSubmit={formOnSubmit}>
           <textarea
-            className={`flex-grow px-3 py-2 resize-none bg-chat-bubble placeholder:text-gray-400
-                      disabled:bg-gray-200 disabled:cursor-not-allowed md:min-h-[4rem]
-                      dark:bg-chat-bubble-dark dark:disabled:bg-gray-700 dark:placeholder:text-gray-500`}
+            className={classNames(
+              `flex-grow px-3 py-2 resize-none bg-chat-bubble placeholder:text-gray-400
+                disabled:bg-gray-200 disabled:cursor-not-allowed md:min-h-[4rem]
+                dark:bg-chat-bubble-dark dark:disabled:bg-gray-700 dark:placeholder:text-gray-500`,
+              {
+                'min-h-[4rem]': images.length > 0,
+              },
+            )}
             ref={textareaRef}
             disabled={!isLogged}
             placeholder={isLogged ? '' : isMobile ? '请点击右上角设置密钥' : '请点击左上角钥匙按钮设置密钥'}
@@ -159,7 +170,7 @@ export const TextareaForm: FC = () => {
             rows={1}
           />
           {settings.model.includes('vision') && <AttachImage />}
-          <div className="flex items-center">
+          <div className="flex items-end">
             <input
               className="px-3 py-2 h-full max-h-16"
               type="submit"

app/components/buttons/AttachImageButton.tsx

@@ -18,13 +18,13 @@ export const AttachImageButton: FC<{}> = () => {
     <div className="h-full max-h-16">
       <label
         htmlFor="input-attach-image"
-        className={classNames('button-attach-image flex items-center w-14 py-2 h-full max-h-16', {
+        className={classNames('button-attach-image flex items-center w-10 h-10 md:w-14 md:h-16', {
           disabled: !isLogged || images.length === 9,
-          'px-[18px]': images.length === 0,
-          'pl-[28px] pr-[8px]': images.length > 0,
+          'justify-center': images.length === 0,
+          'justify-end w-14 h-16': images.length > 0,
         })}
       >
-        {images.length === 0 ? <PhotoIcon /> : <PlusIcon />}
+        {images.length === 0 ? <PhotoIcon className="w-9 h-9 p-2" /> : <PlusIcon className="w-9 h-9 p-2" />}
       </label>
 
       <input
@@ -43,6 +43,9 @@ export const AttachImageButton: FC<{}> = () => {
 
           const images = await Promise.all(Array.from(files).map(readImageFile));
           appendImages(...images);
+
+          // https://stackoverflow.com/a/56258902
+          e.target.value = '';
         }}
       />
     </div>

app/globals.css

@@ -52,13 +52,17 @@ textarea,
 }
 
 input[type='button'],
-input[type='submit'],
 .button-attach-image {
   @apply cursor-pointer bg-white hover:bg-gray-200;
   @apply disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-400;
   @apply dark:bg-gray-800 dark:hover:bg-gray-700;
   @apply dark:disabled:bg-gray-700 dark:disabled:text-gray-500;
 }
+input[type='submit'] {
+  @apply cursor-pointer bg-[#57be6b] text-white;
+  @apply disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-400;
+  @apply dark:disabled:bg-gray-700 dark:disabled:text-gray-500;
+}
 .button-attach-image.disabled {
   @apply cursor-not-allowed bg-gray-200 text-gray-400;
   @apply dark:bg-gray-700 dark:text-gray-500;