feat: chat input limt 4 lines and support card message (#286)

* fix: 修复小程序输入框输入超过 4 行是失去焦点的问题

* fix: taro chat 增加 card 节点

* chore: Publish fix/chat_input_4_lines

---------

Co-authored-by: yangyu.1 <yangyu.1@bytedance.com>

Author: tomasyu985

common/changes/@coze/chat-sdk/fix-chat_input_4_lines_2025-07-10-03-56.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@coze/chat-sdk",
+      "comment": "修复小程序输入框输入超过 4 行是失去焦点的问题",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@coze/chat-sdk",
+  "email": "yangyu.1@bytedance.com"
+}

common/changes/@coze/chat-sdk/fix-chat_input_4_lines_2025-07-11-08-55.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@coze/chat-sdk",
+      "comment": "taro chat 增加 card 节点",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@coze/chat-sdk",
+  "email": "yangyu.1@bytedance.com"
+}

packages/chat-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coze/chat-sdk",
-  "version": "0.1.11-beta.18",
+  "version": "0.1.11-beta.19",
   "description": "Coze chat components for taro",
   "license": "MIT",
   "author": "gaoding.devingao@bytedance.com",
@@ -167,4 +167,4 @@
     "css": "Less",
     "framework": "React"
   }
-}
+}

packages/chat-sdk/src/chatflow/helper/chat-service.ts

@@ -262,6 +262,7 @@ export class ChatFlowService extends ChatService {
     bodyData.ext = {
       _caller: this.chatFlowProps?.project?.caller,
       user_id: params.user_id,
+      enable_card: 'true',
     };
     bodyData.suggest_reply_info = params.suggestPromoteInfo
       ? {

packages/chat-sdk/src/libs/ui-kit/chat-input/textarea/index.module.less

@@ -7,8 +7,6 @@
   display: block;
   position: relative;
   box-sizing: border-box;
-  max-height: 80px;
-  overflow: auto;
   &::-webkit-scrollbar {
     width: 6px;
   }
@@ -23,6 +21,7 @@
     font-weight: 400;
     padding: 0;
     line-height: 20px;
+    max-height: 80px;
     box-sizing: border-box;
     background-color: transparent;
 

packages/chat-sdk/src/libs/ui-kit/chat-input/textarea/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useEffect, useRef } from 'react';
+import { FC, useEffect, useRef } from 'react';
 
 import {
   Textarea as TaroTextarea,
@@ -16,22 +16,15 @@ export const Textarea: FC<
     onInputChange: (val: string) => void;
   } & TextareaProps
 > = ({ onSendTextMessage, onInputChange, placeholder, ...rest }) => {
-  const [lineNum, setLineNum] = useState(0);
-  const { value, id = '' } = rest;
+  const { id = '' } = rest;
 
-  const getHeight = usePersistCallback(
-    (lineNumTemp: number) => `${Math.max(1, lineNumTemp) * 20}px`,
-  );
   const handleInputChange = usePersistCallback((val: string) => {
     onInputChange(val);
     if (isWeb) {
       const el = getInputElInWeb();
       if (el) {
         el.style.height = '0px';
-        const scrollHeight = Number(el?.scrollHeight) || 0;
-        const lineNumTemp = Math.floor(scrollHeight / 20);
         el.style.height = 'inherit';
-        setLineNum(lineNumTemp);
       }
     }
   });
@@ -40,11 +33,6 @@ export const Textarea: FC<
     onSendTextMessage,
     handleInputChange,
   });
-  useEffect(() => {
-    if (!value) {
-      setLineNum(0);
-    }
-  }, [value]);
 
   return (
     <View className={styles['input-padding-container']}>
@@ -56,12 +44,10 @@ export const Textarea: FC<
           showConfirmBar={true}
           controlled
           cursorSpacing={20}
+          autoHeight
           placeholder={placeholder}
           placeholderClass={styles.placeholder}
           disableDefaultPadding={true}
-          style={{
-            height: getHeight(lineNum),
-          }}
           onConfirm={() => {
             if (isMini) {
               onSendTextMessage();
@@ -71,10 +57,6 @@ export const Textarea: FC<
             logger.debug('onInputKeyDown: onInput ', event.detail.value);
             handleInputChange(event.detail.value);
           }}
-          onLineChange={event => {
-            logger.debug('ChatInput onLineChange:', event);
-            !isWeb && setLineNum(event.detail.lineCount);
-          }}
           {...rest}
         />
       </View>