diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx index f4ad2110..b3097358 100644 --- a/components/chat-panel.tsx +++ b/components/chat-panel.tsx @@ -1,6 +1,6 @@ 'use client' -import { useEffect, useState, useRef, ChangeEvent } from 'react' +import { useEffect, useState, useRef, ChangeEvent, forwardRef, useImperativeHandle } from 'react' import type { AI, UIState } from '@/app/actions' import { useUIState, useActions } from 'ai/rsc' // Removed import of useGeospatialToolMcp as it's no longer used/available @@ -17,7 +17,11 @@ interface ChatPanelProps { setInput: (value: string) => void } -export function ChatPanel({ messages, input, setInput }: ChatPanelProps) { +export interface ChatPanelRef { + handleAttachmentClick: () => void; +} + +export const ChatPanel = forwardRef(({ messages, input, setInput }, ref) => { const [, setMessages] = useUIState() const { submit, clearChat } = useActions() // Removed mcp instance as it's no longer passed to submit @@ -27,6 +31,12 @@ export function ChatPanel({ messages, input, setInput }: ChatPanelProps) { const formRef = useRef(null) const fileInputRef = useRef(null) + useImperativeHandle(ref, () => ({ + handleAttachmentClick() { + fileInputRef.current?.click() + } + })); + // Detect mobile layout useEffect(() => { const checkMobile = () => { @@ -243,4 +253,5 @@ export function ChatPanel({ messages, input, setInput }: ChatPanelProps) { ) -} +}) +ChatPanel.displayName = 'ChatPanel' diff --git a/components/chat.tsx b/components/chat.tsx index 59c4d914..0a40bd13 100644 --- a/components/chat.tsx +++ b/components/chat.tsx @@ -1,8 +1,8 @@ 'use client' -import { useEffect, useState } from 'react' +import { useEffect, useState, useRef } from 'react' import { usePathname, useRouter } from 'next/navigation' -import { ChatPanel } from './chat-panel' +import { ChatPanel, ChatPanelRef } from './chat-panel' import { ChatMessages } from './chat-messages' import { EmptyScreen } from './empty-screen' import { Mapbox } from './map/mapbox-map' @@ -26,6 +26,11 @@ export function Chat({ id }: ChatProps) { const { activeView } = useProfileToggle(); const [input, setInput] = useState('') const [showEmptyScreen, setShowEmptyScreen] = useState(false) + const chatPanelRef = useRef(null); + + const handleAttachment = () => { + chatPanelRef.current?.handleAttachmentClick(); + }; useEffect(() => { setShowEmptyScreen(messages.length === 0) @@ -80,10 +85,10 @@ export function Chat({ id }: ChatProps) { {activeView ? : }
- +
- +
{showEmptyScreen ? ( diff --git a/components/mobile-icons-bar.tsx b/components/mobile-icons-bar.tsx index a5a2af9a..217154d6 100644 --- a/components/mobile-icons-bar.tsx +++ b/components/mobile-icons-bar.tsx @@ -18,7 +18,11 @@ import { History } from '@/components/history' import { MapToggle } from './map-toggle' import { ModeToggle } from './mode-toggle' -export const MobileIconsBar: React.FC = () => { +interface MobileIconsBarProps { + onAttachmentClick: () => void; +} + +export const MobileIconsBar: React.FC = ({ onAttachmentClick }) => { const [, setMessages] = useUIState() const { clearChat } = useActions() @@ -45,7 +49,7 @@ export const MobileIconsBar: React.FC = () => { -