feat: add media attachment support to chat interface

Implement comprehensive media file support allowing users to attach images and audio files to chat messages. Add MediaSelector component for file selection, enhance codex client to handle media submissions, and extend stores to manage media attachments alongside file references.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: milisp

src-tauri/capabilities/default.json

@@ -12,6 +12,7 @@
     "dialog:default",
     "shell:default",
     "fs:default",
-    "log:default"
+    "log:default",
+    "dialog:default"
   ]
 }

src-tauri/src/codex_client.rs

@@ -32,7 +32,7 @@ pub struct CodexClient {
 
 impl CodexClient {
     pub async fn new(app: &AppHandle, session_id: String, config: CodexConfig) -> Result<Self> {
-        log::debug!("Creating CodexClient for session: {}", session_id);
+        log::debug!("Creating CodexClient for session and config: {} {:?}", session_id, config);
 
         // Build codex command based on configuration
         let (command, args): (String, Vec<String>) =
@@ -119,18 +119,10 @@ impl CodexClient {
 
                         // API key will be provided via environment variable - no need to modify provider config
 
-                        // Use model from profile if available, otherwise from config
-                        let profile = profiles.get(&config.provider)
-                            .or_else(|| profiles.get(&config.provider.to_lowercase()));
-                        
-                        let model_to_use = if let Some(profile) = profile {
-                            &profile.model
-                        } else {
-                            &config.model
-                        };
-
-                        if !model_to_use.is_empty() {
-                            cmd.arg("-c").arg(format!("model={}", model_to_use));
+                        // Always use model from config (user selection), not from profile
+                        // This ensures user's model choice in the GUI takes precedence
+                        if !config.model.is_empty() {
+                            cmd.arg("-c").arg(format!("model={}", config.model));
                         }
                     } else {
                         // Fallback to original logic for custom providers
@@ -259,9 +251,9 @@ impl CodexClient {
             log::debug!("Starting stdout reader for session: {}", session_id_clone);
 
             while let Ok(Some(line)) = lines.next_line().await {
-                // log::debug!("Received line from codex: {}", line);
+                log::debug!("📥 Received line from codex: {}", line);
                 if let Ok(event) = serde_json::from_str::<Event>(&line) {
-                    // log::debug!("Parsed event: {:?}", event);
+                    log::debug!("📨 Parsed event: {:?}", event);
 
                     // Log the event for debugging
                     if let Some(event_session_id) = get_session_id_from_event(&event) {
@@ -293,6 +285,7 @@ impl CodexClient {
     async fn send_submission(&self, submission: Submission) -> Result<()> {
         if let Some(stdin_tx) = &self.stdin_tx {
             let json = serde_json::to_string(&submission)?;
+            log::debug!("📤 Sending JSON to codex: {}", json);
             stdin_tx.send(json)?;
         }
         Ok(())
@@ -309,6 +302,32 @@ impl CodexClient {
         self.send_submission(submission).await
     }
 
+    pub async fn send_user_input_with_media(&self, message: String, media_paths: Vec<String>) -> Result<()> {
+        log::debug!("🎯 [CodexClient] send_user_input_with_media called:");
+        log::debug!("  💬 message: {}", message);
+        log::debug!("  📸 media_paths: {:?}", media_paths);
+        log::debug!("  📊 media_paths count: {}", media_paths.len());
+        
+        let mut items = vec![InputItem::Text { text: message }];
+        
+        // Add media files as LocalImage items - codex will convert to base64 automatically
+        for path in media_paths {
+            let path_buf = std::path::PathBuf::from(path.clone());
+            log::debug!("  🔗 Adding local image path: {}", path);
+            items.push(InputItem::LocalImage { path: path_buf });
+        }
+        
+        log::debug!("  📦 Total items in submission: {}", items.len());
+        
+        let submission = Submission {
+            id: Uuid::new_v4().to_string(),
+            op: Op::UserInput { items },
+        };
+        
+        log::debug!("  🚀 Sending submission to codex");
+        self.send_submission(submission).await
+    }
+
     pub async fn send_exec_approval(&self, approval_id: String, approved: bool) -> Result<()> {
         let decision = if approved { "allow" } else { "deny" }.to_string();
 

src-tauri/src/commands.rs

@@ -32,6 +32,22 @@ pub async fn send_message(
     codex::send_message(state, session_id, message).await
 }
 
+#[tauri::command]
+pub async fn send_message_with_media(
+    state: State<'_, CodexState>,
+    session_id: String,
+    message: String,
+    media_paths: Vec<String>,
+) -> Result<(), String> {
+    log::debug!("🔄 [Tauri Command] send_message_with_media called:");
+    log::debug!("  📝 session_id: {}", session_id);
+    log::debug!("  💬 message: {}", message);
+    log::debug!("  📸 media_paths: {:?}", media_paths);
+    log::debug!("  📊 media_paths count: {}", media_paths.len());
+    
+    codex::send_message_with_media(state, session_id, message, media_paths).await
+}
+
 #[tauri::command]
 pub async fn approve_execution(
     state: State<'_, CodexState>,

src-tauri/src/lib.rs

@@ -10,7 +10,7 @@ mod utils;
 use commands::{
     approve_execution, check_codex_version, close_session, delete_session_file,
     get_latest_session_id, get_running_sessions, get_session_files, read_session_file, read_history_file,
-    load_sessions_from_disk, pause_session, send_message, start_codex_session, stop_session,
+    load_sessions_from_disk, pause_session, send_message, send_message_with_media, start_codex_session, stop_session,
 };
 use config::{
     add_mcp_server, add_or_update_model_provider, add_or_update_profile, delete_mcp_server,
@@ -52,6 +52,7 @@ pub fn run() {
         .invoke_handler(tauri::generate_handler![
             start_codex_session,
             send_message,
+            send_message_with_media,
             approve_execution,
             stop_session,
             pause_session,

src-tauri/src/protocol.rs

@@ -62,7 +62,11 @@ pub enum SandboxPolicy {
 #[serde(tag = "type", rename_all = "snake_case")]
 pub enum InputItem {
     Text { text: String },
+    /// Pre‑encoded data: URI image.
     Image { image_url: String },
+    /// Local image path provided by the user. This will be converted to an
+    /// `Image` variant (base64 data URL) during request serialization.
+    LocalImage { path: std::path::PathBuf },
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]

src-tauri/src/services/codex.rs

@@ -55,6 +55,32 @@ pub async fn send_message(
     }
 }
 
+pub async fn send_message_with_media(
+    state: State<'_, CodexState>,
+    session_id: String,
+    message: String,
+    media_paths: Vec<String>,
+) -> Result<(), String> {
+    log::debug!("🚀 [Codex Service] send_message_with_media called:");
+    log::debug!("  📝 session_id: {}", session_id);
+    log::debug!("  💬 message: {}", message);
+    log::debug!("  📸 media_paths: {:?}", media_paths);
+    log::debug!("  📊 media_paths count: {}", media_paths.len());
+    
+    let mut sessions = state.sessions.lock().await;
+    if let Some(client) = sessions.get_mut(&session_id) {
+        log::debug!("✅ Session found, sending to client");
+        client
+            .send_user_input_with_media(message, media_paths)
+            .await
+            .map_err(|e| format!("Failed to send message with media: {}", e))?;
+        Ok(())
+    } else {
+        log::error!("❌ Session not found: {}", session_id);
+        Err("Session not found".to_string())
+    }
+}
+
 pub async fn approve_execution(
     state: State<'_, CodexState>,
     session_id: String,

src/components/chat/ChatInput.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Button } from '../ui/button';
 import { Textarea } from '../ui/textarea';
 import { Badge } from '../ui/badge';
-import { Send, AtSign, X, ChevronUp, Cpu, Square } from 'lucide-react';
+import { Send, AtSign, X, ChevronUp, Cpu, Square, Image, Music, FileX } from 'lucide-react';
 import {
   Tooltip,
   TooltipContent,
@@ -18,11 +18,12 @@ import { useChatInputStore } from '../../stores/chatInputStore';
 import { useSettingsStore } from '../../stores/SettingsStore';
 import { useModelStore } from '../../stores/ModelStore';
 import { ConfigService } from '../../services/configService';
+import { MediaSelector } from './MediaSelector';
 
 interface ChatInputProps {
   inputValue: string;
   onInputChange: (value: string) => void;
-  onSendMessage: (message: string) => void;
+  onSendMessage: (messageData: string | { text: string; mediaAttachments?: any[] }) => void;
   onStopStreaming?: () => void;
   disabled?: boolean;
   isLoading?: boolean;
@@ -40,8 +41,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 }) => {
   const {
     fileReferences,
+    mediaAttachments,
     removeFileReference,
+    removeMediaAttachment,
     clearFileReferences,
+    clearMediaAttachments,
   } = useChatInputStore();
 
   const { providers } = useSettingsStore();
@@ -141,9 +145,19 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       messageContent = `${smartPrompt}\n\n${inputValue}`;
     }
 
-    onSendMessage(messageContent);
+    // Pass media attachments along with the message
+    const messageParts = {
+      text: messageContent,
+      mediaAttachments: mediaAttachments.length > 0 ? mediaAttachments : undefined
+    };
+
+    console.log("📤 ChatInput: Sending message parts:", messageParts);
+    console.log("📸 Media attachments count:", mediaAttachments.length);
+    
+    onSendMessage(messageParts);
     onInputChange('');
     clearFileReferences();
+    clearMediaAttachments();
   };
 
   const handleStopStreaming = () => {
@@ -199,16 +213,68 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           </Button>
         </div>
       )}
+
+      {/* Media attachments display */}
+      {mediaAttachments.length > 0 && (
+        <div className="mb-3 flex flex-wrap gap-2 items-center">
+          {mediaAttachments.map((attachment) => (
+            <TooltipProvider key={attachment.id}>
+              <Tooltip>
+                <TooltipTrigger>
+                  <Badge
+                    variant="outline"
+                    className="flex items-center gap-2 cursor-pointer hover:bg-gray-50 px-3 py-1"
+                  >
+                    {attachment.type === 'image' ? (
+                      <Image className="w-3 h-3 text-blue-500" />
+                    ) : (
+                      <Music className="w-3 h-3 text-green-500" />
+                    )}
+                    <span className="text-xs font-medium">{attachment.name}</span>
+                    <X
+                      className="w-3 h-3 hover:bg-gray-300 rounded"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        removeMediaAttachment(attachment.id);
+                      }}
+                    />
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="text-xs">
+                    <p>{attachment.path}</p>
+                    <p className="text-gray-500 mt-1">{attachment.type} • {attachment.mimeType}</p>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          ))}
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={clearMediaAttachments}
+            className="h-6 px-2 text-xs text-gray-500 hover:text-gray-700"
+          >
+            <FileX className="w-3 h-3 mr-1" />
+            Clear media
+          </Button>
+        </div>
+      )}
 
       <div className="flex gap-2">
-        <Textarea
-          value={inputValue}
-          onChange={(e) => onInputChange(e.target.value)}
-          onKeyDown={handleKeyPress}
-          placeholder={placeholderOverride || "Type your message..."}
-          className="flex-1 min-h-[40px] max-h-[120px]"
-          disabled={false}
-        />
+        <div className="flex-1 relative">
+          <Textarea
+            value={inputValue}
+            onChange={(e) => onInputChange(e.target.value)}
+            onKeyDown={handleKeyPress}
+            placeholder={placeholderOverride || "Type your message..."}
+            className="min-h-[40px] max-h-[120px] pr-10"
+            disabled={false}
+          />
+          <div className="absolute right-2 top-2">
+            <MediaSelector />
+          </div>
+        </div>
         {isLoading ? (
           <Button
             onClick={handleStopStreaming}