@pheem49/mint 1.8.2 → 1.10.0

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

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-export type DashboardView = 'chat' | 'pictures' | 'model' | 'imagine' | 'workflows'
+export type DashboardView = 'chat' | 'pictures' | 'model' | 'imagine' | 'workflows' | 'veo'
 
 interface ChatSessionItem {
   id: string
@@ -119,6 +119,21 @@ export default function DashboardSidebar({
         </span>
         <span>Image Studio</span>
       </button>
+      <button className={`sidebar-top-action ${view === 'veo' ? 'is-active' : ''}`} onClick={() => onSetView('veo')}>
+        <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">
+            <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
+            <line x1="7" y1="2" x2="7" y2="22"></line>
+            <line x1="17" y1="2" x2="17" y2="22"></line>
+            <line x1="2" y1="12" x2="22" y2="12"></line>
+            <line x1="2" y1="7" x2="7" y2="7"></line>
+            <line x1="2" y1="17" x2="7" y2="17"></line>
+            <line x1="17" y1="17" x2="22" y2="17"></line>
+            <line x1="17" y1="7" x2="22" y2="7"></line>
+          </svg>
+        </span>
+        <span>Veo Studio</span>
+      </button>
 
       <div className="sidebar-section">
         <div className="sidebar-section-title">Conversation CLI</div>

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

@@ -55,9 +55,10 @@ const PROVIDER_MODELS: Record<string, { value: string; label: string }[]> = {
   ],
   replicate: [
     { value: 'black-forest-labs/flux-1.1-pro',          label: 'FLUX 1.1 Pro (Default)' },
+    { value: 'timbrooks/instruct-pix2pix',              label: 'InstructPix2Pix (Image Editing)' },
+    { value: 'black-forest-labs/flux-fill-dev',         label: 'FLUX Fill (Inpainting)' },
     { value: 'black-forest-labs/flux-schnell',          label: 'FLUX Schnell (fast)' },
     { value: 'stability-ai/sdxl',                       label: 'SDXL' },
-    { value: 'bytedance/sdxl-lightning-4step',          label: 'SDXL Lightning' },
   ],
 }
 
@@ -146,6 +147,36 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
 
   const effectiveModel = selectedModel === 'custom' ? customModel.trim() : selectedModel
 
+  const [inputImage, setInputImage] = useState<string | null>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    const reader = new FileReader()
+    reader.onload = (evt) => {
+      if (typeof evt.target?.result === 'string') {
+        setInputImage(evt.target.result)
+      }
+    }
+    reader.readAsDataURL(file)
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragging(false)
+    const file = e.dataTransfer.files?.[0]
+    if (!file || !file.type.startsWith('image/')) return
+    const reader = new FileReader()
+    reader.onload = (evt) => {
+      if (typeof evt.target?.result === 'string') {
+        setInputImage(evt.target.result)
+      }
+    }
+    reader.readAsDataURL(file)
+  }
+
   const handleGenerate = useCallback(async () => {
     const trimmed = prompt.trim()
     if (!trimmed || generating) return
@@ -161,6 +192,8 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
       numImages,
       model: effectiveModel || undefined,
       provider: selectedProvider,
+      imageDataUri: inputImage || undefined,
+      mode: inputImage ? 'edit' : 'generate',
     }
 
     try {
@@ -176,7 +209,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
     } finally {
       setGenerating(false)
     }
-  }, [prompt, negativePrompt, aspectRatio, numImages, generating, onRefreshPictures, selectedProvider, effectiveModel])
+  }, [prompt, negativePrompt, aspectRatio, numImages, generating, onRefreshPictures, selectedProvider, effectiveModel, inputImage])
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
@@ -299,11 +332,61 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
             </div>
           )}
 
