@pheem49/mint 1.7.0 → 1.8.0

package/Cargo.lock

@@ -2095,7 +2095,7 @@ dependencies = [
 
 [[package]]
 name = "mint-cli"
-version = "1.6.4"
+version = "1.8.0"
 dependencies = [
  "anyhow",
  "base64 0.22.1",
@@ -2113,7 +2113,7 @@ dependencies = [
 
 [[package]]
 name = "mint-core"
-version = "1.6.4"
+version = "1.8.0"
 dependencies = [
  "base64 0.22.1",
  "chrono",
@@ -2134,7 +2134,7 @@ dependencies = [
 
 [[package]]
 name = "mint-desktop"
-version = "1.6.4"
+version = "1.8.0"
 dependencies = [
  "base64 0.22.1",
  "dirs",

package/Cargo.toml

@@ -7,7 +7,7 @@ members = [
 resolver = "2"
 
 [workspace.package]
-version = "1.7.0"
+version = "1.8.0"
 edition = "2024"
 license = "AGPL-3.0-only"
 

package/README.md

@@ -95,6 +95,15 @@ Mint is a local-first AI assistant running on your machine, capable of handling
 - Telegram, Discord Gateway, Discord RPC, Slack Socket Mode, LINE, and WhatsApp
   Cloud API integrations.
 - Signed Tauri update checks with an explicit approval step before installation.
+- Dynamic local Ollama model fetching in the Settings Window to query and display the actual models installed on your machine.
+- Pill-styled clean horizontal system event dividers for provider and model change notifications in the chat panel.
+
+## What's New in v1.8.0
+
+- **Integrated Web Search Settings**: Easily toggle between **Brave Search API** and **Google Custom Search API** directly from the General settings tab.
+- **Image Generation Providers**: Choose and configure credentials for Stability AI, Ideogram, Replicate, OpenAI DALL-E, and Google NanoBanana (Gemini Images) inside dedicated inline settings cards.
+- **Inline Productivity Settings**: Set up Client IDs, secrets, and API keys for native Gmail, Google Calendar, and Notion integrations inline inside the General settings tab.
+- **Revamped Plugins Layout**: Moved **Learned AI Skills** (equivalent to `mint learn` in CLI) to the top of the Plugins tab, followed by MCP Servers (External tools), and Built-in Plugins (Spotify and Discord RPC) at the bottom.
 
 ## <img src="assets/setup.svg" width="24" height="24" valign="middle" /> Prerequisites
 

package/crates/mint-cli/src/agent.rs

@@ -804,7 +804,7 @@ fn format_markdown_bold(text: &str) -> String {
             let mut leading_spaces = 0;
             let mut is_list_item = false;
             let mut marker_char = '-';
-            
+
             for (idx, c) in line.char_indices() {
                 if c.is_whitespace() {
                     leading_spaces += c.len_utf8();

package/crates/mint-cli/src/main.rs

@@ -1109,7 +1109,9 @@ fn process_inline_bold(s: &str) -> String {
 fn format_line(line: &str) -> String {
     let mut formatted = line.to_string();
     let trimmed = line.trim_start();
-    if (trimmed.starts_with("- ") || trimmed.starts_with("* ") || trimmed.starts_with("+ ")) && trimmed.len() >= 2 {
+    if (trimmed.starts_with("- ") || trimmed.starts_with("* ") || trimmed.starts_with("+ "))
+        && trimmed.len() >= 2
+    {
         let leading_len = line.len() - trimmed.len();
         let leading_spaces = &line[..leading_len];
         formatted = format!("{}•{}", leading_spaces, &trimmed[1..]);
@@ -1169,7 +1171,11 @@ fn render_markdown_table(table_lines: &[String]) -> String {
     let mut has_separator = false;
     let mut separator_idx = None;
     for (i, row) in rows.iter().enumerate() {
-        if row.iter().all(|col| col.chars().all(|c| c == '-' || c == ':' || c == ' ' || c == '\t')) && !row.is_empty() {
+        if row.iter().all(|col| {
+            col.chars()
+                .all(|c| c == '-' || c == ':' || c == ' ' || c == '\t')
+        }) && !row.is_empty()
+        {
             has_separator = true;
             separator_idx = Some(i);
             break;
@@ -1202,7 +1208,7 @@ fn render_markdown_table(table_lines: &[String]) -> String {
 
     let num_cols = rows.iter().map(|r| r.len()).max().unwrap_or(0);
     let mut col_widths = vec![0; num_cols];
-    
+
     if let Some(ref header) = header_row {
         for (i, col) in header.iter().enumerate() {
             if i < num_cols {
@@ -1220,18 +1226,19 @@ fn render_markdown_table(table_lines: &[String]) -> String {
 
     let mut rendered = String::new();
 
-    let draw_border = |left: &str, mid: &str, right: &str, fill: &str, widths: &[usize]| -> String {
-        let mut s = left.to_string();
-        for (i, &w) in widths.iter().enumerate() {
-            s.push_str(&fill.repeat(w + 2));
-            if i < widths.len() - 1 {
-                s.push_str(mid);
+    let draw_border =
+        |left: &str, mid: &str, right: &str, fill: &str, widths: &[usize]| -> String {
+            let mut s = left.to_string();
+            for (i, &w) in widths.iter().enumerate() {
+                s.push_str(&fill.repeat(w + 2));
+                if i < widths.len() - 1 {
+                    s.push_str(mid);
+                }
             }
-        }
-        s.push_str(right);
-        s.push('\n');
-        s
-    };
+            s.push_str(right);
+            s.push('\n');
+            s
+        };
 
     rendered.push_str(&draw_border("┌", "┬", "┐", "─", &col_widths));
 
@@ -1240,7 +1247,11 @@ fn render_markdown_table(table_lines: &[String]) -> String {
         for (i, col) in header.iter().enumerate() {
             let width = unicode_width(col);
             let padding = col_widths[i] - width;
-            rendered.push_str(&format!(" \x1b[1;36m{}\x1b[0m{}", col, " ".repeat(padding + 1)));
+            rendered.push_str(&format!(
+                " \x1b[1;36m{}\x1b[0m{}",
+                col,
+                " ".repeat(padding + 1)
+            ));
             rendered.push_str("│");
         }
         rendered.push('\n');
@@ -1571,7 +1582,10 @@ async fn handle_slash_command(
                 ("/paste [prompt]", "Attach image from clipboard"),
                 ("Ctrl+V", "Paste clipboard image as [Image #1]"),
                 ("/learn <path>", "Import a persistent .md or .txt skill"),
-                ("/plugins <name> [prompt]", "Generate a skill.md file for a plugin/skill"),
+                (
+                    "/plugins <name> [prompt]",
+                    "Generate a skill.md file for a plugin/skill",
+                ),
                 ("/memory list", "Show recent interactions"),
                 ("/memory clear", "Clear all interactions"),
                 ("/memory get <key>", "Read a profile value"),
@@ -1965,23 +1979,25 @@ async fn handle_slash_command(
                 println!("\n{BLUE}────────────────────────────────────────────{RESET}");
                 println!("{MINT}  Available Plugins & Skills{RESET}");
                 println!("{BLUE}────────────────────────────────────────────{RESET}");
-                
+
                 println!("{MINT}Native Plugins:{RESET}");
                 for p in native_plugins() {
                     println!("  - {BLUE}{:<20}{RESET} {}", p.name, p.description);
                 }
-                
+
                 println!("\n{MINT}Custom Skills/Plugins (Active):{RESET}");
                 let mut active_skills = std::collections::HashSet::new();
                 if let Ok(memory) = MemoryStore::open_default() {
                     match memory.learned_skills(100) {
                         Ok(skills) => {
                             if skills.is_empty() {
-                                println!("  {DIM}(No custom skills/plugins learned yet. Use '/learn <path>' to add one.){RESET}");
+                                println!(
+                                    "  {DIM}(No custom skills/plugins learned yet. Use '/learn <path>' to add one.){RESET}"
+                                );
                             } else {
                                 for s in &skills {
                                     println!("  - {BLUE}{:<20}{RESET} {}", s.name, s.source_path);
-                                    
+
                                     // Try to store canonicalized active path
                                     if let Ok(canon) = Path::new(&s.source_path).canonicalize() {
                                         active_skills.insert(canon);
@@ -2005,7 +2021,9 @@ async fn handle_slash_command(
                             if path.is_file() {
                                 if let Some(ext) = path.extension().and_then(|e| e.to_str()) {
                                     if matches!(ext.to_ascii_lowercase().as_str(), "md" | "txt") {
-                                        if let Some(name) = path.file_name().and_then(|n| n.to_str()) {
+                                        if let Some(name) =
+                                            path.file_name().and_then(|n| n.to_str())
+                                        {
                                             if let Ok(canon_path) = path.canonicalize() {
                                                 local_files.push((name.to_owned(), canon_path));
                                             } else {
@@ -2016,7 +2034,7 @@ async fn handle_slash_command(
                                 }
                             }
                         }
-                        
+
                         let inactive_files: Vec<_> = local_files
                             .into_iter()
                             .filter(|(_, full_path)| !active_skills.contains(full_path))
@@ -2024,9 +2042,14 @@ async fn handle_slash_command(
                             .collect();
 
                         if !inactive_files.is_empty() {
-                            println!("\n{MINT}Local Skill Files (Found but not learned/active yet):{RESET}");
+                            println!(
+                                "\n{MINT}Local Skill Files (Found but not learned/active yet):{RESET}"
+                            );
                             for file in inactive_files {
-                                println!("  - {WARN}{:<20}{RESET} skills/{} {DIM}(Type '/learn skills/{}' to activate){RESET}", file, file, file);
+                                println!(
+                                    "  - {WARN}{:<20}{RESET} skills/{} {DIM}(Type '/learn skills/{}' to activate){RESET}",
+                                    file, file, file
+                                );
                             }
                         }
                     }

package/crates/mint-cli/src/setup.rs

@@ -1,7 +1,7 @@
 use anyhow::Result;
 use crossterm::event::{self, Event, KeyCode};
 use crossterm::terminal::{disable_raw_mode, enable_raw_mode};
-use mint_core::{load_config, save_config, native_plugins};
+use mint_core::{load_config, native_plugins, save_config};
 use std::io::{self, Write};
 
 struct ToolOption {

package/crates/mint-core/src/api_server.rs

@@ -272,6 +272,58 @@ pub async fn start_api_server(port: u16) -> Result<(), std::io::Error> {
                         .await;
                     }
                 }
+                ("POST", "/api/interactions") => {
+                    #[derive(Deserialize)]
+                    #[serde(rename_all = "camelCase")]
+                    struct ApiSaveInteraction {
+                        chat_id: String,
+                        user_text: String,
+                        provider: String,
+                        model: String,
+                    }
+
+                    if let Ok(req) = serde_json::from_str::<ApiSaveInteraction>(body) {
+                        if let Ok(memory) = MemoryStore::open_default() {
+                            match memory.add_interaction_for_chat(
+                                &req.chat_id,
+                                &req.user_text,
+                                "",
+                                &req.provider,
+                                &req.model,
+                            ) {
+                                Ok(row_id) => {
+                                    let res_json = json!({ "success": true, "id": row_id });
+                                    send_json_response(socket, "200 OK", &res_json.to_string())
+                                        .await;
+                                }
+                                Err(error) => {
+                                    let err_json =
+                                        json!({ "success": false, "message": error.to_string() });
+                                    send_json_response(
+                                        socket,
+                                        "500 Internal Server Error",
+                                        &err_json.to_string(),
+                                    )
+                                    .await;
+                                }
+                            }
+                        } else {
+                            send_json_response(
+                                socket,
+                                "500 Internal Server Error",
+                                "{\"success\":false,\"message\":\"db error\"}",
+                            )
+                            .await;
+                        }
+                    } else {
+                        send_json_response(
+                            socket,
+                            "400 Bad Request",
+                            "{\"success\":false,\"message\":\"invalid body\"}",
+                        )
+                        .await;
+                    }
+                }
                 ("POST", "/api/interactions/agent-activity") => {
                     #[derive(Deserialize)]
                     #[serde(rename_all = "camelCase")]
@@ -291,12 +343,8 @@ pub async fn start_api_server(port: u16) -> Result<(), std::io::Error> {
                                         )
                                         .is_ok()
                                     {
-                                        send_json_response(
-                                            socket,
-                                            "200 OK",
-                                            "{\"status\":\"ok\"}",
-                                        )
-                                        .await;
+                                        send_json_response(socket, "200 OK", "{\"status\":\"ok\"}")
+                                            .await;
                                         return;
                                     }
                                 }
@@ -418,19 +466,22 @@ pub async fn start_api_server(port: u16) -> Result<(), std::io::Error> {
                         chat_id: Option<String>,
                         image_data_uri: Option<String>,
                         audio_data_uri: Option<String>,
+                        document_attachment: Option<crate::chat::DocumentAttachment>,
                     }
 
                     if let Ok(req) = serde_json::from_str::<ApiChatRequest>(body) {
                         let config = load_config().unwrap_or_default();
-                        let mut chat_req = ChatRequest {
+                        let chat_req = ChatRequest {
                             message: req.message,
                             system_instruction: req.system_instruction.unwrap_or_default(),
                             chat_id: req.chat_id,
                             image_data_uri: req.image_data_uri,
                             audio_data_uri: req.audio_data_uri,
-                            document_attachment: None,
+                            document_attachment: req.document_attachment,
                             workspace_path: None,
                         };
+                        let mut chat_req =
+                            chat_req.with_document_context(&config).unwrap_or(chat_req);
                         let sent_image = chat_req.image_data_uri.clone();
                         let sent_message = chat_req.message.clone();
 
@@ -499,19 +550,22 @@ pub async fn start_api_server(port: u16) -> Result<(), std::io::Error> {
                         chat_id: Option<String>,
                         image_data_uri: Option<String>,
                         audio_data_uri: Option<String>,
+                        document_attachment: Option<crate::chat::DocumentAttachment>,
                     }
 
                     if let Ok(req) = serde_json::from_str::<ApiChatRequest>(body) {
                         let config = load_config().unwrap_or_default();
-                        let mut chat_req = ChatRequest {
+                        let chat_req = ChatRequest {
                             message: req.message,
                             system_instruction: req.system_instruction.unwrap_or_default(),
                             chat_id: req.chat_id,
                             image_data_uri: req.image_data_uri,
                             audio_data_uri: req.audio_data_uri,
-                            document_attachment: None,
+                            document_attachment: req.document_attachment,
                             workspace_path: None,
                         };
+                        let mut chat_req =
+                            chat_req.with_document_context(&config).unwrap_or(chat_req);
                         let sent_image = chat_req.image_data_uri.clone();
                         let sent_message = chat_req.message.clone();
 

package/crates/mint-core/src/chat.rs

@@ -108,6 +108,85 @@ pub struct DocumentAttachment {
     pub data_uri: String,
 }
 
+const MAX_DOCUMENT_BYTES: usize = 10 * 1024 * 1024;
+const MAX_DOCUMENT_CONTEXT_CHARS: usize = 400_000;
+static COUNTER: std::sync::atomic::AtomicU64 = std::sync::atomic::AtomicU64::new(1);
+
+impl ChatRequest {
+    pub fn with_document_context(&self, config: &crate::MintConfig) -> Result<ChatRequest, String> {
+        let Some(document) = &self.document_attachment else {
+            return Ok(self.clone());
+        };
+
+        let (mime_type, encoded) = document
+            .data_uri
+            .strip_prefix("data:")
+            .and_then(|payload| payload.split_once(";base64,"))
+            .ok_or_else(|| "invalid PDF attachment data URI".to_string())?;
+
+        if !mime_type.eq_ignore_ascii_case("application/pdf") {
+            return Err("only PDF document attachments are supported".into());
+        }
+
+        use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64_STANDARD};
+        let bytes = BASE64_STANDARD
+            .decode(encoded)
+            .map_err(|error| format!("invalid PDF attachment encoding: {error}"))?;
+        if bytes.len() > MAX_DOCUMENT_BYTES {
+            return Err("PDF attachment is too large (> 10 MiB)".into());
+        }
+
+        let directory = crate::config::config_path()
+            .map_err(|error| error.to_string())?
+            .with_file_name("Attachments");
+        std::fs::create_dir_all(&directory).map_err(|error| error.to_string())?;
+
+        let safe_name: String = document
+            .filename
+            .chars()
+            .filter(|c| c.is_ascii_alphanumeric() || matches!(*c, '.' | '-' | '_'))
+            .take(80)
+            .collect();
+        let safe_name = if safe_name.is_empty() {
+            "document".into()
+        } else {
+            safe_name
+        };
+
+        let path = directory.join(format!(
+            "mint-pdf-{}-{}.pdf",
+            COUNTER.fetch_add(1, std::sync::atomic::Ordering::SeqCst),
+            safe_name
+        ));
+        std::fs::write(&path, bytes).map_err(|error| error.to_string())?;
+
+        let extracted = crate::knowledge::extract_document_text(&path, config)
+            .map_err(|error| error.to_string());
+        let _ = std::fs::remove_file(&path);
+        let extracted = extracted?;
+
+        let mut context: String = extracted.chars().take(MAX_DOCUMENT_CONTEXT_CHARS).collect();
+        if extracted.chars().count() > MAX_DOCUMENT_CONTEXT_CHARS {
+            context.push_str("\n\n[PDF text truncated because it is long.]");
+        }
+
+        let filename = document.filename.trim();
+        let filename = if filename.is_empty() {
+            "attached.pdf"
+        } else {
+            filename
+        };
+
+        let mut enriched = self.clone();
+        enriched.document_attachment = None;
+        enriched.message = format!(
+            "{}\n\nAttached PDF: {filename}\nUse the extracted PDF text below when answering. If the user asks for a summary, summarize this document.\n\n--- Extracted PDF text ---\n{context}\n--- End extracted PDF text ---",
+            self.message
+        );
+        Ok(enriched)
+    }
+}
+
 #[derive(Debug, Clone, Serialize)]
 #[serde(rename_all = "camelCase")]
 pub struct ChatResponse {

package/crates/mint-core/src/lib.rs

@@ -78,7 +78,7 @@ pub use symbols::{CodeSymbol, SymbolError, SymbolIndex, build_symbol_index};
 pub use tasks::{Task, TaskError, TaskStore, tasks_path};
 pub use tts::{TtsUrl, google_tts_urls};
 pub use weather::{WeatherError, WeatherReport, weather};
-pub use workflows::{WorkflowError, load_workflows, workflows_path};
+pub use workflows::{WorkflowError, load_workflows, save_workflows, workflows_path};
 pub mod api_server;
 pub use api_server::start_api_server;
 pub mod channels;

package/crates/mint-core/src/plugins.rs

@@ -242,7 +242,10 @@ fn github(instruction: &str) -> Result<String, PluginError> {
             if id.chars().all(|c| c.is_ascii_digit()) {
                 run("gh", &["issue", "view", id])
             } else {
-                invalid("github", "view_issue/issue view requires a numeric issue ID")
+                invalid(
+                    "github",
+                    "view_issue/issue view requires a numeric issue ID",
+                )
             }
         }
         ["list_prs"] | ["pr", "list"] => run("gh", &["pr", "list", "--limit", "10"]),

package/crates/mint-core/src/workflows.rs

@@ -79,3 +79,11 @@ fn save_default_workflows(path: &PathBuf) -> Result<(), WorkflowError> {
         source,
     })
 }
+
+pub fn save_workflows(workflows: &[Value]) -> Result<(), WorkflowError> {
+    let path = workflows_path()?;
+    let directory = path.parent().ok_or(WorkflowError::MissingDirectory)?;
+    fs::create_dir_all(directory).map_err(WorkflowError::CreateDirectory)?;
+    let raw = serde_json::to_string_pretty(workflows).map_err(WorkflowError::Serialize)?;
+    fs::write(&path, format!("{raw}\n")).map_err(|source| WorkflowError::Write { path, source })
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pheem49/mint",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "A native Tauri desktop AI assistant with a Rust backend and React UI.",
   "scripts": {
     "dev:web": "vite --config vite.config.web.ts",
@@ -27,7 +27,17 @@
     "cli": "cargo run -p mint-cli --",
     "postinstall": "cargo build -p mint-cli --release && mkdir -p bin && cp target/release/mint bin/mint"
   },
-  "keywords": [],
+  "keywords": [
+    "mint",
+    "tauri",
+    "ai",
+    "assistant",
+    "desktop",
+    "cli",
+    "rust",
+    "react",
+    "agent"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Pheem49/Mint.git"
@@ -48,6 +58,7 @@
   "dependencies": {
     "@tauri-apps/api": "^2.0.0",
     "@vitejs/plugin-react": "^6.0.1",
+    "@xyflow/react": "^12.11.1",
     "material-icon-theme": "5.34.0",
     "pixi-live2d-display": "^0.4.0",
     "pixi.js": "^6.5.10",

package/src/renderer/src/App.tsx

@@ -6,7 +6,6 @@ const WidgetWindow = lazy(() => import('./components/WidgetWindow'))
 const ProactiveGlow = lazy(() => import('./components/ProactiveGlow'))
 const ScreenPicker = lazy(() => import('./components/ScreenPicker'))
 const MintDashboard = lazy(() => import('./components/MintDashboard'))
-
 export default function App() {
   const [hash, setHash] = useState(window.location.hash || '#/')
 
@@ -29,5 +28,6 @@ export default function App() {
   if (route.startsWith('/proactive-glow')) content = <ProactiveGlow />
   if (route.startsWith('/screen-picker')) content = <ScreenPicker />
 
+
   return <Suspense fallback={null}>{content}</Suspense>
 }

package/src/renderer/src/components/ChatPanel.tsx

@@ -1702,21 +1702,33 @@ export default function ChatPanel({
   return (
     <section className={`conversation-panel ${isEmptyChat ? 'is-empty' : ''}`}>
       <div className="chat-container">
-        {interactions.map((interaction) => (
-          <div key={interaction.id} style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>
-            {interaction.isSystemEvent ? (
-              <div className="system-event" style={{ background: 'rgba(16, 185, 129, 0.06)', border: '1px solid rgba(16, 185, 129, 0.2)', borderRadius: '8px', padding: '10px 14px', color: '#a7f3d0', fontSize: '0.82rem', lineHeight: '1.45', alignSelf: 'stretch' }}>
-                {interaction.userText}
-              </div>
-            ) : interaction.userText && (
-              <div className="message user-message">
-                <div className="bubble-wrapper">
-                  <div className="message-bubble">{renderFormattedMessage(interaction.userText)}</div>
-                  <div className="message-time"><span>{new Date(interaction.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span></div>
+        {interactions.map((interaction) => {
+          const isSystemEvent = interaction.provider === 'system' && interaction.model === 'provider_change';
+          if (isSystemEvent) {
+            return (
+              <div key={interaction.id} className="system-event-divider">
+                <div className="system-event-line" />
+                <div className="system-event-pill">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                    <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+                  </svg>
+                  <span>{interaction.userText}</span>
                 </div>
+                <div className="system-event-line" />
               </div>
-            )}
-            <div className="message ai-message">
+            );
+          }
+          return (
+            <div key={interaction.id} style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>
+              {interaction.userText && (
+                <div className="message user-message">
+                  <div className="bubble-wrapper">
+                    <div className="message-bubble">{renderFormattedMessage(interaction.userText)}</div>
+                    <div className="message-time"><span>{new Date(interaction.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span></div>
+                  </div>
+                </div>
+              )}
+              <div className="message ai-message">
               <div className="bubble-wrapper">
                 {renderCompletedActivity(interaction)}
                 {renderFileChanges(interaction)}
@@ -1750,7 +1762,8 @@ export default function ChatPanel({
               </div>
             </div>
           </div>
-        ))}
+        );
+      })}
 
         {sending && (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>