@pheem49/mint 1.8.0 → 1.8.2

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

@@ -16,6 +16,7 @@ interface ImageStudioPanelProps {
   view: string
   onRefreshPictures?: () => void
   onSendToChat?: (dataUri: string, prompt: string) => void
+  onToggleMobileSidebar?: () => void
 }
 
 const ASPECT_OPTIONS: { value: AspectRatio; label: string; icon: string }[] = [
@@ -85,7 +86,7 @@ function SkeletonCard() {
   )
 }
 
-export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat }: ImageStudioPanelProps) {
+export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat, onToggleMobileSidebar }: ImageStudioPanelProps) {
   const [prompt, setPrompt] = useState('')
   const [negativePrompt, setNegativePrompt] = useState('')
   const [showNegative, setShowNegative] = useState(false)
@@ -206,6 +207,15 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
       {/* Header */}
       <header className="img-studio-header">
         <div className="img-studio-header-title">
+          <button
+            className="mobile-menu-btn"
+            type="button"
+            onClick={onToggleMobileSidebar}
+            aria-label="Toggle menu"
+            style={{ marginRight: '8px' }}
+          >
+            ☰
+          </button>
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
             <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"/>
           </svg>

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

@@ -12,9 +12,9 @@ import {
   selectWorkspaceDirectory,
   saveInteractionAgentActivity,
   streamChatMessage,
+  cancelChatMessage,
   submitToolApproval,
   listen,
-  readClipboardImage as readTauriClipboardImage,
   type AgentProgress,
   type ChatResponse,
   type ChatSession,
@@ -30,6 +30,13 @@ import type { ModelInteraction } from './ModelPanel'
 import PicturesLibrary from './PicturesLibrary'
 import WorkspacePanel from './WorkspacePanel'
 import WorkflowBuilderPanel from './WorkflowBuilderPanel'
+import {
+  errorMessage,
+  readImage,
+  readDocument,
+  createTrimmedImagePreview,
+  applyThemeStyles,
+} from '../../shared/utils/ui'
 
 const EXPRESSIONS = [
   "Default",
@@ -88,142 +95,6 @@ const MOCK_WELCOME_INTERACTION = {
   createdAt: new Date().toISOString(),
 }
 
-function errorMessage(reason: unknown) {
-  return reason instanceof Error ? reason.message : String(reason)
-}
-
-function readImage(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => resolve(String(reader.result))
-    reader.onerror = () => reject(reader.error ?? new Error('Unable to read image'))
-    reader.readAsDataURL(file)
-  })
-}
-
-function readDocument(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => resolve(String(reader.result))
-    reader.onerror = () => reject(reader.error ?? new Error('Unable to read document'))
-    reader.readAsDataURL(file)
-  })
-}
-
-async function createTrimmedImagePreview(dataUri: string): Promise<string> {
-  const image = await new Promise<HTMLImageElement>((resolve, reject) => {
-    const nextImage = new Image()
-    nextImage.onload = () => resolve(nextImage)
-    nextImage.onerror = () => reject(new Error('Unable to prepare image preview'))
-    nextImage.src = dataUri
-  })
-
-  const canvas = document.createElement('canvas')
-  canvas.width = image.naturalWidth || image.width
-  canvas.height = image.naturalHeight || image.height
-  const context = canvas.getContext('2d', { willReadFrequently: true })
-  if (!context || canvas.width === 0 || canvas.height === 0) return dataUri
-
-  context.drawImage(image, 0, 0)
-  const pixels = context.getImageData(0, 0, canvas.width, canvas.height)
-  let minX = canvas.width
-  let minY = canvas.height
-  let maxX = -1
-  let maxY = -1
-
-  for (let y = 0; y < canvas.height; y += 1) {
-    for (let x = 0; x < canvas.width; x += 1) {
-      const alpha = pixels.data[(y * canvas.width + x) * 4 + 3]
-      if (alpha > 12) {
-        minX = Math.min(minX, x)
-        minY = Math.min(minY, y)
-        maxX = Math.max(maxX, x)
-        maxY = Math.max(maxY, y)
-      }
-    }
-  }
-
-  if (maxX < minX || maxY < minY) return dataUri
-
-  const padding = 8
-  const sx = Math.max(0, minX - padding)
-  const sy = Math.max(0, minY - padding)
-  const sw = Math.min(canvas.width - sx, maxX - minX + 1 + padding * 2)
-  const sh = Math.min(canvas.height - sy, maxY - minY + 1 + padding * 2)
-
-  if (sw >= canvas.width * 0.92 && sh >= canvas.height * 0.92) return dataUri
-
-  const previewCanvas = document.createElement('canvas')
-  previewCanvas.width = sw
-  previewCanvas.height = sh
-  const previewContext = previewCanvas.getContext('2d')
-  if (!previewContext) return dataUri
-  previewContext.drawImage(canvas, sx, sy, sw, sh, 0, 0, sw, sh)
-  return previewCanvas.toDataURL('image/png')
-}
-
-const lightenColor = (hex: string, amount: number) => {
-  const clean = hex.replace('#', '')
-  if (clean.length !== 6) return hex
-  const num = parseInt(clean, 16)
-  const r = Math.min(255, (num >> 16) + amount)
-  const g = Math.min(255, ((num >> 8) & 0x00FF) + amount)
-  const b = Math.min(255, (num & 0x0000FF) + amount)
-  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`
-}
-
-const hexToRgb = (hex: string) => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16),
-  } : { r: 15, g: 23, b: 42 }
-}
-
-const applyThemeStyles = (cfg: any) => {
-  const theme = cfg.theme || 'dark'
-  const accentColor = cfg.accentColor || '#4f83e6'
-  const systemTextColor = cfg.systemTextColor || '#f8fafc'
-
-  document.documentElement.setAttribute('data-theme', theme)
-  document.documentElement.style.setProperty('--accent', accentColor)
-  document.documentElement.style.setProperty('--accent-hover', lightenColor(accentColor, 20))
-  document.documentElement.style.setProperty('--text-main', systemTextColor)
-  document.documentElement.style.setProperty('--glass-blur', cfg.glassBlur || 'blur(16px)')
-  document.body.style.fontFamily = cfg.fontFamily || "'Outfit', sans-serif"
-  document.documentElement.style.fontSize = cfg.fontSize || '18px'
-
-  if (theme === 'custom') {
-    if (cfg.customBgStart && cfg.customBgEnd) {
-      document.documentElement.style.setProperty('--bg-color', cfg.customBgStart)
-      document.documentElement.style.setProperty('--bg-gradient', `linear-gradient(135deg, ${cfg.customBgStart} 0%, ${cfg.customBgEnd} 100%)`)
-    }
-    if (cfg.customPanelBg) {
-      const rgb = hexToRgb(cfg.customPanelBg)
-      document.documentElement.style.setProperty('--panel-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.75)`)
-      document.documentElement.style.setProperty('--panel-raised', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.82)`)
-      document.documentElement.style.setProperty('--panel-soft', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.46)`)
-      document.documentElement.style.setProperty('--chrome-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.88)`)
-      document.documentElement.style.setProperty('--surface-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.62)`)
-      document.documentElement.style.setProperty('--surface-strong', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.86)`)
-      document.documentElement.style.setProperty('--input-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.72)`)
-    }
-    return
-  }
-
-  ;[
-    '--bg-color',
-    '--bg-gradient',
-    '--panel-bg',
-    '--panel-raised',
-    '--panel-soft',
-    '--chrome-bg',
-    '--surface-bg',
-    '--surface-strong',
-    '--input-bg',
-  ].forEach((name) => document.documentElement.style.removeProperty(name))
-}
 
 export default function MintDashboard() {
   const [view, setView] = useState<DashboardView>('chat')
@@ -268,6 +139,7 @@ export default function MintDashboard() {
   const [chatSessions, setChatSessions] = useState<ChatSession[]>([])
   const chatEnd = useRef<HTMLDivElement | null>(null)
   const startupReady = (dashboardDataReady && modelReady) || startupTimedOut
+  const [proactiveSuggestion, setProactiveSuggestion] = useState<any>(null)
 
   const [isSearchOpen, setIsSearchOpen] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
@@ -419,10 +291,14 @@ export default function MintDashboard() {
         setPendingApproval(event.payload)
       }
     })
