feat: 聊天输入框ui 交互变更

src/components/AvatarConfirm/index.tsx

@@ -30,7 +30,7 @@ export default function Index({ avatarItem, enabledChatBg, setEnabledChatBg, onC
     onChange()
   }
   const handleCrop = () => {
-    console.log(avatarItem,1111)
+
     Taro.showLoading()
     // url: `${avatarItem.avatarLogo}?x-oss-process=image/resize,w_450/quality,q_60`,
     Taro.downloadFile({

src/components/wemeta-textarea/index.tsx

@@ -11,6 +11,7 @@ interface Props {
   disabled?: boolean;
   confirmType?: keyof InputProps.ConfirmType;
   extra?: () => JSX.Element | JSX.Element[] | undefined;
+  suffix?: () => JSX.Element | JSX.Element[] | undefined;
   prefix?: () => JSX.Element | JSX.Element[] | undefined;
   style?: React.CSSProperties;
   onInput?: (value: string) => void;
@@ -18,6 +19,7 @@ interface Props {
   bgColor?: string;
   autoFocus?: boolean;
   extraClass?: string;
+  adjustPosition?: boolean
   onConfirm?: (value: string) => void;
   placeholderStyle?: string;
 }
@@ -30,6 +32,7 @@ const index = ({
   disabled,
   confirmType,
   prefix,
+  suffix,
   autoHeight,
   autoFocus = false,
   placeholder = "请输入...",
@@ -40,6 +43,7 @@ const index = ({
   extra,
   onConfirm,
   placeholderStyle,
+  adjustPosition,
 }: Props) => {
   const [focus, setFocus] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null); // 创建一个 ref
@@ -76,29 +80,32 @@ const index = ({
     >
       {prefix && prefix()}
       <View className={styleIndex.textareaContainer}>
-        <Textarea
-          ref={inputRef}
-          value={value}
-          disabled={disabled}
-          confirmType={confirmType}
-          style={style}
-          onInput={(e: any) => handleInput(e.target.value)}
-          placeholder={placeholder}
-          placeholderStyle={placeholderStyle ?? 'color: rgba(17,17,17,.25)'}
-          className={`${styleIndex.textInput} ${extraClass}`}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          autoHeight={autoHeight}
-          autoFocus={autoFocus}
-          cursorSpacing={cursorSpacing}
-          maxlength={10000}
-          onConfirm={(e: any) => {
-            onConfirm && onConfirm(e.detail.value);
-          }}
-        />
+        <View className="flex items-end">
+          <Textarea
+            ref={inputRef}
+            value={value}
+            disabled={disabled}
+            adjustPosition={adjustPosition}
+            confirmType={confirmType}
+            style={style}
+            onInput={(e: any) => handleInput(e.target.value)}
+            placeholder={placeholder}
+            placeholderStyle={placeholderStyle ?? 'color: rgba(17,17,17,.25)'}
+            className={`${styleIndex.textInput} ${extraClass}`}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            autoHeight={autoHeight}
+            autoFocus={autoFocus}
+            cursorSpacing={cursorSpacing}
+            maxlength={10000}
+            onConfirm={(e: any) => {
+              onConfirm && onConfirm(e.detail.value);
+            }}
+          />
+          {suffix && suffix()}
+        </View>
         <View className={`${styleIndex.textareaButtons} justify-end gap-8`}>
           {extra && extra()}
-          {/* <View className={`button-rounded-mini ${!value.length ? 'disabled' :''}`} onClick={handleClear}>清除</View> */}
           {maxlength && (
             <View className="text-gray-4">
               {maxlength}/{countCharacters(value)}

src/pages/chat/components/InputBar/TextInputBar.tsx

@@ -3,6 +3,7 @@ import IconMic from "@/components/icon/IconMic"
 import IconStop from "@/components/icon/IconStop"
 import { useState } from "react";
 import WemetaInput from '@/components/wemeta-input'
+import WemetaTextarea from '@/components/wemeta-textarea'
 import { useTextChat } from "@/store/textChatStore";
 interface Props {
   disabled: boolean,
@@ -16,7 +17,7 @@ export default ({disabled, onIconClick, onSend}:Props) => {
   const handleInput = (value: string)=> {
     setValue(value)
   }
-  const handleConfirm = (value: string)=> {
+  const handleConfirm = ()=> {
     console.log(value)
     if(!value.length){
       return;
@@ -27,26 +28,27 @@ export default ({disabled, onIconClick, onSend}:Props) => {
   const handleStopClick = ()=> {
     messageStopHandle?.()
   }
-  const iconButton = ()=> {
+
+  const renderExtra = ()=> {
     return <View className="flex items-center gap-12">
-        <View className="flex-center" onClick={onIconClick}><IconMic /></View>
+        {!!value.length && <View onClick={handleConfirm}>send</View>}
+        {!value.length && <View className="flex-center" onClick={onIconClick}><IconMic /></View>}
         {!!messageStopHandle && <View className="flex-center" onClick={handleStopClick}><IconStop /></View>}
     </View>
   }
-  return <>
-
-      <WemetaInput
+  return <View className="flex flex-col gap-12">
+      <WemetaTextarea
       	adjustPosition={false}
         disabled={disabled}
-        style={{'borderRadius': '10px'}}
-        confirmType="send"
-        suffix={iconButton}
+        style={{'borderRadius': '10px', maxHeight: '120px', 'lineHeight': '24px'}}
+        autoHeight
         placeholder="有问题尽管问我..."
         value={value}
         cursorSpacing={400}
-        onConfirm={handleConfirm}
+        // onConfirm={handleConfirm}
+        suffix={renderExtra}
         onInput={(value: any) => handleInput(value)}
         >
-      </WemetaInput>
-  </>
+      </WemetaTextarea>
+  </View>
 }