feat(mobile): Enable attachment button functionality

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<ChatPanelRef, ChatPanelProps>(({ messages, input, setInput }, ref) => {
   const [, setMessages] = useUIState<typeof AI>()
   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<HTMLFormElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
+  useImperativeHandle(ref, () => ({
+    handleAttachmentClick() {
+      fileInputRef.current?.click()
+    }
+  }));
+
   // Detect mobile layout
   useEffect(() => {
     const checkMobile = () => {
@@ -243,4 +253,5 @@ export function ChatPanel({ messages, input, setInput }: ChatPanelProps) {
       </form>
     </div>
   )
-}
+})
+ChatPanel.displayName = 'ChatPanel'

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<ChatPanelRef>(null);
+
+  const handleAttachment = () => {
+    chatPanelRef.current?.handleAttachmentClick();
+  };
 
   useEffect(() => {
     setShowEmptyScreen(messages.length === 0)
@@ -80,10 +85,10 @@ export function Chat({ id }: ChatProps) {
             {activeView ? <SettingsView /> : <Mapbox />}
           </div>
           <div className="mobile-icons-bar">
-            <MobileIconsBar />
+            <MobileIconsBar onAttachmentClick={handleAttachment} />
           </div>
           <div className="mobile-chat-input-area">
-            <ChatPanel messages={messages} input={input} setInput={setInput} />
+            <ChatPanel ref={chatPanelRef} messages={messages} input={input} setInput={setInput} />
           </div>
           <div className="mobile-chat-messages-area">
             {showEmptyScreen ? (

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<MobileIconsBarProps> = ({ onAttachmentClick }) => {
   const [, setMessages] = useUIState<typeof AI>()
   const { clearChat } = useActions()
 
@@ -45,7 +49,7 @@ export const MobileIconsBar: React.FC = () => {
       <Button variant="ghost" size="icon">
         <TentTree className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
       </Button>
-      <Button variant="ghost" size="icon">
+      <Button variant="ghost" size="icon" onClick={onAttachmentClick}>
         <Paperclip className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
       </Button>
       <Button variant="ghost" size="icon">

dev.log

@@ -0,0 +1,7 @@
+ ⚠ Port 3000 is in use, using available port 3001 instead.
+   ▲ Next.js 15.3.3 (Turbopack)
+   - Local:        http://localhost:3001
+   - Network:      http://192.168.0.2:3001
+   - Environments: .env.local, .env
+
+ ✓ Starting...