+    const unlistenProactive = window.api.onProactiveSuggestion?.((suggestion: any) => {
+      setProactiveSuggestion(suggestion)
+    })
     return () => {
       unlistenPromise?.then?.((unlisten) => unlisten?.())
       unlistenSpotlight?.then?.((unlisten) => unlisten?.())
       unlistenVision?.then?.((unlisten) => unlisten?.())
+      unlistenProactive?.then?.((unlisten) => unlisten?.())
     }
   }, [])
 
@@ -502,14 +378,14 @@ export default function MintDashboard() {
     }
   }, [sending])
 
-  async function handleApproval(approved: boolean, autoApproveSession = false) {
+  async function handleApproval(approved: boolean, autoApproveSession = false, answer?: string) {
     if (!pendingApproval) return
     try {
       if (autoApproveSession) {
         sessionAutoApprovedRef.current = true
         setSessionAutoApproved(true)
       }
-      await submitToolApproval(pendingApproval.token, approved)
+      await submitToolApproval(pendingApproval.token, approved, answer)
     } catch (reason) {
       setError(errorMessage(reason))
     } finally {
@@ -517,6 +393,20 @@ export default function MintDashboard() {
     }
   }
 
+  async function handleCancelMessage() {
+    if (!sending || !streamingConversationId) return
+    try {
+      await cancelChatMessage(streamingConversationId)
+    } catch (e) {
+      console.error("Failed to cancel message stream:", e)
+    } finally {
+      setSending(false)
+      setStreamingConversationId(null)
+      setSendingMessage('')
+      setSendingImageCount(0)
+    }
+  }
+
   async function sendPrompt(
     promptText: string,
     options: {
@@ -608,6 +498,17 @@ export default function MintDashboard() {
     }
   }
 
+  const handleProactiveAction = async (action: any) => {
+    setProactiveSuggestion(null)
+    if (action && action.type !== 'none') {
+      try {
+        await window.api.executeProactiveAction(action)
+      } catch (err) {
+        setError(String(err))
+      }
+    }
+  }
+
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault()
     const trimmed = message.trim()
@@ -689,37 +590,6 @@ export default function MintDashboard() {
     return true
   }
 
-  async function readClipboardImage() {
-    try {
-      const dataUri = await readTauriClipboardImage()
-      if (dataUri) {
-        const previewDataUri = await createTrimmedImagePreview(dataUri).catch(() => dataUri)
-        setImageAttachments((current) => [...current, { dataUri, previewDataUri, name: 'Pasted image' }])
-        return true
-      }
-    } catch (err) {
-      console.warn('Tauri clipboard fallback error:', err)
-    }
-
-    try {
-      if (!navigator.clipboard?.read) return false
-      const items = await navigator.clipboard.read()
-      for (const item of items) {
-        const imageType = item.types.find((type) => type.startsWith('image/'))
-        if (!imageType) continue
-        const blob = await item.getType(imageType)
-        const file = new File([blob], 'Pasted image', { type: imageType })
-        const dataUri = await readImage(file)
-        const previewDataUri = await createTrimmedImagePreview(dataUri).catch(() => dataUri)
-        setImageAttachments((current) => [...current, { dataUri, previewDataUri, name: 'Pasted image' }])
-        return true
-      }
-      return false
-    } catch {
-      // Some environments expose pasted images only through ClipboardEvent.
-      return false
-    }
-  }
 
   async function selectDocument(event: ChangeEvent<HTMLInputElement>) {
     const file = event.target.files?.[0]
@@ -1018,6 +888,28 @@ export default function MintDashboard() {
           onSetSearchOpen={setIsSearchOpen}
         />
         <main className={`assistant-workspace ${layoutPreset === 'chat-wide' ? 'layout-chat-wide' : 'layout-model-wide'} ${modelVisible || view === 'workspace' ? '' : 'model-hidden'} ${view === 'workspace' ? 'workspace-open' : ''}`}>
+          {proactiveSuggestion && (
+            <div className="proactive-bar" style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 100 }}>
+              <div className="proactive-header">
+                <span className="proactive-icon">✨</span>
+                <div className="proactive-message">{proactiveSuggestion.message}</div>
+                <button className="proactive-dismiss-btn" onClick={() => setProactiveSuggestion(null)}>
+                  Dismiss
+                </button>
+              </div>
+              <div className="proactive-chips">
+                {proactiveSuggestion.suggestions?.map((sug: any, i: number) => (
+                  <button
+                    key={i}
+                    className="suggestion-chip"
+                    onClick={() => handleProactiveAction(sug.action)}
+                  >
+                    {sug.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
           {view === 'workspace' && (
             <WorkspacePanel
               agentMode={agentMode}
@@ -1072,7 +964,6 @@ export default function MintDashboard() {
             onSelectImage={selectImage}
             onSelectDocument={selectDocument}
             onPasteImage={pasteImage}
-            onReadClipboardImage={readClipboardImage}
             onSetMessage={setMessage}
             onSendVoiceMessage={sendVoiceMessage}
             onRemoveImage={(idx: number) => {
@@ -1088,6 +979,7 @@ export default function MintDashboard() {
             settingsConfig={settingsConfig}
             onSetModel={changeModel}
             onApproval={handleApproval}
+            onCancelMessage={handleCancelMessage}
           />
         </main>
         <PicturesLibrary view={view} pictures={pictures} onSetView={setView} onRefreshPictures={refreshPictures} />

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

@@ -1,3 +1,4 @@
+import { useEffect, useMemo, useState } from 'react'
 import { type PictureEntry, convertFileSrc } from '../tauri'
 import type { DashboardView } from './DashboardSidebar'
 
@@ -9,6 +10,16 @@ interface PicturesLibraryProps {
 }
 
 export default function PicturesLibrary({ view, pictures, onSetView, onRefreshPictures }: PicturesLibraryProps) {
+  const [visibleCount, setVisibleCount] = useState(24)
+  const visiblePictures = useMemo(
+    () => pictures.slice(0, visibleCount),
+    [pictures, visibleCount],
+  )
+
+  useEffect(() => {
+    setVisibleCount(24)
+  }, [view, pictures])
+
   return (
     <section className={`pictures-library ${view === 'pictures' ? 'is-visible' : ''}`} aria-hidden={view !== 'pictures'}>
       <header className="pictures-header">
@@ -34,14 +45,27 @@ export default function PicturesLibrary({ view, pictures, onSetView, onRefreshPi
           <span>Images appear here after a message with an attachment is sent successfully.</span>
         </div>
       ) : (
-        <div className="pictures-grid">
-          {pictures.map((picture, index) => (
-            <article className="picture-card" key={picture.id}>
-              <img src={convertFileSrc(picture.thumbnailPath || picture.thumbnailUrl || picture.path)} alt={picture.message || picture.filename} loading={index < 6 ? 'eager' : 'lazy'} decoding="async" />
-              <div className="picture-card-meta"><span>{picture.message || picture.filename}</span></div>
-            </article>
-          ))}
-        </div>
+        <>
+          <div className="pictures-grid">
+            {visiblePictures.map((picture, index) => (
+              <article className="picture-card" key={picture.id}>
+                <img src={convertFileSrc(picture.thumbnailPath || picture.thumbnailUrl || picture.path)} alt={picture.message || picture.filename} loading={index < 6 ? 'eager' : 'lazy'} decoding="async" />
+                <div className="picture-card-meta"><span>{picture.message || picture.filename}</span></div>
+              </article>
+            ))}
+          </div>
+          {visibleCount < pictures.length && (
+            <div className="pictures-load-more-container">
+              <button
+                type="button"
+                className="pictures-load-more-btn"
+                onClick={() => setVisibleCount((prev) => prev + 24)}
+              >
+                Load More ({pictures.length - visibleCount} remaining)
+              </button>
+            </div>
+          )}
+        </>
       )}
     </section>
   )