+          {/* Image Editing / Source Image Attachment */}
+          <div className="img-studio-field">
+            <label className="img-studio-label">
+              Source Image (Optional for Image Editing)
+              <span className="img-studio-label-hint">Upload an image to edit / inpaint</span>
+            </label>
+            {inputImage ? (
+              <div className="img-studio-preview-card">
+                <img src={inputImage} alt="Input source" className="img-studio-preview-thumb" />
+                <div className="img-studio-preview-info">
+                  <div className="img-studio-preview-title">
+                    <span>Source Image Attached</span>
+                  </div>
+                  <div className="img-studio-preview-subtitle">Ready for Image Editing</div>
+                </div>
+                <button
+                  type="button"
+                  className="img-studio-preview-remove"
+                  onClick={() => setInputImage(null)}
+                >
+                  ✕ Remove
+                </button>
+              </div>
+            ) : (
+              <div
+                className={`img-studio-dropzone ${isDragging ? 'is-dragging' : ''}`}
+                onClick={() => fileInputRef.current?.click()}
+                onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
+                onDragLeave={() => setIsDragging(false)}
+                onDrop={handleDrop}
+              >
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  onChange={handleImageUpload}
+                  disabled={generating}
+                  style={{ display: 'none' }}
+                />
+                <svg className="img-studio-dropzone-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                  <polyline points="17 8 12 3 7 8"/>
+                  <line x1="12" y1="3" x2="12" y2="15"/>
+                </svg>
+                <div className="img-studio-dropzone-text">Click or Drag & Drop image here</div>
+                <div className="img-studio-dropzone-subtext">PNG, JPG, WEBP up to 10MB</div>
+              </div>
+            )}
+          </div>
+
           {/* Prompt */}
           <div className="img-studio-field">
             <label className="img-studio-label" htmlFor="img-studio-prompt">
-              Prompt
-              <span className="img-studio-label-hint">Describe the image you want</span>
+              {inputImage ? 'Editing Instruction Prompt' : 'Prompt'}
+              <span className="img-studio-label-hint">{inputImage ? 'Describe what to edit or remove' : 'Describe the image you want'}</span>
             </label>
             <textarea
               id="img-studio-prompt"

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

