@pheem49/mint 1.7.0 → 1.8.0

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

@@ -1,11 +1,13 @@
-import { useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
 
-export type DashboardView = 'chat' | 'pictures' | 'model' | 'workspeac' | 'imagine'
+export type DashboardView = 'chat' | 'pictures' | 'model' | 'workspace' | 'imagine' | 'workflows'
 
 interface ChatSessionItem {
   id: string
   title: string
   kind: string
+  createdAt?: string
+  updatedAt?: string
 }
 
 interface DashboardSidebarProps {
@@ -33,6 +35,8 @@ interface DashboardSidebarProps {
   onSetInteractionEnabled: (enabled: boolean) => void
   onSetShowInteractionGuide: (visible: boolean) => void
   onShowToast: (message: string) => void
+  isSearchOpen: boolean
+  onSetSearchOpen: (open: boolean) => void
 }
 
 export default function DashboardSidebar({
@@ -60,9 +64,23 @@ export default function DashboardSidebar({
   onSetInteractionEnabled,
   onSetShowInteractionGuide,
   onShowToast,
+  isSearchOpen,
+  onSetSearchOpen,
 }: DashboardSidebarProps) {
   const [editingSessionId, setEditingSessionId] = useState<string | null>(null)
   const [editTitleValue, setEditTitleValue] = useState('')
+  const [isMoreOpen, setIsMoreOpen] = useState(false)
+  const moreContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (moreContainerRef.current && !moreContainerRef.current.contains(event.target as Node)) {
+        setIsMoreOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
 
   const handleSaveRename = (id: string) => {
     if (editTitleValue.trim() && editTitleValue.trim() !== chatSessions.find(s => s.id === id)?.title) {
@@ -115,6 +133,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">
@@ -133,22 +161,14 @@ export default function DashboardSidebar({
         </span>
         <span>Pictures</span>
       </button>
-      <button className={`sidebar-top-action ${view === 'imagine' ? 'is-active' : ''}`} onClick={() => onSetView('imagine')}>
-        <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">
-            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
-          </svg>
-        </span>
-        <span>Image Studio</span>
-      </button>
-      <button className={`sidebar-top-action ${view === 'workspeac' ? 'is-active' : ''}`} onClick={() => onSetView('workspeac')}>
+      <button className={`sidebar-top-action ${view === 'workspace' ? 'is-active' : ''}`} onClick={() => onSetView('workspace')}>
         <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">
             <path d="M3 6h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path>
             <path d="M3 6v12"></path>
           </svg>
         </span>
-        <span>Workspeac</span>
+        <span>Workspace</span>
       </button>
       <button className={`sidebar-top-action ${modelVisible ? 'is-active' : ''}`} onClick={onToggleModel}>
         <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
@@ -160,6 +180,45 @@ export default function DashboardSidebar({
         <span>Live2D Model</span>
       </button>
 
+      <div className="sidebar-more-container" ref={moreContainerRef}>
+        <button className={`sidebar-top-action ${isMoreOpen || view === 'imagine' || view === 'workflows' ? 'is-active' : ''}`} onClick={() => setIsMoreOpen(!isMoreOpen)}>
+          <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="12" cy="12" r="1.5"></circle>
+              <circle cx="19" cy="12" r="1.5"></circle>
+              <circle cx="5" cy="12" r="1.5"></circle>
+            </svg>
+          </span>
+          <span>More</span>
+        </button>
+        {isMoreOpen && (
+          <div className="sidebar-more-popover">
+            <button className={`popover-item ${view === 'imagine' ? 'active' : ''}`} onClick={() => { onSetView('imagine'); setIsMoreOpen(false); }}>
+              <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">
+                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+                </svg>
+              </span>
+              <span>Image Studio</span>
+            </button>
+            <button className={`popover-item ${view === 'workflows' ? 'active' : ''}`} onClick={() => { onSetView('workflows'); setIsMoreOpen(false); }}>
+              <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">
+                  <path d="M4 12h16"></path>
+                  <path d="M12 4v16"></path>
+                  <rect x="2" y="9" width="4" height="6" rx="1"></rect>
+                  <rect x="18" y="9" width="4" height="6" rx="1"></rect>
+                  <rect x="10" y="2" width="4" height="4" rx="1"></rect>
+                  <rect x="10" y="18" width="4" height="4" rx="1"></rect>
+                </svg>
+              </span>
+              <span>Workflow (Beta)</span>
+            </button>
+          </div>
+        )}
+      </div>
+
+
       {modelVisible && (
         <div className="sidebar-model-controls">
           <button

package/src/renderer/src/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/components/MintDashboard.tsx

@@ -5,6 +5,7 @@ import {
   deleteChatSession,
   renameChatSession,
   getRecentInteractions,
+  saveSystemInteraction,
   getRuntimeStatus,
   listChatSessions,
   listSavedPictures,
@@ -28,6 +29,7 @@ import ModelPanel from './ModelPanel'
 import type { ModelInteraction } from './ModelPanel'
 import PicturesLibrary from './PicturesLibrary'
 import WorkspacePanel from './WorkspacePanel'
+import WorkflowBuilderPanel from './WorkflowBuilderPanel'
 
 const EXPRESSIONS = [
   "Default",
@@ -267,6 +269,79 @@ export default function MintDashboard() {
   const chatEnd = useRef<HTMLDivElement | null>(null)
   const startupReady = (dashboardDataReady && modelReady) || 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()
@@ -361,7 +436,7 @@ export default function MintDashboard() {
   }, [view])
 
   useEffect(() => {
-    if (view === 'workspeac' && !agentMode) updateAgentMode(true)
+    if (view === 'workspace' && !agentMode) updateAgentMode(true)
   }, [view, agentMode])
 
   useEffect(() => {
@@ -674,7 +749,7 @@ export default function MintDashboard() {
       const selected = await selectWorkspaceDirectory()
       if (selected) {
         updateWorkspacePath(selected)
-        setView('workspeac')
+        setView('workspace')
       }
     } catch (reason) {
       setError(errorMessage(reason))
@@ -781,6 +856,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()
@@ -788,6 +894,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))
     }
@@ -817,6 +929,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))
     }
@@ -897,9 +1014,11 @@ export default function MintDashboard() {
           onSetInteractionEnabled={updateInteractionEnabled}
           onSetShowInteractionGuide={updateInteractionGuide}
           onShowToast={showToast}
+          isSearchOpen={isSearchOpen}
+          onSetSearchOpen={setIsSearchOpen}
         />
-        <main className={`assistant-workspace ${layoutPreset === 'chat-wide' ? 'layout-chat-wide' : 'layout-model-wide'} ${modelVisible || view === 'workspeac' ? '' : 'model-hidden'} ${view === 'workspeac' ? 'workspace-open' : ''}`}>
-          {view === 'workspeac' && (
+        <main className={`assistant-workspace ${layoutPreset === 'chat-wide' ? 'layout-chat-wide' : 'layout-model-wide'} ${modelVisible || view === 'workspace' ? '' : 'model-hidden'} ${view === 'workspace' ? 'workspace-open' : ''}`}>
+          {view === 'workspace' && (
             <WorkspacePanel
               agentMode={agentMode}
               sending={sending}
@@ -914,7 +1033,7 @@ export default function MintDashboard() {
             expressionIndex={expressionIndex}
             accessoryIndex={accessoryIndex}
             isLocked={isLocked}
-            isActive={modelVisible && view !== 'pictures' && view !== 'workspeac'}
+            isActive={modelVisible && view !== 'pictures' && view !== 'workspace' && view !== 'workflows'}
             layoutPreset={layoutPreset}
             sending={sending}
             interactionEnabled={interactionEnabled}
@@ -980,6 +1099,10 @@ export default function MintDashboard() {
             setMessage(imgPrompt)
           }}
         />
+        <WorkflowBuilderPanel
+          view={view}
+          onShowToast={showToast}
+        />
       </div>
       <div className={`startup-loading ${startupReady ? 'is-hidden' : ''}`} aria-live="polite" aria-busy={!startupReady}>
         <div className="startup-loading-content">
@@ -998,6 +1121,77 @@ export default function MintDashboard() {
           </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/components/PicturesLibrary.tsx

@@ -9,10 +9,8 @@ interface PicturesLibraryProps {
 }
 
 export default function PicturesLibrary({ view, pictures, onSetView, onRefreshPictures }: PicturesLibraryProps) {
-  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/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>
+  )
+}