✨ feat: input 替换为 textarea，可以扩展到最多四列

lobehub · May 2, 2024 · 74c9d54 · 74c9d54
1 parent a696c24
commit 74c9d54
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/src/features/AgentViewer/style.ts b/src/features/AgentViewer/style.ts
@@ -22,7 +22,7 @@ export const useStyles = createStyles(({ css, token }) => ({
 
     display: flex;
 
-    width: ${CHAT_INPUT_WIDTH};
+    max-width: ${CHAT_INPUT_WIDTH};
   `,
   viewer: css`
     width: 100%;

diff --git a/src/features/ChatDialog/index.tsx b/src/features/ChatDialog/index.tsx
@@ -1,8 +1,10 @@
 import { ActionIcon } from '@lobehub/ui';
+import { useHover } from 'ahooks';
 import { Tooltip } from 'antd';
 import classNames from 'classnames';
 import { XIcon } from 'lucide-react';
 import React from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import ChatItem from '@/features/ChatItem';
 import { sessionSelectors, useSessionStore } from '@/store/session';
@@ -20,22 +22,24 @@ const Dialog = (props: DialogProps) => {
   const { className, style, setOpen } = props;
   const currentChats = useSessionStore((s) => sessionSelectors.currentChats(s));
   const lastAgentChatIndex = currentChats.findLastIndex((item) => item.role === 'assistant');
+  const ref = React.useRef<HTMLDivElement>(null);
+  const isHovered = useHover(ref);
 
   const handleClose = () => {
     if (setOpen) setOpen(false);
   };
   return lastAgentChatIndex !== -1 ? (
-    <div className={classNames(styles.dialog, className)} style={style}>
+    <Flexbox className={classNames(styles.dialog, className)} style={style} ref={ref} horizontal>
       <ChatItem
         id={currentChats[lastAgentChatIndex].id}
         index={lastAgentChatIndex}
         showTitle={true}
         type="pure"
       />
       <Tooltip key="close" title="关闭">
-        <ActionIcon icon={XIcon} onClick={handleClose} />
+        <ActionIcon icon={XIcon} onClick={handleClose} style={{ opacity: isHovered ? 1 : 0 }} />
       </Tooltip>
-    </div>
+    </Flexbox>
   ) : null;
 };
 

diff --git a/src/features/ChatInput/MessageInput/index.tsx b/src/features/ChatInput/MessageInput/index.tsx
@@ -1,12 +1,11 @@
 import { SendOutlined } from '@ant-design/icons';
-import { Input } from '@lobehub/ui';
+import { TextArea } from '@lobehub/ui';
 import { Button } from 'antd';
 import { InputRef } from 'antd/es/input/Input';
 import React, { memo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import Record from '@/features/Actions/Record';
-import TokenMini from '@/features/Actions/TokenMini';
 import useChatInput from '@/hooks/useSendMessage';
 import { useSessionStore } from '@/store/session';
 import { isCommandPressed } from '@/utils/keyboard';
@@ -31,8 +30,7 @@ const InputArea = memo((props: InputAreaProps) => {
   return (
     <Flexbox width={'100%'} horizontal gap={4} className={className} style={style}>
       <Record />
-      <Input
-        width={'100%'}
+      <TextArea
         autoFocus
         onBlur={(e) => {
           setMessageInput?.(e.target.value);
@@ -59,7 +57,7 @@ const InputArea = memo((props: InputAreaProps) => {
         }}
         placeholder="请输入内容开始聊天"
         ref={ref}
-        suffix={<TokenMini />}
+        autoSize={{ minRows: 1, maxRows: 4 }}
         type={'block'}
         value={messageInput}
       />