autocomplete now working

canvas/examples/autocomplete.rs

@@ -0,0 +1,412 @@
+// examples/autocomplete.rs
+// Run with: cargo run --example autocomplete --features "autocomplete,gui"
+
+use std::io;
+use crossterm::{
+    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyModifiers},
+    execute,
+    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    layout::{Constraint, Direction, Layout},
+    style::Color,
+    text::{Line, Span},
+    widgets::{Block, Borders, Paragraph},
+    Frame, Terminal,
+};
+
+use canvas::{
+    canvas::{
+        gui::render_canvas,
+        modes::AppMode,
+        state::{ActionContext, CanvasState},
+        theme::CanvasTheme,
+    },
+    autocomplete::{
+        AutocompleteCanvasState, 
+        AutocompleteState, 
+        SuggestionItem,
+        execute_with_autocomplete,
+        handle_autocomplete_feature_action,
+    },
+    CanvasAction,
+};
+
+// Simple theme implementation
+#[derive(Clone)]
+struct DemoTheme;
+
+impl CanvasTheme for DemoTheme {
+    fn bg(&self) -> Color { Color::Reset }
+    fn fg(&self) -> Color { Color::White }
+    fn accent(&self) -> Color { Color::Cyan }
+    fn secondary(&self) -> Color { Color::Gray }
+    fn highlight(&self) -> Color { Color::Yellow }
+    fn highlight_bg(&self) -> Color { Color::DarkGray }
+    fn warning(&self) -> Color { Color::Red }
+    fn border(&self) -> Color { Color::Gray }
+}
+
+// Custom suggestion data type
+#[derive(Clone, Debug)]
+struct EmailSuggestion {
+    email: String,
+    provider: String,
+}
+
+// Demo form state with autocomplete
+struct AutocompleteFormState {
+    fields: Vec<String>,
+    field_names: Vec<String>,
+    current_field: usize,
+    cursor_pos: usize,
+    mode: AppMode,
+    has_changes: bool,
+    debug_message: String,
+    
+    // Autocomplete state
+    autocomplete: AutocompleteState<EmailSuggestion>,
+}
+
+impl AutocompleteFormState {
+    fn new() -> Self {
+        Self {
+            fields: vec![
+                "John Doe".to_string(),
+                "john@".to_string(), // Partial email to demonstrate autocomplete
+                "+1 234 567 8900".to_string(),
+                "San Francisco".to_string(),
+            ],
+            field_names: vec![
+                "Name".to_string(),
+                "Email".to_string(),
+                "Phone".to_string(),
+                "City".to_string(),
+            ],
+            current_field: 1, // Start on email field
+            cursor_pos: 5, // Position after "john@"
+            mode: AppMode::Edit,
+            has_changes: false,
+            debug_message: "Type in email field, Tab to trigger autocomplete, Enter to select, Esc to cancel".to_string(),
+            autocomplete: AutocompleteState::new(),
+        }
+    }
+}
+
+impl CanvasState for AutocompleteFormState {
+    fn current_field(&self) -> usize { self.current_field }
+    fn current_cursor_pos(&self) -> usize { self.cursor_pos }
+    fn set_current_field(&mut self, index: usize) { 
+        self.current_field = index.min(self.fields.len().saturating_sub(1));
+        // Clear autocomplete when changing fields
+        if self.is_autocomplete_active() {
+            self.clear_autocomplete_suggestions();
+        }
+    }
+    fn set_current_cursor_pos(&mut self, pos: usize) { 
+        let max_pos = if self.mode == AppMode::Edit {
+            self.fields[self.current_field].len()
+        } else {
+            self.fields[self.current_field].len().saturating_sub(1)
+        };
+        self.cursor_pos = pos.min(max_pos);
+    }
+    fn current_mode(&self) -> AppMode { self.mode }
+    fn get_current_input(&self) -> &str { &self.fields[self.current_field] }
+    fn get_current_input_mut(&mut self) -> &mut String { &mut self.fields[self.current_field] }
+    fn inputs(&self) -> Vec<&String> { self.fields.iter().collect() }
+    fn fields(&self) -> Vec<&str> { self.field_names.iter().map(|s| s.as_str()).collect() }
+    fn has_unsaved_changes(&self) -> bool { self.has_changes }
+    fn set_has_unsaved_changes(&mut self, changed: bool) { self.has_changes = changed; }
+
+    fn handle_feature_action(&mut self, action: &CanvasAction, _context: &ActionContext) -> Option<String> {
+        // Handle autocomplete actions first
+        if let Some(result) = handle_autocomplete_feature_action(action, self) {
+            return Some(result);
+        }
+
+        // Handle other custom actions
+        match action {
+            CanvasAction::Custom(cmd) => {
+                match cmd.as_str() {
+                    "toggle_mode" => {
+                        self.mode = match self.mode {
+                            AppMode::Edit => AppMode::ReadOnly,
+                            AppMode::ReadOnly => AppMode::Edit,
+                            _ => AppMode::Edit,
+                        };
+                        Some(format!("Switched to {:?} mode", self.mode))
+                    }
+                    _ => None,
+                }
+            }
+            _ => None,
+        }
+    }
+}
+
+impl AutocompleteCanvasState for AutocompleteFormState {
+    type SuggestionData = EmailSuggestion;
+
+    fn supports_autocomplete(&self, field_index: usize) -> bool {
+        // Only enable autocomplete for email field (index 1)
+        field_index == 1
+    }
+
+    fn autocomplete_state(&self) -> Option<&AutocompleteState<Self::SuggestionData>> {
+        Some(&self.autocomplete)
+    }
+
+    fn autocomplete_state_mut(&mut self) -> Option<&mut AutocompleteState<Self::SuggestionData>> {
+        Some(&mut self.autocomplete)
+    }
+
+    fn should_trigger_autocomplete(&self) -> bool {
+        let current_input = self.get_current_input();
+        let current_field = self.current_field();
+        
+        // Trigger for email field when we have "@" and at least 1 more character
+        self.supports_autocomplete(current_field) && 
+        current_input.contains('@') &&
+        current_input.len() > current_input.find('@').unwrap_or(0) + 1 &&
+        !self.is_autocomplete_active()
+    }
+
+    /// This is where the magic happens - user implements their own async fetching
+    async fn trigger_autocomplete_suggestions(&mut self) {
+        // 1. Activate UI (shows loading spinner)
+        self.activate_autocomplete();
+        self.set_autocomplete_loading(true);
+
+        // 2. Get current input for querying
+        let query = self.get_current_input().to_string();
+        
+        // 3. Extract domain part from email
+        let domain_part = if let Some(at_pos) = query.find('@') {
+            query[at_pos + 1..].to_string()
+        } else {
+            self.set_autocomplete_loading(false);
+            return; // No @ symbol, can't suggest
+        };
+
+        // 4. SIMULATE ASYNC API CALL (in real code, this would be HTTP request)
+        let email_prefix = query[..query.find('@').unwrap()].to_string();
+        let suggestions = tokio::task::spawn_blocking(move || {
+            // Simulate network delay
+            std::thread::sleep(std::time::Duration::from_millis(200));
+            
+            // Create mock suggestions based on domain input
+            let popular_domains = vec![
+                ("gmail.com", "Gmail"),
+                ("yahoo.com", "Yahoo Mail"), 
+                ("outlook.com", "Outlook"),
+                ("hotmail.com", "Hotmail"),
+                ("company.com", "Company Email"),
+                ("university.edu", "University"),
+            ];
+            
+            let mut results = Vec::new();
+            
+            for (domain, provider) in popular_domains {
+                if domain.starts_with(&domain_part) || domain_part.is_empty() {
+                    let full_email = format!("{}@{}", email_prefix, domain);
+                    results.push(SuggestionItem::new(
+                        EmailSuggestion {
+                            email: full_email.clone(),
+                            provider: provider.to_string(),
+                        },
+                        format!("{} ({})", full_email, provider), // display text
+                        full_email, // value to store
+                    ));
+                }
+            }
+            
+            results
+        }).await.unwrap_or_default();
+
+        // 5. Provide suggestions back to library
+        self.set_autocomplete_suggestions(suggestions);
+    }
+}
+
+async fn handle_key_press(key: KeyCode, modifiers: KeyModifiers, state: &mut AutocompleteFormState) -> bool {
+    if key == KeyCode::F(10) || (key == KeyCode::Char('c') && modifiers.contains(KeyModifiers::CONTROL)) {
+        return false; // Quit
+    }
+
+    let action = match key {
+        // === AUTOCOMPLETE KEYS ===
+        KeyCode::Tab => {
+            if state.is_autocomplete_active() {
+                Some(CanvasAction::SuggestionDown) // Navigate suggestions
+            } else if state.supports_autocomplete(state.current_field()) {
+                Some(CanvasAction::TriggerAutocomplete) // Manual trigger
+            } else {
+                Some(CanvasAction::NextField) // Normal tab
+            }
+        }
+        
+        KeyCode::BackTab => {
+            if state.is_autocomplete_active() {
+                Some(CanvasAction::SuggestionUp)
+            } else {
+                Some(CanvasAction::PrevField)
+            }
+        }
+        
+        KeyCode::Enter => {
+            if state.is_autocomplete_active() {
+                Some(CanvasAction::SelectSuggestion) // Apply suggestion
+            } else {
+                Some(CanvasAction::NextField)
+            }
+        }
+        
+        KeyCode::Esc => {
+            if state.is_autocomplete_active() {
+                Some(CanvasAction::ExitSuggestions) // Close autocomplete
+            } else {
+                Some(CanvasAction::Custom("toggle_mode".to_string()))
+            }
+        }
+
+        // === STANDARD CANVAS KEYS ===
+        KeyCode::Left => Some(CanvasAction::MoveLeft),
+        KeyCode::Right => Some(CanvasAction::MoveRight),
+        KeyCode::Up => Some(CanvasAction::MoveUp),
+        KeyCode::Down => Some(CanvasAction::MoveDown),
+        KeyCode::Home => Some(CanvasAction::MoveLineStart),
+        KeyCode::End => Some(CanvasAction::MoveLineEnd),
+        KeyCode::Backspace => Some(CanvasAction::DeleteBackward),
+        KeyCode::Delete => Some(CanvasAction::DeleteForward),
+        
+        // Character input
+        KeyCode::Char(c) if !modifiers.contains(KeyModifiers::CONTROL) => {
+            Some(CanvasAction::InsertChar(c))
+        }
+        
+        _ => None,
+    };
+
+    if let Some(action) = action {
+        match execute_with_autocomplete(action.clone(), state).await {
+            Ok(result) => {
+                if let Some(msg) = result.message() {
+                    state.debug_message = msg.to_string();
+                } else {
+                    state.debug_message = format!("Executed: {:?}", action);
+                }
+                true
+            }
+            Err(e) => {
+                state.debug_message = format!("Error: {}", e);
+                true
+            }
+        }
+    } else {
+        state.debug_message = format!("Unhandled key: {:?}", key);
+        true
+    }
+}
+
+async fn run_app<B: Backend>(terminal: &mut Terminal<B>, mut state: AutocompleteFormState) -> io::Result<()> {
+    let theme = DemoTheme;
+
+    loop {
+        terminal.draw(|f| ui(f, &state, &theme))?;
+
+        if let Event::Key(key) = event::read()? {
+            let should_continue = handle_key_press(key.code, key.modifiers, &mut state).await;
+            if !should_continue {
+                break;
+            }
+        }
+    }
+
+    Ok(())
+}
+
+fn ui(f: &mut Frame, state: &AutocompleteFormState, theme: &DemoTheme) {
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([
+            Constraint::Min(8),
+            Constraint::Length(5),
+        ])
+        .split(f.area());
+
+    // Render the canvas form
+    let active_field_rect = render_canvas(
+        f,
+        chunks[0],
+        state,
+        theme,
+        state.mode == AppMode::Edit,
+        &canvas::HighlightState::Off,
+    );
+
+    // Render autocomplete dropdown on top if active
+    if let Some(input_rect) = active_field_rect {
+        canvas::render_autocomplete_dropdown(
+            f,
+            chunks[0],
+            input_rect,
+            theme,
+            &state.autocomplete,
+        );
+    }
+
+    // Status info
+    let autocomplete_status = if state.is_autocomplete_active() {
+        if state.autocomplete.is_loading {
+            "Loading suggestions..."
+        } else if state.has_autocomplete_suggestions() {
+            "Use Tab/Shift+Tab to navigate, Enter to select, Esc to cancel"
+        } else {
+            "No suggestions found"
+        }
+    } else {
+        "Tab to trigger autocomplete"
+    };
+
+    let status_lines = vec![
+        Line::from(Span::raw(format!("Mode: {:?} | Field: {}/{} | Cursor: {}", 
+            state.mode, state.current_field + 1, state.fields.len(), state.cursor_pos))),
+        Line::from(Span::raw(format!("Autocomplete: {}", autocomplete_status))),
+        Line::from(Span::raw(state.debug_message.clone())),
+        Line::from(Span::raw("F10: Quit | Tab: Trigger/Navigate autocomplete | Enter: Select | Esc: Cancel/Toggle mode")),
+    ];
+
+    let status = Paragraph::new(status_lines)
+        .block(Block::default().borders(Borders::ALL).title("Status & Help"));
+
+    f.render_widget(status, chunks[1]);
+}
+
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    let state = AutocompleteFormState::new();
+
+    let res = run_app(&mut terminal, state).await;
+
+    disable_raw_mode()?;
+    execute!(
+        terminal.backend_mut(),
+        LeaveAlternateScreen,
+        DisableMouseCapture
+    )?;
+    terminal.show_cursor()?;
+
+    if let Err(err) = res {
+        println!("{:?}", err);
+    }
+
+    Ok(())
+}