购物网站界面设计策划,自建服务器做网站,沈阳网站开发技术公司,网站模板 扁平化一、Chat页面输入框的修改 1. macOS配置
我使用MacBook Pro#xff0c;chip 是 Apple M3 Pro#xff0c;Memory是18GB#xff0c;macOS是 Sonoma 14.6.1。
2. 修改chat输入框代码
目前RAGFlow前端的chat功能#xff0c;输入的内容是单行的#xff0c;不能主动使用Shift… 一、Chat页面输入框的修改 1. macOS配置
我使用MacBook Prochip 是 Apple M3 ProMemory是18GBmacOS是 Sonoma 14.6.1。
2. 修改chat输入框代码
目前RAGFlow前端的chat功能输入的内容是单行的不能主动使用ShiftEnter实现分行。根据 src/pages/chat/index.tsx 文件可以看出该文件是聊天页面的主入口整体结构是将聊天内容通过 ChatContainer / 组件呈现。因此如果要实现多行文本框功能主要修改点会在 ChatContainer 组件的实现中。
在 chat/chat-container/index.tsx 中可以看到消息输入功能是通过 MessageInput / 组件实现的。如果需要将单行输入框改为支持多行输入的 TextArea需要修改 MessageInput 组件的实现。
修改src/components/message-input/index.tsx的代码如下
return (FlexclassName{styles.messageInputWrapper}style{{backgroundColor: #f7f8fa, // 淡灰色背景border: 1px solid #e0e0e0, // 外部边框颜色borderRadius: 12px, // 圆角增加为原来的 1.5 倍padding: 10px 12px, // 内边距boxShadow: 0 2px 8px rgba(0, 0, 0, 0.1), // 添加阴影}}vertical{/* 输入框 */}Input.TextAreasizelargeplaceholder{t(sendPlaceholder)}value{value}disabled{disabled}autoSize{{ minRows: 1, maxRows: 6 }} // 默认一行自动调整至 6 行style{{flex: 1,border: none, // 禁用自带边框outline: none, // 去掉选中高亮boxShadow: none, // 禁用焦点样式resize: none, // 禁用用户手动调整大小fontSize: 14px,lineHeight: 20px, // 行高保证单行内容视觉效果padding: 0, // 去掉多余的填充// overflow: hidden, // 禁止滚动条显示backgroundColor: #f7f8fa, // 与外层背景色一致}}onPressEnter{(e) {if (!e.shiftKey) {e.preventDefault();handlePressEnter();}}}onChange{onInputChange as ChangeEventHandlerHTMLTextAreaElement}/{/* 按钮区域 */}Flexjustifyspace-betweenaligncenterstyle{{marginTop: 8px,}}{showUploadIcon (UploadonPreview{handlePreview}onChange{handleChange}multiple{false}onRemove{handleRemove}showUploadList{false}beforeUpload{() {return false;}}Buttontype{text}disabled{disabled}icon{SvgIconnamepaper-clipwidth{18}height{22}disabled{disabled}/SvgIcon}/Button/Upload)}ButtontypeprimaryonClick{handlePressEnter}loading{sendLoading}disabled{sendDisabled || isUploadingFile}style{{height: 40px,borderRadius: 12px, // 按钮圆角同步调整padding: 0 16px,}}{t(send)}/Button/Flex实际页面输入效果如下 2.1 替换Input为 Input.TextArea
将 Input 替换为 Input.TextArea并添加 autoSize 属性以实现多行输入框的自动伸缩功能。
2.2 修改发送逻辑
在原有逻辑中按 Enter 会直接触发消息发送。对于多行输入框需要支持 按 Shift Enter 换行。 按 Enter 发送消息。
上面代码中onPressEnter 事件已经处理了此逻辑。 二、Agent Flow页面中输入框的修改 项目的Agent页面上还有chat改了component下的message-input对这个chat不起作用。修改src/pages/flow/box.tsx关键点说明 Input.TextArea 的使用 替换了原来的 Input支持多行输入。autoSize 参数允许输入框高度根据内容自动扩展。 Shift Enter 处理 检测 e.shiftKey 是否被按下。当 Shift 被按下时不触发消息发送只换行。当未按下 Shift 时发送消息并阻止默认行为。 suffix 按钮 保留了发送按钮的逻辑用户也可以点击按钮发送消息。
return (Flex flex{1} className{styles.chatContainer} verticalFlex flex{1} vertical className{styles.messageContainer}divSpin spinning{loading}{derivedMessages?.map((message, i) {return (MessageItemloading{message.role MessageType.Assistant sendLoading derivedMessages.length - 1 i}key{message.id}nickname{userInfo.nickname}avatar{userInfo.avatar}item{message}reference{buildMessageItemReference({ message: derivedMessages, reference },message,)}clickDocumentButton{clickDocumentButton}index{i}showLikeButton{false}sendLoading{sendLoading}/MessageItem);})}/Spin/divdiv ref{ref} //FlexFlexalignflex-start // 改为 flex-start使内容顶部对齐style{{padding: 12px 20px,backgroundColor: #ffffff, // 白色背景borderTop: 1px solid #e8e8e8, // 分割线颜色position: sticky, // 固定在底部bottom: 0,zIndex: 100, // 确保浮于内容上方}}Input.TextAreaplaceholder{t(sendPlaceholder)}value{value}autoSize{{ minRows: 1, maxRows: 6 }} // 自动调整高度onChange{handleInputChange as React.ChangeEventHandlerHTMLTextAreaElement}onPressEnter{(e) {if (!e.shiftKey) { // ShiftEnter 换行e.preventDefault();handlePressEnter();}}}style{{flex: 1,border: 1px solid #e0e0e0, // 边框颜色borderRadius: 8px, // 圆角边框padding: 10px 12px,fontSize: 14px,lineHeight: 20px,boxShadow: none, // 去除阴影resize: none, // 禁止拖动调整大小}}/ButtontypeprimaryonClick{handlePressEnter}loading{sendLoading}style{{marginLeft: 10px,borderRadius: 8px,padding: 0 16px,height: 40px,fontSize: 14px,display: flex,alignItems: center, // 保持内容居中justifyContent: center,marginTop: auto, // 自动保持按钮与输入框底部对齐}}{t(send)}/Button/Flex/FlexPdfDrawervisible{visible}hideModal{hideModal}documentId{documentId}chunk{selectedChunk}/PdfDrawer/);
实际页面输入效果如下 三、消息框中的显示内容的修改
虽然对话的多行输入没有问题了对话chat上的消息显示没有跟随输入分行只是将分行的地方加了一个空格显得很怪异现在将chat的消息显示也适配一下多行。 1. 修改src/components/message-item/index.tsx:
要实现消息内容中的换行处理确保用户输入的内容能够正确地显示多行我们需要确保在 MessageItem 组件中渲染消息文本时能够正确处理换行符。
修改目标
支持多行显示当用户发送多行消息时确保文本能够按行显示而不仅仅是将换行符替换为空格。CSS 样式处理通过合适的 CSS 属性如 white-space: pre-line来保留换行符。
主要改动
在 MessageItem 组件中确保显示消息的部分使用正确的 white-space 样式。如果 item.content 包含换行符它们将被正确处理并显示为多行。
import { ReactComponent as AssistantIcon } from /assets/svg/assistant.svg;
import { MessageType } from /constants/chat;
import { useSetModalState } from /hooks/common-hooks;
import { IReference } from /interfaces/database/chat;
import { IChunk } from /interfaces/database/knowledge;
import classNames from classnames;
import { memo, useCallback, useEffect, useMemo, useState } from react;import {useFetchDocumentInfosByIds,useFetchDocumentThumbnailsByIds,
} from /hooks/document-hooks;
import { IRegenerateMessage, IRemoveMessageById } from /hooks/logic-hooks;
import { IMessage } from /pages/chat/interface;
import MarkdownContent from /pages/chat/markdown-content;
import { getExtension, isImage } from /utils/document-util;
import { Avatar, Button, Flex, List, Space, Typography } from antd;
import FileIcon from ../file-icon;
import IndentedTreeModal from ../indented-tree/modal;
import NewDocumentLink from ../new-document-link;
import { AssistantGroupButton, UserGroupButton } from ./group-button;
import styles from ./index.less;const { Text } Typography;interface IProps extends PartialIRemoveMessageById, IRegenerateMessage {item: IMessage;reference: IReference;loading?: boolean;sendLoading?: boolean;nickname?: string;avatar?: string;clickDocumentButton?: (documentId: string, chunk: IChunk) void;index: number;showLikeButton?: boolean;
}const MessageItem ({item,reference,loading false,avatar ,sendLoading false,clickDocumentButton,index,removeMessageById,regenerateMessage,showLikeButton true,
}: IProps) {const isAssistant item.role MessageType.Assistant;const isUser item.role MessageType.User;const { data: documentList, setDocumentIds } useFetchDocumentInfosByIds();const { data: documentThumbnails, setDocumentIds: setIds } useFetchDocumentThumbnailsByIds();const { visible, hideModal, showModal } useSetModalState();const [clickedDocumentId, setClickedDocumentId] useState();const referenceDocumentList useMemo(() {return reference?.doc_aggs ?? [];}, [reference?.doc_aggs]);const handleUserDocumentClick useCallback((id: string) () {setClickedDocumentId(id);showModal();},[showModal],);const handleRegenerateMessage useCallback(() {regenerateMessage?.(item);}, [regenerateMessage, item]);useEffect(() {const ids item?.doc_ids ?? [];if (ids.length) {setDocumentIds(ids);const documentIds ids.filter((x) !(x in documentThumbnails));if (documentIds.length) {setIds(documentIds);}}}, [item.doc_ids, setDocumentIds, setIds, documentThumbnails]);return (divclassName{classNames(styles.messageItem, {[styles.messageItemLeft]: item.role MessageType.Assistant,[styles.messageItemRight]: item.role MessageType.User,})}sectionclassName{classNames(styles.messageItemSection, {[styles.messageItemSectionLeft]: item.role MessageType.Assistant,[styles.messageItemSectionRight]: item.role MessageType.User,})}divclassName{classNames(styles.messageItemContent, {[styles.messageItemContentReverse]: item.role MessageType.User,})}{item.role MessageType.User ? (Avatarsize{40}src{avatar ??https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png}/) : (AssistantIcon/AssistantIcon)}Flex vertical gap{8} flex{1}Space{isAssistant ? (index ! 0 (AssistantGroupButtonmessageId{item.id}content{item.content}prompt{item.prompt}showLikeButton{showLikeButton}audioBinary{item.audio_binary}/AssistantGroupButton)) : (UserGroupButtoncontent{item.content}messageId{item.id}removeMessageById{removeMessageById}regenerateMessage{regenerateMessage handleRegenerateMessage}sendLoading{sendLoading}/UserGroupButton)}{/* b{isAssistant ? : nickname}/b */}/SpacedivclassName{isAssistant ? styles.messageText : styles.messageUserText}style{{ whiteSpace: pre-line }} // 保留换行符并自动换行MarkdownContentloading{loading}content{item.content}reference{reference}clickDocumentButton{clickDocumentButton}/MarkdownContent/div{isAssistant referenceDocumentList.length 0 (ListbordereddataSource{referenceDocumentList}renderItem{(item) {return (List.ItemFlex gap{small} aligncenterFileIconid{item.doc_id}name{item.doc_name}/FileIconNewDocumentLinkdocumentId{item.doc_id}documentName{item.doc_name}prefixdocument{item.doc_name}/NewDocumentLink/Flex/List.Item);}}/)}{isUser documentList.length 0 (ListbordereddataSource{documentList}renderItem{(item) {// TODO:const fileThumbnail documentThumbnails[item.id] || documentThumbnails[item.id];const fileExtension getExtension(item.name);return (List.ItemFlex gap{small} aligncenterFileIcon id{item.id} name{item.name}/FileIcon{isImage(fileExtension) ? (NewDocumentLinkdocumentId{item.id}documentName{item.name}prefixdocument{item.name}/NewDocumentLink) : (Buttontype{text}onClick{handleUserDocumentClick(item.id)}Textstyle{{ maxWidth: 40vw }}ellipsis{{ tooltip: item.name }}{item.name}/Text/Button)}/Flex/List.Item);}}/)}/Flex/div/section{visible (IndentedTreeModalvisible{visible}hideModal{hideModal}documentId{clickedDocumentId}/IndentedTreeModal)}/div);
};export default memo(MessageItem); 2. 修改src/components/message-item/index.less:
要确保文本内容特别是多行消息能够正确显示换行符并且样式合理我们可以对现有的 .messageText 和 .messageUserText 样式做一些调整。以下是针对 index.less 样式的改进
关键改动
保留换行符 使用 white-space: pre-line 来保留文本中的换行符\n并且自动换行。避免内容溢出 适当设置 word-break 和 overflow-wrap 属性以确保长单词或无空格的长文本能够正确换行避免溢出。简化重复的 .messageText 和 .messageUserText 样式 让这两者有一个统一的基础样式便于管理。
.messageItem {padding: 24px 0;.messageItemSection {display: inline-block;}.messageItemSectionLeft {width: 80%;}.messageItemSectionRight {// width: 80%;// max-width: 50vw;}.messageItemContent {display: inline-flex;gap: 20px;flex-wrap: wrap; // 允许内容换行}.messageItemContentReverse {flex-direction: row-reverse;}.messageText {.chunkText();padding: 0 14px;background-color: rgba(249, 250, 251, 1);word-break: break-all;}/* 共同的文本样式基础 */.messageTextBase {padding: 6px 10px;border-radius: 8px;word-wrap: break-word; // 强制长单词换行overflow-wrap: break-word; // 强制长单词换行white-space: pre-line; // 保留换行符并换行}/* Assistant 消息文本样式 */.messageText {.chunkText();.messageTextBase();background-color: #e6f4ff;word-break: break-word; // 自动换行}/* User 消息文本样式 */.messageUserText {.chunkText();.messageTextBase();background-color: rgb(248, 247, 247);word-break: break-word; // 自动换行text-align: justify; // 用户消息文本两端对齐}.messageEmpty {width: 300px;}.thumbnailImg {max-width: 20px;}
}.messageItemLeft {text-align: left;
}.messageItemRight {text-align: right;
}实际对话消息显示如下