@@ -7,6 +7,7 @@ import {
   getRecentInteractions,
   saveSystemInteraction,
   getRuntimeStatus,
+  setActiveModel,
   listChatSessions,
   listSavedPictures,
   saveInteractionAgentActivity,
@@ -25,6 +26,7 @@ import ChatPanel from './ChatPanel'
 import DashboardSidebar, { type DashboardView } from './DashboardSidebar'
 import PicturesLibrary from './PicturesLibrary'
 import ImageStudioPanel from './ImageStudioPanel'
+import VeoStudioPanel from './VeoStudioPanel'
 import {
   errorMessage,
   readImage,
@@ -32,6 +34,8 @@ import {
   createTrimmedImagePreview,
   applyThemeStyles,
 } from '../../shared/utils/ui'
+import { executeSlashCommand } from '../../shared/utils/slashCommandProcessor'
+
 
 const DEFAULT_CONFIG = {
   theme: 'dark',
@@ -84,6 +88,7 @@ export default function MintDashboard() {
   const [sending, setSending] = useState(false)
   const [sendingMessage, setSendingMessage] = useState('')
   const [sendingImageCount, setSendingImageCount] = useState(0)
+  const [sendingVideoCount, setSendingVideoCount] = useState(0)
   const [streamedReply, setStreamedReply] = useState('')
   const [streamedResponse, setStreamedResponse] = useState<ChatResponse | null>(null)
   const [streamingConversationId, setStreamingConversationId] = useState<string | null>(null)
@@ -92,6 +97,7 @@ export default function MintDashboard() {
   const [thinkingExpanded, setThinkingExpanded] = useState<Record<string, boolean>>({})
   const liveThinkingOpenRef = useRef(true)
   const [imageAttachments, setImageAttachments] = useState<Array<{ dataUri: string; name: string; previewDataUri?: string }>>([])
+  const [videoAttachments, setVideoAttachments] = useState<Array<{ dataUri: string; name: string }>>([])
   const [documentAttachment, setDocumentAttachment] = useState<DocumentAttachment | null>(null)
   const [pendingApproval, setPendingApproval] = useState<any | null>(null)
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => window.localStorage.getItem('mint:sidebar-collapsed') === 'true')
@@ -225,10 +231,25 @@ export default function MintDashboard() {
       if (failure?.status === 'rejected') setError(errorMessage(failure.reason))
       setDashboardDataReady(true)
     })
+    const handleWindowFocus = () => {
+      getRuntimeStatus().then(setStatus).catch(() => {})
+      window.settingsApi?.getSettings?.().then((loaded: any) => {
+        if (loaded) {
+          setSettingsConfig(loaded)
+          applyThemeStyles(loaded)
+        }
+      }).catch(() => {})
+    }
+    window.addEventListener('focus', handleWindowFocus)
+
     window.api?.onSettingsChanged?.((loaded: any) => {
       setSettingsConfig(loaded)
       applyThemeStyles(loaded)
+      getRuntimeStatus().then(setStatus).catch(() => {})
     })
+    return () => {
+      window.removeEventListener('focus', handleWindowFocus)
+    }
   }, [])
 
   useEffect(() => {
@@ -304,6 +325,7 @@ export default function MintDashboard() {
     promptText: string,
     options: {
       imageAttachments?: Array<{ dataUri: string; name: string; previewDataUri?: string }>
+      videoAttachments?: Array<{ dataUri: string; name: string }>
       audioDataUri?: string | null
       documentAttachment?: DocumentAttachment | null
       systemInstruction?: string
@@ -312,14 +334,17 @@ export default function MintDashboard() {
   ) {
     if (sending) return
     const outgoingImages = options.imageAttachments ?? []
+    const outgoingVideos = options.videoAttachments ?? []
     const outgoingDocument = options.documentAttachment ?? null
     const shouldUseAgentMode = agentMode || promptText.toLowerCase().startsWith('search web:')
     const outgoingImage = outgoingImages.map((img) => img.dataUri).join(' ')
+    const outgoingVideo = outgoingVideos.map((vid) => vid.dataUri).join(' ')
     const outgoingImageCount = outgoingImages.length
     setSending(true)
     setStreamingConversationId(conversationId)
     setSendingMessage(promptText)
     setSendingImageCount(outgoingImageCount)
+    setSendingVideoCount(outgoingVideos.length)
     setError('')
     setStreamedReply('')
     setStreamedResponse(null)
@@ -330,6 +355,7 @@ export default function MintDashboard() {
     if (options.clearComposer) {
       setMessage('')
       setImageAttachments([])
+      setVideoAttachments([])
       setDocumentAttachment(null)
     }
 
@@ -339,6 +365,7 @@ export default function MintDashboard() {
         (chunk) => setStreamedReply((current) => `${current}${chunk}`),
         outgoingImage,
         options.audioDataUri ?? null,
+        outgoingVideo,
         options.systemInstruction ?? '',
         (progress) => {
           progressSnapshot.push(progress)
@@ -379,6 +406,7 @@ export default function MintDashboard() {
       setAgentActivitySnapshots((current) => mergeActivitySnapshots(current, enrichedHistory))
       await refreshChatSessions()
       await refreshPictures()
+      getRuntimeStatus().then(setStatus).catch(() => {})
       setStreamedReply('')
       setStreamedResponse(null)
     } catch (reason) {
@@ -388,6 +416,7 @@ export default function MintDashboard() {
       setStreamingConversationId(null)
       setSendingMessage('')
       setSendingImageCount(0)
+      setSendingVideoCount(0)
     }
   }
 
@@ -395,12 +424,77 @@ export default function MintDashboard() {
     event.preventDefault()
     const trimmed = message.trim()
     const currentImages = imageAttachments
+    const currentVideos = videoAttachments
     const currentDocument = documentAttachment
-    const hasAttachments = currentImages.length > 0 || Boolean(currentDocument)
+    const hasAttachments = currentImages.length > 0 || currentVideos.length > 0 || Boolean(currentDocument)
     if ((!trimmed && !hasAttachments) || sending) return
-    const promptText = trimmed || (currentImages.length > 1 ? 'Describe these images.' : currentImages.length === 1 ? 'Describe this image.' : 'Summarize this document.')
+
+    if (trimmed.startsWith('/')) {
+      const activeP = status?.activeProvider || ''
+      const activeM = settingsConfig?.model || ''
+      const slashResult = executeSlashCommand(trimmed, {
+        activeProvider: activeP,
+        activeModel: activeM,
+        availableProviders: status?.availableProviders || [],
+        interactionsCount: interactions.length,
+        fastMode: settingsConfig?.fastMode ?? false,
+        multiAgent: settingsConfig?.multiAgent ?? false,
+      })
+
+      if (slashResult.handled) {
+        setMessage('')
+        setImageAttachments([])
+        setVideoAttachments([])
+        setDocumentAttachment(null)
+
+        if (slashResult.action === 'set_agent_mode') {
+          setAgentMode(true)
+          if (slashResult.payload?.prompt) {
+            await sendPrompt(slashResult.payload.prompt, { clearComposer: true })
+          }
+          return
+        }
+
+        if (slashResult.action === 'open_image_picker') {
+          document.getElementById('vision-file-input')?.click()
+          return
+        } else if (slashResult.action === 'open_plugins') {
+          setView('settings')
+          return
+        } else if (slashResult.action === 'generate_veo') {
+          setView('veo_studio')
+          return
+        } else if (slashResult.action === 'set_provider_model' && slashResult.payload?.target) {
+          const target = slashResult.payload.target
+          if (status?.availableProviders.includes(target)) {
+            setActiveModel(target).then(() => getRuntimeStatus().then(setStatus)).catch(() => {})
+          }
+        }
+
+        if (slashResult.systemText) {
+          const systemMsg = {
+            id: Date.now(),
+            userText: trimmed,
+            aiText: slashResult.systemText,
+            createdAt: new Date().toISOString(),
+            provider: 'system',
+            model: 'mint-cli',
+          }
+          setInteractions((prev) => [...prev, systemMsg])
+          saveSystemInteraction(conversationId, trimmed, slashResult.systemText || '', 'system', 'mint-cli').catch(() => {})
+        }
+        return
+      }
+    }
+
+    const promptText = trimmed || (
+      currentImages.length > 0 ? (currentImages.length > 1 ? 'Describe these images.' : 'Describe this image.') :
+      currentVideos.length > 0 ? (currentVideos.length > 1 ? 'Describe these videos.' : 'Describe this video.') :
+      'Summarize this document.'
+    )
     await sendPrompt(promptText, {
       imageAttachments: currentImages,
+      videoAttachments: currentVideos,
       documentAttachment: currentDocument,
       clearComposer: true,
     })
@@ -430,6 +524,28 @@ export default function MintDashboard() {
       event.target.value = ''
     }
   }
+  const MAX_VIDEO_BYTES = 25 * 1024 * 1024 // 25 MB
+  async function selectVideo(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+    try {
+      if (file.size > MAX_VIDEO_BYTES) {
+        setError(`Video is too large. Maximum allowed is ${Math.round(MAX_VIDEO_BYTES / (1024 * 1024))} MB.`)
+        return
+      }
+      const dataUri = await new Promise<string>((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onload = () => resolve(reader.result as string)
+        reader.onerror = reject
+        reader.readAsDataURL(file)
+      })
+      setVideoAttachments((current) => [...current, { dataUri, name: file.name }])
+    } catch (reason) {
+      setError(errorMessage(reason))
+    } finally {
+      event.target.value = ''
+    }
+  }
 
   function pasteImage(clipboardData: DataTransfer) {
     let file: File | null = null
@@ -606,6 +722,11 @@ export default function MintDashboard() {
     else if (provider === 'huggingface') providerName = 'HF'
     else if (provider === 'local_openai') providerName = 'Local'
     else if (provider === 'ollama') providerName = 'Ollama'
+    else if (provider.startsWith('custom:')) {
+      const id = provider.replace(/^custom:/, '')
+      const cp = (settingsConfig?.customProviders ?? []).find((p: any) => p.id === id)
+      providerName = cp?.displayName || id
+    }
 
     if (providerName && providerName === provider) {
       providerName = providerName.charAt(0).toUpperCase() + providerName.slice(1)
@@ -623,13 +744,21 @@ export default function MintDashboard() {
       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 ''
+      default: {
+        if (provider.startsWith('custom:')) {
+          const id = provider.replace(/^custom:/, '')
+          const cp = (config.customProviders ?? []).find((p: any) => p.id === id)
+          return (config.customModelSelections ?? {})[id] ?? cp?.models[0]?.modelId ?? ''
+        }
+        return ''
+      }
     }
   }
 
   async function changeProvider(provider: string) {
     try {
       const config = await window.settingsApi.getSettings()
+      if (config.aiProvider === provider) return
       config.aiProvider = provider
       await window.settingsApi.saveSettings(config)
       setSettingsConfig(config)
@@ -638,7 +767,7 @@ export default function MintDashboard() {
       // Record system event in chat history
       const activeModel = getActiveModelName(config, provider)
       const displayName = formatProviderChangeText(provider, activeModel)
-      await saveSystemInteraction(conversationId, displayName, 'system', 'provider_change')
+      await saveSystemInteraction(conversationId, displayName, '', 'system', 'provider_change')
       await refreshHistory()
     } catch (reason) {
       setError(errorMessage(reason))
@@ -649,6 +778,8 @@ export default function MintDashboard() {
     try {
       const config = await window.settingsApi.getSettings()
       const provider = config.aiProvider
+      const currentModel = getActiveModelName(config, provider)
+      if (currentModel === modelName) return
       if (provider === 'gemini') {
         config.geminiModel = modelName
       } else if (provider === 'openai') {
@@ -665,6 +796,12 @@ export default function MintDashboard() {
         config.localModelName = modelName
       } else if (provider === 'ollama') {
         config.ollamaModel = modelName
+      } else if (provider.startsWith('custom:')) {
+        const id = provider.replace(/^custom:/, '')
+        config.customModelSelections = {
+          ...(config.customModelSelections ?? {}),
+          [id]: modelName
+        }
       }
       await window.settingsApi.saveSettings(config)
       setSettingsConfig(config)
@@ -672,7 +809,7 @@ export default function MintDashboard() {
 
       // Record system event in chat history
       const displayName = formatProviderChangeText(provider, modelName)
-      await saveSystemInteraction(conversationId, displayName, 'system', 'provider_change')
+      await saveSystemInteraction(conversationId, displayName, '', 'system', 'provider_change')
       await refreshHistory()
     } catch (reason) {
       setError(errorMessage(reason))
@@ -724,11 +861,13 @@ export default function MintDashboard() {
             streamedReply={streamingConversationId === conversationId ? streamedReply : ''}
             streamedResponse={streamingConversationId === conversationId ? streamedResponse : null}
             agentProgress={streamingConversationId === conversationId ? agentProgress : []}
+            sendingVideoCount={streamingConversationId === conversationId ? sendingVideoCount : 0}
             agentActivitySnapshots={agentActivitySnapshots}
             thinkingExpanded={thinkingExpanded}
             onThinkingExpandedChange={handleThinkingExpandedChange}
             message={message}
             imageAttachments={imageAttachments}
+            videoAttachments={videoAttachments}
             documentName={documentAttachment?.filename ?? ''}
             pendingApproval={streamingConversationId === conversationId ? pendingApproval : null}
             smartContext={smartContext}
@@ -738,6 +877,7 @@ export default function MintDashboard() {
             welcomeInteraction={MOCK_WELCOME_INTERACTION}
             onSubmit={handleSubmit}
             onSelectImage={selectImage}
+            onSelectVideo={selectVideo}
             onSelectDocument={selectDocument}
             onPasteImage={pasteImage}
             onSetMessage={setMessage}
@@ -745,6 +885,9 @@ export default function MintDashboard() {
             onRemoveImage={(idx: number) => {
               setImageAttachments((current) => current.filter((_, i) => i !== idx))
             }}
+            onRemoveVideo={(idx: number) => {
+              setVideoAttachments((current) => current.filter((_, i) => i !== idx))
+            }}
             onRemoveDocument={() => setDocumentAttachment(null)}
             onStartWebSearch={startWebSearch}
             onCaptureScreen={captureScreen}
@@ -768,6 +911,14 @@ export default function MintDashboard() {
           }}
           onToggleMobileSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
         />
+        <VeoStudioPanel
+          view={view}
+          onSendToChat={(imgPrompt) => {
+            setView('chat')
+            setMessage(imgPrompt)
+          }}
+          onToggleMobileSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
+        />
       </div>
       <div className={`startup-loading ${startupReady ? 'is-hidden' : ''}`} aria-live="polite" aria-busy={!startupReady}>
         <div className="startup-loading-content">