Aura
/
aura-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: correct antd TextAreaRef type import

main
sp mac bookpro 2605 2026-06-07 20:40:15 +08:00
parent 26d2c930b5
commit 332464bd35
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/pages/chat/components/ChatInput.tsx
View File

@ -1,5 +1,6 @@
import { ArrowUpOutlined, BookOutlined, CloseOutlined, DownOutlined, PaperClipOutlined } from '@ant-design/icons'; import { ArrowUpOutlined, BookOutlined, CloseOutlined, DownOutlined, PaperClipOutlined } from '@ant-design/icons';
import { Button, Image as AntImage, Input, Select, Tag, Tooltip, Upload, Popover } from 'antd'; import { Button, Image as AntImage, Input, Select, Tag, Tooltip, Upload, Popover } from 'antd';
import type { TextAreaRef } from 'antd/es/input/TextArea';
import type { ChatAttachment } from '../../../api'; import type { ChatAttachment } from '../../../api';
import type { Agent } from '../../../api/agents'; import type { Agent } from '../../../api/agents';
import { HistoryIcon, NewChatIcon } from '../../../components/icons'; import { HistoryIcon, NewChatIcon } from '../../../components/icons';
@ -49,7 +50,7 @@ export default function ChatInput(props: {
const [showMentionPopover, setShowMentionPopover] = useState(false); const [showMentionPopover, setShowMentionPopover] = useState(false);
const [mentionQuery, setMentionQuery] = useState(''); const [mentionQuery, setMentionQuery] = useState('');
const [mentionPos, setMentionPos] = useState<{ top: number; left: number } | null>(null); const [mentionPos, setMentionPos] = useState<{ top: number; left: number } | null>(null);
const inputRef = useRef<HTMLTextAreaElement>(null); const inputRef = useRef<TextAreaRef>(null);
// 检测 @ 触发提及选择 // 检测 @ 触发提及选择
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@ -74,13 +75,13 @@ export default function ChatInput(props: {
console.log('[@mention] matched @ at position:', { atIndex, query }); console.log('[@mention] matched @ at position:', { atIndex, query });
if (!query.includes(' ')) { if (!query.includes(' ')) {
setMentionQuery(query); setMentionQuery(query);
// 计算位置 - 使用 inputRef 获取最新 DOM 位置 // 计算位置 - Ant Design Input.TextArea 需要从 resizableTextArea 获取实际 DOM
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (!(inputRef.current instanceof HTMLTextAreaElement)) { const textarea = inputRef.current?.resizableTextArea?.textArea;
console.log('[@mention] inputRef.current is not textarea:', inputRef.current); if (!textarea) {
console.log('[@mention] cannot get textarea DOM from inputRef:', inputRef.current);
return; return;
} }
const textarea = inputRef.current;
const rect = textarea.getBoundingClientRect(); const rect = textarea.getBoundingClientRect();
console.log('[@mention] textarea rect:', rect); console.log('[@mention] textarea rect:', rect);
setMentionPos({ top: rect.bottom, left: rect.left + 10 }); setMentionPos({ top: rect.bottom, left: rect.left + 10 });
@ -100,7 +101,7 @@ export default function ChatInput(props: {
console.log('[@mention] filtered:', { mentionQuery, count: filteredAgents.length, agents: filteredAgents.map(a => a.name) }); console.log('[@mention] filtered:', { mentionQuery, count: filteredAgents.length, agents: filteredAgents.map(a => a.name) });
const handleSelectAgent = (agent: Agent) => { const handleSelectAgent = (agent: Agent) => {
const textarea = inputRef.current; const textarea = inputRef.current?.resizableTextArea?.textArea;
if (!textarea) return; if (!textarea) return;
const value = input; const value = input;