From b6aaaf73204d071e0d7afb3bba23964592baf6ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Thu, 14 Mar 2024 13:44:15 +0800 Subject: [PATCH] feat: support input render & change api as inputAreaRender (#125) --- docs/guide/demos/renderInputArea.tsx | 8 +-- docs/guide/multimodal.md | 6 +- src/ProChat/components/InputArea/index.tsx | 71 ++++++++++++++-------- src/ProChat/container/App.tsx | 53 +++++++++++++--- src/ProChat/container/index.tsx | 65 +++++++++++++++++--- src/ProChat/demos/renderInputArea.tsx | 4 +- src/ProChat/index.md | 2 +- tsconfig.json | 6 +- 8 files changed, 157 insertions(+), 58 deletions(-) diff --git a/docs/guide/demos/renderInputArea.tsx b/docs/guide/demos/renderInputArea.tsx index bbe1c845..77f8a5ea 100644 --- a/docs/guide/demos/renderInputArea.tsx +++ b/docs/guide/demos/renderInputArea.tsx @@ -6,13 +6,13 @@ import { PlusOutlined } from '@ant-design/icons'; import { ProChat } from '@ant-design/pro-chat'; import { Button, Form, Input, Space, Upload, message } from 'antd'; import { useTheme } from 'antd-style'; -import { ReactNode } from 'react'; +import React from 'react'; export default () => { const theme = useTheme(); - const renderInputArea = ( - _: ReactNode, + const inputAreaRender = ( + _: React.ReactNode, onMessageSend: (message: string) => void | Promise, onClear: () => void, ) => { @@ -76,7 +76,7 @@ export default () => { return (
- +
); }; diff --git a/docs/guide/multimodal.md b/docs/guide/multimodal.md index 2c01817d..9213d690 100644 --- a/docs/guide/multimodal.md +++ b/docs/guide/multimodal.md @@ -22,17 +22,17 @@ nav: ## 自定义输入部分 -我们提供了一个 renderInputArea 的 api，来帮助你对多模态的情况下进行支持，以及和 ProChat 的数据流进行接入和交互 +我们提供了一个 inputAreaRender 的 api，来帮助你对多模态的情况下进行支持，以及和 ProChat 的数据流进行接入和交互 ```ts - renderInputArea?: ( + inputAreaRender?: ( defaultDom: ReactNode, onMessageSend: (message: string) => void | Promise, onClearAllHistory: () => void, ) => ReactNode; ``` -renderInputArea 共有三个参数： +inputAreaRender 共有三个参数： - defaultDom ：即默认渲染的 dom，你如果是想包裹或者添加一些小内容，可以直接在这个基础上进行组合 - onMessageSend ：发送数据的方法，这个方法和 ProChat.sendMessage（Hooks） 本质上是一个方法，用于向 ProChat 的数据流发送一条数据 diff --git a/src/ProChat/components/InputArea/index.tsx b/src/ProChat/components/InputArea/index.tsx index 185a0d65..2af780d7 100644 --- a/src/ProChat/components/InputArea/index.tsx +++ b/src/ProChat/components/InputArea/index.tsx @@ -52,10 +52,14 @@ const useStyles = createStyles(({ css, responsive, token }) => ({ `, })); -type ChatInputAreaProps = { +export type ChatInputAreaProps = { className?: string; onSend?: (message: string) => boolean | Promise; - renderInputArea?: ( + inputRender?: ( + defaultDom: ReactNode, + onMessageSend: (message: string) => void | Promise, + ) => ReactNode; + inputAreaRender?: ( defaultDom: ReactNode, onMessageSend: (message: string) => void | Promise, onClearAllHistory: () => void, @@ -63,7 +67,7 @@ type ChatInputAreaProps = { }; export const ChatInputArea = (props: ChatInputAreaProps) => { - const { className, onSend, renderInputArea } = props || {}; + const { className, onSend, inputAreaRender, inputRender } = props || {}; const [sendMessage, isLoading, placeholder, inputAreaProps, clearMessage, stopGenerateMessage] = useStore((s) => [ s.sendMessage, @@ -93,6 +97,40 @@ export const ChatInputArea = (props: ChatInputAreaProps) => { const prefixClass = getPrefixCls('pro-chat-input-area'); + const defaultInput = ( + { + setMessage(e.target.value); + }} + autoSize={{ maxRows: 8 }} + onCompositionStart={() => { + isChineseInput.current = true; + }} + onCompositionEnd={() => { + isChineseInput.current = false; + }} + onPressEnter={(e) => { + if (!isLoading && !e.shiftKey && !isChineseInput.current) { + e.preventDefault(); + send(); + } + }} + /> + ); + + /** + * 支持下自定义输入框 + */ + const inputDom = inputRender + ? inputRender?.(defaultInput, (message) => { + sendMessage(message); + }) + : defaultInput; + const defaultInputArea = ( { align={'center'} className={cx(styles.boxShadow, `${prefixClass}-text-container`)} > - { - setMessage(e.target.value); - }} - autoSize={{ maxRows: 8 }} - onCompositionStart={() => { - isChineseInput.current = true; - }} - onCompositionEnd={() => { - isChineseInput.current = false; - }} - onPressEnter={(e) => { - if (!isLoading && !e.shiftKey && !isChineseInput.current) { - e.preventDefault(); - send(); - } - }} - /> + {inputDom} {isLoading ? ( - null} /> + null} /> ); }; diff --git a/src/ProChat/index.md b/src/ProChat/index.md index 4ca6dc04..64b26b6d 100644 --- a/src/ProChat/index.md +++ b/src/ProChat/index.md @@ -80,7 +80,7 @@ ProChat 使用 `meta` 来表意会话双方的头像、名称等信息。设定 ## 自定义输入区域 -有些时候会觉得默认的输入区域不够好用，或是你有一些输入模块的自定义需求，可以使用 renderInputArea 来进行自定义输入，如果不需要输入区域可以传入 `renderInputArea={()=>null}`。 +有些时候会觉得默认的输入区域不够好用，或是你有一些输入模块的自定义需求，可以使用 inputAreaRender 来进行自定义输入，如果不需要输入区域可以传入 `inputAreaRender={()=>null}`。 下面是一个支持图片上传的示范案例，试试上传文件并提交看看吧。 diff --git a/tsconfig.json b/tsconfig.json index 5c6268c3..4a9a8814 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,7 +13,7 @@ "@@/*": [".dumi/tmp/*"], "@/*": ["src/*"], "@ant-design/pro-chat": ["src"], - "@ant-design/pro-chat/*": ["src/*"] - } - } + "@ant-design/pro-chat/*": ["src/*"], + }, + }, }