@pheem49/mint 1.7.1 → 1.8.0

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

@@ -1798,21 +1798,33 @@ export default function ChatPanel({
       )}
 
       <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)}
@@ -1858,7 +1870,8 @@ export default function ChatPanel({
               </div>
             </div>
           </div>
-        ))}
+        );
+      })}
 
         {sending && (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>

package/src/renderer/src-web/components/DashboardSidebar.tsx

@@ -1,11 +1,13 @@
 import { useState } from 'react'
 
-export type DashboardView = 'chat' | 'pictures' | 'model' | 'imagine'
+export type DashboardView = 'chat' | 'pictures' | 'model' | 'imagine' | 'workflows'
 
 interface ChatSessionItem {
   id: string
   title: string
   kind: string
+  createdAt?: string
+  updatedAt?: string
 }
 
 interface DashboardSidebarProps {
@@ -20,6 +22,8 @@ interface DashboardSidebarProps {
   onDeleteConversation: (id: string) => void
   onRenameConversation?: (id: string, newTitle: string) => void
   onSetView: (view: DashboardView) => void
+  isSearchOpen: boolean
+  onSetSearchOpen: (open: boolean) => void
 }
 
 export default function DashboardSidebar({
@@ -34,6 +38,8 @@ export default function DashboardSidebar({
   onDeleteConversation,
   onRenameConversation,
   onSetView,
+  isSearchOpen,
+  onSetSearchOpen,
 }: DashboardSidebarProps) {
   const [editingSessionId, setEditingSessionId] = useState<string | null>(null)
   const [editTitleValue, setEditTitleValue] = useState('')
@@ -77,6 +83,16 @@ export default function DashboardSidebar({
         <span>New Chat</span>
       </button>
 
+      <button className="sidebar-top-action sidebar-search-btn" onClick={() => onSetSearchOpen(true)}>
+        <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="11" cy="11" r="8"></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          </svg>
+        </span>
+        <span>Search Chats</span>
+      </button>
+
       <button className={`sidebar-top-action ${view === 'chat' ? 'is-active' : ''}`} onClick={() => onSetView('chat')}>
         <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">

package/src/renderer/src-web/components/ImageStudioPanel.tsx

@@ -193,12 +193,16 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
     document.body.removeChild(a)
   }
 
-  if (view !== 'imagine') return null
-
   const modelOptions = PROVIDER_MODELS[selectedProvider] ?? []
 
   return (
-    <div className="img-studio" id="image-studio-panel" role="main" aria-label="Image Studio">
+    <div
+      className={`img-studio ${view === 'imagine' ? 'is-visible' : ''}`}
+      id="image-studio-panel"
+      role="main"
+      aria-label="Image Studio"
+      aria-hidden={view !== 'imagine'}
+    >
       {/* Header */}
       <header className="img-studio-header">
         <div className="img-studio-header-title">

package/src/renderer/src-web/components/MintDashboard.tsx

@@ -5,6 +5,7 @@ import {
   deleteChatSession,
   renameChatSession,
   getRecentInteractions,
+  saveSystemInteraction,
   getRuntimeStatus,
   listChatSessions,
   listSavedPictures,
@@ -235,6 +236,79 @@ export default function MintDashboard() {
   const chatEnd = useRef<HTMLDivElement | null>(null)
   const startupReady = dashboardDataReady || startupTimedOut
 
+  const [isSearchOpen, setIsSearchOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+        event.preventDefault()
+        setIsSearchOpen((prev) => !prev)
+      } else if (event.key === 'Escape') {
+        setIsSearchOpen(false)
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  useEffect(() => {
+    if (!isSearchOpen) {
+      setSearchQuery('')
+    }
+  }, [isSearchOpen])
+
+  const filteredSessions = chatSessions.filter((session) => {
+    if (session.kind === 'cli' || session.id === 'conversation-default') return false
+    return session.title.toLowerCase().includes(searchQuery.toLowerCase())
+  })
+
+  const groupSessionsByDate = (sessions: ChatSession[]) => {
+    const groups: { [key: string]: ChatSession[] } = {}
+    
+    sessions.forEach((session) => {
+      const dateStr = session.updatedAt || session.createdAt
+      if (!dateStr) {
+        const groupName = 'Other'
+        if (!groups[groupName]) groups[groupName] = []
+        groups[groupName].push(session)
+        return
+      }
+
+      const date = new Date(dateStr)
+      const today = new Date()
+      const yesterday = new Date()
+      yesterday.setDate(today.getDate() - 1)
+
+      let groupName = ''
+      if (date.toDateString() === today.toDateString()) {
+        groupName = 'Today'
+      } else if (date.toDateString() === yesterday.toDateString()) {
+        groupName = 'Yesterday'
+      } else {
+        const diffTime = Math.abs(today.getTime() - date.getTime())
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+        if (diffDays <= 7) {
+          groupName = 'Previous 7 days'
+        } else if (diffDays <= 30) {
+          groupName = 'Previous 30 days'
+        } else {
+          groupName = date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+        }
+      }
+
+      if (!groups[groupName]) {
+        groups[groupName] = []
+      }
+      groups[groupName].push(session)
+    })
+
+    return groups
+  }
+
+  const groupedSearchSessions = groupSessionsByDate(filteredSessions)
+
+
   async function refreshHistory() {
     const history = await getRecentInteractions(50, conversationId)
     const reversed = history.reverse()
@@ -664,6 +738,37 @@ export default function MintDashboard() {
     }
   }
 
+  function formatProviderChangeText(provider: string, model: string) {
+    let providerName = provider
+    if (provider === 'gemini') providerName = 'Gemini'
+    else if (provider === 'openai') providerName = 'OpenAI'
+    else if (provider === 'openrouter') providerName = 'OpenRouter'
+    else if (provider === 'deepseek') providerName = 'DeepSeek'
+    else if (provider === 'anthropic') providerName = 'Claude'
+    else if (provider === 'huggingface') providerName = 'HF'
+    else if (provider === 'local_openai') providerName = 'Local'
+    else if (provider === 'ollama') providerName = 'Ollama'
+
+    if (providerName && providerName === provider) {
+      providerName = providerName.charAt(0).toUpperCase() + providerName.slice(1)
+    }
+    return [providerName, model].filter(Boolean).join(' • ')
+  }
+
+  function getActiveModelName(config: any, provider: string) {
+    switch (provider) {
+      case 'gemini': return config.geminiModel || 'gemini-1.5-flash'
+      case 'openai': return config.openaiModel || 'gpt-4o'
+      case 'openrouter': return config.openrouterModel || 'anthropic/claude-3.5-sonnet'
+      case 'deepseek': return config.deepseekModel || 'deepseek-chat'
+      case 'anthropic': return config.anthropicModel || 'claude-3-5-sonnet-20240620'
+      case 'huggingface': return config.hfModel || 'meta-llama/Meta-Llama-3-8B-Instruct'
+      case 'local_openai': return config.localModelName || 'llama3'
+      case 'ollama': return config.ollamaModel || 'llama3:latest'
+      default: return ''
+    }
+  }
+
   async function changeProvider(provider: string) {
     try {
       const config = await window.settingsApi.getSettings()
@@ -671,6 +776,12 @@ export default function MintDashboard() {
       await window.settingsApi.saveSettings(config)
       setSettingsConfig(config)
       setStatus(await getRuntimeStatus())
+
+      // Record system event in chat history
+      const activeModel = getActiveModelName(config, provider)
+      const displayName = formatProviderChangeText(provider, activeModel)
+      await saveSystemInteraction(conversationId, displayName, 'system', 'provider_change')
+      await refreshHistory()
     } catch (reason) {
       setError(errorMessage(reason))
     }
@@ -700,6 +811,11 @@ export default function MintDashboard() {
       await window.settingsApi.saveSettings(config)
       setSettingsConfig(config)
       setStatus(await getRuntimeStatus())
+
+      // Record system event in chat history
+      const displayName = formatProviderChangeText(provider, modelName)
+      await saveSystemInteraction(conversationId, displayName, 'system', 'provider_change')
+      await refreshHistory()
     } catch (reason) {
       setError(errorMessage(reason))
     }
@@ -738,6 +854,8 @@ export default function MintDashboard() {
           onDeleteConversation={deleteConversation}
           onRenameConversation={renameConversation}
           onSetView={changeView}
+          isSearchOpen={isSearchOpen}
+          onSetSearchOpen={setIsSearchOpen}
         />
         <main className="assistant-workspace model-hidden">
           <ChatPanel
@@ -804,6 +922,77 @@ export default function MintDashboard() {
           <button onClick={() => setError('')} style={{ marginLeft: '12px', background: 'transparent', border: 0, color: 'white', cursor: 'pointer' }}>✕</button>
         </div>
       )}
+
+      {isSearchOpen && (
+        <div className="sidebar-search-modal-backdrop" onClick={() => setIsSearchOpen(false)}>
+          <div className="sidebar-search-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="search-modal-header">
+              <span className="search-icon-wrapper">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="11" cy="11" r="8"></circle>
+                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+              </span>
+              <input
+                type="text"
+                placeholder="Search chats..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                autoFocus
+              />
+              <button className="search-modal-close" onClick={() => setIsSearchOpen(false)}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </button>
+            </div>
+            
+            <div className="search-modal-body">
+              <button
+                className="search-new-chat-btn"
+                onClick={() => {
+                  clearHistory('New chat')
+                  setIsSearchOpen(false)
+                }}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="12" y1="5" x2="12" y2="19"></line>
+                  <line x1="5" y1="12" x2="19" y2="12"></line>
+                </svg>
+                <span>New Chat</span>
+              </button>
+
+              <div className="search-modal-results">
+                {Object.keys(groupedSearchSessions).length > 0 ? (
+                  Object.entries(groupedSearchSessions).map(([groupName, sessions]) => (
+                    <div key={groupName} className="search-results-group">
+                      <div className="search-group-title">{groupName}</div>
+                      {sessions.map((session) => (
+                        <button
+                          key={session.id}
+                          className={`search-result-item ${session.id === conversationId ? 'active' : ''}`}
+                          onClick={() => {
+                            selectConversation(session.id)
+                            setIsSearchOpen(false)
+                          }}
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                          </svg>
+                          <span className="search-result-title">{session.title || 'New chat'}</span>
+                        </button>
+                      ))}
+                    </div>
+                  ))
+                ) : (
+                  <div className="search-no-results">No matching chats found</div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

package/src/renderer/src-web/components/PicturesLibrary.tsx

@@ -39,10 +39,8 @@ export default function PicturesLibrary({ view, pictures, onSetView, onRefreshPi
     return () => window.clearTimeout(timer)
   }, [view, pictures.length, visibleCount])
 
-  if (view !== 'pictures') return null
-
   return (
-    <section className="pictures-library">
+    <section className={`pictures-library ${view === 'pictures' ? 'is-visible' : ''}`} aria-hidden={view !== 'pictures'}>
       <header className="pictures-header">
         <div><span className="pictures-kicker">Gallery</span><h2>Saved Pictures</h2></div>
         <div className="pictures-header-actions">

package/src/renderer/src-web/components/Settings/AudioTab.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { DEFAULT_CONFIG } from '../SettingsWindow'
+
+interface AudioTabProps {
+  config: typeof DEFAULT_CONFIG
+  updateField: (field: keyof typeof DEFAULT_CONFIG, value: any) => void
+}
+
+export default function AudioTab({ config, updateField }: AudioTabProps) {
+  return (
+    <div className="tab-pane active">
+      <section className="setting-section">
+        <div className="section-heading">
+          <div>
+            <p className="section-kicker">Speech</p>
+            <h2 className="section-title">Voice Reply</h2>
+          </div>
+          <p className="section-description">Control spoken responses and TTS behavior.</p>
+        </div>
+
+        <div className="toggle-row">
+          <div>
+            <label>Enable Voice Reply</label>
+            <p className="hint">Mint will speak responses out loud when this is enabled.</p>
+          </div>
+          <label className="settings-toggle-switch">
+            <input 
+              type="checkbox" 
+              checked={config.enableVoiceReply} 
+              onChange={(e) => updateField('enableVoiceReply', e.target.checked)} 
+            />
+            <span className="settings-toggle-slider"></span>
+          </label>
+        </div>
+
+        <div className="form-grid single">
+          <div className="setting-row">
+            <label>Voice Engine</label>
+            <select value={config.ttsProvider} onChange={(e) => updateField('ttsProvider', e.target.value)}>
+              <option value="google">Google Cloud (Natural, Auto Lang)</option>
+              <option value="native">OS Native (Supports Pitch)</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="slider-stack">
+          <div className="setting-row">
+            <label>Volume</label>
+            <div className="slider-group">
+              <input 
+                type="range" 
+                min="0" 
+                max="1" 
+                step="0.1" 
+                value={config.ttsVolume} 
+                onChange={(e) => updateField('ttsVolume', parseFloat(e.target.value))} 
+                className="range-slider" 
+              />
+              <span className="range-value">{Math.round(config.ttsVolume * 100)}%</span>
+            </div>
+          </div>
+          <div className="setting-row">
+            <label>Speed</label>
+            <div className="slider-group">
+              <input 
+                type="range" 
+                min="0.5" 
+                max="2" 
+                step="0.1" 
+                value={config.ttsSpeed} 
+                onChange={(e) => updateField('ttsSpeed', parseFloat(e.target.value))} 
+                className="range-slider" 
+              />
+              <span className="range-value">{parseFloat(String(config.ttsSpeed)).toFixed(1)}x</span>
+            </div>
+          </div>
+          <div className="setting-row">
+            <label>Pitch</label>
+            <div className="slider-group">
+              <input 
+                type="range" 
+                min="0" 
+                max="2" 
+                step="0.1" 
+                value={config.ttsPitch} 
+                onChange={(e) => updateField('ttsPitch', parseFloat(e.target.value))} 
+                className="range-slider" 
+              />
+              <span className="range-value">{parseFloat(String(config.ttsPitch)).toFixed(1)}</span>
+            </div>
+            <p className="hint">Pitch applies to OS native voice only.</p>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}